@kayord/ui 2.1.2 → 2.1.4

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

@@ -3,14 +3,13 @@
 	import { FlexRender } from "../../ui/data-table";
 	import { Skeleton, Table } from "../../ui";
 	import Pagination from "./Pagination.svelte";
-	import { onMount, type Snippet } from "svelte";
+	import { onMount, untrack, type Snippet } from "svelte";
 	import { fade } from "svelte/transition";
 	import { ProgressLoading } from "../progress-loading";
 	import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
 	import { cn } from "../../../utils";
 	import { TableStore } from "./table.svelte";
 	import DataTableHeader from "./DataTableHeader.svelte";
-	import VisibilitySelect from "./VisibilitySelect.svelte";
 	import DataTableFooter from "./DataTableFooter.svelte";
 	import { beforeNavigate, goto } from "$app/navigation";
 	import {
@@ -18,8 +17,13 @@
 		decodeGlobalFilter,
 		decodePageIndex,
 		decodeSorting,
+		encodeColumnFilters,
+		encodeSorting,
 		encodeTableState,
 	} from "./table-search-params";
+	import { useSearchParams } from "runed/kit";
+	import { defaultSearchParamSchema } from "./types";
+	import DataTableView from "./DataTableView.svelte";
 
 	interface Props<T> {
 		table: TableType<T>;
@@ -60,11 +64,22 @@
 	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
 
 	// Load Default Values from Page Params
+	// onMount(() => {
+	// 	if (table.options.useURLSearchParams) {
+	// 		table.setPageIndex(decodePageIndex());
+	// 		table.setSorting(decodeSorting() ?? []);
+	// 		table.setGlobalFilter(decodeGlobalFilter());
+	// 		table.setColumnFilters(decodeColumnFilters() ?? []);
+	// 	}
+	// });
+
+	const params = useSearchParams(defaultSearchParamSchema, { pushHistory: false });
+	// Load current url search params
 	onMount(() => {
 		if (table.options.useURLSearchParams) {
-			table.setPageIndex(decodePageIndex());
+			table.setGlobalFilter(params.search);
 			table.setSorting(decodeSorting() ?? []);
-			table.setGlobalFilter(decodeGlobalFilter());
+			table.setPageIndex(params.page);
 			table.setColumnFilters(decodeColumnFilters() ?? []);
 		}
 	});
@@ -85,20 +100,33 @@
 		}
 	});
 
