vueless 0.0.94 → 0.0.95
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/package.json
CHANGED
|
@@ -3,9 +3,19 @@ import defaultConfig from "../configs/default.config";
|
|
|
3
3
|
import { cva, cx } from "../../service.ui";
|
|
4
4
|
import { computed, useSlots } from "vue";
|
|
5
5
|
|
|
6
|
-
export function useAttrs(
|
|
6
|
+
export function useAttrs(
|
|
7
|
+
props,
|
|
8
|
+
{
|
|
9
|
+
tableRows,
|
|
10
|
+
selectedRows,
|
|
11
|
+
isNesting,
|
|
12
|
+
isHeaderSticky,
|
|
13
|
+
isFooterSticky,
|
|
14
|
+
hasSlotContentTheadActions,
|
|
15
|
+
},
|
|
16
|
+
) {
|
|
7
17
|
const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
|
|
8
|
-
const { wrapper,
|
|
18
|
+
const { wrapper, stickyHeaderColumn, headerCell } = config.value;
|
|
9
19
|
|
|
10
20
|
const slot = useSlots();
|
|
11
21
|
|
|
@@ -16,9 +26,9 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
|
|
|
16
26
|
});
|
|
17
27
|
|
|
18
28
|
const cvaCustomHeaderItem = cva({
|
|
19
|
-
base:
|
|
20
|
-
variants:
|
|
21
|
-
compoundVariants:
|
|
29
|
+
base: stickyHeaderColumn.base,
|
|
30
|
+
variants: stickyHeaderColumn.variants,
|
|
31
|
+
compoundVariants: stickyHeaderColumn.compoundVariants,
|
|
22
32
|
});
|
|
23
33
|
|
|
24
34
|
const cvaHeaderCell = cva({
|
|
@@ -34,12 +44,12 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
|
|
|
34
44
|
const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
|
|
35
45
|
|
|
36
46
|
const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
|
|
37
|
-
const customHeaderItemAttrsRaw = getAttrs("
|
|
47
|
+
const customHeaderItemAttrsRaw = getAttrs("stickyHeaderColumn", {
|
|
38
48
|
classes: customHeaderItemClasses,
|
|
39
49
|
});
|
|
40
50
|
const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
|
|
41
51
|
const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
|
|
42
|
-
const
|
|
52
|
+
const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
|
|
43
53
|
const tableAttrs = getAttrs("table");
|
|
44
54
|
const headerAttrs = getAttrs("header");
|
|
45
55
|
const headerRowAttrs = getAttrs("headerRow");
|
|
@@ -100,17 +110,23 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
|
|
|
100
110
|
const headerRowCellAttrs = computed(() => ({
|
|
101
111
|
class: cx([
|
|
102
112
|
config.value.headerRow,
|
|
103
|
-
selectedRows.value.length && !isHeaderSticky.value && config.value.
|
|
113
|
+
selectedRows.value.length && !isHeaderSticky.value && config.value.stickyHeaderHidden,
|
|
104
114
|
]),
|
|
105
115
|
}));
|
|
106
116
|
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
117
|
+
const stickyHeaderAttrs = computed(() => {
|
|
118
|
+
// console.log("hasSlotContentTheadActions", hasSlotContentTheadActions.value);
|
|
119
|
+
|
|
120
|
+
return {
|
|
121
|
+
class: cx([
|
|
122
|
+
config.value.stickyHeader,
|
|
123
|
+
selectedRows.value.length &&
|
|
124
|
+
hasSlotContentTheadActions.value &&
|
|
125
|
+
config.value.stickyHeaderActions,
|
|
126
|
+
isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
|
|
127
|
+
]),
|
|
128
|
+
};
|
|
129
|
+
});
|
|
114
130
|
|
|
115
131
|
const footerClassesAttrs = computed(() => ({
|
|
116
132
|
class: cx([config.value.footer, isFooterSticky.value && config.value.footerSticky]),
|
|
@@ -124,7 +140,7 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
|
|
|
124
140
|
]),
|
|
125
141
|
}));
|
|
126
142
|
|
|
127
|
-
const
|
|
143
|
+
const stickyHeaderColumnAttrs = computed(() => (thClass) => ({
|
|
128
144
|
...customHeaderItemAttrsRaw.value,
|
|
129
145
|
class: cx([customHeaderItemAttrsRaw.value.class, thClass]),
|
|
130
146
|
}));
|
|
@@ -142,14 +158,14 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
|
|
|
142
158
|
};
|
|
143
159
|
|
|
144
160
|
const toggleButtonWrapperAttrs = computed(() => (index) => ({
|
|
145
|
-
class: index === 0 &&
|
|
161
|
+
class: index === 0 && isNesting.value ? config.value.toggleButtonWrapper : "",
|
|
146
162
|
}));
|
|
147
163
|
|
|
148
164
|
return {
|
|
149
165
|
config,
|
|
150
166
|
wrapperAttrs,
|
|
151
|
-
|
|
152
|
-
|
|
167
|
+
stickyHeaderColumnAttrs,
|
|
168
|
+
stickyHeaderAttrs,
|
|
153
169
|
tableWrapperAttrs,
|
|
154
170
|
headerRowCellAttrs,
|
|
155
171
|
bodyRowAttrs,
|
|
@@ -172,7 +188,7 @@ export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFoo
|
|
|
172
188
|
emptyAttrs,
|
|
173
189
|
dateSeparatorAttrs,
|
|
174
190
|
selectedRowsCountAttrs,
|
|
175
|
-
|
|
191
|
+
stickyHeaderLoaderAttrs,
|
|
176
192
|
tableAttrs,
|
|
177
193
|
headerRowAttrs,
|
|
178
194
|
tableLoaderAttrs,
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
export default /*tw*/ {
|
|
2
2
|
wrapper: {
|
|
3
|
-
base: "relative bg-white rounded-
|
|
3
|
+
base: "relative bg-white rounded-lg",
|
|
4
4
|
variants: {
|
|
5
5
|
compact: {
|
|
6
6
|
true: "group/table-compact",
|
|
7
7
|
},
|
|
8
8
|
},
|
|
9
9
|
},
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
headerCheckboxWrapper: "w-[3.75rem]",
|
|
11
|
+
header: "border-b border-gray-200 ",
|
|
12
|
+
headerRow: "",
|
|
13
|
+
headerCell: "p-4 text-sm font-normal text-gray-500 text-left",
|
|
14
|
+
headerSelectAllCheckbox: "",
|
|
15
|
+
stickyHeader: "flex items-center z-30 overflow-hidden rounded-t-lg border border-gray-200 border-b-0",
|
|
16
|
+
stickyHeaderHidden: "relative -top-[3.75rem] collapse",
|
|
17
|
+
stickyHeaderLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
|
|
18
|
+
stickyHeaderActive: "fixed top-0 border border-gray-200 bg-white rounded-none",
|
|
19
|
+
stickyHeaderActions: "rounded-t-lg border border-blue-200 !bg-blue-50",
|
|
20
|
+
stickyHeaderColumn: {
|
|
15
21
|
base: "flex-none text-sm font-normal text-gray-500 px-[1.125rem] py-4 [&:nth-child(2)]:pl-0",
|
|
16
22
|
variants: {
|
|
17
23
|
compact: {
|
|
@@ -19,27 +25,11 @@ export default /*tw*/ {
|
|
|
19
25
|
},
|
|
20
26
|
},
|
|
21
27
|
},
|
|
22
|
-
selectedRowsCount: "
|
|
28
|
+
selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
|
|
23
29
|
selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
|
|
24
|
-
headerStickyLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
|
|
25
30
|
innerWrapper: "overflow-auto rounded-lg border border-gray-200",
|
|
26
31
|
innerWrapperSelected: "!rounded-t-none border-t-0",
|
|
27
|
-
table: "min-w-full border-none
|
|
28
|
-
headerCheckboxWrapper: "w-[3.75rem]",
|
|
29
|
-
header: "border-b border-solid border-gray-200",
|
|
30
|
-
headerRow: "",
|
|
31
|
-
headerCell: {
|
|
32
|
-
base: `
|
|
33
|
-
px-[1.125rem] py-4 text-sm font-normal text-gray-500
|
|
34
|
-
text-left first:p-4 last:p-4 [&:nth-child(2)]:pl-0
|
|
35
|
-
`,
|
|
36
|
-
variants: {
|
|
37
|
-
compact: {
|
|
38
|
-
true: "bg-white p-4 first:p-4 last:p-4",
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
headerSelectAllCheckbox: "",
|
|
32
|
+
table: "min-w-full border-none text-sm w-full",
|
|
43
33
|
tableLoader: "absolute !top-auto",
|
|
44
34
|
moreRow: "!px-0 !py-4 first:mx-auto",
|
|
45
35
|
moreRowHidden: "!p-0",
|
|
@@ -78,8 +68,7 @@ export default /*tw*/ {
|
|
|
78
68
|
tomorrow: "tomorrow",
|
|
79
69
|
},
|
|
80
70
|
defaultVariants: {
|
|
81
|
-
|
|
82
|
-
nesting: false,
|
|
71
|
+
nesting: null,
|
|
83
72
|
compact: false,
|
|
84
73
|
selectable: false,
|
|
85
74
|
stickyHeader: false,
|
|
@@ -8,17 +8,26 @@ import ULink from "../ui.button-link";
|
|
|
8
8
|
import UMoney from "../ui.text-money";
|
|
9
9
|
import UBadge from "../ui.text-badge";
|
|
10
10
|
|
|
11
|
+
const STICKY_PARAMETERS = {
|
|
12
|
+
docs: {
|
|
13
|
+
story: {
|
|
14
|
+
inline: false,
|
|
15
|
+
iframeHeight: 450,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
11
20
|
export default {
|
|
12
21
|
id: "7010",
|
|
13
22
|
title: "Data / Table",
|
|
14
23
|
component: UTable,
|
|
15
24
|
argTypes: {
|
|
16
25
|
...getArgTypes(UTable.name),
|
|
17
|
-
|
|
26
|
+
row: {
|
|
18
27
|
description:
|
|
19
28
|
"The row of the table. It's not a prop (it created for ease of work with storybook).",
|
|
20
29
|
},
|
|
21
|
-
|
|
30
|
+
numberOfRows: {
|
|
22
31
|
description:
|
|
23
32
|
"The number of table rows. It's not a prop (it created for ease of work with storybook).",
|
|
24
33
|
},
|
|
@@ -30,8 +39,8 @@ export default {
|
|
|
30
39
|
{ key: "key_3", label: "title 3" },
|
|
31
40
|
{ key: "key_4", label: "title 4" },
|
|
32
41
|
],
|
|
33
|
-
|
|
34
|
-
id:
|
|
42
|
+
row: {
|
|
43
|
+
id: 1,
|
|
35
44
|
isChecked: false,
|
|
36
45
|
key_1: {
|
|
37
46
|
primaryRow: "primaryRow",
|
|
@@ -49,12 +58,8 @@ export default {
|
|
|
49
58
|
primaryRow: "primaryRow",
|
|
50
59
|
secondaryRow: "secondaryRow",
|
|
51
60
|
},
|
|
52
|
-
date: {
|
|
53
|
-
primaryRow: 1709046013,
|
|
54
|
-
separatorDate: new Date(1709046013 * 1000).toString(),
|
|
55
|
-
},
|
|
56
61
|
},
|
|
57
|
-
|
|
62
|
+
numberOfRows: 5,
|
|
58
63
|
},
|
|
59
64
|
};
|
|
60
65
|
|
|
@@ -76,8 +81,12 @@ const DefaultTemplate = (args) => ({
|
|
|
76
81
|
itemsData() {
|
|
77
82
|
let rows = [];
|
|
78
83
|
|
|
79
|
-
for (let i = 0; i < args.
|
|
80
|
-
|
|
84
|
+
for (let i = 0; i < args.numberOfRows; i++) {
|
|
85
|
+
const newRow = { ...args.row };
|
|
86
|
+
|
|
87
|
+
newRow.id = getRandomId();
|
|
88
|
+
rows.push(newRow);
|
|
89
|
+
}
|
|
81
90
|
|
|
82
91
|
return rows;
|
|
83
92
|
},
|
|
@@ -113,81 +122,39 @@ const SlotTemplate = (args) => ({
|
|
|
113
122
|
itemsData() {
|
|
114
123
|
const rows = [];
|
|
115
124
|
|
|
116
|
-
for (let i = 0; i < args.
|
|
125
|
+
for (let i = 0; i < args.numberOfRows; i++) rows.push(args.row);
|
|
117
126
|
|
|
118
127
|
return rows;
|
|
119
128
|
},
|
|
120
129
|
},
|
|
121
130
|
});
|
|
122
131
|
|
|
123
|
-
// TODO: Find how to interrupt styles inside a component for UMoney.
|
|
124
132
|
export const Default = DefaultTemplate.bind({});
|
|
125
133
|
Default.args = {};
|
|
126
134
|
|
|
127
|
-
export const defaultCells = SlotTemplate.bind({});
|
|
128
|
-
defaultCells.args = {
|
|
129
|
-
columns: [
|
|
130
|
-
{ key: "link", label: "link" },
|
|
131
|
-
{ key: "money", label: "money", thClass: "text-right" },
|
|
132
|
-
{ key: "email", label: "email" },
|
|
133
|
-
{ key: "tags", label: "tags" },
|
|
134
|
-
],
|
|
135
|
-
itemsRow: {
|
|
136
|
-
link: "some link",
|
|
137
|
-
money: {
|
|
138
|
-
sum: 10,
|
|
139
|
-
currencySymbol: "$",
|
|
140
|
-
},
|
|
141
|
-
email: "some@email.ua",
|
|
142
|
-
tags: {
|
|
143
|
-
tags: { label: "some tag" },
|
|
144
|
-
variant: "orange",
|
|
145
|
-
},
|
|
146
|
-
},
|
|
147
|
-
|
|
148
|
-
slotTemplate: `
|
|
149
|
-
<template #cell-link="{ value }">
|
|
150
|
-
<ULink :url="value" size="value" :label="value" />
|
|
151
|
-
</template>
|
|
152
|
-
|
|
153
|
-
<template #cell-money="{ value }">
|
|
154
|
-
<UMoney :sum="value.sum" :symbol="value.currencySymbol" />
|
|
155
|
-
</template>
|
|
156
|
-
|
|
157
|
-
<template #cell-email="{ value }">
|
|
158
|
-
<ULink :label="value" :url="value" type="email" size="sm" />
|
|
159
|
-
</template>
|
|
160
|
-
|
|
161
|
-
<template #cell-tags="{ value }">
|
|
162
|
-
<div>
|
|
163
|
-
<UBadge
|
|
164
|
-
v-for="item in value.tags"
|
|
165
|
-
:key="item"
|
|
166
|
-
:label="item"
|
|
167
|
-
:color="value.variant"
|
|
168
|
-
/>
|
|
169
|
-
</div>
|
|
170
|
-
</template>
|
|
171
|
-
`,
|
|
172
|
-
};
|
|
173
|
-
|
|
174
135
|
export const Empty = EmptyTemplate.bind({});
|
|
175
136
|
Empty.args = {};
|
|
176
137
|
|
|
177
138
|
export const Filters = EmptyTemplate.bind({});
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
export const Resource = DefaultTemplate.bind({});
|
|
181
|
-
Resource.args = { resource: "/7010--resource" };
|
|
139
|
+
Filters.args = { filters: true };
|
|
182
140
|
|
|
183
141
|
export const selectable = DefaultTemplate.bind({});
|
|
184
142
|
selectable.args = { selectable: true };
|
|
185
143
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
144
|
+
export const stickyHeader = DefaultTemplate.bind({});
|
|
145
|
+
stickyHeader.parameters = STICKY_PARAMETERS;
|
|
146
|
+
stickyHeader.args = {
|
|
147
|
+
numberOfRows: 50,
|
|
190
148
|
selectable: true,
|
|
149
|
+
stickyHeader: true,
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
export const stickyFooter = SlotTemplate.bind({});
|
|
153
|
+
stickyFooter.parameters = STICKY_PARAMETERS;
|
|
154
|
+
stickyFooter.args = {
|
|
155
|
+
numberOfRows: 50,
|
|
156
|
+
selectable: true,
|
|
157
|
+
stickyFooter: true,
|
|
191
158
|
slotTemplate: `
|
|
192
159
|
<template #tfoot>
|
|
193
160
|
<UTableCell>
|
|
@@ -200,19 +167,14 @@ fixedFooter.args = {
|
|
|
200
167
|
`,
|
|
201
168
|
};
|
|
202
169
|
|
|
203
|
-
export const stickyHeader = DefaultTemplate.bind({});
|
|
204
|
-
stickyHeader.args = { stickyHeader: true };
|
|
205
|
-
|
|
206
170
|
export const compact = DefaultTemplate.bind({});
|
|
207
171
|
compact.args = { compact: true };
|
|
208
172
|
|
|
209
173
|
export const DateDivider = DefaultTemplate.bind({});
|
|
210
|
-
DateDivider.args = {
|
|
211
|
-
dateDivider: true,
|
|
212
|
-
};
|
|
174
|
+
DateDivider.args = { dateDivider: true };
|
|
213
175
|
|
|
214
176
|
export const DateDividerCustomLabel = DefaultTemplate.bind({});
|
|
215
|
-
|
|
177
|
+
DateDividerCustomLabel.args = {
|
|
216
178
|
dateDivider: [
|
|
217
179
|
{
|
|
218
180
|
date: new Date(1709046013 * 1000).toString(),
|
|
@@ -300,3 +262,48 @@ slotTfoot.args = {
|
|
|
300
262
|
</template>
|
|
301
263
|
`,
|
|
302
264
|
};
|
|
265
|
+
|
|
266
|
+
export const cellSlots = SlotTemplate.bind({});
|
|
267
|
+
cellSlots.args = {
|
|
268
|
+
columns: [
|
|
269
|
+
{ key: "link", label: "link" },
|
|
270
|
+
{ key: "money", label: "money", thClass: "text-right" },
|
|
271
|
+
{ key: "email", label: "email" },
|
|
272
|
+
{ key: "tags", label: "tags" },
|
|
273
|
+
],
|
|
274
|
+
row: {
|
|
275
|
+
link: "some link",
|
|
276
|
+
money: {
|
|
277
|
+
sum: 10,
|
|
278
|
+
currencySymbol: "$",
|
|
279
|
+
},
|
|
280
|
+
email: "some@email.ua",
|
|
281
|
+
tags: {
|
|
282
|
+
tags: { label: "some tag" },
|
|
283
|
+
variant: "orange",
|
|
284
|
+
},
|
|
285
|
+
},
|
|
286
|
+
|
|
287
|
+
slotTemplate: `
|
|
288
|
+
<template #cell-link="{ value }">
|
|
289
|
+
<ULink :url="value" :label="value" />
|
|
290
|
+
</template>
|
|
291
|
+
|
|
292
|
+
<template #cell-money="{ value }">
|
|
293
|
+
<UMoney :sum="value.sum" :symbol="value.currencySymbol" />
|
|
294
|
+
</template>
|
|
295
|
+
|
|
296
|
+
<template #cell-email="{ value }">
|
|
297
|
+
<ULink :label="value" :url="value" type="email" size="sm" />
|
|
298
|
+
</template>
|
|
299
|
+
|
|
300
|
+
<template #cell-tags="{ value }">
|
|
301
|
+
<UBadge
|
|
302
|
+
v-for="item in value.tags"
|
|
303
|
+
:key="item"
|
|
304
|
+
:label="item"
|
|
305
|
+
:color="value.variant"
|
|
306
|
+
/>
|
|
307
|
+
</template>
|
|
308
|
+
`,
|
|
309
|
+
};
|
package/ui.data-table/index.vue
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
v-show="isShownStickyOrActionsHeader"
|
|
5
5
|
ref="headerStickyRow"
|
|
6
6
|
:style="tableRowWidthStyle"
|
|
7
|
-
v-bind="
|
|
7
|
+
v-bind="stickyHeaderAttrs"
|
|
8
8
|
>
|
|
9
9
|
<UCheckbox
|
|
10
10
|
v-if="selectable"
|
|
@@ -15,18 +15,24 @@
|
|
|
15
15
|
v-bind="selectAllCheckboxAttrs"
|
|
16
16
|
/>
|
|
17
17
|
|
|
18
|
-
<
|
|
19
|
-
|
|
18
|
+
<div
|
|
19
|
+
v-if="selectedRows.length"
|
|
20
|
+
v-bind="selectedRowsCountAttrs"
|
|
21
|
+
v-text="selectedRows.length"
|
|
22
|
+
/>
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
<!-- @slot Use it to add actions instead table head (it appears when you select rows in table). -->
|
|
25
|
+
<slot
|
|
26
|
+
v-if="selectedRows.length && hasSlotContent($slots['thead-actions'])"
|
|
27
|
+
name="thead-actions"
|
|
28
|
+
:selected-rows="selectedRows"
|
|
29
|
+
/>
|
|
24
30
|
|
|
25
31
|
<template v-else>
|
|
26
32
|
<div
|
|
27
33
|
v-for="(column, index) in columns"
|
|
28
34
|
:key="index"
|
|
29
|
-
v-bind="
|
|
35
|
+
v-bind="stickyHeaderColumnAttrs(column.thClass)"
|
|
30
36
|
>
|
|
31
37
|
<template v-if="hasSlotContent($slots[`thead-${column.key}`])">
|
|
32
38
|
<!-- @slot Use it to customise table column. -->
|
|
@@ -42,11 +48,10 @@
|
|
|
42
48
|
</div>
|
|
43
49
|
</template>
|
|
44
50
|
|
|
45
|
-
<!-- TODO: Change to loaders config after laoader refactoring -->
|
|
46
51
|
<ULoaderTop
|
|
47
52
|
v-if="resource && isHeaderSticky"
|
|
48
53
|
:resource-names="resource"
|
|
49
|
-
v-bind="
|
|
54
|
+
v-bind="stickyHeaderLoaderAttrs"
|
|
50
55
|
/>
|
|
51
56
|
</div>
|
|
52
57
|
|
|
@@ -87,7 +92,6 @@
|
|
|
87
92
|
</th>
|
|
88
93
|
</tr>
|
|
89
94
|
|
|
90
|
-
<!-- TODO: Change to loaders config after laoader refactoring -->
|
|
91
95
|
<ULoaderTop v-if="resource" :resource-names="resource" v-bind="tableLoaderAttrs" />
|
|
92
96
|
</thead>
|
|
93
97
|
|
|
@@ -347,20 +351,12 @@ const props = defineProps({
|
|
|
347
351
|
default: UIService.get(defaultConfig, UTable).default.stickyFooter,
|
|
348
352
|
},
|
|
349
353
|
|
|
350
|
-
/**
|
|
351
|
-
* Enable nesting rows.
|
|
352
|
-
*/
|
|
353
|
-
nesting: {
|
|
354
|
-
type: Boolean,
|
|
355
|
-
default: UIService.get(defaultConfig, UTable).default.nesting,
|
|
356
|
-
},
|
|
357
|
-
|
|
358
354
|
/**
|
|
359
355
|
* Sets the nesting level from which folding button need to be shown.
|
|
360
356
|
*/
|
|
361
|
-
|
|
357
|
+
nesting: {
|
|
362
358
|
type: Number,
|
|
363
|
-
default: UIService.get(defaultConfig, UTable).default.
|
|
359
|
+
default: UIService.get(defaultConfig, UTable).default.nesting,
|
|
364
360
|
},
|
|
365
361
|
|
|
366
362
|
/**
|
|
@@ -431,47 +427,6 @@ const isFooterSticky = computed(
|
|
|
431
427
|
isCheckedMoreOneTableItems.value,
|
|
432
428
|
);
|
|
433
429
|
|
|
434
|
-
const {
|
|
435
|
-
config,
|
|
436
|
-
wrapperAttrs,
|
|
437
|
-
customHeaderItemAttrs,
|
|
438
|
-
customHeaderAttrs,
|
|
439
|
-
tableWrapperAttrs,
|
|
440
|
-
headerRowCellAttrs,
|
|
441
|
-
afterLastRowAttrs,
|
|
442
|
-
afterLastRowCellAttrs,
|
|
443
|
-
beforeFirstRowAttrs,
|
|
444
|
-
beforeFirstRowCellAttrs,
|
|
445
|
-
bodyRowAttrs,
|
|
446
|
-
footerClassesAttrs,
|
|
447
|
-
dateSeparatorRowAttrs,
|
|
448
|
-
toggleButtonWrapperAttrs,
|
|
449
|
-
headerCellAttrs,
|
|
450
|
-
bodyCellAttrs,
|
|
451
|
-
checkboxBodyWrapperCellAttrs,
|
|
452
|
-
footerCellAttrs,
|
|
453
|
-
selectAllCheckboxAttrs,
|
|
454
|
-
headerSelectAllCheckboxAttrs,
|
|
455
|
-
tableCheckboxAttrs,
|
|
456
|
-
collapseIconAttrs,
|
|
457
|
-
expandIconAttrs,
|
|
458
|
-
emptyAttrs,
|
|
459
|
-
dateSeparatorAttrs,
|
|
460
|
-
selectedRowsCountAttrs,
|
|
461
|
-
headerStickyLoaderAttrs,
|
|
462
|
-
tableAttrs,
|
|
463
|
-
headerRowAttrs,
|
|
464
|
-
tableLoaderAttrs,
|
|
465
|
-
bodyAttrs,
|
|
466
|
-
toggleItemButtonAttrs,
|
|
467
|
-
secondaryRowAttrs,
|
|
468
|
-
secondaryRowEmptyAttrs,
|
|
469
|
-
footerRowAttrs,
|
|
470
|
-
footerStickyRowAttrs,
|
|
471
|
-
hasSlotContent,
|
|
472
|
-
headerAttrs,
|
|
473
|
-
} = useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky });
|
|
474
|
-
|
|
475
430
|
const currentLocale = computed(() => merge(tm("UTable"), props.config.i18n));
|
|
476
431
|
|
|
477
432
|
const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
|
|
@@ -511,16 +466,72 @@ const isCheckedMoreOneTableItems = computed(() => {
|
|
|
511
466
|
|
|
512
467
|
const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
|
|
513
468
|
|
|
514
|
-
const
|
|
469
|
+
const hasSlotContentBeforeFirstRow = computed(() => {
|
|
515
470
|
return hasSlotContent(slots["before-first-row"])
|
|
516
471
|
? slots["before-first-row"]()?.some((item) => !!item.type?.render)
|
|
517
472
|
: false;
|
|
518
473
|
});
|
|
519
474
|
|
|
475
|
+
const hasSlotContentTheadActions = computed(() => {
|
|
476
|
+
return hasSlotContent(slots["thead-actions"]);
|
|
477
|
+
});
|
|
478
|
+
|
|
520
479
|
const emptyTableMsg = computed(() => {
|
|
521
480
|
return props.filters ? currentLocale.value.noResultsForFilters : currentLocale.value.noItems;
|
|
522
481
|
});
|
|
523
482
|
|
|
483
|
+
const isNesting = computed(() => {
|
|
484
|
+
return !isNaN(props.nesting) && props.nesting !== null;
|
|
485
|
+
});
|
|
486
|
+
|
|
487
|
+
const {
|
|
488
|
+
config,
|
|
489
|
+
wrapperAttrs,
|
|
490
|
+
stickyHeaderColumnAttrs,
|
|
491
|
+
stickyHeaderAttrs,
|
|
492
|
+
tableWrapperAttrs,
|
|
493
|
+
headerRowCellAttrs,
|
|
494
|
+
afterLastRowAttrs,
|
|
495
|
+
afterLastRowCellAttrs,
|
|
496
|
+
beforeFirstRowAttrs,
|
|
497
|
+
beforeFirstRowCellAttrs,
|
|
498
|
+
bodyRowAttrs,
|
|
499
|
+
footerClassesAttrs,
|
|
500
|
+
dateSeparatorRowAttrs,
|
|
501
|
+
toggleButtonWrapperAttrs,
|
|
502
|
+
headerCellAttrs,
|
|
503
|
+
bodyCellAttrs,
|
|
504
|
+
checkboxBodyWrapperCellAttrs,
|
|
505
|
+
footerCellAttrs,
|
|
506
|
+
selectAllCheckboxAttrs,
|
|
507
|
+
headerSelectAllCheckboxAttrs,
|
|
508
|
+
tableCheckboxAttrs,
|
|
509
|
+
collapseIconAttrs,
|
|
510
|
+
expandIconAttrs,
|
|
511
|
+
emptyAttrs,
|
|
512
|
+
dateSeparatorAttrs,
|
|
513
|
+
selectedRowsCountAttrs,
|
|
514
|
+
stickyHeaderLoaderAttrs,
|
|
515
|
+
tableAttrs,
|
|
516
|
+
headerRowAttrs,
|
|
517
|
+
tableLoaderAttrs,
|
|
518
|
+
bodyAttrs,
|
|
519
|
+
toggleItemButtonAttrs,
|
|
520
|
+
secondaryRowAttrs,
|
|
521
|
+
secondaryRowEmptyAttrs,
|
|
522
|
+
footerRowAttrs,
|
|
523
|
+
footerStickyRowAttrs,
|
|
524
|
+
hasSlotContent,
|
|
525
|
+
headerAttrs,
|
|
526
|
+
} = useAttrs(props, {
|
|
527
|
+
tableRows,
|
|
528
|
+
selectedRows,
|
|
529
|
+
isNesting,
|
|
530
|
+
isHeaderSticky,
|
|
531
|
+
isFooterSticky,
|
|
532
|
+
hasSlotContentTheadActions,
|
|
533
|
+
});
|
|
534
|
+
|
|
524
535
|
watch(selectAll, onChangeSelectAll, { deep: true });
|
|
525
536
|
watch(selectedRows, onChangeSelectedRows, { deep: true });
|
|
526
537
|
watch(tableRows, () => emit("update:rows", tableRows), { deep: true });
|
|
@@ -569,11 +580,11 @@ function onWindowResizeSetWidth() {
|
|
|
569
580
|
|
|
570
581
|
function isShownIcon({ index, row }) {
|
|
571
582
|
const isChildren = row.childrenIds?.length > 0;
|
|
572
|
-
const isWithinNestingLevel = row.nestedLevel >= props.
|
|
583
|
+
const isWithinNestingLevel = row.nestedLevel >= props.nesting;
|
|
573
584
|
|
|
574
585
|
const isFirstRow = index === 0;
|
|
575
586
|
|
|
576
|
-
return isFirstRow && (isChildren || row.isNestingRow) &&
|
|
587
|
+
return isFirstRow && (isChildren || row.isNestingRow) && isNesting.value && isWithinNestingLevel;
|
|
577
588
|
}
|
|
578
589
|
|
|
579
590
|
function isIconActive(row) {
|
|
@@ -581,7 +592,7 @@ function isIconActive(row) {
|
|
|
581
592
|
}
|
|
582
593
|
|
|
583
594
|
function onClickShowItem(row) {
|
|
584
|
-
if (!
|
|
595
|
+
if (!isNesting.value || !row.childrenIds.length) return;
|
|
585
596
|
const [firstElement] = row.childrenIds;
|
|
586
597
|
|
|
587
598
|
row.isHidden = !row.isHidden;
|
|
@@ -590,7 +601,7 @@ function onClickShowItem(row) {
|
|
|
590
601
|
hiddenIds.value.push(...row.childrenIds);
|
|
591
602
|
} else {
|
|
592
603
|
hiddenIds.value =
|
|
593
|
-
row.nestedLevel === props.
|
|
604
|
+
row.nestedLevel === props.nesting
|
|
594
605
|
? row.childrenIds.filter((item) => !hiddenIds.value.includes(item))
|
|
595
606
|
: hiddenIds.value.filter((item) => item !== firstElement);
|
|
596
607
|
}
|
|
@@ -660,7 +671,7 @@ function synchronizeTableItemsWithProps() {
|
|
|
660
671
|
tableRows.value = props.rows;
|
|
661
672
|
|
|
662
673
|
tableRows.value.forEach((item) => {
|
|
663
|
-
if (
|
|
674
|
+
if (isNesting.value && item.isHidden && item.childrenIds?.length) {
|
|
664
675
|
hiddenIds.value.push(...item.childrenIds);
|
|
665
676
|
}
|
|
666
677
|
});
|
|
@@ -678,7 +689,7 @@ function isShownDateSeparator(rowIndex) {
|
|
|
678
689
|
const currentItem = tableRows.value[rowIndex];
|
|
679
690
|
|
|
680
691
|
if (rowIndex === 0) {
|
|
681
|
-
return
|
|
692
|
+
return hasSlotContentBeforeFirstRow.value;
|
|
682
693
|
}
|
|
683
694
|
|
|
684
695
|
const isPrevSameDate = prevItem?.date?.primaryRow === currentItem?.date?.primaryRow;
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"framework": "vue",
|
|
3
3
|
"name": "vueless",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.95",
|
|
5
5
|
"contributions": {
|
|
6
6
|
"html": {
|
|
7
7
|
"description-markup": "markdown",
|
|
@@ -6449,21 +6449,12 @@
|
|
|
6449
6449
|
},
|
|
6450
6450
|
{
|
|
6451
6451
|
"name": "nesting",
|
|
6452
|
-
"description": "Enable nesting rows.",
|
|
6453
|
-
"value": {
|
|
6454
|
-
"kind": "expression",
|
|
6455
|
-
"type": "boolean"
|
|
6456
|
-
},
|
|
6457
|
-
"default": "false"
|
|
6458
|
-
},
|
|
6459
|
-
{
|
|
6460
|
-
"name": "nestingFrom",
|
|
6461
6452
|
"description": "Sets the nesting level from which folding button need to be shown.",
|
|
6462
6453
|
"value": {
|
|
6463
6454
|
"kind": "expression",
|
|
6464
6455
|
"type": "number"
|
|
6465
6456
|
},
|
|
6466
|
-
"default": "
|
|
6457
|
+
"default": "[object Object]"
|
|
6467
6458
|
},
|
|
6468
6459
|
{
|
|
6469
6460
|
"name": "filters",
|