refactor(VHotkey): remove duplicate and redundant code

Author: KaelWD

packages/vuetify/src/composables/hotkey/hotkey.ts

@@ -2,9 +2,8 @@
 import { splitKeyCombination, splitKeySequence } from '@/composables/hotkey/hotkey-parsing'
 
 // Utilities
-import { onBeforeUnmount, toValue, watch } from 'vue'
+import { onScopeDispose, toValue, watch } from 'vue'
 import { IN_BROWSER } from '@/util'
-import { getCurrentInstance } from '@/util/getCurrentInstance'
 
 // Types
 import type { MaybeRef } from '@/util'
@@ -36,13 +35,6 @@ export function useHotkey (
   let isSequence = false
   let groupIndex = 0
 
-  function clearTimer () {
-    if (!timeout) return
-
-    clearTimeout(timeout)
-    timeout = 0
-  }
-
   function isInputFocused () {
     if (toValue(inputs)) return false
 
@@ -58,15 +50,15 @@ export function useHotkey (
 
   function resetSequence () {
     groupIndex = 0
-    clearTimer()
+    clearTimeout(timeout)
   }
 
   function handler (e: KeyboardEvent) {
     const group = keyGroups[groupIndex]
 
     if (!group || isInputFocused()) return
 
-    if (!matchesKeyGroup(e, group)) {
+    if (!matchesKeyGroup(e, group, isMac)) {
       if (isSequence) resetSequence()
       return
     }
@@ -78,7 +70,7 @@ export function useHotkey (
       return
     }
 
-    clearTimer()
+    clearTimeout(timeout)
     groupIndex++
 
     if (groupIndex === keyGroups.length) {
@@ -92,14 +84,14 @@ export function useHotkey (
 
   function cleanup () {
     window.removeEventListener(toValue(event), handler)
-    clearTimer()
+    clearTimeout(timeout)
   }
 
-  watch(() => toValue(keys), function (unrefKeys) {
+  watch(() => toValue(keys), newKeys => {
     cleanup()
 
-    if (unrefKeys) {
-      const groups = splitKeySequence(unrefKeys.toLowerCase())
+    if (newKeys) {
+      const groups = splitKeySequence(newKeys.toLowerCase())
       isSequence = groups.length > 1
       keyGroups = groups
       resetSequence()
@@ -108,59 +100,54 @@ export function useHotkey (
   }, { immediate: true })
 
   // Watch for changes in the event type to re-register the listener
-  watch(() => toValue(event), function (newEvent, oldEvent) {
+  watch(() => toValue(event), (newEvent, oldEvent) => {
     if (oldEvent && keyGroups && keyGroups.length > 0) {
       window.removeEventListener(oldEvent, handler)
       window.addEventListener(newEvent, handler)
     }
   })
 
-  try {
-    getCurrentInstance('useHotkey')
-    onBeforeUnmount(cleanup)
-  } catch {
-    // Not in Vue setup context
-  }
+  onScopeDispose(cleanup, true)
+
+  return cleanup
+}
 
-  function parseKeyGroup (group: string) {
-    const MODIFIERS = ['ctrl', 'shift', 'alt', 'meta', 'cmd']
+function matchesKeyGroup (e: KeyboardEvent, group: string, isMac: boolean) {
+  const { modifiers, actualKey } = parseKeyGroup(group)
 
-    // Use the shared combination splitting logic
-    const parts = splitKeyCombination(group.toLowerCase())
+  const expectCtrl = modifiers.ctrl || (!isMac && (modifiers.cmd || modifiers.meta))
+  const expectMeta = isMac && (modifiers.cmd || modifiers.meta)
 
-    // If the combination is invalid, return empty result
-    if (parts.length === 0) {
-      return { modifiers: Object.fromEntries(MODIFIERS.map(m => [m, false])), actualKey: undefined }
-    }
+  return (
+    e.ctrlKey === expectCtrl &&
+    e.metaKey === expectMeta &&
+    e.shiftKey === modifiers.shift &&
+    e.altKey === modifiers.alt &&
+    e.key.toLowerCase() === actualKey?.toLowerCase()
+  )
+}
 
-    const modifiers = Object.fromEntries(MODIFIERS.map(m => [m, false])) as Record<string, boolean>
-    let actualKey: string | undefined
+function parseKeyGroup (group: string) {
+  const MODIFIERS = ['ctrl', 'shift', 'alt', 'meta', 'cmd']
 
-    for (const part of parts) {
-      if (MODIFIERS.includes(part)) {
-        modifiers[part] = true
-      } else {
-        actualKey = part
-      }
-    }
+  // Use the shared combination splitting logic
+  const parts = splitKeyCombination(group.toLowerCase())
 
-    return { modifiers, actualKey }
+  // If the combination is invalid, return empty result
+  if (parts.length === 0) {
+    return { modifiers: Object.fromEntries(MODIFIERS.map(m => [m, false])), actualKey: undefined }
   }
 
-  function matchesKeyGroup (e: KeyboardEvent, group: string) {
-    const { modifiers, actualKey } = parseKeyGroup(group)
+  const modifiers = Object.fromEntries(MODIFIERS.map(m => [m, false])) as Record<string, boolean>
+  let actualKey: string | undefined
 
-    const expectCtrl = modifiers.ctrl || (!isMac && (modifiers.cmd || modifiers.meta))
-    const expectMeta = isMac && (modifiers.cmd || modifiers.meta)
-
-    return (
-      e.ctrlKey === expectCtrl &&
-      e.metaKey === expectMeta &&
-      e.shiftKey === modifiers.shift &&
-      e.altKey === modifiers.alt &&
-      e.key.toLowerCase() === actualKey?.toLowerCase()
-    )
+  for (const part of parts) {
+    if (MODIFIERS.includes(part)) {
+      modifiers[part] = true
+    } else {
+      actualKey = part
+    }
   }
 
-  return cleanup
+  return { modifiers, actualKey }
 }

packages/vuetify/src/labs/VHotkey/VHotkey.scss

@@ -147,8 +147,6 @@
       gap: $hotkey-combination-gap;
     }
 
-
-
     &--inline &__key {
       &-symbol.v-kbd,
       &-text.v-kbd {
@@ -209,22 +207,20 @@
     }
 
     &--variant-outlined &__key.v-kbd {
+      background: none;
+
       @include tools.elevation(0);
-      & {
-        background: none;
-      }
     }
 
     &--variant-text {
       .v-hotkey__key.v-kbd {
+        background: transparent !important;
+        border: none !important;
+        padding-left: 0;
+        padding-right: 0;
+        min-width: auto;
+
         @include tools.elevation(0);
-        & {
-          background: transparent !important;
-          border: none !important;
-          padding-left: 0;
-          padding-right: 0;
-          min-width: auto;
-        }
       }
 
       .v-hotkey__combination {
@@ -237,17 +233,4 @@
       box-shadow: unset;
     }
   }
-
-  // Screen reader only content
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
 }