chore(SelectCustom): improve option slot

src/runtime/components/forms/SelectCustom.vue

@@ -36,12 +36,12 @@
             :value="option"
             :disabled="option.disabled"
           >
-            <li :class="resolveOptionClass({ active, disabled })">
-              <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+            <li :class="resolveOptionClass({ active, selected, disabled })">
+              <div :class="listOptionContainerClass">
                 <slot name="option" :option="option" :active="active" :selected="selected">
-                  {{ option[textAttribute] }}
+                  <span class="block truncate">{{ option[textAttribute] }}</span>
                 </slot>
-              </span>
+              </div>
 
               <span v-if="selected" :class="resolveOptionIconClass({ active })">
                 <Icon :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
@@ -147,6 +147,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.selectCustom.list.option.base
   },
+  listOptionContainerClass: {
+    type: String,
+    default: () => $ui.selectCustom.list.option.container
+  },
   listOptionActiveClass: {
     type: String,
     default: () => $ui.selectCustom.list.option.active
@@ -155,6 +159,14 @@ const props = defineProps({
     type: String,
     default: () => $ui.selectCustom.list.option.inactive
   },
+  listOptionSelectedClass: {
+    type: String,
+    default: () => $ui.selectCustom.list.option.selected
+  },
+  listOptionUnselectedClass: {
+    type: String,
+    default: () => $ui.selectCustom.list.option.unselected
+  },
   listOptionDisabledClass: {
     type: String,
     default: () => $ui.selectCustom.list.option.disabled
@@ -234,10 +246,11 @@ const iconWrapperClass = classNames(
   $ui.selectCustom.icon.trailing.wrapper
 )
 
-function resolveOptionClass ({ active, disabled }: { active: boolean, disabled: boolean }) {
+function resolveOptionClass ({ active, selected, disabled }: { active: boolean, selected: boolean, disabled: boolean }) {
   return classNames(
     props.listOptionBaseClass,
     active ? props.listOptionActiveClass : props.listOptionInactiveClass,
+    selected ? props.listOptionSelectedClass : props.listOptionUnselectedClass,
     disabled && props.listOptionDisabledClass
   )
 }

src/runtime/presets/default.ts

@@ -194,9 +194,12 @@ export default (variantColors: string[]) => {
       container: 'z-10 w-full py-1',
       base: 'u-bg-white shadow-lg rounded-md ring-1 u-ring-gray-200 focus:outline-none overflow-y-auto py-1 max-h-60',
       option: {
-        base: 'cursor-default select-none relative py-2 pl-4 pr-10 text-sm',
+        base: 'cursor-default select-none relative py-2 pl-4 pr-10 text-sm group',
+        container: 'flex items-center',
         active: 'text-white bg-primary-600',
         inactive: 'u-text-gray-900',
+        selected: 'font-semibold',
+        unselected: 'font-normal',
         disabled: 'cursor-not-allowed opacity-50',
         icon: {
           base: 'absolute inset-y-0 right-0 flex items-center pr-4',