@neovici/cosmoz-queue 3.5.0 → 3.6.0

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.
Files changed (16) hide show
  1. package/README.md +3 -2
  2. package/dist/queue/index.d.ts +1 -0
  3. package/dist/queue/index.d.ts.map +1 -1
  4. package/dist/queue/index.js +1 -0
  5. package/dist/queue/queue.d.ts.map +1 -1
  6. package/dist/queue/queue.js +3 -1
  7. package/dist/queue/use-pref.d.ts +2 -2
  8. package/dist/queue/use-pref.d.ts.map +1 -1
  9. package/dist/queue/use-pref.js +22 -4
  10. package/dist/queue/use-queue.d.ts +2 -1
  11. package/dist/queue/use-queue.d.ts.map +1 -1
  12. package/dist/queue/use-queue.js +35 -23
  13. package/dist/queue/use-tabs-pref.d.ts +12 -0
  14. package/dist/queue/use-tabs-pref.d.ts.map +1 -0
  15. package/dist/queue/use-tabs-pref.js +12 -0
  16. package/package.json +2 -1
package/README.md CHANGED
@@ -70,7 +70,7 @@ customElements.define('order-list-queue', component(OrderListQueue));
70
70
  | Prop | Type | Default | Description |
71
71
  | -------------- | --------------------------------- | -------- | ---------------------------------------------------------------------- |
72
72
  | `heading` | `string` | -- | Title displayed above the tabs |
73
- | `settingsId` | `string?` | -- | Key for persisting omnitable column settings |
73
+ | `settingsId` | `string?` | -- | Key for persisting omnitable settings and the picked tab |
74
74
  | `idHashParam` | `string` | `'qid'` | URL hash param for the selected item ID |
75
75
  | `tabHashParam` | `string` | `'qtab'` | URL hash param for the active tab |
76
76
  | `details` | `(item: I) => PromiseLike<D>` | -- | Fetches full details for a list item |
@@ -79,7 +79,7 @@ customElements.define('order-list-queue', component(OrderListQueue));
79
79
  | `view` | `(thru, props) => TemplateResult` | -- | Renders the detail view |
80
80
  | `loader` | `(thru, props) => TemplateResult` | -- | Renders the loading skeleton |
81
81
  | `pagination` | `Pagination?` | -- | Server-side pagination config |
82
- | `fallback` | `string?` | -- | Default tab when none is set in URL hash |
82
+ | `fallback` | `string?` | -- | Opening tab when the hash names none and no pick is remembered |
83
83
  | `split` | `SplitOpts?` | -- | Split.js configuration (sizes; `minSize`: minimum width per pane) |
84
84
  | `afterHeading` | `unknown?` | -- | Extra content rendered after the heading |
85
85
 
