@rokkit/actions 1.0.0-next.35 → 1.0.0-next.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.35",
+  "version": "1.0.0-next.36",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -15,15 +15,15 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/svelte": "^4.0.3",
-    "@vitest/coverage-v8": "^0.32.3",
-    "@vitest/ui": "~0.32.3",
+    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/ui": "~0.33.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.1",
+    "svelte": "^4.0.5",
     "typescript": "^5.1.6",
     "validators": "latest",
-    "vite": "^4.3.9",
-    "vitest": "~0.32.3",
-    "shared-config": "1.0.0-next.35"
+    "vite": "^4.4.4",
+    "vitest": "~0.33.0",
+    "shared-config": "1.0.0-next.36"
   },
   "files": [
     "src/**/*.js",
@@ -40,6 +40,7 @@
     }
   },
   "dependencies": {
+    "@rokkit/core": "latest",
     "@rokkit/stores": "latest"
   },
   "scripts": {

package/src/hierarchy.js

@@ -60,7 +60,7 @@ export function isNested(items, fields) {
  */
 export function navigateToLastVisibleChild(path) {
 	let current = path[path.length - 1]
-	// console.log(current)
+
 	while (isExpanded(current.items[current.index], current.fields)) {
 		const items = current.items[current.index][current.fields.children]
 		const level = {

package/src/navigator.js

@@ -1,3 +1,4 @@
+import { getId } from '@rokkit/core'
 import {
 	moveNext,
 	movePrevious,
@@ -7,6 +8,7 @@ import {
 	indicesFromPath,
 	getCurrentNode
 } from './hierarchy'
+
 /**
  * @typedef NavigatorOptions
  * @property {Array<*>}     items           - An array containing the data set to navigate
@@ -40,7 +42,8 @@ export function navigator(node, options) {
 		path = moveNext(path, items, fields)
 		currentNode = getCurrentNode(path)
 
-		if (previousNode !== currentNode) moveTo(node, path, currentNode, idPrefix)
+		if (previousNode !== currentNode)
+			moveTo(node, path, currentNode, idPrefix, fields)
 	}
 	const previous = () => {
 		const previousNode = currentNode
@@ -48,14 +51,18 @@ export function navigator(node, options) {
 		if (path.length > 0) {
 			currentNode = getCurrentNode(path)
 			if (previousNode !== currentNode)
-				moveTo(node, path, currentNode, idPrefix)
+				moveTo(node, path, currentNode, idPrefix, fields)
 		}
 	}
 	const select = () => {
 		if (currentNode)
 			node.dispatchEvent(
 				new CustomEvent('select', {
-					detail: { path: indicesFromPath(path), node: currentNode }
+					detail: {
+						path: indicesFromPath(path),
+						node: currentNode,
+						id: getId(currentNode, fields)
+					}
 				})
 			)
 	}
@@ -68,7 +75,11 @@ export function navigator(node, options) {
 				currentNode[path[path.length - 1].fields.isOpen] = false
 				node.dispatchEvent(
 					new CustomEvent('collapse', {
-						detail: { path: indicesFromPath(path), node: currentNode }
+						detail: {
+							path: indicesFromPath(path),
+							node: currentNode,
+							id: getId(currentNode, fields)
+						}
 					})
 				)
 			} else if (path.length > 0) {
@@ -83,7 +94,11 @@ export function navigator(node, options) {
 			currentNode[path[path.length - 1].fields.isOpen] = true
 			node.dispatchEvent(
 				new CustomEvent('expand', {
-					detail: { path: indicesFromPath(path), node: currentNode }
+					detail: {
+						path: indicesFromPath(path),
+						node: currentNode,
+						id: getId(currentNode, fields)
+					}
 				})
 			)
 		}
@@ -130,13 +145,21 @@ export function navigator(node, options) {
 					: 'collapse'
 				node.dispatchEvent(
 					new CustomEvent(event, {
-						detail: { path: indices, node: currentNode }
+						detail: {
+							path: indices,
+							node: currentNode,
+							id: getId(currentNode, fields)
+						}
 					})
 				)
 			}
 			node.dispatchEvent(
 				new CustomEvent('select', {
-					detail: { path: indices, node: currentNode }
+					detail: {
+						path: indices,
+						node: currentNode,
+						id: getId(currentNode, fields)
+					}
 				})
 			)
 		}
@@ -154,15 +177,20 @@ export function navigator(node, options) {
 	}
 }
 
-export function moveTo(node, path, currentNode, idPrefix) {
+export function moveTo(node, path, currentNode, idPrefix, fields) {
 	const indices = indicesFromPath(path)
 
 	let current = node.querySelector('#' + idPrefix + indices.join('-'))
 	if (current) current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 
+	const id = getId(currentNode, fields)
 	node.dispatchEvent(
 		new CustomEvent('move', {
-			detail: { path: indices, node: currentNode }
+			detail: {
+				path: indices,
+				node: currentNode,
+				id
+			}
 		})
 	)
 }

package/src/themeable.js

@@ -9,15 +9,16 @@ export function themable(node) {
 	let previous = {}
 
 	theme.subscribe((data) => {
-		if (data.name && data.name !== previous.name) {
-			node.classList.remove(previous.name)
-			node.classList.add(data.name)
-		}
-		if (data.mode && data.mode !== previous.mode) {
-			node.classList.remove(previous.mode)
-			node.classList.add(data.mode)
-		}
+		switchClass(node, data.name, previous.name)
+		switchClass(node, data.mode, previous.mode)
 
 		previous = data
 	})
 }
+
+function switchClass(node, current, previous) {
+	if (current && current !== previous) {
+		node.classList.remove(previous)
+		node.classList.add(current)
+	}
+}