chore(SelectMenu): move resolve class logic into template

src/runtime/app.config.ts

@@ -322,7 +322,11 @@ const selectMenu = {
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
   input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 u-text-gray-700 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500',
   option: {
-    base: 'cursor-default select-none relative px-2 py-1.5 rounded-md text-sm text-gray-900 dark:text-white flex items-center justify-between gap-1',
+    base: 'cursor-default select-none relative flex items-center justify-between gap-1',
+    rounded: 'rounded-md',
+    spacing: 'px-2 py-1.5',
+    size: 'text-sm',
+    color: 'text-gray-900 dark:text-white',
     container: 'flex items-center gap-2',
     active: 'bg-gray-100 dark:bg-gray-900',
     inactive: '',

src/runtime/components/forms/SelectMenu.vue

@@ -62,7 +62,7 @@
             :value="option"
             :disabled="option.disabled"
           >
-            <li :class="resolveOptionClass({ active, disabled: optionDisabled })">
+            <li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
               <div :class="ui.option.container">
                 <slot name="option" :option="option" :active="active" :selected="selected">
                   <UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
@@ -85,7 +85,7 @@
           </component>
 
           <component :is="searchable ? 'ComboboxOption' : 'ListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
-            <li :class="resolveOptionClass({ active })">
+            <li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
               <div :class="ui.option.container">
                 <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
                   <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
@@ -292,14 +292,6 @@ export default defineComponent({
       }
     })
 
-    function resolveOptionClass ({ active, disabled }: { active: boolean, disabled?: boolean }) {
-      return classNames(
-        ui.value.option.base,
-        active ? ui.value.option.active : ui.value.option.inactive,
-        disabled && ui.value.option.disabled
-      )
-    }
-
     function onUpdate (event: any) {
       if (query.value && searchInput.value?.$el) {
         query.value = ''
@@ -321,7 +313,6 @@ export default defineComponent({
       filteredOptions,
       queryOption,
       query,
-      resolveOptionClass,
       onUpdate
     }
   }