@kayord/ui 0.2.2 → 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 +8 -7
- 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 +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>import { ArrowDown, ArrowUp } from "lucide-svelte";
|
|
2
|
-
import { Button, Skeleton } from "../../..";
|
|
2
|
+
import { Button, ProgressLoading, Skeleton } from "../../..";
|
|
3
3
|
import { Subscribe, Render } from "svelte-headless-table";
|
|
4
4
|
import * as Table from "../../ui/table";
|
|
5
5
|
import * as Pagination from "../../ui/pagination";
|
|
@@ -31,6 +31,9 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
31
31
|
{#if $$slots.subHeader}
|
|
32
32
|
<slot name="subHeader" />
|
|
33
33
|
{/if}
|
|
34
|
+
{#if isLoading}
|
|
35
|
+
<ProgressLoading class="h-1" />
|
|
36
|
+
{/if}
|
|
34
37
|
<Table.Root {...$tableAttrs} class="table-auto">
|
|
35
38
|
{#if !hideHeader}
|
|
36
39
|
<Table.Header>
|
|
@@ -66,12 +69,10 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
66
69
|
{#if isLoading}
|
|
67
70
|
{#each { length: 5 } as _, i}
|
|
68
71
|
<Table.Row>
|
|
69
|
-
{#each $
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
</Table.Cell>
|
|
74
|
-
</Subscribe>
|
|
72
|
+
{#each $headerRows[0].cells as cell (cell.id)}
|
|
73
|
+
<Table.Cell>
|
|
74
|
+
<Skeleton class="h-4" />
|
|
75
|
+
</Table.Cell>
|
|
75
76
|
{/each}
|
|
76
77
|
</Table.Row>
|
|
77
78
|
{/each}
|
|
@@ -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": {
|
|
@@ -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",
|