vueless 0.0.165 → 0.0.166

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 (7) hide show
  1. package/package.json +1 -1
  2. package/ui.data-table/composables/attrs.composable.js +106 -115
  3. package/ui.data-table/configs/default.config.js +37 -44
  4. package/ui.data-table/index.stories.js +40 -35
  5. package/ui.data-table/index.vue +199 -175
  6. package/ui.data-table-cell/configs/default.config.js +1 -1
  7. package/web-types.json +11 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.165",
3
+ "version": "0.0.166",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless Component Framework.",
6
6
  "homepage": "https://vueless.com",
package/ui.data-table/composables/attrs.composable.js CHANGED
@@ -1,34 +1,19 @@
1
1
  import useUI from "../../composable.ui";
2
2
  import defaultConfig from "../configs/default.config";
3
3
  import { cva, cx } from "../../service.ui";
4
- import { computed, useSlots } from "vue";
4
+ import { computed } from "vue";
5
5
 
6
6
  export function useAttrs(
7
7
  props,
8
- {
9
- tableRows,
10
- selectedRows,
11
- isNesting,
12
- isHeaderSticky,
13
- isFooterSticky,
14
- hasSlotContentTheadActions,
15
- },
8
+ { tableRows, isNesting, isShownActionsHeader, isHeaderSticky, isFooterSticky },
16
9
  ) {
17
10
  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
18
- const { wrapper, stickyHeaderColumn, headerCell } = config.value;
19
-
20
- const slot = useSlots();
21
-
22
- const cvaWrapper = cva({
23
- base: wrapper.base,
24
- variants: wrapper.variants,
25
- compoundVariants: wrapper.compoundVariants,
26
- });
11
+ const { stickyHeaderCell, headerCell } = config.value;
27
12
 
28
13
  const cvaCustomHeaderItem = cva({
29
- base: stickyHeaderColumn.base,
30
- variants: stickyHeaderColumn.variants,
31
- compoundVariants: stickyHeaderColumn.compoundVariants,
14
+ base: stickyHeaderCell.base,
15
+ variants: stickyHeaderCell.variants,
16
+ compoundVariants: stickyHeaderCell.compoundVariants,
32
17
  });
33
18
 
34
19
  const cvaHeaderCell = cva({
@@ -37,53 +22,59 @@ export function useAttrs(
37
22
  compoundVariants: headerCell.compoundVariants,
38
23
  });
39
24
 
40
- const wrapperClasses = computed(() => cvaWrapper({ compact: props.compact }));
41
-
42
- const stickyHeaderColumnClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
25
+ const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
43
26
 
44
27
  const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
45
28
 
46
- const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
29
+ const wrapperAttrs = getAttrs("wrapper");
47
30
  const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
48
- const stickyHeaderColumnAttrsRaw = getAttrs("stickyHeaderColumn", {
49
- classes: stickyHeaderColumnClasses,
31
+ const stickyHeaderCellAttrsRaw = getAttrs("stickyHeaderCell", {
32
+ classes: stickyHeaderCellClasses,
33
+ });
34
+ const stickyHeaderCounterAttrs = getAttrs("stickyHeaderCounter");
35
+ const stickyHeaderActionsCounterAttrs = getAttrs("stickyHeaderActionsCounter");
36
+ const stickyHeaderCheckboxAttrs = getAttrs("stickyHeaderCheckbox", {
37
+ isComponent: true,
38
+ });
39
+ const stickyHeaderActionsCheckboxAttrs = getAttrs("stickyHeaderActionsCheckbox", {
40
+ isComponent: true,
50
41
  });
51
- const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
52
- const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
53
42
  const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
54
- const tableWrapperAttrsRaw = getAttrs("tableWrapper");
43
+ const tableWrapperAttrs = getAttrs("tableWrapper");
55
44
  const tableAttrs = getAttrs("table");
56
45
  const headerAttrs = getAttrs("header");
57
46
  const headerRowAttrsRaw = getAttrs("headerRow");
58
47
  const headerCellAttrsRaw = getAttrs("headerCell", { classes: headerCellClasses });
59
- const headerSelectAllCheckboxAttrs = getAttrs("headerSelectAllCheckbox", { isComponent: true });
60
- const tableLoaderAttrs = getAttrs("tableLoader", { isComponent: true });
61
- const expandIconAttrs = getAttrs("expandIcon", { isComponent: true });
62
- const collapseIconAttrs = getAttrs("collapseIcon", { isComponent: true });
48
+ const headerCheckboxAttrs = getAttrs("headerCheckbox", { isComponent: true });
49
+ const headerLoaderAttrs = getAttrs("headerLoader", { isComponent: true });
50
+ const bodyCellNestedExpandIconAttrs = getAttrs("bodyCellNestedExpandIcon", { isComponent: true });
51
+ const bodyCellNestedCollapseIconAttrs = getAttrs("bodyCellNestedCollapseIcon", {
52
+ isComponent: true,
53
+ });
63
54
  const bodyAttrs = getAttrs("body");
64
55
  const bodyCellAttrsRaw = getAttrs("bodyCell", { isComponent: true });
65
- const checkboxBodyWrapperCellAttrs = getAttrs("checkboxBodyWrapperCell");
66
- const tableCheckboxAttrs = getAttrs("tableCheckbox", { isComponent: true });
67
- const dateSeparatorAttrs = getAttrs("dateSeparator", { isComponent: true });
68
- const toggleItemButtonAttrs = getAttrs("toggleItemButton");
69
- const secondaryRowAttrs = getAttrs("secondaryRow");
70
- const secondaryRowEmptyAttrs = getAttrs("secondaryRowEmpty");
56
+ const bodyCheckboxAttrs = getAttrs("bodyCheckbox", { isComponent: true });
57
+ const bodyCellDateSeparatorAttrs = getAttrs("bodyCellDateSeparator");
58
+ const bodyDateSeparatorAttrs = getAttrs("bodyDateSeparator", { isComponent: true });
59
+ const bodyCellNestedAttrs = getAttrs("bodyCellNested");
60
+ const bodyCellSecondaryAttrs = getAttrs("bodyCellSecondary");
61
+ const bodyCellSecondaryEmptyAttrs = getAttrs("bodyCellSecondaryEmpty");
71
62
  const footerAttrsRaw = getAttrs("footer");
72
63
  const footerRowAttrs = getAttrs("footerRow");
73
64
  const footerCellAttrs = getAttrs("footerCell", { isComponent: true });
74
- const footerStickyRowAttrs = getAttrs("footerStickyRow");
75
- const emptyAttrs = getAttrs("empty", { isComponent: true });
76
- const beforeFirstRowAttrsRaw = getAttrs("beforeFirstRow");
77
- const beforeFirstRowCellAttrs = getAttrs("beforeFirstRowCell", { isComponent: true });
78
- const afterLastRowAttrsRaw = getAttrs("afterLastRow");
79
- const afterLastRowCellAttrs = getAttrs("afterLastRowCell", { isComponent: true });
80
- const toggleButtonWrapperAttrsRaw = getAttrs("toggleButtonWrapper");
65
+ const stickyFooterRowAttrs = getAttrs("stickyFooterRow");
66
+ const bodyEmptyStateAttrs = getAttrs("bodyEmptyState", { isComponent: true });
67
+ const bodyRowBeforeAttrsRaw = getAttrs("bodyRowBefore");
68
+ const bodyRowBeforeCellAttrs = getAttrs("bodyRowBeforeCell", { isComponent: true });
69
+ const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
70
+ const bodyRowAfterCellAttrs = getAttrs("bodyRowAfterCell", { isComponent: true });
71
+ const bodyCellNestedWrapperAttrsRaw = getAttrs("bodyCellNestedWrapper");
81
72
 
82
73
  const bodyRowAttrsRaw = getAttrs("bodyRow");
83
74
 
84
- const bodyCellAttrs = computed(() => (tdClass) => ({
75
+ const bodyCellAttrs = computed(() => (classes) => ({
85
76
  ...bodyCellAttrsRaw.value,
86
- class: cx([bodyCellAttrsRaw.value.class, tdClass || ""]),
77
+ class: cx([bodyCellAttrsRaw.value.class, classes || ""]),
87
78
  }));
88
79
 
89
80
  const bodyRowAttrs = computed(() => (row) => ({
@@ -96,112 +87,112 @@ export function useAttrs(
96
87
  class: cx([headerCellAttrsRaw.value.class, classes]),
97
88
  }));
98
89
 
99
- const beforeFirstRowAttrs = computed(() => ({
100
- ...beforeFirstRowAttrsRaw.value,
90
+ const bodyRowBeforeAttrs = computed(() => ({
91
+ ...bodyRowBeforeAttrsRaw.value,
101
92
  class: cx([
102
- beforeFirstRowAttrsRaw.value.class,
103
- tableRows.value[0]?.isChecked ? config.value.checkedRow : "",
93
+ bodyRowBeforeAttrsRaw.value.class,
94
+ tableRows.value[0]?.isChecked ? config.value.bodyRowChecked : "",
104
95
  ]),
105
96
  }));
106
97
 
107
- const tableWrapperAttrs = computed(() => ({
108
- ...tableWrapperAttrsRaw.value,
109
- class: cx([
110
- tableWrapperAttrsRaw.value.class,
111
- selectedRows.value.length && config.value.tableWrapperSelected,
112
- ]),
113
- }));
98
+ const headerRowAttrs = computed(() => {
99
+ return {
100
+ ...headerRowAttrsRaw.value,
101
+ class: cx([headerRowAttrsRaw.value.class]),
102
+ };
103
+ });
114
104
 
115
- const headerRowAttrs = computed(() => ({
116
- ...headerRowAttrsRaw.value,
117
- class: cx([
118
- headerRowAttrsRaw.value.class,
119
- selectedRows.value.length && !isHeaderSticky.value && config.value.stickyHeaderHidden,
120
- ]),
121
- }));
105
+ const stickyHeaderAttrs = computed(() => {
106
+ const actionHeaderClasses = cx([
107
+ stickyHeaderAttrsRaw.value.class,
108
+ config.value.stickyHeaderActions,
109
+ ]);
122
110
 
123
- const stickyHeaderAttrs = computed(() => ({
124
- ...stickyHeaderAttrsRaw.value,
125
- class: cx([
111
+ const actionHeaderStickyClasses = cx([
112
+ config.value.stickyHeaderActions,
126
113
  stickyHeaderAttrsRaw.value.class,
127
- selectedRows.value.length &&
128
- hasSlotContentTheadActions.value &&
129
- config.value.stickyHeaderActions,
130
- isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
131
- ]),
132
- }));
114
+ ]);
115
+
116
+ const stickyHeaderRowClasses = cx([
117
+ stickyHeaderAttrsRaw.value.class,
118
+ config.value.stickyHeaderRow,
119
+ ]);
120
+
121
+ return {
122
+ ...stickyHeaderAttrsRaw.value,
123
+ class: cx([
124
+ isShownActionsHeader.value && actionHeaderClasses,
125
+ isShownActionsHeader.value && isHeaderSticky.value && actionHeaderStickyClasses,
126
+ !isShownActionsHeader.value && isHeaderSticky.value && stickyHeaderRowClasses,
127
+ ]),
128
+ };
129
+ });
133
130
 
134
131
  const footerClassesAttrs = computed(() => ({
135
132
  ...footerAttrsRaw.value,
136
- class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.footerSticky]),
137
- }));
138
-
139
- const afterLastRowAttrs = computed(() => ({
140
- ...afterLastRowAttrsRaw.value,
141
- class: cx([
142
- afterLastRowAttrsRaw.value.class,
143
- hasSlotContent(slot["after-last-row"]) ? config.value.moreRowHidden : config.value.moreRow,
144
- ]),
133
+ class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.stickyFooter]),
145
134
  }));
146
135
 
147
- const stickyHeaderColumnAttrs = computed(() => (thClass) => ({
148
- ...stickyHeaderColumnAttrsRaw.value,
149
- class: cx([stickyHeaderColumnAttrsRaw.value.class, thClass]),
136
+ const stickyHeaderCellAttrs = computed(() => (classes) => ({
137
+ ...stickyHeaderCellAttrsRaw.value,
138
+ class: cx([stickyHeaderCellAttrsRaw.value.class, classes]),
150
139
  }));
151
140
 
152
- const dateSeparatorRowAttrs = (rowIndex) => {
141
+ const bodyRowDateSeparatorAttrs = (rowIndex) => {
153
142
  const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
154
143
  const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
155
144
 
156
145
  const activeClass =
157
146
  (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
158
- ? config.value.checkedRow
147
+ ? config.value.bodyRowChecked
159
148
  : "";
160
149
 
161
- return getAttrs("option", { classes: activeClass }).value;
150
+ return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
162
151
  };
163
152
 
164
- const toggleButtonWrapperAttrs = computed(() => (index) => ({
165
- ...toggleButtonWrapperAttrsRaw.value,
166
- class: index === 0 && isNesting.value ? config.value.toggleButtonWrapper : "",
153
+ const bodyCellNestedWrapperAttrs = computed(() => (index) => ({
154
+ ...bodyCellNestedWrapperAttrsRaw.value,
155
+ class: index === 0 && isNesting.value ? config.value.bodyCellNestedWrapper : "",
167
156
  }));
168
157
 
169
158
  return {
170
159
  config,
171
160
  wrapperAttrs,
172
- stickyHeaderColumnAttrs,
161
+ stickyHeaderCellAttrs,
173
162
  stickyHeaderAttrs,
174
163
  tableWrapperAttrs,
175
164
  headerCellAttrs,
176
165
  headerRowAttrs,
177
166
  bodyRowAttrs,
178
167
  footerClassesAttrs,
179
- afterLastRowAttrs,
180
- afterLastRowCellAttrs,
181
- beforeFirstRowAttrs,
182
- beforeFirstRowCellAttrs,
183
- dateSeparatorRowAttrs,
184
- toggleButtonWrapperAttrs,
168
+ bodyRowAfterAttrs,
169
+ bodyRowAfterCellAttrs,
170
+ bodyRowBeforeAttrs,
171
+ bodyRowBeforeCellAttrs,
172
+ bodyRowDateSeparatorAttrs,
173
+ bodyCellNestedWrapperAttrs,
185
174
  bodyCellAttrs,
186
- checkboxBodyWrapperCellAttrs,
187
175
  footerCellAttrs,
188
- selectAllCheckboxAttrs,
189
- headerSelectAllCheckboxAttrs,
190
- tableCheckboxAttrs,
191
- collapseIconAttrs,
192
- expandIconAttrs,
193
- emptyAttrs,
194
- dateSeparatorAttrs,
195
- selectedRowsCountAttrs,
176
+ stickyHeaderCounterAttrs,
177
+ stickyHeaderActionsCounterAttrs,
178
+ headerCheckboxAttrs,
179
+ bodyCheckboxAttrs,
180
+ bodyCellNestedCollapseIconAttrs,
181
+ bodyCellNestedExpandIconAttrs,
182
+ bodyEmptyStateAttrs,
183
+ bodyDateSeparatorAttrs,
184
+ bodyCellDateSeparatorAttrs,
185
+ stickyHeaderCheckboxAttrs,
186
+ stickyHeaderActionsCheckboxAttrs,
196
187
  stickyHeaderLoaderAttrs,
197
188
  tableAttrs,
198
- tableLoaderAttrs,
189
+ headerLoaderAttrs,
199
190
  bodyAttrs,
200
- toggleItemButtonAttrs,
201
- secondaryRowAttrs,
202
- secondaryRowEmptyAttrs,
191
+ bodyCellNestedAttrs,
192
+ bodyCellSecondaryAttrs,
193
+ bodyCellSecondaryEmptyAttrs,
203
194
  footerRowAttrs,
204
- footerStickyRowAttrs,
195
+ stickyFooterRowAttrs,
205
196
  hasSlotContent,
206
197
  headerAttrs,
207
198
  };
package/ui.data-table/configs/default.config.js CHANGED
@@ -1,59 +1,52 @@
1
1
  export default /*tw*/ {
2
- wrapper: {
3
- base: "relative bg-white rounded-lg",
4
- variants: {
5
- compact: {
6
- true: "group/table-compact",
7
- },
8
- },
9
- },
10
- headerCheckboxWrapper: "",
2
+ wrapper: "relative",
3
+ stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
4
+ stickyHeaderRow: "border-gray-200 bg-white",
5
+ stickyHeaderCell: "flex-none text-sm text-gray-500 p-4 whitespace-nowrap",
6
+ stickyHeaderCheckbox: "",
7
+ stickyHeaderCounter: "absolute top-4 left-11 pr-3 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
8
+ stickyHeaderLoader: "",
9
+ stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
10
+ stickyHeaderActionsCheckbox: "",
11
+ stickyHeaderActionsCounter: "-ml-2.5 mr-3 font-medium text-sm text-gray-900", // style dupliactions
12
+ tableWrapper: "border border-gray-200 rounded-lg bg-white",
13
+ table: "min-w-full border-none text-sm w-full",
11
14
  header: "border-b border-gray-200",
12
15
  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: "flex-none text-sm font-normal text-gray-500 p-4 whitespace-nowrap",
21
- selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
22
- selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
23
- tableWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
24
- tableWrapperSelected: "!rounded-t-none border-t-0",
25
- table: "min-w-full border-none text-sm w-full",
26
- tableLoader: "absolute !top-auto",
27
- moreRow: "!px-0 !py-4 first:mx-auto",
28
- moreRowHidden: "!p-0",
29
- checkedRow: "transition duration-100 bg-gray-100",
30
- beforeFirstRow: "",
31
- beforeFirstRowCell: "py-1",
32
- afterLastRow: "",
33
- afterLastRowCell: "py-1",
34
- toggleButtonWrapper: "flex items-center",
35
- expandIcon: "mr-2 rounded-sm bg-gray-200",
36
- expandIconName: "add",
37
- collapseIcon: "mr-2 rounded-sm bg-gray-200",
38
- collapseIconName: "remove",
16
+ headerCell: "p-4 text-sm font-normal text-gray-500 text-left", // style dupliactions
17
+ headerCellCheckbox: "w-10",
18
+ headerCheckbox: "",
19
+ headerLoader: "absolute !top-auto",
39
20
  body: "group/body divide-none",
40
21
  bodyRow: "hover:bg-gray-50",
41
- checkboxBodyWrapperCell: "py-3 px-4 align-top",
22
+ bodyRowChecked: "bg-gray-100 transition duration-100",
23
+ bodyRowBefore: "!p-0",
24
+ bodyRowBeforeCell: "py-1",
25
+ bodyRowAfter: "!p-0",
26
+ bodyRowAfterCell: "py-1",
27
+ bodyRowDateSeparator: "",
42
28
  bodyCell: "",
43
- tableCheckbox: "",
44
- dateSeparator: "",
45
- toggleItemButton: "flex relative -top-px",
46
- secondaryRow: "mt-1 text-xs text-gray-500",
47
- secondaryRowEmpty: "inline-block",
29
+ bodyCellSecondary: "mt-1 text-xs text-gray-500",
30
+ bodyCellSecondaryEmpty: "inline-block",
31
+ bodyCellCheckbox: "!px-4", // try to remove important
32
+ bodyCellDateSeparator: "",
33
+ bodyCellNestedWrapper: "flex items-center",
34
+ bodyCellNested: "flex relative -top-px",
35
+ bodyCellNestedExpandIcon: "mr-2 rounded-sm bg-gray-200",
36
+ bodyCellNestedExpandIconName: "add",
37
+ bodyCellNestedCollapseIcon: "mr-2 rounded-sm bg-gray-200",
38
+ bodyCellNestedCollapseIconName: "remove",
39
+ bodyCheckbox: "",
40
+ bodyDateSeparator: "",
41
+ bodyEmptyState: "my-8",
48
42
  footer: "group/footer border-t border-solid border-gray-200",
49
- footerSticky: "relative group/footer-fixed",
50
43
  footerRow: "",
51
44
  footerCell: "",
52
- footerStickyRow: `
45
+ stickyFooter: "relative group/footer-fixed",
46
+ stickyFooterRow: `
53
47
  fixed bottom-0 -ml-px border border-b border-gray-200 bg-white
54
48
  collapse group-[]/footer-fixed:[visibility:inherit]
55
49
  `,
56
- empty: "my-8",
57
50
  i18n: {
58
51
  noItems: "There is no data in the table yet.",
59
52
  noResultsForFilters: "No results were found for the specified filters.",
package/ui.data-table/index.stories.js CHANGED
@@ -7,6 +7,7 @@ import UButton from "../ui.button";
7
7
  import ULink from "../ui.button-link";
8
8
  import UMoney from "../ui.text-money";
9
9
  import UBadge from "../ui.text-badge";
10
+ import URow from "../ui.container-row";
10
11
 
11
12
  const STICKY_PARAMETERS = {
12
13
  docs: {
@@ -46,20 +47,20 @@ export default {
46
47
  id: 1,
47
48
  isChecked: false,
48
49
  key_1: {
49
- primaryRow: "primaryRow",
50
- secondaryRow: "secondaryRow",
50
+ primary: "primary",
51
+ secondary: "secondary",
51
52
  },
52
53
  key_2: {
53
- primaryRow: "primaryRow",
54
- secondaryRow: "secondaryRow",
54
+ primary: "primary",
55
+ secondary: "secondary",
55
56
  },
56
57
  key_3: {
57
- primaryRow: "primaryRow",
58
- secondaryRow: "secondaryRow",
58
+ primary: "primary",
59
+ secondary: "secondary",
59
60
  },
60
61
  key_4: {
61
- primaryRow: "primaryRow",
62
- secondaryRow: "secondaryRow",
62
+ primary: "primary",
63
+ secondary: "secondary",
63
64
  },
64
65
  },
65
66
  numberOfRows: 5,
@@ -109,7 +110,7 @@ const EmptyTemplate = (args) => ({
109
110
  });
110
111
 
111
112
  const SlotTemplate = (args) => ({
112
- components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge },
113
+ components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge, URow },
113
114
  setup() {
114
115
  return { args };
115
116
  },
@@ -123,9 +124,14 @@ const SlotTemplate = (args) => ({
123
124
  `,
124
125
  computed: {
125
126
  itemsData() {
126
- const rows = [];
127
+ let rows = [];
127
128
 
128
- for (let i = 0; i < args.numberOfRows; i++) rows.push(args.row);
129
+ for (let i = 0; i < args.numberOfRows; i++) {
130
+ const newRow = { ...args.row };
131
+
132
+ newRow.id = getRandomId();
133
+ rows.push(newRow);
134
+ }
129
135
 
130
136
  return rows;
131
137
  },
@@ -159,7 +165,7 @@ stickyFooter.args = {
159
165
  selectable: true,
160
166
  stickyFooter: true,
161
167
  slotTemplate: `
162
- <template #tfoot>
168
+ <template #footer>
163
169
  <UTableCell>
164
170
  <p>
165
171
  🤘🤘🤘
@@ -197,33 +203,32 @@ slotDefault.args = {
197
203
 
198
204
  export const slotTheadActions = SlotTemplate.bind({});
199
205
  slotTheadActions.args = {
206
+ numberOfRows: 50,
207
+ stickyHeader: true,
200
208
  selectable: true,
201
209
  slotTemplate: `
202
- <template #thead-actions>
203
- <p>
204
- 🤘🤘🤘
205
- Lorem ipsum dolor sit amet.
206
- </p>
207
-
208
- <UButton
209
- size="sm"
210
- variant="thirdary"
211
- filled
212
- label="some button"
213
- />
214
-
215
- <UButton
216
- size="sm"
217
- variant="thirdary"
218
- filled
219
- label="some button"
220
- />
210
+ <template #header-actions>
211
+ <URow gap="2xs">
212
+ <UButton
213
+ label="Edit"
214
+ variant="thirdary"
215
+ color="blue"
216
+ size="sm"
217
+ />
218
+
219
+ <UButton
220
+ label="Delete"
221
+ variant="thirdary"
222
+ color="blue"
223
+ size="sm"
224
+ />
225
+ </URow>
221
226
  </template>
222
227
  `,
223
228
  };
224
229
 
225
- export const slotBeforeFirstRow = SlotTemplate.bind({});
226
- slotBeforeFirstRow.args = {
230
+ export const slotbodyRowBefore = SlotTemplate.bind({});
231
+ slotbodyRowBefore.args = {
227
232
  slotTemplate: `
228
233
  <template #before-first-row>
229
234
  <p>
@@ -236,8 +241,8 @@ slotBeforeFirstRow.args = {
236
241
  `,
237
242
  };
238
243
 
239
- export const slotAfterLastRow = SlotTemplate.bind({});
240
- slotAfterLastRow.args = {
244
+ export const slotbodyRowAfter = SlotTemplate.bind({});
245
+ slotbodyRowAfter.args = {
241
246
  slotTemplate: `
242
247
  <template #after-last-row>
243
248
  <p>