@emamid/svelte-data-table 0.0.11 → 0.0.12

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 (53) hide show
  1. package/package.json +1 -1
  2. package/dist/DataTable.doc.d.ts +0 -79
  3. package/dist/DataTable.doc.js +0 -79
  4. package/dist/DataTable.svelte +0 -244
  5. package/dist/DataTable.svelte.d.ts +0 -55
  6. package/dist/DataTableDataCell.svelte +0 -46
  7. package/dist/DataTableDataCell.svelte.d.ts +0 -26
  8. package/dist/DataTableHeaderCell.svelte +0 -25
  9. package/dist/DataTableHeaderCell.svelte.d.ts +0 -24
  10. package/dist/cells/Actions.d.ts +0 -71
  11. package/dist/cells/Actions.js +0 -101
  12. package/dist/cells/ActionsCell.doc.d.ts +0 -28
  13. package/dist/cells/ActionsCell.doc.js +0 -28
  14. package/dist/cells/ActionsCell.svelte +0 -31
  15. package/dist/cells/ActionsCell.svelte.d.ts +0 -35
  16. package/dist/cells/ButtonCell.doc.d.ts +0 -6
  17. package/dist/cells/ButtonCell.doc.js +0 -6
  18. package/dist/cells/ButtonCell.svelte +0 -17
  19. package/dist/cells/ButtonCell.svelte.d.ts +0 -22
  20. package/dist/cells/CheckboxCell.doc.d.ts +0 -6
  21. package/dist/cells/CheckboxCell.doc.js +0 -6
  22. package/dist/cells/CheckboxCell.svelte +0 -21
  23. package/dist/cells/CheckboxCell.svelte.d.ts +0 -23
  24. package/dist/cells/InputCell.doc.d.ts +0 -6
  25. package/dist/cells/InputCell.doc.js +0 -6
  26. package/dist/cells/InputCell.svelte +0 -55
  27. package/dist/cells/InputCell.svelte.d.ts +0 -26
  28. package/dist/cells/NumberInputCell.doc.d.ts +0 -6
  29. package/dist/cells/NumberInputCell.doc.js +0 -6
  30. package/dist/cells/NumberInputCell.svelte +0 -48
  31. package/dist/cells/NumberInputCell.svelte.d.ts +0 -25
  32. package/dist/cells/SelectCell.doc.d.ts +0 -8
  33. package/dist/cells/SelectCell.doc.js +0 -8
  34. package/dist/cells/SelectCell.svelte +0 -30
  35. package/dist/cells/SelectCell.svelte.d.ts +0 -27
  36. package/dist/cells/SpinCell.doc.d.ts +0 -13
  37. package/dist/cells/SpinCell.doc.js +0 -13
  38. package/dist/cells/SpinCell.svelte +0 -59
  39. package/dist/cells/SpinCell.svelte.d.ts +0 -29
  40. package/dist/cells/TabWrapper.doc.d.ts +0 -5
  41. package/dist/cells/TabWrapper.doc.js +0 -5
  42. package/dist/cells/TabWrapper.svelte +0 -23
  43. package/dist/cells/TabWrapper.svelte.d.ts +0 -23
  44. package/dist/cells/ToggleCell.doc.d.ts +0 -6
  45. package/dist/cells/ToggleCell.doc.js +0 -6
  46. package/dist/cells/ToggleCell.svelte +0 -21
  47. package/dist/cells/ToggleCell.svelte.d.ts +0 -23
  48. package/dist/cells/index.d.ts +0 -19
  49. package/dist/cells/index.js +0 -19
  50. package/dist/common.d.ts +0 -136
  51. package/dist/common.js +0 -14
  52. package/dist/index.d.ts +0 -4
  53. package/dist/index.js +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emamid/svelte-data-table",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "homepage": "https://github.com/emamid/svelte-data-table",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
