@kayord/ui 0.17.0 → 0.17.1
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/DataTable.svelte +9 -3
- package/dist/components/custom/data-table/FullscreenModeToggle.svelte +23 -8
- package/dist/components/custom/data-table/FullscreenModeToggle.svelte.d.ts +5 -16
- package/dist/components/custom/data-table/shad-table.svelte.js +86 -33
- package/dist/components/custom/data-table/table.svelte.d.ts +1 -3
- package/dist/components/custom/data-table/table.svelte.js +3 -3
- package/package.json +10 -10
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { ProgressLoading } from "../progress-loading";
|
|
9
9
|
import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
|
|
10
10
|
import { cn } from "../../../utils";
|
|
11
|
-
import {
|
|
11
|
+
import { TableStore } from "./table.svelte";
|
|
12
12
|
import DataTableHeader from "./DataTableHeader.svelte";
|
|
13
13
|
import VisibilitySelect from "./VisibilitySelect.svelte";
|
|
14
14
|
|
|
@@ -46,13 +46,17 @@
|
|
|
46
46
|
disableUISorting = false,
|
|
47
47
|
}: Props<T> = $props();
|
|
48
48
|
|
|
49
|
+
const tableStore = new TableStore();
|
|
49
50
|
const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
|
|
51
|
+
let end: HTMLElement | undefined = $state();
|
|
50
52
|
</script>
|
|
51
53
|
|
|
52
54
|
<div
|
|
53
55
|
class={cn(
|
|
54
56
|
"w-full",
|
|
55
|
-
tableStore.isFullscreen
|
|
57
|
+
tableStore.isFullscreen
|
|
58
|
+
? "bg-background b-0 absolute inset-0 top-0 left-0 z-20 overflow-auto p-2 transition-all"
|
|
59
|
+
: "w-full",
|
|
56
60
|
className
|
|
57
61
|
)}
|
|
58
62
|
>
|
|
@@ -78,7 +82,7 @@
|
|
|
78
82
|
{/if}
|
|
79
83
|
{#if enableFullscreen}
|
|
80
84
|
<div>
|
|
81
|
-
<FullscreenModeToggle />
|
|
85
|
+
<FullscreenModeToggle bind:isFullscreen={tableStore.isFullscreen} {end} />
|
|
82
86
|
</div>
|
|
83
87
|
{/if}
|
|
84
88
|
</div>
|
|
@@ -159,3 +163,5 @@
|
|
|
159
163
|
</div>
|
|
160
164
|
{/if}
|
|
161
165
|
</div>
|
|
166
|
+
|
|
167
|
+
<div bind:this={end} aria-hidden="true"></div>
|
|
@@ -1,7 +1,27 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import Button from "../../ui/button/button.svelte";
|
|
3
3
|
import { Maximize, Minimize } from "@lucide/svelte";
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
isFullscreen: boolean;
|
|
7
|
+
end?: HTMLElement;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
let { isFullscreen = $bindable(), end }: Props = $props();
|
|
11
|
+
|
|
12
|
+
$effect.pre(() => {
|
|
13
|
+
if (isFullscreen) {
|
|
14
|
+
document.body.classList.add("overflow-hidden");
|
|
15
|
+
document.body.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
16
|
+
} else {
|
|
17
|
+
if (!end) {
|
|
18
|
+
document.body.classList.remove("overflow-hidden");
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
end.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
22
|
+
document.body.classList.remove("overflow-hidden");
|
|
23
|
+
}
|
|
24
|
+
});
|
|
5
25
|
</script>
|
|
6
26
|
|
|
7
27
|
<Button
|
|
@@ -9,15 +29,10 @@
|
|
|
9
29
|
variant="outline"
|
|
10
30
|
size="sm"
|
|
11
31
|
onclick={() => {
|
|
12
|
-
|
|
13
|
-
// if ($target == "body") {
|
|
14
|
-
// $target = "#tableContent";
|
|
15
|
-
// } else {
|
|
16
|
-
// $target = "body";
|
|
17
|
-
// }
|
|
32
|
+
isFullscreen = !isFullscreen;
|
|
18
33
|
}}
|
|
19
34
|
>
|
|
20
|
-
{#if
|
|
35
|
+
{#if isFullscreen}
|
|
21
36
|
<Minimize class="size-5" />
|
|
22
37
|
{:else}
|
|
23
38
|
<Maximize class="size-5" />
|
|
@@ -1,18 +1,7 @@
|
|
|
1
|
-
interface
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
} & Exports;
|
|
5
|
-
(internal: unknown, props: {
|
|
6
|
-
$$events?: Events;
|
|
7
|
-
$$slots?: Slots;
|
|
8
|
-
}): Exports & {
|
|
9
|
-
$set?: any;
|
|
10
|
-
$on?: any;
|
|
11
|
-
};
|
|
12
|
-
z_$$bindings?: Bindings;
|
|
1
|
+
interface Props {
|
|
2
|
+
isFullscreen: boolean;
|
|
3
|
+
end?: HTMLElement;
|
|
13
4
|
}
|
|
14
|
-
declare const FullscreenModeToggle:
|
|
15
|
-
|
|
16
|
-
}, {}, {}, string>;
|
|
17
|
-
type FullscreenModeToggle = InstanceType<typeof FullscreenModeToggle>;
|
|
5
|
+
declare const FullscreenModeToggle: import("svelte").Component<Props, {}, "isFullscreen">;
|
|
6
|
+
type FullscreenModeToggle = ReturnType<typeof FullscreenModeToggle>;
|
|
18
7
|
export default FullscreenModeToggle;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
|
|
1
|
+
import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
|
|
2
2
|
import DataTableCheckbox from "./DataTableCheckbox.svelte";
|
|
3
3
|
import { renderComponent } from "../../ui";
|
|
4
4
|
export function createShadTable(shadOptions, stateUpdate) {
|
|
@@ -13,46 +13,50 @@ export function createShadTable(shadOptions, stateUpdate) {
|
|
|
13
13
|
// Sorting
|
|
14
14
|
if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
|
|
15
15
|
options.getSortedRowModel = getSortedRowModel();
|
|
16
|
-
options.onSortingChange
|
|
17
|
-
|
|
18
|
-
if (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
else {
|
|
26
|
-
if (options.state?.sorting) {
|
|
27
|
-
options.state.sorting = updater;
|
|
16
|
+
if (!options.onSortingChange) {
|
|
17
|
+
options.onSortingChange = (updater) => {
|
|
18
|
+
if (typeof updater === "function") {
|
|
19
|
+
if (options.state?.sorting) {
|
|
20
|
+
options.state.sorting = updater(options.state.sorting);
|
|
21
|
+
}
|
|
22
|
+
else if (state.sorting) {
|
|
23
|
+
state.sorting = updater(state.sorting);
|
|
24
|
+
}
|
|
28
25
|
}
|
|
29
26
|
else {
|
|
30
|
-
state
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
if (options.state?.sorting) {
|
|
28
|
+
options.state.sorting = updater;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
state.sorting = updater;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
37
|
// Paging
|
|
36
38
|
if ((shadOptions.enablePaging ?? true) && !options.getPaginationRowModel) {
|
|
37
39
|
options.getPaginationRowModel = getPaginationRowModel();
|
|
38
|
-
options.onPaginationChange
|
|
39
|
-
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
else {
|
|
48
|
-
if (options.state?.pagination) {
|
|
49
|
-
options.state.pagination = updater;
|
|
40
|
+
if (!options.onPaginationChange) {
|
|
41
|
+
options.onPaginationChange = (updater) => {
|
|
42
|
+
if (typeof updater === "function") {
|
|
43
|
+
if (options.state?.pagination) {
|
|
44
|
+
options.state.pagination = updater(options.state.pagination);
|
|
45
|
+
}
|
|
46
|
+
else if (state.pagination) {
|
|
47
|
+
state.pagination = updater(state.pagination);
|
|
48
|
+
}
|
|
50
49
|
}
|
|
51
50
|
else {
|
|
52
|
-
state
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
if (options.state?.pagination) {
|
|
52
|
+
options.state.pagination = updater;
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
state.pagination = updater;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}
|
|
56
60
|
}
|
|
57
61
|
// Row Selection
|
|
58
62
|
if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
|
|
@@ -112,6 +116,55 @@ export function createShadTable(shadOptions, stateUpdate) {
|
|
|
112
116
|
}
|
|
113
117
|
};
|
|
114
118
|
}
|
|
119
|
+
// Filtering
|
|
120
|
+
if ((options.enableFilters ?? true) && !options.getFilteredRowModel) {
|
|
121
|
+
options.getFilteredRowModel = getFilteredRowModel();
|
|
122
|
+
// Global Filtering
|
|
123
|
+
if (options.enableGlobalFilter ?? false) {
|
|
124
|
+
if (!options.onGlobalFilterChange) {
|
|
125
|
+
options.onGlobalFilterChange = (updater) => {
|
|
126
|
+
if (typeof updater === "function") {
|
|
127
|
+
if (options.state?.globalFilter) {
|
|
128
|
+
options.state.globalFilter = updater(options.state.globalFilter);
|
|
129
|
+
}
|
|
130
|
+
else if (state.globalFilter) {
|
|
131
|
+
state.globalFilter = updater(state.globalFilter);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
if (options.state?.globalFilter) {
|
|
136
|
+
options.state.globalFilter = updater;
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
state.globalFilter = updater;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
if (!options.onColumnFiltersChange) {
|
|
147
|
+
options.onColumnFiltersChange = (updater) => {
|
|
148
|
+
if (typeof updater === "function") {
|
|
149
|
+
if (options.state?.columnFilters) {
|
|
150
|
+
options.state.columnFilters = updater(options.state.columnFilters);
|
|
151
|
+
}
|
|
152
|
+
else if (state.columnFilters) {
|
|
153
|
+
state.columnFilters = updater(state.columnFilters);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
if (options.state?.columnFilters) {
|
|
158
|
+
options.state.columnFilters = updater;
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
state.columnFilters = updater;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
115
168
|
const resolvedOptions = mergeObjects({
|
|
116
169
|
state: {},
|
|
117
170
|
onStateChange() { },
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export
|
|
2
|
-
isFullscreen
|
|
3
|
-
}
|
|
1
|
+
export class TableStore {
|
|
2
|
+
isFullscreen = $state(false);
|
|
3
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.17.
|
|
4
|
+
"version": "0.17.1",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -34,19 +34,19 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@internationalized/date": "^3.7.0",
|
|
37
|
-
"bits-ui": "1.3.
|
|
37
|
+
"bits-ui": "1.3.15",
|
|
38
38
|
"clsx": "^2.1.1",
|
|
39
39
|
"embla-carousel-svelte": "8.5.2",
|
|
40
40
|
"formsnap": "2.0.0",
|
|
41
41
|
"mode-watcher": "^0.5.1",
|
|
42
42
|
"paneforge": "1.0.0-next.4",
|
|
43
43
|
"svelte-sonner": "^0.3.28",
|
|
44
|
-
"tailwind-merge": "^3.0
|
|
44
|
+
"tailwind-merge": "^3.1.0",
|
|
45
45
|
"tailwind-variants": "^1.0.0",
|
|
46
46
|
"vaul-svelte": "1.0.0-next.7"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@lucide/svelte": "^0.
|
|
49
|
+
"@lucide/svelte": "^0.486.0",
|
|
50
50
|
"@sveltejs/adapter-auto": "^5.0.0",
|
|
51
51
|
"@sveltejs/kit": "^2.20.2",
|
|
52
52
|
"@sveltejs/package": "^2.3.10",
|
|
@@ -54,24 +54,24 @@
|
|
|
54
54
|
"@tailwindcss/vite": "^4.0.17",
|
|
55
55
|
"@testing-library/jest-dom": "^6.6.3",
|
|
56
56
|
"@testing-library/svelte": "^5.2.7",
|
|
57
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
58
|
-
"@typescript-eslint/parser": "^8.
|
|
57
|
+
"@typescript-eslint/eslint-plugin": "^8.29.0",
|
|
58
|
+
"@typescript-eslint/parser": "^8.29.0",
|
|
59
59
|
"eslint": "^9.23.0",
|
|
60
60
|
"eslint-config-prettier": "^10.1.1",
|
|
61
|
-
"eslint-plugin-svelte": "^3.
|
|
61
|
+
"eslint-plugin-svelte": "^3.4.1",
|
|
62
62
|
"happy-dom": "^17.4.4",
|
|
63
63
|
"prettier": "^3.5.3",
|
|
64
64
|
"prettier-plugin-svelte": "^3.3.3",
|
|
65
65
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
66
66
|
"publint": "^0.3.9",
|
|
67
|
-
"svelte": "^5.25.
|
|
67
|
+
"svelte": "^5.25.5",
|
|
68
68
|
"svelte-check": "^4.1.5",
|
|
69
69
|
"tailwindcss": "^4.0.17",
|
|
70
70
|
"tslib": "^2.8.1",
|
|
71
71
|
"tw-animate-css": "1.2.5",
|
|
72
72
|
"typescript": "^5.8.2",
|
|
73
|
-
"vite": "^6.2.
|
|
74
|
-
"vitest": "^3.
|
|
73
|
+
"vite": "^6.2.4",
|
|
74
|
+
"vitest": "^3.1.1",
|
|
75
75
|
"zod": "^3.24.2"
|
|
76
76
|
},
|
|
77
77
|
"svelte": "./dist/index.js",
|