@kayord/ui 1.0.5 → 1.0.6
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 +30 -1
- package/dist/components/custom/data-table/DataTable.svelte.d.ts +2 -1
- package/dist/components/custom/data-table/table-search-params.d.ts +2 -2
- package/dist/components/custom/data-table/table-search-params.js +3 -3
- package/dist/components/ui/command/command-item.svelte +1 -1
- package/dist/components/ui/sonner/sonner.svelte +1 -1
- package/package.json +7 -7
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { FlexRender } from "../../ui/data-table";
|
|
4
4
|
import { Skeleton, Table } from "../../ui";
|
|
5
5
|
import Pagination from "./Pagination.svelte";
|
|
6
|
-
import type
|
|
6
|
+
import { onMount, type Snippet } from "svelte";
|
|
7
7
|
import { fade } from "svelte/transition";
|
|
8
8
|
import { ProgressLoading } from "../progress-loading";
|
|
9
9
|
import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
|
|
@@ -12,6 +12,14 @@
|
|
|
12
12
|
import DataTableHeader from "./DataTableHeader.svelte";
|
|
13
13
|
import VisibilitySelect from "./VisibilitySelect.svelte";
|
|
14
14
|
import DataTableFooter from "./DataTableFooter.svelte";
|
|
15
|
+
import { goto } from "$app/navigation";
|
|
16
|
+
import {
|
|
17
|
+
decodeColumnFilters,
|
|
18
|
+
decodeGlobalFilter,
|
|
19
|
+
decodePageIndex,
|
|
20
|
+
decodeSorting,
|
|
21
|
+
encodeTableState,
|
|
22
|
+
} from "./table-search-params";
|
|
15
23
|
|
|
16
24
|
interface Props<T> {
|
|
17
25
|
table: TableType<T>;
|
|
@@ -28,6 +36,7 @@
|
|
|
28
36
|
class?: string;
|
|
29
37
|
headerClass?: string;
|
|
30
38
|
disableUISorting?: boolean;
|
|
39
|
+
useQueryParamState?: boolean;
|
|
31
40
|
}
|
|
32
41
|
|
|
33
42
|
let {
|
|
@@ -45,11 +54,31 @@
|
|
|
45
54
|
class: className,
|
|
46
55
|
headerClass,
|
|
47
56
|
disableUISorting = false,
|
|
57
|
+
useQueryParamState = false,
|
|
48
58
|
}: Props<T> = $props();
|
|
49
59
|
|
|
50
60
|
const tableStore = new TableStore();
|
|
51
61
|
const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
|
|
52
62
|
let end: HTMLElement | undefined = $state();
|
|
63
|
+
|
|
64
|
+
$effect(() => {
|
|
65
|
+
if (useQueryParamState) {
|
|
66
|
+
const params = encodeTableState(table.getState());
|
|
67
|
+
goto(params, {
|
|
68
|
+
replaceState: true,
|
|
69
|
+
keepFocus: true,
|
|
70
|
+
noScroll: true,
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
onMount(() => {
|
|
75
|
+
if (useQueryParamState) {
|
|
76
|
+
table.setPageIndex(decodePageIndex());
|
|
77
|
+
table.setSorting(decodeSorting());
|
|
78
|
+
table.setGlobalFilter(decodeGlobalFilter());
|
|
79
|
+
table.setColumnFilters(decodeColumnFilters());
|
|
80
|
+
}
|
|
81
|
+
});
|
|
53
82
|
</script>
|
|
54
83
|
|
|
55
84
|
<div
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Table as TableType } from "@tanstack/table-core";
|
|
2
|
-
import type
|
|
2
|
+
import { type Snippet } from "svelte";
|
|
3
3
|
interface Props<T> {
|
|
4
4
|
table: TableType<T>;
|
|
5
5
|
isLoading?: boolean;
|
|
@@ -15,6 +15,7 @@ interface Props<T> {
|
|
|
15
15
|
class?: string;
|
|
16
16
|
headerClass?: string;
|
|
17
17
|
disableUISorting?: boolean;
|
|
18
|
+
useQueryParamState?: boolean;
|
|
18
19
|
}
|
|
19
20
|
declare class __sveltets_Render<T> {
|
|
20
21
|
props(): Props<T>;
|
|
@@ -5,14 +5,14 @@ export declare const decodeSorting: () => {
|
|
|
5
5
|
desc: boolean;
|
|
6
6
|
}[];
|
|
7
7
|
export declare const encodeGlobalFilter: (state: TableState) => any;
|
|
8
|
-
export declare const decodeGlobalFilter: () => string
|
|
8
|
+
export declare const decodeGlobalFilter: () => string;
|
|
9
9
|
export declare const encodePageIndex: (state: TableState) => string;
|
|
10
10
|
export declare const decodePageIndex: () => number;
|
|
11
11
|
export declare const encodeColumnFilters: (state: TableState) => string;
|
|
12
12
|
export declare const decodeColumnFilters: () => {
|
|
13
13
|
id: string;
|
|
14
14
|
value: any;
|
|
15
|
-
}[]
|
|
15
|
+
}[];
|
|
16
16
|
interface Options {
|
|
17
17
|
sorting?: boolean;
|
|
18
18
|
globalFilter?: boolean;
|
|
@@ -18,7 +18,7 @@ export const encodeGlobalFilter = (state) => {
|
|
|
18
18
|
return state.globalFilter;
|
|
19
19
|
};
|
|
20
20
|
export const decodeGlobalFilter = () => {
|
|
21
|
-
return page.url.searchParams.get("globalFilter");
|
|
21
|
+
return page.url.searchParams.get("globalFilter") ?? "";
|
|
22
22
|
};
|
|
23
23
|
export const encodePageIndex = (state) => {
|
|
24
24
|
return state.pagination?.pageIndex?.toString() ?? undefined;
|
|
@@ -32,7 +32,7 @@ export const encodeColumnFilters = (state) => {
|
|
|
32
32
|
.join(",");
|
|
33
33
|
};
|
|
34
34
|
export const decodeColumnFilters = () => {
|
|
35
|
-
return page.url.searchParams
|
|
35
|
+
return (page.url.searchParams
|
|
36
36
|
.get("columnFilters")
|
|
37
37
|
?.split(",")
|
|
38
38
|
.map((v) => {
|
|
@@ -46,7 +46,7 @@ export const decodeColumnFilters = () => {
|
|
|
46
46
|
value: stringValue === "undefined" ? undefined : JSON.parse(decodeURIComponent(stringValue)),
|
|
47
47
|
};
|
|
48
48
|
})
|
|
49
|
-
.filter((x) => x !== null);
|
|
49
|
+
.filter((x) => x !== null) ?? []);
|
|
50
50
|
};
|
|
51
51
|
export const encodeTableState = (state, options, searchParams) => {
|
|
52
52
|
if (searchParams === undefined) {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
bind:ref
|
|
10
10
|
data-slot="command-item"
|
|
11
11
|
class={cn(
|
|
12
|
-
"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled
|
|
12
|
+
"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
13
13
|
className
|
|
14
14
|
)}
|
|
15
15
|
{...restProps}
|
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
<Sonner
|
|
9
9
|
theme={mode.current}
|
|
10
10
|
class="toaster group"
|
|
11
|
-
style="--normal-bg: var(--popover); --normal-text: var(--popover-foreground); --normal-border: var(--border);"
|
|
11
|
+
style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
|
|
12
12
|
{...restProps}
|
|
13
13
|
/>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.6",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"vaul-svelte": "1.0.0-next.7"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@lucide/svelte": "^0.
|
|
50
|
+
"@lucide/svelte": "^0.523.0",
|
|
51
51
|
"@sveltejs/adapter-auto": "^6.0.1",
|
|
52
52
|
"@sveltejs/kit": "^2.22.0",
|
|
53
53
|
"@sveltejs/package": "^2.3.11",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"@testing-library/user-event": "^14.6.1",
|
|
59
59
|
"@types/d3-scale": "^4.0.9",
|
|
60
60
|
"@types/d3-shape": "^3.1.7",
|
|
61
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
62
|
-
"@typescript-eslint/parser": "^8.
|
|
61
|
+
"@typescript-eslint/eslint-plugin": "^8.35.0",
|
|
62
|
+
"@typescript-eslint/parser": "^8.35.0",
|
|
63
63
|
"d3-scale": "^4.0.2",
|
|
64
64
|
"d3-shape": "^3.2.0",
|
|
65
65
|
"eslint": "^9.29.0",
|
|
@@ -67,17 +67,17 @@
|
|
|
67
67
|
"eslint-plugin-svelte": "^3.9.3",
|
|
68
68
|
"happy-dom": "^18.0.1",
|
|
69
69
|
"layerchart": "2.0.0-next.6",
|
|
70
|
-
"prettier": "^3.
|
|
70
|
+
"prettier": "^3.6.1",
|
|
71
71
|
"prettier-plugin-svelte": "^3.4.0",
|
|
72
72
|
"prettier-plugin-tailwindcss": "^0.6.13",
|
|
73
73
|
"publint": "^0.3.12",
|
|
74
|
-
"svelte": "5.34.
|
|
74
|
+
"svelte": "5.34.8",
|
|
75
75
|
"svelte-check": "^4.2.2",
|
|
76
76
|
"tailwindcss": "^4.1.10",
|
|
77
77
|
"tslib": "^2.8.1",
|
|
78
78
|
"tw-animate-css": "1.3.4",
|
|
79
79
|
"typescript": "^5.8.3",
|
|
80
|
-
"vite": "^
|
|
80
|
+
"vite": "^7.0.0",
|
|
81
81
|
"vitest": "^3.2.4",
|
|
82
82
|
"zod": "^3.25.67"
|
|
83
83
|
},
|