@@ -1,79 +0,0 @@
1
- /**
2
- * The DataTable component based on {@link https://flowbite-svelte.com/docs/components/table}
3
- * @typedef {object} DataTable
4
- * @property {ColumnConfig[]} columns - Configuration for each column to be displayed in the table.
5
- * @property {any[]} items - Data for the rows in the table.
6
- * @property {string} [sortKey] - Data property to sort by.
7
- * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
8
- * @property {boolean} [reverseSort] - True when sorting is reversed.
9
- * @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
10
- * @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from {@link https://flowbite.com/icons/}
11
- * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from {@link https://flowbite.com/icons/}
12
- * @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
13
- * @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
14
- * @property {string} [divClassAppend] - Classes to be appended to Table.divClass .
15
- * @property {string} [divClassOverride] - Classes to replace Table.divClass with.
16
- * @property {string} [tableClassAppend] - Classes to be appended to Table.class .
17
- * @property {string} [tableClassOverride] - Classes to replace Table.class with.
18
- * @property {string} [theadClassAppend] - Classes to be appended to TableHead.theadClass .
19
- * @property {string} [theadClassOverride] - Classes to replace TableHead.theadClass with.
20
- * @property {string} [thClassAppend] - Classes to be appended to TableHeadCell.class .
21
- * @property {string} [thClassOverride] - Classes to replace TableHeadCell.class with.
22
- * @property {string} [tableBodyClassAppend] - Classes to be appended to TableBody.tableBodyClass .
23
- * @property {string} [tableBodyClassOverride] - Classes to replace TableBody.tableBodyClass with.
24
- * @property {string} [tdClassAppend] - Classes to be appended to TableBodyCell.tdClass . Column configs can further modify this.
25
- * @property {string} [tdClassOverride] - Classes to replace TableBodyCell.tdClass with. Column configs can further modify this.
26
- * @property {string} [tdFocusedClassAppend] - Classes to be appended to TableBodyCell.tdClass when a cell is focused. Column configs can further modify this.
27
- * @property {string} [tdFocusedClassOverride] - Classes to replace TableBodyCell.tdClass with with a cell is focused. Column configs can further modify this.
28
- * @property {string} [trClassAppend] - Classes to be appended to TableBodyRow.class . trClassGetter can further modify this.
29
- * @property {string} [trClassOverride] - Classes to replace TableBodyRow.class with. trClassGetter can further modify this.
30
- * @property {RowClassFunction} [trClassGetter] - Calculates the CSS classes for a TableBodyRow .
31
- * @property {boolean} [striped] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
32
- * @property {boolean} [hoverable] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
33
- * @property {boolean} [noborder] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
34
- * @property {boolean} [shadow] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
35
- * @property {string} [color] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
36
- * @property {string} [customColor] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
37
-
38
- * @fires action
39
- * @fires cellChanged
40
- * @fires cellClicked
41
- * @fires headerClicked
42
- * @fires rowClicked
43
- */
44
- export {};
45
- /**
46
- * @event cellClicked
47
- * @type {object}
48
- * @property {any} detail.item - Data for the cell's row.
49
- * @property {ColumnConfig} detail.column - Configuration for the cell's column.
50
- */
51
- /**
52
- * @event headerClicked
53
- * @type {object}
54
- * @property {ColumnConfig} detail.column - Configuration for the header's column.
55
- * @property {string} detail.sortColumnID - The current sortColumnID.
56
- * @property {string} detail.sortKey - The current sortKey.
57
- * @property {SortFunction} detail.sortFunction The current sortFunction.
58
- * @property {boolean} detail.reverseSort - True if the grid is currently sorting in reverse.
59
- */
60
- /**
61
- * @event rowClicked
62
- * @type {object}
63
- * @property {any} detail.item - Data for the row.
64
- */
65
- /**
66
- * @event action
67
- * @type {object}
68
- * @property {string} detail.action - The name property of the action whose button was clicked.
69
- * @property {any} detail.item - Data for the action cell's row.
70
- * @property {ColumnConfig} detail.column - Configuration for the action cell's column.
71
- */
72
- /**
73
- * @event cellChanged
74
- * @type {object}
75
- * @property {any} detail.item - Data for the cell's row, prior to the change.
76
- * @property {ColumnConfig} detail.column - Configuration for the cell's column.
77
- * @property {any} detail.oldValue - The data value of the cell before the change.
78
- * @property {any} detail.newValue - The new value that needs to be applied to the cell.
79
- */
@@ -1,79 +0,0 @@
1
- "use strict";
2
- /**
3
- * The DataTable component based on {@link https://flowbite-svelte.com/docs/components/table}
4
- * @typedef {object} DataTable
5
- * @property {ColumnConfig[]} columns - Configuration for each column to be displayed in the table.
6
- * @property {any[]} items - Data for the rows in the table.
7
- * @property {string} [sortKey] - Data property to sort by.
8
- * @property {SortFunction} [sortFunction] - Function for more complex-sorting.
9
- * @property {boolean} [reverseSort] - True when sorting is reversed.
10
- * @property {string} [sortColumnID] - The id (or key) property of the column being sorted by.
11
- * @property {ConstructorOfATypedSvelteComponent} [sortAscendingIcon] - Svelte component class to be displayed in columns that are sorting ascended. Defaults to AngleDownSolid from {@link https://flowbite.com/icons/}
12
- * @property {ConstructorOfATypedSvelteComponent} [sortDescendingIcon] - Svelte component class to be displayed in columns that are sorting descended. Defaults to AngleUpSolid from {@link https://flowbite.com/icons/}
13
- * @property {string} [itemKey] - Property to use when distinguish between rows. If not populated, the array index is used.
14
- * @property {EnterAction} [enterAction] - Determines what pressing the enter key in a focused cell does. Can be 'next', 'down', or 'stay'. Default is 'next'. If 'next', enter will act the same as tab. If 'down', focus will move down to the row below the current one. If 'stay', the enter key will not cause movement.
15
- * @property {string} [divClassAppend] - Classes to be appended to Table.divClass .
16
- * @property {string} [divClassOverride] - Classes to replace Table.divClass with.
17
- * @property {string} [tableClassAppend] - Classes to be appended to Table.class .
18
- * @property {string} [tableClassOverride] - Classes to replace Table.class with.
19
- * @property {string} [theadClassAppend] - Classes to be appended to TableHead.theadClass .
20
- * @property {string} [theadClassOverride] - Classes to replace TableHead.theadClass with.
21
- * @property {string} [thClassAppend] - Classes to be appended to TableHeadCell.class .
22
- * @property {string} [thClassOverride] - Classes to replace TableHeadCell.class with.
23
- * @property {string} [tableBodyClassAppend] - Classes to be appended to TableBody.tableBodyClass .
24
- * @property {string} [tableBodyClassOverride] - Classes to replace TableBody.tableBodyClass with.
25
- * @property {string} [tdClassAppend] - Classes to be appended to TableBodyCell.tdClass . Column configs can further modify this.
26
- * @property {string} [tdClassOverride] - Classes to replace TableBodyCell.tdClass with. Column configs can further modify this.
27
- * @property {string} [tdFocusedClassAppend] - Classes to be appended to TableBodyCell.tdClass when a cell is focused. Column configs can further modify this.
28
- * @property {string} [tdFocusedClassOverride] - Classes to replace TableBodyCell.tdClass with with a cell is focused. Column configs can further modify this.
29
- * @property {string} [trClassAppend] - Classes to be appended to TableBodyRow.class . trClassGetter can further modify this.
30
- * @property {string} [trClassOverride] - Classes to replace TableBodyRow.class with. trClassGetter can further modify this.
31
- * @property {RowClassFunction} [trClassGetter] - Calculates the CSS classes for a TableBodyRow .
32
- * @property {boolean} [striped] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
33
- * @property {boolean} [hoverable] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
34
- * @property {boolean} [noborder] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
35
- * @property {boolean} [shadow] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
36
- * @property {string} [color] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
37
- * @property {string} [customColor] - Passes through to on {@link https://flowbite-svelte.com/docs/components/table}
38
-
39
- * @fires action
40
- * @fires cellChanged
41
- * @fires cellClicked
42
- * @fires headerClicked
43
- * @fires rowClicked
44
- */
45
- /**
46
- * @event cellClicked
47
- * @type {object}
48
- * @property {any} detail.item - Data for the cell's row.
49
- * @property {ColumnConfig} detail.column - Configuration for the cell's column.
50
- */
51
- /**
52
- * @event headerClicked
53
- * @type {object}
54
- * @property {ColumnConfig} detail.column - Configuration for the header's column.
55
- * @property {string} detail.sortColumnID - The current sortColumnID.
56
- * @property {string} detail.sortKey - The current sortKey.
57
- * @property {SortFunction} detail.sortFunction The current sortFunction.
58
- * @property {boolean} detail.reverseSort - True if the grid is currently sorting in reverse.
59
- */
60
- /**
61
- * @event rowClicked
62
- * @type {object}
63
- * @property {any} detail.item - Data for the row.
64
- */
65
- /**
66
- * @event action
67
- * @type {object}
68
- * @property {string} detail.action - The name property of the action whose button was clicked.
69
- * @property {any} detail.item - Data for the action cell's row.
70
- * @property {ColumnConfig} detail.column - Configuration for the action cell's column.
71
- */
72
- /**
73
- * @event cellChanged
74
- * @type {object}
75
- * @property {any} detail.item - Data for the cell's row, prior to the change.
76
- * @property {ColumnConfig} detail.column - Configuration for the cell's column.
77
- * @property {any} detail.oldValue - The data value of the cell before the change.
78
- * @property {any} detail.newValue - The new value that needs to be applied to the cell.
79
- */
@@ -1,244 +0,0 @@
1
- <script>import { createEventDispatcher } from "svelte";
2
- import { Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
3
- import { AngleDownSolid, AngleUpSolid } from "flowbite-svelte-icons";
4
- import DataTableDataCell from "./DataTableDataCell.svelte";
5
- import DataTableHeaderCell from "./DataTableHeaderCell.svelte";
6
- import { joinClasses } from "./common.js";
7
- export let columns = [];
8
- export let items = [];
9
- export let sortKey = "";
10
- export let sortFunction = null;
11
- export let reverseSort = false;
12
- export let sortColumnID = null;
13
- export let sortAscendingIcon = AngleDownSolid;
14
- export let sortDescendingIcon = AngleUpSolid;
15
- export let itemKey = null;
16
- export let enterAction = "next";
17
- export let divClassAppend = "";
18
- export let divClassOverride = "";
19
- const divClassDefault = "relative overflow-x-auto overflow-y-auto";
20
- export let tableClassAppend = "";
21
- export let tableClassOverride = "";
22
- const tableClassDefault = "";
23
- export let theadClassAppend = "";
24
- export let theadClassOverride = "";
25
- const theadClassDefault = "text-xs uppercase sticky top-0 z-10";
26
- export let thClassAppend = "";
27
- export let thClassOverride = "";
28
- const thClassDefault = "";
29
- export let tableBodyClassAppend = "";
30
- export let tableBodyClassOverride = "";
31
- const tableBodyClassDefault = "";
32
- export let tdClassAppend = "";
33
- export let tdClassOverride = "";
34
- const tdClassDefault = "px-6 py-4 whitespace-nowrap font-medium";
35
- export let tdFocusedClassAppend = "";
36
- export let tdFocusedClassOverride = "";
37
- const tdFocusedClassDefault = "px-6 py-4 whitespace-nowrap font-medium";
38
- export let trClassAppend = "";
39
- export let trClassOverride = "";
40
- const trClassDefault = "";
41
- export let trClassGetter = null;
42
- export let striped = false;
43
- export let hoverable = false;
44
- export let noborder = false;
45
- export let shadow = false;
46
- export let color = "default";
47
- export let customColor = "";
48
- let sortedItems = [];
49
- let focusedColumnKeyID = null;
50
- let focusedItemKey = null;
51
- const sortBySortKey = (a, b) => {
52
- let aValue = a[sortKey];
53
- let bValue = b[sortKey];
54
- if (aValue === bValue) {
55
- return 0;
56
- }
57
- if (typeof aValue === "string" && typeof bValue === "string") {
58
- return aValue.localeCompare(bValue);
59
- }
60
- if (typeof aValue === "number" && typeof bValue === "number") {
61
- return aValue - bValue;
62
- }
63
- if (typeof aValue === "number" || typeof bValue === "number") {
64
- return (aValue || 0) - (bValue || 0);
65
- }
66
- if (typeof aValue === "string" || typeof bValue === "string") {
67
- return (aValue || "").localeCompare(bValue || "");
68
- }
69
- return JSON.stringify(aValue).localeCompare(JSON.stringify(bValue));
70
- };
71
- $: {
72
- sortedItems = sortFunction ? items.toSorted(sortFunction) : sortKey ? items.toSorted(sortBySortKey) : [...items];
73
- if (reverseSort) {
74
- sortedItems.reverse();
75
- }
76
- }
77
- const dispatch = createEventDispatcher();
78
- const getItemKey = (item) => item ? itemKey ? item[itemKey] || null : items.indexOf(item).toString() : null;
79
- const getColumnID = (column) => column ? column.id || null : null;
80
- const divClass = joinClasses(divClassOverride || divClassDefault, divClassAppend);
81
- const tableClass = joinClasses(tableClassOverride || tableClassDefault, tableClassAppend);
82
- const theadClass = joinClasses(theadClassOverride || theadClassDefault, theadClassAppend);
83
- const thClass = joinClasses(thClassOverride || thClassDefault, thClassAppend);
84
- const tableBodyClass = joinClasses(
85
- tableBodyClassOverride || tableBodyClassDefault,
86
- tableBodyClassAppend
87
- );
88
- const trClass = joinClasses(trClassOverride || trClassDefault, trClassAppend);
89
- const tdClass = joinClasses(tdClassOverride || tdClassDefault, tdClassAppend);
90
- const tdFocusedClass = joinClasses(
91
- tdFocusedClassOverride || tdFocusedClassDefault,
92
- tdFocusedClassAppend
93
- );
94
- const getTRClass = (item, isRowFocused) => trClassGetter ? trClassGetter(item, isRowFocused, trClass, trClassDefault, trClassAppend, trClassOverride) : trClass;
95
- const internalColumns = columns.map((column) => {
96
- const columnTDClass = joinClasses(column.tdClassOverride || tdClass, column.tdClassAppend);
97
- const columnFocusedTDClass = joinClasses(
98
- column.tdFocusedClassOverride || tdFocusedClass,
99
- column.tdFocusedClassAppend
100
- );
101
- let getTDClass;
102
- const tdClassGetter = column.tdClassGetter;
103
- if (tdClassGetter) {
104
- getTDClass = (item, value, isFocused) => tdClassGetter(
105
- item,
106
- column,
107
- value,
108
- isFocused,
109
- columnTDClass,
110
- tdClassDefault,
111
- tdClassAppend,
112
- tdClassOverride
113
- );
114
- } else {
115
- getTDClass = (_item, _value, isFocused) => isFocused ? columnFocusedTDClass : columnTDClass;
116
- }
117
- return {
118
- ...column,
119
- sortKey: column.sortKey || column.key,
120
- id: column.id || column.key,
121
- getTDClass
122
- };
123
- });
124
- const focusableColumns = internalColumns.filter((column) => column.canFocus);
125
- const prevTab = (event) => {
126
- const { item, column } = event.detail;
127
- let nextColumn = null;
128
- let nextItem = null;
129
- if (column === focusableColumns[0]) {
130
- if (item !== sortedItems[0]) {
131
- nextColumn = focusableColumns[focusableColumns.length - 1];
132
- nextItem = sortedItems[sortedItems.indexOf(item) - 1];
133
- }
134
- } else {
135
- nextColumn = focusableColumns[focusableColumns.indexOf(column) - 1];
136
- nextItem = item;
137
- }
138
- focusedColumnKeyID = getColumnID(nextColumn);
139
- focusedItemKey = getItemKey(nextItem);
140
- };
141
- const nextTab = (event) => {
142
- const { item, column } = event.detail;
143
- let nextColumn = null;
144
- let nextItem = null;
145
- if (column === focusableColumns.at(-1)) {
146
- if (item !== sortedItems.at(-1)) {
147
- nextColumn = focusableColumns[0];
148
- nextItem = sortedItems[sortedItems.indexOf(item) + 1];
149
- }
150
- } else {
151
- nextColumn = focusableColumns[focusableColumns.indexOf(column) + 1];
152
- nextItem = item;
153
- }
154
- focusedColumnKeyID = getColumnID(nextColumn);
155
- focusedItemKey = getItemKey(nextItem);
156
- };
157
- const enterPressed = (event) => {
158
- if (enterAction === "stay") {
159
- return;
160
- }
161
- if (enterAction === "next") {
162
- return nextTab(event);
163
- }
164
- const { item } = event.detail;
165
- const itemIndex = sortedItems.indexOf(item);
166
- if (itemIndex !== sortedItems.length - 1) {
167
- focusedItemKey = getItemKey(sortedItems[itemIndex + 1]);
168
- }
169
- };
170
- const cellClicked = (item, column) => {
171
- focusedColumnKeyID = null;
172
- focusedItemKey = null;
173
- if (column.canFocus) {
174
- focusedColumnKeyID = getColumnID(column);
175
- focusedItemKey = getItemKey(item);
176
- }
177
- dispatch("cellClicked", {
178
- item,
179
- column
180
- });
181
- };
182
- const headerClicked = (column) => {
183
- if (column.id && column.canSort) {
184
- if (sortColumnID === column.id) {
185
- reverseSort = !reverseSort;
186
- } else {
187
- reverseSort = false;
188
- sortColumnID = column.id;
189
- sortKey = column.sortKey || "";
190
- sortFunction = column.sortFunction;
191
- }
192
- }
193
- dispatch("headerClicked", {
194
- column,
195
- sortColumnID,
196
- sortKey,
197
- sortFunction,
198
- reverseSort
199
- });
200
- };
201
- const rowClicked = (item) => {
202
- dispatch("rowClicked", {
203
- item
204
- });
205
- };
206
- </script>
207
-
208
- <Table class={tableClass} {divClass} {striped} {hoverable} {noborder} {shadow} {color} {customColor}>
209
- <TableHead defaultRow={false} class={theadClass}>
210
- {#each internalColumns as column}
211
- <DataTableHeaderCell
212
- {column}
213
- isSorted={!!sortColumnID && getColumnID(column) === sortColumnID}
214
- {reverseSort}
215
- defaultSortAscendingIcon={sortAscendingIcon}
216
- defaultSortDescendingIcon={sortDescendingIcon}
217
- {thClass}
218
- on:click={() => headerClicked(column)}
219
- />
220
- {/each}
221
- </TableHead>
222
- <TableBody {tableBodyClass}>
223
- {#each sortedItems as item}
224
- {@const isRowFocused = !!focusedItemKey && focusedItemKey === getItemKey(item)}
225
- <TableBodyRow class={getTRClass(item, isRowFocused)} on:click={() => rowClicked(item)}>
226
- {#each internalColumns as column}
227
- {@const isCellFocused =
228
- isRowFocused && focusedColumnKeyID && focusedColumnKeyID === getColumnID(column)}
229
- <DataTableDataCell
230
- {column}
231
- {isCellFocused}
232
- {item}
233
- on:click={() => cellClicked(item, column)}
234
- on:enterPressed={enterPressed}
235
- on:prevTab={prevTab}
236
- on:nextTab={nextTab}
237
- on:action
238
- on:cellChanged
239
- />
240
- {/each}
241
- </TableBodyRow>
242
- {/each}
243
- </TableBody>
244
- </Table>
@@ -1,55 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { ColumnConfig, EnterAction, RowClassFunction, SortFunction } from './common.js';
3
- declare const __propDef: {
4
- props: {
5
- columns?: ColumnConfig[] | undefined;
6
- items?: any[] | undefined;
7
- sortKey?: string | undefined;
8
- sortFunction?: SortFunction | undefined | null;
9
- reverseSort?: boolean | undefined;
10
- sortColumnID?: string | null | undefined;
11
- sortAscendingIcon?: ConstructorOfATypedSvelteComponent | undefined;
12
- sortDescendingIcon?: ConstructorOfATypedSvelteComponent | undefined;
13
- itemKey?: string | null | undefined;
14
- enterAction?: EnterAction | undefined;
15
- divClassAppend?: string | undefined;
16
- divClassOverride?: string | undefined;
17
- tableClassAppend?: string | undefined;
18
- tableClassOverride?: string | undefined;
19
- theadClassAppend?: string | undefined;
20
- theadClassOverride?: string | undefined;
21
- thClassAppend?: string | undefined;
22
- thClassOverride?: string | undefined;
23
- tableBodyClassAppend?: string | undefined;
24
- tableBodyClassOverride?: string | undefined;
25
- tdClassAppend?: string | undefined;
26
- tdClassOverride?: string | undefined;
27
- tdFocusedClassAppend?: string | undefined;
28
- tdFocusedClassOverride?: string | undefined;
29
- trClassAppend?: string | undefined;
30
- trClassOverride?: string | undefined;
31
- trClassGetter?: RowClassFunction | null | undefined;
32
- striped?: boolean | undefined;
33
- hoverable?: boolean | undefined;
34
- noborder?: boolean | undefined;
35
- shadow?: boolean | undefined;
36
- color?: string | undefined;
37
- customColor?: string | undefined;
38
- };
39
- events: {
40
- action: any;
41
- cellChanged: any;
42
- cellClicked: CustomEvent<any>;
43
- headerClicked: CustomEvent<any>;
44
- rowClicked: CustomEvent<any>;
45
- } & {
46
- [evt: string]: CustomEvent<any>;
47
- };
48
- slots: {};
49
- };
50
- export type DataTableProps = typeof __propDef.props;
51
- export type DataTableEvents = typeof __propDef.events;
52
- export type DataTableSlots = typeof __propDef.slots;
53
- export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
54
- }
55
- export {};
@@ -1,46 +0,0 @@
1
- <script>import { TableBodyCell } from "flowbite-svelte";
2
- import { defaultCellRenderer } from "./common.js";
3
- export let column;
4
- export let item;
5
- export let isCellFocused;
6
- </script>
7
-
8
- {#await (column.cellRenderer || defaultCellRenderer)(column, item)}
9
- <TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
10
- {:then { dataValue, displayValue }}
11
- <TableBodyCell tdClass={column.getTDClass(item, dataValue, isCellFocused)} on:click>
12
- {#if column.viewComponent}
13
- <svelte:component
14
- this={column.viewComponent}
15
- {column}
16
- {item}
17
- value={dataValue}
18
- on:action
19
- on:cellChanged
20
- on:click
21
- on:enterPressed
22
- on:prevTab
23
- on:nextTab
24
- {...column.viewComponentConfig}
25
- />
26
- {:else if column.focusComponent && isCellFocused}
27
- <svelte:component
28
- this={column.focusComponent}
29
- {column}
30
- {item}
31
- value={dataValue}
32
- on:action
33
- on:cellChanged
34
- on:click
35
- on:enterPressed
36
- on:prevTab
37
- on:nextTab
38
- {...column.focusComponentConfig}
39
- />
40
- {:else}
41
- {displayValue}
42
- {/if}
43
- </TableBodyCell>
44
- {:catch}
45
- <TableBodyCell tdClass={column.getTDClass(item, '', isCellFocused)} />
46
- {/await}
@@ -1,26 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { InternalColumnConfig } from './common.js';
3
- declare const __propDef: {
4
- props: {
5
- column: InternalColumnConfig;
6
- item: any;
7
- isCellFocused: boolean;
8
- };
9
- events: {
10
- click: any;
11
- action: any;
12
- cellChanged: any;
13
- enterPressed: any;
14
- prevTab: any;
15
- nextTab: any;
16
- } & {
17
- [evt: string]: CustomEvent<any>;
18
- };
19
- slots: {};
20
- };
21
- export type DataTableDataCellProps = typeof __propDef.props;
22
- export type DataTableDataCellEvents = typeof __propDef.events;
23
- export type DataTableDataCellSlots = typeof __propDef.slots;
24
- export default class DataTableDataCell extends SvelteComponent<DataTableDataCellProps, DataTableDataCellEvents, DataTableDataCellSlots> {
25
- }
26
- export {};
@@ -1,25 +0,0 @@
1
- <script>import { TableHeadCell } from "flowbite-svelte";
2
- import { joinClasses } from "./common.js";
3
- export let column;
4
- export let reverseSort;
5
- export let isSorted;
6
- export let defaultSortAscendingIcon;
7
- export let defaultSortDescendingIcon;
8
- export let thClass;
9
- const sortAscendingIcon = column.sortAscendingIcon || defaultSortAscendingIcon;
10
- const sortDescendingIcon = column.sortDescendingIcon || defaultSortDescendingIcon;
11
- </script>
12
-
13
- <TableHeadCell
14
- class={joinClasses(thClass || column.thClassOverride, column.thClassAppend)}
15
- on:click
16
- >
17
- {#if isSorted}
18
- {#if reverseSort}
19
- <svelte:component this={sortAscendingIcon} class="inline h-3 w-3" />
20
- {:else}
21
- <svelte:component this={sortDescendingIcon} class="inline h-3 w-3" />
22
- {/if}
23
- {/if}
24
- <span>{column.title}</span>
25
- </TableHeadCell>
@@ -1,24 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { InternalColumnConfig } from './common.js';
3
- declare const __propDef: {
4
- props: {
5
- column: InternalColumnConfig;
6
- reverseSort: boolean;
7
- isSorted: boolean;
8
- defaultSortAscendingIcon: ConstructorOfATypedSvelteComponent;
9
- defaultSortDescendingIcon: ConstructorOfATypedSvelteComponent;
10
- thClass: string;
11
- };
12
- events: {
13
- click: MouseEvent;
14
- } & {
15
- [evt: string]: CustomEvent<any>;
16
- };
17
- slots: {};
18
- };
19
- export type DataTableHeaderCellProps = typeof __propDef.props;
20
- export type DataTableHeaderCellEvents = typeof __propDef.events;
21
- export type DataTableHeaderCellSlots = typeof __propDef.slots;
22
- export default class DataTableHeaderCell extends SvelteComponent<DataTableHeaderCellProps, DataTableHeaderCellEvents, DataTableHeaderCellSlots> {
23
- }
24
- export {};
@@ -1,71 +0,0 @@
1
- import type { Action } from './ActionsCell.svelte';
2
- /**
3
- * @constant bookmarkAction
4
- * @type {Action}
5
- * @property {string} name - bookmark
6
- * @property {ConstructorOfATypedSvelteComponent} icon - BookmarkOutline
7
- */
8
- export declare const bookmarkAction: Action;
9
- /**
10
- * @constant deleteAction
11
- * @type {Action}
12
- * @property {string} name - delete
13
- * @property {ConstructorOfATypedSvelteComponent} icon - TrashBinOutline
14
- */
15
- export declare const deleteAction: Action;
16
- /**
17
- * @constant downAction
18
- * @type {Action}
19
- * @property {string} name - down
20
- * @property {ConstructorOfATypedSvelteComponent} icon - ArrowDownSolid
21
- */
22
- export declare const downAction: Action;
23
- /**
24
- * @constant editAction
25
- * @type {Action}
26
- * @property {string} name - edit
27
- * @property {ConstructorOfATypedSvelteComponent} icon - EditOutline
28
- */
29
- export declare const editAction: Action;
30
- /**
31
- * @constant favoriteAction
32
- * @type {Action}
33
- * @property {string} name - favorite
34
- * @property {ConstructorOfATypedSvelteComponent} icon - HeartSolid
35
- */
36
- export declare const favoriteAction: Action;
37
- /**
38
- * @constant infoAction
39
- * @type {Action}
40
- * @property {string} name - info
41
- * @property {ConstructorOfATypedSvelteComponent} icon - InfoCircleOutline
42
- */
43
- export declare const infoAction: Action;
44
- /**
45
- * @constant notificationAction
46
- * @type {Action}
47
- * @property {string} name - notification
48
- * @property {ConstructorOfATypedSvelteComponent} icon - BellActiveOutline
49
- */
50
- export declare const notificationAction: Action;
51
- /**
52
- * @constant settingsAction
53
- * @type {Action}
54
- * @property {string} name - settings
55
- * @property {ConstructorOfATypedSvelteComponent} icon - CogOutline
56
- */
57
- export declare const settingsAction: Action;
58
- /**
59
- * @constant shareAction
60
- * @type {Action}
61
- * @property {string} name - share
62
- * @property {ConstructorOfATypedSvelteComponent} icon - ShareNodesOutline
63
- */
64
- export declare const shareAction: Action;
65
- /**
66
- * @constant upAction
67
- * @type {Action}
68
- * @property {string} name - up
69
- * @property {ConstructorOfATypedSvelteComponent} icon - UpArrowSolid
70
- */
71
- export declare const upAction: Action;