Mamalizz
122 lines
4.1 KiB
Vue
122 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type OptionChildren = {
|
|
id: number | string;
|
|
name: string;
|
|
};
|
|
|
|
type Option = {
|
|
name: string;
|
|
children: OptionChildren[];
|
|
};
|
|
|
|
type Props = {
|
|
options: Option[];
|
|
modelValue: number | string;
|
|
placeholder?: string;
|
|
};
|
|
|
|
// props
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: "جست و جو",
|
|
});
|
|
|
|
const { options, modelValue } = toRefs(props);
|
|
|
|
// emit
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
// state
|
|
|
|
const value = ref<OptionChildren>();
|
|
|
|
// watch
|
|
|
|
watch(
|
|
() => value.value,
|
|
(newValue: OptionChildren) => {
|
|
if (!!newValue) {
|
|
emit("update:modelValue", newValue.id);
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => modelValue.value,
|
|
(newValue) => {
|
|
const target = options.value
|
|
.flatMap((option) => option.children)
|
|
.find((child) => child.id == newValue);
|
|
|
|
value.value = target || null;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<ComboboxRoot class="relative" dir="rtl" v-model="value">
|
|
<ComboboxAnchor
|
|
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
|
|
: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">
|
|
<Icon name="ci:chevron-down" class="size-5" />
|
|
</ComboboxTrigger>
|
|
</ComboboxAnchor>
|
|
|
|
<ComboboxContent
|
|
class="absolute z-10 w-full mt-4 bg-slate-50 overflow-hidden rounded-xl 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-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"
|
|
>
|
|
<span>
|
|
{{ group.name }}
|
|
</span>
|
|
<Icon name="ci:delivery-boxes" size="18px" />
|
|
</ComboboxLabel>
|
|
|
|
<ComboboxItem
|
|
v-for="option in group.children"
|
|
:key="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
|
|
class="absolute left-3 w-[25px] inline-flex items-center justify-center"
|
|
>
|
|
<Icon name="ci:checkmark" size="18" />
|
|
</ComboboxItemIndicator>
|
|
<div class="flex items-center gap-2">
|
|
<Icon name="ci:minus" class="opacity-50" />
|
|
<span>
|
|
{{ option.name }}
|
|
</span>
|
|
</div>
|
|
</ComboboxItem>
|
|
</ComboboxGroup>
|
|
</template>
|
|
</ComboboxViewport>
|
|
</ComboboxContent>
|
|
</ComboboxRoot>
|
|
</template>
|
|
|
|
<style scoped></style>
|