@kayord/ui 0.3.6 → 0.4.0
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 +11 -2
- package/dist/components/custom/data-table/DataTableCheckbox.svelte +5 -0
- package/dist/components/custom/data-table/DataTableCheckbox.svelte.d.ts +17 -0
- package/dist/components/custom/data-table/index.d.ts +1 -0
- package/dist/components/custom/data-table/index.js +1 -0
- package/dist/components/custom/index.d.ts +1 -1
- package/dist/components/custom/index.js +1 -1
- package/dist/components/ui/carousel/carousel-content.svelte +15 -2
- package/dist/components/ui/carousel/carousel-item.svelte +1 -5
- package/dist/components/ui/carousel/carousel-previous.svelte +1 -3
- package/dist/components/ui/carousel/carousel.svelte +11 -14
- package/dist/components/ui/carousel/context.d.ts +3 -0
- package/dist/components/ui/drawer/drawer-description.svelte.d.ts +16 -0
- package/dist/components/ui/drawer/drawer-title.svelte.d.ts +16 -0
- package/dist/components/ui/drawer/index.d.ts +13 -0
- package/dist/components/ui/select/select-trigger.svelte +1 -1
- package/package.json +10 -10
|
@@ -16,6 +16,8 @@ const sortKeys = isSortEnabled ? pluginStates.sort.sortKeys : void 0;
|
|
|
16
16
|
const isPagingEnabled = pluginStates.page != void 0;
|
|
17
17
|
const pageIndex = isPagingEnabled ? pluginStates.page.pageIndex : void 0;
|
|
18
18
|
const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
19
|
+
const isSelectEnabled = pluginStates.select != void 0;
|
|
20
|
+
const selectedDataIds = isSelectEnabled ? pluginStates.select.selectedDataIds : void 0;
|
|
19
21
|
</script>
|
|
20
22
|
|
|
21
23
|
<div class="w-full">
|
|
@@ -49,7 +51,7 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
49
51
|
<Table.Row>
|
|
50
52
|
{#each headerRow.cells as cell (cell.id)}
|
|
51
53
|
<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
|
|
52
|
-
<Table.Head {...attrs}>
|
|
54
|
+
<Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-4">
|
|
53
55
|
{#if isSortEnabled}
|
|
54
56
|
<Button variant="ghost" on:click={props.sort.toggle}>
|
|
55
57
|
<Render of={cell.render()} />
|
|
@@ -93,7 +95,7 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
93
95
|
{/if}
|
|
94
96
|
{#each $pageRows as row (row.id)}
|
|
95
97
|
<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
|
|
96
|
-
<Table.Row {...rowAttrs}>
|
|
98
|
+
<Table.Row {...rowAttrs} data-state={!isSelectEnabled ? false : $selectedDataIds[row.id] && "selected"}>
|
|
97
99
|
{#each row.cells as cell (cell.id)}
|
|
98
100
|
<Subscribe attrs={cell.attrs()} let:attrs>
|
|
99
101
|
<Table.Cell {...attrs}>
|
|
@@ -113,6 +115,12 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
113
115
|
</span>
|
|
114
116
|
{/if}
|
|
115
117
|
</div>
|
|
118
|
+
{#if isSelectEnabled}
|
|
119
|
+
<div class="flex-1 text-sm text-muted-foreground ml-4">
|
|
120
|
+
{Object.keys($selectedDataIds).length} of{" "}
|
|
121
|
+
{$rows.length} row(s) selected.
|
|
122
|
+
</div>
|
|
123
|
+
{/if}
|
|
116
124
|
{#if isPagingEnabled}
|
|
117
125
|
<Pagination.Root count={serverItemCount ?? $rows.length} perPage={$pageSize} let:pages let:currentPage>
|
|
118
126
|
<Pagination.Content>
|
|
@@ -142,6 +150,7 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
|
|
|
142
150
|
</Pagination.Content>
|
|
143
151
|
</Pagination.Root>
|
|
144
152
|
{/if}
|
|
153
|
+
|
|
145
154
|
{#if $$slots.footer}
|
|
146
155
|
<div class="rounded-b-md overflow-hidden">
|
|
147
156
|
<slot name="footer" />
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { Writable } from "svelte/store";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
checked: Writable<boolean>;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {};
|
|
11
|
+
};
|
|
12
|
+
export type DataTableCheckboxProps = typeof __propDef.props;
|
|
13
|
+
export type DataTableCheckboxEvents = typeof __propDef.events;
|
|
14
|
+
export type DataTableCheckboxSlots = typeof __propDef.slots;
|
|
15
|
+
export default class DataTableCheckbox extends SvelteComponent<DataTableCheckboxProps, DataTableCheckboxEvents, DataTableCheckboxSlots> {
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -1,11 +1,24 @@
|
|
|
1
1
|
<script>import { cn } from "../../../utils.js";
|
|
2
2
|
import { getEmblaContext } from "./context.js";
|
|
3
|
+
import emblaCarouselSvelte from "embla-carousel-svelte";
|
|
3
4
|
let className = void 0;
|
|
4
5
|
export { className as class };
|
|
5
|
-
const { orientation } = getEmblaContext("<Carousel.Content/>");
|
|
6
|
+
const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
|
|
6
7
|
</script>
|
|
7
8
|
|
|
8
|
-
<div
|
|
9
|
+
<div
|
|
10
|
+
class="overflow-hidden"
|
|
11
|
+
use:emblaCarouselSvelte={{
|
|
12
|
+
options: {
|
|
13
|
+
container: "[data-embla-container]",
|
|
14
|
+
slides: "[data-embla-slide]",
|
|
15
|
+
...$options,
|
|
16
|
+
axis: $orientation === "horizontal" ? "x" : "y",
|
|
17
|
+
},
|
|
18
|
+
plugins: $plugins,
|
|
19
|
+
}}
|
|
20
|
+
on:emblaInit={onInit}
|
|
21
|
+
>
|
|
9
22
|
<div
|
|
10
23
|
class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
|
|
11
24
|
data-embla-container=""
|
|
@@ -8,11 +8,7 @@ const { orientation } = getEmblaContext("<Carousel.Item/>");
|
|
|
8
8
|
<div
|
|
9
9
|
role="group"
|
|
10
10
|
aria-roledescription="slide"
|
|
11
|
-
class={cn(
|
|
12
|
-
"min-w-0 shrink-0 grow-0 basis-full",
|
|
13
|
-
$orientation === "horizontal" ? "pl-4" : "pt-4",
|
|
14
|
-
className
|
|
15
|
-
)}
|
|
11
|
+
class={cn("min-w-0 shrink-0 grow-0 basis-full", $orientation === "horizontal" ? "pl-4" : "pt-4", className)}
|
|
16
12
|
data-embla-slide=""
|
|
17
13
|
{...$$restProps}
|
|
18
14
|
>
|
|
@@ -14,9 +14,7 @@ const { orientation, canScrollPrev, scrollPrev, handleKeyDown } = getEmblaContex
|
|
|
14
14
|
{size}
|
|
15
15
|
class={cn(
|
|
16
16
|
"absolute h-8 w-8 rounded-full touch-manipulation",
|
|
17
|
-
$orientation === "horizontal"
|
|
18
|
-
? "-left-12 top-1/2 -translate-y-1/2"
|
|
19
|
-
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
17
|
+
$orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
20
18
|
className
|
|
21
19
|
)}
|
|
22
20
|
disabled={!$canScrollPrev}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import { setEmblaContex } from "./context.js";
|
|
1
|
+
<script>import { setEmblaContex } from "./context.js";
|
|
3
2
|
import { cn } from "../../../utils.js";
|
|
4
3
|
import { writable } from "svelte/store";
|
|
5
4
|
import { onDestroy } from "svelte";
|
|
@@ -13,8 +12,14 @@ const apiStore = writable(void 0);
|
|
|
13
12
|
const orientationStore = writable(orientation);
|
|
14
13
|
const canScrollPrev = writable(false);
|
|
15
14
|
const canScrollNext = writable(false);
|
|
15
|
+
const optionsStore = writable(opts);
|
|
16
|
+
const pluginStore = writable(plugins);
|
|
16
17
|
$:
|
|
17
18
|
orientationStore.set(orientation);
|
|
19
|
+
$:
|
|
20
|
+
pluginStore.set(plugins);
|
|
21
|
+
$:
|
|
22
|
+
optionsStore.set(opts);
|
|
18
23
|
function scrollPrev() {
|
|
19
24
|
api?.scrollPrev();
|
|
20
25
|
}
|
|
@@ -49,11 +54,13 @@ setEmblaContex({
|
|
|
49
54
|
orientation: orientationStore,
|
|
50
55
|
canScrollNext,
|
|
51
56
|
canScrollPrev,
|
|
52
|
-
handleKeyDown
|
|
57
|
+
handleKeyDown,
|
|
58
|
+
options: optionsStore,
|
|
59
|
+
plugins: pluginStore,
|
|
60
|
+
onInit
|
|
53
61
|
});
|
|
54
62
|
function onInit(event) {
|
|
55
63
|
api = event.detail;
|
|
56
|
-
console.log(api.slideNodes());
|
|
57
64
|
apiStore.set(api);
|
|
58
65
|
}
|
|
59
66
|
onDestroy(() => {
|
|
@@ -63,16 +70,6 @@ onDestroy(() => {
|
|
|
63
70
|
|
|
64
71
|
<div
|
|
65
72
|
class={cn("relative", className)}
|
|
66
|
-
use:emblaCarouselSvelte={{
|
|
67
|
-
options: {
|
|
68
|
-
container: "[data-embla-container]",
|
|
69
|
-
slides: "[data-embla-slide]",
|
|
70
|
-
...opts,
|
|
71
|
-
axis: $orientationStore === "horizontal" ? "x" : "y"
|
|
72
|
-
},
|
|
73
|
-
plugins
|
|
74
|
-
}}
|
|
75
|
-
on:emblaInit={onInit}
|
|
76
73
|
on:mouseenter
|
|
77
74
|
on:mouseleave
|
|
78
75
|
role="region"
|
|
@@ -21,6 +21,9 @@ type EmblaContext = {
|
|
|
21
21
|
canScrollNext: Readable<boolean>;
|
|
22
22
|
canScrollPrev: Readable<boolean>;
|
|
23
23
|
handleKeyDown: (e: KeyboardEvent) => void;
|
|
24
|
+
options: Writable<CarouselOptions>;
|
|
25
|
+
plugins: Writable<CarouselPlugins>;
|
|
26
|
+
onInit: (e: CustomEvent<CarouselAPI>) => void;
|
|
24
27
|
};
|
|
25
28
|
export declare function setEmblaContex(config: EmblaContext): EmblaContext;
|
|
26
29
|
export declare function getEmblaContext(name?: string): EmblaContext;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: import("bits-ui/dist/bits/dialog/types").DescriptionProps;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {
|
|
8
|
+
default: {};
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export type DrawerDescriptionProps = typeof __propDef.props;
|
|
12
|
+
export type DrawerDescriptionEvents = typeof __propDef.events;
|
|
13
|
+
export type DrawerDescriptionSlots = typeof __propDef.slots;
|
|
14
|
+
export default class DrawerDescription extends SvelteComponent<DrawerDescriptionProps, DrawerDescriptionEvents, DrawerDescriptionSlots> {
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: import("bits-ui/dist/bits/dialog/types").TitleProps;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {
|
|
8
|
+
default: {};
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export type DrawerTitleProps = typeof __propDef.props;
|
|
12
|
+
export type DrawerTitleEvents = typeof __propDef.events;
|
|
13
|
+
export type DrawerTitleSlots = typeof __propDef.slots;
|
|
14
|
+
export default class DrawerTitle extends SvelteComponent<DrawerTitleProps, DrawerTitleEvents, DrawerTitleSlots> {
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="svelte" />
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
|
3
|
+
import Root from "./drawer.svelte";
|
|
4
|
+
import Content from "./drawer-content.svelte";
|
|
5
|
+
import Description from "./drawer-description.svelte";
|
|
6
|
+
import Overlay from "./drawer-overlay.svelte";
|
|
7
|
+
import Footer from "./drawer-footer.svelte";
|
|
8
|
+
import Header from "./drawer-header.svelte";
|
|
9
|
+
import Title from "./drawer-title.svelte";
|
|
10
|
+
declare const Trigger: typeof DrawerPrimitive.Content;
|
|
11
|
+
declare const Portal: typeof import("bits-ui/dist/bits/dialog").Portal;
|
|
12
|
+
declare const Close: typeof DrawerPrimitive.Content;
|
|
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,7 +7,7 @@ export { className as class };
|
|
|
7
7
|
|
|
8
8
|
<SelectPrimitive.Trigger
|
|
9
9
|
class={cn(
|
|
10
|
-
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
10
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 line-clamp-1 truncate",
|
|
11
11
|
className
|
|
12
12
|
)}
|
|
13
13
|
{...$$restProps}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.4.0",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -30,19 +30,19 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@internationalized/date": "^3.5.1",
|
|
33
|
-
"bits-ui": "^0.
|
|
33
|
+
"bits-ui": "^0.16.0",
|
|
34
34
|
"clsx": "^2.1.0",
|
|
35
35
|
"cmdk-sv": "^0.0.13",
|
|
36
|
-
"embla-carousel-svelte": "8.0.0-
|
|
36
|
+
"embla-carousel-svelte": "8.0.0-rc22",
|
|
37
37
|
"formsnap": "^0.4.3",
|
|
38
|
-
"lucide-svelte": "^0.
|
|
39
|
-
"mode-watcher": "^0.
|
|
38
|
+
"lucide-svelte": "^0.320.0",
|
|
39
|
+
"mode-watcher": "^0.2.0",
|
|
40
40
|
"svelte-headless-table": "^0.18.1",
|
|
41
41
|
"svelte-sonner": "^0.3.11",
|
|
42
42
|
"sveltekit-superforms": "^1.13.4",
|
|
43
43
|
"tailwind-merge": "^2.2.1",
|
|
44
44
|
"tailwind-variants": "^0.1.20",
|
|
45
|
-
"vaul-svelte": "^0.1
|
|
45
|
+
"vaul-svelte": "^0.2.1",
|
|
46
46
|
"zod": "^3.22.4"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"@sveltejs/adapter-auto": "^3.1.1",
|
|
51
51
|
"@sveltejs/kit": "^2.5.0",
|
|
52
52
|
"@sveltejs/package": "^2.2.6",
|
|
53
|
-
"@sveltejs/vite-plugin-svelte": "^3.0.
|
|
54
|
-
"@typescript-eslint/eslint-plugin": "^6.
|
|
55
|
-
"@typescript-eslint/parser": "^6.
|
|
53
|
+
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
|
54
|
+
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
|
55
|
+
"@typescript-eslint/parser": "^6.20.0",
|
|
56
56
|
"autoprefixer": "^10.4.17",
|
|
57
57
|
"eslint": "^8.56.0",
|
|
58
58
|
"eslint-config-prettier": "^9.1.0",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"tslib": "^2.6.2",
|
|
69
69
|
"typescript": "^5.3.3",
|
|
70
70
|
"vite": "^5.0.12",
|
|
71
|
-
"vitest": "^1.2.
|
|
71
|
+
"vitest": "^1.2.2"
|
|
72
72
|
},
|
|
73
73
|
"svelte": "./dist/index.js",
|
|
74
74
|
"types": "./dist/index.d.ts",
|