@kayord/ui 1.0.9 → 1.0.11

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

@@ -36,7 +36,6 @@
 		class?: string;
 		headerClass?: string;
 		disableUISorting?: boolean;
-		useQueryParamState?: boolean;
 	}
 
 	let {
@@ -54,31 +53,11 @@
 		class: className,
 		headerClass,
 		disableUISorting = false,
-		useQueryParamState = false,
 	}: Props<T> = $props();
 
 	const tableStore = new TableStore();
 	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
 	let end: HTMLElement | undefined = $state();
-
-	$effect(() => {
-		if (useQueryParamState) {
-			const params = encodeTableState(table.getState());
-			goto(params, {
-				replaceState: true,
-				keepFocus: true,
-				noScroll: true,
-			});
-		}
-	});
-	onMount(() => {
-		if (useQueryParamState) {
-			table.setColumnFilters(decodeColumnFilters());
-			table.setGlobalFilter(decodeGlobalFilter());
-			table.setSorting(decodeSorting());
-			table.setPageIndex(decodePageIndex());
-		}
-	});
 </script>
 
 <div

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

@@ -15,7 +15,6 @@ interface Props<T> {
     class?: string;
     headerClass?: string;
     disableUISorting?: boolean;
-    useQueryParamState?: boolean;
 }
 declare class __sveltets_Render<T> {
     props(): Props<T>;

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

@@ -1,4 +1,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, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";
+export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";

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

@@ -1,4 +1,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, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";
+export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";

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

@@ -1,9 +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;
 }
-export declare function createShadTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>, stateUpdate?: (state: Partial<TableState>) => void): Table<TData>;
+export declare function createShadTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>): Table<TData>;
 export {};

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

@@ -2,7 +2,7 @@ import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowMode
 import DataTableCheckbox from "./DataTableCheckbox.svelte";
 import { renderComponent } from "../../ui";
 import { mergeObjects } from "../../ui/data-table/data-table.svelte";
-export function createShadTable(shadOptions, stateUpdate) {
+export function createShadTable(shadOptions) {
     if (!shadOptions.getCoreRowModel) {
         shadOptions.getCoreRowModel = getCoreRowModel();
     }

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

@@ -1,14 +1,14 @@
 import type { TableState } from "@tanstack/table-core";
-export declare const encodeSorting: (state: TableState) => string;
+export declare const encodeSorting: (state: Partial<TableState>) => string;
 export declare const decodeSorting: () => {
     id: string;
     desc: boolean;
 }[];
-export declare const encodeGlobalFilter: (state: TableState) => any;
+export declare const encodeGlobalFilter: (state: Partial<TableState>) => any;
 export declare const decodeGlobalFilter: () => string;
-export declare const encodePageIndex: (state: TableState) => string;
+export declare const encodePageIndex: (state: Partial<TableState>) => string;
 export declare const decodePageIndex: () => number;
-export declare const encodeColumnFilters: (state: TableState) => string;
+export declare const encodeColumnFilters: (state: Partial<TableState>) => string;
 export declare const decodeColumnFilters: () => {
     id: string;
     value: any;
@@ -19,5 +19,6 @@ interface Options {
     pagination?: boolean;
     columnFilter?: boolean;
 }
-export declare const encodeTableState: (state: TableState, options?: Options, searchParams?: URLSearchParams) => string;
+export declare const decodeTableState: () => Partial<TableState>;
+export declare const encodeTableState: (state: Partial<TableState>, options?: Options, searchParams?: URLSearchParams) => string;
 export {};

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

@@ -21,15 +21,15 @@ export const decodeGlobalFilter = () => {
     return page.url.searchParams.get("globalFilter") ?? "";
 };
 export const encodePageIndex = (state) => {
-    return state.pagination?.pageIndex?.toString() ?? undefined;
+    return state.pagination?.pageIndex?.toString() ?? "";
 };
 export const decodePageIndex = () => {
     return Number(page.url.searchParams.get("page") ?? "0");
 };
 export const encodeColumnFilters = (state) => {
-    return state.columnFilters
+    return (state.columnFilters
         ?.map(({ id, value }) => `${id}.${encodeURIComponent(JSON.stringify(value).replaceAll(".", "%2E"))}`)
-        .join(",");
+        .join(",") ?? "");
 };
 export const decodeColumnFilters = () => {
     return (page.url.searchParams
@@ -48,6 +48,17 @@ export const decodeColumnFilters = () => {
     })
         .filter((x) => x !== null) ?? []);
 };
+export const decodeTableState = () => {
+    return {
+        pagination: {
+            pageIndex: decodePageIndex(),
+            pageSize: 10,
+        },
+        sorting: decodeSorting(),
+        columnFilters: decodeColumnFilters(),
+        globalFilter: decodeGlobalFilter(),
+    };
+};
 export const encodeTableState = (state, options, searchParams) => {
     if (searchParams === undefined) {
         searchParams = new URLSearchParams();
@@ -59,16 +70,16 @@ export const encodeTableState = (state, options, searchParams) => {
     options.globalFilter = options.globalFilter ?? true;
     options.sorting = options.sorting ?? true;
     options.columnFilter = options.columnFilter ?? true;
-    if (options.pagination && state.pagination.pageIndex != 0) {
+    if (options.pagination && state.pagination?.pageIndex != 0) {
         searchParams.set("page", encodePageIndex(state));
     }
     if (options.globalFilter && state.globalFilter?.length > 0) {
         searchParams.set("globalFilter", encodeGlobalFilter(state));
     }
-    if (options.sorting && state.sorting?.length > 0) {
+    if (options.sorting && (state.sorting?.length ?? 0) > 0) {
         searchParams.set("sort", encodeSorting(state));
     }
-    if (options.columnFilter && state.columnFilters?.length > 0) {
+    if (options.columnFilter && (state.columnFilters?.length ?? 0) > 0) {
         searchParams.set("columnFilters", encodeColumnFilters(state));
     }
     return `?${searchParams.toString()}`;

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.9",
+  "version": "1.0.11",
   "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.1",
+    "@sveltejs/package": "^2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@tailwindcss/vite": "^4.1.10",
     "@testing-library/jest-dom": "^6.6.3",