-	// Set URL Page Params
+	// Set url search params
 	$effect(() => {
 		if (table.options.useURLSearchParams) {
-			const params = encodeTableState(table.getState());
-			goto(params, {
-				replaceState: true,
-				keepFocus: true,
-				noScroll: true,
-			}).catch(() => {
-				// Ignore navigation errors in test environments
+			const tableState = table.getState();
+			untrack(() => {
+				params.search = tableState.globalFilter;
+				params.page = tableState.pagination.pageIndex;
+				params.sort = encodeSorting(tableState);
+				params.filter = encodeColumnFilters(tableState);
 			});
 		}
 	});
 
+	// Set URL Page Params
+	// $effect(() => {
+	// 	if (table.options.useURLSearchParams) {
+	// 		const params = encodeTableState(table.getState());
+	// 		goto(params, {
+	// 			replaceState: true,
+	// 			keepFocus: true,
+	// 			noScroll: true,
+	// 		}).catch(() => {
+	// 			// Ignore navigation errors in test environments
+	// 		});
+	// 	}
+	// });
+
 	let end: HTMLElement | undefined = $state();
 </script>
 
@@ -128,7 +156,7 @@
 					{/if}
 					{#if enableVisibility}
 						<div>
-							<VisibilitySelect {table} />
+							<DataTableView {table} />
 						</div>
 					{/if}
 					{#if enableFullscreen}
@@ -155,9 +183,9 @@
 		<Table.Root class="table-auto">
 			{#if !hideHeader}
 				<Table.Header>
-					{#each table.getHeaderGroups() as headerGroup}
+					{#each table.getHeaderGroups() as headerGroup (headerGroup)}
 						<Table.Row>
-							{#each headerGroup.headers as header}
+							{#each headerGroup.headers as header (header)}
 								<DataTableHeader {header} {table} {disableUISorting} />
 							{/each}
 						</Table.Row>
@@ -167,9 +195,9 @@
 
 			<Table.Body>
 				{#if isLoading && table.getRowModel().rows.length == 0}
-					{#each { length: 5 } as _, i}
+					{#each { length: 5 } as loadingTemplate (loadingTemplate)}
 						<Table.Row>
-							{#each table.getAllColumns() as _cell}
+							{#each table.getAllColumns() as _cell (_cell)}
 								<Table.Cell>
 									<Skeleton class="h-4" />
 								</Table.Cell>
@@ -184,9 +212,9 @@
 							</Table.Cell>
 						</Table.Row>
 					{/if}
-					{#each table.getRowModel().rows as row}
+					{#each table.getRowModel().rows as row (row)}
 						<Table.Row data-state={row.getIsSelected() && "selected"}>
-							{#each row.getVisibleCells() as cell}
+							{#each row.getVisibleCells() as cell (cell)}
 								<Table.Cell
 									class={cell.column.columnDef.meta?.className}
 									style={`width: ${cell.column.getSize()}px; min-width:${cell.column.columnDef.minSize}px; max-width:${cell.column.columnDef.maxSize}px`}

package/dist/components/custom/{data-grid/DataGridView.svelte.d.ts → data-table/DataTableView.svelte.d.ts}

@@ -24,6 +24,6 @@ interface $$IsomorphicComponent {
     <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const DataGridView: $$IsomorphicComponent;
-type DataGridView<TData> = InstanceType<typeof DataGridView<TData>>;
-export default DataGridView;
+declare const DataTableView: $$IsomorphicComponent;
+type DataTableView<TData> = InstanceType<typeof DataTableView<TData>>;
+export default DataTableView;

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

@@ -1,5 +1,6 @@
 export { default as DataTable } from "./DataTable.svelte";
 export { createShadTable } from "./shad-table.svelte";
+export { createShadTableOld } from "./shad-table-old.svelte";
 export { aggregationFns } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";
 export type { CustomColumnMeta, CustomOptions } from "./types";

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

@@ -1,4 +1,5 @@
 export { default as DataTable } from "./DataTable.svelte";
 export { createShadTable } from "./shad-table.svelte";
+export { createShadTableOld } from "./shad-table-old.svelte";
 export { aggregationFns } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";

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

@@ -0,0 +1,9 @@
+import { type RowData, type RowModel, type Table, type TableOptions } from "@tanstack/table-core";
+interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TData>, "getCoreRowModel"> {
+    getCoreRowModel?: (table: Table<any>) => () => RowModel<any>;
+    enablePaging?: boolean;
+    enableVisibility?: boolean;
+    enableRowSelectionUI?: boolean;
+}
+export declare function createShadTableOld<TData extends RowData>(shadOptions: ShadTableOptions<TData>): Table<TData>;
+export {};

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

@@ -0,0 +1,202 @@
+import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
+import DataTableCheckbox from "./DataTableCheckbox.svelte";
+import { renderComponent } from "../../../data-table";
+import { mergeObjects } from "../../ui/data-table/data-table.svelte";
+export function createShadTableOld(shadOptions) {
+    if (!shadOptions.getCoreRowModel) {
+        shadOptions.getCoreRowModel = getCoreRowModel();
+    }
+    if ((shadOptions.enablePaging ?? true) == false) {
+        shadOptions.manualPagination = true;
+    }
+    if (shadOptions.useURLSearchParams) {
+        shadOptions.autoResetPageIndex = false;
+    }
+    const options = shadOptions;
+    // Features
+    // Sorting
+    if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
+        options.getSortedRowModel = getSortedRowModel();
+        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 {
+                    if (options.state?.sorting) {
+                        options.state.sorting = updater;
+                    }
+                    else {
+                        state.sorting = updater;
+                    }
+                }
+            };
+        }
+    }
+    // Paging
+    if ((shadOptions.enablePaging ?? true) && !options.getPaginationRowModel) {
+        options.getPaginationRowModel = getPaginationRowModel();
+        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 {
+                    if (options.state?.pagination) {
+                        options.state.pagination = updater;
+                    }
+                    else {
+                        state.pagination = updater;
+                    }
+                }
+            };
+        }
+    }
+    // Row Selection
+    if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
+        options.onRowSelectionChange = (updater) => {
+            if (typeof updater === "function") {
+                if (options.state?.rowSelection) {
+                    options.state.rowSelection = updater(options.state.rowSelection);
+                }
+                else if (state.rowSelection) {
+                    state.rowSelection = updater(state.rowSelection);
+                }
+            }
+            else {
+                if (options.state?.rowSelection) {
+                    options.state.rowSelection = updater;
+                }
+                else {
+                    state.rowSelection = updater;
+                }
+            }
+        };
+    }
+    if (options.enableRowSelection && (shadOptions.enableRowSelectionUI ?? true)) {
+        const rowSelectionColumn = {
+            id: "select",
+            header: () => renderComponent(DataTableCheckbox, {
+                checked: table.getIsAllPageRowsSelected(),
+                onCheckedChange: () => table.toggleAllPageRowsSelected(),
+            }),
+            cell: (r) => renderComponent(DataTableCheckbox, {
+                checked: r.row.getIsSelected(),
+                onCheckedChange: () => r.row.toggleSelected(),
+            }),
+            enableResizing: false,
+            enableSorting: false,
+        };
+        options.columns.unshift(rowSelectionColumn);
+    }
+    // Column Visibility
+    if ((shadOptions.enableVisibility ?? false) && !options.onColumnVisibilityChange) {
+        options.onColumnVisibilityChange = (updater) => {
+            if (typeof updater === "function") {
+                if (options.state?.columnVisibility) {
+                    options.state.columnVisibility = updater(options.state.columnVisibility);
+                }
+                else if (state.columnVisibility) {
+                    state.columnVisibility = updater(state.columnVisibility);
+                }
+            }
+            else {
+                if (options.state?.columnVisibility) {
+                    options.state.columnVisibility = updater;
+                }
+                else {
+                    state.columnVisibility = updater;
+                }
+            }
+        };
+    }
+    // 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() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    const updateOptions = (table, state) => {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    };
+    updateOptions(table, state);
+    $effect.pre(() => {
+        updateOptions(table, state);
+    });
+    return table;
+}