customized select

frontend/components/global/Select.vue

@@ -2,45 +2,63 @@
 // types
 
 type Props = {
+    variant?: "solid" | "outlined";
+    disabled?: boolean;
     modelValue: string;
+    error?: boolean;
     options: string[];
-    placeholder: string;
+    placeholder?: string;
 };
 
-type Emit = {
+type Emits = {
     "update:modelValue": [value: string];
 };
 
 // props
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    variant: "solid",
+    disabled: false,
+    placeholder: "وارد نشده",
+});
 
-const { modelValue } = toRefs(props);
+const { modelValue, variant, error } = toRefs(props);
 
 // emit
 
-const emit = defineEmits<Emit>();
+const emit = defineEmits<Emits>();
 
-// state
+// computed
 
 const selectedValue = computed({
-    get: () => modelValue.value,
+    get: () => modelValue.value ?? undefined,
     set: (value: string) => emit("update:modelValue", value),
 });
 
+const classes = computed(() => {
+    return [
+        "flex items-center text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 flex-1 w-full outline-none",
+        {
+            "input-solid": variant.value === "solid",
+            "input-outlined": variant.value === "outlined",
+            "input-effects": !error.value,
+            [variant.value === "solid"
+                ? "input-solid-error"
+                : "input-outlined-error"]: error.value,
+        },
+    ];
+});
+
 // watch
 </script>
 
 <template>
     <SelectRoot v-model="selectedValue" dir="rtl">
-        <SelectTrigger
-            class="w-full flex items-center justify-between resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black cursor-pointer transition-all border-[1.5px] gap-3 typo-label-md px-4 py-[12.5px] selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
-            aria-label="Customise options"
-        >
+        <SelectTrigger :class="classes" class="" aria-label="Customise options">
             <SelectValue
                 :placeholder="placeholder"
                 :class="selectedValue ? 'text-black' : 'text-slate-400'"
-                class="font-iran-yekan-x"
+                class="font-iran-yekan-x text-sm placeholder-slate-400"
             />
             <Icon name="bi:chevron-down" size="16" />
         </SelectTrigger>