@fiscozen/composables 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
@@ -26,8 +26,8 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/composables/index.ts

@@ -2,3 +2,4 @@ export * from './useFloating'
 export * from './useMediaQuery'
 export * from './useBreakpoints'
 export * from './useClickOutside'
+export * from './useKeyDown'

package/src/composables/useKeyDown.ts

@@ -0,0 +1,26 @@
+import { onBeforeUnmount, onMounted, Ref } from 'vue'
+
+function useKeyDown(component: Ref<HTMLElement | undefined>, callback: (event: KeyboardEvent) => void) {
+  // fail early if any of the required params is missing
+  if (!component) {
+    throw new Error('A target component has to be provided.')
+  }
+
+  if (!callback || typeof callback !== 'function') {
+    throw new Error('A callback has to be provided.')
+  }
+
+  const listener = (event: KeyboardEvent) => {
+    callback(event)
+  }
+
+  onMounted(() => {
+    component.value!.addEventListener('keydown', listener)
+  })
+
+  onBeforeUnmount(() => {
+    component.value!.removeEventListener('keydown', listener)
+  })
+}
+
+export { useKeyDown }