@rokkit/ui 1.0.0-next.125 → 1.0.0-next.127

package/src/TreeTable.svelte

@@ -1,171 +0,0 @@
-<script>
-	import { pick, omit } from 'ramda'
-	import { defaultMapping } from './constants'
-	import Connector from './Connector.svelte'
-	import Icon from './Icon.svelte'
-	import Item from './Item.svelte'
-
-	// const dispatch = createEventDispatcher()
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [data]
-	 * @property {any} [columns]
-	 * @property {boolean} [striped]
-	 * @property {any} [value]
-	 * @property {boolean} [multiselect]
-	 * @property {any} [using]
-	 * @property {any} [dataFilter]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: className = '',
-		data = [],
-		columns = $bindable([]),
-		striped = true,
-		value = $bindable(null),
-		multiselect = false,
-		using = $bindable({}),
-		dataFilter = () => true
-	} = $props()
-
-	let hiddenPaths = []
-	let currentItem = $state(null)
-
-	function handleItemClick(event, item) {
-		if (item._isParent) toggle(item)
-		else {
-			currentItem = item
-			value = getValue(item)
-			dispatch('click', value)
-
-			if (event.metaKey) toggleSelection(event, item)
-		}
-	}
-	function getValue(item) {
-		return omit(['_levels', '_isParent', '_isExpanded', '_depth', '_path', '_selected'], item)
-	}
-
-	function toggleSelection(e, item) {
-		e.stopPropagation()
-		e.preventDefault()
-		if (item._selected !== 'checked') item._selected = 'checked'
-		else item._selected = 'unchecked'
-
-		if (item._isParent) {
-			data
-				.filter((i) => i[nestedColumn.key].startsWith(item[nestedColumn.key] + '/'))
-				.forEach((i) => (i._selected = item._selected))
-		} else {
-			const parents = data.filter(
-				(i) => item[nestedColumn.key].startsWith(i[nestedColumn.key] + '/') && i._isParent
-			)
-			parents.map((p) => {
-				const children = data.filter((i) =>
-					i[nestedColumn.key].startsWith(p[nestedColumn.key] + '/')
-				)
-				const selectedChildren = children.filter((i) => i._selected === 'checked')
-
-				if (selectedChildren.length === children.length) p._selected = 'checked'
-				else if (selectedChildren.length === 0) p._selected = 'unchecked'
-				else p._selected = 'unknown'
-			})
-		}
-		visible = [...data.filter(dataFilter).filter(isVisible)]
-		dispatch('select', data.filter((i) => i._selected === 'checked').map(getValue))
-	}
-
-	function toggle(item) {
-		if (nestedColumn === undefined) return
-
-		const parentPath = item[nestedColumn.key] + '/'
-		if (item._isParent) {
-			item._isExpanded = !item._isExpanded
-			if (item._isExpanded) {
-				hiddenPaths = [...hiddenPaths.filter((i) => i !== parentPath)]
-			} else {
-				hiddenPaths = [...hiddenPaths, parentPath]
-			}
-			visible = [...data.filter(dataFilter).filter(isVisible)]
-		}
-	}
-
-	function isVisible(item) {
-		if (hiddenPaths.length === 0) return true
-		return !hiddenPaths.some((i) => item[nestedColumn.key].startsWith(i))
-	}
-
-	function addMultiSelectColumn(multiselect, data) {
-		if (multiselect) {
-			if (columns.some((col) => col.key === '_selected')) return
-			columns = [{ key: '_selected', label: '', width: '3rem' }, ...columns]
-			data.forEach((item) => {
-				item._selected = 'unchecked'
-			})
-		} else {
-			columns = [...columns.filter((col) => col.key !== '_selected')]
-		}
-	}
-
-	let visible = $derived(() => data.filter(dataFilter).filter(isVisible))
-	let nestedColumn = $derived(columns.find((col) => col.path))
-	$effect(() => {
-		addMultiSelectColumn(multiselect, data)
-	})
-</script>
-
-<rk-tree-table class={className}>
-	<table class:striped>
-		<thead>
-			<tr>
-				{#each columns as col (col.key)}
-					<th>{col.label ?? col.key}</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody>
-			{#each visible as item, index (index)}
-				<tr
-					class:cursor-pointer={!item._isParent}
-					aria-current={currentItem === item}
-					onclick={stopPropagation((e) => handleItemClick(e, item))}
-				>
-					{#each columns as col, index (index)}
-						{@const value = { ...pick(['icon'], col), ...item }}
-						{@const SvelteComponent = mapping.get('component', item)}
-						<td>
-							<cell>
-								{#if multiselect && index === 0}
-									<!-- {#if !item._isParent} -->
-									<Icon
-										name={'checkbox-' + item._selected}
-										class="small cursor-pointer"
-										on:click={(e) => toggleSelection(e, item)}
-									/>
-									<!-- {/if} -->
-								{:else}
-									{#if col.path}
-										{#each item._levels.slice(0, -1) as _, index (index)}
-											<Connector type="empty" />
-										{/each}
-										{#if item._isParent}
-											<Icon
-												name={item._isExpanded ? 'node-opened' : 'node-closed'}
-												class="small cursor-pointer"
-											/>
-										{:else if item._depth > 0}
-											<Connector type="empty" />
-										{/if}
-									{/if}
-									<SvelteComponent {value} {mapping} />
-								{/if}
-							</cell>
-						</td>
-					{/each}
-				</tr>
-			{/each}
-		</tbody>
-	</table>
-</rk-tree-table>

package/src/ValidationReport.svelte

@@ -1,23 +0,0 @@
-<script>
-	import { defaultStateIcons } from '@rokkit/core'
-	import Icon from './Icon.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} items
-	 * @property {any} [icons]
-	 */
-
-	/** @type {Props} */
-	let { class: classes = '', items, icons = defaultStateIcons.badge } = $props()
-</script>
-
-<rk-status-report class={classes}>
-	{#each items as { text, status }, index (index)}
-		<rk-message class={status}>
-			<Icon name={icons[status]} />
-			<p>{text}</p>
-		</rk-message>
-	{/each}
-</rk-status-report>

package/src/constants.js

@@ -1,4 +0,0 @@
-import { FieldMapper } from '@rokkit/core'
-import Item from './Item.svelte'
-
-export const defaultMapping = new FieldMapper({}, { default: Item })

package/src/index.js

@@ -1,48 +0,0 @@
-// skipcq: JS-E1004 - Needed for exposing JS Doc types
-export * from './types.js'
-export { default as Button } from './Button.svelte'
-export { default as Icon } from './Icon.svelte'
-export { default as Item } from './Item.svelte'
-export { default as Pill } from './Pill.svelte'
-export { default as ProgressBar } from './ProgressBar.svelte'
-export { default as Separator } from './Separator.svelte'
-export { default as Connector } from './Connector.svelte'
-export { default as RangeTick } from './RangeTick.svelte'
-export { default as RangeSlider } from './RangeSlider.svelte'
-
-export { default as Node } from './Node.svelte'
-export { default as Summary } from './Summary.svelte'
-export { default as BreadCrumbs } from './BreadCrumbs.svelte'
-export { default as Rating } from './Rating.svelte'
-export { default as RangeMinMax } from './RangeMinMax.svelte'
-export { default as Range } from './Range.svelte'
-export { default as RadioGroup } from './RadioGroup.svelte'
-export { default as CheckBox } from './CheckBox.svelte'
-export { default as Calendar } from './Calendar.svelte'
-export { default as ValidationReport } from './ValidationReport.svelte'
-export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'
-
-export { default as Toggle } from './Toggle.svelte'
-export { default as Switch } from './Switch.svelte'
-export { default as List } from './List.svelte'
-export { default as Accordion } from './Accordion.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 Stepper } from './Stepper.svelte'
-export { default as ProgressDots } from './ProgressDots.svelte'
-
-export { default as Card } from './Card.svelte'
-export { default as Shine } from './Shine.svelte'
-export { default as Tilt } from './Tilt.svelte'
-export { default as GraphPaper } from './GraphPaper.svelte'

package/src/lib/fields.js

@@ -1,118 +0,0 @@
-import { omit, pick } from 'ramda'
-
-/**
- * Combines array elements with schema
- *
- * @param {import('../types').LayoutElement} element
- * @param {import('../types').LayoutSchema} attribute
- */
-function combineArrayElementsWithSchema(element, attribute) {
-	// eslint-disable-next-line no-use-before-define
-	const schema = getSchemaWithLayout(attribute.props.items, element.schema)
-	return {
-		...attribute,
-		...pick(['component'], element),
-		props: {
-			...omit(['items'], attribute.props),
-			schema
-		}
-	}
-}
-
-/**
- * Combines basic elements with schema
- * @param {import('../types').LayoutElement} element
- * @param {import('../types').LayoutSchema} attribute
- * @returns
- */
-function combineBasicElementsWithSchema(element, attribute) {
-	return {
-		...attribute,
-		...pick(['component'], element),
-		props: {
-			...omit(['scope', 'props', 'component', 'key'], element),
-			...attribute.props,
-			...element.props
-		}
-	}
-}
-
-/**
- * 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, schema) {
-	if (!scope) return { props: { ...schema } }
-
-	const pathArray = scope.split('/').slice(1)
-	let schemaPointer = schema
-	let currentKey = ''
-
-	pathArray.forEach((key) => {
-		schemaPointer = schemaPointer.properties[key]
-		currentKey = key
-	})
-
-	if (!schemaPointer) throw new Error(`Invalid scope: ${scope}`)
-
-	return {
-		key: currentKey,
-		props: { ...schemaPointer }
-	}
-}
-
-/**
- * Combines an element from layout with schema
- *
- * @param {import('../types').LayoutElement} element
- * @param {import('../types').DataSchema} schema
- * @returns
- */
-function combineElementWithSchema(element, schema) {
-	const { scope } = element
-	let attribute = findAttributeByPath(scope, schema)
-
-	if (Array.isArray(element.elements)) {
-		// eslint-disable-next-line no-use-before-define
-		attribute = combineNestedElementsWithSchema(element, attribute, schema)
-	} else if (element.schema || attribute.props?.type === 'array') {
-		attribute = combineArrayElementsWithSchema(element, attribute)
-	} else {
-		attribute = combineBasicElementsWithSchema(element, attribute)
-	}
-
-	return attribute
-}
-/**
- * Combines nested elements with schema
- *
- * @param {import('../types').LayoutElement} element
- * @param {import('../types').LayoutSchema} attribute
- * @param {import('../types').DataSchema} schema
- * @returns
- */
-function combineNestedElementsWithSchema(element, attribute, schema) {
-	const temp = element.elements.map((el) => combineElementWithSchema(el, schema))
-	return {
-		...omit(['component', 'props'], attribute),
-		...omit(['scope', 'elements'], element),
-		elements: temp
-	}
-}
-
-/**
- * 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, layout) {
-	const combined = omit(['elements'], layout)
-	combined.elements = layout.elements.map((element) => combineElementWithSchema(element, schema))
-
-	return combined
-}

package/src/lib/form.js

@@ -1,72 +0,0 @@
-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/lib/index.js

@@ -1,13 +0,0 @@
-export { addRootNode } from './tree'
-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/lib/layout.js

@@ -1,63 +0,0 @@
-import { isObject } from '@rokkit/core'
-
-/**
- * Derives a layout from a given object value.
- * @param {Object} val
- * @param {string} scope
- * @param {string} label
- * @returns {import('../types').DataLayout}
- */
-function deriveElementLayout(val, scope, label) {
-	const path = `${scope}/${label}`
-	if (isObject(val)) {
-		return {
-			title: label,
-			scope: path,
-			// eslint-disable-next-line no-use-before-define
-			...deriveLayoutFromValue(val, path)
-		}
-	}
-	return { label, scope: path }
-}
-
-/**
- * Derives a layout from a given object value.
- * @param {Object} value
- * @param {string} scope
- * @returns {import('../types').DataLayout}
- */
-function deriveObjectLayout(value, scope) {
-	const elements = Object.entries(value).map(([label, val]) =>
-		deriveElementLayout(val, scope, label)
-	)
-	return { type: 'vertical', elements }
-}
-
-/**
- * Derives a layout from a given array value.
- * @param {Array<any>} value
- * @param {string} scope
- * @returns {import('../types').DataLayout}
- */
-function deriveArrayLayout(value, scope) {
-	// eslint-disable-next-line no-use-before-define
-	const schema = deriveLayoutFromValue(value[0], '#')
-	return {
-		scope,
-		schema
-	}
-}
-/**
- * Derives a layout from a given value.
- * @param {any} value
- * @param {string} scope
- * @returns {import('../types').DataLayout}
- */
-export function deriveLayoutFromValue(value, scope = '#') {
-	if (Array.isArray(value)) {
-		return deriveArrayLayout(value, scope)
-	} else if (typeof value === 'object' && value !== null) {
-		return deriveObjectLayout(value, scope)
-	}
-	return { type: 'vertical', elements: [{ scope }] }
-}