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

package/src/DropDown.svelte

@@ -1,82 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { dismissable } from './actions'
-	import { defaultFields, defaultStateIcons } from './constants.js'
-
-	import Icon from './Icon.svelte'
-	import Text from './items/Text.svelte'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = defaultFields
-	export let using = { default: Text }
-	export let value = null
-	export let title
-	export let icon
-	export let small = false
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let offsetTop = 0
-	let open = false
-	let icons = defaultStateIcons.selector
-
-	function handleSelect(event) {
-		open = false
-		dispatch('change', event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<drop-down
-	class="flex w-full relative cursor-pointer select-none dropdown {className}"
-	class:open
-	tabindex="0"
-	aria-haspopup="true"
-	aria-controls="menu"
-	use:dismissable
-	on:blur={() => (open = false)}
-	on:dismiss={() => (open = false)}
->
-	<button
-		on:click|stopPropagation={() => (open = !open)}
-		class="flex"
-		bind:clientHeight={offsetTop}
-		tabindex="-1"
-	>
-		{#if icon}
-			<Icon name={icon} />
-		{/if}
-		{#if !small && title}
-			<p>{title}</p>
-		{/if}
-		{#if open}
-			<icon class={icons.opened} />
-		{:else}
-			<icon class={icons.closed} />
-		{/if}
-	</button>
-	{#if open}
-		<!-- <div
-			class="flex flex-col absolute z-10 h-fit w-full menu"
-			style:top="{offsetTop}px"
-		> -->
-		<Slider top={offsetTop}>
-			<List
-				{items}
-				{fields}
-				{using}
-				bind:value
-				on:select={handleSelect}
-				tabindex="-1"
-			/>
-		</Slider>
-		<!-- </div> -->
-	{/if}
-</drop-down>

package/src/DropSearch.svelte

@@ -1,67 +0,0 @@
-<script>
-	import { defaultFields } from './constants.js'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-	import { Text } from './items'
-
-	export let data
-	export let value = null
-	export let fields = defaultFields
-	export let using = { default: Text }
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let opened = false
-	let search
-	let searchBox
-
-	// on search change filter list
-	function handleSelect(event) {
-		console.log('selected', event)
-		value = event.detail
-		search = event.detail[fields.text]
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-	class="flex flex-col outline-none w-full h-12 relative dropdown"
-	tabindex={0}
->
-	<div class="flex flex-shrink-0 h-12 items-center pl-4 selected-item">
-		<span class="flex flex-grow">
-			<input
-				type="text"
-				class="p-0 border-none bg-transparent w-full"
-				bind:value={search}
-				bind:this={searchBox}
-				on:focus={() => {
-					opened = true
-					searchBox.select()
-				}}
-				on:blur={() => {
-					opened = false
-				}}
-			/>
-		</span>
-		{#if opened}
-			<icon class="selector-opened" />
-		{:else}
-			<icon class="selector-closed" />
-		{/if}
-	</div>
-
-	{#if opened}
-		<Slider>
-			<List
-				bind:items={data}
-				bind:value
-				{fields}
-				{using}
-				on:select={handleSelect}
-				on:change
-			/>
-		</Slider>
-	{/if}
-</div>

package/src/EditableTabs.svelte

@@ -1,31 +0,0 @@
-<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/Icon.svelte

@@ -1,15 +0,0 @@
-<script>
-	let className = ''
-	export { className as class }
-
-	export let name = ''
-	let h
-</script>
-
-<square-icon
-	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
-	bind:clientHeight={h}
-	style:width="{h}px"
->
-	<icon class={name} aria-hidden="true" />
-</square-icon>

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>