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

package/src/SplitPane.svelte

@@ -1,109 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { pannable } from './actions'
-
-	const dispatch = createEventDispatcher()
-
-	export let vertical = false
-	export let limits = [50, 30]
-	export let pos = 70
-	export let styles = ['', '']
-
-	let refs = {}
-
-	function clamp(min, max, value) {
-		return min > value ? min : max < value ? max : value
-	}
-
-	function handlePanMove(event) {
-		const { top, bottom, left, right } = refs.wrapper.getBoundingClientRect()
-		const extents = horizontal ? [left, right] : [top, bottom]
-		let px = clamp(
-			extents[0],
-			extents[1],
-			horizontal ? event.detail.x : event.detail.y
-		)
-		pos = clamp(
-			limits[0],
-			100 - limits[1],
-			(100 * (px - extents[0])) / (extents[1] - extents[0])
-		)
-		dispatch('change', { pos })
-	}
-
-	$: horizontal = !vertical
-	$: side = horizontal ? 'left' : 'top'
-	$: dimension = horizontal ? 'width' : 'height'
-	$: direction = vertical ? 'vertical' : 'horizontal'
-</script>
-
-<div class="wrapper {direction}" bind:this={refs.wrapper}>
-	<div class={styles[0]} style="{dimension}: {pos}%;">
-		<slot name="a" />
-	</div>
-	<div class={styles[1]} style="{dimension}: {100 - pos}%;">
-		<slot name="b" />
-	</div>
-	<span
-		class="wall"
-		use:pannable
-		on:panmove={handlePanMove}
-		style="{side}: calc({pos}% - 8px)"
-	/>
-</div>
-
-<style>
-	.wrapper {
-		position: relative;
-		display: flex;
-		height: 100%;
-		width: 100%;
-	}
-	.wrapper div {
-		flex: 1 1 auto;
-		height: 100%;
-	}
-
-	.horizontal {
-		flex-direction: row;
-	}
-	.vertical {
-		flex-direction: column;
-	}
-	.wall {
-		position: absolute;
-		z-index: 10;
-	}
-	.wall::after {
-		content: '';
-		position: absolute;
-		background-color: var(--bg-800);
-	}
-	.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/SplitView.svelte

@@ -1,44 +0,0 @@
-<script>
-	import Splitter from './Splitter.svelte'
-
-	export let vertical = false
-	export let min = 30
-	export let max = 70
-	export let pos = 30
-
-	$: sizes = [pos, 100 - pos]
-
-	$: direction = { direction: vertical ? 'flex-col' : 'flex-row' }
-	$: sizeA = {
-		width: vertical ? 100 : sizes[0],
-		height: vertical ? sizes[0] : 100
-	}
-	$: sizeB = {
-		width: vertical ? 100 : sizes[1],
-		height: vertical ? sizes[1] : 100
-	}
-
-	function onSplitterChange(e) {
-		pos = e.detail.pos - e.detail.offset
-	}
-</script>
-
-<div class="relative flex w-full h-full" style:--direction={direction}>
-	<section style:--sizeA={sizeA} class="flex flex-grow flex-shrink select-none">
-		<slot name="a" />
-	</section>
-	<section style:--sizeB={sizeB} class="flex flex-grow flex-shrink select-none">
-		<slot name="b" />
-	</section>
-	<Splitter {vertical} {min} {max} {pos} on:change={onSplitterChange} />
-</div>
-
-<style>
-	div {
-		flex-direction: var(--direction);
-	}
-	section {
-		width: calc(var(--width) * 1%);
-		height: calc(var(--height) * 1%);
-	}
-</style>

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