@@ -400,6 +400,7 @@ const MyQueue = ({ heading }: { heading: string }) => {
400
400
  | Hook | Import | Purpose |
401
401
  | ------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
402
402
  | `useTabs({ items, hashParam, mobile, fallback })` | `@neovici/cosmoz-queue` | Manages overview/split/queue tabs. Returns `{ tabnav, activeTab }`. |
403
+ | `useTabsPref({ persistKey, ...opts })` | `@neovici/cosmoz-queue` | Remembers the tab picked for `useTabs`; spread its result into the `useTabs` options. |
403
404
  | `useDataNav(items, opts)` | `@neovici/cosmoz-queue` | Item navigation with prev/next, URL hash sync. Returns `{ item, setItem, next, prev, forward, index }`. |
404
405
  | `useSplit({ activeTab, ...splitOpts })` | `@neovici/cosmoz-queue` | Initializes Split.js when in split mode. |
405
406
  | `useListState()` | `@neovici/cosmoz-queue` | Creates `items`, `selected`, `totalAvailable` state with setters. |
package/dist/queue/index.d.ts CHANGED
@@ -16,5 +16,6 @@ export { useListSSE } from './use-list-sse';
16
16
  export { default as useDataNav } from './use-data-nav';
17
17
  export { useMobile } from './use-mobile';
18
18
  export { default as useTabs } from './use-tabs';
19
+ export { default as useTabsPref } from './use-tabs-pref';
19
20
  export { filter, notify, useList, useListState } from './use-list';
20
21
  //# sourceMappingURL=index.d.ts.map
package/dist/queue/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACN,eAAe,EACf,OAAO,IAAI,QAAQ,EACnB,YAAY,GACZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,IAAI,eAAe,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACN,eAAe,EACf,OAAO,IAAI,QAAQ,EACnB,YAAY,GACZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,IAAI,eAAe,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
package/dist/queue/index.js CHANGED
@@ -21,5 +21,6 @@ export { useListSSE } from './use-list-sse';
21
21
  export { default as useDataNav } from './use-data-nav';
22
22
  export { useMobile } from './use-mobile';
23
23
  export { default as useTabs } from './use-tabs';
24
+ export { default as useTabsPref } from './use-tabs-pref';
24
25
  // List hooks
25
26
  export { filter, notify, useList, useListState } from './use-list';
package/dist/queue/queue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,EAC5C,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC/D,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBAuGjD,CAAC"}
1
+ {"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,EAC5C,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC/D,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBA0GjD,CAAC"}
package/dist/queue/queue.js CHANGED
@@ -5,12 +5,14 @@ import useAsyncAction from './use-async-action';
5
5
  import useQueue from './use-queue';
6
6
  export const queue = (props) => {
7
7
  const { heading, afterHeading, header, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, split, } = props;
8
+ const persistKey = settingsId ? `${settingsId}-split` : undefined;
8
9
  const queueProps = useQueue({
9
10
  id,
10
11
  api,
11
12
  idHashParam,
12
13
  tabHashParam,
13
14
  fallback,
15
+ persistKey,
14
16
  });
15
17
  const { index, hideActions, items, setItems, setSelected, totalAvailable, setTotalAvailable, onItemClick, rowPartFn, nav, tabnav, } = queueProps;
16
18
  const { listRef, onAsyncSimpleAction } = useAsyncAction(nav);
@@ -30,7 +32,7 @@ export const queue = (props) => {
30
32
  totalAvailable,
31
33
  nav,
32
34
  pagination,
33
- persistKey: settingsId ? `${settingsId}-split` : undefined,
35
+ persistKey,
34
36
  splitAttrs,
35
37
  list: list({
36
38
  id: 'list',
package/dist/queue/use-pref.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type Returned<T> = [T, (v: T) => void];
2
- export declare function usePref<T extends string>(key: string): Returned<T>;
3
- export declare function usePref<T extends string>(key: string, defaultValue: T): Returned<T>;
2
+ export declare function usePref<T extends string>(key?: string): Returned<T>;
3
+ export declare function usePref<T extends string>(key: string | undefined, defaultValue: T): Returned<T>;
4
4
  export {};
5
5
  //# sourceMappingURL=use-pref.d.ts.map
package/dist/queue/use-pref.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-pref.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AACvC,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACpE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACvC,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACb,QAAQ,CAAC,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"use-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-pref.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAmBvC,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACrE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACvC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,YAAY,EAAE,CAAC,GACb,QAAQ,CAAC,CAAC,CAAC,CAAC"}
package/dist/queue/use-pref.js CHANGED
@@ -1,11 +1,29 @@
1
- import { useState, useCallback } from '@pionjs/pion';
1
+ import { useCallback, useState } from '@pionjs/pion';
2
+ const loadPref = (key) => {
3
+ try {
4
+ return key ? localStorage.getItem(`pref-${key}`) : undefined;
5
+ }
6
+ catch {
7
+ return undefined;
8
+ }
9
+ };
10
+ const savePref = (key, value) => {
11
+ if (!key)
12
+ return;
13
+ try {
14
+ localStorage.setItem(`pref-${key}`, value);
15
+ }
16
+ catch {
17
+ // storage blocked
18
+ }
19
+ };
2
20
  export function usePref(key, defaultValue) {
3
- const [pref, setPref] = useState(() => localStorage.getItem(`pref-${key}`) || defaultValue);
21
+ const [pref, setPref] = useState(() => loadPref(key) || defaultValue);
4
22
  return [
5
23
  pref,
6
24
  useCallback((value) => {
7
- localStorage.setItem(`pref-${key}`, value);
25
+ savePref(key, value);
8
26
  setPref(value);
9
- }, [setPref]),
27
+ }, [key, setPref]),
10
28
  ];
11
29
  }
package/dist/queue/use-queue.d.ts CHANGED
@@ -14,6 +14,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
14
14
  tabHashParam?: string;
15
15
  idHashParam?: string;
16
16
  onActivate?: (name: string) => void;
17
+ persistKey?: string;
17
18
  /**
18
19
  * @deprecated Use the `details` property instead. The `api` property will be removed in v2.0.0.
19
20
  *
@@ -38,7 +39,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
38
39
  /** @deprecated Use `initial-size` / `min-size` attributes on `<cosmoz-resizable-view>` instead (mapped automatically to the returned `splitAttrs`). */
39
40
  split?: SplitConfig;
40
41
  }
41
- declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, ...thru }: Opts<I>) => {
42
+ declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, persistKey, ...thru }: Opts<I>) => {
42
43
  tabnav: import("@neovici/cosmoz-tabs/next").Result<{
43
44
  readonly name: "overview";
44
45
  readonly title: string;
package/dist/queue/use-queue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAMhE;;GAEG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAC7B,MAAM,CAAC,GAAG,SAAS,EACnB,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,KAClB,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAKhC,CAAC;AAqDH,UAAU,IAAI,CAAC,CAAC,CACf,SACC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACtB,uJAAuJ;IACvJ,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,8EASlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAnGM,MAAM,GAAG,SAAS;qBAgJ3B,KAAK;oBAvBA,MAAM;;;;;;;;;;;;;;;;;;CAqDjB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI,CAC7B,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,MAAM,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,CAAC;yBAEc,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BArLpB,MAAM,GAAG,SAAS;qBAgJ3B,KAAK;oBAvBA,MAAM;;;;;;;;;;;;;;;;;;;AA4DlB,wBACgD"}
1
+ {"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAOhE;;GAEG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAC7B,MAAM,CAAC,GAAG,SAAS,EACnB,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,KAClB,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAKhC,CAAC;AAqDH,UAAU,IAAI,CAAC,CAAC,CACf,SACC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACtB,uJAAuJ;IACvJ,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,0FAUlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BArGM,MAAM,GAAG,SAAS;qBA4I5B,KAAK;oBAfA,MAAM;;;;;;;;;;;;;;;;;;CAqDhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI,CAC7B,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,MAAM,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,CAAC;yBAEc,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAzLpB,MAAM,GAAG,SAAS;qBA4I5B,KAAK;oBAfA,MAAM;;;;;;;;;;;;;;;;;;;AA4DjB,wBACgD"}
package/dist/queue/use-queue.js CHANGED
@@ -8,6 +8,7 @@ import useDataNav from './use-data-nav';
8
8
  import useKeyNav from './use-key-nav';
9
9
  import { useListState } from './use-list';
10
10
  import useTabs from './use-tabs';
11
+ import useTabsPref from './use-tabs-pref';
11
12
  import useUpdates from './use-updates';
12
13
  import { getItems, normalizeHeaders } from './util';
13
14
  /**
@@ -32,26 +33,34 @@ const useQNav = ({ id, api, items, ...thru }) => {
32
33
  'See: https://github.com/Neovici/cosmoz-queue#migration-from-api-to-details');
33
34
  }
34
35
  /* eslint-enable no-console, no-template-curly-in-string */
35
- const details = useMemo(() => api && memoize((item) => json(api(id(item), item))), [id, api]), pass = useDataNav(items, {
36
+ const details = useMemo(() => api && memoize((item) => json(api(id(item), item))), [id, api]);
37
+ const pass = useDataNav(items, {
36
38
  ...thru,
37
39
  id,
38
40
  });
39
41
  return { ...pass, id, details };
40
42
  };
41
- const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, split, ...thru }) => {
42
- const { items: _items, selected } = thru, mobile = useMobile(), items = useMemo(() => normalizeHeaders(_items), [_items]), queueItems = useMemo(() => getItems(items, selected), [items, selected]), { tabnav, activeTab } = useTabs({
43
+ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, split, persistKey, ...thru }) => {
44
+ const { items: _items, selected } = thru;
45
+ const mobile = useMobile();
46
+ const items = useMemo(() => normalizeHeaders(_items), [_items]);
47
+ const queueItems = useMemo(() => getItems(items, selected), [items, selected]);
48
+ const { tabnav, activeTab } = useTabs({
43
49
  items: queueItems,
44
50
  hashParam: tabHashParam,
45
- fallback,
46
- onActivate,
51
+ ...useTabsPref({ persistKey, fallback, except: 'queue', onActivate }),
47
52
  mobile,
48
- }), nav = useQNav({
53
+ });
54
+ const nav = useQNav({
49
55
  id,
50
56
  api,
51
57
  items: queueItems,
52
58
  hashParam: idHashParam,
53
59
  maintainSelection: ['queue', 'split'].includes(activeTab),
54
- }), splitAttrs = useMemo(() => computeSplitAttrs(split), [split]), { item, setItem } = nav, ensue = useCallback((itemId) => {
60
+ });
61
+ const splitAttrs = useMemo(() => computeSplitAttrs(split), [split]);
62
+ const { item, setItem } = nav;
63
+ const ensue = useCallback((itemId) => {
55
64
  if (id(item) !== itemId) {
56
65
  return;
57
66
  }
@@ -60,6 +69,22 @@ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActiva
60
69
  }, [item, id, items]);
61
70
  useKeyNav({ activeTab, ...nav });
62
71
  useUpdates({ ensue, ...nav });
72
+ const index = useMemo(() => items.indexOf(item), [item, items]);
73
+ const rowPartFn = useRowPartFn(item, id);
74
+ const onItemClick = useCallback((e) => {
75
+ const { item: clickedItem, index, activate: mustActivate, } = e.detail;
76
+ const mini = e
77
+ .composedPath()
78
+ .find((el) => el instanceof Element && el.matches?.('[mini]'));
79
+ const activate = mustActivate ?? (mini ? ['split', 'queue'] : undefined);
80
+ setItem(clickedItem ?? items[index]);
81
+ if (activate) {
82
+ const next = array(activate).find((name) => tabnav.tabs.find((tab) => tab.name === name && !tab.disabled));
83
+ if (next)
84
+ tabnav.activate(next);
85
+ }
86
+ e.preventDefault();
87
+ }, [activeTab, items]);
63
88
  return {
64
89
  ...thru,
65
90
  tabnav,
@@ -67,22 +92,9 @@ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActiva
67
92
  mobile,
68
93
  splitAttrs,
69
94
  hideActions: selected?.length > 0 && activeTab === 'split',
70
- index: useMemo(() => items.indexOf(item), [item, items]),
71
- rowPartFn: useRowPartFn(item, id),
72
- onItemClick: useCallback((e) => {
73
- const { item: clickedItem, index, activate: mustActivate, } = e.detail;
74
- const mini = e
75
- .composedPath()
76
- .find((el) => el instanceof Element && el.matches?.('[mini]'));
77
- const activate = mustActivate ?? (mini ? ['split', 'queue'] : undefined);
78
- setItem(clickedItem ?? items[index]);
79
- if (activate) {
80
- const next = array(activate).find((name) => tabnav.tabs.find((tab) => tab.name === name && !tab.disabled));
81
- if (next)
82
- tabnav.activate(next);
83
- }
84
- e.preventDefault();
85
- }, [activeTab, items]),
95
+ index,
96
+ rowPartFn,
97
+ onItemClick,
86
98
  ensue,
87
99
  nav,
88
100
  };
package/dist/queue/use-tabs-pref.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ interface Opts {
2
+ persistKey?: string;
3
+ fallback?: string;
4
+ except?: string;
5
+ onActivate?: (name: string) => void;
6
+ }
7
+ declare const _default: ({ persistKey, fallback, except, onActivate }: Opts) => {
8
+ fallback: string | undefined;
9
+ onActivate: (name: string) => void;
10
+ };
11
+ export default _default;
12
+ //# sourceMappingURL=use-tabs-pref.d.ts.map
package/dist/queue/use-tabs-pref.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-tabs-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-tabs-pref.ts"],"names":[],"mappings":"AAIA,UAAU,IAAI;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;yBAEe,8CAA8C,IAAI;;uBAQxD,MAAM;;AARhB,wBAeE"}
package/dist/queue/use-tabs-pref.js ADDED
@@ -0,0 +1,12 @@
1
+ import { useCallback } from '@pionjs/pion';
2
+ import { usePref } from './use-pref';
3
+ export default ({ persistKey, fallback, except, onActivate }) => {
4
+ const [stored, setStored] = usePref(persistKey ? `${persistKey}-tab` : undefined);
5
+ return {
6
+ fallback: stored && stored !== except ? stored : fallback,
7
+ onActivate: useCallback((name) => {
8
+ setStored(name);
9
+ onActivate?.(name);
10
+ }, [setStored, onActivate]),
11
+ };
12
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-queue",
3
- "version": "3.5.0",
3
+ "version": "3.6.0",
4
4
  "description": "A reusable queue component for master-detail views with list, split, and queue modes",
5
5
  "keywords": [
6
6
  "web-components",
@@ -53,6 +53,7 @@
53
53
  ".": "./dist/index.js",
54
54
  "./use-queue": "./dist/queue/use-queue.js",
55
55
  "./use-tabs": "./dist/queue/use-tabs.js",
56
+ "./use-tabs-pref": "./dist/queue/use-tabs-pref.js",
56
57
  "./use-data-nav": "./dist/queue/use-data-nav.js",
57
58
  "./use-list": "./dist/queue/use-list.js",
58
59
  "./util/fetch": "./dist/util/fetch/fetch.js",