Mamalizz
106 lines
3.5 KiB
Vue
106 lines
3.5 KiB
Vue
<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>
|