@kayord/ui 1.0.10 → 1.0.12

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

@@ -12,7 +12,7 @@
 	import DataTableHeader from "./DataTableHeader.svelte";
 	import VisibilitySelect from "./VisibilitySelect.svelte";
 	import DataTableFooter from "./DataTableFooter.svelte";
-	import { goto } from "$app/navigation";
+	import { beforeNavigate, goto } from "$app/navigation";
 	import {
 		decodeColumnFilters,
 		decodeGlobalFilter,
@@ -20,6 +20,7 @@
 		decodeSorting,
 		encodeTableState,
 	} from "./table-search-params";
+	import { de } from "zod/v4/locales";
 
 	interface Props<T> {
 		table: TableType<T>;
@@ -57,6 +58,45 @@
 
 	const tableStore = new TableStore();
 	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());
+		}
+	});
+
+	// Reset pageIndex
+	beforeNavigate((navigation) => {
+		if (table.options.useURLSearchParams) {
+			if (Number(navigation.to?.url.searchParams.get("page") ?? "0") > 0) {
+				if (
+					navigation.from?.url.searchParams.get("sort") != navigation.to?.url.searchParams.get("sort") ||
+					navigation.from?.url.searchParams.get("globalFilter") !=
+						navigation.to?.url.searchParams.get("globalFilter") ||
+					navigation.from?.url.searchParams.get("columnFilters") != navigation.to?.url.searchParams.get("columnFilters")
+				) {
+					table.resetPageIndex();
+				}
+			}
+		}
+	});
+
+	// Set URL Page Params
+	$effect(() => {
+		if (table.options.useURLSearchParams) {
+			const params = encodeTableState(table.getState());
+			goto(params, {
+				replaceState: true,
+				keepFocus: true,
+				noScroll: true,
+			});
+		}
+	});
+
 	let end: HTMLElement | undefined = $state();
 </script>
 

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

@@ -2,3 +2,4 @@ export { default as DataTable } from "./DataTable.svelte";
 export { createShadTable } from "./shad-table.svelte";
 export { max, min, sum, uniqueCount } 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/shad-table.svelte.d.ts

@@ -1,10 +1,9 @@
-import { type RowData, type RowModel, type Table, type TableOptions, type TableState } from "@tanstack/table-core";
+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;
-    defaultState?: Partial<TableState>;
 }
 export declare function createShadTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>): Table<TData>;
 export {};

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

@@ -9,6 +9,9 @@ export function createShadTable(shadOptions) {
     if ((shadOptions.enablePaging ?? true) == false) {
         shadOptions.manualPagination = true;
     }
+    if (shadOptions.useURLSearchParams) {
+        shadOptions.autoResetPageIndex = false;
+    }
     const options = shadOptions;
     // Features
     // Sorting
@@ -176,10 +179,6 @@ export function createShadTable(shadOptions) {
     }, options);
     const table = createTable(resolvedOptions);
     let state = $state(table.initialState);
-    // DefaultState
-    if (shadOptions.defaultState) {
-        state = { ...state, ...shadOptions.defaultState };
-    }
     const updateOptions = (table, state) => {
         table.setOptions((prev) => {
             return mergeObjects(prev, options, {

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

@@ -0,0 +1,6 @@
+export interface CustomOptions {
+    useURLSearchParams?: boolean;
+}
+export interface CustomColumnMeta {
+    className?: string;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/avatar/avatar.svelte

@@ -2,11 +2,17 @@
 	import { Avatar as AvatarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable("loading"),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
 </script>
 
 <AvatarPrimitive.Root
 	bind:ref
+	bind:loadingStatus
 	data-slot="avatar"
 	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
 	{...restProps}

package/dist/components/ui/avatar/avatar.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Avatar as AvatarPrimitive } from "bits-ui";
-declare const Avatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref">;
+declare const Avatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref" | "loadingStatus">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "1.0.10",
+  "version": "1.0.12",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@lucide/svelte": "^0.523.0",
     "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.22.0",
-    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/kit": "^2.22.2",
+    "@sveltejs/package": "^2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@tailwindcss/vite": "^4.1.10",
     "@testing-library/jest-dom": "^6.6.3",