From 9736e0361cdfe6be353a4c0cc1533044486515f9 Mon Sep 17 00:00:00 2001
From: nokazn <nokazn@gmail.com>
Date: Sun, 11 Oct 2020 18:21:36 +0900
Subject: [PATCH 1/5] add allowModifiers option to valid-v-slot

---
 lib/rules/valid-v-slot.js       | 42 +++++++++++++++++++++----
 tests/lib/rules/valid-v-slot.js | 54 +++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/lib/rules/valid-v-slot.js b/lib/rules/valid-v-slot.js
index a94d8c9dc..06536a184 100644
--- a/lib/rules/valid-v-slot.js
+++ b/lib/rules/valid-v-slot.js
@@ -75,15 +75,17 @@ function getSlotDirectivesOnChildren(node) {
 }
 
 /**
- * Get the normalized name of a given `v-slot` directive node.
+ * Get the normalized name of a given `v-slot` directive node with modifiers after `v-slot:` directive.
  * @param {VDirective} node The `v-slot` directive node.
  * @param {SourceCode} sourceCode The source code.
  * @returns {string} The normalized name.
  */
 function getNormalizedName(node, sourceCode) {
-  return node.key.argument == null
-    ? 'default'
-    : sourceCode.getText(node.key.argument)
+  if (node.key.argument == null) {
+    return 'default'
+  }
+  const modifierNames = node.key.modifiers.map((modifier) => modifier.name)
+  return [sourceCode.getText(node.key.argument), ...modifierNames].join('.')
 }
 
 /**
@@ -150,6 +152,22 @@ function isUsingScopeVar(vSlot) {
   return false
 }
 
+/**
+ * Check whether a given argument node has invalid modifiers like `v-slot.foo`.
+ * @param {VDirective} vSlot The `v-slot` directive to check.
+ * @param {SourceCode} sourceCode The source code.
+ * @param {boolean} allowModifiers `allowModifiers` option in context.
+ * @return {boolean} `true` if that argument node has invalid modifiers like `v-slot.foo`.
+ */
+function hasInvalidModifiers(vSlot, sourceCode, allowModifiers) {
+  if (!allowModifiers) {
+    return vSlot.key.modifiers.length >= 1
+  }
+  // E.g., `v-slot` extracted from <template v-slot.foo.bar>
+  const directiveKey = sourceCode.getText(vSlot).split('.')[0]
+  return directiveKey === 'v-slot'
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -159,7 +177,16 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/valid-v-slot.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowModifiers: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
     messages: {
       ownerMustBeCustomElement:
         "'v-slot' directive must be owned by a custom element, but '{{name}}' is not.",
@@ -181,6 +208,8 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const sourceCode = context.getSourceCode()
+    const options = context.options[0] || {}
+    const allowModifiers = options.allowModifiers === true
 
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
@@ -264,7 +293,8 @@ module.exports = {
         }
 
         // Verify modifiers.
-        if (node.key.modifiers.length >= 1) {
+        if (hasInvalidModifiers(node, sourceCode, allowModifiers)) {
+          // E.g., <template v-slot.foo>
           context.report({
             node,
             messageId: 'disallowAnyModifier'
diff --git a/tests/lib/rules/valid-v-slot.js b/tests/lib/rules/valid-v-slot.js
index 0043756f1..4f786cf99 100644
--- a/tests/lib/rules/valid-v-slot.js
+++ b/tests/lib/rules/valid-v-slot.js
@@ -84,6 +84,29 @@ tester.run('valid-v-slot', rule, {
         <template v-for="(key, value) in xxxx" #[key]>{{value}}</template>
       </MyComponent>
     </template>`,
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo.bar></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: true }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo></template>
+            <template v-slot:foo.bar></template>
+            <template v-slot:foo.baz></template>
+            <template v-slot:foo.bar.baz></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: true }]
+    },
     // parsing error
     {
       filename: 'parsing-error.vue',
@@ -279,6 +302,7 @@ tester.run('valid-v-slot', rule, {
           <MyComponent v-slot.foo="{data}">{{data}}</MyComponent>
         </template>
       `,
+      options: [{ allowModifiers: true }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
     {
@@ -289,8 +313,38 @@ tester.run('valid-v-slot', rule, {
           </MyComponent>
         </template>
       `,
+      options: [{ allowModifiers: true }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo.bar></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: false }],
+      errors: [{ messageId: 'disallowAnyModifier' }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo></template>
+            <template v-slot:foo.bar></template>
+            <template v-slot:foo.baz></template>
+            <template v-slot:foo.bar.baz></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: false }],
+      errors: [
+        { messageId: 'disallowAnyModifier' },
+        { messageId: 'disallowAnyModifier' },
+        { messageId: 'disallowAnyModifier' }
+      ]
+    },
 
     // Verify value.
     {

From 168dddb709ebe702caae2ea09790c3ec8e31e761 Mon Sep 17 00:00:00 2001
From: nokazn <nokazn@gmail.com>
Date: Sun, 11 Oct 2020 20:12:23 +0900
Subject: [PATCH 2/5] update doc

---
 docs/rules/valid-v-slot.md | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs/rules/valid-v-slot.md b/docs/rules/valid-v-slot.md
index 2a9183926..f0810cc75 100644
--- a/docs/rules/valid-v-slot.md
+++ b/docs/rules/valid-v-slot.md
@@ -100,7 +100,43 @@ This rule does not check syntax errors in directives because it's checked by [vu
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/valid-v-slot": ["error", {
+    "allowModifiers": false
+  }]
+}
+```
+
+- `allowModifiers` (`boolean`) ... allows having modifiers in the argument of `v-slot` directives. Modifiers just after `v-slot` are still disallowed. E.g. `<template v-slot.foo>` default `false`.
+
+### `allowModifiers: true`
+
+<eslint-code-block :rules="{'vue/valid-v-slot': ['error', {allowModifiers: true}]}">
+
+```vue
+<template>
+  <!-- ignore -->
+  <MyComponent>
+    <template v-slot:foo></template>
+    <template v-slot:foo.bar></template>
+    <template v-slot:foo.baz></template>
+    <template v-slot:foo.bar.baz></template>
+  </MyComponent>
+
+  <!--  ✗ BAD */ -->
+  <MyComponent v-slot.foo="{data}">
+    {{ data }}
+  </MyComponent>
+  <MyComponent>
+    <template v-slot.foo>
+      bar
+    </template>
+  </MyComponent>
+</template>
+```
+
+</eslint-code-block>
 
 ## :couple: Related Rules
 

From fb137aaf898a8fc75dcfca672dc1ebb78c762e58 Mon Sep 17 00:00:00 2001
From: nokazn <nokazn@gmail.com>
Date: Sun, 11 Oct 2020 22:28:15 +0900
Subject: [PATCH 3/5] fix for missing cases & improve code

---
 lib/rules/valid-v-slot.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/lib/rules/valid-v-slot.js b/lib/rules/valid-v-slot.js
index 06536a184..07025f5e7 100644
--- a/lib/rules/valid-v-slot.js
+++ b/lib/rules/valid-v-slot.js
@@ -84,8 +84,9 @@ function getNormalizedName(node, sourceCode) {
   if (node.key.argument == null) {
     return 'default'
   }
-  const modifierNames = node.key.modifiers.map((modifier) => modifier.name)
-  return [sourceCode.getText(node.key.argument), ...modifierNames].join('.')
+  return node.key.modifiers.length === 0
+    ? sourceCode.getText(node.key.argument)
+    : sourceCode.text.slice(node.key.argument.range[0], node.key.range[1])
 }
 
 /**
@@ -153,19 +154,16 @@ function isUsingScopeVar(vSlot) {
 }
 
 /**
- * Check whether a given argument node has invalid modifiers like `v-slot.foo`.
+ * If `allowModifiers` option is set to `true`, check whether a given argument node has invalid modifiers like `v-slot.foo`.
+ * Otherwise, check whether a given argument node has at least one modifier.
  * @param {VDirective} vSlot The `v-slot` directive to check.
- * @param {SourceCode} sourceCode The source code.
  * @param {boolean} allowModifiers `allowModifiers` option in context.
  * @return {boolean} `true` if that argument node has invalid modifiers like `v-slot.foo`.
  */
-function hasInvalidModifiers(vSlot, sourceCode, allowModifiers) {
-  if (!allowModifiers) {
-    return vSlot.key.modifiers.length >= 1
-  }
-  // E.g., `v-slot` extracted from <template v-slot.foo.bar>
-  const directiveKey = sourceCode.getText(vSlot).split('.')[0]
-  return directiveKey === 'v-slot'
+function hasInvalidModifiers(vSlot, allowModifiers) {
+  return allowModifiers
+    ? vSlot.key.argument == null && vSlot.key.modifiers.length >= 1
+    : vSlot.key.modifiers.length >= 1
 }
 
 module.exports = {
@@ -293,7 +291,7 @@ module.exports = {
         }
 
         // Verify modifiers.
-        if (hasInvalidModifiers(node, sourceCode, allowModifiers)) {
+        if (hasInvalidModifiers(node, allowModifiers)) {
           // E.g., <template v-slot.foo>
           context.report({
             node,

From 7b71243be0eb55593f120a24576c566efa0ae4c4 Mon Sep 17 00:00:00 2001
From: nokazn <nokazn@gmail.com>
Date: Sun, 11 Oct 2020 22:29:11 +0900
Subject: [PATCH 4/5] add test cases

---
 tests/lib/rules/valid-v-slot.js | 36 +++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/tests/lib/rules/valid-v-slot.js b/tests/lib/rules/valid-v-slot.js
index 4f786cf99..c030f03e4 100644
--- a/tests/lib/rules/valid-v-slot.js
+++ b/tests/lib/rules/valid-v-slot.js
@@ -282,6 +282,18 @@ tester.run('valid-v-slot', rule, {
       `,
       errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
     },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo.bar></template>
+            <template v-slot:foo.bar></template>
+          </MyComponent>
+        </template>
+      `,
+      options: [{ allowModifiers: true }],
+      errors: [{ messageId: 'disallowDuplicateSlotsOnChildren' }]
+    },
 
     // Verify arguments.
     {
@@ -313,7 +325,6 @@ tester.run('valid-v-slot', rule, {
           </MyComponent>
         </template>
       `,
-      options: [{ allowModifiers: true }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
     {
@@ -324,9 +335,30 @@ tester.run('valid-v-slot', rule, {
           </MyComponent>
         </template>
       `,
-      options: [{ allowModifiers: false }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot.foo></template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowAnyModifier' }],
+      options: [{ allowModifiers: true }]
+    },
+    {
+      code: `
+        <template>
+          <MyComponent>
+            <template v-slot:foo.bar></template>
+          </MyComponent>
+        </template>
+      `,
+      errors: [{ messageId: 'disallowAnyModifier' }],
+      options: [{ allowModifiers: false }]
+    },
     {
       code: `
         <template>

From 902717b86208942a78e4ab6b4b681774ad3210c9 Mon Sep 17 00:00:00 2001
From: nokazn <nokazn@gmail.com>
Date: Mon, 12 Oct 2020 00:03:15 +0900
Subject: [PATCH 5/5] revert option in test

---
 tests/lib/rules/valid-v-slot.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/lib/rules/valid-v-slot.js b/tests/lib/rules/valid-v-slot.js
index c030f03e4..08b55224d 100644
--- a/tests/lib/rules/valid-v-slot.js
+++ b/tests/lib/rules/valid-v-slot.js
@@ -314,7 +314,6 @@ tester.run('valid-v-slot', rule, {
           <MyComponent v-slot.foo="{data}">{{data}}</MyComponent>
         </template>
       `,
-      options: [{ allowModifiers: true }],
       errors: [{ messageId: 'disallowAnyModifier' }]
     },
     {