@rokkit/forms 1.0.0-next.125 → 1.0.0-next.127

package/src/lib/lookup.svelte.js

@@ -0,0 +1,334 @@
+/**
+ * @typedef {Object} LookupConfig
+ * @property {string} [url] - URL template with optional placeholders (e.g., '/api/cities?country={country}')
+ * @property {(formData: any) => Promise<any[]>} [fetch] - Async function replacing URL template
+ * @property {any[]} [source] - Pre-loaded array for filter pattern
+ * @property {(items: any[], formData: any) => any[]} [filter] - Client-side filter applied to source
+ * @property {(formData: any) => string} [cacheKey] - Custom cache key for fetch hooks (no caching when absent)
+ * @property {string[]} [dependsOn] - Field paths this lookup depends on
+ * @property {Object} [fields] - Field mapping for the response data
+ * @property {number} [cacheTime] - Cache duration in milliseconds (default: 5 minutes)
+ * @property {(data: any) => any[]} [transform] - Transform response data to options array
+ */
+
+/**
+ * @typedef {Object} LookupState
+ * @property {any[]} options - Current options
+ * @property {boolean} loading - Whether lookup is in progress
+ * @property {string|null} error - Error message if lookup failed
+ * @property {boolean} disabled - Whether field is disabled (deps not met)
+ */
+
+/**
+ * Cache entry structure
+ * @typedef {Object} CacheEntry
+ * @property {any[]} data - Cached options
+ * @property {number} timestamp - When the cache was created
+ */
+
+const DEFAULT_CACHE_TIME = 5 * 60 * 1000 // 5 minutes
+
+/** @type {Map<string, CacheEntry>} */
+const cache = new Map()
+
+/**
+ * Interpolates URL template with values
+ * @param {string} template - URL template with {placeholders}
+ * @param {Object} values - Values to interpolate
+ * @returns {string}
+ */
+function interpolateUrl(template, values) {
+	return template.replace(/\{(\w+)\}/g, (_, key) => {
+		const value = values[key]
+		return value !== undefined && value !== null ? encodeURIComponent(String(value)) : ''
+	})
+}
+
+/**
+ * Generates a cache key from URL and parameters
+ * @param {string} url - The resolved URL
+ * @returns {string}
+ */
+function getCacheKey(url) {
+	return url
+}
+
+/**
+ * Checks if a cache entry is still valid
+ * @param {CacheEntry} entry
+ * @param {number} cacheTime
+ * @returns {boolean}
+ */
+function isCacheValid(entry, cacheTime) {
+	return Date.now() - entry.timestamp < cacheTime
+}
+
+/**
+ * Creates a lookup provider for a field
+ * @param {LookupConfig} config - Lookup configuration
+ * @returns {Object} Lookup provider with reactive state
+ */
+export function createLookup(config) {
+	const {
+		url,
+		fetch: fetchHook,
+		source,
+		filter,
+		cacheKey: cacheKeyFn,
+		dependsOn = [],
+		fields = {},
+		cacheTime = DEFAULT_CACHE_TIME,
+		transform
+	} = config
+
+	let options = $state([])
+	let loading = $state(false)
+	let error = $state(null)
+	let disabled = $state(false)
+
+	/**
+	 * Fetches options from the configured source (URL, fetch hook, or filter)
+	 * @param {Object} params - Parameter values for URL interpolation / filter context
+	 * @returns {Promise<any[]>}
+	 */
+	async function fetch(params = {}) {
+		// Check if all dependencies have values
+		const missingDeps = dependsOn.filter((dep) => !params[dep] && params[dep] !== 0)
+		if (missingDeps.length > 0) {
+			options = []
+			disabled = true
+			return []
+		}
+
+		disabled = false
+
+		// Branch: synchronous filter over pre-loaded source
+		if (filter !== undefined && source !== undefined) {
+			options = filter(source, params)
+			return options
+		}
+
+		// Branch: async fetch hook with optional caching
+		if (fetchHook) {
+			const key = cacheKeyFn?.(params)
+
+			if (key !== undefined) {
+				const cached = cache.get(key)
+				if (cached && isCacheValid(cached, cacheTime)) {
+					options = cached.data
+					return cached.data
+				}
+			}
+
+			loading = true
+			error = null
+
+			try {
+				let data = await fetchHook(params)
+
+				if (transform) {
+					data = transform(data)
+				}
+
+				if (!Array.isArray(data)) {
+					data = data?.data || data?.items || data?.results || []
+				}
+
+				if (key !== undefined) {
+					cache.set(key, { data, timestamp: Date.now() })
+				}
+
+				options = data
+				return data
+			} catch (err) {
+				error = err.message || 'Failed to load options'
+				options = []
+				return []
+			} finally {
+				loading = false
+			}
+		}
+
+		// Branch: URL-based fetch (original behavior)
+		const resolvedUrl = interpolateUrl(url, params)
+		const urlCacheKey = getCacheKey(resolvedUrl)
+
+		// Check cache first
+		const cached = cache.get(urlCacheKey)
+		if (cached && isCacheValid(cached, cacheTime)) {
+			options = cached.data
+			return cached.data
+		}
+
+		loading = true
+		error = null
+
+		try {
+			const response = await globalThis.fetch(resolvedUrl)
+
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+			}
+
+			let data = await response.json()
+
+			// Apply transform if provided
+			if (transform) {
+				data = transform(data)
+			}
+
+			// Ensure data is an array
+			if (!Array.isArray(data)) {
+				data = data.data || data.items || data.results || []
+			}
+
+			// Cache the result
+			cache.set(urlCacheKey, { data, timestamp: Date.now() })
+
+			options = data
+			return data
+		} catch (err) {
+			error = err.message || 'Failed to load options'
+			options = []
+			return []
+		} finally {
+			loading = false
+		}
+	}
+
+	/**
+	 * Clears the cache for this lookup
+	 */
+	function clearCache() {
+		if (!url) return // fetch/filter hooks have no URL-keyed cache entries
+		// Clear all cache entries that match this URL pattern
+		const baseUrl = url.split('?')[0]
+		for (const key of cache.keys()) {
+			if (key.startsWith(baseUrl)) {
+				cache.delete(key)
+			}
+		}
+	}
+
+	/**
+	 * Resets the lookup state
+	 */
+	function reset() {
+		options = []
+		loading = false
+		error = null
+		disabled = false
+	}
+
+	return {
+		get options() {
+			return options
+		},
+		get loading() {
+			return loading
+		},
+		get error() {
+			return error
+		},
+		get disabled() {
+			return disabled
+		},
+		get dependsOn() {
+			return dependsOn
+		},
+		get fields() {
+			return fields
+		},
+		fetch,
+		clearCache,
+		reset
+	}
+}
+
+/**
+ * Creates a lookup manager for a form with multiple lookups
+ * @param {Object<string, LookupConfig>} lookupConfigs - Map of field paths to lookup configs
+ * @returns {Object} Lookup manager
+ */
+export function createLookupManager(lookupConfigs) {
+	/** @type {Map<string, ReturnType<typeof createLookup>>} */
+	const lookups = new Map()
+
+	// Create lookup providers for each configured field
+	for (const [fieldPath, config] of Object.entries(lookupConfigs)) {
+		lookups.set(fieldPath, createLookup(config))
+	}
+
+	/**
+	 * Gets the lookup provider for a field
+	 * @param {string} fieldPath
+	 * @returns {ReturnType<typeof createLookup> | undefined}
+	 */
+	function getLookup(fieldPath) {
+		return lookups.get(fieldPath)
+	}
+
+	/**
+	 * Checks if a field has a lookup configured
+	 * @param {string} fieldPath
+	 * @returns {boolean}
+	 */
+	function hasLookup(fieldPath) {
+		return lookups.has(fieldPath)
+	}
+
+	/**
+	 * Handles a field value change and triggers dependent lookups
+	 * @param {string} changedField - The field that changed
+	 * @param {Object} formData - Current form data
+	 */
+	async function handleFieldChange(changedField, formData) {
+		// Find all lookups that depend on this field
+		for (const [_fieldPath, lookup] of lookups) {
+			if (lookup.dependsOn.includes(changedField)) {
+				// Reset dependent field value and fetch new options
+				await lookup.fetch(formData)
+			}
+		}
+	}
+
+	/**
+	 * Initializes all lookups with current form data.
+	 * Calls fetch() for every lookup so disabled state is set correctly.
+	 * @param {Object} formData - Current form data
+	 */
+	async function initialize(formData) {
+		const promises = []
+		for (const [_fieldPath, lookup] of lookups) {
+			promises.push(lookup.fetch(formData))
+		}
+		await Promise.all(promises)
+	}
+
+	/**
+	 * Clears all caches
+	 */
+	function clearAllCaches() {
+		for (const lookup of lookups.values()) {
+			lookup.clearCache()
+		}
+	}
+
+	return {
+		getLookup,
+		hasLookup,
+		handleFieldChange,
+		initialize,
+		clearAllCaches,
+		get lookups() {
+			return lookups
+		}
+	}
+}
+
+/**
+ * Clears the entire lookup cache
+ */
+export function clearLookupCache() {
+	cache.clear()
+}

