@rokkit/core 1.0.0-next.14 → 1.0.0-next.140

package/src/actions/hierarchy.js

@@ -1,180 +0,0 @@
-/**
- * A part of the path to node in hierarchy
- *
- * @typedef PathFragment
- * @property {integer}                             index  - Index to item in array
- * @property {Array<*>}                            items  - Array of items
- * @property {import('../constants').FieldMapping} fields - Field mapping for the data
- */
-
-/**
- * Check if the current item is a parent
- *
- * @param {*} item
- * @param {import('../constants').FieldMapping} fields
- * @returns {boolean}
- */
-export function hasChildren(item, fields) {
-	return (
-		typeof item === 'object' &&
-		fields.children in item &&
-		Array.isArray(item[fields.children])
-	)
-}
-
-/**
- * Check if the current item is a parent and is expanded
- *
- * @param {*} item
- * @param {import('../constants').FieldMapping} fields
- * @returns {boolean}
- */
-export function isExpanded(item, fields) {
-	if (item == null) return false
-	if (!hasChildren(item, fields)) return false
-	if (fields.isOpen in item) {
-		return item[fields.isOpen]
-	}
-	return false
-}
-
-/**
- * Verify if at least one item has children
- *
- * @param {Array<*>} items
- * @param {import('../constants').FieldMapping} fields
- * @returns {boolean}
- */
-export function isNested(items, fields) {
-	for (let i = 0; i < items.length; i++) {
-		if (hasChildren(items[i], fields)) return true
-	}
-	return false
-}
-
-/**
- * Navigate to last visible child in the hirarchy starting with the provided path
- *
- * @param {Array<PathFragment>} path - path to a node in the hierarchy
- * @returns
- */
-export function navigateToLastVisibleChild(path) {
-	let current = path[path.length - 1]
-	// console.log(current)
-	while (isExpanded(current.items[current.index], current.fields)) {
-		const items = current.items[current.index][current.fields.children]
-		const level = {
-			items,
-			index: items.length - 1,
-			fields: current.fields.fields ?? current.fields
-		}
-		path.push(level)
-		current = level
-	}
-
-	return path
-}
-
-/**
- * Navigate to the next item
- *
- * @param {Array<PathFragment>}                 path  - path to a node in the hierarchy
- * @param {Array<*>}                            items - array of items
- * @param {import('../constants').FieldMapping} fields - field mapping
- * @returns
- */
-export function moveNext(path, items, fields) {
-	if (path.length === 0) {
-		return [{ index: 0, items, fields }]
-	}
-
-	const current = path[path.length - 1]
-	if (isExpanded(current.items[current.index], current.fields)) {
-		path.push({
-			items: current.items[current.index][current.fields.children],
-			index: 0,
-			fields: current.fields.fields || current.fields
-		})
-	} else if (current.index < current.items.length - 1) {
-		current.index++
-	} else {
-		let level = path.length - 2
-		while (level >= 0) {
-			const parent = path[level]
-			if (parent.index < parent.items.length - 1) {
-				parent.index++
-				path = path.slice(0, level + 1)
-				break
-			}
-			level--
-		}
-	}
-	return path
-}
-
-/**
- * Navigate to the previous item
- *
- * @param {Array<PathFragment>} path  - path to a node in the hierarchy
- * @returns
- */
-export function movePrevious(path) {
-	if (path.length === 0) return []
-
-	const current = path[path.length - 1]
-
-	if (current.index == 0) {
-		if (path.length > 1) path.pop()
-		return path
-	}
-
-	current.index--
-	if (isExpanded(current.items[current.index], current.fields)) {
-		return navigateToLastVisibleChild(path)
-	}
-	return path
-}
-
-/**
- *
- * @param {Array<integer>} indices
- * @param {Array<*>} items
- * @param {import('../constants').FieldMapping} fields
- * @returns
- */
-export function pathFromIndices(indices, items, fields) {
-	let path = []
-	let fragment
-	indices.map((index, level) => {
-		if (level === 0) {
-			fragment = { index, items, fields }
-		} else {
-			fragment = {
-				index,
-				items: fragment.items[fragment.index][fragment.fields.children],
-				fields: fragment.fields.fields ?? fragment.fields
-			}
-		}
-		path.push(fragment)
-	})
-	return path
-}
-
-export function indicesFromPath(path) {
-	return path.map(({ index }) => index)
-}
-export function getCurrentNode(path) {
-	if (path.length === 0) return null
-	const lastIndex = path.length - 1
-	return path[lastIndex].items[path[lastIndex].index]
-}
-
-export function findItem(items, indices, fields) {
-	let item = items[indices[0]]
-	let levelFields = fields
-	for (let level = 1; level < indices.length; level++) {
-		item = item[levelFields.children][indices[level]]
-		levelFields = levelFields.fields ?? levelFields
-	}
-	return item
-}

