This commit is contained in:
marzban-dev
2025-01-28 19:58:49 +03:30
parent a59a2c6386
commit e645c6a719
+15 -9
View File
@@ -57,13 +57,13 @@ watch(
class="!bg-transparent outline-none text-black h-full selection:bg-slate-100 placeholder-slate-400"
:placeholder="placeholder"
/>
<ComboboxTrigger>
<ComboboxTrigger class="cursor-pointer">
<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-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 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
@@ -74,29 +74,35 @@ watch(
<ComboboxGroup>
<ComboboxSeparator
v-if="index !== 0"
class="h-[1px] bg-slate-200 m-[1rem]"
class="h-6"
/>
<ComboboxLabel
class="px-[1.2rem] w-full text-sm bg-black text-white rounded-full leading-[25px] py-1.5"
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"
>
{{ group.name }}
<span>
{{ group.name }}
</span>
<Icon name="ci:delivery-boxes" size="18px"/>
</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"
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>
<span>
{{ option.name }}
</span>
<div class="flex items-center gap-2">
<Icon name="ci:minus" class="opacity-50"/>
<span>
{{ option.name }}
</span>
</div>
</ComboboxItem>
</ComboboxGroup>
</template>