@neovici/cosmoz-queue 2.11.5 → 2.12.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/queue/index.d.ts +0 -1
- package/dist/queue/index.d.ts.map +1 -1
- package/dist/queue/index.js +0 -1
- package/dist/queue/queue.d.ts +1 -1
- package/dist/queue/queue.d.ts.map +1 -1
- package/dist/queue/queue.js +3 -2
- package/dist/queue/render.d.ts +3 -1
- package/dist/queue/render.d.ts.map +1 -1
- package/dist/queue/render.js +9 -3
- package/dist/queue/style.d.ts.map +1 -1
- package/dist/queue/style.js +4 -48
- package/dist/queue/use-queue.d.ts +7 -3
- package/dist/queue/use-queue.d.ts.map +1 -1
- package/dist/queue/use-queue.js +1 -3
- package/package.json +4 -6
- package/dist/queue/use-split.d.ts +0 -8
- package/dist/queue/use-split.d.ts.map +0 -1
- package/dist/queue/use-split.js +0 -30
package/dist/queue/index.d.ts
CHANGED
|
@@ -15,7 +15,6 @@ export type { Item, Props } from './use-fetch-actions';
|
|
|
15
15
|
export { useListSSE } from './use-list-sse';
|
|
16
16
|
export { default as useDataNav } from './use-data-nav';
|
|
17
17
|
export { useMobile } from './use-mobile';
|
|
18
|
-
export { default as useSplit } from './use-split';
|
|
19
18
|
export { default as useTabs } from './use-tabs';
|
|
20
19
|
export { filter, notify, useList, useListState } from './use-list';
|
|
21
20
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,mBAAmB,aAAa,CAAC;AAGjC,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,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGxD,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,
|
|
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,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,mBAAmB,aAAa,CAAC;AAGjC,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,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGxD,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"}
|
package/dist/queue/index.js
CHANGED
|
@@ -20,7 +20,6 @@ export { useListSSE } from './use-list-sse';
|
|
|
20
20
|
// Navigation & layout hooks
|
|
21
21
|
export { default as useDataNav } from './use-data-nav';
|
|
22
22
|
export { useMobile } from './use-mobile';
|
|
23
|
-
export { default as useSplit } from './use-split';
|
|
24
23
|
export { default as useTabs } from './use-tabs';
|
|
25
24
|
// List hooks
|
|
26
25
|
export { filter, notify, useList, useListState } from './use-list';
|
package/dist/queue/queue.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ type ViewProps<I> = Omit<QueueProps<I>, 'nav'> & {
|
|
|
7
7
|
nav: TemplateResult;
|
|
8
8
|
item: I;
|
|
9
9
|
};
|
|
10
|
-
interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback'
|
|
10
|
+
interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback'>, Pick<RenderQueue<I, D>, 'details' | 'afterHeading'> {
|
|
11
11
|
list: (thru: Record<string, any>, props: QueueProps<I> & {
|
|
12
12
|
onRef: (el?: Element) => void;
|
|
13
13
|
}) => TemplateResult;
|
|
@@ -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,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,
|
|
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,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,CAAC;IACpD,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;CACxB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBA8FjD,CAAC"}
|
package/dist/queue/queue.js
CHANGED
|
@@ -3,14 +3,13 @@ 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,
|
|
6
|
+
const { heading, afterHeading, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, } = props;
|
|
7
7
|
const queueProps = useQueue({
|
|
8
8
|
id,
|
|
9
9
|
api,
|
|
10
10
|
idHashParam,
|
|
11
11
|
tabHashParam,
|
|
12
12
|
fallback,
|
|
13
|
-
split,
|
|
14
13
|
});
|
|
15
14
|
const { index, hideActions, items, setItems, setSelected, totalAvailable, setTotalAvailable, onItemClick, nav, tabnav, } = queueProps;
|
|
16
15
|
const { listRef, onAsyncSimpleAction } = useAsyncAction(nav);
|
|
@@ -28,8 +27,10 @@ export const queue = (props) => {
|
|
|
28
27
|
totalAvailable,
|
|
29
28
|
nav,
|
|
30
29
|
pagination,
|
|
30
|
+
persistKey: settingsId ? `${settingsId}-split` : undefined,
|
|
31
31
|
list: list({
|
|
32
32
|
id: 'list',
|
|
33
|
+
slot: 'previous',
|
|
33
34
|
'.exposedParts': `itemRow, itemRow-${index}`,
|
|
34
35
|
'.settingsId': settingsId,
|
|
35
36
|
'@visible-items-changed': updateWith(setItems),
|
package/dist/queue/render.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import '@neovici/cosmoz-resizable';
|
|
1
2
|
import { RenderTabs } from '@neovici/cosmoz-tabs/next/index.js';
|
|
2
3
|
import { nothing, TemplateResult } from 'lit-html';
|
|
3
4
|
import type { Pagination } from './types';
|
|
@@ -64,11 +65,12 @@ export interface RenderQueue<I, D> extends Pick<RenderView<I, D>, 'renderItem' |
|
|
|
64
65
|
totalAvailable?: number;
|
|
65
66
|
list: TemplateResult;
|
|
66
67
|
pagination?: Pagination;
|
|
68
|
+
persistKey?: string;
|
|
67
69
|
tabnav: RenderTabs<Tab>;
|
|
68
70
|
nav: Omit<RenderSlide<I, D>, 'renderItem' | 'renderLoader' | 'details'> & Pick<RenderView<I, D>, 'details'> & {
|
|
69
71
|
index: number;
|
|
70
72
|
};
|
|
71
73
|
}
|
|
72
|
-
export declare const renderQueue: <I, D>({ heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details, pagination: _pagination, }: RenderQueue<I, D>) => TemplateResult<1>;
|
|
74
|
+
export declare const renderQueue: <I, D>({ heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details, pagination: _pagination, persistKey, }: RenderQueue<I, D>) => TemplateResult<1>;
|
|
73
75
|
export {};
|
|
74
76
|
//# sourceMappingURL=render.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"
|
|
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
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import '@neovici/cosmoz-resizable';
|
|
1
2
|
import { slideInLeft, slideInRight } from '@neovici/cosmoz-slider';
|
|
2
3
|
import { renderTabs } from '@neovici/cosmoz-tabs/next/index.js';
|
|
3
4
|
import { lazyUntil } from '@neovici/cosmoz-utils/directives/lazy-until';
|
|
@@ -101,7 +102,7 @@ export const renderSlide = ({ id, forward, item, ...thru }) => item
|
|
|
101
102
|
animation: forward ? slideInRight : slideInLeft,
|
|
102
103
|
}
|
|
103
104
|
: emptySlide();
|
|
104
|
-
export const renderQueue = ({ heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, }) => {
|
|
105
|
+
export const renderQueue = ({ heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, persistKey, }) => {
|
|
105
106
|
const activeTab = tabnav.active?.name;
|
|
106
107
|
const pagination = _pagination
|
|
107
108
|
? { ..._pagination, totalAvailable }
|
|
@@ -125,12 +126,17 @@ export const renderQueue = ({ heading, afterHeading, index, tabnav, items, total
|
|
|
125
126
|
${renderPagination(pagination)}
|
|
126
127
|
</cosmoz-tabs-next>
|
|
127
128
|
|
|
128
|
-
<
|
|
129
|
+
<cosmoz-resizable-view
|
|
130
|
+
data-active=${activeTab}
|
|
131
|
+
direction="horizontal"
|
|
132
|
+
persist=${persistKey}
|
|
133
|
+
>
|
|
129
134
|
${list}
|
|
130
135
|
<cosmoz-slider
|
|
131
136
|
id="queue"
|
|
137
|
+
slot="next"
|
|
132
138
|
.slide=${when(activeTab !== 'overview', () => renderSlide({ ...nav, renderLoader, renderItem, details }), emptySlide)}
|
|
133
139
|
></cosmoz-slider>
|
|
134
|
-
</
|
|
140
|
+
</cosmoz-resizable-view>
|
|
135
141
|
`;
|
|
136
142
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/queue/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/queue/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAkIhB,CAAC;yBAEc,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;AAAtD,wBAoBE"}
|
package/dist/queue/style.js
CHANGED
|
@@ -41,62 +41,18 @@ export const base = css `
|
|
|
41
41
|
white-space: nowrap;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
.split {
|
|
45
|
-
display: flex;
|
|
46
|
-
flex: auto;
|
|
47
|
-
flex-direction: row;
|
|
48
|
-
min-height: 0;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.gutter {
|
|
52
|
-
cursor: col-resize;
|
|
53
|
-
flex: none;
|
|
54
|
-
display: flex;
|
|
55
|
-
background: var(--cz-queue-gutter-bg, var(--cz-header-bg-color, #fff));
|
|
56
|
-
z-index: 2;
|
|
57
|
-
position: relative;
|
|
58
|
-
}
|
|
59
|
-
.gutter::before {
|
|
60
|
-
content: '';
|
|
61
|
-
display: block;
|
|
62
|
-
flex: none;
|
|
63
|
-
background: var(--cz-queue-gutter-bg, var(--cz-header-bg-color, #bbb));
|
|
64
|
-
width: 1px;
|
|
65
|
-
margin-left: auto;
|
|
66
|
-
pointer-events: none;
|
|
67
|
-
}
|
|
68
|
-
.gutter:hover::before {
|
|
69
|
-
background: var(--cz-accent-color);
|
|
70
|
-
box-shadow: -1px 0 0 1px var(--cz-accent-color);
|
|
71
|
-
}
|
|
72
|
-
.gutter:hover::after {
|
|
73
|
-
content: '';
|
|
74
|
-
display: block;
|
|
75
|
-
position: absolute;
|
|
76
|
-
top: 0;
|
|
77
|
-
left: -2px;
|
|
78
|
-
right: -2px;
|
|
79
|
-
bottom: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
44
|
#list {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
#list,
|
|
86
|
-
#queue {
|
|
87
|
-
flex: auto;
|
|
45
|
+
flex-basis: 25%;
|
|
46
|
+
min-width: 300px;
|
|
88
47
|
}
|
|
89
48
|
|
|
90
49
|
[data-active='split'] .view-core::part(header-bg) {
|
|
91
50
|
border-top-left-radius: 0;
|
|
92
51
|
}
|
|
93
52
|
|
|
94
|
-
[data-active='overview']
|
|
53
|
+
[data-active='overview'] #queue,
|
|
95
54
|
[data-active='queue'] #list {
|
|
96
|
-
display: none;
|
|
97
|
-
}
|
|
98
|
-
[data-active='overview'] #queue {
|
|
99
|
-
flex: none;
|
|
55
|
+
display: none !important;
|
|
100
56
|
}
|
|
101
57
|
|
|
102
58
|
.button-nav {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useListState } from './use-list';
|
|
2
|
-
import { SplitOpts } from './use-split';
|
|
3
2
|
import { Options as UseTabsOptions } from './use-tabs';
|
|
4
3
|
interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOptions<I>, 'fallback'> {
|
|
5
4
|
tabHashParam?: string;
|
|
@@ -26,9 +25,10 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
|
|
|
26
25
|
*/
|
|
27
26
|
api?: (id: string, item: I) => string;
|
|
28
27
|
id?: (i: I) => string;
|
|
29
|
-
|
|
28
|
+
/** @deprecated Split sizing is now controlled via CSS */
|
|
29
|
+
split?: Record<string, unknown>;
|
|
30
30
|
}
|
|
31
|
-
declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate,
|
|
31
|
+
declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, ...thru }: Opts<I>) => {
|
|
32
32
|
tabnav: import("@neovici/cosmoz-tabs/next/use-tabs.js").Result<{
|
|
33
33
|
readonly name: "overview";
|
|
34
34
|
readonly title: string;
|
|
@@ -80,6 +80,8 @@ declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onAc
|
|
|
80
80
|
prev: (() => void) | undefined;
|
|
81
81
|
next: (() => void) | undefined;
|
|
82
82
|
};
|
|
83
|
+
/** @deprecated Split sizing is now controlled via CSS */
|
|
84
|
+
split?: Record<string, unknown>;
|
|
83
85
|
totalAvailable: number | undefined;
|
|
84
86
|
setTotalAvailable: import("@pionjs/pion").StateUpdater<number | undefined>;
|
|
85
87
|
items: I[];
|
|
@@ -140,6 +142,8 @@ declare const _default: <I>(thru: UseQueue<I>) => {
|
|
|
140
142
|
prev: (() => void) | undefined;
|
|
141
143
|
next: (() => void) | undefined;
|
|
142
144
|
};
|
|
145
|
+
/** @deprecated Split sizing is now controlled via CSS */
|
|
146
|
+
split?: Record<string, unknown>;
|
|
143
147
|
totalAvailable: number | undefined;
|
|
144
148
|
setTotalAvailable: import("@pionjs/pion").StateUpdater<number | undefined>;
|
|
145
149
|
items: I[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,
|
|
1
|
+
{"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAyDhE,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,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,uEAQlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0CH,KAAK;oBArBA,MAAM;;;;;;;;;;;;IAjCjB,yDAAyD;YACjD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;CAmF/B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBArC7B,KAAK;oBArBA,MAAM;;;;;;;;;;;;IAjCjB,yDAAyD;YACjD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;AA0FhC,wBACgD"}
|
package/dist/queue/use-queue.js
CHANGED
|
@@ -6,7 +6,6 @@ import { useMobile } from './use-mobile';
|
|
|
6
6
|
import useDataNav from './use-data-nav';
|
|
7
7
|
import useKeyNav from './use-key-nav';
|
|
8
8
|
import { useListState } from './use-list';
|
|
9
|
-
import useSplit from './use-split';
|
|
10
9
|
import useTabs from './use-tabs';
|
|
11
10
|
import useUpdates from './use-updates';
|
|
12
11
|
import { getItems, normalizeHeaders } from './util';
|
|
@@ -29,7 +28,7 @@ const useQNav = ({ id, api, items, ...thru }) => {
|
|
|
29
28
|
});
|
|
30
29
|
return { ...pass, id, details };
|
|
31
30
|
};
|
|
32
|
-
const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate,
|
|
31
|
+
const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, ...thru }) => {
|
|
33
32
|
const { items: _items, selected } = thru, mobile = useMobile(), items = useMemo(() => normalizeHeaders(_items), [_items]), queueItems = useMemo(() => getItems(items, selected), [items, selected]), { tabnav, activeTab } = useTabs({
|
|
34
33
|
items: queueItems,
|
|
35
34
|
hashParam: tabHashParam,
|
|
@@ -50,7 +49,6 @@ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActiva
|
|
|
50
49
|
setItem(items[Math.min(idx + 1, items.length - 1)]);
|
|
51
50
|
}, [item, id, items]);
|
|
52
51
|
useKeyNav({ activeTab, ...nav });
|
|
53
|
-
useSplit({ activeTab, ...split });
|
|
54
52
|
useUpdates({ ensue, ...nav });
|
|
55
53
|
return {
|
|
56
54
|
...thru,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-queue",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.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,7 +53,6 @@
|
|
|
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-split": "./dist/queue/use-split.js",
|
|
57
56
|
"./use-data-nav": "./dist/queue/use-data-nav.js",
|
|
58
57
|
"./use-list": "./dist/queue/use-list.js",
|
|
59
58
|
"./util/fetch": "./dist/util/fetch/fetch.js",
|
|
@@ -65,14 +64,14 @@
|
|
|
65
64
|
"dependencies": {
|
|
66
65
|
"@neovici/cosmoz-form": "^1.0.1 || ^2.0.0 || ^3.2.0-beta.1",
|
|
67
66
|
"@neovici/cosmoz-omnitable": "^16.0.3 || ^17.0.0 || ^18.6.0",
|
|
67
|
+
"@neovici/cosmoz-resizable": "^2.0.0",
|
|
68
68
|
"@neovici/cosmoz-router": "^11.2.8",
|
|
69
69
|
"@neovici/cosmoz-slider": "^5.2.1",
|
|
70
70
|
"@neovici/cosmoz-tabs": "^9.3.2",
|
|
71
71
|
"@neovici/cosmoz-utils": "^6.22.0",
|
|
72
72
|
"@pionjs/pion": "^2.10.0",
|
|
73
73
|
"i18next": ">=23.0.0 <27.0.0",
|
|
74
|
-
"lit-html": "^3.3.1"
|
|
75
|
-
"split.js": "^1.6.5"
|
|
74
|
+
"lit-html": "^3.3.1"
|
|
76
75
|
},
|
|
77
76
|
"devDependencies": {
|
|
78
77
|
"@changesets/cli": "^2.31.0",
|
|
@@ -87,16 +86,15 @@
|
|
|
87
86
|
"@storybook/web-components-vite": "^10.0.0",
|
|
88
87
|
"@types/node": "^22.10.2",
|
|
89
88
|
"@types/react": "^19.2.13",
|
|
90
|
-
"@types/split.js": "^1.6.0",
|
|
91
89
|
"@vitest/browser": "^4.0.0",
|
|
92
90
|
"@vitest/browser-playwright": "^4.0.0",
|
|
93
91
|
"esbuild": "^0.27.0",
|
|
94
92
|
"http-server": "^14.1.1",
|
|
95
93
|
"husky": "^9.0.11",
|
|
96
94
|
"jsdom": "^26.0.0",
|
|
97
|
-
"playwright": "^1.60.0",
|
|
98
95
|
"storybook": "^10.0.0",
|
|
99
96
|
"typescript": "^5.4.3",
|
|
97
|
+
"@playwright/test": "1.60.0",
|
|
100
98
|
"vitest": "^4.0.0"
|
|
101
99
|
}
|
|
102
100
|
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import Split from 'split.js';
|
|
2
|
-
export type SplitOpts = Pick<Split.Options, 'sizes' | 'minSize' | 'expandToMin' | 'snapOffset'>;
|
|
3
|
-
interface Opts extends SplitOpts {
|
|
4
|
-
activeTab: string;
|
|
5
|
-
}
|
|
6
|
-
declare const _default: ({ activeTab, ...opts }: Opts) => void;
|
|
7
|
-
export default _default;
|
|
8
|
-
//# sourceMappingURL=use-split.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-split.d.ts","sourceRoot":"","sources":["../../src/queue/use-split.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,UAAU,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,IAAI,CAC3B,KAAK,CAAC,OAAO,EACb,OAAO,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAClD,CAAC;AAEF,UAAU,IAAK,SAAQ,SAAS;IAC/B,SAAS,EAAE,MAAM,CAAC;CAClB;yBAEe,wBAAwB,IAAI;AAA5C,wBAyBE"}
|
package/dist/queue/use-split.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { useRef, useEffect } from '@pionjs/pion';
|
|
2
|
-
import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
|
|
3
|
-
import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
|
|
4
|
-
import Split from 'split.js';
|
|
5
|
-
export default ({ activeTab, ...opts }) => {
|
|
6
|
-
const splitRef = useRef(undefined);
|
|
7
|
-
const host = useHost();
|
|
8
|
-
const meta = useMeta(opts);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
if (activeTab !== 'split')
|
|
11
|
-
return;
|
|
12
|
-
const root = host.shadowRoot;
|
|
13
|
-
const list = root.querySelector('#list');
|
|
14
|
-
const queue = root.querySelector('#queue');
|
|
15
|
-
const listMinWidth = Array.isArray(meta.minSize)
|
|
16
|
-
? meta.minSize[0]
|
|
17
|
-
: undefined;
|
|
18
|
-
if (listMinWidth != null && list) {
|
|
19
|
-
list.style.minWidth = `${listMinWidth}px`;
|
|
20
|
-
}
|
|
21
|
-
splitRef.current = Split([list, queue], {
|
|
22
|
-
gutterSize: 2,
|
|
23
|
-
...meta,
|
|
24
|
-
});
|
|
25
|
-
return () => {
|
|
26
|
-
splitRef.current?.destroy();
|
|
27
|
-
list.style.minWidth = '';
|
|
28
|
-
};
|
|
29
|
-
}, [activeTab]);
|
|
30
|
-
};
|