package/src/actions/index.js

@@ -1,7 +0,0 @@
-export { fillable } from './fillable'
-export { pannable } from './pannable'
-export { navigable } from './navigable'
-export { navigator } from './navigator'
-export { dismissable } from './dismissable'
-export { themable } from './themeable'
-export { swipeable } from './swipeable'

package/src/actions/navigable.js

@@ -1,43 +0,0 @@
-export function navigable(
-	node,
-	{ horizontal = true, nested = false, enabled = true } = {}
-) {
-	// console.log(node, enabled)
-	if (!enabled) return { destroy() {} }
-	const previous = () => node.dispatchEvent(new CustomEvent('previous'))
-	const next = () => node.dispatchEvent(new CustomEvent('next'))
-	const collapse = () => node.dispatchEvent(new CustomEvent('collapse'))
-	const expand = () => node.dispatchEvent(new CustomEvent('expand'))
-	const select = () => node.dispatchEvent(new CustomEvent('select'))
-
-	const movement = horizontal
-		? { ArrowLeft: previous, ArrowRight: next }
-		: { ArrowUp: previous, ArrowDown: next }
-	const change = nested
-		? horizontal
-			? { ArrowUp: collapse, ArrowDown: expand }
-			: { ArrowLeft: collapse, ArrowRight: expand }
-		: {}
-	const actions = {
-		Enter: select,
-		' ': select,
-		...movement,
-		...change
-	}
-
-	function handleKeydown(event) {
-		if (actions[event.key]) {
-			event.preventDefault()
-			event.stopPropagation()
-			actions[event.key]()
-		}
-	}
-
-	node.addEventListener('keydown', handleKeydown)
-
-	return {
-		destroy() {
-			node.removeEventListener('keydown', handleKeydown)
-		}
-	}
-}

package/src/actions/navigator.js

