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

package/src/lib/nested.js

@@ -0,0 +1,192 @@
+import { omit, pick } from 'ramda'
+import { isObject } from '@rokkit/core'
+import { typeOf } from '@rokkit/data'
+import { deriveSchemaFromValue } from './schema'
+import { deriveLayoutFromValue } from './layout'
+
+/**
+ * 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, scope = '#') {
+	// eslint-disable-next-line no-use-before-define
+	return flattenAttributes(input, scope).reduce(
+		// eslint-disable-next-line no-use-before-define
+		(acc, item) => ({ ...acc, ...flattenElement(item) }),
+		{
+			[scope]: {
+				type: 'object',
+				value: input,
+				scope,
+				key: scope.split('/').slice(-1)[0]
+			}
+		}
+	)
+}
+/**
+ * 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, scope = '#') {
+	return Object.entries(input).map(([key, value]) => ({
+		key,
+		value,
+		type: typeOf(value),
+		scope: [scope, key].join('/')
+	}))
+}
+
+/**
+ * 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, scope = '#') {
+	const elements = flattenAttributes(input)
+	const atoms = elements.filter(({ type }) => !['object', 'array'].includes(type))
+
+	const schema = {
+		type: 'object'
+	}
+
+	if (atoms.length > 0) {
+		schema.properties = atoms.reduce(
+			(acc, { key, type, value }) => ({
+				...acc,
+				[key]: {
+					type,
+					default: value
+				}
+			}),
+			{}
+		)
+		schema.layout = {
+			type: 'vertical',
+			elements: atoms.map((el) => ({ label: el.key, scope: el.scope }))
+		}
+	}
+
+	if (atoms.length < elements.length) {
+		// eslint-disable-next-line no-use-before-define
+		schema.children = deriveSchemaForChildren(elements, scope)
+	}
+
+	if (scope !== '#') return schema
+	return schema.properties ? [schema] : schema.children
+}
+
+/**
+ * Derives the children of an object
+ *
+ * @param {Array} elements - The elements to derive children from
+ * @param {String} scope - The scope of the object
+ * @returns {Array} The derived children
+ */
+function deriveSchemaForChildren(elements, scope) {
+	return [
+		...elements
+			.filter(({ type }) => type === 'object')
+			.map((item) => ({
+				...omit(['value', 'scope'], item),
+				scope: [scope, item.key].join('/'),
+				...deriveNestedSchema(item.value, [scope, item.key].join('/'))
+			})),
+		...elements
+			.filter(({ type }) => type === 'array')
+			.map((item) => ({
+				...omit(['value'], item),
+				default: [],
+				scope: [scope, item.key].join('/'),
+				items: deriveSchemaFromValue(item.value.length ? item.value[0] : null),
+				layout: deriveLayoutFromValue(item.value.length ? item.value[0] : null)
+			}))
+	]
+}
+
+/**
+ * Flattens an element into a flat object
+ *
+ * @param {Object} element - The element to flatten
+ */
+export function flattenElement(element) {
+	if (element.type === 'object') {
+		return flattenObject(element.value, element.scope)
+	} else if (element.type === 'array') {
+		return element.value
+			.map((item, index) => ({
+				value: item,
+				scope: [element.scope, `[${index}]`].join('/'),
+				key: `[${index}]`,
+				type: typeOf(item)
+			}))
+			.reduce((acc, item) => ({ ...acc, ...flattenElement(item) }), {
+				[element.scope]: pick(['key', 'type', 'scope', 'value'], element)
+			})
+	}
+	return { [element.scope]: element }
+}
+
+/**
+ * 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, key = 'scope') {
+	const index = data
+		.map((item) => ({
+			...item,
+			_path: item[key],
+			_isParent: false,
+			_isExpanded: true,
+			_levels: []
+		}))
+		.sort((a, b) => a[key].localeCompare(b[key]))
+		.filter((item) => item[key] !== '#')
+
+	let levels = [0]
+	let current = 0
+
+	index.forEach((item, row) => {
+		const path = item._path.split('/').slice(1)
+		item._depth = path.length - 1
+		if (row === 0) {
+			item._levels = [0]
+		} else if (path.length > levels.length) {
+			index[row - 1]._isParent = true
+			item._levels = [...levels, 0]
+		} else {
+			current = levels[path.length - 1] + 1
+			item._levels = [...levels.slice(0, path.length - 1), current]
+		}
+		levels = item._levels
+	})
+	return index
+}
+
+/**
+ * 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, key = 'scope', ellipsis = false) {
+	let result = []
+	if (Array.isArray(data)) result = generateIndex(data, key)
+	if (isObject(data)) result = generateIndex(Object.values(flattenObject(data)), key)
+
+	if (ellipsis) {
+		result = result.map((item) => ({
+			...omit(['value'], item),
+			value: ['array', 'object'].includes(item.type) ? '...' : item.value
+		}))
+	}
+	return result
+}

package/src/lib/schema.js

@@ -0,0 +1,32 @@
+import { typeOf } from '@rokkit/data'
+
+/**
+ * Derives a schema for properties of an object.
+ *
+ * @param {Object} data
+ * @returns
+ */
+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
+}
+
+/**
+ * Derives a schema from a given value.
+ *
+ * @param {any} data
+ * @returns {import('../types').DataSchema}
+ */
+export function deriveSchemaFromValue(data) {
+	const schema = { type: typeOf(data) }
+	if (schema.type === 'array') {
+		schema.items = deriveSchemaFromValue(data.length > 0 ? data[0] : {})
+	} else if (schema.type === 'object') {
+		schema.properties = deriveObjectProperties(data)
+	}
+	return schema
+}

