updated select

frontend/components/global/Select.vue

@@ -8,6 +8,7 @@ type Props = {
     error?: boolean;
     options: string[];
     placeholder?: string;
+    triggerRootClass?: string;
 };
 
 type Emits = {
@@ -22,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
     placeholder: "وارد نشده",
 });
 
-const { modelValue, variant, error } = toRefs(props);
+const { modelValue, variant, error, triggerRootClass } = toRefs(props);
 
 // emit
 
@@ -46,19 +47,19 @@ const classes = computed(() => {
                 ? "input-solid-error"
                 : "input-outlined-error"]: error.value,
         },
+        triggerRootClass.value,
     ];
 });
-
-// watch
 </script>
 
 <template>
     <SelectRoot v-model="selectedValue" dir="rtl">
-        <SelectTrigger :class="classes" class="" aria-label="Customise options">
+        <SelectTrigger :class="classes">
             <SelectValue
                 :placeholder="placeholder"
+                v-bind="$attrs"
                 :class="selectedValue ? 'text-black' : 'text-slate-400'"
-                class="font-iran-yekan-x text-sm placeholder-slate-400"
+                class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
             />
             <Icon name="bi:chevron-down" size="16" />
         </SelectTrigger>
@@ -66,7 +67,7 @@ const classes = computed(() => {
         <SelectPortal>
             <SelectContent
                 data-side="bottom"
-                class="min-w-[160px] w-full bg-slate-50 border-slate-200 rounded-lg border shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-[100]"
+                class="min-w-[160px] w-full bg-slate-50 border-slate-200 rounded-lg border shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-[9999]"
                 :side-offset="5"
             >
                 <SelectViewport class="p-[5px]">