@kayord/ui 0.12.20 → 0.12.22
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 +10 -7
- package/dist/components/custom/data-table/DataTable.svelte.d.ts +2 -0
- package/dist/components/custom/data-table/DataTableHeader.svelte +8 -4
- package/dist/components/custom/data-table/DataTableHeader.svelte.d.ts +1 -0
- package/dist/components/custom/data-table/Pagination.svelte +1 -1
- package/package.json +11 -11
|
@@ -11,9 +11,6 @@
|
|
|
11
11
|
import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
|
|
12
12
|
import { cn } from "../../../utils";
|
|
13
13
|
import { tableStore } from "./table.svelte";
|
|
14
|
-
import Input from "../../ui/input/input.svelte";
|
|
15
|
-
import Button from "../../ui/button/button.svelte";
|
|
16
|
-
import { ArrowUpDown } from "lucide-svelte";
|
|
17
14
|
import DataTableHeader from "./DataTableHeader.svelte";
|
|
18
15
|
|
|
19
16
|
interface Props<T> {
|
|
@@ -29,6 +26,8 @@
|
|
|
29
26
|
hideHeader?: boolean;
|
|
30
27
|
enableVisibility?: boolean;
|
|
31
28
|
enableFullscreen?: boolean;
|
|
29
|
+
class?: string;
|
|
30
|
+
disableUISorting?: boolean;
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
let {
|
|
@@ -44,6 +43,8 @@
|
|
|
44
43
|
hideHeader = false,
|
|
45
44
|
enableVisibility = false,
|
|
46
45
|
enableFullscreen = false,
|
|
46
|
+
class: className,
|
|
47
|
+
disableUISorting = false,
|
|
47
48
|
}: Props<T> = $props();
|
|
48
49
|
|
|
49
50
|
const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
|
|
@@ -75,11 +76,11 @@
|
|
|
75
76
|
tableStore.isFullscreen ? "absolute left-0 top-0 z-10 h-screen bg-background transition-all" : "w-full"
|
|
76
77
|
)}
|
|
77
78
|
>
|
|
78
|
-
<div class=
|
|
79
|
+
<div class={cn(className)}>
|
|
79
80
|
{#if header}
|
|
80
81
|
{@render header()}
|
|
81
82
|
{:else}
|
|
82
|
-
<div class="flex items-center justify-between gap-2">
|
|
83
|
+
<div class="flex items-center justify-between gap-2 pb-2">
|
|
83
84
|
<div>
|
|
84
85
|
{#if leftToolbar}
|
|
85
86
|
{@render leftToolbar()}
|
|
@@ -122,7 +123,7 @@
|
|
|
122
123
|
{#each table.getHeaderGroups() as headerGroup}
|
|
123
124
|
<Table.Row>
|
|
124
125
|
{#each headerGroup.headers as header}
|
|
125
|
-
<DataTableHeader {header} {table} />
|
|
126
|
+
<DataTableHeader {header} {table} {disableUISorting} />
|
|
126
127
|
{/each}
|
|
127
128
|
</Table.Row>
|
|
128
129
|
{/each}
|
|
@@ -151,7 +152,9 @@
|
|
|
151
152
|
{#each table.getRowModel().rows as row}
|
|
152
153
|
<Table.Row data-state={row.getIsSelected() && "selected"}>
|
|
153
154
|
{#each row.getVisibleCells() as cell}
|
|
154
|
-
<Table.Cell
|
|
155
|
+
<Table.Cell
|
|
156
|
+
style={`width: ${cell.column.getSize()}px; min-width:${cell.column.columnDef.minSize}px; max-width:${cell.column.columnDef.maxSize}px`}
|
|
157
|
+
>
|
|
155
158
|
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
|
156
159
|
</Table.Cell>
|
|
157
160
|
{/each}
|
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
<script lang="ts" generics="T">
|
|
2
|
-
import {
|
|
2
|
+
import { FlexRender, Table } from "../../..";
|
|
3
3
|
import { type Header, type Table as TypeType } from "@tanstack/table-core";
|
|
4
4
|
import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon, XIcon, FilterIcon } from "lucide-svelte";
|
|
5
5
|
|
|
6
6
|
interface Props<T> {
|
|
7
7
|
header: Header<T, unknown>;
|
|
8
8
|
table: TypeType<T>;
|
|
9
|
+
disableUISorting?: boolean;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
let { header, table }: Props<T> = $props();
|
|
12
|
+
let { header, table, disableUISorting = false }: Props<T> = $props();
|
|
12
13
|
|
|
13
|
-
const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined);
|
|
14
|
+
const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined && disableUISorting !== true);
|
|
14
15
|
</script>
|
|
15
16
|
|
|
16
|
-
<Table.Head
|
|
17
|
+
<Table.Head
|
|
18
|
+
colspan={header.colSpan}
|
|
19
|
+
style={`width: ${header.getSize()}px; min-width:${header.column.columnDef.minSize}px; max-width:${header.column.columnDef.maxSize}px`}
|
|
20
|
+
>
|
|
17
21
|
{#if !header.isPlaceholder}
|
|
18
22
|
<div class="flex items-center gap-1">
|
|
19
23
|
<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
let value = $state(table.getState().pagination.pageSize.toString());
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
|
-
<div class="flex items-center justify-between
|
|
19
|
+
<div class="flex items-center justify-between py-2">
|
|
20
20
|
<div class="flex-1 text-sm text-muted-foreground">
|
|
21
21
|
{#if table.options.enableRowSelection}
|
|
22
22
|
{table.getFilteredSelectedRowModel().rows.length} of
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.12.
|
|
4
|
+
"version": "0.12.22",
|
|
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.5.6",
|
|
37
|
-
"bits-ui": "1.0.0-next.
|
|
37
|
+
"bits-ui": "1.0.0-next.52",
|
|
38
38
|
"clsx": "^2.1.1",
|
|
39
39
|
"embla-carousel-svelte": "8.3.1",
|
|
40
40
|
"formsnap": "2.0.0-next.1",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"paneforge": "1.0.0-next.1",
|
|
43
43
|
"svelte-sonner": "^0.3.28",
|
|
44
44
|
"tailwind-merge": "^2.5.4",
|
|
45
|
-
"tailwind-variants": "^0.
|
|
45
|
+
"tailwind-variants": "^0.3.0",
|
|
46
46
|
"vaul-svelte": "1.0.0-next.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
@@ -53,26 +53,26 @@
|
|
|
53
53
|
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
54
54
|
"@testing-library/jest-dom": "^6.6.3",
|
|
55
55
|
"@testing-library/svelte": "^5.2.4",
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
57
|
-
"@typescript-eslint/parser": "^8.
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "^8.14.0",
|
|
57
|
+
"@typescript-eslint/parser": "^8.14.0",
|
|
58
58
|
"autoprefixer": "^10.4.20",
|
|
59
59
|
"eslint": "^9.14.0",
|
|
60
60
|
"eslint-config-prettier": "^9.1.0",
|
|
61
61
|
"eslint-plugin-svelte": "^2.46.0",
|
|
62
|
-
"happy-dom": "^15.11.
|
|
62
|
+
"happy-dom": "^15.11.4",
|
|
63
63
|
"lucide-svelte": "^0.456.0",
|
|
64
|
-
"postcss": "^8.4.
|
|
64
|
+
"postcss": "^8.4.49",
|
|
65
65
|
"prettier": "^3.3.3",
|
|
66
|
-
"prettier-plugin-svelte": "^3.2.
|
|
66
|
+
"prettier-plugin-svelte": "^3.2.8",
|
|
67
67
|
"prettier-plugin-tailwindcss": "^0.6.8",
|
|
68
68
|
"publint": "^0.2.12",
|
|
69
|
-
"svelte": "^5.1.
|
|
70
|
-
"svelte-check": "^4.0.
|
|
69
|
+
"svelte": "^5.1.16",
|
|
70
|
+
"svelte-check": "^4.0.7",
|
|
71
71
|
"tailwindcss": "^3.4.14",
|
|
72
72
|
"tailwindcss-animate": "^1.0.7",
|
|
73
73
|
"tslib": "^2.8.1",
|
|
74
74
|
"typescript": "^5.6.3",
|
|
75
|
-
"vite": "^5.4.
|
|
75
|
+
"vite": "^5.4.11",
|
|
76
76
|
"vitest": "^2.1.4",
|
|
77
77
|
"zod": "^3.23.8"
|
|
78
78
|
},
|