@rokkit/ui 1.0.0-next.106 → 1.0.0-next.107

package/dist/index.d.ts

@@ -24,7 +24,19 @@ export { default as List } from "./List.svelte";
 export { default as Accordion } from "./Accordion.svelte";
 export { default as NestedList } from "./NestedList.svelte";
 export { default as Tree } from "./Tree.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as MultiSelect } from "./MultiSelect.svelte";
+export { default as DropDown } from "./DropDown.svelte";
+export { default as Table } from "./TreeTable.svelte";
 export { default as ToggleThemeMode } from "./ToggleThemeMode.svelte";
 export { default as Overlay } from "./Overlay.svelte";
 export { default as Message } from "./Message.svelte";
 export { default as SlidingColumns } from "./SlidingColumns.svelte";
+export { default as InputField } from "./input/InputField.svelte";
+export { default as Form } from "./Form.svelte";
+export { default as FieldLayout } from "./FieldLayout.svelte";
+export { default as DataEditor } from "./DataEditor.svelte";
+export { default as NestedEditor } from "./NestedEditor.svelte";
+export { default as Stepper } from "./Stepper.svelte";
+export { default as ProgressDots } from "./ProgressDots.svelte";

package/dist/input/types.d.ts

@@ -0,0 +1,9 @@
+export namespace types {
+    export let string: any;
+    export let integer: any;
+    export { CheckBox as boolean };
+    export { InputSelect as enum };
+    export let phone: any;
+}
+import CheckBox from '../CheckBox.svelte';
+import InputSelect from './InputSelect.svelte';

package/dist/lib/fields.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Find an attribute in a schema by path
+ * @param {string} scope
+ * @param {import('../types').DataSchema} schema
+ * @returns {import('../types').LayoutSchema}
+ * @throws {Error} Invalid path
+ */
+export function findAttributeByPath(scope: string, schema: import("../types").DataSchema): import("../types").LayoutSchema;
+/**
+ * Get combined schema and layout
+ * @param {*} data
+ * @param {import('../types').DataSchema} schema
+ * @param {import('../types').LayoutSchema} layout
+ * @returns {import('../types').LayoutSchema}
+ */
+export function getSchemaWithLayout(schema: import("../types").DataSchema, layout: import("../types").LayoutSchema): import("../types").LayoutSchema;

package/dist/lib/form.d.ts

@@ -0,0 +1,95 @@
+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/lib/index.d.ts

@@ -1 +1,6 @@
 export { addRootNode } from "./tree";
+export { deriveSchemaFromValue } from "./schema";
+export { deriveLayoutFromValue } from "./layout";
+export { messages, dataTypes } from "./form";
+export { getSchemaWithLayout, findAttributeByPath } from "./fields";
+export { deriveNestedSchema, flattenAttributes, flattenObject, flattenElement, generateIndex, generateTreeTable } from "./nested";

package/dist/lib/layout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Derives a layout from a given value.
+ * @param {any} value
+ * @param {string} scope
+ * @returns {import('../types').DataLayout}
+ */
+export function deriveLayoutFromValue(value: any, scope?: string): import("../types").DataLayout;

package/dist/lib/nested.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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/lib/schema.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Derives a schema from a given value.
+ *
+ * @param {any} data
+ * @returns {import('../types').DataSchema}
+ */
+export function deriveSchemaFromValue(data: any): import("../types").DataSchema;

package/dist/lib/select.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get the optimal position for the list based on anchor and viewport dimensions.
+ *
+ * @param {HTMLElement} anchor - The anchor element to position the list relative to.
+ * @param {HTMLElement} viewport - The viewport element that determines the position.
+ * @returns {string} - A string with CSS position properties and values.
+ */
+export function getListPosition(anchor: HTMLElement, viewport: HTMLElement): string;

package/dist/wrappers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Wrapper } from "./Wrapper.svelte";
+export { default as Section } from "./Section.svelte";
+export { default as Category } from "./Category.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.106",
+  "version": "1.0.0-next.107",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/Accordion.svelte

@@ -1,10 +1,10 @@
 <script>
 	import { equals } from 'ramda'
-	import { createEmitter, noop, getKeyFromPath } from '@rokkit/core'
-	import { DataWrapper } from '@rokkit/states'
+	import { createEmitter, noop, getKeyFromPath, getSnippet } from '@rokkit/core'
+	import { NestedProxy } from '@rokkit/states'
 	import { navigator } from '@rokkit/actions'
-	import { defaultMapping } from './constants'
 	import Summary from './Summary.svelte'
