forked from mirrors/homebox
feat: new-card-design (#196)
* card option 1 * UI updates for item card * fix test error * fix pagination issues on backend * add integer support * remove date from cards * implement pagination for search page * resolve search state problems * other fixes * fix broken datetime * attempt to fix scroll behavior
This commit is contained in:
parent
58d6f9a28c
commit
891d41b75f
19 changed files with 393 additions and 142 deletions
|
@ -1,20 +1,35 @@
|
|||
import { useRouteQuery as useRouteQueryBase } from "@vueuse/router";
|
||||
|
||||
/* 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>;
|
||||
export function useRouteQuery(q: string, def: number): WritableComputedRef<number>;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const v = useRouteQueryBase(q, def);
|
||||
|
||||
const first = computed<string>(() => {
|
||||
const qv = route.query[q];
|
||||
if (Array.isArray(qv)) {
|
||||
return qv[0]?.toString() || def;
|
||||
}
|
||||
return qv?.toString() || def;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query[q] === undefined) {
|
||||
v.value = def;
|
||||
}
|
||||
});
|
||||
|
||||
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];
|
||||
|
@ -45,16 +60,21 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
|
|||
case "boolean":
|
||||
return computed({
|
||||
get: () => {
|
||||
const qv = route.query[q];
|
||||
if (Array.isArray(qv)) {
|
||||
return qv[0] === "true";
|
||||
}
|
||||
return qv === "true";
|
||||
return first.value === "true";
|
||||
},
|
||||
set: v => {
|
||||
const query = { ...route.query, [q]: `${v}` };
|
||||
router.push({ query });
|
||||
},
|
||||
});
|
||||
case "number":
|
||||
return computed({
|
||||
get: () => parseInt(first.value, 10),
|
||||
set: nv => {
|
||||
v.value = nv.toString();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
throw new Error("Invalid type");
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue