@rokkit/forms 1.0.0-next.122

package/src/FormRenderer.svelte

@@ -0,0 +1,118 @@
+<script>
+	/**
+	 * FormRenderer component with snippet-based rendering
+	 * Handles defaultInput and custom child snippet selection based on override flag
+	 */
+
+	import InputField from './InputField.svelte'
+	import { FormBuilder } from './lib/builder.svelte.js'
+
+	let {
+		// FormBuilder binding
+
+		// Direct props (alternative to builder)
+		data = $bindable(),
+		schema = null,
+		layout = null,
+
+		// Event handlers
+		onupdate = undefined,
+		onvalidate = undefined,
+
+		// Styling
+		className = '',
+
+		// Custom snippet
+		child,
+
+		// Pass through any other props
+		...props
+	} = $props()
+
+	// Use provided builder or create one from data/schema/layout
+	let formBuilder = $derived(new FormBuilder(data, schema, layout))
+	// Get elements from the builder
+	let elements = $derived(() => formBuilder.elements)
+
+	// Handle field value changes
+	function handleFieldChange(element, newValue) {
+		const fieldPath = element.scope.replace(/^#\//, '')
+
+		if (formBuilder) {
+			// Update through FormBuilder
+			formBuilder.updateField(fieldPath, newValue)
+		} else {
+			// Update data directly
+			updateNestedValue(data, fieldPath, newValue)
+		}
+
+		// Call onupdate callback if provided
+		if (onupdate) {
+			const currentData = formBuilder ? formBuilder.data : data
+			onupdate(currentData)
+		}
+
+		// Trigger validation if handler provided
+		if (onvalidate) {
+			onvalidate(fieldPath, newValue)
+		}
+	}
+
+	// Helper function to update nested object values
+	function updateNestedValue(obj, path, value) {
+		const keys = path.split('/')
+		let current = obj
+
+		for (let i = 0; i < keys.length - 1; i++) {
+			if (!(keys[i] in current)) {
+				current[keys[i]] = {}
+			}
+			current = current[keys[i]]
+		}
+
+		current[keys[keys.length - 1]] = value
+	}
+
+	// Handle focus events for validation
+	function handleFieldFocus(element) {
+		// Could trigger validation on focus if needed
+	}
+
+	// Handle blur events for validation
+	function handleFieldBlur(element) {
+		if (onvalidate) {
+			const fieldPath = element.scope.replace(/^#\//, '')
+			const currentValue = element.value
+			onvalidate(fieldPath, currentValue, 'blur')
+		}
+	}
+</script>
+
+<!-- Form container -->
+<div data-form-root class={className} {...props}>
+	<!-- <div data-form-field data-scope={formBuilder.elements[0].scope}>
+		{@render defaultInput(formBuilder.elements[0])}
+	</div> -->
+	{#each formBuilder.elements as element, index (index)}
+		<div data-form-field data-scope={element.scope}>
+			{#if element.override && child}
+				{@render child(element)}
+			{:else}
+				{@render defaultInput(element)}
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<!-- Default input snippet -->
+{#snippet defaultInput(element)}
+	<InputField
+		name={element.scope}
+		type={element.type}
+		value={element.value}
+		{...element.props}
+		onchange={(newValue) => handleFieldChange(element, newValue)}
+		onfocus={() => handleFieldFocus(element)}
+		onblur={() => handleFieldBlur(element)}
+	/>
+{/snippet}

package/src/Input.svelte

@@ -0,0 +1,75 @@
+<script>
+	import { Icon } from '@rokkit/ui'
+	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 InputRange from './input/InputRange.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'
+	import InputSelect from './input/InputSelect.svelte'
+
+	let {
+		type = 'text',
+		value = $bindable(),
+		onchange = null,
+		oninput = null,
+		onfocus = null,
+		onblur = null,
+		icon = null,
+		...restProps
+	} = $props()
+</script>
+
+<div data-input-root>
+	{#if icon}
+		<Icon name={icon} />
+	{/if}
+	{#if type === 'number'}
+		<InputNumber bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'integer'}
+		<InputNumber bind:value {onchange} {oninput} {onfocus} {onblur} step="1" {...restProps} />
+	{:else if type === 'password'}
+		<InputPassword bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'checkbox'}
+		<InputCheckbox bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'color'}
+		<InputColor bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'date'}
+		<InputDate bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'email'}
+		<InputEmail bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'tel'}
+		<InputTel bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'time'}
+		<InputTime bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if ['datetime', 'datetime-local'].includes(type)}
+		<InputDateTime bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'month'}
+		<InputMonth bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'range'}
+		<InputRange bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'select'}
+		<InputSelect bind:value {onchange} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'textarea'}
+		<InputTextArea bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'url'}
+		<InputUrl bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{:else if type === 'week'}
+		<InputWeek bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+		<!-- {:else if type === 'switch'}
+		<InputWeek bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} /> -->
+	{:else}
+		<!-- Default to text input -->
+		<InputText bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+	{/if}
+</div>

