vue-router-query-sync 2.0.0-alpha.3 → 2.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -8
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -64,22 +64,33 @@ tab.value = 'favorite'
|
|
|
64
64
|
|
|
65
65
|
When the same schema is used more than once on a page (e.g. one paginated component per
|
|
66
66
|
tab), pass a `prefix` so each instance owns its own URL keys and they don't collide. Field
|
|
67
|
-
names in `filters` stay unprefixed; only the URL key becomes `${prefix}
|
|
67
|
+
names in `filters` stay unprefixed; only the URL key becomes `${prefix}-${key}`.
|
|
68
68
|
|
|
69
69
|
```ts
|
|
70
70
|
const users = useQueryFilters({ page: param.number({ default: 1 }) }, { prefix: 'users' })
|
|
71
71
|
const orders = useQueryFilters({ page: param.number({ default: 1 }) }, { prefix: 'orders' })
|
|
72
72
|
|
|
73
|
-
users.filters.page = 3 // URL: ?users
|
|
74
|
-
orders.filters.page = 5 // URL: ?users
|
|
73
|
+
users.filters.page = 3 // URL: ?users-page=3
|
|
74
|
+
orders.filters.page = 5 // URL: ?users-page=3&orders-page=5
|
|
75
75
|
|
|
76
|
-
users.filters.page // reads users
|
|
76
|
+
users.filters.page // reads users-page only — independent from orders
|
|
77
77
|
```
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
With a unique prefix per instance, keys never collide. Each instance keeps its own state in
|
|
80
|
+
the URL, so switching between tabs and back restores their pagination; a direct link
|
|
81
|
+
reproduces everything.
|
|
82
|
+
|
|
83
|
+
The prefix applies to the whole schema. To namespace only some keys, split by scope: keep
|
|
84
|
+
shared keys in a plain (unprefixed) call and private keys in a prefixed one.
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
const { filters: shared } = useQueryFilters({ sort: param.enum(SortType) }) // ?sort=…
|
|
88
|
+
const { filters } = useQueryFilters({ page: param.number({ default: 1 }) },
|
|
89
|
+
{ prefix: 'users' }) // ?users-page=…
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
If you'd rather keep the URL minimal, render inactive tabs with `v-if` and call `reset()` in
|
|
93
|
+
`onUnmounted` to drop the leaving tab's keys.
|
|
83
94
|
|
|
84
95
|
## `param`
|
|
85
96
|
|
package/dist/index.mjs
CHANGED
|
@@ -101,7 +101,7 @@ function k(e, r, t, u) {
|
|
|
101
101
|
});
|
|
102
102
|
}
|
|
103
103
|
function $(e, r = {}) {
|
|
104
|
-
const t = S(), u = P(), l = Object.keys(e), { prefix: n } = r, c = (s) => n ? `${n}
|
|
104
|
+
const t = S(), u = P(), l = Object.keys(e), { prefix: n } = r, c = (s) => n ? `${n}-${s}` : s, a = {};
|
|
105
105
|
for (const s of l)
|
|
106
106
|
a[s] = k(t, u, c(s), e[s]);
|
|
107
107
|
return { filters: m(a), patch: (s) => {
|
package/package.json
CHANGED