@rokkit/forms 1.0.0-next.122

package/src/forms-old/Tabs.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { Tabs } from 'bits-ui'
+
+	/**
+	 * @typedef {Object} TabGroupProps
+	 * @property {string}                   [class]      - Additional CSS class names
+	 * @property {any[]}                    [options]      Array of options to display
+	 * @property {FieldMapping}             [fields]     - Field mappings for extracting data
+	 * @property {any}                      [value]      - Selected value (bindable)
+	 * @property {number}                   [tabindex]   - Tabindex for keyboard navigation
+	 * @property {import('svelte').Snippet} [child]      - Snippet for rendering individual items
+	 * @property {import('svelte').Snippet} [children]     Snippet for rendering content
+	 * @property {Function}                 [onselect]   - Callback when item is selected
+	 */
+	/** @type TabGroupProps */
+	let { options = [], value = $bindable(), fields, child, children, onchange } = $props()
+
+	// let selectedGroup = options.find
+	let tabOptions = $derived(options.map((option) => new Proxy(option, fields)))
+	let initialValue = $state()
+	let activeOption = $state()
+	let childSnippet = $derived(child ?? defaultChild)
+
+	$effect.pre(() => {
+		activeOption = tabOptions.find((proxy) => equals(proxy.value, value))
+		if (activeOption) initialValue = activeOption.id
+	})
+
+	function handleChange() {
+		activeOption = tabOptions.find((proxy) => equals(proxy.id, initialValue))
+		value = activeOption?.value
+		onchange?.(value)
+		// value = data
+		// onSelect?.(data)
+	}
+</script>
+
+{#snippet defaultChild(item)}
+	{item.get('text')}
+{/snippet}
+
+<Tabs.Root onValueChange={handleChange} bind:value={initialValue}>
+	<Tabs.List>
+		{#each tabOptions as tab (tab.id)}
+			<Tabs.Trigger value={tab.id}>
+				{@render childSnippet(tab)}
+			</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+
+	<!-- {#each tabOptions as tab (tab.id)} -->
+	<Tabs.Content>
+		{@render children()}
+		<!-- <ComparisonCharts {logs} groupBy={tab.value} {m} /> -->
+	</Tabs.Content>
+	<!-- {/each} -->
+</Tabs.Root>

package/src/forms-old/Wrapper.svelte

@@ -0,0 +1,12 @@
+<script>
+	let { class: className = '', type = 'vertical', title = '', children } = $props()
+</script>
+
+<field-layout
+	class={className}
+	class:vertical={type === 'vertical'}
+	class:horizontal={type === 'horizontal'}
+	aria-label={title}
+>
+	{@render children?.()}
+</field-layout>

package/src/forms-old/input/Input.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { getContext } from 'svelte'
+	import { types } from './types'
+
+	const registry = getContext('registry')
+
+	let { value, type = 'text', using = {}, onchange, onfocus, onblur, ...restProps } = $props()
+
+	using = { ...types, ...using, ...registry?.editors }
+	let Template = using[type]
+</script>
+
+{#if type in using}
+	<Template bind:value {...restProps} {onchange} {onfocus} {onblur} />
+{:else}
+	<error>Type "{type}" is not supported by Input</error>
+{/if}

package/src/forms-old/input/InputField.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { getContext } from 'svelte'
+	import { pick, omit } from 'ramda'
+	import Icon from '../Icon.svelte'
+	import Input from './Input.svelte'
+	import { types } from './types'
+
+	const registry = getContext('registry')
+
+	let {
+		class: className,
+		name,
+		value,
+		type,
+		required,
+		status,
+		disabled,
+		message,
+		using,
+		nolabel,
+		icon,
+		label,
+		description,
+		onchange,
+		...restProps
+	} = $props()
+
+	using = { ...types, ...registry, ...using }
+	let pass = status === 'pass'
+	let fail = status === 'fail'
+	let warn = status === 'warn'
+	let rootProps = pick(['id'], restProps)
+	let properties = {
+		required,
+		readOnly: disabled,
+		...omit(['id'], restProps),
+		name
+	}
+</script>
+
+<input-field
+	{...rootProps}
+	class="flex flex-col input-{type} {className} "
+	class:disabled
+	class:pass
+	class:fail
+	class:warn
+	class:empty={!value}
+>
+	{#if label && !nolabel && !['switch', 'checkbox'].includes(type)}
+		<label for={name} class:required>
+			{label}
+		</label>
+	{/if}
+	<field class="flex w-full flex-row items-center" aria-label={description ?? label ?? name}>
+		{#if icon}
+			<Icon name={icon} />
+		{/if}
+		{#if type === 'switch'}
+			<label for={name} class:required>{label}</label>
+		{/if}
+		<Input id={name} bind:value {type} {...properties} {using} {onchange} />
+		{#if type === 'checkbox'}
+			<label for={name} class:required>{label}</label>
+		{/if}
+	</field>
+	{#if message}
+		<message class={status}>{message}</message>
+	{/if}
+</input-field>

package/src/forms-old/input/InputSelect.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { getValue, defaultFields } from '@rokkit/core'
+	import Select from '../Select.svelte'
+
+	let { name, value, options = [], fields, onchange, ...restProps } = $props()
+
+	let selected = $state()
+	let configFields = $derived({ ...defaultFields, ...fields })
+
+	function handle(data) {
+		value = getValue(data.value, configFields)
+		onchange?.(data)
+	}
+
+	$effect(() => {
+		if (value !== getValue(selected, configFields)) {
+			selected = options.find((option) => getValue(option, configFields) === value)
+		}
+	})
+</script>
+
+<input {name} type="hidden" bind:value />
+<Select name="" value={selected} {options} {fields} {...restProps} onchange={handle} />

package/src/forms-old/input/InputSwitch.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { getValue, defaultFields } from '@rokkit/core'
+	import Switch from '../Switch.svelte'
+
+	let { name, value, options, fields, onchange, ...restProps } = $props()
+	// let selected = $state(null)
+	let configFields = $derived({ ...defaultFields, ...fields })
+	function handle(data) {
+		value = getValue(data.value, configFields)
+		onchange?.(data.value)
+	}
+	let selected = $derived(options.find((option) => getValue(option, configFields) === value))
+	// $effect(() => {
+	// 	selected = options.find((option) => getValue(option, configFields) === value)
+	// })
+</script>
+
+<input {name} type="hidden" bind:value />
+<Switch bind:value={selected} {options} {fields} {...restProps} onchange={handle} />

package/src/forms-old/input/types.js

@@ -0,0 +1,29 @@
+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 '../CheckBox.svelte'
+
+// import InputSelect from './InputSelect.svelte'
+// import InputSwitch from './InputSwitch.svelte'
+
+function extractComponentMap(components, prefix = /^Input/) {
+	return Object.entries(components).reduce(
+		(acc, [name, component]) => ({
+			...acc,
+			[toHyphenCase(name.replace(prefix, ''))]: component
+		}),
+		{}
+	)
+}
+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/src/forms-old/lib/form.js

@@ -0,0 +1,72 @@
+export const messages = {
+	required: '{name} is required',
+	email: '{name} should be a valid email address',
+	url: '{name} should be a valid URL',
+	color: '{name} should be a valid color',
+	number: '{name} should be a valid number',
+	min: '{name} should be greater than or equal to {min}',
+	max: '{name} should be less than or equal to {max}',
+	pattern: '{name} should match the pattern {pattern}',
+	exclusiveMin: '{name} should be greater than {min}',
+	exclusiveMax: '{name} should be less than {max}',
+	minLength: '{name} should be at least {minLength} characters',
+	maxLength: '{name} should be at most {maxLength} characters',
+	minItems: '{name} should have at least {minItems} items',
+	maxItems: '{name} should have at most {maxItems} items',
+	uniqueItems: '{name} should have unique items',
+	contains: '{name} should contain {contains}',
+	exclude: '{name} should not contain {exclude}',
+	integer: '{name} should be an integer'
+}
+
+export const dataTypes = {
+	integer: {
+		editor: 'inputText',
+		props: { type: 'number', step: 1 },
+		availableProps: ['min', 'max']
+	},
+	number: {
+		editor: 'inputText',
+		props: { type: 'number', step: 0.01 },
+		availableProps: ['min', 'max']
+	},
+	range: {
+		editor: 'inputRange',
+		props: { type: 'range' }
+	},
+
+	string: {
+		default: 'inputText',
+		text: 'inputText',
+		password: 'inputPassword',
+		email: 'inputEmail',
+		url: 'inputUrl',
+		tel: 'inputTel',
+		date: 'inputDate',
+		'datetime-local': 'inputDateTimeLocal',
+		time: 'inputTime',
+		week: 'inputWeek',
+		month: 'inputMonth',
+		file: 'inputFile',
+		hidden: 'inputHidden',
+		color: 'inputColor',
+		colorpicker: 'inputColorPicker'
+	},
+	enum: {
+		default: 'inputSelect',
+		select: 'inputSelect',
+		radio: 'inputRadio'
+	},
+	boolean: {
+		default: 'inputCheckbox',
+		checkbox: 'inputCheckbox',
+		switch: 'inputSwitch',
+		radio: 'inputRadio'
+	},
+	array: {
+		default: 'inputArray'
+	},
+	object: {
+		default: 'inputObject'
+	}
+}

package/src/forms-old/lib/index.js

@@ -0,0 +1,12 @@
+export { messages, dataTypes } from './form'
+export { deriveSchemaFromValue } from './schema'
+export { deriveLayoutFromValue } from './layout'
+export { getSchemaWithLayout, findAttributeByPath } from './fields'
+export {
+	deriveNestedSchema,
+	flattenAttributes,
+	flattenObject,
+	flattenElement,
+	generateIndex,
+	generateTreeTable
+} from './nested'

package/src/forms-old/mocks/CustomField.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { value, name, label, type, ...extraProps } = $props()
+</script>
+
+<h1>{type}:{label}</h1>
+<p>{name}:{JSON.stringify(value)}</p>
+<p>{JSON.stringify(Object.keys(extraProps))}</p>

package/src/forms-old/mocks/CustomWrapper.svelte

@@ -0,0 +1,8 @@
+<script>
+	let { title, type, children } = $props()
+</script>
+
+<field-layout class={type}>
+	<h1>{title}</h1>
+	{@render children?.()}
+</field-layout>

package/src/forms-old/mocks/Register.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { setContext } from 'svelte'
+	// import { writable } from 'svelte/store'
+	import Wrapper from '..//Wrapper.svelte'
+	import Item from '../Item.svelte'
+	import Tabs from '../Tabs.svelte'
+	const registry = $state({})
+	setContext('registry', registry)
+
+	let { Template, using, properties } = $props()
+
+	using = {
+		editors: {},
+		components: {},
+		wrappers: {},
+		navigators: {},
+		...using
+	}
+	registry.editors = { ...using.editors }
+	registry.components = { default: Item, ...using.components }
+	registry.wrappers = { default: Wrapper, ...using.wrappers }
+	registry.navigators = { default: Tabs, ...using.navigators }
+</script>
+
+<Template {...properties} />

package/src/index.js

@@ -0,0 +1,7 @@
+export { FormBuilder } from './lib/builder.svelte.js'
+// Enhanced Input Components
+export { default as FormRenderer } from './FormRenderer.svelte'
+export { default as Input } from './Input.svelte'
+export { default as InputField } from './InputField.svelte'
+
+export * from './input'

package/src/inp/Input.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { getContext } from 'svelte'
+	import { types } from './types'
+
+	const registry = getContext('registry')
+
+	let { value, type = 'text', using = {}, ...restProps } = $props()
+
+	using = { ...types, ...using, ...registry?.editors }
+	let Template = using[type]
+</script>
+
+{#if type in using}
+	<Template bind:value {...restProps} on:change on:focus on:blur />
+{:else}
+	<error>Type "{type}" is not supported by Input</error>
+{/if}

package/src/inp/InputField.svelte

@@ -0,0 +1,69 @@
+<script>
+	import { getContext } from 'svelte'
+	import { pick, omit } from 'ramda'
+	import Icon from '../Icon.svelte'
+	import Input from './Input.svelte'
+	import { types } from './types'
+
+	const registry = getContext('registry')
+
+	let {
+		class: className,
+		name,
+		value,
+		type,
+		required,
+		status,
+		disabled,
+		message,
+		using,
+		nolabel,
+		icon,
+		label,
+		description,
+		...restProps
+	} = $props()
+
+	using = { ...types, ...registry, ...using }
+	let pass = status === 'pass'
+	let fail = status === 'fail'
+	let warn = status === 'warn'
+	let rootProps = pick(['id'], restProps)
+	let properties = {
+		required,
+		readOnly: disabled,
+		...omit(['id'], restProps),
+		name
+	}
+</script>
+
+<input-field
+	{...rootProps}
+	class="flex flex-col input-{type} {className} "
+	class:disabled
+	class:pass
+	class:fail
+	class:warn
+	class:empty={!value}
+>
+	{#if label && !nolabel && !['switch', 'checkbox'].includes(type)}
+		<label for={name} class:required>
+			{label}
+		</label>
+	{/if}
+	<field class="flex w-full flex-row items-center" aria-label={description ?? label ?? name}>
+		{#if icon}
+			<Icon name={icon} />
+		{/if}
+		{#if type === 'switch'}
+			<label for={name} class:required>{label}</label>
+		{/if}
+		<Input id={name} bind:value {type} {...properties} {using} on:change />
+		{#if type === 'checkbox'}
+			<label for={name} class:required>{label}</label>
+		{/if}
+	</field>
+	{#if message}
+		<message class={status}>{message}</message>
+	{/if}
+</input-field>

package/src/inp/InputSelect.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { getValue, defaultFields } from '@rokkit/core'
+	import Select from '../Select.svelte'
+
+	let { name, value, options = [], fields, onchange, ...restProps } = $props()
+
+	let selected = $state()
+	let configFields = $derived({ ...defaultFields, ...fields })
+
+	function handle(data) {
+		value = getValue(data.value, configFields)
+		onchange?.(data)
+	}
+
+	$effect(() => {
+		if (value !== getValue(selected, configFields)) {
+			selected = options.find((option) => getValue(option, configFields) === value)
+		}
+	})
+</script>
+
+<input {name} type="hidden" bind:value />
+<Select name="" value={selected} {options} {fields} {...restProps} onchange={handle} />

package/src/inp/InputSwitch.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { getValue, defaultFields } from '@rokkit/core'
+	import Switch from '../Switch.svelte'
+
+	let { name, value, options, fields, ...restProps } = $props()
+	// let selected = $state(null)
+	let configFields = $derived({ ...defaultFields, ...fields })
+	function handle(data) {
+		value = getValue(data.value, configFields)
+		dispatch('change', data.value)
+	}
+	let selected = $derived(options.find((option) => getValue(option, configFields) === value))
+	// $effect(() => {
+	// 	selected = options.find((option) => getValue(option, configFields) === value)
+	// })
+</script>
+
+<input {name} type="hidden" bind:value />
+<Switch bind:value={selected} {options} {fields} {...restProps} onchange={handle} />

package/src/input/InputCheckbox.svelte

@@ -0,0 +1,74 @@
+<script>
+	import { Icon } from '@rokkit/ui'
+	import { defaultStateIcons } from '@rokkit/core'
+	import { isNil } from 'ramda'
+
+	/**
+	 * @typedef {ObjectIcon} StateIcons
+	 * @property {string} checked
+	 * @property {string} unchecked
+	 * @property {string} unknown
+	 */
+
+	/**
+	 * @typedef {Object} InputCheckboxProps
+	 * @property {null|Boolean} value
+	 * @property {'default'|'custom'} variant -
+	 * @property {StateIcons} icons
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {string} name
+	 * @property {string} id
+	 */
+
+	/** @type {InputCheckboxProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		variant = 'default',
+		icons,
+		onchange,
+		onfocus,
+		onblur,
+		required,
+		disabled,
+		name,
+		id,
+		...rest
+	} = $props()
+
+	function handleChange(event) {
+		value = Boolean(event.target.checked)
+		onchange?.(value)
+	}
+
+	function toggle() {
+		value = !Boolean(value)
+		onchange?.(value)
+	}
+
+	let checked = $derived(Boolean(value))
+	let stateIcons = $derived({ ...defaultStateIcons.checkbox, ...icons })
+	let icon = $derived(stateIcons[isNil(value) ? 'unknown' : value ? 'checked' : 'unchecked'])
+</script>
+
+<div data-checkbox-root data-variant={variant}>
+	<input
+		type="checkbox"
+		hidden={variant !== 'default'}
+		{required}
+		{disabled}
+		{name}
+		{id}
+		{checked}
+		onchange={handleChange}
+		{onfocus}
+		{onblur}
+		{...rest}
+	/>
+	{#if variant !== 'default'}
+		<Icon name={icon} data-checkbox-icon role="button" onclick={toggle} />
+	{/if}
+</div>

package/src/input/InputColor.svelte

@@ -0,0 +1,42 @@
+<script>
+	/**
+	 * @typedef {Object} InputColorProps
+	 * @property {string} value
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {string} name
+	 * @property {string} id
+	 * @property {string} autocomplete
+	 */
+
+	/** @type {InputColorProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		onchange,
+		onfocus,
+		onblur,
+		required,
+		disabled,
+		name,
+		id,
+		autocomplete,
+		...rest
+	} = $props()
+</script>
+
+<input
+	bind:value
+	type="color"
+	{required}
+	{disabled}
+	{name}
+	{id}
+	{autocomplete}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>

package/src/input/InputDate.svelte

@@ -0,0 +1,54 @@
+<script>
+	/**
+	 * @typedef {Object} InputDateProps
+	 * @property {string} value
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {string} min
+	 * @property {string} max
+	 * @property {number} step
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {boolean} readonly
+	 * @property {string} name
+	 * @property {string} id
+	 * @property {string} autocomplete
+	 */
+
+	/** @type {InputDateProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		onchange,
+		onfocus,
+		onblur,
+		min,
+		max,
+		step,
+		required,
+		disabled,
+		readonly,
+		name,
+		id,
+		autocomplete,
+		...rest
+	} = $props()
+</script>
+
+<input
+	bind:value
+	type="date"
+	{min}
+	{max}
+	{step}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>