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

package/src/Switch.svelte

@@ -1,69 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Item } from './items'
-	import { navigator } from './actions'
-	import { getComponent } from './lib'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = [false, true]
-	export let fields = defaultFields
-	export let using = {}
-	export let compact = true
-	export let value
-	let cursor = []
-
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
-
-		dispatch('change', { item: value, indices: cursor })
-	}
-
-	$: useComponent = !items.every((item) => [false, true].includes(item))
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Item, ...using }
-</script>
-
-{#if !Array.isArray(items) || items.length < 2}
-	<error>Items should be an array with at least two items.</error>
-{:else}
-	<toggle-switch
-		class="flex items-center {className}"
-		class:is-off={items.length == 2 && value === items[0]}
-		class:is-on={items.length == 2 && value === items[1]}
-		class:compact
-		tabindex="0"
-		role="listbox"
-		use:navigator={{
-			items,
-			fields,
-			vertical: false,
-			indices: cursor
-		}}
-		on:move={handleNav}
-		on:select={handleNav}
-	>
-		{#each items as item, index (item)}
-			{@const component = useComponent
-				? getComponent(item, fields, using)
-				: null}
-			<item
-				class="relative flex"
-				role="option"
-				aria-selected={item === value}
-				data-path={index}
-			>
-				{#if item == value}
-					<indicator class="absolute bottom-0 left-0 right-0 top-0" />
-				{/if}
-				{#if component}
-					<svelte:component this={component} value={item} {fields} />
-				{/if}
-			</item>
-		{/each}
-	</toggle-switch>
-{/if}

package/src/Tabs.svelte

@@ -1,82 +0,0 @@
-<script>
-	import { defaultFields, defaultStateIcons } from './constants'
-	import Icon from './Icon.svelte'
-	import { ItemWrapper, Item } from './items'
-	import { navigator } from './actions'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using
-	export let value = null
-	export let below = false
-	export let align = 'left'
-	export let editable = false
-	export let icons = defaultStateIcons.action
-
-	let cursor = []
-
-	function handleRemove(item) {
-		if (typeof item === Object) {
-			item[fields.isDeleted] = true
-		} else {
-			items = items.filter((i) => i !== item)
-		}
-
-		dispatch('remove', { item })
-	}
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
-
-		dispatch('select', { item: value, indices: cursor })
-	}
-	$: using = { default: Item, ...using }
-	$: icons = { ...defaultStateIcons.action, ...icons }
-	$: filtered = items.filter((item) => !item[fields.isDeleted])
-	$: fields = { ...defaultFields, ...fields }
-</script>
-
-<tabs
-	class="flex w-full {className}"
-	class:is-below={below}
-	class:justify-center={align == 'center'}
-	class:justify-end={align == 'right'}
-	tabindex="0"
-	role="listbox"
-	use:navigator={{
-		items,
-		fields,
-		vertical: false,
-		indices: cursor
-	}}
-	on:move={handleNav}
-	on:select={handleNav}
->
-	{#each filtered as item, index}
-		<ItemWrapper
-			value={item}
-			{index}
-			{fields}
-			{using}
-			removable={editable}
-			selected={item === value}
-			{icons}
-			class="tab"
-			on:remove={handleRemove}
-		/>
-	{/each}
-	{#if editable}
-		<Icon
-			name="add"
-			role="button"
-			label="Add Tab"
-			size="small"
-			on:click={() => dispatch('add')}
-		/>
-	{/if}
-</tabs>

package/src/Tree.svelte

@@ -1,52 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import NestedList from './NestedList.svelte'
-	import { Item } from './items'
-	import { defaultFields } from './constants'
-	import { navigator } from './actions/navigator'
-
-	const dispatch = createEventDispatcher()
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = { default: Item }
-	export let root = null
-	export let value = null
-
-	let indices = []
-
-	function handle(event) {
-		value = event.detail.node
-		indices = event.detail.path
-		if (['collapse', 'expand'].includes(event.type)) {
-			items = items
-		}
-		dispatch(event.type, value)
-	}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: items =
-		items[0][fields.text] == root || root == null
-			? items
-			: [
-					{
-						[fields.text]: root,
-						[fields.isOpen]: true,
-						[fields.children]: items
-					}
-			  ]
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<tree
-	use:navigator={{ items, fields, indices }}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
-	tabindex="0"
-	class={className}
->
-	<NestedList {items} {fields} {using} bind:value {...$$restProps} />
-</tree>

package/src/actions/dismissable.js

@@ -1,24 +0,0 @@
-const KEYCODE_ESC = 27
-
-export function dismissable(node) {
-	const handleClick = (event) => {
-		if (node && !node.contains(event.target) && !event.defaultPrevented) {
-			node.dispatchEvent(new CustomEvent('dismiss', node))
-		}
-	}
-	const keyup = (event) => {
-		if (event.keyCode === KEYCODE_ESC) {
-			node.dispatchEvent(new CustomEvent('dismiss', node))
-		}
-	}
-
-	document.addEventListener('click', handleClick, true)
-	document.addEventListener('keyup', keyup, true)
-
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true)
-			document.removeEventListener('keyup', keyup, true)
-		}
-	}
-}

package/src/actions/fillable.js

@@ -1,114 +0,0 @@
-/**
- * @typedef FillOptions
- * @property {Array<string>} options available options to fill
- * @property {integer} current       index of option to be filled
- * @property {boolean} check         validate filled values
- */
-/**
- * Action for filling a <del>?</del> element in html block.
- *
- * @param {*} node
- * @param {FillOptions} options
- * @returns
- */
-export function fillable(node, { options, current, check }) {
-	let data = { options, current, check }
-	let blanks = node.getElementsByTagName('del')
-
-	function click(event) {
-		if ('?' !== event.target.innerHTML) {
-			clear(event, node)
-		}
-	}
-
-	initialize(blanks, click)
-
-	return {
-		update({ options, current }) {
-			data.options = options
-			data.current = current
-			data.check = check
-
-			fill(blanks, data.options, data.current)
-			if (data.check) validate(blanks, data)
-		},
-		destroy() {
-			Object.keys(blanks).map((ref) => {
-				blanks[ref].removeEventListener('click', click)
-			})
-		}
-	}
-}
-
-/**
- * Initialize empty fillable element style and add listener for click
- *
- * @param {*} blanks
- * @param {*} click
- */
-function initialize(blanks, click) {
-	Object.keys(blanks).map((ref) => {
-		blanks[ref].addEventListener('click', click)
-		blanks[ref].classList.add('empty')
-		blanks[ref].name = 'fill-' + ref
-		blanks[ref]['data-index'] = ref
-	})
-}
-
-/**
- * Fill current blank with provided option
- *
- * @param {*} blanks
- * @param {*} options
- * @param {*} current
- */
-function fill(blanks, options, current) {
-	if (current > -1 && current < Object.keys(blanks).length) {
-		let index = options.findIndex(({ actualIndex }) => actualIndex == current)
-		if (index > -1) {
-			blanks[current].innerHTML = options[index].value
-			blanks[current].classList.remove('empty')
-			blanks[current].classList.add('filled')
-		}
-	}
-}
-
-/**
- * Clear all fillable elements
- *
- * @param {*} event
- * @param {*} node
- */
-function clear(event, node) {
-	event.target.innerHTML = '?'
-	event.target.classList.remove('filled')
-	event.target.classList.remove('pass')
-	event.target.classList.remove('fail')
-	event.target.classList.add('empty')
-	node.dispatchEvent(
-		new CustomEvent('remove', {
-			detail: {
-				index: event.target.name.split('-')[1],
-				value: event.target['data-index']
-			}
-		})
-	)
-}
-
-/**
- * Validate the filled values
- *
- * @param {*} blanks
- * @param {*} data
- */
-function validate(blanks, data) {
-	Object.keys(blanks).map((ref) => {
-		let index = data.options.findIndex(({ actualIndex }) => actualIndex == ref)
-		if (index > -1)
-			blanks[ref].classList.add(
-				data.options[index].expectedIndex == data.options[index].actualIndex
-					? 'pass'
-					: 'fail'
-			)
-	})
-}

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,42 +0,0 @@
-export function navigable(
-	node,
-	{ horizontal = true, nested = false, enabled = true } = {}
-) {
-	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)
-		}
-	}
-}