simplesvelte 2.4.10 → 2.5.0

package/dist/Grid.svelte

@@ -14,15 +14,25 @@
 
 	type Props = {
 		gridEl?: HTMLDivElement
+		/** Bindable reference to the AG Grid API. Use `bind:gridApi` on the parent. */
+		gridApi?: GridApi
 		gridData?: any[] // Replace with your actual data type
 		gridOptions: GridOptions
+		/**
+		 * localStorage key for automatic grid state persistence (filters, sorts, column widths).
+		 * When set, state is saved on every change and restored on mount.
+		 */
+		stateKey?: string
 		class?: string
 	}
-	let { gridEl = $bindable(), gridData, gridOptions, class: gridClass = 'grow' }: Props = $props()
-
-	// Register modules once
-
-	let gridApi: GridApi | undefined
+	let {
+		gridEl = $bindable(),
+		gridApi = $bindable(),
+		gridData,
+		gridOptions,
+		stateKey,
+		class: gridClass = 'grow',
+	}: Props = $props()
 	let initCheckInterval: ReturnType<typeof setInterval> | undefined
 	let attemptCount = 0
 
@@ -49,10 +59,39 @@
 			console.warn('⚠️ Grid: No license key found. Running in trial mode.')
 		}
 
+		// Wrap onGridReady to expose the gridApi bindable and handle stateKey persistence,
+		// while still calling the user's own onGridReady callback if provided.
+		const userOnGridReady = gridOptions.onGridReady
+
+		// Load saved state upfront — must be in gridConfig.initialState, not applied post-init.
+		let savedState: object | undefined
+		if (stateKey) {
+			try {
+				const raw = localStorage.getItem(stateKey)
+				if (raw) savedState = JSON.parse(raw)
+			} catch {
+				/* ignore parse errors */
+			}
+		}
+
 		const gridConfig = {
 			...gridOptions,
 			theme: themeQuartz,
 			...(gridData !== undefined && { rowData: gridData }),
+			...(savedState !== undefined && { initialState: savedState }),
+			onGridReady: (params: Parameters<NonNullable<GridOptions['onGridReady']>>[0]) => {
+				userOnGridReady?.(params)
+				gridApi = params.api
+				if (stateKey) {
+					params.api.addEventListener('stateUpdated', (e: any) => {
+						try {
+							localStorage.setItem(stateKey, JSON.stringify(e.state))
+						} catch {
+							/* ignore storage errors */
+						}
+					})
+				}
+			},
 		}
 
 		console.log('🎨 Grid: Creating grid instance...')

package/dist/Grid.svelte.d.ts

@@ -1,10 +1,17 @@
-import { type GridOptions } from 'ag-grid-enterprise';
+import { type GridApi, type GridOptions } from 'ag-grid-enterprise';
 type Props = {
     gridEl?: HTMLDivElement;
+    /** Bindable reference to the AG Grid API. Use `bind:gridApi` on the parent. */
+    gridApi?: GridApi;
     gridData?: any[];
     gridOptions: GridOptions;
+    /**
+     * localStorage key for automatic grid state persistence (filters, sorts, column widths).
+     * When set, state is saved on every change and restored on mount.
+     */
+    stateKey?: string;
     class?: string;
 };
-declare const Grid: import("svelte").Component<Props, {}, "gridEl">;
+declare const Grid: import("svelte").Component<Props, {}, "gridEl" | "gridApi">;
 type Grid = ReturnType<typeof Grid>;
 export default Grid;

package/dist/Input.svelte

