@neovici/cosmoz-queue 2.11.5 → 3.0.0-beta.1
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/render.d.ts
CHANGED
|
@@ -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-button';
|
|
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';
|
|
@@ -13,7 +14,8 @@ const _emptySlide = {
|
|
|
13
14
|
animation: slideInRight,
|
|
14
15
|
};
|
|
15
16
|
const emptySlide = () => _emptySlide;
|
|
16
|
-
export const renderNav = ({ next, prev, }) => html ` <button
|
|
17
|
+
export const renderNav = ({ next, prev, }) => html ` <cosmoz-button
|
|
18
|
+
variant="secondary"
|
|
17
19
|
class="button-nav prev"
|
|
18
20
|
title="${t('Previous item')}"
|
|
19
21
|
?disabled=${!prev}
|
|
@@ -21,8 +23,9 @@ export const renderNav = ({ next, prev, }) => html ` <button
|
|
|
21
23
|
@click=${prev}
|
|
22
24
|
>
|
|
23
25
|
${arrow}
|
|
24
|
-
</button>
|
|
25
|
-
<button
|
|
26
|
+
</cosmoz-button>
|
|
27
|
+
<cosmoz-button
|
|
28
|
+
variant="secondary"
|
|
26
29
|
title="${t('Next item')}"
|
|
27
30
|
class="button-nav next"
|
|
28
31
|
?disabled=${!next}
|
|
@@ -30,7 +33,7 @@ export const renderNav = ({ next, prev, }) => html ` <button
|
|
|
30
33
|
@click=${next}
|
|
31
34
|
>
|
|
32
35
|
${arrow}
|
|
33
|
-
</button>`;
|
|
36
|
+
</cosmoz-button>`;
|
|
34
37
|
export const renderPagination = (pagination) => {
|
|
35
38
|
if (!pagination)
|
|
36
39
|
return nothing;
|
|
@@ -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,QA4JhB,CAAC;yBAEc,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;AAAtD,wBAkBE"}
|
package/dist/queue/style.js
CHANGED
|
@@ -3,41 +3,51 @@ export const base = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
height: 100
|
|
6
|
+
height: calc(100% - var(--cz-spacing) * 9);
|
|
7
7
|
position: relative;
|
|
8
|
-
font-size:
|
|
8
|
+
font-size: var(--cz-text-sm);
|
|
9
|
+
line-height: var(--cz-text-sm-line-height);
|
|
10
|
+
padding-block: calc(var(--cz-spacing) * 3) 0;
|
|
11
|
+
border: 1px solid var(--cz-color-border-primary);
|
|
12
|
+
background: var(--cz-color-bg-secondary);
|
|
13
|
+
border-radius: var(--cz-radius-xl);
|
|
14
|
+
margin-inline: calc(var(--cz-spacing) * 3);
|
|
9
15
|
}
|
|
10
16
|
|
|
11
17
|
.tabn {
|
|
12
|
-
--cosmoz-tabs-bg-color: var(--cz-bg-color);
|
|
13
18
|
box-shadow: none;
|
|
14
19
|
position: relative;
|
|
15
|
-
|
|
20
|
+
border-bottom: 1px solid var(--cz-color-border-primary);
|
|
16
21
|
}
|
|
17
22
|
.tabn-tab {
|
|
18
23
|
flex: 0 1 0.000001px;
|
|
19
24
|
flex: 0 1 min-content;
|
|
20
25
|
padding: 11px 16px;
|
|
21
26
|
background: inherit;
|
|
27
|
+
color: var(--cz-color-gray-400);
|
|
22
28
|
}
|
|
23
29
|
.tabn-tab:first-of-type {
|
|
24
30
|
margin-left: auto;
|
|
25
31
|
}
|
|
32
|
+
|
|
26
33
|
.tabn-tab[active] {
|
|
27
|
-
color: var(--cz-
|
|
34
|
+
color: var(--cz-color-text-primary);
|
|
28
35
|
box-shadow: none;
|
|
29
36
|
}
|
|
37
|
+
.tabn-tab:hover {
|
|
38
|
+
color: var(--cz-color-text-secondary-hover);
|
|
39
|
+
}
|
|
30
40
|
.tabn-heading {
|
|
31
|
-
font-size:
|
|
32
|
-
font-weight:
|
|
33
|
-
line-height:
|
|
34
|
-
color: var(--cz-
|
|
41
|
+
font-size: var(--cz-text-lg);
|
|
42
|
+
font-weight: var(--cz-font-weight-semibold);
|
|
43
|
+
line-height: var(--cz-text-lg-line-height);
|
|
44
|
+
color: var(--cz-color-text-secondary);
|
|
35
45
|
margin-left: 18px;
|
|
36
46
|
white-space: nowrap;
|
|
37
47
|
}
|
|
38
48
|
.tabn-stats {
|
|
39
|
-
margin: 0
|
|
40
|
-
color: var(--cz-text-
|
|
49
|
+
margin: 0 calc(var(--cz-spacing) * 4);
|
|
50
|
+
color: var(--cz-color-text-secondary);
|
|
41
51
|
white-space: nowrap;
|
|
42
52
|
}
|
|
43
53
|
|
|
@@ -52,7 +62,7 @@ export const base = css `
|
|
|
52
62
|
cursor: col-resize;
|
|
53
63
|
flex: none;
|
|
54
64
|
display: flex;
|
|
55
|
-
background: var(--cz-
|
|
65
|
+
background: var(--cz-color-gray-200);
|
|
56
66
|
z-index: 2;
|
|
57
67
|
position: relative;
|
|
58
68
|
}
|
|
@@ -60,14 +70,14 @@ export const base = css `
|
|
|
60
70
|
content: '';
|
|
61
71
|
display: block;
|
|
62
72
|
flex: none;
|
|
63
|
-
background: var(--cz-
|
|
73
|
+
background: var(--cz-color-gray-300);
|
|
64
74
|
width: 1px;
|
|
65
75
|
margin-left: auto;
|
|
66
76
|
pointer-events: none;
|
|
67
77
|
}
|
|
68
78
|
.gutter:hover::before {
|
|
69
|
-
background: var(--cz-
|
|
70
|
-
box-shadow: -1px 0 0 1px var(--cz-
|
|
79
|
+
background: var(--cz-color-bg-brand-secondary);
|
|
80
|
+
box-shadow: -1px 0 0 1px var(--cz-color-bg-brand-secondary);
|
|
71
81
|
}
|
|
72
82
|
.gutter:hover::after {
|
|
73
83
|
content: '';
|
|
@@ -99,39 +109,11 @@ export const base = css `
|
|
|
99
109
|
flex: none;
|
|
100
110
|
}
|
|
101
111
|
|
|
102
|
-
.button-nav {
|
|
103
|
-
flex: none;
|
|
104
|
-
width: 40px;
|
|
105
|
-
height: 40px;
|
|
106
|
-
cursor: pointer;
|
|
107
|
-
outline: none;
|
|
108
|
-
background-color: var(--cz-button-nav-bg, #fff);
|
|
109
|
-
border-radius: 500px;
|
|
110
|
-
border: solid 1px var(--cz-button-nav-border, #a4abae);
|
|
111
|
-
font-size: 1.08em;
|
|
112
|
-
letter-spacing: -0.01em;
|
|
113
|
-
padding: 0 10px;
|
|
114
|
-
text-transform: none;
|
|
115
|
-
display: flex;
|
|
116
|
-
flex-direction: row;
|
|
117
|
-
align-items: center;
|
|
118
|
-
justify-content: center;
|
|
119
|
-
color: var(--cz-button-nav-color, #343434);
|
|
120
|
-
font-weight: normal;
|
|
121
|
-
margin: 0 0.29em;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.button-nav[disabled] {
|
|
125
|
-
opacity: 0.5;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.button-nav:active {
|
|
129
|
-
background: var(--cz-button-nav-active-bg, rgba(52, 52, 52, 0.4));
|
|
130
|
-
}
|
|
131
112
|
.button-nav.prev,
|
|
132
113
|
.button-page.prev,
|
|
133
114
|
.page-prev {
|
|
134
115
|
transform: scaleX(-1);
|
|
116
|
+
margin-right: calc(var(--cz-spacing) * 2);
|
|
135
117
|
}
|
|
136
118
|
|
|
137
119
|
.tabn-pagination {
|
|
@@ -178,15 +160,13 @@ export default ({ index }) => css `
|
|
|
178
160
|
${base}
|
|
179
161
|
|
|
180
162
|
#list::part(itemRow-${index || '0'}) {
|
|
181
|
-
background: var(
|
|
182
|
-
--cosmoz-omnitable-highlight-color,
|
|
183
|
-
rgba(80, 138, 239, 0.4)
|
|
184
|
-
);
|
|
163
|
+
background: var(--cz-color-bg-tertiary);
|
|
185
164
|
}
|
|
186
165
|
|
|
187
166
|
:host([data-mobile]) .tabn-heading {
|
|
188
|
-
font-size:
|
|
189
|
-
|
|
167
|
+
font-size: var(--cz-text-sm);
|
|
168
|
+
line-height: var(--cz-text-sm-line-height);
|
|
169
|
+
margin-left: calc(var(--cz-spacing) * 3);
|
|
190
170
|
}
|
|
191
171
|
:host([data-mobile]) .tabn-tab {
|
|
192
172
|
padding: 10px;
|
|
@@ -29,7 +29,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
|
|
|
29
29
|
split?: SplitOpts;
|
|
30
30
|
}
|
|
31
31
|
declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, ...thru }: Opts<I>) => {
|
|
32
|
-
tabnav: import("@neovici/cosmoz-tabs/next
|
|
32
|
+
tabnav: import("@neovici/cosmoz-tabs/next").Result<{
|
|
33
33
|
readonly name: "overview";
|
|
34
34
|
readonly title: string;
|
|
35
35
|
readonly disabled: false;
|
|
@@ -89,7 +89,7 @@ declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onAc
|
|
|
89
89
|
};
|
|
90
90
|
export type UseQueue<I> = Omit<Parameters<typeof useQueue<I>>[0], keyof ReturnType<typeof useListState<I>>>;
|
|
91
91
|
declare const _default: <I>(thru: UseQueue<I>) => {
|
|
92
|
-
tabnav: import("@neovici/cosmoz-tabs/next
|
|
92
|
+
tabnav: import("@neovici/cosmoz-tabs/next").Result<{
|
|
93
93
|
readonly name: "overview";
|
|
94
94
|
readonly title: string;
|
|
95
95
|
readonly disabled: false;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-queue",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-beta.1",
|
|
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,11 +63,13 @@
|
|
|
63
63
|
"./list/more/render": "./dist/list/more/render-more.js"
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
+
"@neovici/cosmoz-button": "^1.1.0",
|
|
66
67
|
"@neovici/cosmoz-form": "^1.0.1 || ^2.0.0 || ^3.2.0-beta.1",
|
|
67
68
|
"@neovici/cosmoz-omnitable": "^16.0.3 || ^17.0.0 || ^18.6.0",
|
|
68
69
|
"@neovici/cosmoz-router": "^11.2.8",
|
|
69
70
|
"@neovici/cosmoz-slider": "^5.2.1",
|
|
70
|
-
"@neovici/cosmoz-tabs": "^
|
|
71
|
+
"@neovici/cosmoz-tabs": "^10.0.0-beta.1",
|
|
72
|
+
"@neovici/cosmoz-tokens": "^3.4.0",
|
|
71
73
|
"@neovici/cosmoz-utils": "^6.22.0",
|
|
72
74
|
"@pionjs/pion": "^2.10.0",
|
|
73
75
|
"i18next": ">=23.0.0 <27.0.0",
|