package/src/lib/renderers.js

@@ -0,0 +1,83 @@
+/**
+ * Type Renderer Registry
+ *
+ * Maps element type strings to Svelte input components.
+ * Consumers can extend via the `renderers` prop on FormRenderer.
+ */
+
+import ArrayEditor from '../input/ArrayEditor.svelte'
+import InputCheckbox from '../input/InputCheckbox.svelte'
+import InputColor from '../input/InputColor.svelte'
+import InputDate from '../input/InputDate.svelte'
+import InputDateTime from '../input/InputDateTime.svelte'
+import InputEmail from '../input/InputEmail.svelte'
+import InputFile from '../input/InputFile.svelte'
+import InputMonth from '../input/InputMonth.svelte'
+import InputNumber from '../input/InputNumber.svelte'
+import InputPassword from '../input/InputPassword.svelte'
+import InputRadio from '../input/InputRadio.svelte'
+import InputRange from '../input/InputRange.svelte'
+import InputSelect from '../input/InputSelect.svelte'
+import InputSwitch from '../input/InputSwitch.svelte'
+import InputToggle from '../input/InputToggle.svelte'
+import InputTel from '../input/InputTel.svelte'
+import InputText from '../input/InputText.svelte'
+import InputTextArea from '../input/InputTextArea.svelte'
+import InputTime from '../input/InputTime.svelte'
+import InputUrl from '../input/InputUrl.svelte'
+import InputWeek from '../input/InputWeek.svelte'
+
+/**
+ * Default renderer registry mapping type strings to components.
+ * @type {Record<string, import('svelte').Component>}
+ */
+export const defaultRenderers = {
+	array: ArrayEditor,
+	text: InputText,
+	number: InputNumber,
+	integer: InputNumber,
+	email: InputEmail,
+	password: InputPassword,
+	tel: InputTel,
+	url: InputUrl,
+	color: InputColor,
+	date: InputDate,
+	'datetime-local': InputDateTime,
+	datetime: InputDateTime,
+	time: InputTime,
+	month: InputMonth,
+	week: InputWeek,
+	range: InputRange,
+	textarea: InputTextArea,
+	file: InputFile,
+	checkbox: InputCheckbox,
+	radio: InputRadio,
+	select: InputSelect,
+	switch: InputSwitch,
+	toggle: InputToggle
+}
+
+/**
+ * Resolve a renderer component for a form element.
+ *
+ * Resolution order:
+ * 1. Explicit `renderer` name in element props → custom registry
+ * 2. Element type → registry lookup
+ * 3. Fallback → InputText
+ *
+ * @param {{ type: string, props?: { renderer?: string } }} element
+ * @param {Record<string, import('svelte').Component>} renderers - Merged registry
+ * @returns {import('svelte').Component}
+ */
+export function resolveRenderer(element, renderers) {
+	// 1. Explicit renderer name from layout
+	if (element.props?.renderer && renderers[element.props.renderer]) {
+		return renderers[element.props.renderer]
+	}
+	// 2. Element type
+	if (renderers[element.type]) {
+		return renderers[element.type]
+	}
+	// 3. Fallback
+	return InputText
+}

