@rokkit/actions 1.0.0-next.79 → 1.0.0-next.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/actions",
-  "version": "1.0.0-next.79",
+  "version": "1.0.0-next.81",
   "description": "Contains generic actions that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -15,15 +15,15 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/svelte": "^4.1.0",
     "@types/ramda": "^0.29.10",
-    "@vitest/coverage-v8": "^1.2.2",
-    "@vitest/ui": "~1.2.2",
+    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/ui": "~1.3.1",
     "jsdom": "^24.0.0",
-    "svelte": "^4.2.9",
+    "svelte": "^4.2.11",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "~1.2.2",
-    "shared-config": "1.0.0-next.79",
-    "validators": "1.0.0-next.79"
+    "vite": "^5.1.4",
+    "vitest": "~1.3.1",
+    "validators": "1.0.0-next.81",
+    "shared-config": "1.0.0-next.81"
   },
   "files": [
     "src/**/*.js",
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "ramda": "^0.29.1",
-    "@rokkit/core": "1.0.0-next.79",
-    "@rokkit/stores": "1.0.0-next.79"
+    "@rokkit/core": "1.0.0-next.81",
+    "@rokkit/stores": "1.0.0-next.81"
   },
   "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)
+		}
+	}
+}