@rokkit/forms 1.0.0-next.122

package/src/input/InputDateTime.svelte

@@ -0,0 +1,54 @@
+<script>
+	/**
+	 * @typedef {Object} InputDateTimeProps
+	 * @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 {InputDateTimeProps & { [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="datetime-local"
+	{min}
+	{max}
+	{step}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>

package/src/input/InputEmail.svelte

@@ -0,0 +1,63 @@
+<script>
+	/**
+	 * @typedef {Object} InputEmailProps
+	 * @property {string} value
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {string} placeholder
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {boolean} readonly
+	 * @property {string} name
+	 * @property {string} id
+	 * @property {string} autocomplete
+	 * @property {number} maxlength
+	 * @property {number} minlength
+	 * @property {string} pattern
+	 * @property {number} size
+	 * @property {boolean} multiple
+	 */
+
+	/** @type {InputEmailProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		onchange,
+		onfocus,
+		onblur,
+		placeholder,
+		required,
+		disabled,
+		readonly,
+		name,
+		id,
+		autocomplete,
+		maxlength,
+		minlength,
+		pattern,
+		size,
+		multiple,
+		...rest
+	} = $props()
+</script>
+
+<input
+	bind:value
+	type="email"
+	{placeholder}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{maxlength}
+	{minlength}
+	{pattern}
+	{size}
+	{multiple}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>

package/src/input/InputFile.svelte

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

package/src/input/InputMonth.svelte

@@ -0,0 +1,54 @@
+<script>
+	/**
+	 * @typedef {Object} InputMonthProps
+	 * @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 {InputMonthProps & { [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="month"
+	{min}
+	{max}
+	{step}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>

package/src/input/InputNumber.svelte

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

package/src/input/InputPassword.svelte

@@ -0,0 +1,60 @@
+<script>
+	/**
+	 * @typedef {Object} InputPasswordProps
+	 * @property {string} value
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {string} placeholder
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {boolean} readonly
+	 * @property {string} name
+	 * @property {string} id
+	 * @property {string} autocomplete
+	 * @property {number} maxlength
+	 * @property {number} minlength
+	 * @property {string} pattern
+	 * @property {number} size
+	 */
+
+	/** @type {InputPasswordProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		onchange,
+		onfocus,
+		onblur,
+		placeholder,
+		required,
+		disabled,
+		readonly,
+		name,
+		id,
+		autocomplete,
+		maxlength,
+		minlength,
+		pattern,
+		size,
+		...rest
+	} = $props()
+</script>
+
+<input
+	bind:value
+	type="password"
+	{placeholder}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{maxlength}
+	{minlength}
+	{pattern}
+	{size}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>

package/src/input/InputRadio.svelte

@@ -0,0 +1,60 @@
+<script>
+	import { getItemAtIndex, getIndexForItem, noop } from '@rokkit/core'
+	import { Proxy as RokProxy } from '@rokkit/states'
+	// import { equals } from 'ramda'
+	/**
+	 * @typedef {Object} InputRadioProps
+	 * @property {string} [class]
+	 * @property {any} value
+	 * @property {Object} [fields]
+	 * @property {any} [options]
+	 * @property {boolean} [disabled]
+	 * @property {boolean} [flip]
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 */
+
+	/** @type {InputRadioProps & { [key: string]: any }} */
+	let {
+		class: className = '',
+		value = $bindable(),
+		fields,
+		options = [],
+		disabled = false,
+		onchange = noop,
+		onfocus,
+		onblur,
+		...rest
+	} = $props()
+
+	const handleChange = () => {
+		value = getItemAtIndex(options, currentIndex)
+		onchange?.(value)
+	}
+
+	let currentIndex = $derived(getIndexForItem(options, value))
+
+	// $effect.pre(() => {
+	// 	currentIndex = getIndexForItem(options, value)
+	// })
+</script>
+
+<radio-group class={className} class:disabled>
+	{#each options as item, index (index)}
+		{@const proxy = new RokProxy(item, fields)}
+		<label class="flex flex-row items-center gap-2 rtl:flex-row-reverse">
+			<input
+				type="radio"
+				{...rest}
+				bind:group={currentIndex}
+				value={index}
+				{disabled}
+				onchange={handleChange}
+				{onfocus}
+				{onblur}
+			/>
+			<p>{proxy.get('text')}</p>
+		</label>
+	{/each}
+</radio-group>

package/src/input/InputRange.svelte

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

package/src/input/InputSelect.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { defaultStateIcons } from '@rokkit/core'
+	import { Proxy } from '@rokkit/states'
+	import { equals } from 'ramda'
+
+	/**
+	 * @typedef {Object} InputSelectProps
+	 * @property {any}           value
+	 * @property {Object}        fields
+	 * @property {Array<Object>} options
+	 * @property {Function}      onchange
+	 * @property {Function}      onfocus
+	 * @property {Function}      onblur
+	 */
+
+	/** @type {InputSelectProps & { [key: string]: any }} */
+	let {
+		class: classes = '',
+		value = $bindable(),
+		fields,
+		options = [],
+		icons = defaultStateIcons['selector'],
+		placeholder = null,
+		onchange,
+		onfocus,
+		onblur,
+		...rest
+	} = $props()
+
+	let focused = $state(false)
+	let icon = $derived(focused ? icons['opened'] : icons['closed'])
+	let indexValue = $state(options.findIndex((item) => equals(item, value)))
+	let proxiedOptions = $derived(options.map((option) => new Proxy(option, fields)))
+
+	function handleChange(event) {
+		value = options[indexValue]
+		onchange?.(options[indexValue])
+	}
+
+	function handleFocus(event) {
+		focused = true
+		onfocus?.(event)
+	}
+
+	function handleBlur(event) {
+		focused = false
+		onblur?.(event)
+	}
+</script>
+
+<div data-input-select class={classes}>
+	<select
+		bind:value={indexValue}
+		{...rest}
+		onchange={handleChange}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+	>
+		{#if placeholder}
+			<option value="" disabled selected>{placeholder}</option>
+		{/if}
+		{#each proxiedOptions as option, index (index)}
+			<option value={index} aria-current={equals(option.value, value)}>
+				{option.get('text')}
+			</option>
+		{/each}
+	</select>
+	<span>
+		<i class={icon}></i>
+	</span>
+</div>

package/src/input/InputSwitch.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { getValue, defaultFields } from '@rokkit/core'
+	import Switch from '@rokkit/bits-ui'
+
+	/**
+	 * @typedef {Object} InputSwitchProps
+	 * @property {string} name
+	 * @property {any} value
+	 * @property {Array<Object>} options
+	 * @property {Object} fields
+	 * @property {Function} onchange
+	 */
+
+	/** @type {InputSwitchProps & { [key: string]: any }} */
+	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/input/InputTel.svelte

@@ -0,0 +1,60 @@
+<script>
+	/**
+	 * @typedef {Object} InputTelProps
+	 * @property {string} value
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {string} placeholder
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {boolean} readonly
+	 * @property {string} name
+	 * @property {string} id
+	 * @property {string} autocomplete
+	 * @property {number} maxlength
+	 * @property {number} minlength
+	 * @property {string} pattern
+	 * @property {number} size
+	 */
+
+	/** @type {InputTelProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		onchange,
+		onfocus,
+		onblur,
+		placeholder,
+		required,
+		disabled,
+		readonly,
+		name,
+		id,
+		autocomplete,
+		maxlength,
+		minlength,
+		pattern,
+		size,
+		...rest
+	} = $props()
+</script>
+
+<input
+	bind:value
+	type="tel"
+	{placeholder}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{maxlength}
+	{minlength}
+	{pattern}
+	{size}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>

package/src/input/InputText.svelte

@@ -0,0 +1,60 @@
+<script>
+	/**
+	 * @typedef {Object} InputTextProps
+	 * @property {string} value
+	 * @property {Function} onchange
+	 * @property {Function} onfocus
+	 * @property {Function} onblur
+	 * @property {string} placeholder
+	 * @property {boolean} required
+	 * @property {boolean} disabled
+	 * @property {boolean} readonly
+	 * @property {string} name
+	 * @property {string} id
+	 * @property {string} autocomplete
+	 * @property {number} maxlength
+	 * @property {number} minlength
+	 * @property {string} pattern
+	 * @property {number} size
+	 */
+
+	/** @type {InputTextProps & { [key: string]: any }} */
+	let {
+		value = $bindable(),
+		onchange,
+		onfocus,
+		onblur,
+		placeholder,
+		required,
+		disabled,
+		readonly,
+		name,
+		id,
+		autocomplete,
+		maxlength,
+		minlength,
+		pattern,
+		size,
+		...rest
+	} = $props()
+</script>
+
+<input
+	bind:value
+	type="text"
+	{placeholder}
+	{required}
+	{disabled}
+	{readonly}
+	{name}
+	{id}
+	{autocomplete}
+	{maxlength}
+	{minlength}
+	{pattern}
+	{size}
+	{onchange}
+	{onfocus}
+	{onblur}
+	{...rest}
+/>