@kayord/ui 0.16.5 → 0.17.1

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

@@ -8,7 +8,7 @@
 	import { ProgressLoading } from "../progress-loading";
 	import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
 	import { cn } from "../../../utils";
-	import { tableStore } from "./table.svelte";
+	import { TableStore } from "./table.svelte";
 	import DataTableHeader from "./DataTableHeader.svelte";
 	import VisibilitySelect from "./VisibilitySelect.svelte";
 
@@ -46,13 +46,17 @@
 		disableUISorting = false,
 	}: Props<T> = $props();
 
+	const tableStore = new TableStore();
 	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
+	let end: HTMLElement | undefined = $state();
 </script>
 
 <div
 	class={cn(
 		"w-full",
-		tableStore.isFullscreen ? "bg-background absolute top-0 left-0 z-10 h-screen transition-all" : "w-full",
+		tableStore.isFullscreen
+			? "bg-background b-0 absolute inset-0 top-0 left-0 z-20 overflow-auto  p-2 transition-all"
+			: "w-full",
 		className
 	)}
 >
@@ -78,7 +82,7 @@
 					{/if}
 					{#if enableFullscreen}
 						<div>
-							<FullscreenModeToggle />
+							<FullscreenModeToggle bind:isFullscreen={tableStore.isFullscreen} {end} />
 						</div>
 					{/if}
 				</div>
@@ -159,3 +163,5 @@
 		</div>
 	{/if}
 </div>
+
+<div bind:this={end} aria-hidden="true"></div>

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

@@ -1,7 +1,27 @@
 <script lang="ts">
 	import Button from "../../ui/button/button.svelte";
 	import { Maximize, Minimize } from "@lucide/svelte";
-	import { tableStore } from "./table.svelte";
+
+	interface Props {
+		isFullscreen: boolean;
+		end?: HTMLElement;
+	}
+
+	let { isFullscreen = $bindable(), end }: Props = $props();
+
+	$effect.pre(() => {
+		if (isFullscreen) {
+			document.body.classList.add("overflow-hidden");
+			document.body.scrollIntoView({ behavior: "smooth", block: "start" });
+		} else {
+			if (!end) {
+				document.body.classList.remove("overflow-hidden");
+				return;
+			}
+			end.scrollIntoView({ behavior: "smooth", block: "start" });
+			document.body.classList.remove("overflow-hidden");
+		}
+	});
 </script>
 
 <Button
@@ -9,15 +29,10 @@
 	variant="outline"
 	size="sm"
 	onclick={() => {
-		tableStore.isFullscreen = !tableStore.isFullscreen;
-		// if ($target == "body") {
-		// 	$target = "#tableContent";
-		// } else {
-		// 	$target = "body";
-		// }
+		isFullscreen = !isFullscreen;
 	}}
 >
-	{#if tableStore.isFullscreen}
+	{#if isFullscreen}
 		<Minimize class="size-5" />
 	{:else}
 		<Maximize class="size-5" />

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

@@ -1,18 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    isFullscreen: boolean;
+    end?: HTMLElement;
 }
-declare const FullscreenModeToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FullscreenModeToggle = InstanceType<typeof FullscreenModeToggle>;
+declare const FullscreenModeToggle: import("svelte").Component<Props, {}, "isFullscreen">;
+type FullscreenModeToggle = ReturnType<typeof FullscreenModeToggle>;
 export default FullscreenModeToggle;

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

@@ -5,7 +5,6 @@
 	import DoubleArrowLeft from "@lucide/svelte/icons/arrow-left";
 	import DoubleArrowRight from "@lucide/svelte/icons/arrow-right";
 	import { Select, Button } from "../../..";
-	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
 		table: Table<T>;

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

@@ -1,2 +1,2 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { ShadTable, createShadTable } from "./shad-table.svelte";
+export { createShadTable } from "./shad-table.svelte";

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

@@ -1,2 +1,2 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { ShadTable, createShadTable } from "./shad-table.svelte";
+export { createShadTable } from "./shad-table.svelte";

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

@@ -1,4 +1,4 @@
-import { type ColumnDef, type RowData, type RowModel, type Table, type TableOptions, type TableState } from "@tanstack/table-core";
+import { type RowData, type RowModel, type Table, type TableOptions, type TableState } from "@tanstack/table-core";
 interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TData>, "getCoreRowModel"> {
     getCoreRowModel?: (table: Table<any>) => () => RowModel<any>;
     enablePaging?: boolean;
@@ -6,13 +6,4 @@ interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TDat
     enableRowSelectionUI?: boolean;
 }
 export declare function createShadTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void): Table<TData>;
-export declare class ShadTable<TData extends RowData> {
-    #private;
-    columns: ColumnDef<TData>[];
-    table: Table<TData>;
-    options: ShadTableOptions<TData>;
-    constructor(initOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void);
-    updateOptions(): void;
-    private features;
-}
 export {};

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

@@ -1,4 +1,4 @@
-import { createTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
+import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
 import DataTableCheckbox from "./DataTableCheckbox.svelte";
 import { renderComponent } from "../../ui";
 export function createShadTable(shadOptions, stateUpdate) {
@@ -13,46 +13,50 @@ export function createShadTable(shadOptions, stateUpdate) {
     // Sorting
     if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
         options.getSortedRowModel = getSortedRowModel();
-        options.onSortingChange = (updater) => {
-            if (typeof updater === "function") {
-                if (options.state?.sorting) {
-                    options.state.sorting = updater(options.state.sorting);
-                }
-                else if (state.sorting) {
-                    state.sorting = updater(state.sorting);
-                }
-            }
-            else {
-                if (options.state?.sorting) {
-                    options.state.sorting = updater;
+        if (!options.onSortingChange) {
+            options.onSortingChange = (updater) => {
+                if (typeof updater === "function") {
+                    if (options.state?.sorting) {
+                        options.state.sorting = updater(options.state.sorting);
+                    }
+                    else if (state.sorting) {
+                        state.sorting = updater(state.sorting);
+                    }
                 }
                 else {
-                    state.sorting = updater;
+                    if (options.state?.sorting) {
+                        options.state.sorting = updater;
+                    }
+                    else {
+                        state.sorting = updater;
+                    }
                 }
-            }
-        };
+            };
+        }
     }
     // Paging
     if ((shadOptions.enablePaging ?? true) && !options.getPaginationRowModel) {
         options.getPaginationRowModel = getPaginationRowModel();
-        options.onPaginationChange = (updater) => {
-            if (typeof updater === "function") {
-                if (options.state?.pagination) {
-                    options.state.pagination = updater(options.state.pagination);
-                }
-                else if (state.pagination) {
-                    state.pagination = updater(state.pagination);
-                }
-            }
-            else {
-                if (options.state?.pagination) {
-                    options.state.pagination = updater;
+        if (!options.onPaginationChange) {
+            options.onPaginationChange = (updater) => {
+                if (typeof updater === "function") {
+                    if (options.state?.pagination) {
+                        options.state.pagination = updater(options.state.pagination);
+                    }
+                    else if (state.pagination) {
+                        state.pagination = updater(state.pagination);
+                    }
                 }
                 else {
-                    state.pagination = updater;
+                    if (options.state?.pagination) {
+                        options.state.pagination = updater;
+                    }
+                    else {
+                        state.pagination = updater;
+                    }
                 }
-            }
-        };
+            };
+        }
     }
     // Row Selection
     if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
@@ -112,6 +116,55 @@ export function createShadTable(shadOptions, stateUpdate) {
             }
         };
     }
+    // Filtering
+    if ((options.enableFilters ?? true) && !options.getFilteredRowModel) {
+        options.getFilteredRowModel = getFilteredRowModel();
+        // Global Filtering
+        if (options.enableGlobalFilter ?? false) {
+            if (!options.onGlobalFilterChange) {
+                options.onGlobalFilterChange = (updater) => {
+                    if (typeof updater === "function") {
+                        if (options.state?.globalFilter) {
+                            options.state.globalFilter = updater(options.state.globalFilter);
+                        }
+                        else if (state.globalFilter) {
+                            state.globalFilter = updater(state.globalFilter);
+                        }
+                    }
+                    else {
+                        if (options.state?.globalFilter) {
+                            options.state.globalFilter = updater;
+                        }
+                        else {
+                            state.globalFilter = updater;
+                        }
+                    }
+                };
+            }
+        }
+        else {
+            if (!options.onColumnFiltersChange) {
+                options.onColumnFiltersChange = (updater) => {
+                    if (typeof updater === "function") {
+                        if (options.state?.columnFilters) {
+                            options.state.columnFilters = updater(options.state.columnFilters);
+                        }
+                        else if (state.columnFilters) {
+                            state.columnFilters = updater(state.columnFilters);
+                        }
+                    }
+                    else {
+                        if (options.state?.columnFilters) {
+                            options.state.columnFilters = updater;
+                        }
+                        else {
+                            state.columnFilters = updater;
+                        }
+                    }
+                };
+            }
+        }
+    }
     const resolvedOptions = mergeObjects({
         state: {},
         onStateChange() { },
@@ -148,153 +201,6 @@ export function createShadTable(shadOptions, stateUpdate) {
     }
     return table;
 }
-export class ShadTable {
-    columns;
-    table;
-    #state = $state({});
-    #stateUpdate;
-    options;
-    constructor(initOptions, stateUpdate) {
-        if (stateUpdate) {
-            this.#stateUpdate = stateUpdate;
-        }
-        else {
-            this.#stateUpdate = (state) => {
-                this.#state = state;
-            };
-        }
-        this.options = initOptions;
-        if (!this.options.getCoreRowModel) {
-            this.options.getCoreRowModel = getCoreRowModel();
-        }
-        if ((this.options.enablePaging ?? true) == false) {
-            this.options.manualPagination = true;
-        }
-        const plainOptions = this.options;
-        const resolvedOptions = mergeObjects({
-            state: {},
-            onStateChange() { },
-            renderFallbackValue: null,
-            mergeOptions: (defaultOptions, options) => {
-                return mergeObjects(defaultOptions, options);
-            },
-        }, plainOptions);
-        this.table = createTable(resolvedOptions);
-        this.#state = this.table.initialState;
-        this.columns = this.options.columns;
-        this.features();
-        this.updateOptions();
-        $effect.pre(() => {
-            this.updateOptions();
-        });
-        $effect(() => {
-            this.#stateUpdate(this.#state);
-        });
-    }
-    updateOptions() {
-        this.table.setOptions((prev) => {
-            return mergeObjects(prev, this.options, {
-                state: mergeObjects(this.#state, this.options.state || {}),
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onStateChange: (updater) => {
-                    if (updater instanceof Function)
-                        this.#state = updater(this.#state);
-                    else
-                        this.#state = mergeObjects(this.#state, updater);
-                    this.options.onStateChange?.(updater);
-                },
-            });
-        });
-    }
-    features() {
-        // Sorting
-        if ((this.options.enableSorting ?? true) && !this.options.getSortedRowModel) {
-            this.options.getSortedRowModel = getSortedRowModel();
-            this.options.onSortingChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (this.options.state?.sorting) {
-                        this.options.state.sorting = updater(this.options.state.sorting);
-                    }
-                    else if (this.#state.sorting) {
-                        this.#state.sorting = updater(this.#state.sorting);
-                    }
-                }
-                else {
-                    if (this.options.state?.sorting) {
-                        this.options.state.sorting = updater;
-                    }
-                    else {
-                        this.#state.sorting = updater;
-                    }
-                }
-            };
-        }
-        // Paging
-        if ((this.options.enablePaging ?? true) && !this.options.getPaginationRowModel) {
-            this.options.getPaginationRowModel = getPaginationRowModel();
-            this.options.onPaginationChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (this.options.state?.pagination) {
-                        this.options.state.pagination = updater(this.options.state.pagination);
-                    }
-                    else if (this.#state.pagination) {
-                        this.#state.pagination = updater(this.#state.pagination);
-                    }
-                }
-                else {
-                    if (this.options.state?.pagination) {
-                        this.options.state.pagination = updater;
-                    }
-                    else {
-                        this.#state.pagination = updater;
-                    }
-                }
-            };
-        }
-        // Row Selection
-        if ((this.options.enableRowSelection ?? true) && !this.options.onRowSelectionChange) {
-            this.options.onRowSelectionChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (this.options.state?.rowSelection) {
-                        this.options.state.rowSelection = updater(this.options.state.rowSelection);
-                    }
-                    else if (this.#state.rowSelection) {
-                        this.#state.rowSelection = updater(this.#state.rowSelection);
-                    }
-                }
-                else {
-                    if (this.options.state?.rowSelection) {
-                        this.options.state.rowSelection = updater;
-                    }
-                    else {
-                        this.#state.rowSelection = updater;
-                    }
-                }
-            };
-        }
-        // Column Visibility
-        if ((this.options.enableVisibility ?? false) && !this.options.onColumnVisibilityChange) {
-            this.options.onColumnVisibilityChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (this.options.state?.columnVisibility) {
-                        this.options.state.columnVisibility = updater(this.options.state.columnVisibility);
-                    }
-                    else if (this.#state.columnVisibility) {
-                        this.#state.columnVisibility = updater(this.#state.columnVisibility);
-                    }
-                }
-                else {
-                    if (this.options.state?.columnVisibility) {
-                        this.options.state.columnVisibility = updater;
-                    }
-                    else {
-                        this.#state.columnVisibility = updater;
-                    }
-                }
-            };
-        }
-    }
-}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function mergeObjects(...sources) {
     const target = {};

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

@@ -1,5 +1,3 @@
-interface TableStoreProps {
+export declare class TableStore {
     isFullscreen: boolean;
 }
-export declare let tableStore: TableStoreProps;
-export {};

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

@@ -1,3 +1,3 @@
-export let tableStore = $state({
-    isFullscreen: false,
-});
+export class TableStore {
+    isFullscreen = $state(false);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.16.5",
+  "version": "0.17.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,19 +34,19 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
-    "bits-ui": "1.3.14",
+    "bits-ui": "1.3.15",
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "8.5.2",
     "formsnap": "2.0.0",
     "mode-watcher": "^0.5.1",
     "paneforge": "1.0.0-next.4",
     "svelte-sonner": "^0.3.28",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^3.1.0",
     "tailwind-variants": "^1.0.0",
     "vaul-svelte": "1.0.0-next.7"
   },
   "devDependencies": {
-    "@lucide/svelte": "^0.485.0",
+    "@lucide/svelte": "^0.486.0",
     "@sveltejs/adapter-auto": "^5.0.0",
     "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
@@ -54,24 +54,24 @@
     "@tailwindcss/vite": "^4.0.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.7",
-    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.3.3",
+    "eslint-plugin-svelte": "^3.4.1",
     "happy-dom": "^17.4.4",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.9",
-    "svelte": "^5.25.3",
+    "svelte": "^5.25.5",
     "svelte-check": "^4.1.5",
     "tailwindcss": "^4.0.17",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.2.5",
     "typescript": "^5.8.2",
-    "vite": "^6.2.3",
-    "vitest": "^3.0.9",
+    "vite": "^6.2.4",
+    "vitest": "^3.1.1",
     "zod": "^3.24.2"
   },
   "svelte": "./dist/index.js",