⚡ enhance (pub): adjust component

app/components/pub/custom-ui/form/field-group.vue

@@ -20,7 +20,7 @@ const wrapperClass = computed(() => [
   'w-full flex-shrink-0',
 
   props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
-  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
+  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 my-3' : '',
   props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
   props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
   props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',

app/components/pub/ui/select/Select.vue

@@ -1,8 +1,29 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import { SelectRoot } from 'radix-vue'
+import {
+  SelectTrigger,
+  SelectContent,
+  SelectValue,
+  SelectGroup,
+  SelectItem,
+  SelectSeparator,
+} from '~/components/pub/ui/select'
+import type { SelectRootProps, SelectRootEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'radix-vue'
 
-const props = defineProps<SelectRootProps>()
+interface Item {
+  value: string
+  label: string
+}
+
+const props = defineProps<
+  SelectRootProps & {
+    items: Item[]
+    placeholder?: string
+    label?: string
+    separator?: boolean
+  }
+>()
 const emits = defineEmits<SelectRootEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
@@ -10,6 +31,27 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <SelectRoot v-bind="forwarded">
-    <slot />
+    <SelectTrigger class="">
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
+
+    <SelectContent class="rounded border bg-white">
+      <SelectGroup>
+        <SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
+          {{ label }}
+        </SelectLabel>
+
+        <SelectItem
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer px-2 py-1 hover:bg-gray-100"
+        >
+          {{ item.label }}
+        </SelectItem>
+
+        <SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
+      </SelectGroup>
+    </SelectContent>
   </SelectRoot>
 </template>

app/components/pub/ui/select/SelectContent.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  SelectContent,
-
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from 'radix-vue'
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
 import { cn } from '~/lib/utils'
 
@@ -17,12 +11,9 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    position: 'popper',
-  },
-)
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+})
 const emits = defineEmits<SelectContentEmits>()
 
 const delegatedProps = computed(() => {
@@ -37,16 +28,25 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class,
+        )
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]',
+          )
+        "
+      >
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />

app/components/pub/ui/select/SelectTrigger.vue

@@ -5,7 +5,6 @@ import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
 import { cn } from '~/lib/utils'
 
-
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
@@ -20,10 +19,12 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <SelectTrigger
     v-bind="forwardedProps"
-    :class="cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      props.class,
-    )"
+    :class="
+      cn(
+        'border-input ring-offset-background placeholder:text-muted-foreground flex h-10 w-full rounded-md border border-gray-400 px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
   >
     <slot />
     <SelectIcon as-child>