package/src/lib/schema.js

@@ -9,7 +9,7 @@ import { typeOf } from '@rokkit/data'
 function deriveObjectProperties(data) {
 	const properties = {}
 	for (const [key, value] of Object.entries(data)) {
-		// eslint-disable-next-line no-use-before-define
+		 
 		properties[key] = deriveSchemaFromValue(value)
 	}
 	return properties

package/src/types.js

@@ -1,12 +1,6 @@
 import { toHyphenCase } from '@rokkit/core'
 // skipcq: JS-C1003 - Importing all components from atoms
 import * as NativeInput from '@rokkit/forms'
-// skipcq: JS-C1003 - Importing all components from molecules
-// import CheckBox from '@rokkit/ui'
-
-// import InputSelect from './InputSelect.svelte'
-// import InputSwitch from './InputSwitch.svelte'
-
 function extractComponentMap(components, prefix = /^Input/) {
 	return Object.entries(components).reduce(
 		(acc, [name, component]) => ({
@@ -21,9 +15,6 @@ const native = extractComponentMap(NativeInput)
 export const types = {
 	string: NativeInput.InputText,
 	integer: NativeInput.InputNumber,
-	// boolean: CheckBox,
-	// enum: InputSelect,
 	phone: NativeInput.InputTel,
 	...native
-	// ...extractComponentMap({ InputSelect, InputSwitch })
 }

package/dist/src/forms-old/input/types.d.ts

@@ -1,7 +0,0 @@
-export namespace types {
-    export let string: import("svelte/legacy").LegacyComponentType;
-    export let integer: import("svelte/legacy").LegacyComponentType;
-    export { CheckBox as boolean };
-    export let phone: import("svelte/legacy").LegacyComponentType;
-}
-import CheckBox from '../CheckBox.svelte';

package/dist/src/forms-old/lib/form.d.ts

@@ -1,95 +0,0 @@
-export namespace messages {
-    let required: string;
-    let email: string;
-    let url: string;
-    let color: string;
-    let number: string;
-    let min: string;
-    let max: string;
-    let pattern: string;
-    let exclusiveMin: string;
-    let exclusiveMax: string;
-    let minLength: string;
-    let maxLength: string;
-    let minItems: string;
-    let maxItems: string;
-    let uniqueItems: string;
-    let contains: string;
-    let exclude: string;
-    let integer: string;
-}
-export namespace dataTypes {
-    export namespace integer_1 {
-        let editor: string;
-        namespace props {
-            let type: string;
-            let step: number;
-        }
-        let availableProps: string[];
-    }
-    export { integer_1 as integer };
-    export namespace number_1 {
-        let editor_1: string;
-        export { editor_1 as editor };
-        export namespace props_1 {
-            let type_1: string;
-            export { type_1 as type };
-            let step_1: number;
-            export { step_1 as step };
-        }
-        export { props_1 as props };
-        let availableProps_1: string[];
-        export { availableProps_1 as availableProps };
-    }
-    export { number_1 as number };
-    export namespace range {
-        let editor_2: string;
-        export { editor_2 as editor };
-        export namespace props_2 {
-            let type_2: string;
-            export { type_2 as type };
-        }
-        export { props_2 as props };
-    }
-    export let string: {
-        default: string;
-        text: string;
-        password: string;
-        email: string;
-        url: string;
-        tel: string;
-        date: string;
-        'datetime-local': string;
-        time: string;
-        week: string;
-        month: string;
-        file: string;
-        hidden: string;
-        color: string;
-        colorpicker: string;
-    };
-    export namespace _enum {
-        let _default: string;
-        export { _default as default };
-        export let select: string;
-        export let radio: string;
-    }
-    export { _enum as enum };
-    export namespace boolean {
-        let _default_1: string;
-        export { _default_1 as default };
-        export let checkbox: string;
-        let _switch: string;
-        export { _switch as switch };
-        let radio_1: string;
-        export { radio_1 as radio };
-    }
-    export namespace array {
-        let _default_2: string;
-        export { _default_2 as default };
-    }
-    export namespace object {
-        let _default_3: string;
-        export { _default_3 as default };
-    }
-}

package/dist/src/forms-old/lib/index.d.ts

@@ -1 +0,0 @@
-export { messages, dataTypes } from "./form";

package/dist/src/lib/deprecated/nested.d.ts

@@ -1,48 +0,0 @@
-/**
- * Flattens an object into a flat object
- *
- * @param {Object} input - The object to flatten
- * @param {String} scope - The scope of the object
- */
-export function flattenObject(input: Object, scope?: string): any;
-/**
- * Flattens an object into an array of key-value pairs
- *
- * @param {Object} input - The object to flatten
- * @param {String} scope - The scope of the object
- */
-export function flattenAttributes(input: Object, scope?: string): {
-    key: string;
-    value: any;
-    type: string;
-    scope: string;
-}[];
-/**
- * Derives a nested schema from an object
- *
- * @param {Object} input - The object to derive the schema from
- * @param {String} scope - The scope of the object
- * @returns {Object} The derived schema
- */
-export function deriveNestedSchema(input: Object, scope?: string): Object;
-/**
- * Flattens an element into a flat object
- *
- * @param {Object} element - The element to flatten
- */
-export function flattenElement(element: Object): any;
-/**
- * Generates an index array referencing the input data
- *
- * @param {Object} data - The flat object to index
- * @param {String} key - The key to use as index
- */
-export function generateIndex(data: Object, key?: string): any;
-/**
- * Generates a tree table from the input data
- *
- * @param {Object} data - The data to generate the tree table from
- * @param {String} key - The key to use as index
- * @param {Boolean} ellipsis - Whether to truncate the value
- */
-export function generateTreeTable(data: Object, key?: string, ellipsis?: boolean): any;

package/dist/src/lib/deprecated/nested.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/lib/deprecated/validator.d.ts

@@ -1,30 +0,0 @@
-/**
- * Get a validator function that takes a regex expression and returns a validation function
- *
- * @param {string|RegExp} pattern
- * @returns {import('./types').ValidationFunction}
- */
-export function getPatternValidator(pattern: string | RegExp): any;
-/**
- * Get a validator function that takes a min and max value and returns a validation function
- *
- * @param {number} min
- * @param {number} max
- * @returns {import('./types').ValidationFunction}
- */
-export function getRangeValidator(min: number, max: number): any;
-/**
- * Get a validator function that takes a type and returns a validation function
- *
- * @param {string} type
- * @returns {import('./types').ValidationFunction}
- * @throws {Error} - If the type is invalid
- */
-export function getTypeValidator(type: string): any;
-/**
- * Create a custom Svelte store with validation rules.
- * @param {*} value - The initial value for the store.
- * @param {Array<import('./types').ValidationRule>} rules - An array of validation rules.
- * @returns {import('svelte').Writable<import('./types').ValidationResult>} - The custom Svelte store.
- */
-export function verifiable(input: any, rules: Array<any>): import("svelte").Writable<any>;

package/dist/src/lib/deprecated/validator.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/src/DataEditor.svelte

@@ -1,30 +0,0 @@
-<script>
-	import { setContext } from 'svelte'
-	import { types } from './input/types'
-	import Wrapper from './wrappers/Wrapper.svelte'
-	import Item from './Item.svelte'
-	import Tabs from './Tabs.svelte'
-	import FieldLayout from './FieldLayout.svelte'
-	import { noop } from '@rokkit/core'
-
-	const registry = $state({})
-	setContext('registry', registry)
-
-	import { deriveSchemaFromValue, deriveLayoutFromValue, getSchemaWithLayout } from './lib'
-
-	let { value, schema = null, layout = null, using = {}, onchange = noop } = $props()
-
-	registry.editors = { ...types, ...using?.editors }
-	registry.components = { default: Item, ...using?.components }
-	registry.wrappers = { default: Wrapper, ...using?.wrappers }
-	registry.navigators = { default: Tabs, ...using?.navigators }
-
-	let schemaWithLayout = $derived.by(() => {
-		return getSchemaWithLayout(
-			schema ?? deriveSchemaFromValue(value),
-			layout ?? deriveLayoutFromValue(value)
-		)
-	})
-</script>
-
-<FieldLayout schema={schemaWithLayout} bind:value {onchange} />