@rokkit/forms 1.0.0-next.136 → 1.0.0-next.138

package/dist/src/lib/builder.svelte.d.ts

@@ -1,21 +1,3 @@
-/**
- * @typedef {Object} FormElement
- * @property {string} scope - JSON Pointer path (e.g., '#/email', '#/user/name')
- * @property {string} type - Input type (text, number, range, checkbox, select, etc.)
- * @property {any} value - Current value from data
- * @property {boolean} override - Whether to use custom child snippet (from layout)
- * @property {Object} props - Merged properties from schema + layout + validation
- * @property {string} [props.label] - Display label (from layout)
- * @property {string} [props.description] - Help text (from layout)
- * @property {string} [props.placeholder] - Placeholder text (from layout)
- * @property {boolean} [props.required] - Required flag (from schema)
- * @property {number} [props.min] - Minimum value (from schema)
- * @property {number} [props.max] - Maximum value (from schema)
- * @property {Object} [props.message] - Validation message object
- * @property {string} [props.message.state] - Message state: 'error', 'warning', 'info', 'success'
- * @property {string} [props.message.text] - Message text content
- * @property {boolean} [props.dirty] - Whether field value differs from initial
- */
 /**
  * FormBuilder class for dynamically generating forms from data structures
  */

package/dist/src/lib/lookup.svelte.d.ts

@@ -16,6 +16,24 @@ export function createLookupManager(lookupConfigs: {
  * Clears the entire lookup cache
  */
 export function clearLookupCache(): void;
+export type HookConfig = {
+    fetchHook: Function;
+    cacheKeyFn?: Function;
+    cacheTime: number;
+    transform?: Function;
+};
+export type UrlConfig = {
+    url: string;
+    cacheTime: number;
+    transform?: Function;
+};
+export type LookupApi = {
+    state: Object;
+    meta: Object;
+    fetch: Function;
+    clearCache: Function;
+    reset: Function;
+};
 export type LookupConfig = {
     /**
      * - URL template with optional placeholders (e.g., '/api/cities?country={country}')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/forms",
-  "version": "1.0.0-next.136",
+  "version": "1.0.0-next.138",
   "description": "Form building components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/FormRenderer.svelte

@@ -80,87 +80,60 @@
 		if (layout !== null && layout !== undefined) formBuilder.layout = layout
 	})
 
+	// Apply external validation result for a field path
+	function applyExternalValidation(fieldPath, value, event) {
+		if (!onvalidate) return
+		const result = onvalidate(fieldPath, value, event)
+		if (result && typeof result === 'object' && result.state) {
+			formBuilder.setFieldValidation(fieldPath, result)
+		}
+	}
+
 	// Handle field value changes
 	function handleFieldChange(element, newValue) {
 		const fieldPath = element.scope.replace(/^#\//, '')
-
-		// Update builder (source of truth)
 		formBuilder.updateField(fieldPath, newValue)
-
-		// Sync builder data back to bindable prop
 		data = formBuilder.data
-
-		// Call onupdate callback if provided
-		if (onupdate) {
-			onupdate(data)
-		}
-
-		// Built-in validation on change
-		if (validateOn === 'change') {
-			formBuilder.validateField(fieldPath)
-		}
-
-		// External validation callback (backward compat)
-		if (onvalidate) {
-			const result = onvalidate(fieldPath, newValue, 'change')
-			if (result && typeof result === 'object' && result.state) {
-				formBuilder.setFieldValidation(fieldPath, result)
-			}
-		}
+		if (onupdate) onupdate(data)
+		if (validateOn === 'change') formBuilder.validateField(fieldPath)
+		applyExternalValidation(fieldPath, newValue, 'change')
 	}
 
 	// Handle blur events for validation
 	function handleFieldBlur(element) {
 		const fieldPath = element.scope.replace(/^#\//, '')
 		const currentValue = formBuilder.getValue(fieldPath)
-
-		// Built-in validation on blur (default mode)
-		if (validateOn === 'blur') {
-			formBuilder.validateField(fieldPath)
-		}
-
-		// External validation callback (backward compat)
-		if (onvalidate) {
-			const result = onvalidate(fieldPath, currentValue, 'blur')
-			if (result && typeof result === 'object' && result.state) {
-				formBuilder.setFieldValidation(fieldPath, result)
-			}
-		}
+		if (validateOn === 'blur') formBuilder.validateField(fieldPath)
+		applyExternalValidation(fieldPath, currentValue, 'blur')
 	}
 
 	// Submission state
 	let submitting = $state(false)
 	let formRoot = $state(null)
 
+	// Focus the first invalid field in the form
+	function focusFirstError() {
+		const firstError = formBuilder.errors[0]
+		if (!firstError || !formRoot) return
+		const field = formRoot.querySelector(
+			`[data-scope="#/${firstError.path}"] input, [data-scope="#/${firstError.path}"] select, [data-scope="#/${firstError.path}"] textarea`
+		)
+		field?.focus?.()
+	}
+
 	// Handle form submission: validate → focus first error → call onsubmit → snapshot
 	async function handleSubmit(e) {
 		e.preventDefault()
 		if (submitting || !onsubmit) return
 
-		// Validate all fields
 		formBuilder.validate()
+		applyExternalValidation('*', data, 'submit')
 
-		// External form-level validation
-		if (onvalidate) {
-			const result = onvalidate('*', data, 'submit')
-			if (result && typeof result === 'object' && result.state) {
-				formBuilder.setFieldValidation('*', result)
-			}
-		}
-
-		// If invalid, focus first error field
 		if (!formBuilder.isValid) {
-			const firstError = formBuilder.errors[0]
-			if (firstError && formRoot) {
-				const field = formRoot.querySelector(
-					`[data-scope="#/${firstError.path}"] input, [data-scope="#/${firstError.path}"] select, [data-scope="#/${firstError.path}"] textarea`
-				)
-				field?.focus?.()
-			}
+			focusFirstError()
 			return
 		}
 
-		// Submit
 		submitting = true
 		try {
 			await onsubmit(formBuilder.getVisibleData(), { isValid: true, errors: [] })

package/src/display/DisplayCardGrid.svelte

@@ -4,29 +4,34 @@
 	 * Each card displays fields with formatted values.
 	 */
 	import DisplayValue from './DisplayValue.svelte'
+	import { SvelteSet } from 'svelte/reactivity'
 
 	let { data = [], fields = [], select, title, onselect, class: className = '' } = $props()
 
 	let selectedIndex = $state(-1)
-	let selectedIndices = $state(new Set())
+	let selectedIndices = new SvelteSet()
 
-	function handleCardClick(item, index) {
-		if (!select) return
+	function selectOne(item, index) {
+		selectedIndex = index
+		onselect?.(item, item)
+	}
 
-		if (select === 'one') {
-			selectedIndex = index
-			onselect?.(item, item)
-		} else if (select === 'many') {
-			const next = new Set(selectedIndices)
-			if (next.has(index)) {
-				next.delete(index)
-			} else {
-				next.add(index)
-			}
-			selectedIndices = next
-			const selected = data.filter((_, i) => next.has(i))
-			onselect?.(selected, item)
+	function selectMany(item, index) {
+		const next = new SvelteSet(selectedIndices)
+		if (next.has(index)) {
+			next.delete(index)
+		} else {
+			next.add(index)
 		}
+		selectedIndices = next
+		const selected = data.filter((_, i) => next.has(i))
+		onselect?.(selected, item)
+	}
+
+	function handleCardClick(item, index) {
+		if (!select) return
+		if (select === 'one') selectOne(item, index)
+		else if (select === 'many') selectMany(item, index)
 	}
 
 	function isSelected(index) {

package/src/display/DisplayTable.svelte

@@ -19,36 +19,32 @@
 		}))
 	)
 
+	function formatDuration(minutes) {
+		const h = Math.floor(minutes / 60)
+		const m = minutes % 60
+		if (h > 0 && m > 0) return `${h}h ${m}m`
+		if (h > 0) return `${h}h`
+		return `${m}m`
+	}
+
+	const formatters = {
+		currency: (v) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
+		datetime: (v) => new Date(v).toLocaleString(),
+		duration: (v) => formatDuration(v),
+		number: (v) => new Intl.NumberFormat().format(v),
+		boolean: (v) => (v ? '✓' : '✗')
+	}
+
 	/**
 	 * Create a cell formatter function for a given display format.
 	 * @param {string} format
 	 * @returns {(value: unknown) => string}
 	 */
 	function createFormatter(format) {
+		const fn = formatters[format] ?? String
 		return (value) => {
 			if (value === null || value === undefined) return '—'
-			switch (format) {
-				case 'currency':
-					return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
-						/** @type {number} */ (value)
-					)
-				case 'datetime':
-					return new Date(/** @type {string|number} */ (value)).toLocaleString()
-				case 'duration': {
-					const minutes = /** @type {number} */ (value)
-					const h = Math.floor(minutes / 60)
-					const m = minutes % 60
-					if (h > 0 && m > 0) return `${h}h ${m}m`
-					if (h > 0) return `${h}h`
-					return `${m}m`
-				}
-				case 'number':
-					return new Intl.NumberFormat().format(/** @type {number} */ (value))
-				case 'boolean':
-					return value ? '✓' : '✗'
-				default:
-					return String(value)
-			}
+			return fn(value)
 		}
 	}
 </script>

package/src/display/DisplayValue.svelte

@@ -20,24 +20,18 @@
 		return `${m}m`
 	}
 
