@xleddyl/443-components-vue 0.16.5 → 0.16.7
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/CATALOG.md
CHANGED
|
@@ -331,7 +331,7 @@ All are exported from `@xleddyl/443-components-vue` and auto-imported in Nuxt.
|
|
|
331
331
|
| `usePreset` | Read or set the visual preset. | `presetOptions` lists the presets. | `presets.vue` (pages root) |
|
|
332
332
|
| `usePreference`, `usePreferences`, `createPreferences`, `providePreferences` | Remember UI choices per user (theme, preset, sidebar collapsed, DataGrid columns and page size, your own keys) in one pluggable store. | `app.use(createPreferences(store))`; a store is `{ get, set, subscribe?, clientOnly? }`. `createRemotePreferenceStore({ initial, save, debounce })` for an API, `createLocalPreferenceStore()` is the default. `usePreference(key, fallback, { validate })` is a writable computed. Keys: `theme`, `preset`, `shell:<storageKey>`, `grid:<storageKey>` (`PREFERENCE_KEYS`). | `core/preferences.vue` |
|
|
333
333
|
| `useAppShell` | Read the `AppShell` state (collapsed, open) from a child component. | Returns the shell context or `null` outside a shell. | `layout/app-shell.vue` |
|
|
334
|
-
| `useRouteState` | Bind a ref to a URL query parameter or hash entry: deep links to drawers and modals, back button closes them, filters in the URL. | `useRouteState(key, { parse, serialize, default, history: 'push' \| 'replace', location: 'query' \| 'hash' })`. Returns a ref; `undefined` or `''` removes the parameter. Hash entries are `key/value` joined with `&` (`#family/fam_1&variant/var_2`), read after mount. `withRouteStateScroll(scrollBehavior)` for plain vue-router. No-op without a router.
|
|
334
|
+
| `useRouteState` | Bind a ref to a URL query parameter or hash entry: deep links to drawers and modals, back button closes them, filters in the URL. | `useRouteState(key, { parse, serialize, default, history: 'push' \| 'replace', location: 'query' \| 'hash' })`. Returns a ref; `undefined` or `''` removes the parameter. Hash entries are `key/value` joined with `&` (`#family/fam_1&variant/var_2`), read after mount. `routeHash(hash, { key: value })` builds a link hash, `routeHashValue(hash, key)` reads one entry. `withRouteStateScroll(scrollBehavior)` for plain vue-router. No-op without a router. | `overlays/drawer.vue` |
|
|
335
335
|
| `useScrollLock` | Lock the page scroll while something is open. | `useScrollLock(activeRef)`. | - |
|
|
336
336
|
| `useLocale` | Translate component texts and read the active locale (en, it, de). | `const { locale, t } = useLocale()`. `provideLocale` and `createLocale` set it. Nuxt follows `k.locale`. | `languages.vue` (pages root) |
|
|
337
337
|
| `useIcons` helpers, `createIcons`, `provideIcons` | Register your own icons by name. | Nuxt: option `k.icons: { dir: '~/assets/icons' }`. | `components/core/icon.vue` |
|
package/README.md
CHANGED
|
@@ -589,6 +589,7 @@ const archived = useRouteState('archived', {
|
|
|
589
589
|
```
|
|
590
590
|
|
|
591
591
|
- Hash: `location: 'hash'` keeps the value in the hash instead of the query, like `#settings/general`. One entry is `key/value` (the value may contain `/`); several entries are joined with `&` in the order they were opened: `#family/fam_1&variant/var_2`. Query and hash writes in the same tick make one navigation. Set the default for the app with `k.routeState.location` in the Nuxt module, or `app.provide(ROUTE_LOCATION_KEY, 'hash')` in plain Vue; an explicit `location` wins. Use the hash for overlays and the query for page state (filters, tabs). The server never receives the hash, so a hash value is read after mount: the server and hydration render the overlay closed, then it opens.
|
|
592
|
+
- Links: `routeHash(route.hash, { settings: 'imports/run_1' })` returns the hash with that entry set (or removed with `undefined`) and the other entries kept, for a link that opens an overlay over the current ones: `:to="{ query: route.query, hash: routeHash(route.hash, { family: id }) }"`. `routeHashValue(route.hash, 'family')` reads one entry, for example in a route guard.
|
|
592
593
|
- Scroll: a hash made only of `key/value` entries is not an anchor. The Nuxt module wraps the router `scrollBehavior` so that it sees no hash for these routes (no scroll to top when an overlay closes, no lookup of `#settings/general` as an element). With plain vue-router wrap your own: `scrollBehavior: withRouteStateScroll((to, from, saved) => ...)`.
|
|
593
594
|
- Create forms: use a reserved value (`?family=new`) and branch on it, like above.
|
|
594
595
|
- Nested views inside one overlay: keep the path in one parameter (`?settings=users/usr_123`, `?family=fam_1/variants`) and split it on `/` in a computed. One parameter keeps every step in one history entry and avoids two refs racing. Encode ids that may contain `/` with `encodeURIComponent` per segment.
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { Ref } from 'vue';
|
|
2
2
|
import type { RouteHistory, RouteLocation } from '../internal/layout/query';
|
|
3
|
+
import { routeHash } from '../internal/layout/query';
|
|
3
4
|
export type { RouteHistory, RouteLocation };
|
|
5
|
+
export { routeHash };
|
|
6
|
+
export declare function routeHashValue(hash: string | undefined, key: string): string | undefined;
|
|
4
7
|
export interface RouteStateOptions<T> {
|
|
5
8
|
parse?: (value: string) => T | undefined;
|
|
6
9
|
serialize?: (value: T) => string | undefined;
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { computed, shallowRef, watch } from "vue";
|
|
2
2
|
import {
|
|
3
|
+
hashParamValue,
|
|
3
4
|
isRouteStateHash,
|
|
5
|
+
routeHash,
|
|
4
6
|
useDefaultRouteLocation,
|
|
5
7
|
useRouteValue,
|
|
6
8
|
writeRouteValue
|
|
7
9
|
} from "../internal/layout/query.mjs";
|
|
8
10
|
import { useRouterLike } from "../internal/layout/route.mjs";
|
|
11
|
+
export { routeHash };
|
|
12
|
+
export function routeHashValue(hash, key) {
|
|
13
|
+
return hashParamValue(hash, key);
|
|
14
|
+
}
|
|
9
15
|
export function useRouteState(key, options = {}) {
|
|
10
16
|
const router = useRouterLike();
|
|
11
17
|
const location = options.location ?? useDefaultRouteLocation();
|
|
@@ -10,5 +10,6 @@ export declare function isRouteStateHash(hash: string | undefined): boolean;
|
|
|
10
10
|
export declare function hashParamValue(hash: string | undefined, key: string): string | undefined;
|
|
11
11
|
export declare function useDefaultRouteLocation(): RouteLocation;
|
|
12
12
|
export declare function useRouteValue(router: RouterLike | undefined, key: MaybeRefOrGetter<string | undefined>, location?: MaybeRefOrGetter<RouteLocation>): import("vue").ComputedRef<string | undefined>;
|
|
13
|
+
export declare function routeHash(hash: string | undefined, changes: Record<string, string | undefined>): string;
|
|
13
14
|
export declare function writeRouteValue(router: RouterLike, key: string, value: string | undefined, history: RouteHistory, location?: RouteLocation): Promise<boolean>;
|
|
14
15
|
export {};
|
|
@@ -98,6 +98,9 @@ function applyHash(current, changes) {
|
|
|
98
98
|
}
|
|
99
99
|
return { hash: changed ? stringifyRouteHash(entries) : current, changed };
|
|
100
100
|
}
|
|
101
|
+
export function routeHash(hash, changes) {
|
|
102
|
+
return applyHash(hash ?? "", new Map(Object.entries(changes))).hash;
|
|
103
|
+
}
|
|
101
104
|
async function flush(router, batch) {
|
|
102
105
|
batches.delete(router);
|
|
103
106
|
const route = router.currentRoute?.value;
|
package/package.json
CHANGED