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

package/src/List-Discard.svelte

@@ -1,48 +0,0 @@
-<script>
-	import ListActions from './ListActions.svelte'
-	import ListItems from './List.svelte'
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let searchable = false
-	export let editable = false
-
-	let search
-	let filtered
-
-	function addItem() {
-		items = [...items, {}]
-		value = items[items.length - 1]
-	}
-	function deleteSelection() {
-		if (value) value.isDeleted = true
-	}
-	function clearSelection() {
-		value = null
-	}
-
-	$: filtered =
-		searchable && search && search.length
-			? items.filter((item) => item[fields.text].includes(search))
-			: items
-</script>
-
-<list class="flex flex-col w-full {className}">
-	{#if searchable || editable}
-		<ListActions
-			bind:search
-			{searchable}
-			{editable}
-			on:delete={deleteSelection}
-			on:clear={clearSelection}
-			on:add={addItem}
-		/>
-	{/if}
-	<scroll class="flex flex-col h-full overflow-scroll">
-		<ListItems bind:items={filtered} {fields} {using} bind:value on:select />
-	</scroll>
-</list>

package/src/List.svelte

@@ -1,65 +0,0 @@
-<script>
-	import { navigator } from './actions'
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Text } from './items'
-
-	const dispatch = createEventDispatcher()
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let tabindex = 0
-	export let hierarchy = []
-	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 }
-	$: filtered = items.filter((item) => !item[fields.isDeleted])
-</script>
-
-<list
-	class="flex flex-col w-full flex-shrink-0 select-none {className}"
-	role="listbox"
-	use:navigator={{
-		items,
-		fields,
-		enabled: hierarchy.length == 0,
-		indices: cursor
-	}}
-	on:move={handleNav}
-	on:select={handleNav}
-	{tabindex}
->
-	<slot />
-	{#each filtered as item, index}
-		{@const component = item[fields.component]
-			? using[item[fields.component]] || using.default
-			: using.default}
-		{@const path = [...hierarchy, index].join(',')}
-		<item
-			class="flex flex-shrink-0 flex-grow-0 items-center cursor-pointer w-full gap-2 select-none item"
-			role="option"
-			aria-selected={value === item}
-			class:is-selected={value === item}
-			data-path={path}
-		>
-			<svelte:component
-				this={component}
-				bind:content={item}
-				{fields}
-				on:change
-			/>
-		</item>
-	{/each}
-</list>

package/src/ListActions.svelte

@@ -1,35 +0,0 @@
-<script>
-	// import Icon from '../layout/Icon.svelte'
-	import { createEventDispatcher } from 'svelte'
-	import { defaultStateIcons } from './constants'
-
-	const dispatch = createEventDispatcher()
-
-	export let search
-	export let searchable = true
-	export let editable = false
-
-	const actionIcons = defaultStateIcons.action
-</script>
-
-<toolbar class="flex flex-row w-full items-center">
-	{#if searchable}
-		<search class="flex flex-row flex-grow">
-			<icon class={actionIcons.search} />
-			<input
-				type="search"
-				bind:value={search}
-				class="rounded-r-full px-3 leading-loose"
-				placeholder="search"
-			/>
-		</search>
-	{/if}
-	{#if editable}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<icon class={actionIcons.clear} on:click={() => dispatch('clear')} />
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<icon class={actionIcons.remove} on:click={() => dispatch('remove')} />
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<icon class={actionIcons.add} on:click={() => dispatch('add')} />
-	{/if}
-</toolbar>

package/src/NestedList.svelte

@@ -1,77 +0,0 @@
-<script>
-	import { Node, Text } from './items'
-	import { defaultFields } from './constants'
-	import { createEventDispatcher } from 'svelte'
-	// import { navigator } from './actions/navigator'
-
-	// const dispatch = createEventDispatcher()
-
-	export let items = []
-	export let fields = defaultFields
-	export let using = {}
-	export let types = []
-	export let value = null
-	export let linesVisible = true
-	export let rtl = false
-	export let hierarchy = []
-
-	// 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)
-	// }
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-	$: nodeTypes = items.map((_, index) =>
-		index === items.length - 1 ? 'last' : 'middle'
-	)
-</script>
-
-<nested-list
-	class="flex flex-col w-full"
-	role="listbox"
-	class:rtl
-	tabindex="-1"
->
-	<!-- tabindex={hierarchy.length == 0 ? 0 : -1}
-	use:navigator={{ items, fields, indices, enabled: hierarchy.length == 0 }}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
-> -->
-	{#each items as content, index}
-		{@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'}
-		{@const hasChildren = fields.children in content}
-		{@const connectors = types.slice(0, -1)}
-		{@const path = [...hierarchy, index]}
-
-		<Node
-			bind:content
-			{fields}
-			{using}
-			types={[...connectors, nodeTypes[index]]}
-			{linesVisible}
-			{rtl}
-			{path}
-			selected={value === content}
-		/>
-		{#if hasChildren && content[fields.isOpen]}
-			<svelte:self
-				items={content[fields.children]}
-				bind:value
-				{fields}
-				{using}
-				types={[...connectors, type, nodeTypes[index]]}
-				{linesVisible}
-				hierarchy={path}
-			/>
-		{/if}
-	{/each}
-</nested-list>

package/src/Overlay.svelte

@@ -1,4 +0,0 @@
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<overlay class="absolute h-screen w-screen left-0 top-0" on:click>
-	<slot />
-</overlay>

package/src/PageNavigator.svelte

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

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

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

package/src/Searchable.svelte

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

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

package/src/Slider.svelte

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

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

@@ -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>