+	const valueFormatters = {
+		currency: (v) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
+		datetime: (v) => new Date(v).toLocaleString(),
+		duration: (v) => formatDuration(v),
+		number: (v) => new Intl.NumberFormat().format(v),
+		boolean: (v) => (v ? '✓' : '✗')
+	}
+
 	const formatted = $derived.by(() => {
 		if (value === null || value === undefined) return '—'
-		switch (format) {
-			case 'currency':
-				return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value)
-			case 'datetime':
-				return new Date(value).toLocaleString()
-			case 'duration':
-				return formatDuration(value)
-			case 'number':
-				return new Intl.NumberFormat().format(value)
-			case 'boolean':
-				return value ? '✓' : '✗'
-			case 'badge':
-				return String(value)
-			default:
-				return String(value)
-		}
+		const fn = valueFormatters[format] ?? String
+		return fn(value)
 	})
 </script>
 

package/src/input/InputRadio.svelte

@@ -28,13 +28,13 @@
 		...rest
 	} = $props()
 
+	let currentIndex = $derived(getIndexForItem(options, value))
+
 	const handleChange = () => {
 		value = getItemAtIndex(options, currentIndex)
 		onchange?.(value)
 	}
 
-	let currentIndex = $derived(getIndexForItem(options, value))
-
 	// $effect.pre(() => {
 	// 	currentIndex = getIndexForItem(options, value)
 	// })