wip: keyCode compat

packages/runtime-core/src/compat/deprecations.ts

@@ -29,7 +29,9 @@ export const enum DeprecationTypes {
 
   PROPS_DEFAULT_THIS,
 
-  CUSTOM_DIR
+  CUSTOM_DIR,
+
+  V_ON_KEYCODE_MODIFIER
 }
 
 type DeprecationData = {
@@ -190,6 +192,13 @@ const deprecations: Record<DeprecationTypes, DeprecationData> = {
       `Custom directive hook "${legacyHook}" has been removed. ` +
       `Use "${newHook}" instead.`,
     link: `https://v3.vuejs.org/guide/migration/custom-directives.html`
+  },
+
+  [DeprecationTypes.V_ON_KEYCODE_MODIFIER]: {
+    message:
+      `Using keyCode as v-on modifier is no longer supported. ` +
+      `Use kebab-case key name modifiers instead.`,
+    link: `https://v3.vuejs.org/guide/migration/keycode-modifiers.html`
   }
 }
 

packages/runtime-core/src/index.ts

@@ -286,3 +286,4 @@ export const ssrUtils = (__NODE_JS__ ? _ssrUtils : null) as typeof _ssrUtils
 // checks
 export { warnDeprecation, DeprecationTypes } from './compat/deprecations'
 export { createCompatVue, CompatVue } from './compat/global'
+export { LegacyConfig } from './compat/globalConfig'

packages/runtime-dom/src/directives/vOn.ts

@@ -1,4 +1,10 @@
-import { hyphenate } from '@vue/shared'
+import {
+  DeprecationTypes,
+  warnDeprecation,
+  getCurrentInstance,
+  LegacyConfig
+} from '@vue/runtime-core'
+import { hyphenate, isArray } from '@vue/shared'
 
 const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
 
@@ -51,15 +57,43 @@ const keyNames: Record<string, string | string[]> = {
  * @private
  */
 export const withKeys = (fn: Function, modifiers: string[]) => {
+  let keyCodes: LegacyConfig['keyCodes']
+  if (__COMPAT__) {
+    keyCodes = ((getCurrentInstance()!.appContext
+      .config as any) as LegacyConfig).keyCodes
+    if (__DEV__ && modifiers.some(m => /^\d+$/.test(m))) {
+      warnDeprecation(DeprecationTypes.V_ON_KEYCODE_MODIFIER)
+    }
+  }
+
   return (event: KeyboardEvent) => {
-    if (!('key' in event)) return
+    if (!('key' in event)) {
-    const eventKey = hyphenate(event.key)
-    if (
-      // None of the provided key modifiers match the current event key
-      !modifiers.some(k => k === eventKey || keyNames[k] === eventKey)
-    ) {
       return
     }
+
+    const eventKey = hyphenate(event.key)
+    if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
+      return fn(event)
+    }
+
+    if (__COMPAT__) {
+      const keyCode = String(event.keyCode)
+      if (modifiers.some(mod => mod == keyCode)) {
+        return fn(event)
+      }
+      if (keyCodes) {
+        for (const mod of modifiers) {
+          const codes = keyCodes[mod]
+          if (codes) {
+            const matches = isArray(codes)
+              ? codes.some(code => String(code) === keyCode)
+              : String(codes) === keyCode
+            if (matches) {
               return fn(event)
             }
           }
+        }
+      }
+    }
+  }
+}