added combo box

2025-01-07 22:33:52 +03:30
parent a956dac420
commit 93c088f008
1 changed files with 105 additions and 0 deletions
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// types
+
+type Option = {
+    name: string;
+    children: { name: string }[];
+};
+
+type Props = {
+    options: Option[];
+    modelValue: string[];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { modelValue } = toRefs(props);
+
+// emit
+
+const emit = defineEmits(["update:modelValue"]);
+
+// state
+
+const value = ref<string[]>([]);
+
+// watch
+
+watch(
+    () => value.value,
+    (newValue) => {
+        emit("update:modelValue", newValue);
+    }
+);
+
+watch(
+    () => modelValue.value,
+    (newValue: string[]) => {
+        value.value = newValue;
+    },
+    {
+        immediate: true,
+    }
+);
+</script>
+
+<template>
+    <ComboboxRoot class="relative" dir="rtl" :multiple="true" v-model="value">
+        <ComboboxAnchor
+            class="w-full inline-flex items-center justify-between rounded-full border border-slate-200 hover:border-slate-300 focus:border-slate-800 px-[1rem] text-sm leading-none py-3.5 gap-[5px] bg-slate-50 text-black hover:bg-white/90 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-stone-400"
+                placeholder="جست و جوی دسته بندی"
+            />
+            <ComboboxTrigger>
+                <Icon name="ci:chevron-down" class="size-5" />
+            </ComboboxTrigger>
+        </ComboboxAnchor>
+
+        <ComboboxContent
+            class="absolute z-10 w-full mt-1.5 bg-slate-50 overflow-hidden rounded-3xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
+        >
+            <ComboboxViewport class="p-[1rem]">
+                <ComboboxEmpty
+                    class="text-mauve8 text-xs font-medium text-center py-5"
+                />
+
+                <template v-for="(group, index) in options" :key="group.name">
+                    <ComboboxGroup>
+                        <ComboboxSeparator
+                            v-if="index !== 0"
+                            class="h-[1px] bg-slate-200 m-[1rem]"
+                        />
+
+                        <ComboboxLabel
+                            class="px-[1.2rem] w-full text-sm bg-black text-white rounded-full leading-[25px] py-1.5"
+                        >
+                            {{ group.name }}
+                        </ComboboxLabel>
+
+                        <ComboboxItem
+                            v-for="option in group.children"
+                            :key="option.name"
+                            :value="option.name"
+                            class="text-sm leading-none text-black/90 my-1.5 rounded-full hover:!bg-slate-200 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
+                        >
+                            <ComboboxItemIndicator
+                                class="absolute left-3 w-[25px] inline-flex items-center justify-center"
+                            >
+                                <Icon name="ci:checkmark" size="18" />
+                            </ComboboxItemIndicator>
+                            <span>
+                                {{ option.name }}
+                            </span>
+                        </ComboboxItem>
+                    </ComboboxGroup>
+                </template>
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxRoot>
+</template>
+
+<style scoped></style>