@kayord/ui 0.17.2 → 0.17.5
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/action/Action.svelte +14 -0
- package/dist/components/custom/action/Action.svelte.d.ts +4 -0
- package/dist/components/custom/action/Actions.svelte +44 -0
- package/dist/components/custom/action/Actions.svelte.d.ts +4 -0
- package/dist/components/custom/action/index.d.ts +2 -0
- package/dist/components/custom/action/index.js +2 -0
- package/dist/components/custom/action/types.d.ts +25 -0
- package/dist/components/custom/action/types.js +7 -0
- package/dist/components/custom/data-table/DataTable.svelte +2 -0
- package/dist/components/custom/data-table/DataTableFooter.svelte +34 -0
- package/dist/components/custom/data-table/DataTableFooter.svelte.d.ts +21 -0
- package/dist/components/custom/data-table/DataTableHeader.svelte +1 -0
- package/dist/components/custom/data-table/data-table-utils.d.ts +4 -0
- package/dist/components/custom/data-table/data-table-utils.js +29 -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 -0
- package/dist/components/custom/index.js +1 -0
- package/package.json +18 -18
- package/dist/components/custom/data-table/DataTableActions.svelte +0 -28
- package/dist/components/custom/data-table/DataTableActions.svelte.d.ts +0 -6
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { goto } from "$app/navigation";
|
|
3
|
+
import { DropdownMenu } from "../../..";
|
|
4
|
+
import { cn } from "../../../utils";
|
|
5
|
+
import type { ActionType } from "./types";
|
|
6
|
+
|
|
7
|
+
let { text, icon, action, href, class: className }: ActionType = $props();
|
|
8
|
+
|
|
9
|
+
const ActionIcon = icon;
|
|
10
|
+
|
|
11
|
+
const clickAction = href ? () => goto(href) : action;
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<DropdownMenu.Item onclick={clickAction} class={cn(className)}><ActionIcon /> {text}</DropdownMenu.Item>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as DropdownMenu from "../../ui/dropdown-menu";
|
|
3
|
+
import { Button } from "../../ui/button";
|
|
4
|
+
import EllipsisVerticalIcon from "@lucide/svelte/icons/ellipsis-vertical";
|
|
5
|
+
import { isActionGroup, isActionType, type ActionsType } from "./types";
|
|
6
|
+
import Action from "./Action.svelte";
|
|
7
|
+
import { cn } from "../../../utils";
|
|
8
|
+
|
|
9
|
+
let { actions, text, class: className, icon, variant = "ghost" }: ActionsType = $props();
|
|
10
|
+
|
|
11
|
+
const ActionIcon = icon;
|
|
12
|
+
|
|
13
|
+
const size = text ? "default" : "icon";
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<DropdownMenu.Root>
|
|
17
|
+
<DropdownMenu.Trigger>
|
|
18
|
+
<Button {variant} {size} class={cn(className)}>
|
|
19
|
+
{#if ActionIcon}
|
|
20
|
+
<ActionIcon />
|
|
21
|
+
{:else}
|
|
22
|
+
<EllipsisVerticalIcon class="h-4 w-4" />
|
|
23
|
+
{/if}
|
|
24
|
+
{text}
|
|
25
|
+
</Button>
|
|
26
|
+
</DropdownMenu.Trigger>
|
|
27
|
+
<DropdownMenu.Content>
|
|
28
|
+
{#each actions as action}
|
|
29
|
+
{#if isActionType(action)}
|
|
30
|
+
<Action {...action} />
|
|
31
|
+
{:else if isActionGroup(action)}
|
|
32
|
+
{#if action.child}
|
|
33
|
+
{@render action.child?.()}
|
|
34
|
+
{:else}
|
|
35
|
+
<DropdownMenu.Group>
|
|
36
|
+
<DropdownMenu.Label>Actions</DropdownMenu.Label>
|
|
37
|
+
</DropdownMenu.Group>
|
|
38
|
+
{/if}
|
|
39
|
+
{:else}
|
|
40
|
+
<DropdownMenu.Separator />
|
|
41
|
+
{/if}
|
|
42
|
+
{/each}
|
|
43
|
+
</DropdownMenu.Content>
|
|
44
|
+
</DropdownMenu.Root>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { ButtonVariant } from "../../ui/button";
|
|
2
|
+
import { type Icon } from "@lucide/svelte";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
export interface ActionType {
|
|
5
|
+
text: string;
|
|
6
|
+
icon?: typeof Icon;
|
|
7
|
+
action?: (...args: any[]) => void;
|
|
8
|
+
href?: string;
|
|
9
|
+
class?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface ActionGroupType {
|
|
12
|
+
label: string;
|
|
13
|
+
child?: Snippet;
|
|
14
|
+
}
|
|
15
|
+
export interface ActionSeparatorType {
|
|
16
|
+
}
|
|
17
|
+
export declare const isActionType: (action: ActionType | ActionGroupType | ActionSeparatorType) => action is ActionType;
|
|
18
|
+
export declare const isActionGroup: (action: ActionType | ActionGroupType | ActionSeparatorType) => action is ActionGroupType;
|
|
19
|
+
export interface ActionsType {
|
|
20
|
+
actions: Array<ActionType | ActionGroupType | ActionSeparatorType>;
|
|
21
|
+
text?: string;
|
|
22
|
+
icon?: typeof Icon;
|
|
23
|
+
class?: string;
|
|
24
|
+
variant?: ButtonVariant;
|
|
25
|
+
}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import { TableStore } from "./table.svelte";
|
|
12
12
|
import DataTableHeader from "./DataTableHeader.svelte";
|
|
13
13
|
import VisibilitySelect from "./VisibilitySelect.svelte";
|
|
14
|
+
import DataTableFooter from "./DataTableFooter.svelte";
|
|
14
15
|
|
|
15
16
|
interface Props<T> {
|
|
16
17
|
table: TableType<T>;
|
|
@@ -146,6 +147,7 @@
|
|
|
146
147
|
{/each}
|
|
147
148
|
{/if}
|
|
148
149
|
</Table.Body>
|
|
150
|
+
<DataTableFooter {table} />
|
|
149
151
|
</Table.Root>
|
|
150
152
|
{#if isLoading}
|
|
151
153
|
<span in:fade={{ duration: 300 }}>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts" generics="T">
|
|
2
|
+
import { FlexRender, Table } from "../../..";
|
|
3
|
+
import { type Header, type Table as TypeType } from "@tanstack/table-core";
|
|
4
|
+
|
|
5
|
+
interface Props<T> {
|
|
6
|
+
table: TypeType<T>;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let { table }: Props<T> = $props();
|
|
10
|
+
|
|
11
|
+
const hasFooterContent = $derived(
|
|
12
|
+
table
|
|
13
|
+
.getFooterGroups()
|
|
14
|
+
.some((footerGroup) =>
|
|
15
|
+
footerGroup.headers.some((header) => !header.isPlaceholder && header.column.columnDef.footer)
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
{#if hasFooterContent}
|
|
21
|
+
<Table.Footer class="bg-muted/20 border-t-1 font-bold">
|
|
22
|
+
{#each table.getFooterGroups() as footerGroup}
|
|
23
|
+
<Table.Row>
|
|
24
|
+
{#each footerGroup.headers as header}
|
|
25
|
+
<Table.Cell colspan={header.colSpan}>
|
|
26
|
+
{#if !header.isPlaceholder}
|
|
27
|
+
<FlexRender content={header.column.columnDef.footer} context={header.getContext()} />
|
|
28
|
+
{/if}
|
|
29
|
+
</Table.Cell>
|
|
30
|
+
{/each}
|
|
31
|
+
</Table.Row>
|
|
32
|
+
{/each}
|
|
33
|
+
</Table.Footer>
|
|
34
|
+
{/if}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type Table as TypeType } from "@tanstack/table-core";
|
|
2
|
+
interface Props<T> {
|
|
3
|
+
table: TypeType<T>;
|
|
4
|
+
}
|
|
5
|
+
declare class __sveltets_Render<T> {
|
|
6
|
+
props(): Props<T>;
|
|
7
|
+
events(): {};
|
|
8
|
+
slots(): {};
|
|
9
|
+
bindings(): "";
|
|
10
|
+
exports(): {};
|
|
11
|
+
}
|
|
12
|
+
interface $$IsomorphicComponent {
|
|
13
|
+
new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
|
|
14
|
+
$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
|
|
15
|
+
} & ReturnType<__sveltets_Render<T>['exports']>;
|
|
16
|
+
<T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
17
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
18
|
+
}
|
|
19
|
+
declare const DataTableFooter: $$IsomorphicComponent;
|
|
20
|
+
type DataTableFooter<T> = InstanceType<typeof DataTableFooter<T>>;
|
|
21
|
+
export default DataTableFooter;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const sum: <T>(data: T[], columnId: keyof T) => number;
|
|
2
|
+
export declare const min: <T>(data: T[], columnId: keyof T) => number | undefined;
|
|
3
|
+
export declare const max: <T>(data: T[], columnId: keyof T) => number | undefined;
|
|
4
|
+
export declare const uniqueCount: <T>(data: T[], columnId: keyof T) => number;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export const sum = (data, columnId) => {
|
|
2
|
+
return data.reduce((sum, next) => {
|
|
3
|
+
const nextValue = next[columnId];
|
|
4
|
+
return sum + (typeof nextValue === "number" ? nextValue : 0);
|
|
5
|
+
}, 0);
|
|
6
|
+
};
|
|
7
|
+
export const min = (data, columnId) => {
|
|
8
|
+
let min;
|
|
9
|
+
data.forEach((row) => {
|
|
10
|
+
const value = Number(row[columnId]);
|
|
11
|
+
if (value != null && (min > value || (min === undefined && value >= value))) {
|
|
12
|
+
min = value;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
return min;
|
|
16
|
+
};
|
|
17
|
+
export const max = (data, columnId) => {
|
|
18
|
+
let max;
|
|
19
|
+
data.forEach((row) => {
|
|
20
|
+
const value = Number(row[columnId]);
|
|
21
|
+
if (value != null && (max < value || (max === undefined && value >= value))) {
|
|
22
|
+
max = value;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
return max;
|
|
26
|
+
};
|
|
27
|
+
export const uniqueCount = (data, columnId) => {
|
|
28
|
+
return new Set(data.map((d) => d[columnId])).size;
|
|
29
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.17.
|
|
4
|
+
"version": "0.17.5",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -33,44 +33,44 @@
|
|
|
33
33
|
"zod": "^3.23.8"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@internationalized/date": "^3.
|
|
37
|
-
"bits-ui": "1.3.
|
|
36
|
+
"@internationalized/date": "^3.8.0",
|
|
37
|
+
"bits-ui": "1.3.19",
|
|
38
38
|
"clsx": "^2.1.1",
|
|
39
39
|
"embla-carousel-svelte": "8.6.0",
|
|
40
|
-
"formsnap": "2.0.
|
|
40
|
+
"formsnap": "2.0.1",
|
|
41
41
|
"mode-watcher": "^0.5.1",
|
|
42
42
|
"paneforge": "1.0.0-next.5",
|
|
43
43
|
"svelte-sonner": "^0.3.28",
|
|
44
|
-
"tailwind-merge": "^3.
|
|
44
|
+
"tailwind-merge": "^3.2.0",
|
|
45
45
|
"tailwind-variants": "^1.0.0",
|
|
46
46
|
"vaul-svelte": "1.0.0-next.7"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@lucide/svelte": "^0.
|
|
49
|
+
"@lucide/svelte": "^0.488.0",
|
|
50
50
|
"@sveltejs/adapter-auto": "^6.0.0",
|
|
51
|
-
"@sveltejs/kit": "^2.20.
|
|
52
|
-
"@sveltejs/package": "^2.3.
|
|
51
|
+
"@sveltejs/kit": "^2.20.7",
|
|
52
|
+
"@sveltejs/package": "^2.3.11",
|
|
53
53
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
54
|
-
"@tailwindcss/vite": "^4.1.
|
|
54
|
+
"@tailwindcss/vite": "^4.1.4",
|
|
55
55
|
"@testing-library/jest-dom": "^6.6.3",
|
|
56
56
|
"@testing-library/svelte": "^5.2.7",
|
|
57
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
58
|
-
"@typescript-eslint/parser": "^8.
|
|
57
|
+
"@typescript-eslint/eslint-plugin": "^8.30.1",
|
|
58
|
+
"@typescript-eslint/parser": "^8.30.1",
|
|
59
59
|
"eslint": "^9.24.0",
|
|
60
|
-
"eslint-config-prettier": "^10.1.
|
|
60
|
+
"eslint-config-prettier": "^10.1.2",
|
|
61
61
|
"eslint-plugin-svelte": "^3.5.1",
|
|
62
62
|
"happy-dom": "^17.4.4",
|
|
63
63
|
"prettier": "^3.5.3",
|
|
64
64
|
"prettier-plugin-svelte": "^3.3.3",
|
|
65
65
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
66
|
-
"publint": "^0.3.
|
|
67
|
-
"svelte": "^5.
|
|
68
|
-
"svelte-check": "^4.1.
|
|
69
|
-
"tailwindcss": "^4.1.
|
|
66
|
+
"publint": "^0.3.12",
|
|
67
|
+
"svelte": "^5.27.0",
|
|
68
|
+
"svelte-check": "^4.1.6",
|
|
69
|
+
"tailwindcss": "^4.1.4",
|
|
70
70
|
"tslib": "^2.8.1",
|
|
71
71
|
"tw-animate-css": "1.2.5",
|
|
72
72
|
"typescript": "^5.8.3",
|
|
73
|
-
"vite": "^6.
|
|
73
|
+
"vite": "^6.3.0",
|
|
74
74
|
"vitest": "^3.1.1",
|
|
75
75
|
"zod": "^3.24.2"
|
|
76
76
|
},
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"types": "./dist/index.d.ts",
|
|
79
79
|
"main": "./dist/index.js",
|
|
80
80
|
"type": "module",
|
|
81
|
-
"packageManager": "pnpm@10.
|
|
81
|
+
"packageManager": "pnpm@10.8.1+sha512.c50088ba998c67b8ca8c99df8a5e02fd2ae2e2b29aaf238feaa9e124248d3f48f9fb6db2424949ff901cffbb5e0f0cc1ad6aedb602cd29450751d11c35023677",
|
|
82
82
|
"scripts": {
|
|
83
83
|
"dev": "vite dev",
|
|
84
84
|
"build": "vite build && npm run package",
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as DropdownMenu from "../../ui/dropdown-menu";
|
|
3
|
-
import { Button } from "../../ui/button";
|
|
4
|
-
import MoreHorizontalIcon from "@lucide/svelte/icons/ellipsis";
|
|
5
|
-
interface Props {
|
|
6
|
-
id: string;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let { id }: Props = $props();
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<DropdownMenu.Root>
|
|
13
|
-
<DropdownMenu.Trigger>
|
|
14
|
-
<Button variant="ghost" size="icon" class="relative h-8 w-8 p-0">
|
|
15
|
-
<span class="sr-only">Open menu</span>
|
|
16
|
-
<MoreHorizontalIcon class="h-4 w-4" />
|
|
17
|
-
</Button>
|
|
18
|
-
</DropdownMenu.Trigger>
|
|
19
|
-
<DropdownMenu.Content>
|
|
20
|
-
<DropdownMenu.Group>
|
|
21
|
-
<DropdownMenu.Label>Actions</DropdownMenu.Label>
|
|
22
|
-
<DropdownMenu.Item onclick={() => navigator.clipboard.writeText(id)}>Copy payment ID</DropdownMenu.Item>
|
|
23
|
-
</DropdownMenu.Group>
|
|
24
|
-
<DropdownMenu.Separator />
|
|
25
|
-
<DropdownMenu.Item>View customer</DropdownMenu.Item>
|
|
26
|
-
<DropdownMenu.Item>View payment details</DropdownMenu.Item>
|
|
27
|
-
</DropdownMenu.Content>
|
|
28
|
-
</DropdownMenu.Root>
|