fix(RuiMenuSelect): extend component to work as v-select replacement

example/src/views/IconView.vue

@@ -1,12 +1,21 @@
 <script lang="ts" setup>
-import { RuiIcon } from '@rotki/ui-library-compat';
+import { type LogoProps, RuiIcon, RuiLogo } from '@rotki/ui-library-compat';
 import { ref } from 'vue';
 
 const icons = ref([
   { name: 'moon-line', size: 24 },
   { name: 'sun-line', size: 24 },
   { name: 'arrow-right-line', size: 24 },
 ]);
+
+const logos = ref<(LogoProps & { name: string })[]>([
+  { name: 'Default', customSrc: undefined },
+  { name: 'Custom', customSrc: 'https://raw.githubusercontent.com/rotki/data/hohoho/assets/icons/drawer_logo.png' },
+  { name: 'Custom failed fallback to default', customSrc: 'not-existing-path' },
+  { name: 'Custom failed fallback to default with app name', customSrc: 'not-existing-path', text: true },
+  { name: 'Default with app name', customSrc: undefined, text: true },
+  { name: 'Custom with app name', customSrc: 'https://raw.githubusercontent.com/rotki/data/main/assets/icons/drawer_logo.png', text: true },
+]);
 </script>
 
 <template>
@@ -24,5 +33,24 @@ const icons = ref([
         v-bind="icon"
       />
     </div>
+    <h2
+      class="text-h4 mb-6"
+      data-cy="logos"
+    >
+      rotki Logo
+    </h2>
+    <div class="grid gap-4 grid-rows-2 grid-cols-3">
+      <div
+        v-for="(logo, i) in logos"
+        :key="i"
+      >
+        <RuiLogo
+          v-bind="logo"
+        />
+        <div class="mt-4">
+          {{ logo.name }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>

example/src/views/MenuView.vue

@@ -153,15 +153,15 @@ const menuSelect = ref<MenuSelectProps[]>([
   },
   {
     disabled: false,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
     options,
   },
   {
     disabled: true,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -186,7 +186,7 @@ const menuSelect = ref<MenuSelectProps[]>([
   {
     dense: true,
     disabled: false,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -195,7 +195,7 @@ const menuSelect = ref<MenuSelectProps[]>([
   {
     dense: true,
     disabled: true,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -209,36 +209,46 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
+    label: 'Menu with very long name to test and see truncate behaviour',
+    hint: 'lorem ipsum dolor',
     options,
   },
   {
-    disabled: true,
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
+    dense: true,
+    errorMessages: ['This is required'],
+    hint: 'lorem ipsum dolor',
+    showDetails: true,
     options,
   },
   {
     disabled: false,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
+    successMessages: ['lgtm!'],
+    showDetails: true,
     value: undefined,
     options,
   },
   {
     disabled: true,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
     options,
   },
 ]);
+
+const test = ref(null);
 </script>
 
 <template>
   <div>
+    <slot ref="test" />
     <h2
       class="text-h4 mb-6"
       data-cy="menus"
@@ -249,7 +259,7 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
       <div
         v-for="(menu, i) in menus"
         :key="i"
-        class="p-4"
+        class="py-4"
       >
         <RuiMenu
           v-bind="objectOmit(menu, ['buttonColor'])"
@@ -280,7 +290,7 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
       <div
         v-for="(menu, i) in menuSelect"
         :key="i"
-        class="p-4"
+        class="py-4"
       >
         <RuiMenuSelect
           v-model="menu.value"
@@ -293,38 +303,98 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
       class="text-h6 mt-6"
       data-cy="select-menus-custom"
     >
-      Select Menus: custom activator
+      Select Menus: custom activator content
     </h4>
     <div class="grid gap-6 grid-cols-4">
       <div
         v-for="(menu, i) in menuSelectCustom"
         :key="i"
-        class="p-4"
+        class="py-4"
       >
         <RuiMenuSelect
           v-model="menu.value"
           v-bind="objectOmit(menu, ['value'])"
           :data-cy="`select-menu-custom-${i}`"
+          wrappe-classr="w-full"
         >
-          <template #activator="{ on, disabled, open }">
+          <template #activator="{ on, disabled, open, value }">
             <RuiButton
+              class="!rounded-md border"
               data-cy="activator"
+              variant="list"
               :disabled="disabled"
               v-on="on"
             >
-              Menu
+              {{ value ? value.label : 'Choose option' }}
               <template #append>
                 <RuiIcon
                   class="transition"
                   :class="[{ 'rotate-180': open }]"
                   name="arrow-drop-down-fill"
-                  size="24"
+                  size="32"
                 />
               </template>
             </RuiButton>
           </template>
         </RuiMenuSelect>
       </div>
     </div>
+    <h4
+      class="text-h6 mt-6"
+      data-cy="select-menus-custom-inner"
+    >
+      Select Menus: custom activator inner content
+    </h4>
+    <div class="grid gap-6 grid-cols-4">
+      <div
+        v-for="(menu, i) in menuSelectCustom"
+        :key="i"
+        class="py-4"
+      >
+        <RuiMenuSelect
+          v-model="menu.value"
+          v-bind="objectOmit(menu, ['value'])"
+          :data-cy="`select-menu-custom-inner-${i}`"
+          full-width
+          float-label
+          clearable
+          variant="outlined"
+        >
+          <template #activator.text="{ value }">
+            {{ value.id }} | {{ value.label }}
+          </template>
+        </RuiMenuSelect>
+      </div>
+    </div>
+    <h4
+      class="text-h6 mt-6"
+      data-cy="select-menus-custom-options"
+    >
+      Select Menus: custom options
+    </h4>
+    <div class="grid gap-6 grid-cols-4">
+      <div
+        v-for="(menu, i) in menuSelectCustom"
+        :key="i"
+        class="py-4"
+      >
+        <RuiMenuSelect
+          v-model="menu.value"
+          v-bind="objectOmit(menu, ['value'])"
+          :append-width="1.5"
+          :data-cy="`select-menu-custom-options-${i}`"
+          full-width
+        >
+          <template #item.append="{ active }">
+            <RuiIcon
+              v-if="active"
+              class="transition"
+              name="check-line"
+              size="24"
+            />
+          </template>
+        </RuiMenuSelect>
+      </div>
+    </div>
   </div>
 </template>

src/components/accordions/accordions/Accordions.vue

@@ -31,7 +31,7 @@ const children = computed(() => {
   const multipleVal = get(multiple);
 
   return accordions.map((accordion, index) => {
-    // @ts-expect-error
+    // @ts-expect-error the typings throw a false error
     // The componentOptions.propsData is messed when combined with props from the parent.
     // So use `initialPropsData`, the original `propsData` that haven't touched by the code below.
     const propsData = (accordion.componentOptions?.initialPropsData

src/components/buttons/button/Button.vue

@@ -284,6 +284,10 @@ const slots = useSlots();
     &.sm {
       @apply px-3 py-1;
     }
+
+    .label {
+      @apply w-full;
+    }
   }
 
   &.icon {

src/components/forms/select/RuiMenuSelect.spec.ts

@@ -34,8 +34,8 @@ describe('menu select', () => {
       },
     });
 
-    expect(wrapper.get('label').classes()).toMatch(/_activator_/);
-    expect(wrapper.find('label span[class*=label]').exists()).toBeTruthy();
+    expect(wrapper.get('div[data-id="activator"]').classes()).toMatch(/_activator_/);
+    expect(wrapper.find('div[data-id="activator"] span[class*=label]').exists()).toBeTruthy();
     expect(wrapper.find('span > svg').exists()).toBeTruthy();
   });
 
@@ -49,7 +49,7 @@ describe('menu select', () => {
         value: options[4],
       },
     });
-    expect(wrapper.find('label[aria-disabled]').exists()).toBeTruthy();
-    expect(wrapper.find('label[aria-disabled]').text()).toMatch('Spain');
+    expect(wrapper.find('div[aria-disabled]').exists()).toBeTruthy();
+    expect(wrapper.find('div[aria-disabled]').text()).toMatch('Spain');
   });
 });

src/components/forms/select/RuiMenuSelect.stories.ts

@@ -48,8 +48,12 @@ const meta: Meta<Props> = {
     dense: { control: 'boolean' },
     disabled: { control: 'boolean' },
     options: { control: 'array', defaultValue: [] },
-    outlined: { control: 'boolean' },
     value: { control: 'string' },
+    variant: {
+      control: 'select',
+      defaultValue: 'default',
+      options: ['default', 'outlined', 'filled'],
+    },
   },
   component: RuiMenuSelect as any,
   parameters: {
@@ -84,19 +88,19 @@ export const DefaultDisabled: Story = {
 export const Outlined: Story = {
   args: {
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
 export const OutlinedDisabled: Story = {
   args: {
     disabled: true,
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
@@ -105,9 +109,9 @@ export const OutlinedDense: Story = {
     dense: false,
     disabled: true,
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
@@ -116,9 +120,9 @@ export const OutlinedDisabledDense: Story = {
     dense: true,
     disabled: true,
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };