Add apply filter button

2025-09-13 22:11:01 +03:30
parent d52bca6613
commit 5a574443c1
3 changed files with 60 additions and 32 deletions
@@ -1,7 +1,10 @@
 <script setup lang="ts"></script>

 <template>
-    <SideModal title="فیلتر محصولات">
+    <SideModal
+        modalId="product-filters"
+        title="فیلتر محصولات"
+    >
        <template #button>
            <Button
                end-icon="ci:filter"
@@ -3,13 +3,15 @@

 type Props = {
    title: string;
+    modalId: string;
 };

-defineProps<Props>();
+const props = defineProps<Props>();
+const { modalId } = toRefs(props);

 // state

-const isSideShow = ref(false);
+const isSideShow = useState(`side-modal-${modalId.value}`, () => false);

 const isLocked = useScrollLock(window);

@@ -12,6 +12,8 @@ const router = useRouter();

 const params = inject("params") as GetProductsFilters;

+const isSideShow = useState("side-modal-product-filters");
+
 const currentCategory = computed({
    get: () => {
        return Array.isArray(route.params.slug) ? route.params.slug[1] ?? undefined : undefined;
@@ -238,6 +240,26 @@ watch(
                    />
                </div>
            </Transition>
+            <div class="flex items-center gap-4 w-full">
+                <Button
+                    :disabled="productsIsPending"
+                    variant="primary"
+                    @click="() => (isSideShow = false)"
+                    class="w-full rounded-full py-4 !cursor-pointer disabled:pointer-events-none z-[3]"
+                >
+                    <Transition
+                        name="fade"
+                        mode="out-in"
+                    >
+                        <span class="flex-center gap-3">
+                            ثبت فیلتر جدید
+                            <Icon
+                                name="ci:plus"
+                                size="20"
+                            />
+                        </span>
+                    </Transition>
+                </Button>
                <Button
                    :disabled="productsIsPending"
                    variant="solid"
@@ -272,4 +294,5 @@ watch(
                </Button>
            </div>
        </div>
+    </div>
 </template>