hossein-por-shop/frontend/composables/global/useAppParams.ts

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,
    };
};