@rokkit/core 1.0.0-next.18 → 1.0.0-next.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.18",
+  "version": "1.0.0-next.20",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "svelte": "^3.58.0",
     "typescript": "^4.9.5",
     "validators": "latest",
-    "vite": "^4.3.2",
+    "vite": "^4.3.3",
     "vitest": "~0.19.1",
     "shared-config": "1.0.0"
   },
@@ -46,6 +46,9 @@
       "import": "./src/index.js"
     }
   },
+  "dependencies": {
+    "ramda": "^0.28.0"
+  },
   "scripts": {
     "lint": "prettier --check --plugin-search-dir=. . && eslint .",
     "format": "prettier --write --plugin-search-dir=. .",

package/src/DropDown.svelte

@@ -35,7 +35,7 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <drop-down
-	class="flex w-full relative cursor-pointer select-none dropdown {className}"
+	class="flex relative cursor-pointer select-none dropdown {className}"
 	class:open
 	tabindex="0"
 	aria-haspopup="true"

package/src/NestedList.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { Node, Text } from './items'
 	import { defaultFields } from './constants'
+	import { getLineTypes } from './lib/connector'
 
 	let className = 'list'
 	export { className as class }
@@ -9,7 +10,7 @@
 	export let using = {}
 	export let types = []
 	export let value = null
-	export let linesVisible = true
+	// export let linesVisible = true
 	export let rtl = false
 	export let hierarchy = []
 	export let icons
@@ -27,7 +28,7 @@
 	$: using = { default: Text, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: nodeTypes = items.map((_, index) =>
-		index === items.length - 1 ? 'last' : 'middle'
+		index === items.length - 1 ? 'last' : 'child'
 	)
 </script>
 
@@ -45,22 +46,24 @@
 	on:collapse={handle}
 > -->
 	{#each items as content, index}
-		{@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'}
+		<!-- {@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'} -->
 		{@const hasChildren = fields.children in content}
-		{@const connectors = types.slice(0, -1)}
+		<!-- {@const connectors =   types.slice(0, -1)} -->
 		{@const path = [...hierarchy, index]}
+		{@const connectors = getLineTypes(hasChildren, types, nodeTypes[index])}
 
+		<!-- types={[...connectors, nodeTypes[index]]} -->
 		<Node
 			bind:content
 			{fields}
 			{using}
-			types={[...connectors, nodeTypes[index]]}
-			{linesVisible}
+			types={connectors}
 			{rtl}
 			{path}
 			stateIcons={icons}
 			selected={value === content}
 		/>
+		<!-- types={[...connectors, type, nodeTypes[index]]} -->
 		{#if hasChildren && content[fields.isOpen]}
 			<svelte:self
 				items={content[fields.children]}
@@ -68,8 +71,7 @@
 				{fields}
 				{using}
 				{icons}
-				types={[...connectors, type, nodeTypes[index]]}
-				{linesVisible}
+				types={connectors}
 				hierarchy={path}
 			/>
 		{/if}

package/src/items/Connector.svelte

@@ -1,9 +1,11 @@
 <script>
-	export let type
+	export let type = null
 	export let rtl = false
+
+	$: type = ['last', 'child', 'sibling'].includes(type) ? type : 'empty'
 </script>
 
-<span class="grid grid-rows-2 grid-cols-2 h-full w-4">
+<span class="grid grid-rows-2 grid-cols-2 h-full w-4 line-{type}">
 	{#if type === 'last'}
 		{#if rtl}
 			<i class="border-b border-r" />
@@ -11,7 +13,7 @@
 			<i class="border-r" />
 			<i class="border-b" />
 		{/if}
-	{:else if type === 'middle'}
+	{:else if type === 'child'}
 		{#if rtl}
 			<i class="border-r grid grid-rows-2 row-span-2">
 				<i class="border-b" />
@@ -20,7 +22,7 @@
 			<i class="border-r col-span-1 row-span-2" />
 			<i class="border-b" />
 		{/if}
-	{:else if type === 'line'}
+	{:else if type === 'sibling'}
 		<i class="border-r row-span-2" />
 	{/if}
 </span>

package/src/items/Node.svelte

@@ -1,14 +1,16 @@
 <script>
 	import Connector from './Connector.svelte'
 	import { defaultFields, defaultStateIcons } from '../constants'
-	import { createEventDispatcher } from 'svelte'
+	// import { getLineTypes } from '../lib/connector'
+	// import { has } from 'ramda'
+	// import { createEventDispatcher } from 'svelte'
 
-	const dispatch = createEventDispatcher()
+	// const dispatch = createEventDispatcher()
 	export let content
 	export let fields = defaultFields
 	export let types = []
 	export let stateIcons = defaultStateIcons.node
-	export let linesVisible = true
+	// export let linesVisible = true
 	export let selected = false
 	export let using = {}
 	export let rtl = false
@@ -23,7 +25,8 @@
 	$: component = content[fields.component]
 		? using[content[fields.component]] || using.default
 		: using.default
-
+	// $: types = [...types, ...(hasChildren ? [] : ['empty'])]
+	// $: types = getLineTypes(hasChildren, types)
 	// function toggle() {
 	// 	if (hasChildren) content[fields.isOpen] = !content[fields.isOpen]
 	// 	dispatch('select', content)
@@ -40,15 +43,25 @@
 	role="option"
 	data-path={path.join(',')}
 >
-	{#each types.slice(1) as type}
-		<Connector type={linesVisible ? type : 'empty'} />
+	{#each types as type}
+		{#if type === 'icon'}
+			<span class="flex flex-col w-4 h-full items-center justify-center">
+				<icon class={state.icon} aria-label={state.label} tabindex="-1" />
+			</span>
+		{:else}
+			<Connector {type} />
+		{/if}
 	{/each}
+	<!-- {#each types.slice(1) as type}
+		<Connector {type} />
+	{/each} -->
 
-	{#if hasChildren}
+	<!-- {#if hasChildren}
 		<span class="flex flex-col w-4 h-full items-center justify-center">
 			<icon class={state.icon} aria-label={state.label} tabindex="-1" />
 		</span>
-	{/if}
-
-	<svelte:component this={component} bind:content {fields} />
+	{/if} -->
+	<fragment>
+		<svelte:component this={component} bind:content {fields} />
+	</fragment>
 </node>

package/src/items/Pill.svelte

@@ -16,7 +16,6 @@
 		typeof value == 'object'
 			? using[value[fields.component] ?? 'default']
 			: using.default
-	$: console.log(value, component)
 </script>
 
 <pill class="flex flex-row items-center">

package/src/lib/connector.js

@@ -0,0 +1,12 @@
+export function getLineTypes(
+	hasChildren = false,
+	parentTypes = [],
+	position = 'child'
+) {
+	let types = parentTypes.slice(0, -1).map((type) => {
+		return type === 'child' ? 'sibling' : type === 'last' ? 'empty' : type
+	})
+	if (parentTypes.length > 0) types.push(position)
+	types.push(hasChildren ? 'icon' : 'empty')
+	return types
+}