+	import Item from './Item.svelte'
 
 	/**
 	 * @typedef {Object} Props
@@ -20,32 +20,40 @@
 	let {
 		class: classes = '',
 		items = $bindable([]),
-		mapping = defaultMapping,
+		value = $bindable(null),
+		fields,
 		autoCloseSiblings = false,
 		multiselect = false,
-		value = $bindable(null),
+		header = null,
+		footer = null,
+		empty = null,
+		stub = null,
+		extra,
 		...events
 	} = $props()
 
 	let emitter = $derived(
 		createEmitter(events, ['collapse', 'change', 'expand', 'click', 'select', 'move'])
 	)
-	let wrapper = new DataWrapper(items, mapping, value, { events, multiselect, autoCloseSiblings })
+	let wrapper = new NestedProxy(items, value, fields, { events, multiselect, autoCloseSiblings })
 </script>
 
-{#snippet listItems(items, wrapper, hierarchy = [], onchange = noop)}
-	{@const mapping = wrapper.mapping}
-	{#each items as item, index}
-		{@const Template = mapping.getComponent(item)}
-		{@const path = getKeyFromPath([...hierarchy, index])}
-		{@const props = mapping.getAttribute(item, 'props') || {}}
+{#snippet listItems(nodes, onchange = noop)}
+	{#each nodes as node}
+		{@const template = getSnippet(extra, node.get('component')) ?? stub}
+		{@const path = getKeyFromPath(node.path)}
+		{@const props = node.get('props') || {}}
 		<rk-list-item
 			role="option"
 			data-path={path}
-			aria-selected={wrapper.selected.has(path)}
-			aria-current={equals(wrapper.currentNode, item)}
+			aria-selected={node.selected}
+			aria-current={node.focused}
 		>
-			<Template bind:value={items[index]} {mapping} onchange={events.change} {...props} />
+			{#if template}
+				{@render template(node, props, onchange)}
+			{:else}
+				<Item value={node.value} fields={node.fields} />
+			{/if}
 		</rk-list-item>
 	{/each}
 {/snippet}
@@ -56,23 +64,39 @@
 	use:navigator={{ wrapper }}
 	onactivate={() => (value = wrapper.value)}
 >
-	{#each wrapper.data as item, index}
-		{@const hasItems = mapping.hasChildren(item)}
-		{@const id = 'id-' + index}
-
+	{#if header}
+		<rk-header>{@render header()}</rk-header>
+	{/if}
+	{#if wrapper.nodes.length === 0}
+		<rk-list-item role="presentation">
+			{#if empty}
+				{@render empty()}
+			{:else}
+				No items found.
+			{/if}
+		</rk-list-item>
+	{/if}
+	{#each wrapper.nodes as node, index}
 		<div
-			{id}
 			class="flex flex-col"
-			class:is-expanded={mapping.isExpanded(item)}
-			class:is-selected={equals(item, value)}
+			class:is-expanded={node.expanded}
+			class:is-selected={node.selected}
 			data-path={index}
 		>
-			<Summary {mapping} bind:value={items[index]} expanded={mapping.isExpanded(item)} />
-			{#if hasItems && mapping.isExpanded(item)}
+			<Summary
+				bind:value={wrapper.nodes[index].value}
+				fields={node.fields}
+				expanded={node.expanded}
+				hasChildren={node.hasChildren()}
+			/>
+			{#if node.expanded}
 				<rk-list role="listbox" tabindex="-1">
-					{@render listItems(item[mapping.fields.children], wrapper, [index], events.change)}
+					{@render listItems(node.children, events.change)}
 				</rk-list>
 			{/if}
 		</div>
 	{/each}
+	{#if footer}
+		<rk-footer>{@render footer()}</rk-footer>
+	{/if}
 </rk-accordion>

package/src/BreadCrumbs.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { defaultMapping } from './constants'
+	import { getSnippet } from '@rokkit/core'
+	import Item from './Item.svelte'
 
 	/**
 	 * @typedef {Object} Props
@@ -7,16 +8,15 @@
 	 * @property {any} [items]
 	 * @property {string} [separator]
 	 * @property {any} [fields]
-	 * @property {any} [using]
+	 * @property {any} [crumb]
 	 */
 
 	/** @type {Props} */
