refactor: prefer vueuse onKeyStroke (#1039)

Author: OrbisK

app/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
 import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
@@ -47,16 +47,12 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-// Global keyboard shortcut:
-// "/" focuses search or navigates to search page
-// "?" highlights all keyboard shortcut elements
-function handleGlobalKeydown(e: KeyboardEvent) {
-  if (isEditableElement(e.target)) return
-
-  if (isKeyWithoutModifiers(e, '/')) {
+onKeyDown(
+  '/',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
 
-    // Try to find and focus search input on current page
     const searchInput = document.querySelector<HTMLInputElement>(
       'input[type="search"], input[name="q"]',
     )
@@ -67,18 +63,29 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     }
 
     router.push('/search')
-  }
+  },
+  { dedupe: true },
+)
 
-  // For "?" we check the key property directly since it's usually combined with shift
-  if (e.key === '?') {
+onKeyDown(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
     showKbdHints.value = true
-  }
-}
+  },
+  { dedupe: true },
+)
 
-function handleGlobalKeyup() {
-  showKbdHints.value = false
-}
+onKeyUp(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    showKbdHints.value = false
+  },
+  { dedupe: true },
+)
 
 // Light dismiss fallback for browsers that don't support closedby="any" (Safari + old Chrome/Firefox)
 // https://codepen.io/paramagicdev/pen/gbYompq
@@ -99,9 +106,6 @@ function handleModalLightDismiss(e: MouseEvent) {
 }
 
 if (import.meta.client) {
-  useEventListener(document, 'keydown', handleGlobalKeydown)
-  useEventListener(document, 'keyup', handleGlobalKeyup)
-
   // Feature check for native light dismiss support via closedby="any"
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
   const supportsClosedBy =

app/components/ColumnPicker.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnConfig, ColumnId } from '#shared/types/preferences'
+import { onKeyDown } from '@vueuse/core'
 
 const props = defineProps<{
   columns: ColumnConfig[]
@@ -26,13 +27,16 @@ onClickOutside(
   },
 )
 
-// Close on Escape key
-useEventListener('keydown', event => {
-  if (event.key === 'Escape' && isOpen.value) {
+onKeyDown(
+  'Escape',
+  e => {
+    if (!isOpen.value) return
     isOpen.value = false
     buttonRef.value?.focus()
-  }
-})
+  },
+  { dedupe: true },
+)
+
 // Columns that can be toggled (name is always visible)
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 

app/components/DependencyPathPopup.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
+
 defineProps<{
   /** Dependency path from root to vulnerable package (readonly from VulnerabilityTreeResult) */
   path: readonly string[]
@@ -17,13 +20,16 @@ onClickOutside(popupEl, () => {
   if (isOpen.value) closePopup()
 })
 
-// Close popup on ESC or scroll
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') closePopup()
-}
+onKeyDown(
+  'Escape',
+  e => {
+    e.preventDefault()
+    closePopup()
+  },
+  { dedupe: true, target: popupEl },
+)
 
-useEventListener(document, 'keydown', handleKeydown)
-useEventListener('scroll', closePopup, true)
+useEventListener('scroll', closePopup, { passive: true })
 
 function togglePopup(event: MouseEvent) {
   if (isOpen.value) {
@@ -77,34 +83,36 @@ function parsePackageString(pkg: string): { name: string; version: string } {
       class="fixed z-[100] bg-bg-elevated border border-border rounded-lg shadow-xl p-3 min-w-64 max-w-sm"
       :style="getPopupStyle()"
     >
-      <ul class="list-none m-0 p-0 space-y-0.5">
-        <li
-          v-for="(pathItem, idx) in path"
-          :key="idx"
-          class="font-mono text-xs"
-          :style="{ paddingLeft: `${idx * 12}px` }"
-        >
-          <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
-          <NuxtLink
-            :to="{
-              name: 'package',
-              params: {
-                package: [
-                  ...parsePackageString(pathItem).name.split('/'),
-                  'v',
-                  parsePackageString(pathItem).version,
-                ],
-              },
-            }"
-            class="hover:underline"
-            :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
-            @click="closePopup"
+      <UseFocusTrap :options="{ immediate: true }">
+        <ul class="list-none m-0 p-0 space-y-0.5">
+          <li
+            v-for="(pathItem, idx) in path"
+            :key="idx"
+            class="font-mono text-xs"
+            :style="{ paddingLeft: `${idx * 12}px` }"
           >
-            {{ pathItem }}
-          </NuxtLink>
-          <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
-        </li>
-      </ul>
+            <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
+            <NuxtLink
+              :to="{
+                name: 'package',
+                params: {
+                  package: [
+                    ...parsePackageString(pathItem).name.split('/'),
+                    'v',
+                    parsePackageString(pathItem).version,
+                  ],
+                },
+              }"
+              class="hover:underline"
+              :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
+              @click="closePopup"
+            >
+              {{ pathItem }}
+            </NuxtLink>
+            <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
+          </li>
+        </ul>
+      </UseFocusTrap>
     </div>
   </div>
 </template>

app/components/ReadmeTocDropdown.vue

@@ -69,7 +69,7 @@ function handleScroll(event: Event) {
   }
   close()
 }
-useEventListener('scroll', handleScroll, true)
+useEventListener('scroll', handleScroll, { passive: true })
 
 // Generate unique ID for accessibility
 const inputId = useId()