@rokkit/core 1.0.0-next.32 → 1.0.0-next.34

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,57 +0,0 @@
-// pannable.js
-/**
- * Handle drag and move events
- *
- * @param {*} node
- * @returns
- */
-export function pannable(node) {
-	let x
-	let y
-
-	function track(event, name, delta = {}) {
-		x = event.clientX || event.touches[0].clientX
-		y = event.clientY || event.touches[0].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)
-		window.addEventListener('touchmove', handleMousemove, { passive: false })
-		window.addEventListener('touchend', handleMouseup)
-	}
-
-	function handleMousemove(event) {
-		const dx = (event.clientX || event.touches[0].clientX) - x
-		const dy = (event.clientY || event.touches[0].clientY) - y
-
-		track(event, 'panmove', { dx, dy })
-	}
-
-	function handleMouseup(event) {
-		track(event, 'panend')
-
-		window.removeEventListener('mousemove', handleMousemove)
-		window.removeEventListener('mouseup', handleMouseup)
-		window.removeEventListener('touchmove', handleMousemove)
-		window.removeEventListener('touchend', handleMouseup)
-	}
-
-	node.addEventListener('mousedown', handleMousedown)
-	node.addEventListener('touchstart', handleMousedown, { passive: false })
-
-	return {
-		destroy() {
-			node.removeEventListener('mousedown', handleMousedown)
-			node.removeEventListener('touchstart', handleMousedown)
-		}
-	}
-}

package/src/actions/swipeable.js

@@ -1,55 +0,0 @@
-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/constants.js

@@ -1,95 +0,0 @@
-export const defaultIcons = [
-	'accordion-opened',
-	'accordion-closed',
-	'action-remove',
-	'action-add',
-	'action-clear',
-	'action-search',
-	'action-close',
-	'action-close-filled',
-	'node-opened',
-	'node-closed',
-	'selector-opened',
-	'selector-closed',
-	'checkbox-checked',
-	'checkbox-unchecked',
-	'checkbox-unknown',
-	'rating-filled',
-	'rating-empty',
-	'radio-off',
-	'radio-on',
-	'mode-dark',
-	'mode-light',
-	'navigate-left',
-	'navigate-right',
-	'navigate-up',
-	'navigate-down'
-]
-
-export const defaultOptions = {
-	id: 'id',
-	label: 'label',
-	value: 'value',
-	checked: 'checked'
-}
-
-/**
- * Structure to map custom fields for rendering
- *
- * @typedef FieldMapping
- * @property {string} [id='id']              - Unique id for the item
- * @property {string} [text='text']          - Attribute to identify the text to render
- * @property {string} [url='url']            - Attribute to identify a URL
- * @property {string} [icon='icon']          - Attribute to identify an icon class to render
- * @property {string} [image='image']        - Attribute to identify an image to render
- * @property {string} [children='children']  - Attribute to identify children of the current item
- * @property {string} [summary='summary']
- * @property {string} [notes='notes']
- * @property {string} [props='props']
- * @property {string} [isOpen='_open']       - Attribute to identify if the current item is open
- * @property {string} [level='level']        - Attribute to identify level of current item
- * @property {string} [parent='parent']      - Attribute to identify if the current item is a parent
- * @property {string} [isDeleted='_deleted'] - Attribute to identify if the current item is deleted
- * @property {FieldMapping} [fields?]        - Field mapping to be used on children in the next level
- */
-export const defaultFields = {
-	id: 'id',
-	url: 'url',
-	text: 'text',
-	children: 'children',
-	icon: 'icon',
-	image: 'image',
-	component: 'component',
-	summary: 'summary',
-	notes: 'notes',
-	props: 'props',
-	target: 'target',
-	state: 'state',
-	isOpen: '_open',
-	isDeleted: '_deleted',
-	level: 'level',
-	parent: 'parent'
-}
-
-export const defaultKeyMap = {
-	ArrowRight: 'open',
-	ArrowLeft: 'close',
-	ArrowDown: 'down',
-	ArrowUp: 'up',
-	Enter: 'select',
-	Escape: 'deselect'
-}
-
-export function stateIconsFromNames(icons) {
-	return icons
-		.map((k) => [...k.split('-')])
-		.reduce(
-			(acc, parts) => ({
-				...acc,
-				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
-			}),
-			{}
-		)
-}
-
-export const defaultStateIcons = stateIconsFromNames(defaultIcons)