@@ -1,141 +1,145 @@
-<script lang="ts">
-	import { SvelteDate } from 'svelte/reactivity'
-	import Label from './Label.svelte'
-	type Props = {
-		value?: any
-		name?: string
-		label?: string
-		class?: string
-		required?: boolean
-		disabled?: boolean
-		element?: HTMLElement
-		type?:
-			| 'text'
-			| 'number'
-			| 'password'
-			| 'email'
-			| 'number'
-			| 'tel'
-			| 'url'
-			| 'date'
-			| 'datetime-local'
-			| 'color'
-			| 'file'
-			| 'checkbox'
-		error?: string
-		hideOptional?: boolean
-		zodErrors?: {
-			expected: string
-			code: string
-			path: string[]
-			message: string
-		}[]
-		[x: string]: any
-	}
-	let {
-		value = $bindable(),
-		element = $bindable(),
-		label,
-		type = 'text',
-		name,
-		required,
-		disabled,
-		class: myClass,
-		error,
-		hideOptional,
-		zodErrors,
-		...rest
-	}: Props = $props()
-	function getValue() {
-		if (type == 'date') {
-			if (!value) return ''
-			const dateString = new Date(value).toISOString().split('T')[0]
-			return dateString
-		} else if (type == 'datetime-local') {
-			if (!value) return ''
-			const date = new Date(value)
-			const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
-			return dateString
-		}
-		return value ?? ''
-	}
-	function setValue(newValue: any) {
-		if (type == 'number') {
-			if (isNaN(Number(newValue))) {
-				value = null
-			} else {
-				value = Number(newValue)
-			}
-		} else if (type == 'date') {
-			const date = new SvelteDate(newValue)
-			if (isNaN(date.getTime())) {
-				value = null
-			} else {
-				date.setUTCHours(0, 0, 0, 0)
-				value = date
-			}
-		} else if (type == 'datetime-local') {
-			const date = new SvelteDate(newValue)
-			if (isNaN(date.getTime())) {
-				value = null
-			} else {
-				date.setSeconds(0, 0)
-				value = date
-			}
-		} else {
-			value = newValue
-		}
-	}
-
-	// File input handlers - FileList is readonly
-	function getFiles() {
-		return value
-	}
-	function setFiles(fileList: FileList | null) {
-		// FileList is readonly, so we just set it directly
-		value = fileList
-	}
-
-	let inputClass = $derived.by(() => {
-		if (type == 'file') return 'file-input w-full'
-		if (type == 'checkbox') return 'checkbox  checkbox-lg'
-		return 'input w-full'
-	})
-
-	let showOptional = $derived.by(() => {
-		if (hideOptional) return false
-		return !required && !disabled && type != 'checkbox'
-	})
-
-	const errorText = $derived.by(() => {
-		if (error) return error
-		if (!name) return undefined
-		if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
-		return undefined
-	})
-</script>
-
-<Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
-	{#if type == 'checkbox'}
-		<input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
-	{:else if type == 'file'}
-		<input
-			bind:this={element}
-			{name}
-			type="file"
-			{disabled}
-			{required}
-			class={inputClass}
-			{...rest}
-			bind:files={getFiles, setFiles} />
-	{:else}
-		<input
-			bind:this={element}
-			{type}
-			{disabled}
-			{required}
-			class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
-			{...rest}
-			bind:value={getValue, setValue} />
-	{/if}
-</Label>
+<script lang="ts">
+	import { SvelteDate } from 'svelte/reactivity'
+	import Label from './Label.svelte'
+	type Props = {
+		value?: any
+		name?: string
+		label?: string
+		class?: string
+		required?: boolean
+		disabled?: boolean
+		element?: HTMLElement
+		type?:
+			| 'text'
+			| 'number'
+			| 'password'
+			| 'email'
+			| 'number'
+			| 'tel'
+			| 'url'
+			| 'date'
+			| 'datetime-local'
+			| 'color'
+			| 'file'
+			| 'checkbox'
+		error?: string
+		hideOptional?: boolean
+		zodErrors?: {
+			expected: string
+			code: string
+			path: string[]
+			message: string
+		}[]
+		[x: string]: any
+	}
+	let {
+		value = $bindable(),
+		element = $bindable(),
+		label,
+		type = 'text',
+		name,
+		required,
+		disabled,
+		class: myClass,
+		error,
+		hideOptional,
+		zodErrors,
+		...rest
+	}: Props = $props()
+	function getValue() {
+		if (type == 'date') {
+			if (!value) return ''
+			const dateString = new Date(value).toISOString().split('T')[0]
+			return dateString
+		} else if (type == 'datetime-local') {
+			if (!value) return ''
+			const date = new Date(value)
+			const dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1)
+			return dateString
+		}
+		return value ?? ''
+	}
+	function setValue(newValue: any) {
+		if (type == 'number') {
+			if (isNaN(Number(newValue))) {
+				value = null
+			} else {
+				value = Number(newValue)
+			}
+		} else if (type == 'date') {
+			const date = new SvelteDate(newValue)
+			if (isNaN(date.getTime())) {
+				value = null
+			} else {
+				date.setUTCHours(0, 0, 0, 0)
+				value = date
+			}
+		} else if (type == 'datetime-local') {
+			const date = new SvelteDate(newValue)
+			if (isNaN(date.getTime())) {
+				value = null
+			} else {
+				date.setSeconds(0, 0)
+				value = date
+			}
+		} else {
+			value = newValue
+		}
+	}
+
+	// File input handlers - FileList is readonly
+	function getFiles() {
+		return value
+	}
+	function setFiles(fileList: FileList | null) {
+		// FileList is readonly, so we just set it directly
+		value = fileList
+	}
+
+	let inputClass = $derived.by(() => {
+		if (type == 'file') return 'file-input w-full'
+		if (type == 'checkbox') return 'checkbox  checkbox-lg'
+		return 'input w-full'
+	})
+
+	let showOptional = $derived.by(() => {
+		if (hideOptional) return false
+		return !required && !disabled && type != 'checkbox'
+	})
+
+	const errorText = $derived.by(() => {
+		if (error) return error
+		if (!name) return undefined
+		if (zodErrors) return zodErrors.find((e) => e.path.includes(name))?.message
+		return undefined
+	})
+</script>
+
+{#if type != 'file'}
+	<input type="hidden" {name} value={value ?? ''} />
+{/if}
+
+<Label class={myClass} {label} {name} optional={showOptional} {disabled} error={errorText}>
+	{#if type == 'checkbox'}
+		<input bind:this={element} type="checkbox" {disabled} class={inputClass} {...rest} bind:checked={value} />
+	{:else if type == 'file'}
+		<input
+			bind:this={element}
+			{name}
+			type="file"
+			{disabled}
+			{required}
+			class={inputClass}
+			{...rest}
+			bind:files={getFiles, setFiles} />
+	{:else}
+		<input
+			bind:this={element}
+			{type}
+			{disabled}
+			{required}
+			class="disabled:text-base-content disabled:!border-base-content/20 {inputClass} "
+			{...rest}
+			bind:value={getValue, setValue} />
+	{/if}
+</Label>

package/dist/Select.svelte

@@ -470,6 +470,15 @@
 	}
 </script>
 
+<!-- Data inputs for form submission -->
+{#if multiple && Array.isArray(normalizedValue)}
+	{#each normalizedValue as val, i (val + '-' + i)}
+		<input type="hidden" {name} value={val} />
+	{/each}
+{:else if !multiple && normalizedValue !== undefined && normalizedValue !== null && normalizedValue !== ''}
+	<input type="hidden" {name} value={normalizedValue} />
+{/if}
+
 <Label {label} {name} optional={!required && !hideOptional} class={className} error={errorText}>
 	{#if !disabled}
 		<!-- Trigger button with popover target and anchor positioning -->

package/dist/ag-grid-refactored.d.ts

@@ -496,6 +496,32 @@ export type AGGridQueryConfig<TRecord = any> = {
      * ```
      */
     disableCaseInsensitive?: boolean;
+    /**
+     * Optional: Explicit field type declarations for correct filter coercion.
+     *
+     * Fixes cases where AG Grid sends numeric FK values or booleans as strings inside
+     * set/text filters, which Prisma then rejects or silently mismatches.
+     *
+     * Keys are column IDs exactly as used in AG Grid column definitions (dot-notation supported).
+     *
+     * Supported types:
+     * - `'number'` — coerces set-filter values via `Number()` and text-filter equals to `{ equals: Number(v) }`
+     * - `'boolean'` — forces the boolean path in set filters regardless of value shape
+     * - `'string'` — no-op (default behaviour, useful for explicit documentation)
+     *
+     * @example Eliminate numeric-FK transformWhere workarounds
+     * ```typescript
+     * // Before:
+     * transformWhere: (where) => {
+     *   if (where.locationId?.in) where.locationId = { in: where.locationId.in.map(Number) }
+     *   return where
+     * }
+     *
+     * // After:
+     * fieldTypes: { locationId: 'number', clientId: 'number', isActive: 'boolean' }
+     * ```
+     */
+    fieldTypes?: Record<string, 'number' | 'boolean' | 'string'>;
 };
 /**
  * Creates an AG Grid query handler for server-side data fetching
@@ -707,4 +733,48 @@ export declare const filterConfigs: {
         };
     };
 };
+/**
+ * Creates merged GridOptions for a server-side row model grid.
+ *
+ * Combines `defaultSSRMGridOptions` + `defaultSSRMColDef` + datasource creation into one call.
+ * User overrides are merged on top of defaults; `defaultColDef` is deep-merged so individual
+ * column definition properties can be overridden without replacing the entire object.
+ *
+ * @param fetcher - Remote query function (or custom wrapper function for additional filters)
+ * @param overrides - GridOptions merged on top of defaults (columnDefs, callbacks, etc.)
+ * @param datasourceOptions - Optional options forwarded to `createAGGridDatasource` (onError, debug, etc.)
+ * @returns Merged GridOptions ready to pass to `<Grid {gridOptions} />`
+ *
+ * @example Basic usage
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSSRMOptions, Grid } from 'simplesvelte'
+ *   import { getUsersGrid } from './user.remote'
+ *   import type { GridApi } from 'ag-grid-enterprise'
+ *
+ *   let gridApi = $state<GridApi>()
+ *
+ *   const gridOptions = $derived(createSSRMOptions(getUsersGrid, {
+ *     columnDefs: [
+ *       { field: 'id' },
+ *       { field: 'name', filter: 'agTextColumnFilter' },
+ *       { field: 'department.name', headerName: 'Department', filter: 'agTextColumnFilter' },
+ *     ],
+ *     onRowClicked: (e) => { if (!e.node.group) console.log(e.data) },
+ *   }))
+ * </script>
+ *
+ * <Grid {gridOptions} bind:gridApi stateKey="users-grid" />
+ * ```
+ *
+ * @example With a custom fetcher wrapper (additional filters)
+ * ```svelte
+ * <script lang="ts">
+ *   let workOrderId = $props()
+ *   const fetcher = (req: any) => getNotesByWorkOrderIdGrid({ ...req, workOrderId })
+ *   const gridOptions = $derived(createSSRMOptions(fetcher, { columnDefs: [...] }))
+ * </script>
+ * ```
+ */
+export declare function createSSRMOptions(fetcher: Parameters<typeof createAGGridDatasource>[0], overrides?: import('ag-grid-community').GridOptions, datasourceOptions?: Parameters<typeof createAGGridDatasource>[1]): import('ag-grid-community').GridOptions;
 export {};

package/dist/ag-grid-refactored.js

@@ -357,9 +357,28 @@ function transformForPrisma(input) {
 /**
  * Handles text filters (contains, equals, startsWith, endsWith, etc.)
  */
-function applyTextFilter(where, field, filter, disableCaseInsensitive) {
+function applyTextFilter(where, field, filter, disableCaseInsensitive, fieldType) {
     const type = filter.type;
     const value = filter.filter;
+    // When the field is declared as a number, coerce all text-filter values to numbers.
+    // Text filters don't make semantic sense on numeric fields; treat as equality.
+    if (fieldType === 'number') {
+        switch (type) {
+            case 'blank':
+            case 'empty':
+                where[field] = null;
+                return;
+            case 'notBlank':
+                where[field] = { not: null };
+                return;
+            case 'notEqual':
+                where[field] = { not: Number(value) };
+                return;
+            default:
+                where[field] = { equals: Number(value) };
+                return;
+        }
+    }
     switch (type) {
         case 'equals':
             where[field] = value;
@@ -504,7 +523,7 @@ function applyDateFilter(where, field, filter) {
 /**
  * Handles set filters (multi-select)
  */
-function applySetFilter(where, field, filter) {
+function applySetFilter(where, field, filter, fieldType) {
     const values = filter.values;
     // If values array doesn't exist, skip this filter entirely (no filter applied)
     if (!values)
@@ -514,9 +533,22 @@ function applySetFilter(where, field, filter) {
         where[field] = { in: [] };
         return;
     }
-    // Check if this is a boolean filter
+    // When fieldType is 'number', coerce all values to numbers before the `in` query.
+    // AG Grid sends numeric FK values as strings inside set filters.
+    if (fieldType === 'number') {
+        const converted = values.map(Number);
+        if (converted.length === 1) {
+            where[field] = converted[0];
+        }
+        else {
+            where[field] = { in: converted };
+        }
+        return;
+    }
+    // Check if this is a boolean filter.
+    // fieldType === 'boolean' forces the boolean path regardless of value shape.
     const booleanValues = new Set(['Yes', 'No', 'true', 'false', true, false]);
-    const isBooleanFilter = values.every((v) => booleanValues.has(v));
+    const isBooleanFilter = fieldType === 'boolean' || values.every((v) => booleanValues.has(v));
     if (isBooleanFilter) {
         // Convert to boolean
         const converted = values.map((v) => v === 'Yes' || v === 'true' || v === true);
@@ -536,7 +568,7 @@ function applySetFilter(where, field, filter) {
  * Applies a filter to a field (main entry point)
  * Determines filterType first, then dispatches to appropriate handler
  */
-function applyFilterToField(where, field, filterValue, disableCaseInsensitive) {
+function applyFilterToField(where, field, filterValue, disableCaseInsensitive, fieldType) {
     if (!filterValue || typeof filterValue !== 'object')
         return;
     const filter = filterValue;
@@ -544,7 +576,7 @@ function applyFilterToField(where, field, filterValue, disableCaseInsensitive) {
     const filterType = filter.filterType;
     switch (filterType) {
         case 'text':
-            applyTextFilter(where, field, filter, disableCaseInsensitive);
+            applyTextFilter(where, field, filter, disableCaseInsensitive, fieldType);
             break;
         case 'number':
             applyNumberFilter(where, field, filter);
@@ -553,7 +585,7 @@ function applyFilterToField(where, field, filterValue, disableCaseInsensitive) {
             applyDateFilter(where, field, filter);
             break;
         case 'set':
-            applySetFilter(where, field, filter);
+            applySetFilter(where, field, filter, fieldType);
             break;
         default:
             console.warn('Unknown filter type:', filterType, 'for field:', field, 'filter:', filter);
@@ -665,7 +697,7 @@ function buildWhereClause(request, config, groupKeys, rowGroupCols) {
                 mergeWhereConditions(where, transformed);
             }
             else {
-                applyFilterToField(where, columnId, filterValue, config.disableCaseInsensitive);
+                applyFilterToField(where, columnId, filterValue, config.disableCaseInsensitive, config.fieldTypes?.[columnId]);
             }
         }
     }
@@ -1140,3 +1172,58 @@ export const filterConfigs = {
         },
     },
 };
+// ============================================================================
+// Composite Grid Options Helper
+// ============================================================================
+/**
+ * Creates merged GridOptions for a server-side row model grid.
+ *
+ * Combines `defaultSSRMGridOptions` + `defaultSSRMColDef` + datasource creation into one call.
+ * User overrides are merged on top of defaults; `defaultColDef` is deep-merged so individual
+ * column definition properties can be overridden without replacing the entire object.
+ *
+ * @param fetcher - Remote query function (or custom wrapper function for additional filters)
+ * @param overrides - GridOptions merged on top of defaults (columnDefs, callbacks, etc.)
+ * @param datasourceOptions - Optional options forwarded to `createAGGridDatasource` (onError, debug, etc.)
+ * @returns Merged GridOptions ready to pass to `<Grid {gridOptions} />`
+ *
+ * @example Basic usage
+ * ```svelte
+ * <script lang="ts">
+ *   import { createSSRMOptions, Grid } from 'simplesvelte'
+ *   import { getUsersGrid } from './user.remote'
+ *   import type { GridApi } from 'ag-grid-enterprise'
+ *
+ *   let gridApi = $state<GridApi>()
+ *
+ *   const gridOptions = $derived(createSSRMOptions(getUsersGrid, {
+ *     columnDefs: [
+ *       { field: 'id' },
+ *       { field: 'name', filter: 'agTextColumnFilter' },
+ *       { field: 'department.name', headerName: 'Department', filter: 'agTextColumnFilter' },
+ *     ],
+ *     onRowClicked: (e) => { if (!e.node.group) console.log(e.data) },
+ *   }))
+ * </script>
+ *
+ * <Grid {gridOptions} bind:gridApi stateKey="users-grid" />
+ * ```
+ *
+ * @example With a custom fetcher wrapper (additional filters)
+ * ```svelte
+ * <script lang="ts">
+ *   let workOrderId = $props()
+ *   const fetcher = (req: any) => getNotesByWorkOrderIdGrid({ ...req, workOrderId })
+ *   const gridOptions = $derived(createSSRMOptions(fetcher, { columnDefs: [...] }))
+ * </script>
+ * ```
+ */
+export function createSSRMOptions(fetcher, overrides, datasourceOptions) {
+    const { defaultColDef: overrideColDef, ...restOverrides } = overrides ?? {};
+    return {
+        serverSideDatasource: createAGGridDatasource(fetcher, datasourceOptions),
+        ...defaultSSRMGridOptions,
+        defaultColDef: { ...defaultSSRMColDef, ...overrideColDef },
+        ...restOverrides,
+    };
+}

package/dist/index.d.ts

@@ -6,5 +6,5 @@ export { default as Modal } from './Modal.svelte';
 export { default as Grid } from './Grid.svelte';
 export { Pop } from './pop.js';
 export { clickOutside, FormHelper, RoleHelper as roleHelper, formatDate } from './utils.js';
-export { createAGGridQuery, createAGGridDatasource, saveParams, fetchParams, type AGGridRequest, type AGGridResponse, type ComputedField, type AGGridQueryConfig, agGridRequestSchema, defaultAGGridRequest, defaultSSRMColDef, defaultSSRMGridOptions, filterConfigs, } from './ag-grid-refactored.js';
+export { createAGGridQuery, createAGGridDatasource, createSSRMOptions, saveParams, fetchParams, type AGGridRequest, type AGGridResponse, type ComputedField, type AGGridQueryConfig, agGridRequestSchema, defaultAGGridRequest, defaultSSRMColDef, defaultSSRMGridOptions, filterConfigs, } from './ag-grid-refactored.js';
 import './styles.css';

package/dist/index.js

@@ -9,7 +9,7 @@ export { clickOutside, FormHelper, RoleHelper as roleHelper, formatDate } from '
 // AG Grid Server-Side Row Model API
 export { 
 // Main functions
-createAGGridQuery, createAGGridDatasource, 
+createAGGridQuery, createAGGridDatasource, createSSRMOptions, 
 // Parameter persistence functions
 saveParams, fetchParams, 
 // Zod schema

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "simplesvelte",
-	"version": "2.4.10",
+	"version": "2.5.0",
 	"scripts": {
 		"dev": "bun vite dev",
 		"build": "bun vite build && bun run prepack",