added filter button
This commit is contained in:
Mamalizz
@@ -1,61 +1,122 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
// state
|
||||
|
||||
const filterIsShow = ref(false);
|
||||
|
||||
const sort_filter = ref([
|
||||
{
|
||||
title: "جدیدترین ها",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
title: "گران ترین ها",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
title: "ارزان ترین ها",
|
||||
value: "",
|
||||
},
|
||||
]);
|
||||
|
||||
const categories = [
|
||||
{
|
||||
name: "میوه",
|
||||
children: [
|
||||
{ name: "سیب" },
|
||||
{ name: "موز" },
|
||||
{ name: "پرتقال" },
|
||||
{ name: "طالبی" },
|
||||
{ name: "انگور" },
|
||||
{ name: "هندوانه" },
|
||||
{ name: "خربزه" },
|
||||
{ name: "گلابی" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "سبزیجات",
|
||||
children: [
|
||||
{ name: "کلم" },
|
||||
{ name: "بروکلی" },
|
||||
{ name: "هویج" },
|
||||
{ name: "کاهو" },
|
||||
{ name: "اسفناج" },
|
||||
{ name: "چوی بوک" },
|
||||
{ name: "گل کلم" },
|
||||
{ name: "سیب زمینی" },
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot modal>
|
||||
<DialogTrigger>
|
||||
<SideModal title="فیلتر محصولات">
|
||||
<template #button>
|
||||
<Button
|
||||
end-icon="ci:filter"
|
||||
variant="secondary"
|
||||
class="rounded-full"
|
||||
class="rounded-full py-4 !bg-slate-100"
|
||||
>
|
||||
فیلتر محصولات
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</template>
|
||||
</SideModal>
|
||||
|
||||
<!-- <DialogRoot modal>
|
||||
<DialogTrigger> </DialogTrigger>
|
||||
<DialogPortal to="#teleports">
|
||||
<DialogOverlay
|
||||
class="bg-black/60 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-30"
|
||||
/>
|
||||
<DialogContent
|
||||
class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
|
||||
dir="rtl"
|
||||
class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[550px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
|
||||
>
|
||||
<DialogTitle
|
||||
class="flex items-center typo-h-4 text-black font-semibold"
|
||||
>
|
||||
Edit profile
|
||||
<DialogTitle class="flex items-center">
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div
|
||||
class="typo-h-6 text-black font-semibold flex-center gap-2"
|
||||
>
|
||||
<Icon name="ci:filter" size="24" />
|
||||
فیلتر محصولات
|
||||
</div>
|
||||
<DialogClose
|
||||
class="text-black cursor-pointer inline-flex appearance-none items-center justify-center rounded-full"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon name="ci:close" size="20" />
|
||||
</DialogClose>
|
||||
</div>
|
||||
</DialogTitle>
|
||||
<DialogDescription
|
||||
class="text-mauve11 mt-[10px] mb-5 text-sm leading-normal"
|
||||
>
|
||||
Make changes to your profile here. Click save when you're
|
||||
done.
|
||||
</DialogDescription>
|
||||
<fieldset class="mb-[15px] flex items-center gap-5">
|
||||
<label
|
||||
class="text-black w-[90px] text-right text-sm"
|
||||
for="name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
|
||||
defaultValue="Pedro Duarte"
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset class="mb-[15px] flex items-center gap-5">
|
||||
<label
|
||||
class="text-black w-[90px] text-right text-sm"
|
||||
for="username"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
class="text-black bg-stone-50 shadow-green7 focus:shadow-gray-100 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-lg px-[10px] text-sm leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
|
||||
defaultValue="@peduarte"
|
||||
/>
|
||||
</fieldset>
|
||||
<div class="mt-[25px] flex justify-end">
|
||||
|
||||
<div class="w-full py-10 gap-6 flex flex-col">
|
||||
<div class="flex items-center justify-between w-full gap-3">
|
||||
<div
|
||||
class="flex items-center justify-start gap-2 text-lg w-full"
|
||||
>
|
||||
<Icon name="ci:filter-list" size="24" />
|
||||
ترتیب بر اساس
|
||||
</div>
|
||||
<div class="w-full flex items-start justify-end gap-2">
|
||||
<button
|
||||
v-for="(sort, index) in sort_filter"
|
||||
:key="index"
|
||||
class="py-1 px-2.5 cursor-pointer text-nowrap bg-slate-100 rounded-sm text-sm"
|
||||
>
|
||||
{{ sort.title }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
<div
|
||||
class="flex items-center justify-start gap-2 text-lg w-full"
|
||||
>
|
||||
<Icon name="ci:grid" size="24" />
|
||||
دسته بندی
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start">
|
||||
<DialogClose as-child>
|
||||
<button
|
||||
class="bg-green4 text-green11 text-sm hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-lg px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
|
||||
@@ -64,15 +125,9 @@
|
||||
</button>
|
||||
</DialogClose>
|
||||
</div>
|
||||
<DialogClose
|
||||
class="text-black hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon name="ci:close" />
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</DialogRoot>
|
||||
</DialogRoot> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user