fix(MenuSelect): set full-width automatically

rotki · May 14, 2024 · 1a8fbf1 · 1a8fbf1
1 parent 56d3eb2
commit 1a8fbf1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 19 deletions.
diff --git a/example/src/views/MenuView.vue b/example/src/views/MenuView.vue
@@ -313,7 +313,7 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
         <RuiMenu
           v-bind="objectOmit(menu, ['buttonColor'])"
           :data-cy="`menu-${i}`"
-          :open-delay="50"
+          :open-delay="1"
         >
           <template #activator="{ on, disabled }">
             <RuiButton
@@ -347,7 +347,6 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
           v-model="menu.value"
           v-bind="objectOmit(menu, ['value'])"
           :data-cy="`select-menu-${i}`"
-          full-width
         />
       </div>
     </div>
@@ -367,7 +366,6 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
           v-model="menu.value"
           v-bind="objectOmit(menu, ['value'])"
           :data-cy="`select-menu-custom-${i}`"
-          full-width
         >
           <template #activator="{ on, disabled, open, value }">
             <RuiButton
@@ -408,7 +406,6 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
           v-bind="objectOmit(menu, ['value'])"
           :data-cy="`select-menu-custom-inner-${i}`"
           :item-height="menu.dense ? undefined : 80"
-          full-width
           clearable
           :label-class="menu.dense ? undefined : 'h-20'"
           variant="outlined"
@@ -444,7 +441,6 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
           v-bind="objectOmit(menu, ['value'])"
           :append-width="1.5"
           :data-cy="`select-menu-custom-options-${i}`"
-          full-width
         >
           <template #item.append="{ active }">
             <RuiIcon
@@ -474,7 +470,6 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
           v-bind="objectOmit(menu, ['value'])"
           :append-width="1.5"
           :data-cy="`select-menu-custom-options-${i}`"
-          full-width
         >
           <template #item.append="{ active }">
             <RuiIcon
@@ -503,7 +498,6 @@ const menuSelectPrimitive = ref<MenuSelectProps[]>([
           v-bind="objectOmit(menu, ['value'])"
           :append-width="1.5"
           :data-cy="`select-menu-readonly-${i}`"
-          full-width
           read-only
         >
           <template #item.append="{ active }">

diff --git a/src/components/forms/select/RuiMenuSelect.vue b/src/components/forms/select/RuiMenuSelect.vue
@@ -16,7 +16,6 @@ export interface Props {
   disabled?: boolean;
   readOnly?: boolean;
   dense?: boolean;
-  fullWidth?: boolean;
   clearable?: boolean;
   label?: string;
   menuOptions?: MenuProps;
@@ -144,8 +143,9 @@ function setValue(val: T) {
 <template>
   <RuiMenu
     v-model="isOpen"
-    :class="[css.wrapper, { 'w-full': fullWidth }]"
-    v-bind="{ ...menuOptions, errorMessages, successMessages, hint, dense, fullWidth, showDetails, disabled }"
+    :class="css.wrapper"
+    full-width
+    v-bind="{ ...menuOptions, errorMessages, successMessages, hint, dense, showDetails, disabled }"
   >
     <template #activator="{ on, open, hasError, hasSuccess }">
       <slot
@@ -169,7 +169,6 @@ function setValue(val: T) {
               [css['with-value']]: !!value,
               [css['with-error']]: hasError,
               [css['with-success']]: hasSuccess && !hasError,
-              'w-full': fullWidth,
             },
           ]"
           data-id="activator"
@@ -194,7 +193,8 @@ function setValue(val: T) {
           </span>
           <span
             v-if="value"
-            :class="[css.value, { 'w-full': fullWidth }]"
+            class="w-full"
+            :class="css.value"
           >
             <slot
               name="activator.prepend"
@@ -244,7 +244,7 @@ function setValue(val: T) {
     <template #default="{ width }">
       <div
         :class="[css.menu, menuClass]"
-        :style="{ width: fullWidth ? `${width / 16}rem` : menuWidth }"
+        :style="{ width: `${width}px`, minWidth: menuWidth }"
         v-bind="virtualContainerProps"
         @scroll="containerProps.onScroll"
       >
@@ -288,10 +288,10 @@ function setValue(val: T) {
 
 <style lang="scss" module>
 .wrapper {
-  @apply max-w-full inline-flex flex-col;
+  @apply w-full inline-flex flex-col;
 
   .activator {
-    @apply relative inline-flex items-center max-w-full;
+    @apply relative inline-flex items-center w-full;
     @apply outline-none focus:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;
     @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;
 
@@ -367,7 +367,7 @@ function setValue(val: T) {
 
     .label {
       @apply text-rui-text-secondary;
-      max-width: calc(100% - 2.5em);
+      max-width: calc(100% - 2.5rem);
     }
 
     .label,

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -136,7 +136,7 @@ import {
   default as RuiAccordion,
 } from '@/components/accordions/accordion/Accordion.vue';
 import {
-  type Props as BottomSheetProps,
+  type BottomSheetProps,
   default as RuiBottomSheet,
 } from '@/components/overlays/bottom-sheet/BottomSheet.vue';
 import {

diff --git a/src/components/overlays/bottom-sheet/BottomSheet.vue b/src/components/overlays/bottom-sheet/BottomSheet.vue
@@ -2,7 +2,7 @@
 import RuiDialog from '@/components/overlays/dialog/Dialog.vue';
 
 // keep these props in sync with Dialog props
-export interface Props {
+export interface BottomSheetProps {
   value?: boolean;
   persistent?: boolean;
   width?: string | number;
@@ -13,7 +13,7 @@ defineOptions({
   name: 'RuiBottomSheet',
 });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<BottomSheetProps>(), {
   value: false,
   persistent: false,
 });