homebox/frontend/composables/use-route-params.ts
Hayden b7aacb3cde
feat: encode search into url (#131)
* route query helper

* encode search parameters into url
2022-11-01 21:58:46 -08:00

60 lines
1.7 KiB
TypeScript

/* eslint no-redeclare: 0 */
import { WritableComputedRef } from "vue";
export function useRouteQuery(q: string, def: string[]): WritableComputedRef<string[]>;
export function useRouteQuery(q: string, def: string): WritableComputedRef<string>;
export function useRouteQuery(q: string, def: boolean): WritableComputedRef<boolean>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
const route = useRoute();
const router = useRouter();
switch (typeof def) {
case "string":
if (route.query[q] === undefined) {
router.push({ query: { ...route.query, [q]: def } });
}
return computed({
get: () => {
const qv = route.query[q];
if (Array.isArray(qv)) {
return qv[0];
}
return qv;
},
set: v => {
const query = { ...route.query, [q]: v };
router.push({ query });
},
});
case "object": // array
return computed({
get: () => {
const qv = route.query[q];
if (Array.isArray(qv)) {
return qv;
}
return [qv];
},
set: v => {
const query = { ...route.query, [q]: v };
router.push({ query });
},
});
case "boolean":
return computed({
get: () => {
const qv = route.query[q];
if (Array.isArray(qv)) {
return qv[0] === "true";
}
return qv === "true";
},
set: v => {
const query = { ...route.query, [q]: `${v}` };
router.push({ query });
},
});
}
}