@@ -1,179 +0,0 @@
-import {
-	moveNext,
-	movePrevious,
-	isNested,
-	hasChildren,
-	pathFromIndices,
-	indicesFromPath,
-	getCurrentNode
-} from './hierarchy'
-/**
- * @typedef NavigatorOptions
- * @property {Array<*>}     items           - An array containing the data set to navigate
- * @property {boolean}      [vertical=true] - Identifies whether navigation shoud be vertical or horizontal
- * @property {string}       [idPrefix='id-'] - id prefix used for identifying individual node
- * @property {import('../constants').FieldMapping} fields - Field mapping to identify attributes to be used for state and identification of children
- */
-
-/**
- * Keyboard navigation for Lists and NestedLists. The data is either nested or not and is not
- * expected to switch from nested to simple list or vice-versa.
- *
- * @param {HTMLElement}      node    - The node on which the action is to be used on
- * @param {NavigatorOptions} options - Configuration options for the action
- * @returns
- */
-export function navigator(node, options) {
-	const { fields, enabled = true, vertical = true, idPrefix = 'id-' } = options
-	let items, path, currentNode
-
-	if (!enabled) return { destroy: () => {} }
-
-	const update = (options) => {
-		items = options.items
-		path = pathFromIndices(options.indices ?? [], items, fields)
-		currentNode = getCurrentNode(path)
-	}
-
-	const next = () => {
-		const previousNode = currentNode
-		path = moveNext(path, items, fields)
-		currentNode = getCurrentNode(path)
-
-		if (previousNode !== currentNode) moveTo(node, path, currentNode, idPrefix)
-	}
-	const previous = () => {
-		const previousNode = currentNode
-		path = movePrevious(path)
-		if (path.length > 0) {
-			currentNode = getCurrentNode(path)
-			if (previousNode !== currentNode)
-				moveTo(node, path, currentNode, idPrefix)
-		}
-	}
-	const select = () => {
-		if (currentNode)
-			node.dispatchEvent(
-				new CustomEvent('select', {
-					detail: { path: indicesFromPath(path), node: currentNode }
-				})
-			)
-	}
-	const collapse = () => {
-		if (currentNode) {
-			const collapse =
-				hasChildren(currentNode, path[path.length - 1].fields) &&
-				currentNode[path[path.length - 1].fields.isOpen]
-			if (collapse) {
-				currentNode[path[path.length - 1].fields.isOpen] = false
-				node.dispatchEvent(
-					new CustomEvent('collapse', {
-						detail: { path: indicesFromPath(path), node: currentNode }
-					})
-				)
-			} else if (path.length > 0) {
-				path = path.slice(0, -1)
-				currentNode = getCurrentNode(path)
-				select()
-			}
-		}
-	}
-	const expand = () => {
-		if (currentNode && hasChildren(currentNode, path[path.length - 1].fields)) {
-			currentNode[path[path.length - 1].fields.isOpen] = true
-			node.dispatchEvent(
-				new CustomEvent('expand', {
-					detail: { path: indicesFromPath(path), node: currentNode }
-				})
-			)
-		}
-	}
-
-	update(options)
-
-	const nested = isNested(items, fields)
-	const movement = vertical
-		? { ArrowDown: next, ArrowUp: previous }
-		: { ArrowRight: next, ArrowLeft: previous }
-	const states = !nested
-		? {}
-		: vertical
-		? { ArrowRight: expand, ArrowLeft: collapse }
-		: { ArrowDown: expand, ArrowUp: collapse }
-	const actions = { ...movement, Enter: select, ...states }
-
-	const handleKeyDown = (event) => {
-		if (actions[event.key]) {
-			event.preventDefault()
-			event.stopPropagation()
-			actions[event.key]()
-		}
-	}
-
-	const handleClick = (event) => {
-		let target = findParentWithDataPath(event.target)
-		let indices = !target
-			? []
-			: target.dataset.path
-					.split(',')
-					.filter((item) => item !== '')
-					.map((item) => +item)
-
-		if (indices.length > 0 && event.target.tagName != 'DETAIL') {
-			path = pathFromIndices(indices, items, fields)
-			currentNode = getCurrentNode(path)
-			if (hasChildren(currentNode, path[path.length - 1].fields)) {
-				currentNode[path[path.length - 1].fields.isOpen] =
-					!currentNode[path[path.length - 1].fields.isOpen]
-				const event = currentNode[path[path.length - 1].fields.isOpen]
-					? 'expand'
-					: 'collapse'
-				node.dispatchEvent(
-					new CustomEvent(event, {
-						detail: { path: indices, node: currentNode }
-					})
-				)
-			}
-			node.dispatchEvent(
-				new CustomEvent('select', {
-					detail: { path: indices, node: currentNode }
-				})
-			)
-		}
-	}
-
-	node.addEventListener('keydown', handleKeyDown)
-	node.addEventListener('click', handleClick)
-
-	return {
-		update,
-		destroy() {
-			node.removeEventListener('keydown', handleKeyDown)
-			node.removeEventListener('click', handleClick)
-		}
-	}
-}
-
-export function moveTo(node, path, currentNode, idPrefix) {
-	const indices = indicesFromPath(path)
-
-	let current = node.querySelector('#' + idPrefix + indices.join('-'))
-	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-
-	node.dispatchEvent(
-		new CustomEvent('move', {
-			detail: { path: indices, node: currentNode }
-		})
-	)
-}
-
-export function findParentWithDataPath(element) {
-	if (element.hasAttribute('data-path')) return element
-	let parent = element.parentNode
-
-	while (parent && !parent.hasAttribute('data-path')) {
-		parent = parent.parentNode
-	}
-
-	return parent
-}

