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