simplesvelte 2.4.12 → 2.5.1

package/dist/Select.svelte.d.ts

@@ -21,6 +21,7 @@ type Props = {
     multiple?: boolean;
     error?: string;
     hideOptional?: boolean;
+    dropdownMinWidth?: string;
     zodErrors?: {
         expected: string;
         code: string;

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/dist/styles.css

@@ -1,15 +1,15 @@
-@import 'tailwindcss';
-@plugin "daisyui";
-
-html,
-body {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	background-color: var(--color-base-200);
-}
-
-/* Ensure popover elements are hidden by default - use !important to override menu display:flex */
-[popover]:not(:popover-open) {
-	display: none !important;
-}
+@import 'tailwindcss';
+@plugin "daisyui";
+
+html,
+body {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	background-color: var(--color-base-200);
+}
+
+/* Ensure popover elements are hidden by default - use !important to override menu display:flex */
+[popover]:not(:popover-open) {
+	display: none !important;
+}

package/package.json

@@ -1,69 +1,69 @@
-{
-	"name": "simplesvelte",
-	"version": "2.4.12",
-	"scripts": {
-		"dev": "bun vite dev",
-		"build": "bun vite build && bun run prepack",
-		"preview": "bun vite preview",
-		"prepare": "bun svelte-kit sync || echo ''",
-		"prepack": "bun svelte-kit sync && bun svelte-package  && bun publint",
-		"check": "bun svelte-kit sync && bun svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "bun svelte-kit sync && bun svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "bun prettier --write .",
-		"lint": "bun prettier --check . && bun eslint ."
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"ag-grid-enterprise": "^35.1.0",
-		"svelte": "^5.0.0",
-		"sweetalert2": "^11.26.21"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^2.0.2",
-		"@eslint/js": "^10.0.1",
-		"@sveltejs/adapter-cloudflare": "^7.2.8",
-		"@sveltejs/kit": "^2.53.4",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@tailwindcss/cli": "^4.2.1",
-		"@tailwindcss/vite": "^4.2.1",
-		"@testing-library/svelte": "^5.3.1",
-		"@testing-library/user-event": "^14.6.1",
-		"daisyui": "^5.5.19",
-		"eslint": "^10.0.2",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.0",
-		"globals": "^17.4.0",
-		"jsdom": "^28.1.0",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.5.1",
-		"prettier-plugin-tailwindcss": "^0.7.2",
-		"publint": "^0.3.18",
-		"svelte": "^5.53.7",
-		"svelte-check": "^4.4.4",
-		"tailwindcss": "^4.2.1",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.56.1",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.18"
-	},
-	"keywords": [
-		"svelte"
-	]
-}
+{
+	"name": "simplesvelte",
+	"version": "2.5.1",
+	"scripts": {
+		"dev": "bun vite dev",
+		"build": "bun vite build && bun run prepack",
+		"preview": "bun vite preview",
+		"prepare": "bun svelte-kit sync || echo ''",
+		"prepack": "bun svelte-kit sync && bun svelte-package  && bun publint",
+		"check": "bun svelte-kit sync && bun svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "bun svelte-kit sync && bun svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "bun prettier --write .",
+		"lint": "bun prettier --check . && bun eslint ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"ag-grid-enterprise": "^35.1.0",
+		"svelte": "^5.0.0",
+		"sweetalert2": "^11.26.21"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^10.0.1",
+		"@sveltejs/adapter-cloudflare": "^7.2.8",
+		"@sveltejs/kit": "^2.53.4",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/cli": "^4.2.1",
+		"@tailwindcss/vite": "^4.2.1",
+		"@testing-library/svelte": "^5.3.1",
+		"@testing-library/user-event": "^14.6.1",
+		"daisyui": "^5.5.19",
+		"eslint": "^10.0.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.15.0",
+		"globals": "^17.4.0",
+		"jsdom": "^28.1.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.5.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.18",
+		"svelte": "^5.53.7",
+		"svelte-check": "^4.4.4",
+		"tailwindcss": "^4.2.1",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.56.1",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
+	},
+	"keywords": [
+		"svelte"
+	]
+}