style(ui,stage-ui): improved FieldSelect

packages/ui/src/components/Form/Select/Option.vue

@@ -14,7 +14,8 @@ const hide = inject('hide') as () => void
 <template>
   <div
     v-bind="{ ...$attrs, class: null, style: null }"
-    class="cursor-pointer rounded px-2 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+    class="cursor-pointer rounded px-2 py-1 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+    line-clamp-1 overflow-hidden text-ellipsis whitespace-pre-wrap text-xs transition-colors duration-150 ease-in-out will-change-background-color will-change-color
     :class="{ 'bg-neutral-100 dark:bg-neutral-800': props.active }"
     @click="() => {
       selectOption(props.value)

packages/ui/src/components/Form/Select/Select.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   placeholder?: string
   disabled?: boolean
   title?: string
+  layout?: 'horizontal' | 'vertical'
 }>()
 
 const show = ref(false)
@@ -30,10 +31,19 @@ provide('hide', handleHide)
   <VDropdown
     auto-size
     auto-boundary-max-size
+    w-full
   >
     <div
-      class="min-w-[160px] flex cursor-pointer items-center justify-between gap-2 border rounded-lg bg-white p-2.5 text-xs text-neutral-700 shadow-sm outline-none transition-colors disabled:cursor-not-allowed dark:border-neutral-800 dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:text-neutral-200 disabled:text-neutral-400 focus:ring-2 focus:ring-black/10 dark:disabled:bg-neutral-800 dark:hover:bg-neutral-800 dark:disabled:text-neutral-600"
-      :class="{ 'pointer-events-none': props.disabled }"
+      min-w="[160px]" p="2.5" w-full
+      class="focus:ring-2 focus:ring-black/10"
+      border="~ dark:border-neutral-800"
+      text="xs dark:neutral-200 disabled:neutral-400 dark:disabled:text-neutral-600 text-neutral-700"
+      bg="white dark:neutral-900 disabled:neutral-100 hover:neutral-50 dark:disabled:neutral-800 dark:hover:neutral-800 "
+      cursor="disabled:not-allowed pointer"
+      flex items-center gap-2 rounded-lg shadow-sm outline-none transition-colors duration-150 ease-in-out
+      :class="[
+        props.disabled ? 'pointer-events-none' : '',
+      ]"
     >
       <div class="flex-1 truncate">
         <slot :value="modelValue" />
@@ -51,6 +61,7 @@ provide('hide', handleHide)
               :value="option.value"
               :label="option.label"
               :active="modelValue === option.value"
+              @click="selectOption(option.value); hide()"
             />
           </template>
         </slot>