@neovici/cosmoz-queue 3.0.0-beta.9 → 3.1.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.
- package/dist/list/list-core.d.ts +2 -2
- package/dist/list/list-core.d.ts.map +1 -1
- package/dist/list/more/use-more.d.ts +1 -0
- package/dist/list/more/use-more.d.ts.map +1 -1
- package/dist/list/more/use-more.js +19 -3
- package/dist/list/render-list-core.d.ts +2 -2
- package/dist/list/render-list-core.d.ts.map +1 -1
- package/dist/list/render-list-core.js +1 -0
- package/dist/queue/queue.d.ts +5 -7
- package/dist/queue/queue.d.ts.map +1 -1
- package/dist/queue/queue.js +11 -11
- package/dist/queue/render.d.ts +11 -2
- package/dist/queue/render.d.ts.map +1 -1
- package/dist/queue/render.js +13 -8
- package/dist/queue/use-key-nav.d.ts.map +1 -1
- package/dist/queue/use-key-nav.js +5 -1
- package/package.json +6 -6
package/dist/list/list-core.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { Columns } from './column';
|
|
|
2
2
|
import { RenderListCoreProps } from './render-list-core';
|
|
3
3
|
import { UseListCore } from './use-list-core';
|
|
4
4
|
export type ListCore<TColumns extends Columns, TParams extends object, TItem extends object> = UseListCore<TColumns, TParams, TItem> & RenderListCoreProps<TItem>;
|
|
5
|
-
export declare const listCore: <TColumns extends Columns, TParams extends object, TItem extends object>(props: ListCore<TColumns, TParams, TItem>) => import("lit-html/directive.js").DirectiveResult<new (_partInfo: import("lit-html/directive.js").PartInfo) => import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
|
|
5
|
+
export declare const listCore: <TColumns extends Columns, TParams extends object, TItem extends object>(props: ListCore<TColumns, TParams, TItem>) => (import("lit-html/directive.js").DirectiveResult<new (_partInfo: import("lit-html/directive.js").PartInfo) => import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
|
|
6
6
|
toString(): string;
|
|
7
|
-
} | readonly import("@neovici/cosmoz-form").Renderable[] | null | undefined>>>[];
|
|
7
|
+
} | readonly import("@neovici/cosmoz-form").Renderable[] | null | undefined>>> | undefined)[];
|
|
8
8
|
//# sourceMappingURL=list-core.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-core.d.ts","sourceRoot":"","sources":["../../src/list/list-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAe,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,QAAQ,CACnB,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,IACjB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAEvE,eAAO,MAAM,QAAQ,GACpB,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,EAEpB,OAAO,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC;;
|
|
1
|
+
{"version":3,"file":"list-core.d.ts","sourceRoot":"","sources":["../../src/list/list-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAe,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,QAAQ,CACnB,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,IACjB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAEvE,eAAO,MAAM,QAAQ,GACpB,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,EAEpB,OAAO,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC;;6FAIzC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-more.d.ts","sourceRoot":"","sources":["../../../src/list/more/use-more.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-more.d.ts","sourceRoot":"","sources":["../../../src/list/more/use-more.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EAKZ,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,MAAM,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,MAAM;IACnE,CAAC,KAAK,EAAE;QACP,MAAM,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,WAAW,CAAC;KACrB,GAAG,WAAW,CAAC;QAAE,KAAK,EAAE,KAAK,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACnD;AAED,UAAU,OAAO,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,MAAM;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC9B,iBAAiB,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACpD;AASD,eAAO,MAAM,OAAO,GAAI,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,MAAM,EAAE,0DAKnE,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC;;;CAwEzB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useMemo, useState } from '@pionjs/pion';
|
|
1
|
+
import { useEffect, useMemo, useRef, useState, } from '@pionjs/pion';
|
|
2
2
|
export const useMore = ({ params: _params, list$, pageSize = 50, setTotalAvailable, }) => {
|
|
3
3
|
const [{ page, data$, totalAvailable, params }, setData] = useState({
|
|
4
4
|
page: 0,
|
|
@@ -6,6 +6,7 @@ export const useMore = ({ params: _params, list$, pageSize = 50, setTotalAvailab
|
|
|
6
6
|
totalAvailable: Infinity,
|
|
7
7
|
params: _params,
|
|
8
8
|
});
|
|
9
|
+
const abortRef = useRef(null);
|
|
9
10
|
const hasMore = pageSize > 0 &&
|
|
10
11
|
totalAvailable < Infinity &&
|
|
11
12
|
totalAvailable >= pageSize &&
|
|
@@ -17,15 +18,22 @@ export const useMore = ({ params: _params, list$, pageSize = 50, setTotalAvailab
|
|
|
17
18
|
page: 0,
|
|
18
19
|
})), [_params, list$]);
|
|
19
20
|
useEffect(() => {
|
|
21
|
+
const controller = new AbortController();
|
|
22
|
+
abortRef.current = controller;
|
|
23
|
+
const { signal } = controller;
|
|
20
24
|
setData(({ data$, params, page, ...thru }) => ({
|
|
21
25
|
...thru,
|
|
22
26
|
params,
|
|
23
27
|
page,
|
|
24
|
-
data$: Promise.resolve(data$).then((prev) => list$({
|
|
28
|
+
data$: Promise.resolve(data$).then((prev) => Promise.resolve(list$({
|
|
25
29
|
params,
|
|
26
30
|
page,
|
|
27
31
|
pageSize,
|
|
28
|
-
|
|
32
|
+
signal,
|
|
33
|
+
}))
|
|
34
|
+
.then((data) => {
|
|
35
|
+
if (signal.aborted)
|
|
36
|
+
return prev;
|
|
29
37
|
const totalAvailable = data.total;
|
|
30
38
|
setTotalAvailable(totalAvailable);
|
|
31
39
|
setData((s) => ({
|
|
@@ -33,8 +41,16 @@ export const useMore = ({ params: _params, list$, pageSize = 50, setTotalAvailab
|
|
|
33
41
|
totalAvailable,
|
|
34
42
|
}));
|
|
35
43
|
return [...prev.slice(0, page * pageSize), ...data.items];
|
|
44
|
+
})
|
|
45
|
+
.catch((error) => {
|
|
46
|
+
if (error.name === 'AbortError')
|
|
47
|
+
return prev;
|
|
48
|
+
return Promise.reject(error);
|
|
36
49
|
})),
|
|
37
50
|
}));
|
|
51
|
+
return () => {
|
|
52
|
+
controller.abort();
|
|
53
|
+
};
|
|
38
54
|
}, [page, params, list$, pageSize]);
|
|
39
55
|
return { data$, loadMore };
|
|
40
56
|
};
|
|
@@ -20,7 +20,7 @@ export interface RenderListCoreProps<TItem extends object> {
|
|
|
20
20
|
export interface RenderListCore<TColumns extends Columns, TItem extends object> extends UseListCoreResult<TColumns, TItem>, RenderListCoreProps<TItem> {
|
|
21
21
|
}
|
|
22
22
|
export declare const renderColumns: <T extends Columns>(columns: T) => import("../types/lit").LitRenderable[];
|
|
23
|
-
export declare const renderListCore: <TColumns extends Columns, TItem extends object>({ settingsId, hashParam, enabledColumns, csvFilename, exposedParts, data$, noLocal, miniBreakpoint, sortOn, setSortOn, descending, setDescending, groupOn, setGroupOn, selectedItems, setSelectedItems, setVisibleItems, hasItems, setFilters, setIsMini, columns, actions, dialog, open, content, loadMore, compareItemsFn, }: RenderListCore<TColumns, TItem>) => import("lit-html/directive.js").DirectiveResult<new (_partInfo: import("lit-html/directive.js").PartInfo) => import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
|
|
23
|
+
export declare const renderListCore: <TColumns extends Columns, TItem extends object>({ settingsId, hashParam, enabledColumns, csvFilename, exposedParts, data$, noLocal, miniBreakpoint, sortOn, setSortOn, descending, setDescending, groupOn, setGroupOn, selectedItems, setSelectedItems, setVisibleItems, hasItems, setFilters, setIsMini, columns, actions, dialog, open, content, loadMore, compareItemsFn, }: RenderListCore<TColumns, TItem>) => (import("lit-html/directive.js").DirectiveResult<new (_partInfo: import("lit-html/directive.js").PartInfo) => import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
|
|
24
24
|
toString(): string;
|
|
25
|
-
} | readonly import("@neovici/cosmoz-form").Renderable[] | null | undefined>>>[];
|
|
25
|
+
} | readonly import("@neovici/cosmoz-form").Renderable[] | null | undefined>>> | undefined)[];
|
|
26
26
|
//# sourceMappingURL=render-list-core.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-list-core.d.ts","sourceRoot":"","sources":["../../src/list/render-list-core.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAiB,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAU,OAAO,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,mBAAmB,CAAC,KAAK,SAAS,MAAM;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,KAAK,EAAE,CAAA;KAAE,KAAK,UAAU,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,CAC7E,SAAQ,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC;CAAG;AAE1E,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,OAAO,EAAE,SAAS,CAAC,2CAGzD,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,EAAE,gUAiC5E,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC;;
|
|
1
|
+
{"version":3,"file":"render-list-core.d.ts","sourceRoot":"","sources":["../../src/list/render-list-core.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAiB,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAU,OAAO,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,mBAAmB,CAAC,KAAK,SAAS,MAAM;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,KAAK,EAAE,CAAA;KAAE,KAAK,UAAU,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,CAC7E,SAAQ,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC;CAAG;AAE1E,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,OAAO,EAAE,SAAS,CAAC,2CAGzD,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,EAAE,gUAiC5E,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC;;6FA2CjC,CAAC"}
|
|
@@ -36,6 +36,7 @@ export const renderListCore = ({ settingsId, hashParam, enabledColumns, csvFilen
|
|
|
36
36
|
>${[
|
|
37
37
|
renderColumns(columns),
|
|
38
38
|
when(actions, renderActions({ open, items: selectedItems, slot: 'actions' })),
|
|
39
|
+
html `<slot></slot>`,
|
|
39
40
|
content?.({ selectedItems }),
|
|
40
41
|
renderLoadMore({ data$, onMore: loadMore, hasItems }),
|
|
41
42
|
]}</cosmoz-omnitable
|
package/dist/queue/queue.d.ts
CHANGED
|
@@ -8,11 +8,9 @@ type ViewProps<I> = Omit<QueueProps<I>, 'nav'> & {
|
|
|
8
8
|
item: I;
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
11
|
-
* @deprecated Use
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* `expandToMin` and `snapOffset` have no equivalent in the CSS flex model
|
|
15
|
-
* and are silently ignored.
|
|
11
|
+
* @deprecated Use `initial-size` and `min-size` attributes on
|
|
12
|
+
* `<cosmoz-resizable-view>` instead (mapped automatically from this prop).
|
|
13
|
+
* `expandToMin` and `snapOffset` have no equivalent and are silently ignored.
|
|
16
14
|
*/
|
|
17
15
|
export interface SplitConfig {
|
|
18
16
|
sizes?: [number, number];
|
|
@@ -20,7 +18,7 @@ export interface SplitConfig {
|
|
|
20
18
|
expandToMin?: boolean;
|
|
21
19
|
snapOffset?: number;
|
|
22
20
|
}
|
|
23
|
-
interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback'>, Pick<RenderQueue<I, D>, 'details' | 'afterHeading'> {
|
|
21
|
+
interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback'>, Pick<RenderQueue<I, D>, 'details' | 'afterHeading' | 'header'> {
|
|
24
22
|
list: (thru: Record<string, any>, props: QueueProps<I> & {
|
|
25
23
|
onRef: (el?: Element) => void;
|
|
26
24
|
}) => TemplateResult;
|
|
@@ -31,7 +29,7 @@ interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback'>, Pick
|
|
|
31
29
|
idHashParam?: string;
|
|
32
30
|
tabHashParam?: string;
|
|
33
31
|
pagination?: Pagination;
|
|
34
|
-
/** @deprecated Use
|
|
32
|
+
/** @deprecated Use `initial-size` / `min-size` attributes on `<cosmoz-resizable-view>` instead. */
|
|
35
33
|
split?: SplitConfig;
|
|
36
34
|
}
|
|
37
35
|
export declare const queue: <I, D = I>(props: Props<I, D>) => TemplateResult<1>;
|
|
@@ -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,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
|
|
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,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;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,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,sBA4GjD,CAAC"}
|
package/dist/queue/queue.js
CHANGED
|
@@ -3,7 +3,7 @@ import { renderQueue } from './render';
|
|
|
3
3
|
import useAsyncAction from './use-async-action';
|
|
4
4
|
import useQueue from './use-queue';
|
|
5
5
|
export const queue = (props) => {
|
|
6
|
-
const { heading, afterHeading, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, split, } = props;
|
|
6
|
+
const { heading, afterHeading, header, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, split, } = props;
|
|
7
7
|
const queueProps = useQueue({
|
|
8
8
|
id,
|
|
9
9
|
api,
|
|
@@ -17,19 +17,19 @@ export const queue = (props) => {
|
|
|
17
17
|
...queueProps,
|
|
18
18
|
onAsyncSimpleAction,
|
|
19
19
|
};
|
|
20
|
-
const
|
|
21
|
-
?
|
|
22
|
-
split.sizes?.[0] != null
|
|
23
|
-
split.minSize != null
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
: undefined;
|
|
20
|
+
const splitAttrs = split
|
|
21
|
+
? {
|
|
22
|
+
initialSize: split.sizes?.[0] != null ? `${split.sizes[0]}%` : '50%',
|
|
23
|
+
minSize: split.minSize != null
|
|
24
|
+
? `${Array.isArray(split.minSize) ? split.minSize[0] : split.minSize}`
|
|
25
|
+
: undefined,
|
|
26
|
+
}
|
|
27
|
+
: { initialSize: '50%', minSize: '100' };
|
|
29
28
|
return renderQueue({
|
|
30
29
|
details,
|
|
31
30
|
heading,
|
|
32
31
|
afterHeading,
|
|
32
|
+
header,
|
|
33
33
|
index,
|
|
34
34
|
items,
|
|
35
35
|
tabnav,
|
|
@@ -37,7 +37,7 @@ export const queue = (props) => {
|
|
|
37
37
|
nav,
|
|
38
38
|
pagination,
|
|
39
39
|
persistKey: settingsId ? `${settingsId}-split` : undefined,
|
|
40
|
-
|
|
40
|
+
splitAttrs,
|
|
41
41
|
list: list({
|
|
42
42
|
id: 'list',
|
|
43
43
|
slot: 'previous',
|
package/dist/queue/render.d.ts
CHANGED
|
@@ -59,6 +59,12 @@ export declare const renderSlide: <I, D>({ id, forward, item, ...thru }: RenderS
|
|
|
59
59
|
animation: (inEl: HTMLElement, outEl: HTMLElement) => Promise<[Animation, Animation]>;
|
|
60
60
|
};
|
|
61
61
|
export interface RenderQueue<I, D> extends Pick<RenderView<I, D>, 'renderItem' | 'renderLoader' | 'details'> {
|
|
62
|
+
/** Render the header from its parts. Defaults to the tab row. */
|
|
63
|
+
header?: (parts: {
|
|
64
|
+
tabnav: RenderTabs<Tab>;
|
|
65
|
+
heading?: string;
|
|
66
|
+
afterHeading?: unknown;
|
|
67
|
+
}) => TemplateResult;
|
|
62
68
|
heading?: string;
|
|
63
69
|
afterHeading?: unknown;
|
|
64
70
|
index?: number;
|
|
@@ -67,12 +73,15 @@ export interface RenderQueue<I, D> extends Pick<RenderView<I, D>, 'renderItem' |
|
|
|
67
73
|
list: TemplateResult;
|
|
68
74
|
pagination?: Pagination;
|
|
69
75
|
persistKey?: string;
|
|
70
|
-
|
|
76
|
+
splitAttrs?: {
|
|
77
|
+
initialSize?: string;
|
|
78
|
+
minSize?: string;
|
|
79
|
+
};
|
|
71
80
|
tabnav: RenderTabs<Tab>;
|
|
72
81
|
nav: Omit<RenderSlide<I, D>, 'renderItem' | 'renderLoader' | 'details'> & Pick<RenderView<I, D>, 'details'> & {
|
|
73
82
|
index: number;
|
|
74
83
|
};
|
|
75
84
|
}
|
|
76
|
-
export declare const renderQueue: <I, D>({ heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details, pagination: _pagination, persistKey,
|
|
85
|
+
export declare const renderQueue: <I, D>({ header, heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details, pagination: _pagination, persistKey, splitAttrs, }: RenderQueue<I, D>) => TemplateResult<1>;
|
|
77
86
|
export {};
|
|
78
87
|
//# sourceMappingURL=render.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAc,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAG5E,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}
|
package/dist/queue/render.js
CHANGED
|
@@ -6,6 +6,7 @@ import { lazyUntil } from '@neovici/cosmoz-utils/directives/lazy-until';
|
|
|
6
6
|
import { t } from 'i18next';
|
|
7
7
|
import { html, nothing } from 'lit-html';
|
|
8
8
|
import { guard } from 'lit-html/directives/guard.js';
|
|
9
|
+
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
9
10
|
import { when } from 'lit-html/directives/when.js';
|
|
10
11
|
import { arrow } from './icon';
|
|
11
12
|
import renderStyles from './style';
|
|
@@ -109,16 +110,12 @@ export const renderSlide = ({ id, forward, item, ...thru }) => item
|
|
|
109
110
|
animation: forward ? slideInRight : slideInLeft,
|
|
110
111
|
}
|
|
111
112
|
: emptySlide();
|
|
112
|
-
export const renderQueue = ({ heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, persistKey,
|
|
113
|
+
export const renderQueue = ({ header, heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, persistKey, splitAttrs, }) => {
|
|
113
114
|
const activeTab = tabnav.active?.name;
|
|
114
115
|
const pagination = _pagination
|
|
115
116
|
? { ..._pagination, totalAvailable }
|
|
116
117
|
: undefined;
|
|
117
|
-
|
|
118
|
-
<style>
|
|
119
|
-
${renderStyles({ index })}
|
|
120
|
-
</style>
|
|
121
|
-
|
|
118
|
+
const tabn = html `
|
|
122
119
|
<cosmoz-tabs-next class="tabn">
|
|
123
120
|
<div class="tabn-heading">${heading}${afterHeading}</div>
|
|
124
121
|
${renderTabs({ ...tabnav, className: 'tabn-tab' })}
|
|
@@ -132,12 +129,20 @@ export const renderQueue = ({ heading, afterHeading, index, tabnav, items, total
|
|
|
132
129
|
})}
|
|
133
130
|
${renderPagination(pagination)}
|
|
134
131
|
</cosmoz-tabs-next>
|
|
132
|
+
`;
|
|
133
|
+
return html `
|
|
134
|
+
<style>
|
|
135
|
+
${renderStyles({ index })}
|
|
136
|
+
</style>
|
|
137
|
+
|
|
138
|
+
${when(header, (header) => header({ tabnav, heading, afterHeading }), () => tabn)}
|
|
135
139
|
|
|
136
140
|
<cosmoz-resizable-view
|
|
137
141
|
data-active=${activeTab}
|
|
138
142
|
direction="horizontal"
|
|
139
|
-
persist=${persistKey}
|
|
140
|
-
|
|
143
|
+
persist=${ifDefined(persistKey)}
|
|
144
|
+
initial-size=${splitAttrs?.initialSize ?? '50%'}
|
|
145
|
+
min-size=${splitAttrs?.minSize ?? '100'}
|
|
141
146
|
>
|
|
142
147
|
${list}
|
|
143
148
|
<cosmoz-slider
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-key-nav.d.ts","sourceRoot":"","sources":["../../src/queue/use-key-nav.ts"],"names":[],"mappings":"AAKA,KAAK,GAAG,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-key-nav.d.ts","sourceRoot":"","sources":["../../src/queue/use-key-nav.ts"],"names":[],"mappings":"AAKA,KAAK,GAAG,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;yBAiC1B,4BAIb;IACF,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,GAAG,CAAC;CACf;AARD,wBA0CE"}
|
|
@@ -7,7 +7,11 @@ const keys = (tab, listKeys, queueKeys) => [
|
|
|
7
7
|
...(['queue', 'split'].includes(tab) ? queueKeys : []),
|
|
8
8
|
];
|
|
9
9
|
const overlaps = (host) => {
|
|
10
|
-
const root = host.shadowRoot, button = root
|
|
10
|
+
const root = host.shadowRoot, button = root?.querySelector('.button-nav');
|
|
11
|
+
if (!root || !button) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
const bounds = button.getBoundingClientRect();
|
|
11
15
|
return (root
|
|
12
16
|
.elementFromPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2)
|
|
13
17
|
?.closest('.button-nav') !== button);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-queue",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.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",
|
|
@@ -63,12 +63,12 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@neovici/cosmoz-button": "^1.1.0",
|
|
66
|
-
"@neovici/cosmoz-form": "^
|
|
67
|
-
"@neovici/cosmoz-omnitable": "^
|
|
66
|
+
"@neovici/cosmoz-form": "^4.0.0",
|
|
67
|
+
"@neovici/cosmoz-omnitable": "^19.0.0",
|
|
68
68
|
"@neovici/cosmoz-resizable": "^2.0.0",
|
|
69
69
|
"@neovici/cosmoz-router": "^11.2.8",
|
|
70
70
|
"@neovici/cosmoz-slider": "^5.2.1",
|
|
71
|
-
"@neovici/cosmoz-tabs": "^10.0.0
|
|
71
|
+
"@neovici/cosmoz-tabs": "^10.0.0",
|
|
72
72
|
"@neovici/cosmoz-tokens": "^3.4.0",
|
|
73
73
|
"@neovici/cosmoz-utils": "^6.22.0",
|
|
74
74
|
"@pionjs/pion": "^2.10.0",
|
|
@@ -76,12 +76,13 @@
|
|
|
76
76
|
"lit-html": "^3.3.1"
|
|
77
77
|
},
|
|
78
78
|
"devDependencies": {
|
|
79
|
-
"@changesets/cli": "^
|
|
79
|
+
"@changesets/cli": "^3.0.2",
|
|
80
80
|
"@commitlint/cli": "^20.0.0",
|
|
81
81
|
"@commitlint/config-conventional": "^20.0.0",
|
|
82
82
|
"@eslint/eslintrc": "^2.0.0",
|
|
83
83
|
"@neovici/cfg": "^2.11.0",
|
|
84
84
|
"@neovici/testing": "^2.2.0",
|
|
85
|
+
"@playwright/test": "^1.62.1",
|
|
85
86
|
"@storybook/addon-links": "^10.0.0",
|
|
86
87
|
"@storybook/addon-vitest": "^10.0.0",
|
|
87
88
|
"@storybook/web-components": "^10.0.0",
|
|
@@ -96,7 +97,6 @@
|
|
|
96
97
|
"jsdom": "^26.0.0",
|
|
97
98
|
"storybook": "^10.0.0",
|
|
98
99
|
"typescript": "^5.4.3",
|
|
99
|
-
"@playwright/test": "1.60.0",
|
|
100
100
|
"vitest": "^4.0.0"
|
|
101
101
|
}
|
|
102
102
|
}
|