vue-router-query-sync 2.0.0-alpha.2 → 2.0.0-alpha.4

package/README.md

@@ -60,6 +60,38 @@ const tab = toRef(filters, 'tab') // WritableComputedRef<'all' | 'favorite' | nu
 tab.value = 'favorite'
 ```
 
+### `prefix` — namespacing keys
+
+When the same schema is used more than once on a page (e.g. one paginated component per
+tab), pass a `prefix` so each instance owns its own URL keys and they don't collide. Field
+names in `filters` stay unprefixed; only the URL key becomes `${prefix}-${key}`.
+
+```ts
+const users  = useQueryFilters({ page: param.number({ default: 1 }) }, { prefix: 'users' })
+const orders = useQueryFilters({ page: param.number({ default: 1 }) }, { prefix: 'orders' })
+
+users.filters.page = 3   // URL: ?users-page=3
+orders.filters.page = 5  // URL: ?users-page=3&orders-page=5
+
+users.filters.page       // reads users-page only — independent from orders
+```
+
+With a unique prefix per instance, keys never collide. Each instance keeps its own state in
+the URL, so switching between tabs and back restores their pagination; a direct link
+reproduces everything.
+
+The prefix applies to the whole schema. To namespace only some keys, split by scope: keep
+shared keys in a plain (unprefixed) call and private keys in a prefixed one.
+
+```ts
+const { filters: shared } = useQueryFilters({ sort: param.enum(SortType) })            // ?sort=…
+const { filters }         = useQueryFilters({ page: param.number({ default: 1 }) },
+                                            { prefix: 'users' })                        // ?users-page=…
+```
+
+If you'd rather keep the URL minimal, render inactive tabs with `v-if` and call `reset()` in
+`onUnmounted` to drop the leaving tab's keys.
+
 ## `param`
 
 All options are shared: `{ default?: T; history?: 'push' | 'replace' }` (`history` defaults to

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { useQueryFilters } from './useQueryFilters';
 export { param } from './param';
 export { defineCodec } from './defineCodec';
-export type { QueryCodec, ParamOptions, Param, FilterSchema, InferFilters, UseQueryFiltersReturn } from './types';
+export type { QueryCodec, ParamOptions, Param, FilterSchema, InferFilters, UseQueryFiltersOptions, UseQueryFiltersReturn } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,UAAU,EACV,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACtB,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,UAAU,EACV,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,SAAS,CAAA"}

package/dist/index.mjs

@@ -1,44 +1,44 @@
-import { reactive as A, computed as N } from "vue";
-import { useRoute as v, useRouter as S } from "vue-router";
-function g(e) {
+import { reactive as m, computed as v } from "vue";
+import { useRoute as S, useRouter as P } from "vue-router";
+function A(e) {
   if (e != null)
     return Array.isArray(e) ? e.filter((r) => r !== null) : e;
 }
-function o(e, r) {
+function b(e, r) {
   return e === r ? !0 : Array.isArray(e) && Array.isArray(r) ? e.length !== r.length ? !1 : e.every((t, u) => t === r[u]) : !1;
 }
-const h = /* @__PURE__ */ new WeakMap();
-function m(e) {
-  let r = h.get(e);
+const g = /* @__PURE__ */ new WeakMap();
+function N(e) {
+  let r = g.get(e);
   return r || (r = {
-    patch: A(/* @__PURE__ */ new Map()),
+    patch: m(/* @__PURE__ */ new Map()),
     usePush: !1,
     scheduled: !1
-  }, h.set(e, r)), r;
+  }, g.set(e, r)), r;
 }
-function P(e, r) {
-  const t = m(e);
+function j(e, r) {
+  const t = N(e);
   return t.patch.has(r) ? { pending: !0, value: t.patch.get(r) ?? null } : { pending: !1, value: null };
 }
-function z(e, r, t, u) {
-  const l = m(e);
-  l.patch.set(r, t), u === "push" && (l.usePush = !0), l.scheduled || (l.scheduled = !0, queueMicrotask(() => q(e)));
+function o(e, r, t, u) {
+  const l = N(e);
+  l.patch.set(r, t), u === "push" && (l.usePush = !0), l.scheduled || (l.scheduled = !0, queueMicrotask(() => O(e)));
 }
-function j(e, r) {
+function q(e, r) {
   const t = Object.keys(e), u = Object.keys(r);
   if (t.length !== u.length)
     return !1;
   const l = (n, c) => {
     if (Array.isArray(n) || Array.isArray(c)) {
-      const a = Array.isArray(n) ? n : [n], s = Array.isArray(c) ? c : [c];
-      return a.length === s.length && a.every((i, f) => String(i) === String(s[f]));
+      const a = Array.isArray(n) ? n : [n], d = Array.isArray(c) ? c : [c];
+      return a.length === d.length && a.every((f, i) => String(f) === String(d[i]));
     }
     return String(n) === String(c);
   };
   return t.every((n) => n in r && l(e[n], r[n]));
 }
-function q(e) {
-  const r = h.get(e);
+function O(e) {
+  const r = g.get(e);
   if (!r)
     return;
   if (r.scheduled = !1, r.patch.size === 0) {
@@ -48,35 +48,35 @@ function q(e) {
   const t = r.usePush;
   r.usePush = !1;
   const u = e.currentRoute.value.query, l = {};
-  for (const [i, f] of Object.entries(u))
-    f !== null && (l[i] = Array.isArray(f) ? f.filter((b) => b !== null) : f);
+  for (const [f, i] of Object.entries(u))
+    i !== null && (l[f] = Array.isArray(i) ? i.filter((s) => s !== null) : i);
   const n = new Map(r.patch);
-  n.forEach((i, f) => {
-    i === null ? delete l[f] : l[f] = i;
+  n.forEach((f, i) => {
+    f === null ? delete l[i] : l[i] = f;
   });
   const c = {};
-  for (const i of Object.keys(l).sort())
-    c[i] = l[i];
+  for (const f of Object.keys(l).sort())
+    c[f] = l[f];
   const a = () => {
-    n.forEach((i, f) => {
-      r.patch.get(f) === i && r.patch.delete(f);
+    n.forEach((f, i) => {
+      r.patch.get(i) === f && r.patch.delete(i);
     });
   };
-  if (j(u, c)) {
+  if (q(u, c)) {
     a();
     return;
   }
   (t ? e.push({ query: c }) : e.replace({ query: c })).then(a, a);
 }
-function O(e, r, t, u) {
-  const l = P(r, t);
+function w(e, r, t, u) {
+  const l = j(r, t);
   let n;
   if (l.pending) {
     if (l.value === null)
       return u.default;
-    n = g(l.value);
+    n = A(l.value);
   } else
-    n = g(e.query[t]);
+    n = A(e.query[t]);
   if (n === void 0)
     return u.default;
   try {
@@ -86,55 +86,55 @@ function O(e, r, t, u) {
     return u.default;
   }
 }
-function y(e, r, t, u) {
+function z(e, r, t, u) {
   const l = t.codec.serialize(u), n = t.codec.serialize(t.default);
-  l === null || o(l, n) ? z(e, r, null, t.history) : z(e, r, l, t.history);
+  l === null || b(l, n) ? o(e, r, null, t.history) : o(e, r, l, t.history);
 }
 function k(e, r, t, u) {
   let l = !1, n, c;
-  return N({
+  return v({
     get: () => {
-      const a = O(e, r, t, u), s = u.codec.serialize(a);
-      return l && o(s, c) ? n : (l = !0, n = a, c = s, a);
+      const a = w(e, r, t, u), d = u.codec.serialize(a);
+      return l && b(d, c) ? n : (l = !0, n = a, c = d, a);
     },
-    set: (a) => y(r, t, u, a)
+    set: (a) => z(r, t, u, a)
   });
 }
-function W(e) {
-  const r = v(), t = S(), u = Object.keys(e), l = {};
-  for (const s of u)
-    l[s] = k(r, t, s, e[s]);
-  return { filters: A(l), patch: (s) => {
-    for (const i of Object.keys(s))
-      i in e && y(t, i, e[i], s[i]);
+function $(e, r = {}) {
+  const t = S(), u = P(), l = Object.keys(e), { prefix: n } = r, c = (s) => n ? `${n}-${s}` : s, a = {};
+  for (const s of l)
+    a[s] = k(t, u, c(s), e[s]);
+  return { filters: m(a), patch: (s) => {
+    for (const h of Object.keys(s))
+      h in e && z(u, c(h), e[h], s[h]);
   }, reset: () => {
-    for (const s of u)
-      y(t, s, e[s], e[s].default);
+    for (const s of l)
+      z(u, c(s), e[s], e[s].default);
   } };
 }
-function d(e) {
+function y(e) {
   return Array.isArray(e) ? e[0] ?? "" : e;
 }
-function w(e) {
+function F(e) {
   return { codec: {
     serialize: (t) => t === null || t === "" ? null : t,
-    deserialize: (t) => d(t)
+    deserialize: (t) => y(t)
   }, default: (e == null ? void 0 : e.default) ?? null, history: (e == null ? void 0 : e.history) ?? "replace" };
 }
-function F(e) {
+function M(e) {
   return { codec: {
     serialize: (t) => t === null ? null : String(t),
     deserialize: (t) => {
-      const u = d(t), l = Number(u);
+      const u = y(t), l = Number(u);
       return u === "" || Number.isNaN(l) ? void 0 : l;
     }
   }, default: (e == null ? void 0 : e.default) ?? null, history: (e == null ? void 0 : e.history) ?? "replace" };
 }
-function M(e) {
+function R(e) {
   return { codec: {
     serialize: (t) => t === null ? null : t ? "true" : "false",
     deserialize: (t) => {
-      const u = d(t);
+      const u = y(t);
       if (u === "true")
         return !0;
       if (u === "false")
@@ -142,21 +142,21 @@ function M(e) {
     }
   }, default: (e == null ? void 0 : e.default) ?? null, history: (e == null ? void 0 : e.history) ?? "replace" };
 }
-function R(e) {
+function E(e) {
   return { codec: {
     serialize: (t) => t.length === 0 ? null : [...t],
     deserialize: (t) => Array.isArray(t) ? [...t] : [t]
   }, default: (e == null ? void 0 : e.default) ?? [], history: (e == null ? void 0 : e.history) ?? "replace" };
 }
-function E(e) {
+function K(e) {
   return Object.entries(e).filter(([r]) => Number.isNaN(Number(r))).map(([, r]) => r);
 }
 function C(e, r) {
-  const t = Array.isArray(e) ? [...e] : E(e), u = new Set(t);
+  const t = Array.isArray(e) ? [...e] : K(e), u = new Set(t);
   return { codec: {
     serialize: (n) => n === null ? null : String(n),
     deserialize: (n) => {
-      const c = d(n);
+      const c = y(n);
       if (u.has(c))
         return c;
       const a = Number(c);
@@ -165,7 +165,7 @@ function C(e, r) {
     }
   }, default: (r == null ? void 0 : r.default) ?? null, history: (r == null ? void 0 : r.history) ?? "replace" };
 }
-function K(e, r) {
+function Q(e, r) {
   return {
     codec: {
       serialize: (u) => u === null ? null : e.serialize(u),
@@ -176,12 +176,12 @@ function K(e, r) {
   };
 }
 const B = {
-  string: w,
-  number: F,
-  boolean: M,
-  stringArray: R,
+  string: F,
+  number: M,
+  boolean: R,
+  stringArray: E,
   enum: C,
-  custom: K
+  custom: Q
 };
 function D(e) {
   return e;
@@ -189,5 +189,5 @@ function D(e) {
 export {
   D as defineCodec,
   B as param,
-  W as useQueryFilters
+  $ as useQueryFilters
 };

package/dist/types.d.ts

@@ -15,6 +15,9 @@ export type FilterSchema = Record<string, Param<unknown>>;
 export type InferFilters<S extends FilterSchema> = {
     [K in keyof S]: S[K] extends Param<infer O> ? O : never;
 };
+export interface UseQueryFiltersOptions {
+    prefix?: string;
+}
 export interface UseQueryFiltersReturn<S extends FilterSchema> {
     filters: InferFilters<S>;
     patch(partial: Partial<InferFilters<S>>): void;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,UAAU,CAAC,CAAC;IAE3B,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;IAE7C,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;CACnD;AAGD,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAA;AAGD,MAAM,WAAW,KAAK,CAAC,GAAG;IACxB,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAA;IACtB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B;AAGD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;AAGzD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,YAAY,IAAI;KAChD,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;CACxD,CAAA;AAGD,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,YAAY;IAC3D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IACxB,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;IAC9C,KAAK,IAAI,IAAI,CAAA;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,UAAU,CAAC,CAAC;IAE3B,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;IAE7C,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;CACnD;AAGD,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAA;AAGD,MAAM,WAAW,KAAK,CAAC,GAAG;IACxB,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAA;IACtB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B;AAGD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;AAGzD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,YAAY,IAAI;KAChD,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;CACxD,CAAA;AAGD,MAAM,WAAW,sBAAsB;IAGrC,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAGD,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,YAAY;IAC3D,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IACxB,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;IAC9C,KAAK,IAAI,IAAI,CAAA;CACd"}

package/dist/useQueryFilters.d.ts

@@ -1,3 +1,3 @@
-import { FilterSchema, UseQueryFiltersReturn } from './types';
-export declare function useQueryFilters<S extends FilterSchema>(schema: S): UseQueryFiltersReturn<S>;
+import { FilterSchema, UseQueryFiltersOptions, UseQueryFiltersReturn } from './types';
+export declare function useQueryFilters<S extends FilterSchema>(schema: S, options?: UseQueryFiltersOptions): UseQueryFiltersReturn<S>;
 //# sourceMappingURL=useQueryFilters.d.ts.map

package/dist/useQueryFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryFilters.d.ts","sourceRoot":"","sources":["../src/useQueryFilters.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAuB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAiCvF,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,EAAE,MAAM,EAAE,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CA0B3F"}
+{"version":3,"file":"useQueryFilters.d.ts","sourceRoot":"","sources":["../src/useQueryFilters.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,YAAY,EAGZ,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAiChB,wBAAgB,eAAe,CAAC,CAAC,SAAS,YAAY,EACpD,MAAM,EAAE,CAAC,EACT,OAAO,GAAE,sBAA2B,GACnC,qBAAqB,CAAC,CAAC,CAAC,CA6B1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-router-query-sync",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "Reactive, typed view of Vue Router query params with codecs and defaults",
   "type": "module",
   "module": "./dist/index.mjs",