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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.16",
+  "version": "1.0.0-next.18",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -16,16 +16,16 @@
   "devDependencies": {
     "@jerrythomas/eslint-config-svelte": "^1.0.2",
     "@jerrythomas/prettier-config": "^1.0.0",
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@testing-library/svelte": "^3.2.2",
     "@vitest/coverage-istanbul": "^0.28.5",
     "@vitest/ui": "~0.12.10",
     "eslint": "^7.32.0",
     "jsdom": "^19.0.0",
-    "svelte": "^3.55.1",
+    "svelte": "^3.58.0",
     "typescript": "^4.9.5",
     "validators": "latest",
-    "vite": "^4.1.1",
+    "vite": "^4.3.2",
     "vitest": "~0.19.1",
     "shared-config": "1.0.0"
   },

package/src/BreadCrumbs.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { defaultFields } from './constants'
+	import { Text } from './items'
+
+	export let items = []
+	export let separator = '/'
+	export let fields = defaultFields
+	export let using
+
+	$: fields = { ...defaultFields, ...(fields ?? {}) }
+	$: using = { default: Text, ...(using ?? {}) }
+</script>
+
+<crumbs class="flex">
+	{#each items as item, index}
+		{#if item}
+			{@const component = item[fields.component]
+				? using[item[fields.component]] || using.default
+				: using.default}
+			{#if index > 0}
+				<span>
+					{#if separator.length == 1}
+						{separator}
+					{:else}
+						<icon class={separator} />
+					{/if}
+				</span>
+			{/if}
+			<crumb class:is-selected={index == items.length - 1}>
+				<svelte:component this={component} content={item} {fields} />
+			</crumb>
+		{/if}
+	{/each}
+</crumbs>

package/src/Icon.svelte

@@ -6,10 +6,12 @@
 	let h
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <square-icon
 	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
 	bind:clientHeight={h}
 	style:width="{h}px"
+	on:click
 >
 	<icon class={name} aria-hidden="true" />
 </square-icon>

package/src/NestedList.svelte

@@ -1,11 +1,9 @@
 <script>
 	import { Node, Text } from './items'
 	import { defaultFields } from './constants'
-	import { createEventDispatcher } from 'svelte'
-	// import { navigator } from './actions/navigator'
-
-	// const dispatch = createEventDispatcher()
 
+	let className = 'list'
+	export { className as class }
 	export let items = []
 	export let fields = defaultFields
 	export let using = {}
@@ -14,7 +12,7 @@
 	export let linesVisible = true
 	export let rtl = false
 	export let hierarchy = []
-
+	export let icons
 	// let indices = []
 
 	// function handle(event) {
@@ -34,7 +32,7 @@
 </script>
 
 <nested-list
-	class="flex flex-col w-full"
+	class="flex flex-col w-full {className}"
 	role="listbox"
 	class:rtl
 	tabindex="-1"
@@ -60,6 +58,7 @@
 			{linesVisible}
 			{rtl}
 			{path}
+			stateIcons={icons}
 			selected={value === content}
 		/>
 		{#if hasChildren && content[fields.isOpen]}
@@ -68,6 +67,7 @@
 				bind:value
 				{fields}
 				{using}
+				{icons}
 				types={[...connectors, type, nodeTypes[index]]}
 				{linesVisible}
 				hierarchy={path}

package/src/NestedPaginator.svelte

@@ -0,0 +1,64 @@
+<script>
+	import BreadCrumbs from './BreadCrumbs.svelte'
+	import { Text } from './items'
+	import { flattenNestedList } from './lib/nested'
+	import { createEventDispatcher } from 'svelte'
+
+	const dispatch = createEventDispatcher()
+	export let items
+	export let value
+	export let fields
+	export let using
+
+	let trail
+	let flatList
+
+	function handleNav(event) {
+		let current = flatList.findIndex((item) => item === value)
+		let index = current
+		if (event === 'previous') {
+			while (index > 0 && !flatList[index][fields.key]) {
+				index = index - 1
+			}
+		} else {
+			while (index < flatList.length - 1 && !flatList[index][fields.key]) {
+				index = index + 1
+			}
+		}
+		if (flatList[index][fields.key]) {
+			value = flatList[index]
+			trail = findTrail(flatList, value)
+			dispatch('change', { item: value, trail })
+		}
+	}
+	function findTrail(items, value) {
+		let trail = []
+		let index = items.findIndex((item) => item === value)
+		if (index === -1) return trail
+
+		let level = items[index][fields.level]
+		while (level > 0) {
+			trail.unshift(items[index])
+			index = items.findIndex(
+				(item, i) => i < index && item[fields.level] === level - 1
+			)
+			level = items[index][fields.level]
+		}
+		return trail
+	}
+
+	$: flatList = flattenNestedList(items, fields)
+	$: fields = { ...defaultFields, ...(fields ?? {}) }
+	$: using = { default: Text, ...(using ?? {}) }
+</script>
+
+<pages>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<icon
+		class="arrow-left cursor-pointer"
+		on:click={() => handleNav('previous')}
+	/>
+	<BreadCrumbs items={trail} {fields} {using} />
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<icon class="arrow-right cursor-pointer" on:click={() => handleNav('next')} />
+</pages>

package/src/Tree.svelte

@@ -6,13 +6,13 @@
 	import { navigator } from './actions/navigator'
 
 	const dispatch = createEventDispatcher()
-
+	let className = 'list'
+	export { className as class }
 	export let items = []
 	export let fields = {}
 	export let using = { default: Text }
 	export let root = null
-	export let rtl = false
-	export let value
+	export let value = null
 
 	let indices = []
 
@@ -27,9 +27,15 @@
 
 	$: fields = { ...defaultFields, ...fields }
 	$: items =
-		items.length == 1 || root == null
+		items[0][fields.text] == root || root == null
 			? items
-			: [{ [fields.text]: root, [fields.children]: items }]
+			: [
+					{
+						[fields.text]: root,
+						[fields.isOpen]: true,
+						[fields.children]: items
+					}
+			  ]
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -40,6 +46,7 @@
 	on:expand={handle}
 	on:collapse={handle}
 	tabindex="0"
+	class={className}
 >
-	<NestedList {items} {fields} {using} {rtl} {value} />
+	<NestedList {items} {fields} {using} {value} {...$$restProps} />
 </tree>

package/src/constants.js

@@ -77,8 +77,10 @@ export const defaultOptions = {
  * @property {string} [notes='notes']
  * @property {string} [props='props']
  * @property {string} [isOpen='_open']       - Attribute to identify if the current item is open
+ * @property {string} [level='level']        - Attribute to identify level of current item
+ * @property {string} [parent='parent']      - Attribute to identify if the current item is a parent
  * @property {string} [isDeleted='_deleted'] - Attribute to identify if the current item is deleted
- * @property {FieldMapping} [fields]         - Field mapping to be used on children in the next level
+ * @property {FieldMapping} [fields?]        - Field mapping to be used on children in the next level
  */
 export const defaultFields = {
 	id: 'id',
@@ -93,7 +95,9 @@ export const defaultFields = {
 	props: 'props',
 	target: 'target',
 	isOpen: '_open',
-	isDeleted: '_deleted'
+	isDeleted: '_deleted',
+	level: 'level',
+	parent: 'parent'
 }
 
 export const defaultKeyMap = {

package/src/index.js

@@ -1,5 +1,6 @@
 export * from './constants'
 export * from './items'
+export * from './lib'
 
 export { default as Icon } from './Icon.svelte'
 // export { default as List } from './List-Discard.svelte'
@@ -10,6 +11,8 @@ export { default as Searchable } from './Searchable.svelte'
 export { default as Scrollable } from './Scrollable.svelte'
 export { default as NestedList } from './NestedList.svelte'
 export { default as Tabs } from './Tabs.svelte'
+export { default as BreadCrumbs } from './BreadCrumbs.svelte'
+export { default as NestedPaginator } from './NestedPaginator.svelte'
 
 export { default as Alerts } from './Alerts.svelte'
 export { default as Slider } from './Slider.svelte'

package/src/items/Node.svelte

@@ -14,6 +14,7 @@
 	export let rtl = false
 	export let path = []
 
+	$: stateIcons = { ...defaultStateIcons.node, ...(stateIcons ?? {}) }
 	$: hasChildren = fields.children in content
 	$: state =
 		hasChildren && content[fields.isOpen]
@@ -34,6 +35,7 @@
 	id={'id-' + path.join('-')}
 	class="flex flex-row min-h-5 items-center cursor-pointer select-none"
 	class:is-selected={selected}
+	class:flex-row-reverse={rtl}
 	aria-selected={selected}
 	role="option"
 	data-path={path.join(',')}
@@ -48,5 +50,5 @@
 		</span>
 	{/if}
 
-	<svelte:component this={component} bind:content />
+	<svelte:component this={component} bind:content {fields} />
 </node>

package/src/items/Text.svelte

@@ -10,7 +10,7 @@
 
 {#if isObject && content[fields.image]}
 	<img
-		class="h-8 w-8 rounded-full object-cover"
+		class="h-4 w-4 object-cover"
 		alt={content[fields.text]}
 		src={content[fields.image]}
 	/>

package/src/lib/index.js

@@ -0,0 +1 @@
+export * from './nested'

package/src/lib/nested.js

@@ -0,0 +1,50 @@
+import { omit } from 'ramda'
+import { defaultFields } from '../constants'
+// const defaultFields = {
+// 	children: 'children',
+// 	level: 'level',
+// 	parent: 'parent'
+// }
+
+export function flattenNestedList(items, fields = defaultFields, level = 0) {
+	fields = { ...defaultFields, ...fields }
+	let data = []
+	items.map((item) => {
+		const children = item[fields.children] ?? []
+		data = [
+			...data,
+			{
+				...omit([fields.children], item),
+				[fields.level]: level,
+				[fields.parent]: children.length > 0
+			},
+			...flattenNestedList(children, fields, level + 1)
+		]
+	})
+	return data
+}
+
+/**
+ * Converts a path slug to a value in the menu
+ *
+ * @param {string} slug
+ * @returns {any}
+ */
+export function findValueFromPath(slug, data, fields) {
+	fields = { ...defaultFields, ...fields }
+	const keys = slug.split('/')
+	let items = data
+	let value = null
+	keys.map((key, index) => {
+		const match = items.find((item) => item[fields.key] === key)
+		if (match) {
+			if (index < keys.length - 1) {
+				match[fields.isOpen] = true
+				items = match[fields.children]
+			} else {
+				value = match
+			}
+		}
+	})
+	return value
+}

package/src/stores/theme.js

@@ -20,7 +20,7 @@ export function ThemeStore() {
 		const { name, mode } = value ?? {}
 		if (typeof name === 'string' && typeof mode === 'string') {
 			store.set(value)
-		} else if (value) {
+		} else if (value && value !== {}) {
 			console.error('Both "name" and "mode" must be strings', value)
 		}
 	}