@kayord/ui 0.2.2 → 0.2.4
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 +17 -8
- package/dist/components/custom/data-table/DataTable.svelte.d.ts +1 -0
- 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/dist/components/ui/drawer/index.d.ts +4 -2
- package/dist/components/ui/input/index.d.ts +2 -0
- package/dist/components/ui/input/input.svelte +2 -0
- package/dist/components/ui/pagination/pagination-next-button.svelte +5 -3
- package/dist/components/ui/pagination/pagination-next-button.svelte.d.ts +3 -1
- package/dist/components/ui/pagination/pagination-prev-button.svelte +4 -2
- package/dist/components/ui/pagination/pagination-prev-button.svelte.d.ts +3 -1
- package/package.json +13 -13
|
@@ -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";
|
|
@@ -7,7 +7,8 @@ export let tableViewModel;
|
|
|
7
7
|
export let title = "";
|
|
8
8
|
export let isLoading = false;
|
|
9
9
|
export let hideHeader = false;
|
|
10
|
-
|
|
10
|
+
export let noDataMessage = "No Data";
|
|
11
|
+
const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows, flatColumns } = tableViewModel;
|
|
11
12
|
const isSortEnabled = pluginStates.sort != void 0;
|
|
12
13
|
const sortKeys = isSortEnabled ? pluginStates.sort.sortKeys : void 0;
|
|
13
14
|
const isPagingEnabled = pluginStates.page != void 0;
|
|
@@ -31,6 +32,9 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
31
32
|
{#if $$slots.subHeader}
|
|
32
33
|
<slot name="subHeader" />
|
|
33
34
|
{/if}
|
|
35
|
+
{#if isLoading}
|
|
36
|
+
<ProgressLoading class="h-1" />
|
|
37
|
+
{/if}
|
|
34
38
|
<Table.Root {...$tableAttrs} class="table-auto">
|
|
35
39
|
{#if !hideHeader}
|
|
36
40
|
<Table.Header>
|
|
@@ -66,16 +70,21 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
66
70
|
{#if isLoading}
|
|
67
71
|
{#each { length: 5 } as _, i}
|
|
68
72
|
<Table.Row>
|
|
69
|
-
{#each
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
</Table.Cell>
|
|
74
|
-
</Subscribe>
|
|
73
|
+
{#each flatColumns as cell}
|
|
74
|
+
<Table.Cell>
|
|
75
|
+
<Skeleton class="h-4" />
|
|
76
|
+
</Table.Cell>
|
|
75
77
|
{/each}
|
|
76
78
|
</Table.Row>
|
|
77
79
|
{/each}
|
|
78
80
|
{:else}
|
|
81
|
+
{#if $rows.length == 0}
|
|
82
|
+
<Table.Row>
|
|
83
|
+
<Table.Cell colspan={flatColumns.length}>
|
|
84
|
+
<div>{noDataMessage}</div>
|
|
85
|
+
</Table.Cell>
|
|
86
|
+
</Table.Row>
|
|
87
|
+
{/if}
|
|
79
88
|
{#each $pageRows as row (row.id)}
|
|
80
89
|
<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
|
|
81
90
|
<Table.Row {...rowAttrs}>
|
|
@@ -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";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/// <reference types="svelte" />
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
|
1
3
|
import Root from "./drawer.svelte";
|
|
2
4
|
import Content from "./drawer-content.svelte";
|
|
3
5
|
import Description from "./drawer-description.svelte";
|
|
@@ -5,7 +7,7 @@ import Overlay from "./drawer-overlay.svelte";
|
|
|
5
7
|
import Footer from "./drawer-footer.svelte";
|
|
6
8
|
import Header from "./drawer-header.svelte";
|
|
7
9
|
import Title from "./drawer-title.svelte";
|
|
8
|
-
declare const Trigger: typeof
|
|
10
|
+
declare const Trigger: typeof DrawerPrimitive.Close;
|
|
9
11
|
declare const Portal: typeof import("bits-ui/dist/bits/dialog").Portal;
|
|
10
|
-
declare const Close: typeof
|
|
12
|
+
declare const Close: typeof DrawerPrimitive.Close;
|
|
11
13
|
export { Root, Content, Description, Overlay, Footer, Header, Title, Trigger, Portal, Close, Root as Drawer, Content as DrawerContent, Description as DrawerDescription, Overlay as DrawerOverlay, Footer as DrawerFooter, Header as DrawerHeader, Title as DrawerTitle, Trigger as DrawerTrigger, Portal as DrawerPortal, Close as DrawerClose };
|
|
@@ -7,6 +7,8 @@ export type InputEvents = {
|
|
|
7
7
|
change: FormInputEvent<Event>;
|
|
8
8
|
click: FormInputEvent<MouseEvent>;
|
|
9
9
|
focus: FormInputEvent<FocusEvent>;
|
|
10
|
+
focusin: FormInputEvent<FocusEvent>;
|
|
11
|
+
focusout: FormInputEvent<FocusEvent>;
|
|
10
12
|
keydown: FormInputEvent<KeyboardEvent>;
|
|
11
13
|
keypress: FormInputEvent<KeyboardEvent>;
|
|
12
14
|
keyup: FormInputEvent<KeyboardEvent>;
|
|
@@ -9,12 +9,14 @@ export { className as class };
|
|
|
9
9
|
<PaginationPrimitive.NextButton asChild let:builder>
|
|
10
10
|
<Button
|
|
11
11
|
variant="ghost"
|
|
12
|
-
class={cn("gap-1
|
|
12
|
+
class={cn("gap-1 pr-2.5", className)}
|
|
13
13
|
builders={[builder]}
|
|
14
14
|
on:click
|
|
15
15
|
{...$$restProps}
|
|
16
16
|
>
|
|
17
|
-
<
|
|
18
|
-
|
|
17
|
+
<slot>
|
|
18
|
+
<span>Next</span>
|
|
19
|
+
<ChevronRight class="h-4 w-4" />
|
|
20
|
+
</slot>
|
|
19
21
|
</Button>
|
|
20
22
|
</PaginationPrimitive.NextButton>
|
|
@@ -2,7 +2,9 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import { Pagination as PaginationPrimitive } from "bits-ui";
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: PaginationPrimitive.NextButtonProps;
|
|
5
|
-
slots: {
|
|
5
|
+
slots: {
|
|
6
|
+
default: {};
|
|
7
|
+
};
|
|
6
8
|
events: {
|
|
7
9
|
click: import("bits-ui").CustomEventHandler<MouseEvent, HTMLDivElement>;
|
|
8
10
|
};
|
|
@@ -14,7 +14,9 @@ export { className as class };
|
|
|
14
14
|
on:click
|
|
15
15
|
{...$$restProps}
|
|
16
16
|
>
|
|
17
|
-
<
|
|
18
|
-
|
|
17
|
+
<slot>
|
|
18
|
+
<ChevronLeft class="h-4 w-4" />
|
|
19
|
+
<span>Previous</span>
|
|
20
|
+
</slot>
|
|
19
21
|
</Button>
|
|
20
22
|
</PaginationPrimitive.PrevButton>
|
|
@@ -2,7 +2,9 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import { Pagination as PaginationPrimitive } from "bits-ui";
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: PaginationPrimitive.PrevButtonProps;
|
|
5
|
-
slots: {
|
|
5
|
+
slots: {
|
|
6
|
+
default: {};
|
|
7
|
+
};
|
|
6
8
|
events: {
|
|
7
9
|
click: import("bits-ui").CustomEventHandler<MouseEvent, HTMLDivElement>;
|
|
8
10
|
};
|
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.4",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -21,28 +21,28 @@
|
|
|
21
21
|
"svelte": "^4.0.0"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"bits-ui": "^0.13.
|
|
24
|
+
"bits-ui": "^0.13.6",
|
|
25
25
|
"clsx": "^2.1.0",
|
|
26
26
|
"cmdk-sv": "^0.0.12",
|
|
27
27
|
"formsnap": "^0.4.2",
|
|
28
|
-
"lucide-svelte": "^0.
|
|
28
|
+
"lucide-svelte": "^0.307.0",
|
|
29
29
|
"mode-watcher": "^0.1.2",
|
|
30
|
-
"svelte-
|
|
31
|
-
"
|
|
30
|
+
"svelte-headless-table": "^0.18.1",
|
|
31
|
+
"svelte-sonner": "^0.3.11",
|
|
32
|
+
"sveltekit-superforms": "^1.13.2",
|
|
32
33
|
"tailwind-merge": "^2.2.0",
|
|
33
34
|
"tailwind-variants": "^0.1.20",
|
|
34
|
-
"vaul-svelte": "^0.0.
|
|
35
|
-
"svelte-headless-table": "^0.18.1",
|
|
35
|
+
"vaul-svelte": "^0.0.6",
|
|
36
36
|
"zod": "^3.22.4"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@playwright/test": "^1.40.1",
|
|
40
40
|
"@sveltejs/adapter-auto": "^3.1.0",
|
|
41
|
-
"@sveltejs/kit": "^2.0
|
|
41
|
+
"@sveltejs/kit": "^2.1.0",
|
|
42
42
|
"@sveltejs/package": "^2.2.5",
|
|
43
43
|
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
|
44
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
45
|
-
"@typescript-eslint/parser": "^6.
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "^6.18.1",
|
|
45
|
+
"@typescript-eslint/parser": "^6.18.1",
|
|
46
46
|
"autoprefixer": "^10.4.16",
|
|
47
47
|
"eslint": "^8.56.0",
|
|
48
48
|
"eslint-config-prettier": "^9.1.0",
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
"publint": "^0.2.7",
|
|
55
55
|
"svelte": "^4.2.8",
|
|
56
56
|
"svelte-check": "^3.6.2",
|
|
57
|
-
"tailwindcss": "^3.4.
|
|
57
|
+
"tailwindcss": "^3.4.1",
|
|
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",
|