package/src/items/Connector.svelte

@@ -1,28 +0,0 @@
-<script>
-	export let type = null
-	export let rtl = false
-
-	$: type = ['last', 'child', 'sibling'].includes(type) ? type : 'empty'
-</script>
-
-<span class="grid grid-rows-2 grid-cols-2 h-full min-w-4 w-4 line-{type}">
-	{#if type === 'last'}
-		{#if rtl}
-			<i class="border-b border-r" />
-		{:else}
-			<i class="border-r" />
-			<i class="border-b" />
-		{/if}
-	{:else if type === 'child'}
-		{#if rtl}
-			<i class="grid row-span-2 grid-rows-2 border-r">
-				<i class="border-b" />
-			</i>
-		{:else}
-			<i class="col-span-1 row-span-2 border-r" />
-			<i class="border-b" />
-		{/if}
-	{:else if type === 'sibling'}
-		<i class="row-span-2 border-r" />
-	{/if}
-</span>

package/src/items/Item.svelte

@@ -1,29 +0,0 @@
-<script>
-	import { defaultFields } from '../constants'
-	import Icon from '../Icon.svelte'
-
-	export let value
-	export let fields = defaultFields
-
-	$: isObject = typeof value == 'object'
-	$: text = isObject ? value[fields.text] : value
-</script>
-
-{#if isObject}
-	{#if value[fields.icon]}
-		{@const iconName =
-			typeof value[fields.icon] == 'object'
-				? value[fields.icon][value[fields.state]]
-				: value[fields.icon]}
-		<Icon name={iconName} />
-	{:else if value[fields.image]}
-		<img
-			class="h-4 w-4 object-cover"
-			alt={value[fields.text]}
-			src={value[fields.image]}
-		/>
-	{/if}
-{/if}
-{#if text}
-	<p class="w-full flex">{text}</p>
-{/if}

package/src/items/ItemWrapper.svelte

@@ -1,47 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields, defaultStateIcons } from '../constants'
-	import Item from './Item.svelte'
-	import Icon from '../Icon.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let value
-	export let fields = defaultFields
-	export let using = { default: Item }
-	export let removable = false
-	export let selected = false
-	export let index = null
-	export let icons = defaultStateIcons.action
-
-	function handleClick() {
-		dispatch('remove', value)
-	}
-
-	$: component =
-		typeof value == 'object'
-			? using[value[fields.component] ?? 'default']
-			: using.default
-</script>
-
-<wrap-item
-	class="flex flex-row items-center {className}"
-	role="option"
-	aria-selected={selected}
-	data-path={index}
->
-	<item class="flex flex-row items-center">
-		<svelte:component this={component} bind:value {fields} />
-	</item>
-	{#if removable}
-		<Icon
-			name={icons.remove}
-			role="button"
-			label="Remove"
-			size="small"
-			on:click={handleClick}
-		/>
-	{/if}
-</wrap-item>

package/src/items/Link.svelte

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

package/src/items/Node.svelte

@@ -1,47 +0,0 @@
-<script>
-	import { defaultFields, defaultStateIcons } from '../constants'
-	import Icon from '../Icon.svelte'
-	import Connector from './Connector.svelte'
-
-	export let value
-	export let fields = defaultFields
-	export let types = []
-	export let stateIcons = defaultStateIcons.node
-
-	export let selected = false
-	export let using = {}
-	export let rtl = false
-	export let path = []
-
-	$: stateIcons = { ...defaultStateIcons.node, ...(stateIcons ?? {}) }
-	$: hasChildren = fields.children in value
-	$: state =
-		hasChildren && value[fields.isOpen]
-			? { icon: stateIcons.opened, label: 'collapse' }
-			: { icon: stateIcons.closed, label: 'expand' }
-	$: component = value[fields.component]
-		? using[value[fields.component]] || using.default
-		: using.default
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<node
-	id={'id-' + path.join('-')}
-	class="min-h-5 flex flex-row cursor-pointer select-none items-center"
-	class:is-selected={selected}
-	class:flex-row-reverse={rtl}
-	aria-selected={selected}
-	role="option"
-	data-path={path.join(',')}
->
-	{#each types as type}
-		{#if type === 'icon'}
-			<Icon name={state.icon} label={state.label} class="small w-4" />
-		{:else}
-			<Connector {type} />
-		{/if}
-	{/each}
-	<item>
-		<svelte:component this={component} bind:value {fields} />
-	</item>
-</node>

package/src/items/Separator.svelte

@@ -1 +0,0 @@
-<span class="separator my-4 flex flex-grow" />

package/src/items/Summary.svelte

@@ -1,27 +0,0 @@
-<script>
-	import { defaultFields } from '../constants'
-	import Item from './Item.svelte'
-
-	export let value
-	export let fields = {}
-	export let using = {}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Item, ...using }
-	$: hasItems = value[fields.children] && value[fields.children].length > 0
-	$: component = using[value[fields.component] ?? 'default']
-</script>
-
-<summary
-	class="w-full flex flex-shrink-0 flex-row cursor-pointer items-center"
-	tabindex="-1"
->
-	<svelte:component this={component} bind:value {fields} />
-	{#if hasItems}
-		{#if value[fields.isOpen]}
-			<icon class="accordion-opened sm" aria-label="expand" />
-		{:else}
-			<icon class="accordion-closed sm" aria-label="collapse" />
-		{/if}
-	{/if}
-</summary>

package/src/items/index.js

@@ -1,7 +0,0 @@
-export { default as Item } from './Item.svelte'
-export { default as Link } from './Link.svelte'
-export { default as Node } from './Node.svelte'
-export { default as ItemWrapper } from './ItemWrapper.svelte'
-export { default as Connector } from './Connector.svelte'
-export { default as Separator } from './Separator.svelte'
-export { default as Summary } from './Summary.svelte'

package/src/lib/connector.js

@@ -1,12 +0,0 @@
-export function getLineTypes(
-	hasChildren = false,
-	parentTypes = [],
-	position = 'child'
-) {
-	let types = parentTypes.slice(0, -1).map((type) => {
-		return type === 'child' ? 'sibling' : type === 'last' ? 'empty' : type
-	})
-	if (parentTypes.length > 0) types.push(position)
-	types.push(hasChildren ? 'icon' : 'empty')
-	return types
-}

package/src/lib/index.js

@@ -1,7 +0,0 @@
-export * from './nested'
-
-export function getComponent(item, fields, using) {
-	return fields.component
-		? item[fields.component] ?? using.default
-		: using.default
-}

package/src/lib/nested.js

@@ -1,45 +0,0 @@
-import { omit } from 'ramda'
-import { defaultFields } from '../constants'
-
-export function flattenNestedList(items, fields = defaultFields, level = 0) {
-	fields = { ...defaultFields, ...fields }
-	let data = []
-	items.map((item) => {
-		const children = item[fields.children] ?? []
-		data = [
-			...data,
-			{
-				...omit([fields.children], item),
-				[fields.level]: level,
-				[fields.parent]: children.length > 0
-			},
-			...flattenNestedList(children, fields, level + 1)
-		]
-	})
-	return data
-}
-
-/**
- * Converts a path slug to a value in the menu
- *
- * @param {string} slug
- * @returns {any}
- */
-export function findValueFromPath(slug, data, fields) {
-	fields = { ...defaultFields, ...fields }
-	const keys = slug.split('/')
-	let items = data
-	let value = null
-	keys.map((key, index) => {
-		const match = items.find((item) => item[fields.key] === key)
-		if (match) {
-			if (index < keys.length - 1) {
-				match[fields.isOpen] = true
-				items = match[fields.children]
-			} else {
-				value = match
-			}
-		}
-	})
-	return value
-}