@kayord/ui 0.1.0 → 0.2.0

package/dist/components/custom/data-table/DataTable.svelte

@@ -0,0 +1,134 @@
+<script>import { Skeleton } from "../../..";
+import { json } from "@sveltejs/kit";
+import { createTable, Subscribe, Render, createRender, Table as TableT, Column } from "svelte-headless-table";
+import { addSortBy, addPagination, addTableFilter, addSelectedRows, addHiddenColumns } from "svelte-headless-table/plugins";
+import { readable } from "svelte/store";
+import * as Table from "../../ui/table";
+import { DataTableActions } from "./";
+import { Button } from "../../ui/button";
+import * as DropdownMenu from "../../ui/dropdown-menu";
+import { cn } from "../../../utils";
+import { Input } from "../../ui/input";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from "lucide-svelte";
+import * as Pagination from "../../ui/pagination";
+export let tableViewModel;
+export let title = "";
+export let isLoading = false;
+const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows } = tableViewModel;
+$: {
+  console.log("TVM", tableViewModel);
+  console.log("T", $rows);
+}
+const isSortEnabled = pluginStates.sort != void 0;
+const sortKeys = isSortEnabled ? pluginStates.sort.sortKeys : void 0;
+const { hasNextPage, hasPreviousPage, pageIndex, pageCount, pageSize } = pluginStates.page;
+const { filterValue } = pluginStates.filter;
+$:
+  $sortKeys && console.log($pageSize, $pageRows.length, $pageCount, $rows.length);
+</script>
+
+<div class="w-full">
+	<div class="rounded-md border m-2">
+		{#if $$slots.header || title.length > 0}
+			<div class="rounded-t-md overflow-hidden">
+				{#if $$slots.header}
+					<slot name="header" />
+				{:else}
+					<h1 class="text-lg text-center p-2">
+						{title}
+					</h1>
+				{/if}
+			</div>
+		{/if}
+		{#if $$slots.subHeader}
+			<slot name="subHeader" />
+		{/if}
+		<Table.Root {...$tableAttrs} class="table-auto">
+			<Table.Header>
+				{#each $headerRows as headerRow}
+					<Subscribe rowAttrs={headerRow.attrs()}>
+						<Table.Row>
+							{#each headerRow.cells as cell (cell.id)}
+								<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
+									<Table.Head {...attrs} class={cn("[&:has([role=checkbox])]:pl-3")}>
+										{#if isSortEnabled}
+											<Button variant="ghost" on:click={props.sort.toggle}>
+												<Render of={cell.render()} />
+												{#each $sortKeys as sortKey}
+													{#if sortKey?.id === cell.id && sortKey?.order == "desc"}
+														<ArrowDown class="ml-2 h-4 w-4" />
+													{:else if sortKey?.id === cell.id && sortKey?.order === "asc"}
+														<ArrowUp class="ml-2 h-4 w-4" />
+													{/if}
+												{/each}
+											</Button>
+										{:else}
+											<Render of={cell.render()} />
+										{/if}
+									</Table.Head>
+								</Subscribe>
+							{/each}
+						</Table.Row>
+					</Subscribe>
+				{/each}
+			</Table.Header>
+			<Table.Body {...$tableBodyAttrs}>
+				{#if isLoading}
+					{#each { length: 5 } as _, i}
+						<Table.Row>
+							{#each $pageRows[0].cells as cell (cell.id)}
+								<Subscribe attrs={cell.attrs()} let:attrs>
+									<Table.Cell>
+										<Skeleton class="h-4" />
+									</Table.Cell>
+								</Subscribe>
+							{/each}
+						</Table.Row>
+					{/each}
+				{:else}
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<Table.Row {...rowAttrs}>
+								{#each row.cells as cell (cell.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<Table.Cell {...attrs}>
+											<Render of={cell.render()} />
+										</Table.Cell>
+									</Subscribe>
+								{/each}
+							</Table.Row>
+						</Subscribe>
+					{/each}
+				{/if}
+			</Table.Body>
+		</Table.Root>
+	</div>
+	<Pagination.Root count={$rows.length} perPage={$pageSize} let:pages let:currentPage>
+		<Pagination.Content>
+			<Pagination.Item>
+				<Pagination.PrevButton on:click={() => ($pageIndex = $pageIndex - 1)} />
+			</Pagination.Item>
+			{#each pages as page (page.key)}
+				{#if page.type === "ellipsis"}
+					<Pagination.Item>
+						<Pagination.Ellipsis />
+					</Pagination.Item>
+				{:else}
+					<Pagination.Item>
+						<Pagination.Link {page} isActive={currentPage == page.value} on:click={() => ($pageIndex = page.value - 1)}>
+							{page.value}
+						</Pagination.Link>
+					</Pagination.Item>
+				{/if}
+			{/each}
+			<Pagination.Item>
+				<Pagination.NextButton on:click={() => ($pageIndex = $pageIndex + 1)} />
+			</Pagination.Item>
+		</Pagination.Content>
+	</Pagination.Root>
+	{#if $$slots.footer}
+		<div class="rounded-b-md overflow-hidden">
+			<slot name="footer" />
+		</div>
+	{/if}
+</div>

package/dist/components/custom/data-table/DataTable.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type TableViewModel } from "svelte-headless-table";
+type RowData = Record<string, any>;
+declare class __sveltets_Render<T extends RowData> {
+    props(): {
+        tableViewModel: TableViewModel<T, import("svelte-headless-table/dist/types/TablePlugin").AnyPlugins>;
+        title?: string | undefined;
+        isLoading?: boolean | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        header: {};
+        subHeader: {};
+        footer: {};
+    };
+}
+export type DataTableProps<T extends RowData> = ReturnType<__sveltets_Render<T>['props']>;
+export type DataTableEvents<T extends RowData> = ReturnType<__sveltets_Render<T>['events']>;
+export type DataTableSlots<T extends RowData> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class DataTable<T extends RowData> extends SvelteComponent<DataTableProps<T>, DataTableEvents<T>, DataTableSlots<T>> {
+}
+export {};

package/dist/components/custom/data-table/DataTableActions.svelte

@@ -0,0 +1,23 @@
+<script>import * as DropdownMenu from "../../ui/dropdown-menu";
+import { Button } from "../../ui/button";
+import { MoreHorizontal } from "lucide-svelte";
+export let id;
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger asChild let:builder>
+		<Button variant="ghost" builders={[builder]} size="icon" class="relative w-8 h-8 p-0">
+			<span class="sr-only">Open menu</span>
+			<MoreHorizontal class="w-4 h-4" />
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content>
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Actions</DropdownMenu.Label>
+			<DropdownMenu.Item on:click={() => navigator.clipboard.writeText(id)}>Copy payment ID</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item>View customer</DropdownMenu.Item>
+		<DropdownMenu.Item>View payment details</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/custom/data-table/DataTableActions.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableActionsProps = typeof __propDef.props;
+export type DataTableActionsEvents = typeof __propDef.events;
+export type DataTableActionsSlots = typeof __propDef.slots;
+export default class DataTableActions extends SvelteComponent<DataTableActionsProps, DataTableActionsEvents, DataTableActionsSlots> {
+}
+export {};

package/dist/components/custom/data-table/data.d.ts

@@ -0,0 +1,7 @@
+export type Payment = {
+    id: string;
+    amount: number;
+    status: "pending" | "processing" | "success" | "failed";
+    email: string;
+};
+export declare const data: Array<Payment>;

package/dist/components/custom/data-table/data.js

@@ -0,0 +1,410 @@
+export const data = [
+    {
+        id: "6571688d9f0abce385f90f19",
+        amount: 3251.85,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d16c5c39d87365775",
+        amount: 3990.8,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688dabee1f8960a07e79",
+        amount: 3802.42,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d806e36ee570c326c",
+        amount: 3823.47,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688ddcf972ded016aeca",
+        amount: 3355.74,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688da322842d9f5b675e",
+        amount: 2530.82,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d810ec3fcb8e66c50",
+        amount: 1056.29,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d84b2863f0550c31e",
+        amount: 1319.59,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688de4d06ba36da0b2b1",
+        amount: 2289.99,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688dd3d4930e83e980bb",
+        amount: 1511.24,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d9b2850305cbf9806",
+        amount: 1819.05,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d0e2c8d403d9415a0",
+        amount: 1951.76,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688df69ff77326a893f5",
+        amount: 2148.92,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688deccddaa29de2f440",
+        amount: 2012.9,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d448edf3bbdbc5c75",
+        amount: 1943.19,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d81dd591cf6938d1b",
+        amount: 3879.18,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d8f6e9c3423e785b7",
+        amount: 2079.08,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d84bfe2b4524cef0c",
+        amount: 2327.12,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d0c506227be2ed29e",
+        amount: 3005.73,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d3558512f453741e5",
+        amount: 3759.09,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d861e5902ca9c81ce",
+        amount: 1348.46,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688dd14ec6fb48d51555",
+        amount: 2155.21,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688ddab7f441f3b3b707",
+        amount: 2456.19,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d5e9513b4e88c2d22",
+        amount: 2923.2,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d516b86893e68018c",
+        amount: 3191.41,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688ddb067254dac9ab2b",
+        amount: 3847.64,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d39328a179413e29a",
+        amount: 3104.91,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d41c9c2a44423f21e",
+        amount: 2295.64,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688dbe4e3344e7095a5f",
+        amount: 1036.06,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688df832d2beefc2d4b8",
+        amount: 3391.3,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d27d143c06cf7d538",
+        amount: 3109.48,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688df2823cc7272da879",
+        amount: 3822.19,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688de4eb5e94cf60bcd2",
+        amount: 2526.2,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688df199424fd086ff48",
+        amount: 3775.85,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d70ecf0e6272da909",
+        amount: 3522.49,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d6d31ec3cb133046b",
+        amount: 1738.86,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d0e957b5f897ed8ce",
+        amount: 3362.06,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d06d065921d92c32e",
+        amount: 1311.72,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d45b2c5e27d04cf40",
+        amount: 3831.03,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d2cbf8c51474eb602",
+        amount: 1850.78,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d16290d3f20d4daee",
+        amount: 1732.43,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688dcda116e6798d4bae",
+        amount: 3852.99,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d5996339d8c18205b",
+        amount: 2717.96,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d7a3f16b9aec84fa6",
+        amount: 2731.06,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d97b853eb9d7736ac",
+        amount: 1856.39,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d1d714ee82c096662",
+        amount: 2853.75,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688dfe47c72110657d3b",
+        amount: 2532.9,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d3e4ce96490c3bad6",
+        amount: 2962.35,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d77af0b83c0d3f7c6",
+        amount: 3024.45,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d3e1920bb93ac12a2",
+        amount: 2292.58,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d2183f305b6cbed72",
+        amount: 1820.61,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688da48439ee80d276cd",
+        amount: 2544.19,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d15c1368942e23e3a",
+        amount: 2054.55,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d0170dc46f4fcbfe6",
+        amount: 3567.82,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d3c68bef4bca4c670",
+        amount: 2842.55,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d09de886493b05ee0",
+        amount: 3123.12,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d2c572aaa292b6c3f",
+        amount: 1849.11,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d6e4d00a58e20c090",
+        amount: 1010.01,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688df71c1c1f9b472f68",
+        amount: 2064.62,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688de159964144606d23",
+        amount: 1073.91,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d6fe0fa01f2d75bdf",
+        amount: 2239.24,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688de6d27c9852528f3f",
+        amount: 2447.85,
+        status: "success",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d40ae4820a039d25e",
+        amount: 2019.19,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d5da2eb24dc22673f",
+        amount: 1115.44,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d39c99eb24989b518",
+        amount: 3345.75,
+        status: "failed",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d6884c37efcca0e29",
+        amount: 2341.32,
+        status: "processing",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d1ed1c61ba1d4fc93",
+        amount: 2288.04,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+    {
+        id: "6571688d19b99bb0bcff11bd",
+        amount: 1493.28,
+        status: "pending",
+        email: "booneellis@hydrocom.com",
+    },
+];

package/dist/components/custom/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DataTable } from "./DataTable.svelte";
+export { default as DataTableActions } from "./DataTableActions.svelte";

package/dist/components/custom/data-table/index.js

@@ -0,0 +1,2 @@
+export { default as DataTable } from "./DataTable.svelte";
+export { default as DataTableActions } from "./DataTableActions.svelte";

package/dist/components/custom/index.d.ts

@@ -1,2 +1,3 @@
 export { Loader } from "./loader/index.js";
 export { ThemeSwitch } from "./theme-switch/index.js";
+export { DataTable } from "./data-table/index.js";

package/dist/components/custom/index.js

@@ -1,2 +1,3 @@
 export { Loader } from "./loader/index.js";
 export { ThemeSwitch } from "./theme-switch/index.js";
+export { DataTable } from "./data-table/index.js";

package/dist/components/custom/loader/Loader.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { type IconProps } from "lucide-svelte";
 declare const __propDef: {
-    props: IconProps & {
+    props: import("lucide-svelte/dist/types").IconProps & {
         isLoading?: boolean | undefined;
     };
     events: {

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        preventScroll?: boolean | undefined;
+        closeOnEscape?: boolean | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
+        portal?: string | HTMLElement | null | undefined;
+        open?: boolean | undefined;
+        onOpenChange?: import("bits-ui/dist/internal").OnChangeFn<boolean> | undefined;
+        openFocus?: import("bits-ui").FocusProp | undefined;
+        closeFocus?: import("bits-ui").FocusProp | undefined;
+    } & {
+        state?: import("svelte/store").Writable<import("cmdk-sv").State> | undefined;
+        label?: string | undefined;
+        shouldFilter?: boolean | undefined;
+        filter?: ((value: string, search: string) => number) | undefined;
+        value?: string | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+        loop?: boolean | undefined;
+        ids?: Partial<import("cmdk-sv").CommandIds> | undefined;
+    } & import("cmdk-sv/dist/internal").HTMLDivAttributes & {
+        onKeydown?: ((e: KeyboardEvent) => void) | undefined;
+        asChild?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CommandDialogProps = typeof __propDef.props;
+export type CommandDialogEvents = typeof __propDef.events;
+export type CommandDialogSlots = typeof __propDef.slots;
+export default class CommandDialog extends SvelteComponent<CommandDialogProps, CommandDialogEvents, CommandDialogSlots> {
+}
+export {};

package/dist/components/ui/context-menu/context-menu-label.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         asChild?: boolean | undefined;
+        el?: HTMLDivElement | undefined;
     } & import("bits-ui/dist/internal").HTMLDivAttributes & {
         inset?: boolean | undefined;
     };