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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.11",
+  "version": "1.0.0-next.13",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/DropDown.svelte

@@ -6,6 +6,7 @@
 	import Icon from './Icon.svelte'
 	import Text from './items/Text.svelte'
 	import List from './List.svelte'
+	import Slider from './Slider.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -62,10 +63,11 @@
 		{/if}
 	</button>
 	{#if open}
-		<div
+		<!-- <div
 			class="flex flex-col absolute z-10 h-fit w-full menu"
 			style:top="{offsetTop}px"
-		>
+		> -->
+		<Slider top={offsetTop}>
 			<List
 				{items}
 				{fields}
@@ -74,6 +76,7 @@
 				on:select={handleSelect}
 				tabindex="-1"
 			/>
-		</div>
+		</Slider>
+		<!-- </div> -->
 	{/if}
 </drop-down>

package/src/EditableTabs.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/NestedList.svelte

@@ -2,9 +2,9 @@
 	import { Node, Text } from './items'
 	import { defaultFields } from './constants'
 	import { createEventDispatcher } from 'svelte'
-	import { navigator } from './actions/navigator'
+	// import { navigator } from './actions/navigator'
 
-	const dispatch = createEventDispatcher()
+	// const dispatch = createEventDispatcher()
 
 	export let items = []
 	export let fields = defaultFields
@@ -15,29 +15,17 @@
 	export let rtl = false
 	export let hierarchy = []
 
-	let indices = []
+	// 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)
-	}
-	// function handleExpand(event) {
+	// function handle(event) {
 	// 	value = event.detail.node
 	// 	indices = event.detail.path
-	// 	items = items // tell svelte data has changed
-	// 	dispatch('expand', value)
-	// }
-	// function handleCollapse(event) {
-	// 	// console.log(event)
-	// 	value = event.detail.node
-	// 	indices = event.detail.path
-	// 	items = items // tell svelte data has changed
-	// 	dispatch('collapse', value)
+	// 	if (['collapse', 'expand'].includes(event.type)) {
+	// 		items = items
+	// 	}
+	// 	dispatch(event.type, value)
 	// }
+
 	$: using = { default: Text, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: nodeTypes = items.map((_, index) =>
@@ -49,13 +37,15 @@
 	class="flex flex-col w-full"
 	role="listbox"
 	class:rtl
-	tabindex={hierarchy.length == 0 ? 0 : -1}
+	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}

package/src/Tabs.svelte

@@ -1,31 +1,49 @@
 <script>
-	import TabItems from './TabItems.svelte'
-	import TabItem from './TabItem.svelte'
+	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 title = null
-	export let allowAdd = false
-	export let allowClose = false
-	export let value = items[0]
+	export let using = {}
+	export let value = null
+	let cursor = []
+
+	function handleNav(event) {
+		value = event.detail.node
+		cursor = event.detail.path
 
-	function addTab() {
-		items = [...items, {}]
-		value = items[items.length - 1]
+		dispatch('select', { item: value, indices: cursor })
 	}
+	$: fields = { ...defaultFields, ...fields }
+	$: using = { default: Text, ...using }
 </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>
+<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,19 +1,45 @@
 <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 = 'root'
+	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
+		items.length == 1 || root == null
 			? items
 			: [{ [fields.text]: root, [fields.children]: items }]
 </script>
 
-<NestedList {items} {fields} {using} {rtl} />
+<!-- 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/navigable.js

@@ -2,6 +2,7 @@ export function navigable(
 	node,
 	{ horizontal = true, nested = false, enabled = true } = {}
 ) {
+	// console.log(node, enabled)
 	if (!enabled) return { destroy() {} }
 	const previous = () => node.dispatchEvent(new CustomEvent('previous'))
 	const next = () => node.dispatchEvent(new CustomEvent('next'))

package/src/actions/navigator.js

@@ -119,7 +119,7 @@ export function navigator(node, options) {
 					.filter((item) => item !== '')
 					.map((item) => +item)
 
-		if (indices.length > 0) {
+		if (indices.length > 0 && event.target.tagName != 'DETAIL') {
 			path = pathFromIndices(indices, items, fields)
 			currentNode = getCurrentNode(path)
 			if (hasChildren(currentNode, path[path.length - 1].fields)) {
@@ -158,7 +158,7 @@ export function moveTo(node, path, currentNode, idPrefix) {
 	const indices = indicesFromPath(path)
 
 	let current = node.querySelector('#' + idPrefix + indices.join('-'))
-	if (current) current.scrollIntoView({ behavior: 'auto' })
+	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 
 	node.dispatchEvent(
 		new CustomEvent('move', {

package/src/items/Link.svelte

@@ -12,6 +12,7 @@
 	class="flex flex-row flex-grow gap-2 items-center content"
 	href={content[fields.url]}
 	{target}
+	tabindex="-1"
 >
 	<Text {content} {fields} />
 </a>