wip: keyCode compat

diff --git a/packages/runtime-core/src/compat/deprecations.ts b/packages/runtime-core/src/compat/deprecations.ts
index a371649c12be2304c2feea4e1e6c93ae6d5069a9..73eca67205d524339e759b0c84b25770a4140f32 100644 (file)
--- a/packages/runtime-core/src/compat/deprecations.ts
+++ b/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`
   }
 }
 

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index b0bc0645d0a37dc0df201e6bdbf8d4fe35b32e07..54a589f83b41011b2dbcf9a2bb9c3959830eff15 100644 (file)
--- a/packages/runtime-core/src/index.ts
+++ b/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'

diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
index ce4a4d0c293764a823a3cb264e0f83a68ee00995..93d62ec6b36d3afbe6f86ce01133817a1e26535b 100644 (file)
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/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
-    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)
-    ) {
+    if (!('key' in event)) {
       return
     }
-    return fn(event)
+
+    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)
+            }
+          }
+        }
+      }
+    }
   }
 }