@rokkit/actions 1.0.0-next.78 → 1.0.0-next.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.78",
+  "version": "1.0.0-next.80",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vitest": "~1.2.2",
-    "validators": "1.0.0-next.78",
-    "shared-config": "1.0.0-next.78"
+    "shared-config": "1.0.0-next.80",
+    "validators": "1.0.0-next.80"
   },
   "files": [
     "src/**/*.js",
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "ramda": "^0.29.1",
-    "@rokkit/core": "1.0.0-next.78",
-    "@rokkit/stores": "1.0.0-next.78"
+    "@rokkit/core": "1.0.0-next.80",
+    "@rokkit/stores": "1.0.0-next.80"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/index.js

@@ -8,5 +8,6 @@ export { navigator } from './navigator'
 export { dismissable } from './dismissable'
 export { themable } from './themeable'
 export { swipeable } from './swipeable'
+export { switchable } from './switchable'
 export { delegateKeyboardEvents } from './delegate'
 export { virtualListViewport } from './lib/viewport'

package/src/switchable.js

@@ -0,0 +1,41 @@
+export function switchable(node, data) {
+	let index = 0
+	let { value, options, disabled } = data
+
+	const update = (data) => {
+		value = data.value === null || data.value === undefined ? options[0] : data.value
+		options = data.options
+		disabled = data.disabled
+		index = options.indexOf(value)
+	}
+
+	const toggle = (increment = 1) => {
+		if (disabled) return
+		index = (index + increment) % options.length
+		value = options[index]
+		node.dispatchEvent(new CustomEvent('change', { detail: value }))
+	}
+
+	const keydown = (e) => {
+		if (disabled) return
+		if ([' ', 'Enter', 'ArrowRight', 'ArrowLeft'].includes(e.key)) {
+			e.preventDefault()
+			e.stopPropagation()
+
+			toggle(e.key === 'ArrowLeft' ? options.length - 1 : 1)
+		}
+	}
+	const click = () => toggle(1)
+
+	update(data)
+	node.addEventListener('click', click)
+	node.addEventListener('keydown', keydown)
+
+	return {
+		update,
+		destroy() {
+			node.removeEventListener('click', click)
+			node.removeEventListener('keydown', keydown)
+		}
+	}
+}

package/src/themeable.js

@@ -11,7 +11,7 @@ export function themable(node) {
 	theme.subscribe((data) => {
 		switchClass(node, data.name, previous.name)
 		switchClass(node, data.mode, previous.mode)
-
+		// switchPalette(node, data.palette, previous.palette)
 		previous = data
 	})
 }
@@ -30,3 +30,13 @@ function switchClass(node, current, previous) {
 		node.classList.add(current)
 	}
 }
+
+// function switchPalette(node, current, previous) {
+// 	Object.keys(current).map((key) => {
+// 		if (!equals(current[key], previous[key])) {
+// 			Object.keys(current[key]).map((shade) => {
+// 				node.style.setProperty(`--${key}-${shade}`, current[key][shade])
+// 			})
+// 		}
+// 	})
+// }