simplesvelte 2.2.10 → 2.2.12

package/dist/Select.svelte

@@ -48,29 +48,42 @@
 	let detailsOpen = $state(false)
 
 	// Initialize value as array for multiple mode, ensure it's always an array when multiple
-	$effect(() => {
+	// Use derived to avoid timing issues with effects
+	let normalizedValue = $derived.by(() => {
 		if (multiple && !Array.isArray(value)) {
-			value = value ? [value] : []
+			return value ? [value] : []
 		} else if (!multiple && Array.isArray(value)) {
-			value = value.length > 0 ? value[0] : undefined
+			return value.length > 0 ? value[0] : undefined
+		}
+		return value
+	})
+
+	// Sync normalized value back to value prop when it differs
+	$effect(() => {
+		if (normalizedValue !== value) {
+			value = normalizedValue
 		}
 	})
 
 	// For single select mode
 	let selectedItem = $derived.by(() => {
 		if (multiple) return null
-		return items.find((item) => item.value === value)
+		const currentValue = normalizedValue
+		return items.find((item) => item.value === currentValue)
 	})
 	// For multi select mode
 	let selectedItems = $derived.by(() => {
-		if (!multiple || !Array.isArray(value)) return []
-		return items.filter((item) => (value as (string | number)[]).includes(item.value))
+		if (!multiple) return []
+		const currentValue = normalizedValue
+		if (!Array.isArray(currentValue)) return []
+		return items.filter((item) => currentValue.includes(item.value))
 	})
 
 	// Check if an item is selected in multi-select mode
 	function isItemSelected(itemValue: any): boolean {
-		if (!multiple) return itemValue === value
-		return Array.isArray(value) && value.includes(itemValue)
+		if (!multiple) return itemValue === normalizedValue
+		const currentValue = normalizedValue
+		return Array.isArray(currentValue) && currentValue.includes(itemValue)
 	}
 
 	// Toggle item selection in multi-select mode
@@ -79,6 +92,7 @@
 			// Close dropdown and update filter immediately
 			filter = items.find((item) => item.value === itemValue)?.label || ''
 			detailsOpen = false
+			filterMode = 'auto'
 
 			// Wait for DOM update so details closes properly
 			await tick()
@@ -90,20 +104,22 @@
 			return
 		}
 
-		if (!Array.isArray(value)) {
-			value = [itemValue]
-		} else if (value.includes(itemValue)) {
-			value = value.filter((v) => v !== itemValue)
+		// For multiple selection, work with current array state
+		const currentValue = Array.isArray(normalizedValue) ? normalizedValue : []
+		
+		if (currentValue.includes(itemValue)) {
+			value = currentValue.filter((v) => v !== itemValue)
 		} else {
-			value = [...value, itemValue]
+			value = [...currentValue, itemValue]
 		}
 		if (onchange) onchange(value)
 	}
 
 	// Remove specific item from multi-select
 	function removeSelectedItem(itemValue: any) {
-		if (Array.isArray(value)) {
-			value = value.filter((v) => v !== itemValue)
+		const currentValue = normalizedValue
+		if (Array.isArray(currentValue)) {
+			value = currentValue.filter((v) => v !== itemValue)
 			if (onchange) onchange(value)
 		}
 	}
@@ -117,16 +133,31 @@
 	}
 
 	let filter = $state('')
+	let filterMode = $state<'user' | 'auto'>('user') // Track if filter is user-controlled or auto-synced
 
-	// Sync filter with selected item for single select mode
+	// Auto-sync filter for single select when not user-controlled
 	$effect(() => {
-		if (!multiple && selectedItem && !detailsOpen) {
-			filter = selectedItem.label
-		} else if (!multiple && !selectedItem && !detailsOpen) {
-			filter = ''
+		if (!multiple && !detailsOpen && filterMode === 'auto') {
+			if (selectedItem) {
+				filter = selectedItem.label
+			} else {
+				filter = ''
+			}
 		}
 	})
 
+	// Reset filter mode when user starts typing
+	function handleFilterInput() {
+		filterMode = 'user'
+	}
+
+	// Set filter mode to auto when closing dropdown
+	function handleDropdownClose() {
+		if (!multiple) {
+			filterMode = 'auto'
+		}
+	}
+
 	let filteredItems = $derived.by(() => {
 		if (filter.length === 0) return items
 		return items.filter((item) => item.label.toLowerCase().includes(filter.toLowerCase()))
@@ -247,12 +278,12 @@
 </script>
 
 <!-- Data inputs for form submission -->
-{#if multiple && Array.isArray(value)}
-	{#each value as val, i (i)}
+{#if multiple && Array.isArray(normalizedValue)}
+	{#each normalizedValue as val, i (val + '-' + i)}
 		<input type="hidden" {name} value={val} />
 	{/each}
-{:else if !multiple && value !== undefined && value !== null && value !== ''}
-	<input type="hidden" {name} {value} />
+{:else if !multiple && normalizedValue !== undefined && normalizedValue !== null && normalizedValue !== ''}
+	<input type="hidden" {name} value={normalizedValue} />
 {/if}
 
 <Label {label} {name} optional={!required} class={className} error={errorText}>
@@ -269,12 +300,14 @@
 				}
 				console.log('clickOutside')
 				detailsOpen = false
+				handleDropdownClose()
 			}}>
 			<summary
 				class="select h-max min-h-10 w-full min-w-12 cursor-pointer !bg-none pr-1"
 				onclick={() => {
 					searchEL?.focus()
 					filter = ''
+					filterMode = 'user'
 				}}>
 				{#if multiple}
 					<!-- Multi-select display with chips -->
@@ -299,11 +332,12 @@
 							class="h-full outline-0 {detailsOpen ? 'cursor-text' : 'cursor-pointer'}"
 							bind:this={searchEL}
 							bind:value={filter}
+							oninput={handleFilterInput}
 							onclick={() => {
 								detailsOpen = true
 							}}
 							placeholder="Search..."
-							required={required && (!Array.isArray(value) || value.length === 0)} />
+							required={required && (!Array.isArray(normalizedValue) || normalizedValue.length === 0)} />
 					</div>
 				{:else}
 					<!-- Single-select display -->
@@ -312,14 +346,15 @@
 						class="h-full w-full outline-0 {detailsOpen ? 'cursor-text' : 'cursor-pointer'}"
 						bind:this={searchEL}
 						bind:value={filter}
+						oninput={handleFilterInput}
 						onclick={() => {
 							detailsOpen = true
 						}}
 						placeholder={displayText}
-						required={required && !value} />
+						required={required && !normalizedValue} />
 				{/if}
 
-				{#if !required && ((multiple && Array.isArray(value) && value.length > 0) || (!multiple && value))}
+				{#if !required && ((multiple && Array.isArray(normalizedValue) && normalizedValue.length > 0) || (!multiple && normalizedValue))}
 					<button
 						type="button"
 						class="btn btn-sm btn-circle btn-ghost absolute top-1 right-1"
@@ -370,7 +405,7 @@
 						{/if}
 
 						<!-- Render only visible items (headers and options) -->
-						{#each visibleItems.items as entry (entry.type === 'header' ? 'header-' + entry.group : entry.item.value)}
+						{#each visibleItems.items as entry, idx (entry.type === 'header' ? 'header-' + entry.group + '-' + idx : 'option-' + entry.item.value + '-' + idx)}
 							{#if entry.type === 'header'}
 								<li
 									class="bg-base-200 top-0 z-10 flex items-center justify-center px-2 text-lg font-bold text-gray-700"

package/dist/ag-grid-refactored.js

@@ -1032,6 +1032,7 @@ export const defaultSSRMColDef = {
     enableRowGroup: true,
     flex: 1,
     menuTabs: ['filterMenuTab', 'generalMenuTab'],
+    enableCellChangeFlash: true,
 };
 /**
  * Default grid options for SSRM

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, type AGGridRequest, type AGGridResponse, type ComputedField, type AGGridQueryConfig, agGridRequestSchema, defaultSSRMColDef, defaultSSRMGridOptions, filterConfigs, } from './ag-grid-refactored.js';
+export { createAGGridQuery, createAGGridDatasource, 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

@@ -10,8 +10,12 @@ export { clickOutside, FormHelper, RoleHelper as roleHelper, formatDate } from '
 export { 
 // Main functions
 createAGGridQuery, createAGGridDatasource, 
+// Parameter persistence functions
+saveParams, fetchParams, 
 // Zod schema
 agGridRequestSchema, 
+// Default request
+defaultAGGridRequest, 
 // Config helpers
 defaultSSRMColDef, defaultSSRMGridOptions, filterConfigs, } from './ag-grid-refactored.js';
 // Export CSS for consumers

package/dist/powerAppQuery.d.ts

@@ -0,0 +1,398 @@
+import type { AGGridRequest, AGGridResponse } from './ag-grid-refactored.js';
+/**
+ * AG Grid sort model (from AG Grid API)
+ */
+type AGGridSort = {
+    colId: string;
+    sort: 'asc' | 'desc';
+};
+/**
+ * Power Apps Web API OData response format
+ */
+export type PowerAppsODataResponse<TEntity = any> = {
+    '@odata.context': string;
+    '@odata.count'?: number;
+    '@odata.nextLink'?: string;
+    value: TEntity[];
+};
+/**
+ * Power Apps Web API error response format
+ */
+export type PowerAppsError = {
+    error: {
+        code: string;
+        message: string;
+        innererror?: {
+            message: string;
+            type: string;
+            stacktrace: string;
+        };
+    };
+};
+/**
+ * Configuration for Power Apps query builder
+ */
+export type PowerAppsQueryConfig<TEntity = any> = {
+    /** Base URL for the Web API (e.g., "[Organization URI]/api/data/v9.2") */
+    baseUrl: string;
+    /** Entity set name (e.g., "accounts", "contacts") */
+    entitySet: string;
+    /** Optional: HTTP headers (auth, preferences, etc.) */
+    headers?: Record<string, string>;
+    /** Optional: Default columns to select */
+    defaultSelect?: string[];
+    /** Optional: Default sort order */
+    defaultOrderBy?: string;
+    /** Optional: Related entities to expand (simple strings or full ExpandConfig objects) */
+    expand?: (string | ExpandConfig)[];
+    /** Optional: Transform OData response to custom format */
+    transformResponse?: (data: TEntity[]) => TEntity[];
+    /** Optional: Maximum URL length before warning (default: 32768) */
+    maxUrlLength?: number;
+};
+/**
+ * OData query parameters
+ */
+export type ODataQueryParams = {
+    $select?: string;
+    $filter?: string;
+    $orderby?: string;
+    $top?: number;
+    $skip?: number;
+    $count?: boolean;
+    $expand?: string;
+};
+/**
+ * Builds the OData $select query parameter from column selections
+ *
+ * @param columns - Array of column names to select
+ * @returns OData $select string (e.g., "name,revenue,statecode")
+ *
+ * @example
+ * ```typescript
+ * buildODataSelect(['accountid', 'name', 'revenue'])
+ * // Returns: "accountid,name,revenue"
+ *
+ * buildODataSelect(['contactid', 'fullname', 'parentcustomerid_account/name'])
+ * // Returns: "contactid,fullname,parentcustomerid_account/name"
+ * ```
+ */
+export declare function buildODataSelect(columns?: string[]): string | undefined;
+/**
+ * Builds the OData $orderby query parameter from AG Grid sort model
+ *
+ * OData orderby syntax: "field1 asc,field2 desc"
+ *
+ * @param sortModel - AG Grid sort model
+ * @param defaultOrderBy - Fallback sort if no sort model provided
+ * @returns OData $orderby string (e.g., "name asc,revenue desc")
+ *
+ * @example
+ * ```typescript
+ * buildODataOrderBy([
+ *   { colId: 'name', sort: 'asc' },
+ *   { colId: 'revenue', sort: 'desc' }
+ * ])
+ * // Returns: "name asc,revenue desc"
+ * ```
+ */
+export declare function buildODataOrderBy(sortModel?: AGGridSort[], defaultOrderBy?: string): string | undefined;
+/**
+ * Builds the OData $filter query parameter from AG Grid filter model
+ *
+ * Converts AG Grid's filter model to OData filter syntax, supporting:
+ * - Text filters: eq, ne, contains, startswith, endswith
+ * - Number filters: eq, ne, gt, ge, lt, le, inRange
+ * - Date filters: eq, ne, gt, ge, lt, le, inRange
+ * - Set filters: multi-value OR conditions
+ * - Null checks: blank/notBlank
+ *
+ * @param filterModel - AG Grid filter model
+ * @returns OData $filter string
+ *
+ * @example
+ * ```typescript
+ * // Text filter
+ * buildODataFilter({ name: { filterType: 'text', type: 'contains', filter: 'John' } })
+ * // Returns: "contains(name,'John')"
+ *
+ * // Number range
+ * buildODataFilter({
+ *   revenue: { filterType: 'number', type: 'inRange', filter: 1000, filterTo: 5000 }
+ * })
+ * // Returns: "revenue ge 1000 and revenue le 5000"
+ *
+ * // Multiple filters (AND logic)
+ * buildODataFilter({
+ *   name: { filterType: 'text', type: 'contains', filter: 'Corp' },
+ *   revenue: { filterType: 'number', type: 'greaterThan', filter: 10000 }
+ * })
+ * // Returns: "contains(name,'Corp') and revenue gt 10000"
+ *
+ * // Set filter (OR logic for multiple values)
+ * buildODataFilter({
+ *   status: { filterType: 'set', values: ['Active', 'Pending'] }
+ * })
+ * // Returns: "(status eq 'Active' or status eq 'Pending')"
+ * ```
+ */
+export declare function buildODataFilter(filterModel?: Record<string, unknown>): string | undefined;
+/**
+ * Configuration for expanding a related entity
+ */
+export type ExpandConfig = {
+    /** Navigation property name to expand */
+    navigationProperty: string;
+    /** Optional: Columns to select from the expanded entity */
+    select?: string[];
+    /** Optional: Filter for collection-valued navigation properties */
+    filter?: string;
+    /** Optional: Order by for collection-valued navigation properties (not supported with nested expand) */
+    orderBy?: string;
+    /** Optional: Top N records for collection-valued navigation properties (not supported with nested expand) */
+    top?: number;
+    /** Optional: Nested expands */
+    expand?: ExpandConfig[];
+};
+/**
+ * Builds the OData $expand query parameter for joining related tables
+ *
+ * Supports:
+ * - Single-valued navigation properties (many-to-one lookups)
+ * - Collection-valued navigation properties (one-to-many relationships)
+ * - Nested expands (up to recommended limit)
+ * - Expand with $select, $filter, $orderby, $top
+ *
+ * Limitations:
+ * - Max 15 $expand options recommended per query
+ * - $orderby and $top not supported with nested $expand on collections
+ * - Nested $expand not supported with N:N relationships
+ *
+ * @param expands - Array of expand configurations
+ * @returns OData $expand string
+ *
+ * @example Single expand with select
+ * ```typescript
+ * buildODataExpand([
+ *   { navigationProperty: 'primarycontactid', select: ['fullname', 'emailaddress1'] }
+ * ])
+ * // Returns: "primarycontactid($select=fullname,emailaddress1)"
+ * ```
+ *
+ * @example Multiple expands
+ * ```typescript
+ * buildODataExpand([
+ *   { navigationProperty: 'primarycontactid', select: ['fullname'] },
+ *   { navigationProperty: 'createdby', select: ['fullname'] }
+ * ])
+ * // Returns: "primarycontactid($select=fullname),createdby($select=fullname)"
+ * ```
+ *
+ * @example Collection with filter and order
+ * ```typescript
+ * buildODataExpand([
+ *   {
+ *     navigationProperty: 'Account_Tasks',
+ *     select: ['subject', 'createdon'],
+ *     filter: "contains(subject,'Task')",
+ *     orderBy: 'createdon desc',
+ *     top: 10
+ *   }
+ * ])
+ * // Returns: "Account_Tasks($select=subject,createdon;$filter=contains(subject,'Task');$orderby=createdon desc;$top=10)"
+ * ```
+ *
+ * @example Nested expand
+ * ```typescript
+ * buildODataExpand([
+ *   {
+ *     navigationProperty: 'primarycontactid',
+ *     select: ['fullname'],
+ *     expand: [
+ *       { navigationProperty: 'createdby', select: ['fullname'] }
+ *     ]
+ *   }
+ * ])
+ * // Returns: "primarycontactid($select=fullname;$expand=createdby($select=fullname))"
+ * ```
+ */
+export declare function buildODataExpand(expands?: ExpandConfig[]): string | undefined;
+/**
+ * Simplified expand builder for basic use cases
+ * Use this when you just need to expand navigation properties with optional column selection
+ *
+ * @param navigationProperties - Array of navigation property names or objects with select
+ * @returns OData $expand string
+ *
+ * @example
+ * ```typescript
+ * buildSimpleExpand(['primarycontactid', 'createdby'])
+ * // Returns: "primarycontactid,createdby"
+ *
+ * buildSimpleExpand([
+ *   'primarycontactid',
+ *   { navigationProperty: 'createdby', select: ['fullname'] }
+ * ])
+ * // Returns: "primarycontactid,createdby($select=fullname)"
+ * ```
+ */
+export declare function buildSimpleExpand(navigationProperties?: (string | {
+    navigationProperty: string;
+    select?: string[];
+})[]): string | undefined;
+/**
+ * Creates a Power Apps query handler for server-side data fetching
+ *
+ * This is the main API for querying Power Apps Web API. It accepts AG Grid requests
+ * and returns data in AG Grid response format, handling all OData translation automatically.
+ *
+ * @param config - Power Apps query configuration
+ * @returns Function that processes AG Grid requests and returns responses
+ *
+ * @example Basic usage
+ * ```typescript
+ * const accountsQuery = createPowerAppsQuery({
+ *   baseUrl: 'https://org.crm.dynamics.com/api/data/v9.2',
+ *   entitySet: 'accounts',
+ *   headers: {
+ *     'Authorization': 'Bearer YOUR_TOKEN',
+ *     'Prefer': 'odata.include-annotations="*"'
+ *   },
+ *   defaultSelect: ['accountid', 'name', 'revenue']
+ * })
+ *
+ * const response = await accountsQuery(agGridRequest)
+ * // Returns: { rows: [...], lastRow: 1000 }
+ * ```
+ *
+ * @example With related data
+ * ```typescript
+ * const contactsQuery = createPowerAppsQuery({
+ *   baseUrl: 'https://org.crm.dynamics.com/api/data/v9.2',
+ *   entitySet: 'contacts',
+ *   expand: [
+ *     { navigationProperty: 'parentcustomerid_account', select: ['name'] }
+ *   ]
+ * })
+ * ```
+ *
+ * @example With transformation
+ * ```typescript
+ * const query = createPowerAppsQuery({
+ *   baseUrl: 'https://org.crm.dynamics.com/api/data/v9.2',
+ *   entitySet: 'accounts',
+ *   transformResponse: (data) => data.map(item => ({
+ *     id: item.accountid,
+ *     name: item.name
+ *   }))
+ * })
+ * ```
+ */
+export declare function createPowerAppsQuery<TEntity = any>(config: PowerAppsQueryConfig<TEntity>): (request: AGGridRequest) => Promise<AGGridResponse<TEntity>>;
+/**
+ * Fetches the next page using the @odata.nextLink URL
+ *
+ * Use this to implement manual pagination when you need to fetch additional pages
+ * beyond what AG Grid requests automatically.
+ *
+ * @param nextLink - The @odata.nextLink URL from a previous response
+ * @param headers - Headers to include in the request (auth, etc.)
+ * @returns The next page of data
+ *
+ * @example
+ * ```typescript
+ * const firstPage = await accountsQuery(agGridRequest)
+ *
+ * // If there's more data, fetch the next page
+ * if (firstPage.nextLink) {
+ *   const secondPage = await fetchNextPage(firstPage.nextLink, {
+ *     'Authorization': 'Bearer YOUR_TOKEN'
+ *   })
+ * }
+ * ```
+ */
+export declare function fetchNextPage<TEntity = any>(nextLink: string, headers?: Record<string, string>): Promise<PowerAppsODataResponse<TEntity>>;
+/**
+ * Extended response type that includes pagination information
+ */
+export type PowerAppsQueryResult<TEntity = any> = AGGridResponse<TEntity> & {
+    /** Next page link if more data available */
+    nextLink?: string;
+    /** Total count of records matching the filter */
+    totalCount?: number;
+    /** Raw OData context information */
+    odataContext?: string;
+};
+/**
+ * Enhanced query function that returns additional metadata
+ *
+ * Use this when you need access to pagination links and other OData metadata
+ *
+ * @param config - Power Apps query configuration
+ * @returns Function that processes requests and returns enhanced responses
+ *
+ * @example
+ * ```typescript
+ * const query = createPowerAppsQueryWithMetadata({
+ *   baseUrl: 'https://org.crm.dynamics.com/api/data/v9.2',
+ *   entitySet: 'accounts'
+ * })
+ *
+ * const result = await query(agGridRequest)
+ * console.log(`Got ${result.rows.length} rows, total: ${result.totalCount}`)
+ *
+ * if (result.nextLink) {
+ *   console.log('More data available at:', result.nextLink)
+ * }
+ * ```
+ */
+export declare function createPowerAppsQueryWithMetadata<TEntity = any>(config: PowerAppsQueryConfig<TEntity>): (request: AGGridRequest) => Promise<PowerAppsQueryResult<TEntity>>;
+/**
+ * Utility to fetch all pages of data (use with caution for large datasets)
+ *
+ * This will continue fetching pages until no more data is available.
+ * Be careful with large datasets as this can consume significant memory and time.
+ *
+ * @param queryFn - The query function created by createPowerAppsQueryWithMetadata
+ * @param request - Initial AG Grid request
+ * @param maxPages - Optional limit on number of pages to fetch (default: unlimited)
+ * @returns All rows across all pages
+ *
+ * @example
+ * ```typescript
+ * const query = createPowerAppsQueryWithMetadata({
+ *   baseUrl: 'https://org.crm.dynamics.com/api/data/v9.2',
+ *   entitySet: 'accounts'
+ * })
+ *
+ * // Fetch up to 10 pages (1000 records if pageSize is 100)
+ * const allData = await fetchAllPages(query, agGridRequest, 10)
+ * console.log(`Fetched ${allData.length} total records`)
+ * ```
+ */
+export declare function fetchAllPages<TEntity = any>(queryFn: (request: AGGridRequest) => Promise<PowerAppsQueryResult<TEntity>>, request: AGGridRequest, maxPages?: number): Promise<TEntity[]>;
+export {};
+/**
+ * Main exports:
+ *
+ * Query Builders:
+ * - createPowerAppsQuery() - Main query function (returns AG Grid format)
+ * - createPowerAppsQueryWithMetadata() - Enhanced query with pagination metadata
+ *
+ * Helper Functions:
+ * - buildODataSelect() - Build $select clause
+ * - buildODataOrderBy() - Build $orderby clause
+ * - buildODataFilter() - Build $filter clause (from AG Grid filters)
+ * - buildODataExpand() - Build $expand clause
+ * - buildSimpleExpand() - Simplified expand builder
+ * - fetchNextPage() - Fetch next page using @odata.nextLink
+ * - fetchAllPages() - Fetch all pages (use with caution)
+ *
+ * Types:
+ * - PowerAppsQueryConfig - Configuration for query builder
+ * - PowerAppsODataResponse - OData response format
+ * - PowerAppsError - Error response format
+ * - PowerAppsQueryResult - Enhanced response with metadata
+ * - ExpandConfig - Configuration for expanding related entities
+ * - ODataQueryParams - OData query parameters
+ */