@rokkit/core 1.0.0-next.11

package/src/PageNavigator.svelte

@@ -0,0 +1,94 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { defaultFields, defaultStateIcons } from './constants'
+	import Icon from './Icon.svelte'
+
+	const dispatch = createEventDispatcher()
+
+	let className = ''
+	export { className as class }
+
+	export let items = []
+	export let value = items[0]
+	export let fields = {}
+	export let numbers = false
+
+	const navigate = defaultStateIcons.navigate
+
+	let previous
+	let next
+
+	function updateOnChange(value, items) {
+		let index = items.findIndex((x) => x == value)
+		if (index == -1) value = items[0]
+		// } else {
+		previous = index > 0 ? items[index - 1] : null
+		next = index < items.length - 1 ? items[index + 1] : null
+		// }
+	}
+
+	function handleClick(item) {
+		if (item) {
+			value = item
+			dispatch('select', value)
+		}
+	}
+
+	$: fields = { ...defaultFields, ...fields }
+	$: updateOnChange(value, items)
+
+	// $: value = items.findIndex((x) => x == value) ? value : items[0]
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<nav-pages class="grid grid-cols-3 select-none {className}" tabindex="0">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="flex items-center cursor-pointer"
+		on:click={() => handleClick(previous)}
+		tabIndex={previous ? 0 : -1}
+	>
+		{#if previous}
+			<Icon name={navigate.left} />
+			<p>
+				{#if previous[fields.text]}
+					{previous[fields.text]}
+				{/if}
+			</p>
+		{/if}
+	</span>
+	<span class="flex items-center justify-center">
+		<block class="flex items-center">
+			{#each items as item, index}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<pg
+					class:numbers
+					class:dot={!numbers}
+					class:is-selected={value == item}
+					on:click={() => handleClick(item)}
+					tabindex="0"
+					class="cursor-pointer"
+				>
+					{#if numbers}
+						{index + 1}
+					{/if}
+				</pg>
+			{/each}
+		</block>
+	</span>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="flex items-center cursor-pointer justify-end"
+		on:click={() => handleClick(next)}
+		tabIndex={next ? 0 : -1}
+	>
+		{#if next}
+			<p class="text-right">
+				{#if next[fields.text]}
+					{next[fields.text]}
+				{/if}
+			</p>
+			<Icon name={navigate.right} />
+		{/if}
+	</span>
+</nav-pages>

package/src/ResponsiveGrid.svelte

@@ -0,0 +1,73 @@
+<script>
+	import { swipeable } from './actions/swipeable'
+	import { navigable } from './actions/navigable'
+	import { fly, fade } from 'svelte/transition'
+	import { cubicInOut } from 'svelte/easing'
+
+	let className = 'three-col'
+	export { className as class }
+	export let items
+	export let small = true
+	export let duration = 400
+	export let easing = cubicInOut
+	export let value
+
+	let previous = -1
+	let activeIndex = 0
+	let direction = 1
+	let width
+
+	function handleNext() {
+		if (activeIndex < items.length - 1) value = items[activeIndex + 1]
+	}
+
+	function handlePrevious() {
+		if (activeIndex > 0) value = items[activeIndex - 1]
+	}
+
+	function activeIndexFromPage(value) {
+		const index = items.findIndex((item) => item === value)
+		return index > -1 ? index : 0
+	}
+
+	$: activeIndex = activeIndexFromPage(value)
+	$: {
+		direction = Math.sign(activeIndex - previous)
+		previous = activeIndex
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<container
+	use:swipeable={{ enabled: small }}
+	on:swipeLeft={handleNext}
+	on:swipeRight={handlePrevious}
+	use:navigable={{ enabled: small }}
+	on:previous={handlePrevious}
+	on:next={handleNext}
+	tabindex={0}
+	class="overflow-hidden {className}"
+	bind:clientWidth={width}
+>
+	{#each items as item, index}
+		{@const segmentClass = 'col-' + (index + 1)}
+		{@const props = item.props ?? {}}
+		{#if small && index === activeIndex}
+			<segment
+				class="absolute w-full h-full {segmentClass}"
+				out:fade={{
+					x: -1 * direction * width,
+					duration,
+					easing
+				}}
+				in:fly={{ x: direction * width, duration, easing }}
+			>
+				<svelte:component this={item.component} {...props} />
+			</segment>
+		{:else if !small}
+			<segment class={segmentClass}>
+				<svelte:component this={item.component} {...props} />
+			</segment>
+		{/if}
+	{/each}
+</container>

package/src/Scrollable.svelte

@@ -0,0 +1,8 @@
+<script>
+	let className = ''
+	export { className as class }
+</script>
+
+<scroll class="flex flex-col h-full overflow-scroll {className}">
+	<slot />
+</scroll>

package/src/Searchable.svelte

@@ -0,0 +1,19 @@
+<script>
+	import Scrollable from './Scrollable.svelte'
+
+	export let search = ''
+</script>
+
+<div class="flex flex-col overflow-hidden h-full w-full searchable">
+	<div class="flex flex-col flex-shrink-0 flex-grow px-4 py-2 quick-search">
+		<input
+			type="search"
+			bind:value={search}
+			class="rounded-full px-3 leading-loose"
+			placeholder="search"
+		/>
+	</div>
+	<Scrollable>
+		<slot />
+	</Scrollable>
+</div>

package/src/Sidebar.svelte

@@ -0,0 +1,5 @@
+<aside class="flex flex-col sidebar">
+	<slot name="header" />
+	<slot />
+	<slot name="footer" />
+</aside>

package/src/Slider.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { slide, fade } from 'svelte/transition'
+
+	let className = 'menu'
+	export { className as class }
+	export let top
+	export let offset = -top
+</script>
+
+<scroll
+	in:slide={{ duration: 50, y: offset }}
+	out:fade={{ duration: 50 }}
+	style:top="{top}px"
+	class="flex flex-col absolute w-full z-10 overflow-scroll {className}"
+>
+	<slot />
+</scroll>

package/src/SpinList.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { defaultFields } from './constants'
+	import { Text } from './items'
+	import { navigable } from './actions'
+	import { getComponent } from './list'
+
+	const dispatch = createEventDispatcher()
+
+	let className = ''
+	export { className as class }
+	export let items = []
+	export let fields = {}
+	export let using = {}
+	export let value
+	let index = -1
+
+	function moveNext() {
+		index = index < items.length - 1 ? index + 1 : 0
+		dispatch('select', items[index])
+	}
+	function moveBack() {
+		index = index > 0 ? index - 1 : items.length - 1
+		dispatch('select', items[index])
+	}
+
+	$: using = { default: Text, ...using }
+	$: fields = { ...defaultFields, ...fields }
+	$: value = index >= 0 ? items[index] : null
+	$: component = getComponent(value, fields)
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<spin-list class="flex flex-row w-full {className}" tabindex={0}>
+	<input
+		type="text"
+		class="flex flex-grow"
+		bind:value
+		readonly
+		use:navigable
+		on:next={moveNext}
+		on:previous={moveBack}
+	/>
+	<!-- <svelte:component this={component} bind:content={value} {fields} on:change /> -->
+	<square class="h-full position-absolute right-0">
+		<icon class="i-carbon-chevron-sort" />
+	</square>
+</spin-list>

package/src/SplitPane.svelte

@@ -0,0 +1,109 @@
+<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

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,95 @@
+<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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,34 @@
+<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

@@ -0,0 +1,31 @@
+<script>
+	import TabItems from './TabItems.svelte'
+	import TabItem from './TabItem.svelte'
+
+	let className = ''
+	export { className as class }
+	export let items = []
+	export let fields = {}
+	export let title = null
+	export let allowAdd = false
+	export let allowClose = false
+	export let value = items[0]
+
+	function addTab() {
+		items = [...items, {}]
+		value = items[items.length - 1]
+	}
+</script>
+
+<tab-view class="flex flex-col w-full flex-grow {className}">
+	<tabs class="flex flex-row flex-shrink-0 w-full select-none cursor-pointer">
+		{#if title}
+			<p>{title}</p>
+		{/if}
+		<TabItems {items} {fields} {allowClose} bind:value on:close />
+		{#if allowAdd}
+			<TabItem label="+" on:click={addTab} />
+		{/if}
+	</tabs>
+	<content class="flex flex-col flex-grow"><slot /></content>
+</tab-view>

package/src/Tree.svelte

@@ -0,0 +1,19 @@
+<script>
+	import NestedList from './NestedList.svelte'
+	import { Text } from './items'
+	import { defaultFields } from './constants'
+
+	export let items = []
+	export let fields = {}
+	export let using = { default: Text }
+	export let root = 'root'
+	export let rtl = false
+
+	$: fields = { ...defaultFields, ...fields }
+	$: items =
+		items.length == 1
+			? items
+			: [{ [fields.text]: root, [fields.children]: items }]
+</script>
+
+<NestedList {items} {fields} {using} {rtl} />

package/src/actions/dismissable.js

@@ -0,0 +1,24 @@
+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)
+		}
+	}
+}