@kayord/ui 0.2.1 → 0.2.3
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 +68 -75
- package/dist/components/custom/data-table/DataTable.svelte.d.ts +1 -0
- package/dist/components/custom/data-table/index.d.ts +0 -1
- package/dist/components/custom/data-table/index.js +0 -1
- package/dist/components/custom/index.d.ts +1 -0
- package/dist/components/custom/index.js +1 -0
- package/dist/components/custom/progress-loading/ProgressLoading.svelte +49 -0
- package/dist/components/custom/progress-loading/ProgressLoading.svelte.d.ts +15 -0
- package/dist/components/custom/progress-loading/index.d.ts +1 -0
- package/dist/components/custom/progress-loading/index.js +1 -0
- package/package.json +5 -5
|
@@ -1,30 +1,18 @@
|
|
|
1
|
-
<script>import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { addSortBy, addPagination, addTableFilter, addSelectedRows, addHiddenColumns } from "svelte-headless-table/plugins";
|
|
5
|
-
import { readable } from "svelte/store";
|
|
1
|
+
<script>import { ArrowDown, ArrowUp } from "lucide-svelte";
|
|
2
|
+
import { Button, ProgressLoading, Skeleton } from "../../..";
|
|
3
|
+
import { Subscribe, Render } from "svelte-headless-table";
|
|
6
4
|
import * as Table from "../../ui/table";
|
|
7
|
-
import { DataTableActions } from "./";
|
|
8
|
-
import { Button } from "../../ui/button";
|
|
9
|
-
import * as DropdownMenu from "../../ui/dropdown-menu";
|
|
10
|
-
import { cn } from "../../../utils";
|
|
11
|
-
import { Input } from "../../ui/input";
|
|
12
|
-
import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from "lucide-svelte";
|
|
13
5
|
import * as Pagination from "../../ui/pagination";
|
|
14
6
|
export let tableViewModel;
|
|
15
7
|
export let title = "";
|
|
16
8
|
export let isLoading = false;
|
|
9
|
+
export let hideHeader = false;
|
|
17
10
|
const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows } = tableViewModel;
|
|
18
|
-
$: {
|
|
19
|
-
console.log("TVM", tableViewModel);
|
|
20
|
-
console.log("T", $rows);
|
|
21
|
-
}
|
|
22
11
|
const isSortEnabled = pluginStates.sort != void 0;
|
|
23
12
|
const sortKeys = isSortEnabled ? pluginStates.sort.sortKeys : void 0;
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
$sortKeys && console.log($pageSize, $pageRows.length, $pageCount, $rows.length);
|
|
13
|
+
const isPagingEnabled = pluginStates.page != void 0;
|
|
14
|
+
const pageIndex = isPagingEnabled ? pluginStates.page.pageIndex : void 0;
|
|
15
|
+
const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
28
16
|
</script>
|
|
29
17
|
|
|
30
18
|
<div class="w-full">
|
|
@@ -43,45 +31,48 @@ $:
|
|
|
43
31
|
{#if $$slots.subHeader}
|
|
44
32
|
<slot name="subHeader" />
|
|
45
33
|
{/if}
|
|
34
|
+
{#if isLoading}
|
|
35
|
+
<ProgressLoading class="h-1" />
|
|
36
|
+
{/if}
|
|
46
37
|
<Table.Root {...$tableAttrs} class="table-auto">
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
{
|
|
55
|
-
|
|
38
|
+
{#if !hideHeader}
|
|
39
|
+
<Table.Header>
|
|
40
|
+
{#each $headerRows as headerRow}
|
|
41
|
+
<Subscribe rowAttrs={headerRow.attrs()}>
|
|
42
|
+
<Table.Row>
|
|
43
|
+
{#each headerRow.cells as cell (cell.id)}
|
|
44
|
+
<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
|
|
45
|
+
<Table.Head {...attrs}>
|
|
46
|
+
{#if isSortEnabled}
|
|
47
|
+
<Button variant="ghost" on:click={props.sort.toggle}>
|
|
48
|
+
<Render of={cell.render()} />
|
|
49
|
+
{#each $sortKeys as sortKey}
|
|
50
|
+
{#if sortKey?.id === cell.id && sortKey?.order == "desc"}
|
|
51
|
+
<ArrowDown class="ml-2 h-4 w-4" />
|
|
52
|
+
{:else if sortKey?.id === cell.id && sortKey?.order === "asc"}
|
|
53
|
+
<ArrowUp class="ml-2 h-4 w-4" />
|
|
54
|
+
{/if}
|
|
55
|
+
{/each}
|
|
56
|
+
</Button>
|
|
57
|
+
{:else}
|
|
56
58
|
<Render of={cell.render()} />
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<Render of={cell.render()} />
|
|
67
|
-
{/if}
|
|
68
|
-
</Table.Head>
|
|
69
|
-
</Subscribe>
|
|
70
|
-
{/each}
|
|
71
|
-
</Table.Row>
|
|
72
|
-
</Subscribe>
|
|
73
|
-
{/each}
|
|
74
|
-
</Table.Header>
|
|
59
|
+
{/if}
|
|
60
|
+
</Table.Head>
|
|
61
|
+
</Subscribe>
|
|
62
|
+
{/each}
|
|
63
|
+
</Table.Row>
|
|
64
|
+
</Subscribe>
|
|
65
|
+
{/each}
|
|
66
|
+
</Table.Header>
|
|
67
|
+
{/if}
|
|
75
68
|
<Table.Body {...$tableBodyAttrs}>
|
|
76
69
|
{#if isLoading}
|
|
77
70
|
{#each { length: 5 } as _, i}
|
|
78
71
|
<Table.Row>
|
|
79
|
-
{#each $
|
|
80
|
-
<
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
</Table.Cell>
|
|
84
|
-
</Subscribe>
|
|
72
|
+
{#each $headerRows[0].cells as cell (cell.id)}
|
|
73
|
+
<Table.Cell>
|
|
74
|
+
<Skeleton class="h-4" />
|
|
75
|
+
</Table.Cell>
|
|
85
76
|
{/each}
|
|
86
77
|
</Table.Row>
|
|
87
78
|
{/each}
|
|
@@ -103,29 +94,31 @@ $:
|
|
|
103
94
|
</Table.Body>
|
|
104
95
|
</Table.Root>
|
|
105
96
|
</div>
|
|
106
|
-
|
|
107
|
-
<Pagination.
|
|
108
|
-
<Pagination.
|
|
109
|
-
<Pagination.
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
{#
|
|
113
|
-
|
|
114
|
-
<Pagination.
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<Pagination.
|
|
119
|
-
{page.value}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<Pagination.
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
97
|
+
{#if isPagingEnabled}
|
|
98
|
+
<Pagination.Root count={$rows.length} perPage={$pageSize} let:pages let:currentPage>
|
|
99
|
+
<Pagination.Content>
|
|
100
|
+
<Pagination.Item>
|
|
101
|
+
<Pagination.PrevButton on:click={() => ($pageIndex = $pageIndex - 1)} />
|
|
102
|
+
</Pagination.Item>
|
|
103
|
+
{#each pages as page (page.key)}
|
|
104
|
+
{#if page.type === "ellipsis"}
|
|
105
|
+
<Pagination.Item>
|
|
106
|
+
<Pagination.Ellipsis />
|
|
107
|
+
</Pagination.Item>
|
|
108
|
+
{:else}
|
|
109
|
+
<Pagination.Item>
|
|
110
|
+
<Pagination.Link {page} isActive={currentPage == page.value} on:click={() => ($pageIndex = page.value - 1)}>
|
|
111
|
+
{page.value}
|
|
112
|
+
</Pagination.Link>
|
|
113
|
+
</Pagination.Item>
|
|
114
|
+
{/if}
|
|
115
|
+
{/each}
|
|
116
|
+
<Pagination.Item>
|
|
117
|
+
<Pagination.NextButton on:click={() => ($pageIndex = $pageIndex + 1)} />
|
|
118
|
+
</Pagination.Item>
|
|
119
|
+
</Pagination.Content>
|
|
120
|
+
</Pagination.Root>
|
|
121
|
+
{/if}
|
|
129
122
|
{#if $$slots.footer}
|
|
130
123
|
<div class="rounded-b-md overflow-hidden">
|
|
131
124
|
<slot name="footer" />
|
|
@@ -6,6 +6,7 @@ declare class __sveltets_Render<T extends RowData> {
|
|
|
6
6
|
tableViewModel: TableViewModel<T, import("svelte-headless-table/dist/types/TablePlugin").AnyPlugins>;
|
|
7
7
|
title?: string | undefined;
|
|
8
8
|
isLoading?: boolean | undefined;
|
|
9
|
+
hideHeader?: boolean | undefined;
|
|
9
10
|
};
|
|
10
11
|
events(): {} & {
|
|
11
12
|
[evt: string]: CustomEvent<any>;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>import { Progress as ProgressPrimitive } from "bits-ui";
|
|
2
|
+
import { cn } from "../../../utils";
|
|
3
|
+
let className = void 0;
|
|
4
|
+
export { className as class };
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<ProgressPrimitive.Root class={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...$$restProps}>
|
|
8
|
+
<div class="progressbar-infinite h-full w-full flex-1 bg-primary transition-all" />
|
|
9
|
+
</ProgressPrimitive.Root>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
.progressbar-infinite {
|
|
13
|
+
animation:
|
|
14
|
+
md-progressbar-infinite-1 2s linear infinite,
|
|
15
|
+
md-progressbar-infinite-2 2s linear infinite;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@keyframes md-progressbar-infinite-1 {
|
|
19
|
+
0% {
|
|
20
|
+
transform: translateX(-10%) scaleX(0.1);
|
|
21
|
+
}
|
|
22
|
+
25% {
|
|
23
|
+
transform: translateX(30%) scaleX(0.6);
|
|
24
|
+
}
|
|
25
|
+
50% {
|
|
26
|
+
transform: translateX(100%) scaleX(1);
|
|
27
|
+
}
|
|
28
|
+
100% {
|
|
29
|
+
transform: translateX(100%) scaleX(1);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
@keyframes md-progressbar-infinite-2 {
|
|
33
|
+
0% {
|
|
34
|
+
transform: translateX(-100%) scaleX(1);
|
|
35
|
+
}
|
|
36
|
+
40% {
|
|
37
|
+
transform: translateX(-100%) scaleX(1);
|
|
38
|
+
}
|
|
39
|
+
75% {
|
|
40
|
+
transform: translateX(60%) scaleX(0.35);
|
|
41
|
+
}
|
|
42
|
+
90% {
|
|
43
|
+
transform: translateX(100%) scaleX(0.1);
|
|
44
|
+
}
|
|
45
|
+
100% {
|
|
46
|
+
transform: translateX(100%) scaleX(0.1);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { Progress as ProgressPrimitive } from "bits-ui";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: ProgressPrimitive.Props;
|
|
5
|
+
events: {
|
|
6
|
+
[evt: string]: CustomEvent<any>;
|
|
7
|
+
};
|
|
8
|
+
slots: {};
|
|
9
|
+
};
|
|
10
|
+
export type ProgressLoadingProps = typeof __propDef.props;
|
|
11
|
+
export type ProgressLoadingEvents = typeof __propDef.events;
|
|
12
|
+
export type ProgressLoadingSlots = typeof __propDef.slots;
|
|
13
|
+
export default class ProgressLoading extends SvelteComponent<ProgressLoadingProps, ProgressLoadingEvents, ProgressLoadingSlots> {
|
|
14
|
+
}
|
|
15
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ProgressLoading } from "./ProgressLoading.svelte";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as ProgressLoading } from "./ProgressLoading.svelte";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.3",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"formsnap": "^0.4.2",
|
|
28
28
|
"lucide-svelte": "^0.304.0",
|
|
29
29
|
"mode-watcher": "^0.1.2",
|
|
30
|
+
"svelte-headless-table": "^0.18.1",
|
|
30
31
|
"svelte-sonner": "^0.3.10",
|
|
31
32
|
"sveltekit-superforms": "^1.13.1",
|
|
32
33
|
"tailwind-merge": "^2.2.0",
|
|
33
34
|
"tailwind-variants": "^0.1.20",
|
|
34
35
|
"vaul-svelte": "^0.0.4",
|
|
35
|
-
"svelte-headless-table": "^0.18.1",
|
|
36
36
|
"zod": "^3.22.4"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@sveltejs/adapter-auto": "^3.1.0",
|
|
41
41
|
"@sveltejs/kit": "^2.0.6",
|
|
42
42
|
"@sveltejs/package": "^2.2.5",
|
|
43
|
-
"@sveltejs/vite-plugin-svelte": "^3.0.
|
|
43
|
+
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
|
44
44
|
"@typescript-eslint/eslint-plugin": "^6.17.0",
|
|
45
45
|
"@typescript-eslint/parser": "^6.17.0",
|
|
46
46
|
"autoprefixer": "^10.4.16",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"tailwindcss": "^3.4.0",
|
|
58
58
|
"tslib": "^2.6.2",
|
|
59
59
|
"typescript": "^5.3.3",
|
|
60
|
-
"vite": "^5.0.
|
|
61
|
-
"vitest": "^1.1.
|
|
60
|
+
"vite": "^5.0.11",
|
|
61
|
+
"vitest": "^1.1.3"
|
|
62
62
|
},
|
|
63
63
|
"svelte": "./dist/index.js",
|
|
64
64
|
"types": "./dist/index.d.ts",
|