package/src/InputField.svelte

@@ -0,0 +1,55 @@
+<script>
+	import { pick, omit, isNil } from 'ramda'
+	import { Icon } from '@rokkit/ui'
+	import Input from './Input.svelte'
+
+	let {
+		class: className,
+		name,
+		value = $bindable(),
+		type,
+		required,
+		status,
+		disabled,
+		message,
+		nolabel,
+		icon,
+		label,
+		description,
+		onchange,
+		...restProps
+	} = $props()
+
+	let rootProps = pick(['id'], restProps)
+	let properties = {
+		required,
+		readOnly: disabled,
+		...omit(['id'], restProps),
+		name
+	}
+</script>
+
+<div
+	data-field-root
+	{...rootProps}
+	class={className}
+	data-field-state={status}
+	data-field-type={type}
+	data-field-required={required}
+	data-field-disabled={disabled}
+	data-field-empty={isNil(value)}
+	data-has-icon={!isNil(icon)}
+>
+	<div data-field aria-label={description ?? label ?? name}>
+		{#if label && !nolabel}
+			<label for={name}>{label}</label>
+		{/if}
+		<Input id={name} bind:value {type} {...properties} {onchange} {icon} />
+	</div>
+	{#if description}
+		<div data-description>{description}</div>
+	{/if}
+	{#if message}
+		<div data-message>{message}</div>
+	{/if}
+</div>

package/src/ListEditor.svelte

@@ -0,0 +1,44 @@
+<script>
+	import List from './List.svelte'
+	import FieldLayout from './FieldLayout.svelte'
+	import { defaultFields } from '@rokkit/core'
+	import { getContext } from 'svelte'
+
+	// const dispatch = createEventDispatcher()
+	const registry = getContext('registry')
+
+	let {
+		class: className,
+		value,
+		fields = defaultFields,
+		schema,
+		path = [],
+		below = false,
+		children
+	} = $props()
+
+	let index = 0
+	let item = $state(value[index])
+	let location = $state([...path, index])
+
+	function handleSelect(event) {
+		index = event.detail.indices[0]
+		item = event.detail.item
+		location = [...path, ...event.detail.indices]
+		dispatch('select', { item: value, indices: path })
+	}
+</script>
+
+<list-editor class="flex {className}">
+	<List
+		bind:items={value}
+		bind:value={item}
+		{fields}
+		using={registry.components}
+		on:select={handleSelect}
+	/>
+	<item-editor class="flex" class:below>
+		{@render children?.()}
+		<FieldLayout bind:value={item} {schema} path={location} />
+	</item-editor>
+</list-editor>

package/src/NestedEditor.svelte

@@ -0,0 +1,85 @@
+<script>
+	import { pick } from 'ramda'
+	import { createEventDispatcher } from 'svelte'
+	import { Tree, DataEditor, Tree as TreeTable, Tabs } from '@rokkit/ui'
+	import { generateTreeTable, deriveNestedSchema } from './lib'
+
+	const dispatch = createEventDispatcher()
+
+	export let value
+	export let schema = deriveNestedSchema(value)
+	export let using = {}
+	export let fields = {
+		text: 'key',
+		icon: 'type',
+		iconPrefix: 'type'
+	}
+	let node = {
+		schema: null,
+		layout: null
+	}
+	let nodeValue = value
+	let nodeType = null
+	let nodeItem = null
+	let columns = [
+		{ key: 'scope', path: true, label: 'path', fields: { text: 'key' } },
+		{ key: 'value', label: 'value', fields: { text: 'value', icon: 'type', iconPrefix: 'type' } }
+	]
+
+	function handleChange() {
+		dispatch('change', value)
+	}
+	function handleMove(event) {
+		dispatch('change', value)
+		const scope = event.detail.scope.split('/').slice(1)
+
+		node.schema = pick(['type', 'properties', 'items'], event.detail)
+		node.layout = event.detail.layout
+
+		nodeValue = value
+		nodeType = event.detail.type
+
+		for (let i = 0; i < scope.length; i++) {
+			nodeValue = nodeValue[scope[i]]
+		}
+	}
+
+	$: tableData = node?.layout ? [] : generateTreeTable(nodeValue ?? value, 'scope', true)
+</script>
+
+<container class="flex h-full w-full flex-row">
+	<aside class="border-r-neutral-subtle flex h-full w-80 border-r">
+		<Tree items={schema} {fields} class="h-full w-full" on:move={handleMove} />
+	</aside>
+	<content class="flex h-full w-full flex-col gap-4 overflow-hidden p-8">
+		<slot />
+		<section class="flex w-full flex-grow flex-col overflow-auto">
+			{#if !nodeValue}
+				<p>Select a node to edit</p>
+				<TreeTable data={tableData} {columns} class="" />
+			{:else if node.layout}
+				{#if nodeType === 'array'}
+					<p>Arrays are not supported yet.</p>
+					<Tabs options={nodeValue} bind:value={nodeItem} />
+					{#if nodeItem}
+						<DataEditor
+							bind:value={nodeItem}
+							layout={node.layout}
+							schema={node.schema.items}
+							{using}
+						/>
+						<pre>{JSON.stringify(nodeItem, null, 2)}</pre>
+					{/if}
+				{:else}
+					<DataEditor bind:value={nodeValue} {...node} {using} on:change={handleChange} />
+				{/if}
+			{:else}
+				<p>
+					No atomic attributes at this level. Select a child node to edit. Current value is below.
+				</p>
+				<TreeTable data={tableData} {columns} />
+			{/if}
+		</section>
+		<slot name="footer" />
+	</content>
+</container>

package/src/forms-old/CheckBox.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { defaultStateIcons } from '@rokkit/core'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [id]
+	 * @property {any} name
+	 * @property {boolean} [value]
+	 * @property {boolean} [readOnly]
+	 * @property {any} [stateIcons]
+	 * @property {number} [tabindex]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		id = null,
+		name,
+		value = $bindable(false),
+		readOnly = false,
+		stateIcons = defaultStateIcons.checkbox,
+		tabindex = 0
+	} = $props()
+
+	let state = $derived(value === null ? 'unknown' : value ? 'checked' : 'unchecked')
+
+	function toggle(event) {
+		event.preventDefault()
+		event.stopPropagation()
+		value = !value
+	}
+	function handleClick(event) {
+		if (!readOnly) toggle(event)
+	}
+	function handleKeydown(event) {
+		if (readOnly) return
+		if (event.key === 'Enter' || event.key === ' ') toggle(event)
+	}
+</script>
+
+<rk-checkbox
+	{id}
+	class={classes}
+	class:disabled={readOnly}
+	role="checkbox"
+	aria-checked={state}
+	aria-disabled={readOnly}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{tabindex}
+>
+	<input hidden type="checkbox" {name} {readOnly} bind:checked={value} />
+
+	<icon class={stateIcons[state]}></icon>
+</rk-checkbox>

package/src/forms-old/DataEditor.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { setContext } from 'svelte'
+	import { types } from './input/types'
+	import Wrapper from './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} />

package/src/forms-old/FieldLayout.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { getContext } from 'svelte'
+	import { omit } from 'ramda'
+	import InputField from './input/InputField.svelte'
+	import FieldLayout from './FieldLayout.svelte'
+
+	// const dispatch = createEventDispatcher()
+	const registry = getContext('registry')
+
+	export let value = {}
+	export let schema = {}
+	export let path = []
+
+	function handle() {
+		dispatch('change', value)
+	}
+
+	let Wrapper = registry.wrappers[schema.wrapper] ?? registry.wrappers.default
+	let wrapperProps = omit(['wrapper', 'elements', 'key'], schema)
+</script>
+
+{#if !Array.isArray(schema.elements)}
+	<error> Invalid schema. Expected schema to include an 'elements' array. </error>
+{:else}
+	<Wrapper {...wrapperProps}>
+		{#each schema.elements as item, index (index)}
+			{@const elementPath = item.key ? [...path, item.key] : path}
+			{@const props = { ...item.props, path: elementPath }}
+			{@const nested = Array.isArray(item.elements) && item.elements.length > 0}
+			{@const Component = item.component
+				? (registry.components[item.component] ?? registry.components.default)
+				: null}
+
+			{#if nested}
+				{#if item.key}
+					<FieldLayout {...props} schema={item} bind:value={value[item.key]} on:change={handle} />
+				{:else}
+					<FieldLayout {...props} schema={item} bind:value on:change={handle} />
+				{/if}
+			{:else if Component}
+				<Component {...item.props} value={item.key ? value[item.key] : null} />
+			{:else}
+				{@const name = elementPath.join('.')}
+				<InputField {name} bind:value={value[item.key]} {...item.props} on:change={handle} />
+			{/if}
+		{/each}
+	</Wrapper>
+{/if}

package/src/forms-old/Form.svelte

@@ -0,0 +1,17 @@
+<script>
+	import DataEditor from './DataEditor.svelte'
+
+	export let value
+	export let schema = null
+	export let layout = null
+	export let using = {}
+</script>
+
+<form on:submit>
+	<DataEditor bind:value {schema} {layout} {using} />
+	<span>
+		<slot>
+			<button type="submit">Submit</button>
+		</slot>
+	</span>
+</form>

package/src/forms-old/Icon.svelte

@@ -0,0 +1,76 @@
+<script>
+	import { createEmitter } from '@rokkit/core'
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} name
+	 * @property {any} [state]
+	 * @property {string} [size]
+	 * @property {'img'|'button'|'checkbox'|'option'} [role]
+	 * @property {any} [label]
+	 * @property {boolean} [disabled]
+	 * @property {number} [tabindex]
+	 * @property {any} [checked]
+	 * @event {MouseEvent} [onclick]
+	 * @event {CustomEvent} [onchange]
+	 * @event {MouseEvent} [onmouseenter]
+	 * @event {MouseEvent} [onmouseleave]
+	 */
+
+	/** @type {Props} */
+	let {
+		ref = $bindable(),
+		class: classes = '',
+		name,
+		state = null,
+		size = 'base',
+		role = 'img',
+		label = null,
+		disabled = false,
+		tabindex = $bindable(0),
+		checked = $bindable(null),
+		...events
+	} = $props()
+
+	let emitter = $derived(createEmitter(events, ['click', 'change', 'mouseenter', 'mouseleave']))
+	function handleClick(e) {
+		if (role === 'img') return
+		e.preventDefault()
+
+		if (!disabled) {
+			if (isCheckbox) {
+				checked = !checked
+				emitter?.change(checked)
+			}
+			emitter?.click()
+		}
+	}
+
+	let isCheckbox = $derived(role === 'checkbox' || role === 'option')
+	let validatedTabindex = $derived(role === 'img' || disabled ? -1 : tabindex)
+	let ariaChecked = $derived(
+		['checkbox', 'option'].includes(role) ? (checked !== null ? checked : false) : null
+	)
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<rk-icon
+	bind:this={ref}
+	data-tag-icon
+	data-state={state}
+	data-tag-button={role === 'button' ? true : undefined}
+	data-tag-checkbox={isCheckbox ? true : undefined}
+	data-size={size}
+	data-disabled={disabled}
+	class={classes}
+	{role}
+	aria-label={label ?? name}
+	aria-checked={ariaChecked}
+	onclick={handleClick}
+	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
+	tabindex={validatedTabindex}
+	onmouseenter={emitter.mouseenter}
+	onnmouseleave={emitter.nmouseleave}
+>
+	<i class={name} aria-hidden="true"></i>
+</rk-icon>

package/src/forms-old/Item.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Icon from './Icon.svelte'
+	import { Proxy } from '@rokkit/states'
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('@rokkit/states').NodeProxy} [value]
+	 */
+
+	/** @type {Props} */
+	let { value, fields } = $props()
+	let proxy = $derived(new Proxy(value, fields))
+	let content = $derived(proxy.get('text'))
+	let ariaLabel = $derived(proxy.get('label') ?? content)
+	let icon = $derived(proxy.get('icon'))
+	let image = $derived(proxy.get('image'))
+</script>
+
+{#if icon}
+	<Icon name={icon} label={ariaLabel} />
+{:else if image}
+	<img src={image} alt={ariaLabel} />
+{/if}
+{#if content}
+	<p>{content}</p>
+{/if}

package/src/forms-old/ListEditor.svelte

@@ -0,0 +1,44 @@
+<script>
+	// import List from './List.svelte'
+	import FieldLayout from './FieldLayout.svelte'
+	import { defaultFields } from '@rokkit/core'
+	import { getContext } from 'svelte'
+
+	// const dispatch = createEventDispatcher()
+	const registry = getContext('registry')
+
+	let {
+		class: className,
+		value,
+		fields = defaultFields,
+		schema,
+		path = [],
+		below = false,
+		children
+	} = $props()
+
+	let index = 0
+	let item = $state(value[index])
+	let location = $state([...path, index])
+
+	function handleSelect(event) {
+		index = event.detail.indices[0]
+		item = event.detail.item
+		location = [...path, ...event.detail.indices]
+		dispatch('select', { item: value, indices: path })
+	}
+</script>
+
+<list-editor class="flex {className}">
+	<!-- <List
+		bind:items={value}
+		bind:value={item}
+		{fields}
+		using={registry.components}
+		on:select={handleSelect}
+	/> -->
+	<item-editor class="flex" class:below>
+		{@render children?.()}
+		<FieldLayout bind:value={item} {schema} path={location} />
+	</item-editor>
+</list-editor>