-	let { class: classes = '', items = [], separator = '/', mapping = defaultMapping } = $props()
+	let { class: classes = '', items = [], separator = '/', fields, crumb } = $props()
 </script>
 
 <rk-crumbs class={classes}>
 	{#each items as item, index}
-		{@const Component = mapping.getComponent(item)}
 		{#if index > 0}
 			<span>
 				{#if separator.length === 1}
@@ -27,7 +27,11 @@
 			</span>
 		{/if}
 		<rk-crumb class:is-selected={index === items.length - 1}>
-			<Component value={item} {mapping} />
+			{#if crumb}
+				{@render crumb(item, fields)}
+			{:else}
+				<Item value={item} {fields} />
+			{/if}
 		</rk-crumb>
 	{/each}
 </rk-crumbs>

package/src/Carousel.svelte

@@ -0,0 +1,49 @@
+<script>
+	let className = ''
+	export { className as class }
+	export let items = []
+	export let value
+	let currentIndex = 0
+
+	function handleKey(e, index) {
+		const prevIndex = currentIndex
+		if (['Enter', ' '].includes(e.key)) {
+			currentIndex = index
+		} else {
+			if (e.key === 'ArrowRight') {
+				currentIndex = currentIndex === items.length - 1 ? 0 : currentIndex + 1
+			} else if (e.key === 'ArrowLeft') {
+				currentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1
+			}
+		}
+		if (currentIndex !== prevIndex) {
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+	$: value = items[currentIndex]
+</script>
+
+{#if items.length === 0}
+	<p>No items to display</p>
+{:else}
+	<carousel class="flex w-full flex-col gap-3 {className}">
+		<slide class="flex flex-col">
+			<img src={value.src} alt={value.alt} />
+			<p>{value.text}</p>
+		</slide>
+		<dot-nav role="radiogroup">
+			{#each items as item, index}
+				<dot
+					role="radio"
+					aria-checked={currentIndex === index}
+					aria-label={`Slide ${index + 1}`}
+					on:click={() => (currentIndex = index)}
+					on:keydown={(e) => handleKey(e, index)}
+					tabindex={0}
+				>
+				</dot>
+			{/each}
+		</dot-nav>
+	</carousel>
+{/if}

package/src/DataEditor.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { setContext } from 'svelte'
+	import { writable } from 'svelte/store'
+	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} />

package/src/DropDown.svelte

@@ -0,0 +1,68 @@
+<script>
+	import { defaultFields, defaultStateIcons } from '@rokkit/core'
+	import { dismissable } from '@rokkit/actions'
+	import Icon from './Icon.svelte'
+	import Slider from './Slider.svelte'
+	import Item from './Item.svelte'
+	import List from './List.svelte'
+
+	let {
+		class: className,
+		options = [],
+		fields = defaultFields,
+		using = { default: Item },
+		value = null,
+		title = null,
+		icon = null,
+		small = false,
+		disabled = false
+	} = $props()
+
+	using = { default: Item, ...using }
+	fields = { ...defaultFields, ...fields }
+
+	let offsetTop = $state(0)
+	let open = $state(false)
+	let icons = defaultStateIcons.selector
+
+	function handleSelect(event) {
+		open = false
+		// dispatch('change', event.detail)
+	}
+</script>
+
+<drop-down
+	class="dropdown relative flex cursor-pointer select-none {className}"
+	class:open
+	aria-haspopup="true"
+	aria-controls="menu"
+>
+	<button
+		class="flex items-center"
+		bind:clientHeight={offsetTop}
+		tabindex="0"
+		use:dismissable
+		ondismiss={() => (open = false)}
+		onfocus={() => (open = true)}
+		onblur={() => (open = false)}
+	>
+		<span class="flex items-center">
+			{#if icon !== null}
+				<Icon name={icon} />
+			{/if}
+			{#if !small && title}
+				<p class="flex w-full">{title}</p>
+			{/if}
+			{#if open}
+				<Icon name={icons.opened} />
+			{:else}
+				<Icon name={icons.closed} />
+			{/if}
+		</span>
+	</button>
+	{#if open}
+		<Slider top={offsetTop + 4}>
+			<List items={options} {fields} {using} bind:value onselect={handleSelect} tabindex="-1" />
+		</Slider>
+	{/if}
+</drop-down>

package/src/DropSearch.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { defaultFields, getText } from '@rokkit/core'
+	import Select from './Select.svelte'
+
+	let { options, name, value, fields = defaultFields, ...restProps } = $props()
+
+	let searchText = $state('')
+	let searchBox
+	let filtered = $state(options)
+
+	fields = { ...defaultFields, ...fields }
+
+	function applySearch(event) {
+		searchText = event.target.value
+		if (searchText) {
+			filtered = options.filter((option) =>
+				getText(option, fields).toLowerCase().includes(searchText.toLowerCase())
+			)
+		} else filtered = options
+	}
+	function handleSelect(event) {
+		value = event.detail
+		searchText = getText(event.detail, fields)
+	}
+</script>
+
+<Select {name} bind:value options={filtered} {...restProps} {fields} onselect={handleSelect}>
+	<span class="flex flex-grow">
+		<input
+			type="text"
+			class="w-full border-none bg-transparent p-0"
+			bind:value={searchText}
+			bind:this={searchBox}
+			onchange={applySearch}
+		/>
+	</span>
+</Select>

package/src/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}
+			{@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/Fillable.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { marked } from 'marked'
+	import { mangle } from 'marked-mangle'
+	import { gfmHeadingId } from 'marked-gfm-heading-id'
+	import { fillable } from '@rokkit/actions'
+
+	export let text = ''
+	export let options = []
+	export let current = 0
+	export let check = false
+
+	marked.use(mangle())
+	marked.use(gfmHeadingId())
+</script>
+
+<!--  eslint-disable svelte/no-at-html-tags -->
+<div use:fillable={{ options, current, check }} on:remove class="flex-grow">
+	{@html marked(text)}
+</div>

package/src/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>