refactor(material): modify validation uom and item

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

@@ -19,6 +19,7 @@ interface Item {
 const props = defineProps<
   SelectRootProps & {
     items: Item[]
+    iconName?: string
     placeholder?: string
     label?: string
     separator?: boolean
@@ -31,7 +32,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <SelectRoot v-bind="forwarded">
-    <SelectTrigger class="">
+    <SelectTrigger :icon-name="iconName" class="flex justify-between items-center">
       <SelectValue :placeholder="placeholder" />
     </SelectTrigger>
 

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

@@ -5,15 +5,15 @@ import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
 import { cn } from '~/lib/utils'
 
-const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], iconName?: string }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
-
   return delegated
 })
 
 const forwardedProps = useForwardProps(delegatedProps)
+const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
 </script>
 
 <template>
@@ -28,7 +28,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <SelectIcon as-child>
-      <Icon name="i-radix-icons-caret-sort" class="h-4 w-4 opacity-50" />
+      <Icon :name="iconName" class="h-4 w-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>