@kayord/ui 0.13.16 → 0.13.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/custom/data-table/index.d.ts +1 -0
- package/dist/components/custom/data-table/index.js +1 -0
- package/dist/components/custom/data-table/shad-table.svelte.d.ts +8 -0
- package/dist/components/custom/data-table/shad-table.svelte.js +101 -0
- package/dist/components/custom/data-table/state.svelte.d.ts +5 -0
- package/dist/components/custom/data-table/state.svelte.js +21 -0
- package/package.json +8 -8
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type RowData, type RowModel, type Table, type TableOptions } from "@tanstack/table-core";
|
|
2
|
+
interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TData>, "getCoreRowModel"> {
|
|
3
|
+
getCoreRowModel?: (table: Table<any>) => () => RowModel<any>;
|
|
4
|
+
enablePaging?: boolean;
|
|
5
|
+
enableVisibility?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const createShadTable: <TData extends RowData>(options: ShadTableOptions<TData>) => Table<TData>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { createSvelteTable } from "../../ui";
|
|
2
|
+
import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
|
|
3
|
+
import { State } from "./state.svelte";
|
|
4
|
+
export const createShadTable = (options) => {
|
|
5
|
+
// Set the default getCoreRowModel
|
|
6
|
+
if (!options.getCoreRowModel) {
|
|
7
|
+
options.getCoreRowModel = getCoreRowModel();
|
|
8
|
+
}
|
|
9
|
+
const state = new State(options.state ?? {});
|
|
10
|
+
// Sorting
|
|
11
|
+
if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
|
|
12
|
+
options.getSortedRowModel = getSortedRowModel();
|
|
13
|
+
options.onSortingChange = (updater) => {
|
|
14
|
+
if (typeof updater === "function") {
|
|
15
|
+
if (options.state?.sorting) {
|
|
16
|
+
options.state.sorting = updater(options.state.sorting);
|
|
17
|
+
}
|
|
18
|
+
else if (state.value.sorting) {
|
|
19
|
+
state.value.sorting = updater(state.value.sorting);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
if (options.state?.sorting) {
|
|
24
|
+
options.state.sorting = updater;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
state.value.sorting = updater;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
// Paging
|
|
33
|
+
if ((options.enablePaging ?? true) && !options.getPaginationRowModel) {
|
|
34
|
+
options.getPaginationRowModel = getPaginationRowModel();
|
|
35
|
+
options.onPaginationChange = (updater) => {
|
|
36
|
+
if (typeof updater === "function") {
|
|
37
|
+
if (options.state?.pagination) {
|
|
38
|
+
options.state.pagination = updater(options.state.pagination);
|
|
39
|
+
}
|
|
40
|
+
else if (state.value.pagination) {
|
|
41
|
+
state.value.pagination = updater(state.value.pagination);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
if (options.state?.pagination) {
|
|
46
|
+
options.state.pagination = updater;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
state.value.pagination = updater;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
// Row Selection
|
|
55
|
+
if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
|
|
56
|
+
options.onRowSelectionChange = (updater) => {
|
|
57
|
+
if (typeof updater === "function") {
|
|
58
|
+
if (options.state?.rowSelection) {
|
|
59
|
+
options.state.rowSelection = updater(options.state.rowSelection);
|
|
60
|
+
}
|
|
61
|
+
else if (state.value.rowSelection) {
|
|
62
|
+
state.value.rowSelection = updater(state.value.rowSelection);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
if (options.state?.rowSelection) {
|
|
67
|
+
options.state.rowSelection = updater;
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
state.value.rowSelection = updater;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
// Column Visibility
|
|
76
|
+
if ((options.enableVisibility ?? false) && !options.onColumnVisibilityChange) {
|
|
77
|
+
options.onColumnVisibilityChange = (updater) => {
|
|
78
|
+
if (typeof updater === "function") {
|
|
79
|
+
if (options.state?.columnVisibility) {
|
|
80
|
+
options.state.columnVisibility = updater(options.state.columnVisibility);
|
|
81
|
+
}
|
|
82
|
+
else if (state.value.columnVisibility) {
|
|
83
|
+
state.value.columnVisibility = updater(state.value.columnVisibility);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
if (options.state?.columnVisibility) {
|
|
88
|
+
options.state.columnVisibility = updater;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
state.value.columnVisibility = updater;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
options.state = state.value;
|
|
97
|
+
const tableOptions = options;
|
|
98
|
+
return createSvelteTable({
|
|
99
|
+
...tableOptions,
|
|
100
|
+
});
|
|
101
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export class State {
|
|
2
|
+
value = $state({});
|
|
3
|
+
constructor(initState) {
|
|
4
|
+
if (!initState.sorting) {
|
|
5
|
+
initState.sorting = [];
|
|
6
|
+
}
|
|
7
|
+
if (!initState.pagination) {
|
|
8
|
+
initState.pagination = { pageIndex: 0, pageSize: 10 };
|
|
9
|
+
}
|
|
10
|
+
if (!initState.columnVisibility) {
|
|
11
|
+
initState.columnVisibility = {};
|
|
12
|
+
}
|
|
13
|
+
if (!initState.rowSelection) {
|
|
14
|
+
initState.rowSelection = {};
|
|
15
|
+
}
|
|
16
|
+
if (!initState.columnVisibility) {
|
|
17
|
+
initState.columnVisibility = {};
|
|
18
|
+
}
|
|
19
|
+
this.value = initState;
|
|
20
|
+
}
|
|
21
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.13.
|
|
4
|
+
"version": "0.13.18",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@internationalized/date": "^3.7.0",
|
|
37
|
-
"bits-ui": "1.0.0-next.
|
|
37
|
+
"bits-ui": "1.0.0-next.94",
|
|
38
38
|
"clsx": "^2.1.1",
|
|
39
39
|
"embla-carousel-svelte": "8.5.2",
|
|
40
40
|
"formsnap": "2.0.0",
|
|
@@ -53,16 +53,16 @@
|
|
|
53
53
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
54
54
|
"@testing-library/jest-dom": "^6.6.3",
|
|
55
55
|
"@testing-library/svelte": "^5.2.6",
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
57
|
-
"@typescript-eslint/parser": "^8.
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "^8.24.0",
|
|
57
|
+
"@typescript-eslint/parser": "^8.24.0",
|
|
58
58
|
"autoprefixer": "^10.4.20",
|
|
59
|
-
"eslint": "^9.
|
|
59
|
+
"eslint": "^9.20.0",
|
|
60
60
|
"eslint-config-prettier": "^10.0.1",
|
|
61
61
|
"eslint-plugin-svelte": "^2.46.1",
|
|
62
|
-
"happy-dom": "^17.0.
|
|
62
|
+
"happy-dom": "^17.0.3",
|
|
63
63
|
"lucide-svelte": "^0.475.0",
|
|
64
|
-
"postcss": "^8.5.
|
|
65
|
-
"prettier": "^3.
|
|
64
|
+
"postcss": "^8.5.2",
|
|
65
|
+
"prettier": "^3.5.0",
|
|
66
66
|
"prettier-plugin-svelte": "^3.3.3",
|
|
67
67
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
68
68
|
"publint": "^0.3.4",
|