@prefecthq/vue-compositions/dist/types/src/useRouteQuery/useRouteQuery.js

A collection of reusable vue compositions.

import { reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
class InvalidRouteQueryProperty extends Error {
    constructor() {
        super('Invalid route query property');
    }
}
function factory() {
    const operations = reactive([]);
    let route;
    let router;
    let interval;
    const update = async () => {
        const query = applyQueryOperations(route.query, operations);
        await router.push({ query });
        operations.splice(0);
    };
    watch(operations, () => {
        if (!operations.length) {
            return;
        }
        clearInterval(interval);
        interval = setTimeout(update);
    });
    const useRouteQuery = () => {
        router = useRouter();
        route = useRoute();
        const clear = () => {
            router.push({ query: {} });
        };
        const set = (key, value) => {
            query[key] = value;
        };
        const get = (key) => {
            return query[key];
        };
        const remove = (key) => {
            delete query[key];
        };
        const query = new Proxy({}, {
            get(target, property) {
                if (typeof property === 'symbol') {
                    throw new InvalidRouteQueryProperty();
                }
                const query = applyQueryOperations(route.query, operations);
                return query[property];
            },
            set(target, property, value) {
                if (typeof property === 'symbol') {
                    throw new InvalidRouteQueryProperty();
                }
                const operation = updateOperationFactory(property, value);
                operations.push(operation);
                return true;
            },
            deleteProperty(target, property) {
                if (typeof property === 'symbol') {
                    throw new InvalidRouteQueryProperty();
                }
                const operation = deleteOperationFactory(property);
                operations.push(operation);
                return true;
            },
            ownKeys() {
                const query = applyQueryOperations(route.query, operations);
                return Object.keys(query);
            },
            has(target, property) {
                const query = applyQueryOperations(route.query, operations);
                return property in query;
            },
        });
        return {
            clear,
            set,
            get,
            remove,
            query,
        };
    };
    return useRouteQuery;
}
function applyQueryOperations(currentQuery, operations) {
    let query = { ...currentQuery };
    for (const operation of operations) {
        query = operation(query);
    }
    return query;
}
function updateOperationFactory(key, value) {
    return (currentQuery) => {
        const query = { ...currentQuery, [key]: value };
        return query;
    };
}
function deleteOperationFactory(key) {
    return (currentQuery) => {
        const query = { ...currentQuery };
        delete query[key];
        return query;
    };
}
export const useRouteQuery = factory();
//# sourceMappingURL=useRouteQuery.js.map