package/src/lib/select.js

@@ -0,0 +1,38 @@
+/**
+ * Generate the CSS position properties and values based on the anchor and viewport dimensions.
+ *
+ * @param {DOMRect} bounds - The bounding rectangle of the anchor element.
+ * @param {HTMLElement} viewport - The viewport element that determines the position.
+ * @returns {string} - A string with CSS position properties and values.
+ */
+function generatePositionCSS(bounds, viewport) {
+	const { width: viewportWidth, height: viewportHeight } = viewport.getBoundingClientRect()
+	let pos = ''
+	if (bounds.left + viewportWidth > window.innerWidth) {
+		pos += `right: ${window.innerWidth - bounds.left - bounds.width}px;`
+	} else pos += `left: ${bounds.left}px;`
+
+	if (bounds.top + viewportHeight > window.innerHeight) {
+		pos += `bottom: ${window.innerHeight - bounds.top}px;`
+	} else pos += `top: ${bounds.top + bounds.height}px;`
+
+	return pos
+}
+
+/**
+ * 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, viewport) {
+	if (typeof window === 'undefined' || !anchor || !viewport) return ''
+
+	const bounds = anchor.getBoundingClientRect()
+
+	bounds.top += window.scrollX
+	bounds.left += window.scrollY
+
+	return generatePositionCSS(bounds, viewport)
+}

package/src/lib/tree.js

@@ -13,7 +13,7 @@ export function addRootNode(items, root = '/', mapping = defaultMapping) {
 		return [
 			{
 				[mapping.fields.text]: root,
-				[mapping.fields.isOpen]: true,
+				[mapping.fields.expanded]: true,
 				[mapping.fields.children]: items
 			}
 		]

package/src/wrappers/Category.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const registry = getContext('registry')
+
+	let {
+		class: className = '',
+		options = [],
+		fields,
+		navigator = 'tabs',
+		type = 'vertical',
+		category = null,
+		children,
+		...restProps
+	} = $props()
+
+	let Template = $derived(registry.navigators[navigator] ?? registry.navigators.default)
+</script>
+
+<section class={className}>
+	{#if Template}
+		<Template {options} {fields} bind:value={category} {...restProps} />
+	{/if}
+	<field-layout class={type}>
+		{@render children?.()}
+	</field-layout>
+</section>

package/src/wrappers/Section.svelte

@@ -0,0 +1,16 @@
+<script>
+	let {
+		class: className = '',
+		title = 'Section',
+		open = true,
+		type = 'vertical',
+		children
+	} = $props()
+</script>
+
+<details bind:open class={className}>
+	<summary>{title}</summary>
+	<field-layout class={type}>
+		{@render children?.()}
+	</field-layout>
+</details>

package/src/wrappers/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/wrappers/index.js

@@ -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'