heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsived combo box

Browse Source
This commit is contained in:
Mamalizz
2025-05-12 18:53:45 +03:30
parent d24396da60
commit b199444fef
1 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/ComboBox.vue
+35 -17
View File
@@ -47,9 +47,7 @@ watch(
watch(
() => modelValue.value,
(newValue) => {
const target = options.value
.flatMap((option) => option.children)
.find((child) => child.id == newValue);
const target = options.value.flatMap((option) => option.children).find((child) => child.id == newValue);
value.value = target || undefined;
},
@@ -58,9 +56,13 @@ watch(
</script>
<template>
<ComboboxRoot class="relative" dir="rtl" v-model="value">
<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"
class="w-full inline-flex items-center justify-between rounded-xl border-[1.5px] border-slate-200 focus:border-slate-800 leading-none px-4 py-2.5 lg:py-3.5 gap-[5px] bg-slate-50 text-black hover:border-black transition-all data-[placeholder]:text-black/80 text-xs lg:text-sm placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal outline-none"
>
<ComboboxInput
:display-value="(v) => (!!v ? v.name : '')"
@@ -68,29 +70,39 @@ watch(
:placeholder="placeholder"
/>
<ComboboxTrigger class="cursor-pointer">
<Icon name="ci:chevron-down" class="size-5" />
<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"
class="absolute z-10 w-full max-h-[25rem] 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"
/>
<ComboboxEmpty class="placeholder-slate-400 text-xs font-medium text-center py-5" />
<template v-for="(group, index) in options" :key="group.name">
<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 bg-slate-200/50 leading-[25px] py-3 rounded-lg"
class="flex items-center justify-between px-[1.2rem] w-full max-lg:text-sm text-black bg-slate-200/50 leading-[25px] py-2 lg:py-3 rounded-lg"
>
<span>
{{ group.name }}
</span>
<Icon name="ci:delivery-boxes" size="18px" />
<Icon
name="ci:delivery-boxes"
class="text-lg"
/>
</ComboboxLabel>
<ComboboxItem
@@ -102,10 +114,16 @@ watch(
<ComboboxItemIndicator
class="absolute left-3 w-[25px] inline-flex items-center justify-center"
>
<Icon name="ci:checkmark" size="18" />
<Icon
name="ci:checkmark"
size="18"
/>
</ComboboxItemIndicator>
<div class="flex items-center gap-2">
<Icon name="ci:minus" class="opacity-50" />
<div class="flex items-center gap-2 max-lg:text-xs">
<Icon
name="ci:minus"
class="opacity-50"
/>
<span>
{{ option.name }}
</span>