simplesvelte 2.5.1 → 2.6.0

package/dist/Grid.svelte

@@ -1,168 +1,168 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { env } from '$env/dynamic/public'
-	import {
-		AllEnterpriseModule,
-		ClientSideRowModelModule,
-		createGrid,
-		LicenseManager,
-		ModuleRegistry,
-		themeQuartz,
-		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[] // 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(),
-		gridApi = $bindable(),
-		gridData,
-		gridOptions,
-		stateKey,
-		class: gridClass = 'grow',
-	}: Props = $props()
-	let initCheckInterval: ReturnType<typeof setInterval> | undefined
-	let attemptCount = 0
-
-	function initializeGrid() {
-		if (!gridEl) {
-			console.log('⏳ Grid: Element not available yet')
-			return
-		}
-
-		if (gridApi) {
-			console.log('ℹ️ Grid: Already initialized, skipping')
-			return
-		}
-
-		attemptCount++
-		console.log(`📊 Grid: Initializing AG Grid (attempt ${attemptCount})...`)
-		console.log('📋 Grid: Registering modules...')
-		ModuleRegistry.registerModules([AllEnterpriseModule, ClientSideRowModelModule])
-
-		if (env.PUBLIC_AGGRID_KEY) {
-			LicenseManager.setLicenseKey(env.PUBLIC_AGGRID_KEY)
-			console.log('✅ Grid: License key applied successfully')
-		} else {
-			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...')
-		gridApi = createGrid(gridEl, gridConfig)
-
-		if (gridData !== undefined) {
-			const rowCount = gridData.length
-			console.log(`✅ Grid: Initialized with ${rowCount} row(s) (client-side)`)
-		} else {
-			console.log('✅ Grid: Initialized with server-side data source')
-		}
-
-		// Clear the interval once grid is created
-		if (initCheckInterval) {
-			console.log('⏹️ Grid: Stopping initialization checks')
-			clearInterval(initCheckInterval)
-			initCheckInterval = undefined
-		}
-	}
-
-	onMount(() => {
-		console.log('🚀 Grid: Component mounted')
-
-		// Try to initialize immediately
-		initializeGrid()
-
-		// If grid wasn't created, set up interval to keep checking
-		if (!gridApi) {
-			console.log('⏱️ Grid: Element not ready, checking every 100ms...')
-			initCheckInterval = setInterval(() => {
-				initializeGrid()
-			}, 100)
-		}
-
-		// Cleanup function to destroy grid and clear interval when component unmounts
-		return () => {
-			console.log('💥 Grid: Component unmounting')
-			if (initCheckInterval) {
-				console.log('⏹️ Grid: Clearing initialization interval')
-				clearInterval(initCheckInterval)
-				initCheckInterval = undefined
-			}
-			if (gridApi) {
-				console.log('🧹 Grid: Destroying grid instance')
-				gridApi.destroy()
-				gridApi = undefined
-				console.log('✅ Grid: Cleanup complete')
-			}
-		}
-	})
-
-	// Update grid when options or data change
-	$effect(() => {
-		if (gridApi && gridData !== undefined) {
-			const rowCount = gridData.length
-			console.log(`🔄 Grid: Data changed, updating grid with ${rowCount} row(s)`)
-
-			try {
-				gridApi.updateGridOptions({
-					...gridOptions,
-					rowData: gridData,
-				})
-				gridApi.refreshCells()
-				console.log('✅ Grid: Data update complete')
-			} catch (error) {
-				console.error('❌ Grid: Error updating data:', error)
-			}
-		} else if (!gridApi && gridData !== undefined) {
-			console.log('⚠️ Grid: Data available but grid not initialized yet')
-		}
-	})
-</script>
-
-<div bind:this={gridEl} class={gridClass}></div>
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { env } from '$env/dynamic/public'
+	import {
+		AllEnterpriseModule,
+		ClientSideRowModelModule,
+		createGrid,
+		LicenseManager,
+		ModuleRegistry,
+		themeQuartz,
+		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[] // 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(),
+		gridApi = $bindable(),
+		gridData,
+		gridOptions,
+		stateKey,
+		class: gridClass = 'grow',
+	}: Props = $props()
+	let initCheckInterval: ReturnType<typeof setInterval> | undefined
+	let attemptCount = 0
+
+	function initializeGrid() {
+		if (!gridEl) {
+			console.log('⏳ Grid: Element not available yet')
+			return
+		}
+
+		if (gridApi) {
+			console.log('ℹ️ Grid: Already initialized, skipping')
+			return
+		}
+
+		attemptCount++
+		console.log(`📊 Grid: Initializing AG Grid (attempt ${attemptCount})...`)
+		console.log('📋 Grid: Registering modules...')
+		ModuleRegistry.registerModules([AllEnterpriseModule, ClientSideRowModelModule])
+
+		if (env.PUBLIC_AGGRID_KEY) {
+			LicenseManager.setLicenseKey(env.PUBLIC_AGGRID_KEY)
+			console.log('✅ Grid: License key applied successfully')
+		} else {
+			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...')
+		gridApi = createGrid(gridEl, gridConfig)
+
+		if (gridData !== undefined) {
+			const rowCount = gridData.length
+			console.log(`✅ Grid: Initialized with ${rowCount} row(s) (client-side)`)
+		} else {
+			console.log('✅ Grid: Initialized with server-side data source')
+		}
+
+		// Clear the interval once grid is created
+		if (initCheckInterval) {
+			console.log('⏹️ Grid: Stopping initialization checks')
+			clearInterval(initCheckInterval)
+			initCheckInterval = undefined
+		}
+	}
+
+	onMount(() => {
+		console.log('🚀 Grid: Component mounted')
+
+		// Try to initialize immediately
+		initializeGrid()
+
+		// If grid wasn't created, set up interval to keep checking
+		if (!gridApi) {
+			console.log('⏱️ Grid: Element not ready, checking every 100ms...')
+			initCheckInterval = setInterval(() => {
+				initializeGrid()
+			}, 100)
+		}
+
+		// Cleanup function to destroy grid and clear interval when component unmounts
+		return () => {
+			console.log('💥 Grid: Component unmounting')
+			if (initCheckInterval) {
+				console.log('⏹️ Grid: Clearing initialization interval')
+				clearInterval(initCheckInterval)
+				initCheckInterval = undefined
+			}
+			if (gridApi) {
+				console.log('🧹 Grid: Destroying grid instance')
+				gridApi.destroy()
+				gridApi = undefined
+				console.log('✅ Grid: Cleanup complete')
+			}
+		}
+	})
+
+	// Update grid when options or data change
+	$effect(() => {
+		if (gridApi && gridData !== undefined) {
+			const rowCount = gridData.length
+			console.log(`🔄 Grid: Data changed, updating grid with ${rowCount} row(s)`)
+
+			try {
+				gridApi.updateGridOptions({
+					...gridOptions,
+					rowData: gridData,
+				})
+				gridApi.refreshCells()
+				console.log('✅ Grid: Data update complete')
+			} catch (error) {
+				console.error('❌ Grid: Error updating data:', error)
+			}
+		} else if (!gridApi && gridData !== undefined) {
+			console.log('⚠️ Grid: Data available but grid not initialized yet')
+		}
+	})
+</script>
+
+<div bind:this={gridEl} class={gridClass}></div>

package/dist/Input.svelte

@@ -1,145 +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>
-
-{#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>
+<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>