package/src/actions/pannable.js

@@ -1,50 +0,0 @@
-/**
- * Handle drag and move events
- *
- * @param {*} node
- * @returns
- */
-export function pannable(node) {
-	let x
-	let y
-
-	function track(event, name, delta = {}) {
-		x = event.clientX
-		y = event.clientY
-		event.stopPropagation()
-		event.preventDefault()
-		node.dispatchEvent(
-			new CustomEvent(name, {
-				detail: { x, y, ...delta }
-			})
-		)
-	}
-
-	function handleMousedown(event) {
-		track(event, 'panstart')
-		window.addEventListener('mousemove', handleMousemove)
-		window.addEventListener('mouseup', handleMouseup)
-	}
-
-	function handleMousemove(event) {
-		const dx = event.clientX - x
-		const dy = event.clientY - y
-
-		track(event, 'panmove', { dx, dy })
-	}
-
-	function handleMouseup(event) {
-		track(event, 'panend')
-
-		window.removeEventListener('mousemove', handleMousemove)
-		window.removeEventListener('mouseup', handleMouseup)
-	}
-
-	node.addEventListener('mousedown', handleMousedown)
-
-	return {
-		destroy() {
-			node.removeEventListener('mousedown', handleMousedown)
-		}
-	}
-}

package/src/actions/swipeable.js

@@ -1,56 +0,0 @@
-// const defaultOptions = { horizontal: true, vertical: false, threshold: 100 }
-export function swipeable(
-	node,
-	{ horizontal = true, vertical = false, threshold = 100, enabled = true } = {}
-) {
-	if (!enabled) return { destroy() {} }
-
-	let startX
-	let startY
-
-	function touchStart(event) {
-		const touch = event.touches ? event.touches[0] : event
-		startX = touch.clientX
-		startY = touch.clientY
-	}
-
-	function touchEnd(event) {
-		const touch = event.changedTouches ? event.changedTouches[0] : event
-		const distX = touch.clientX - startX
-		const distY = touch.clientY - startY
-
-		if (horizontal) {
-			if (Math.abs(distX) > Math.abs(distY) && Math.abs(distX) >= threshold) {
-				if (distX > 0) {
-					node.dispatchEvent(new CustomEvent('swipeRight'))
-				} else {
-					node.dispatchEvent(new CustomEvent('swipeLeft'))
-				}
-			}
-		}
-
-		if (vertical) {
-			if (Math.abs(distY) > Math.abs(distX) && Math.abs(distY) >= threshold) {
-				if (distY > 0) {
-					node.dispatchEvent(new CustomEvent('swipeDown'))
-				} else {
-					node.dispatchEvent(new CustomEvent('swipeUp'))
-				}
-			}
-		}
-	}
-
-	node.addEventListener('touchstart', touchStart)
-	node.addEventListener('touchend', touchEnd)
-	node.addEventListener('mousedown', touchStart)
-	node.addEventListener('mouseup', touchEnd)
-
-	return {
-		destroy() {
-			node.removeEventListener('touchstart', touchStart)
-			node.removeEventListener('touchend', touchEnd)
-			node.removeEventListener('mousedown', touchStart)
-			node.removeEventListener('mouseup', touchEnd)
-		}
-	}
-}

package/src/actions/themeable.js

@@ -1,23 +0,0 @@
-import { theme } from '../stores'
-
-/**
- * Sets theme level classes based on the theme store
- *
- * @param {HTMLElement} node
- */
-export function themable(node) {
-	let previous = {}
-
-	theme.subscribe((data) => {
-		if (data.name && data.name !== previous.name) {
-			node.classList.remove(previous.name)
-			node.classList.add(data.name)
-		}
-		if (data.mode && data.mode !== previous.mode) {
-			node.classList.remove(previous.mode)
-			node.classList.add(data.mode)
-		}
-
-		previous = data
-	})
-}

package/src/items/Collapsible.svelte

