Fix #519 add custom modifiers to vue/valid-v-on (#579)

Author: armano2

docs/rules/valid-v-on.md

@@ -36,7 +36,24 @@ This rule does not check syntax errors in directives because it's checked by [no
 
 ## :wrench: Options
 
-Nothing.
+This rule has an object option:
+
+`"modifiers"`: [] (default) array of additional allowed modifiers.
+
+### Example:
+
+```json
+"vue/valid-v-on": [2, {
+  modifiers: ['foo']
+}]
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<div @click.foo="foo"/>
+<div v-on:click.foo="foo"/>
+```
 
 ## :couple: Related rules
 

lib/rules/valid-v-on.js

@@ -93,7 +93,7 @@ const KEY_ALIASES = new Set([
   'media-previous-track', 'power', 'unidentified'
 ])
 
-function isValidModifier (modifier) {
+function isValidModifier (modifier, customModifiers) {
   return (
     // built-in aliases
     VALID_MODIFIERS.has(modifier) ||
@@ -102,7 +102,9 @@ function isValidModifier (modifier) {
     // keyAlias (an Unicode character)
     Array.from(modifier).length === 1 ||
     // keyAlias (special keys)
-    KEY_ALIASES.has(modifier)
+    KEY_ALIASES.has(modifier) ||
+    // custom modifiers
+    customModifiers.has(modifier)
   )
 }
 
@@ -118,14 +120,27 @@ module.exports = {
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.3/docs/rules/valid-v-on.md'
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          modifiers: {
+            type: 'array'
+          }
+        },
+        additionalProperties: false
+      }
+    ]
   },
 
   create (context) {
+    const options = context.options[0] || {}
+    const customModifiers = new Set(options.modifiers || [])
+
     return utils.defineTemplateBodyVisitor(context, {
       "VAttribute[directive=true][key.name='on']" (node) {
         for (const modifier of node.key.modifiers) {
-          if (!isValidModifier(modifier)) {
+          if (!isValidModifier(modifier, customModifiers)) {
             context.report({
               node,
               loc: node.loc,

tests/lib/rules/valid-v-on.js

@@ -86,6 +86,16 @@ tester.run('valid-v-on', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-on="{a, b, c: d}"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @keydown.bar="foo"></div></template>',
+      options: [{ modifiers: ['bar'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on:keydown.bar.aaa="foo"></div></template>',
+      options: [{ modifiers: ['bar', 'aaa'] }]
     }
   ],
   invalid: [
@@ -103,6 +113,18 @@ tester.run('valid-v-on', rule, {
       filename: 'test.vue',
       code: '<template><div @click></div></template>',
       errors: ["'v-on' directives require that attribute value or verb modifiers."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @keydown.bar.aaa="foo"></div></template>',
+      errors: ["'v-on' directives don't support the modifier 'aaa'."],
+      options: [{ modifiers: ['bar'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @keydown.bar.aaa="foo"></div></template>',
+      errors: ["'v-on' directives don't support the modifier 'bar'."],
+      options: [{ modifiers: ['aaa'] }]
     }
   ]
 })