changed combobox logic

frontend/components/global/ComboBox.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 // types
 
+type OptionChildren = {
+    id: number | string;
+    name: string;
+};
+
 type Option = {
     name: string;
-    children: { name: string }[];
+    children: OptionChildren[];
 };
 
 type Props = {
     options: Option[];
-    modelValue: string[];
+    modelValue: number | string;
     placeholder?: string;
 };
 
@@ -18,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
     placeholder: "جست و جو",
 });
 
-const { modelValue } = toRefs(props);
+const { options, modelValue } = toRefs(props);
 
 // emit
 
@@ -26,25 +31,29 @@ const emit = defineEmits(["update:modelValue"]);
 
 // state
 
-const value = ref<string[]>([]);
+const value = ref<OptionChildren>();
 
 // watch
 
 watch(
     () => value.value,
-    (newValue) => {
-        emit("update:modelValue", newValue);
+    (newValue: OptionChildren) => {
+        if (!!newValue) {
+            emit("update:modelValue", newValue.id);
+        }
     }
 );
 
 watch(
     () => modelValue.value,
-    (newValue: string[]) => {
-        value.value = newValue;
+    (newValue) => {
+        const target = options.value
+            .flatMap((option) => option.children)
+            .find((child) => child.id == newValue);
+
+        value.value = target || null;
     },
-    {
-        immediate: true,
-    }
+    { immediate: true }
 );
 </script>
 
@@ -54,7 +63,8 @@ watch(
             class="w-full inline-flex items-center justify-between rounded-xl border-[1.5px] border-slate-200 focus:border-slate-800 px-[1rem] text-sm leading-none py-3.5 gap-[5px] bg-slate-50 text-black hover:border-black transition-all data-[placeholder]:text-black/80 typo-label-sm outline-none"
         >
             <ComboboxInput
-                class="!bg-transparent outline-none text-black h-full selection:bg-slate-100 placeholder-slate-400"
+                :display-value="(v) => (!!v ? v.name : '')"
+                class="!bg-transparent outline-none text-black h-full w-full selection:bg-slate-100 placeholder-slate-400"
                 :placeholder="placeholder"
             />
             <ComboboxTrigger class="cursor-pointer">
@@ -72,10 +82,7 @@ watch(
 
                 <template v-for="(group, index) in options" :key="group.name">
                     <ComboboxGroup>
-                        <ComboboxSeparator
-                            v-if="index !== 0"
-                            class="h-6"
-                        />
+                        <ComboboxSeparator v-if="index !== 0" class="h-6" />
 
                         <ComboboxLabel
                             class="flex items-center justify-between px-[1.2rem] w-full text-md text-black font-bold bg-slate-200/50 leading-[25px] py-3 rounded-lg"
@@ -83,13 +90,13 @@ watch(
                             <span>
                                 {{ group.name }}
                             </span>
-                            <Icon name="ci:delivery-boxes" size="18px"/>
+                            <Icon name="ci:delivery-boxes" size="18px" />
                         </ComboboxLabel>
 
                         <ComboboxItem
                             v-for="option in group.children"
                             :key="option.name"
-                            :value="option.name"
+                            :value="option"
                             class="text-sm cursor-pointer leading-none text-slate-700 my-1.5 rounded-md hover:bg-slate-200/25 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
                         >
                             <ComboboxItemIndicator
@@ -98,10 +105,10 @@ watch(
                                 <Icon name="ci:checkmark" size="18" />
                             </ComboboxItemIndicator>
                             <div class="flex items-center gap-2">
-                                <Icon name="ci:minus" class="opacity-50"/>
+                                <Icon name="ci:minus" class="opacity-50" />
                                 <span>
-                                     {{ option.name }}
-                                 </span>
+                                    {{ option.name }}
+                                </span>
                             </div>
                         </ComboboxItem>
                     </ComboboxGroup>