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

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>

package/src/items/Pill.svelte

@@ -1,19 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultStateIcons } from '../constants'
-
-	const dispatch = createEventDispatcher()
-
-	export let item
-	export let fields
-
-	function handleClick() {
-		dispatch('remove', item)
-	}
-</script>
-
-<pill class="flex flex-row items-center">
-	{item[fields.text]}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class={defaultStateIcons.item.remove} on:click={handleClick} />
-</pill>

package/src/items/Separator.svelte

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

package/src/items/Summary.svelte

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

package/src/items/Text.svelte

@@ -1,21 +0,0 @@
-<script>
-	import { defaultFields } from '../constants'
-
-	export let content
-	export let fields = defaultFields
-
-	$: isObject = typeof content == 'object'
-	$: text = isObject ? content[fields.text] : content
-</script>
-
-{#if isObject && content[fields.image]}
-	<img
-		class="h-8 w-8 rounded-full object-cover"
-		alt={content[fields.text]}
-		src={content[fields.image]}
-	/>
-{/if}
-{#if isObject && content[fields.icon]}
-	<icon class={content[fields.icon]} />
-{/if}
-<p class="flex flex-grow">{text}</p>

package/src/items/index.js

@@ -1,8 +0,0 @@
-export { default as Text } from './Text.svelte'
-export { default as Link } from './Link.svelte'
-export { default as Node } from './Node.svelte'
-export { default as Pill } from './Pill.svelte'
-export { default as Collapsible } from './Collapsible.svelte'
-export { default as Connector } from './Connector.svelte'
-export { default as Separator } from './Separator.svelte'
-export { default as Summary } from './Summary.svelte'

package/src/list.js

@@ -1,14 +0,0 @@
-export function getComponent(item, fields) {
-	if (item && typeof item === 'object') {
-		return item[fields.component] || fields.default
-	}
-	return fields.default
-}
-
-// update position based on externally supplied value
-export function updateCursor(cursor, value, items) {
-	if (cursor.length > 0 && value != items[cursor[0]]) {
-		let index = items.findIndex((x) => x == value)
-		cursor = index > -1 ? [index] : []
-	}
-}

package/src/mocks/Custom.svelte

@@ -1,7 +0,0 @@
-<script>
-	import { defaultFields } from '../../src/constants'
-	export let content
-	export let fields = defaultFields
-</script>
-
-<span>{content[fields.text]}</span>

package/src/mocks/index.js

@@ -1,10 +0,0 @@
-import { vi } from 'vitest'
-
-export function createEvent(x, y) {
-	return {
-		clientX: x,
-		clientY: y,
-		stopPropagation: vi.fn(),
-		preventDefault: vi.fn()
-	}
-}

package/src/stores/alerts.js

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store'
-
-export const alerts = writable([])

package/src/stores/index.js

@@ -1,6 +0,0 @@
-import { writable } from 'svelte/store'
-// export * from './alerts'
-export { theme } from './theme'
-export const alerts = writable([])
-
-// export const theme = writable({ name: 'rokkit', mode: 'dark' })

package/src/stores/persist.js

@@ -1,63 +0,0 @@
-export const PARSE_ERROR_MESSAGE =
-	'Unable to parse value from local storage for key: '
-
-if (typeof window === 'undefined') {
-	global.localStorage = {
-		getItem: () => '{}',
-		setItem: () => {}
-	}
-}
-export function persistable(key, store) {
-	let value
-	const storageEventListener = (event) => {
-		if (event.key === key) {
-			event.stopPropagation()
-			event.preventDefault()
-			try {
-				const newValue = JSON.parse(event.newValue)
-				set(newValue)
-			} catch (e) {
-				console.error(PARSE_ERROR_MESSAGE, key)
-			}
-		}
-	}
-
-	try {
-		value = JSON.parse(localStorage.getItem(key))
-		// console.log(value)
-		store.set(value)
-	} catch {
-		console.error(PARSE_ERROR_MESSAGE, key)
-	}
-
-	const set = (newValue) => {
-		if (value !== newValue) {
-			value = newValue
-			localStorage.setItem(key, JSON.stringify(value))
-			store.set(value)
-		}
-	}
-
-	const update = (fn) => {
-		store.update((currentValue) => {
-			const value = fn(currentValue)
-			localStorage.setItem(key, JSON.stringify(value))
-			return value
-		})
-	}
-
-	if (typeof window !== 'undefined') {
-		window.addEventListener('storage', storageEventListener)
-	}
-
-	return {
-		subscribe: store.subscribe,
-		set,
-		update,
-		destroy() {
-			if (typeof window !== 'undefined') {
-				window.removeEventListener('storage', storageEventListener)
-			}
-		}
-	}
-}

package/src/stores/theme.js

@@ -1,34 +0,0 @@
-import { writable } from 'svelte/store'
-import { persistable } from './persist'
-
-const THEME_STORE_KEY = 'app-theme'
-
-/**
- * @typedef {Object} Theme
- * @property {string} name
- * @property {string} mode
- */
-
-/**
- * Custom store that takes an object with two properties, name and mode.
- * @returns {import('svelte/store').Writable<Theme>}
- */
-export function ThemeStore() {
-	const store = writable({ name: 'rokkit', mode: 'dark' })
-
-	const set = (value) => {
-		const { name, mode } = value ?? {}
-		if (typeof name === 'string' && typeof mode === 'string') {
-			store.set(value)
-		} else if (value) {
-			console.error('Both "name" and "mode" must be strings', value)
-		}
-	}
-
-	return {
-		...store,
-		set
-	}
-}
-
-export const theme = persistable(THEME_STORE_KEY, ThemeStore())