connected to new url param

frontend/composables/global/useAppParams.ts

@@ -0,0 +1,71 @@
+import { PRODUCT_RANGE } from "~/constants";
+
+export const useAppParams = () => {
+    // state
+
+    const { y } = useWindowScroll({ behavior: "smooth" });
+
+    const slug = useRouteParams<string | undefined>("slug");
+
+    const sort = useRouteQuery<string | undefined>("sort", undefined, {
+        mode: "replace",
+    });
+
+    const search = useRouteQuery<string | undefined>("search", "", {
+        mode: "replace",
+    });
+
+    const page = useRouteQuery<number | undefined>("page", 1, {
+        mode: "push",
+        transform: (value) => (!!value ? +value : undefined),
+    });
+
+    const category = useRouteQuery<string | undefined>("category", "", {
+        mode: "replace",
+    });
+
+    const status = useRouteQuery<string | undefined>("status", undefined, {
+        mode: "replace",
+    });
+
+    const price_gte = useRouteQuery<number | undefined>("price_gte", PRODUCT_RANGE.min, {
+        mode: "replace",
+    });
+
+    const price_lte = useRouteQuery<number | undefined>("price_lte", PRODUCT_RANGE.max, {
+        mode: "replace",
+    });
+
+    const in_stock = useRouteQuery<string>("in_stock", "false", {
+        mode: "replace",
+    });
+
+    const has_discount = useRouteQuery<string>("has_discount", "false", {
+        mode: "replace",
+    });
+
+    const tracking_code = useRouteQuery<string>("tracking_code", "", {
+        mode: "replace",
+    });
+
+    watch(
+        () => page.value,
+        () => {
+            y.value = 0;
+        }
+    );
+
+    return {
+        slug,
+        sort,
+        search,
+        page,
+        category,
+        price_gte,
+        price_lte,
+        in_stock,
+        status,
+        has_discount,
+        tracking_code,
+    };
+};