@@ -1,51 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from '../constants'
-
-	const dispatch = createEventDispatcher()
-
-	export let content
-	export let fields = {}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: hasItems = content[fields.children] && content[fields.children].length > 0
-
-	function toggle() {
-		if (hasItems) {
-			content.isOpen = !content.isOpen
-		}
-		dispatch('toggle', content)
-	}
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<collapsible
-	class="flex flex-row flex-shrink-0 items-center w-full leading-loose cursor-pointer"
-	class:expanded={content.isOpen}
-	on:click={toggle}
->
-	{#if content[fields.image]}
-		<img
-			class="h-8 w-8 rounded-full"
-			alt={content[fields.text]}
-			src={content[fields.image]}
-		/>
-	{/if}
-	{#if content[fields.icon]}
-		<icon class={content[fields.icon]} />
-	{/if}
-	{#if content[fields.url]}
-		<a href={content[fields.url]} class="flex flex-grow">
-			{content[fields.text]}
-		</a>
-	{:else}
-		<p class="flex flex-grow">{content[fields.text]}</p>
-	{/if}
-	{#if hasItems}
-		{#if content.isOpen}
-			<icon class="sm accordion-opened" aria-label="expand" />
-		{:else}
-			<icon class="sm accordion-closed" aria-label="collapse" />
-		{/if}
-	{/if}
-</collapsible>

package/src/items/Connector.svelte

@@ -1,26 +0,0 @@
-<script>
-	export let type
-	export let rtl = false
-</script>
-
-<span class="grid grid-rows-2 grid-cols-2 h-full w-4">
-	{#if type === 'last'}
-		{#if rtl}
-			<i class="border-b border-r" />
-		{:else}
-			<i class="border-r" />
-			<i class="border-b" />
-		{/if}
-	{:else if type === 'middle'}
-		{#if rtl}
-			<i class="border-r grid grid-rows-2 row-span-2">
-				<i class="border-b" />
-			</i>
-		{:else}
-			<i class="border-r col-span-1 row-span-2" />
-			<i class="border-b" />
-		{/if}
-	{:else if type === 'line'}
-		<i class="border-r row-span-2" />
-	{/if}
-</span>

package/src/items/Link.svelte

@@ -1,18 +0,0 @@
-<script>
-	import Text from './Text.svelte'
-	import { defaultFields } from '../constants'
-
-	export let content
-	export let fields = defaultFields
-
-	$: target = fields.target ? content[fields.target] : ''
-</script>
-
-<a
-	class="flex flex-row flex-grow gap-2 items-center content"
-	href={content[fields.url]}
-	{target}
-	tabindex="-1"
->
-	<Text {content} {fields} />
-</a>

package/src/items/Node.svelte

@@ -1,52 +0,0 @@
-<script>
-	import Connector from './Connector.svelte'
-	import { defaultFields, defaultStateIcons } from '../constants'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher()
-	export let content
-	export let fields = defaultFields
-	export let types = []
-	export let stateIcons = defaultStateIcons.node
-	export let linesVisible = true
-	export let selected = false
-	export let using = {}
-	export let rtl = false
-	export let path = []
-
-	$: hasChildren = fields.children in content
-	$: state =
-		hasChildren && content[fields.isOpen]
-			? { icon: stateIcons.opened, label: 'collapse' }
-			: { icon: stateIcons.closed, label: 'expand' }
-	$: component = content[fields.component]
-		? using[content[fields.component]] || using.default
-		: using.default
-
-	// function toggle() {
-	// 	if (hasChildren) content[fields.isOpen] = !content[fields.isOpen]
-	// 	dispatch('select', content)
-	// }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<node
-	id={'id-' + path.join('-')}
-	class="flex flex-row h-8 gap-2 leading-loose items-center cursor-pointer select-none"
-	class:is-selected={selected}
-	aria-selected={selected}
-	role="option"
-	data-path={path.join(',')}
->
-	{#each types.slice(1) as type}
-		<Connector type={linesVisible ? type : 'empty'} />
-	{/each}
-
-	{#if hasChildren}
-		<span class="flex flex-col w-4 h-full items-center justify-center">
-			<icon class={state.icon} aria-label={state.label} tabindex="-1" />
-		</span>
-	{/if}
-
-	<svelte:component this={component} bind:content />
-</node>