@rokkit/core 1.0.0-next.13 → 1.0.0-next.130

package/src/Splitter.svelte

@@ -1,95 +0,0 @@
-<script>
-	// ensure that parent has position: relative.
-	// on reaching limit remove mouse events.
-	import { createEventDispatcher } from 'svelte'
-	import { pannable } from './actions'
-
-	const dispatch = createEventDispatcher()
-
-	export let vertical = false
-	export let index
-	export let min = 0
-	export let max = 100
-	export let pos = 50
-	export let offset = 0
-
-	let wall
-
-	function clamp(min, max, value) {
-		return min > value ? min : max < value ? max : value
-	}
-
-	function fixLimits() {
-		if (min > max) [min, max] = [max, min]
-		max = clamp(0, 100, max)
-		min = clamp(0, 100, min)
-		pos = clamp(min, max, pos)
-	}
-
-	function handlePanMove(event) {
-		const { top, bottom, left, right } =
-			wall.parentElement.getBoundingClientRect()
-		const extents = horizontal ? [left, right] : [top, bottom]
-		let px = clamp(
-			extents[0],
-			extents[1],
-			horizontal ? event.detail.x : event.detail.y
-		)
-
-		pos = clamp(min, max, (100 * (px - extents[0])) / (extents[1] - extents[0]))
-
-		dispatch('change', { pos, index, offset })
-	}
-	$: fixLimits()
-	$: horizontal = !vertical
-	$: side = horizontal ? 'left' : 'top'
-</script>
-
-<span
-	bind:this={wall}
-	class="wall"
-	class:vertical
-	class:horizontal
-	use:pannable
-	on:panmove={handlePanMove}
-	style="{side}: calc({pos}% - 8px)"
-/>
-
-<style>
-	.wall {
-		position: absolute;
-		z-index: 10;
-	}
-	.wall::after {
-		content: '';
-		position: absolute;
-		background-color: #000;
-	}
-	.wall:hover {
-		cursor: ew-resize;
-	}
-	.horizontal.wall {
-		padding: 0 8px;
-		width: 0;
-		height: 100%;
-		cursor: ew-resize;
-	}
-	.horizontal.wall::after {
-		left: 8px;
-		top: 0;
-		width: 1px;
-		height: 100%;
-	}
-	.vertical.wall {
-		padding: 8px 0;
-		width: 100%;
-		height: 0;
-		cursor: ns-resize;
-	}
-	.vertical.wall::after {
-		top: 8px;
-		left: 0;
-		width: 100%;
-		height: 1px;
-	}
-</style>

package/src/TabItem.svelte

@@ -1,27 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let icon = null
-	export let label
-	export let active = false
-	export let allowClose = false
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<tab class="flex flex-row items-center" class:active on:click>
-	{#if icon}
-		<icon class={icon} aria-label={icon} />
-	{/if}
-	{#if label}
-		<p class="flex flex-shrink-0 flex-grow justify-center">{label}</p>
-	{/if}
-	{#if allowClose}
-		<icon
-			class="remove small"
-			aria-label="remove"
-			on:click={() => dispatch('remove')}
-		/>
-	{/if}
-</tab>

package/src/TabItems.svelte

@@ -1,34 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import TabItem from './TabItem.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let items = []
-	export let fields = {}
-	export let allowClose = false
-	export let value = items[0]
-
-	function activate(item) {
-		value = item
-		dispatch('switch', item)
-	}
-	function closeTab(index) {
-		items[index].isClosed = true
-	}
-	$: fields = { ...defaultFields, ...fields }
-	$: filtered = items.filter((item) => !item.isClosed)
-</script>
-
-{#each filtered as item, index}
-	{@const label = item[fields.text]}
-	<TabItem
-		icon={item[fields.icon]}
-		{label}
-		{allowClose}
-		active={value == item}
-		on:click={() => activate(item)}
-		on:close={() => closeTab(index)}
-	/>
-{/each}

package/src/Tabs.svelte

@@ -1,49 +0,0 @@
-<script>
-	import { defaultFields } from './constants'
-	import { Text } 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
-	let cursor = []
-
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
-
-		dispatch('select', { item: value, indices: cursor })
-	}
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
-</script>
-
-<tabs
-	class="flex w-full {className}"
-	tabindex="0"
-	role="listbox"
-	use:navigator={{
-		items,
-		fields,
-		vertical: false,
-		indices: cursor
-	}}
-	on:move={handleNav}
-	on:select={handleNav}
->
-	{#each items as item, index}
-		{@const component = item[fields.component]
-			? using[item[fields.component]] || using.default
-			: using.default}
-
-		<item class="flex" class:is-selected={item === value} data-path={index}>
-			<svelte:component this={component} content={item} {fields} />
-		</item>
-	{/each}
-</tabs>

package/src/Tree.svelte

@@ -1,45 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import NestedList from './NestedList.svelte'
-	import { Text } from './items'
-	import { defaultFields } from './constants'
-	import { navigator } from './actions/navigator'
-
-	const dispatch = createEventDispatcher()
-
-	export let items = []
-	export let fields = {}
-	export let using = { default: Text }
-	export let root = null
-	export let rtl = false
-	export let value
-
-	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.length == 1 || root == null
-			? items
-			: [{ [fields.text]: root, [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"
->
-	<NestedList {items} {fields} {using} {rtl} {value} />
-</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,189 +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
-}
-
-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
-}
-
-// export function getNodeFromIndices(indices, items, fields) {
-// 	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
-// 			}
-// 		}
-// 	})
-// 	return indices.length === 0 ? null : fragment.items[fragment.index]
-// }

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)
-		}
-	}
-}