@kayord/ui 4.0.3 → 4.0.5
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/Pagination.svelte +6 -5
- package/dist/components/custom/data-table/table-search-params.d.ts +1 -1
- package/dist/components/custom/data-table/table-search-params.js +11 -7
- package/dist/components/custom/data-table/table-url-sync.svelte.d.ts +3 -1
- package/dist/components/custom/data-table/table-url-sync.svelte.js +29 -13
- package/package.json +3 -3
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
canChangePageSize?: boolean;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
let { table, canChangePageSize =
|
|
15
|
+
let { table, canChangePageSize = false }: Props<T> = $props();
|
|
16
16
|
|
|
17
17
|
const pagination = $derived(table.atoms.pagination.get());
|
|
18
18
|
</script>
|
|
@@ -24,11 +24,12 @@
|
|
|
24
24
|
{table.getFilteredSelectedRowModel().rows.length} of
|
|
25
25
|
{table.getFilteredRowModel().rows.length} row(s) selected.
|
|
26
26
|
</p>
|
|
27
|
+
{:else}
|
|
28
|
+
<p>
|
|
29
|
+
{table.getRowModel().rows.length.toLocaleString()}
|
|
30
|
+
of {table.getRowCount().toLocaleString()} rows
|
|
31
|
+
</p>
|
|
27
32
|
{/if}
|
|
28
|
-
<p>
|
|
29
|
-
{table.getRowModel().rows.length.toLocaleString()}
|
|
30
|
-
of {table.getRowCount().toLocaleString()} rows
|
|
31
|
-
</p>
|
|
32
33
|
</div>
|
|
33
34
|
<div class="flex items-center gap-6 lg:gap-8">
|
|
34
35
|
{#if canChangePageSize}
|
|
@@ -9,7 +9,7 @@ export declare const decodeSorting: () => {
|
|
|
9
9
|
export declare const encodeGlobalFilter: (state: State) => any;
|
|
10
10
|
export declare const decodeGlobalFilter: () => string | undefined;
|
|
11
11
|
export declare const encodePageIndex: (state: State) => string;
|
|
12
|
-
export declare const decodePageIndex: () => number;
|
|
12
|
+
export declare const decodePageIndex: () => number | undefined;
|
|
13
13
|
export declare const encodeColumnFilters: (state: State) => string;
|
|
14
14
|
export declare const decodeColumnFilters: () => {
|
|
15
15
|
id: string;
|
|
@@ -28,8 +28,11 @@ export const encodePageIndex = (state) => {
|
|
|
28
28
|
return state.pagination?.pageIndex?.toString() ?? "";
|
|
29
29
|
};
|
|
30
30
|
export const decodePageIndex = () => {
|
|
31
|
-
const
|
|
32
|
-
|
|
31
|
+
const raw = page.url.searchParams.get("page");
|
|
32
|
+
if (raw == null)
|
|
33
|
+
return undefined;
|
|
34
|
+
const pageIndex = Number(raw);
|
|
35
|
+
return Number.isFinite(pageIndex) ? pageIndex : undefined;
|
|
33
36
|
};
|
|
34
37
|
export const encodeColumnFilters = (state) => {
|
|
35
38
|
return (state.columnFilters
|
|
@@ -59,15 +62,16 @@ export const decodeColumnFilters = () => {
|
|
|
59
62
|
});
|
|
60
63
|
};
|
|
61
64
|
export const decodeTableState = () => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
pageIndex: decodePageIndex(),
|
|
65
|
-
pageSize: 10,
|
|
66
|
-
},
|
|
65
|
+
const pageIndex = decodePageIndex();
|
|
66
|
+
const state = {
|
|
67
67
|
sorting: decodeSorting(),
|
|
68
68
|
columnFilters: decodeColumnFilters(),
|
|
69
69
|
globalFilter: decodeGlobalFilter(),
|
|
70
70
|
};
|
|
71
|
+
if (pageIndex !== undefined) {
|
|
72
|
+
state.pagination = { pageIndex, pageSize: 10 };
|
|
73
|
+
}
|
|
74
|
+
return state;
|
|
71
75
|
};
|
|
72
76
|
export const encodeTableState = (state, options, searchParams) => {
|
|
73
77
|
if (searchParams === undefined) {
|
|
@@ -34,7 +34,9 @@ export interface TableUrlSyncOptions {
|
|
|
34
34
|
*
|
|
35
35
|
* The table is hydrated from the URL immediately, before the first render, so
|
|
36
36
|
* row-model auto-resets (which are skipped on their first run) can't clobber
|
|
37
|
-
* the URL-backed state.
|
|
37
|
+
* the URL-backed state. URL params override `initialState`; params missing
|
|
38
|
+
* from the URL leave `initialState` in place, and the initial state is then
|
|
39
|
+
* written back to the URL like any other state.
|
|
38
40
|
*
|
|
39
41
|
* By default all four params are synced; pass {@link TableUrlSyncOptions} to
|
|
40
42
|
* enable only a subset, e.g. `useTableUrlSync(table, { pagination: true })`.
|
|
@@ -17,7 +17,9 @@ import { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting
|
|
|
17
17
|
*
|
|
18
18
|
* The table is hydrated from the URL immediately, before the first render, so
|
|
19
19
|
* row-model auto-resets (which are skipped on their first run) can't clobber
|
|
20
|
-
* the URL-backed state.
|
|
20
|
+
* the URL-backed state. URL params override `initialState`; params missing
|
|
21
|
+
* from the URL leave `initialState` in place, and the initial state is then
|
|
22
|
+
* written back to the URL like any other state.
|
|
21
23
|
*
|
|
22
24
|
* By default all four params are synced; pass {@link TableUrlSyncOptions} to
|
|
23
25
|
* enable only a subset, e.g. `useTableUrlSync(table, { pagination: true })`.
|
|
@@ -31,18 +33,32 @@ export function useTableUrlSync(table, options) {
|
|
|
31
33
|
...options,
|
|
32
34
|
};
|
|
33
35
|
const params = useSearchParams(defaultSearchParamSchema, { pushHistory: false });
|
|
34
|
-
// Hydrate from the URL before the first render
|
|
35
|
-
//
|
|
36
|
-
//
|
|
37
|
-
//
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
if (enabled.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
// Hydrate from the URL before the first render, but only for params the URL
|
|
37
|
+
// actually carries — absent params leave the table's `initialState` in place
|
|
38
|
+
// (the write-back effect below then publishes it to the URL). Sorting/filter/
|
|
39
|
+
// data changes defer an autoResetPageIndex microtask via the adapter's
|
|
40
|
+
// schedule; row models skip auto-resets on their first run, so applying the
|
|
41
|
+
// URL state up-front can't be undone by them (a post-mount hydration would be).
|
|
42
|
+
if (enabled.globalFilter) {
|
|
43
|
+
const globalFilter = decodeGlobalFilter();
|
|
44
|
+
if (globalFilter !== undefined)
|
|
45
|
+
table.setGlobalFilter(globalFilter);
|
|
46
|
+
}
|
|
47
|
+
if (enabled.sorting) {
|
|
48
|
+
const sorting = decodeSorting();
|
|
49
|
+
if (sorting !== undefined)
|
|
50
|
+
table.setSorting(sorting);
|
|
51
|
+
}
|
|
52
|
+
if (enabled.pagination) {
|
|
53
|
+
const pageIndex = decodePageIndex();
|
|
54
|
+
if (pageIndex !== undefined)
|
|
55
|
+
table.setPageIndex(pageIndex);
|
|
56
|
+
}
|
|
57
|
+
if (enabled.columnFilters) {
|
|
58
|
+
const columnFilters = decodeColumnFilters();
|
|
59
|
+
if (columnFilters !== undefined)
|
|
60
|
+
table.setColumnFilters(columnFilters);
|
|
61
|
+
}
|
|
46
62
|
// When navigating with new sort/search/filter params, snap back to the first
|
|
47
63
|
// page unless the target URL explicitly points at a later page. Only same-route
|
|
48
64
|
// query changes count: resetting on a cross-route navigation would mutate state
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "4.0.
|
|
4
|
+
"version": "4.0.5",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/kayordDX/ui.git"
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
"@eslint/compat": "^2.1.0",
|
|
119
119
|
"@eslint/js": "^10.0.1",
|
|
120
120
|
"@internationalized/date": "^3.12.3",
|
|
121
|
-
"@lucide/svelte": "^1.
|
|
121
|
+
"@lucide/svelte": "^1.38.0",
|
|
122
122
|
"@sveltejs/adapter-auto": "^7.0.1",
|
|
123
123
|
"@sveltejs/kit": "^2.70.3",
|
|
124
124
|
"@sveltejs/package": "^2.5.8",
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
"tslib": "^2.8.1",
|
|
155
155
|
"tw-animate-css": "1.4.0",
|
|
156
156
|
"typescript": "^6.0.3",
|
|
157
|
-
"typescript-eslint": "^8.
|
|
157
|
+
"typescript-eslint": "^8.69.0",
|
|
158
158
|
"vaul-svelte": "1.0.0-next.7",
|
|
159
159
|
"vite": "^8.2.2",
|
|
160
160
|
"vitest": "^4.1.11",
|