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

changed combobox

Browse Source
This commit is contained in:
Mamalizz
2025-01-26 03:02:15 +03:30
parent f01390e468
commit 8fd658a625
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/ComboBox.vue
+8 -5
View File
@@ -9,11 +9,14 @@ type Option = {
type Props = {
options: Option[];
modelValue: string[];
placeholder?: string;
};
// props
const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
placeholder: "جست و جو",
});
const { modelValue } = toRefs(props);
@@ -48,11 +51,11 @@ watch(
<template>
<ComboboxRoot class="relative" dir="rtl" 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"
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-stone-400"
placeholder="جست و جوی دسته بندی"
class="!bg-transparent outline-none text-black h-full selection:bg-slate-100 placeholder-slate-400"
:placeholder="placeholder"
/>
<ComboboxTrigger>
<Icon name="ci:chevron-down" class="size-5" />
@@ -60,7 +63,7 @@ watch(
</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"
class="absolute z-10 w-full mt-1.5 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