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

package/package.json

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

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/items/Link.svelte

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

package/src/items/Node.svelte

@@ -32,7 +32,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <node
 	id={'id-' + path.join('-')}
-	class="flex flex-row h-8 gap-2 leading-loose items-center cursor-pointer select-none"
+	class="flex flex-row min-h-5 items-center cursor-pointer select-none"
 	class:is-selected={selected}
 	aria-selected={selected}
 	role="option"

package/src/items/Pill.svelte

@@ -1,19 +1,33 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import { defaultStateIcons } from '../constants'
-
+	import { defaultFields, defaultStateIcons } from '../constants'
+	import Text from './Text.svelte'
 	const dispatch = createEventDispatcher()
 
-	export let item
-	export let fields
+	export let value
+	export let fields = defaultFields
+	export let using = { default: Text }
+	export let removable = false
 
 	function handleClick() {
-		dispatch('remove', item)
+		dispatch('remove', value)
 	}
+	$: component =
+		typeof value == 'object'
+			? using[value[fields.component] ?? 'default']
+			: using.default
+	$: console.log(value, component)
 </script>
 
 <pill class="flex flex-row items-center">
-	{item[fields.text]}
+	<item class="flex flex-row items-center">
+		<svelte:component this={component} content={value} {fields} />
+	</item>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class={defaultStateIcons.item.remove} on:click={handleClick} />
+	{#if removable}
+		<icon
+			class="{defaultStateIcons.action.remove} cursor-pointer"
+			on:click={handleClick}
+		/>
+	{/if}
 </pill>