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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.12",
+  "version": "1.0.0-next.14",
   "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/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/actions/hierarchy.js

@@ -135,6 +135,13 @@ export function movePrevious(path) {
 	return path
 }
 
+/**
+ *
+ * @param {Array<integer>} indices
+ * @param {Array<*>} items
+ * @param {import('../constants').FieldMapping} fields
+ * @returns
+ */
 export function pathFromIndices(indices, items, fields) {
 	let path = []
 	let fragment
@@ -171,19 +178,3 @@ export function findItem(items, indices, fields) {
 	}
 	return item
 }
-
-// export function getNodeFromIndices(indices, items, fields) {
-// 	let fragment
-// 	indices.map((index, level) => {
-// 		if (level === 0) {
-// 			fragment = { index, items, fields }
-// 		} else {
-// 			fragment = {
-// 				index,
-// 				items: fragment.items[fragment.index][fragment.fields.children],
-// 				fields: fragment.fields.fields ?? fragment.fields
-// 			}
-// 		}
-// 	})
-// 	return indices.length === 0 ? null : fragment.items[fragment.index]
-// }

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