From 3980a5532217cc97bc107fb848969e308a84d641 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Wed, 23 Mar 2022 20:22:40 -0700
Subject: [PATCH 1/3] Fix #1808: Lint slots in attribute-hyphenation

---
 docs/rules/attribute-hyphenation.md      | 22 ++++++++++++++-
 lib/rules/attribute-hyphenation.js       | 20 ++++++++++++-
 tests/lib/rules/attribute-hyphenation.js | 36 ++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 2aa8a39e5..a63d26310 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -35,7 +35,8 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 ```json
 {
   "vue/attribute-hyphenation": ["error", "always" | "never", {
-    "ignore": []
+    "ignore": [],
+    "includeSlots": false,
   }]
 }
 ```
@@ -46,6 +47,7 @@ and all the [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/At
 - `"always"` (default) ... Use hyphenated name.
 - `"never"` ... Don't use hyphenated name except the ones that are ignored.
 - `"ignore"` ... Array of ignored names
+- `"includeSlots"` ... Will lint attributes on slot elements when set to true
 
 ### `"always"`
 
@@ -108,6 +110,24 @@ Don't use hyphenated name but allow custom attributes
 
 </eslint-code-block>
 
+### `"always", { "includeSlots": true }`
+
+Use hyphenated names on slot elements
+
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always', { includeSlots: true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent><slot my-prop="prop"></slot></MyComponent>
+
+  <!-- ✗ BAD -->
+  <MyComponent><slot myProp="prop"></slot></MyComponent>
+</template>
+```
+
+</eslint-code-block>
+
 ## :couple: Related Rules
 
 - [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)
diff --git a/lib/rules/attribute-hyphenation.js b/lib/rules/attribute-hyphenation.js
index ec5a3a9ab..19add5b1e 100644
--- a/lib/rules/attribute-hyphenation.js
+++ b/lib/rules/attribute-hyphenation.js
@@ -40,6 +40,9 @@ module.exports = {
             },
             uniqueItems: true,
             additionalItems: false
+          },
+          includeSlots: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -100,13 +103,28 @@ module.exports = {
       return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
     }
 
+    /**
+     * @param {VDirective | VAttribute} node
+     */
+    function isConfiguredSlot(node) {
+      return (
+        optionsPayload &&
+        optionsPayload.includeSlots &&
+        node.parent.parent.name === 'slot'
+      )
+    }
+
     // ----------------------------------------------------------------------
     // Public
     // ----------------------------------------------------------------------
 
     return utils.defineTemplateBodyVisitor(context, {
       VAttribute(node) {
-        if (!utils.isCustomComponent(node.parent.parent)) return
+        if (
+          !utils.isCustomComponent(node.parent.parent) &&
+          !isConfiguredSlot(node)
+        )
+          return
 
         const name = !node.directive
           ? node.key.rawName
diff --git a/tests/lib/rules/attribute-hyphenation.js b/tests/lib/rules/attribute-hyphenation.js
index 7e7f2ea9d..0e455a841 100644
--- a/tests/lib/rules/attribute-hyphenation.js
+++ b/tests/lib/rules/attribute-hyphenation.js
@@ -56,6 +56,16 @@ ruleTester.run('attribute-hyphenation', rule, {
       filename: 'test.vue',
       code: '<template><my-component :[foo-bar]></my-component></template>',
       options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot my-prop></slot></div></template>',
+      options: ['always', { includeSlots: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot myProp></slot></div></template>',
+      options: ['never', { includeSlots: true }]
     }
   ],
 
@@ -252,6 +262,32 @@ ruleTester.run('attribute-hyphenation', rule, {
           line: 3
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot my-prop="foo"></slot></div></template>',
+      output: '<template><div><slot myProp="foo"></slot></div></template>',
+      options: ['never', { includeSlots: true }],
+      errors: [
+        {
+          message: "Attribute 'my-prop' can't be hyphenated.",
+          type: 'VIdentifier',
+          line: 1
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><slot MyProp="Bar"></slot></div></template>',
+      output: '<template><div><slot my-prop="Bar"></slot></div></template>',
+      options: ['always', { includeSlots: true }],
+      errors: [
+        {
+          message: "Attribute 'MyProp' must be hyphenated.",
+          type: 'VIdentifier',
+          line: 1
+        }
+      ]
     }
   ]
 })

From 01b80b525015d391edc5da37e2739f788aa984fd Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 26 Mar 2022 22:05:16 -0700
Subject: [PATCH 2/3] remove includeSlots option

---
 docs/rules/attribute-hyphenation.md      | 21 +--------------------
 lib/rules/attribute-hyphenation.js       | 16 +---------------
 tests/lib/rules/attribute-hyphenation.js |  8 ++++----
 3 files changed, 6 insertions(+), 39 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index a63d26310..df518a05d 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -5,6 +5,7 @@ title: vue/attribute-hyphenation
 description: enforce attribute naming style on custom components in template
 since: v3.9.0
 ---
+
 # vue/attribute-hyphenation
 
 > enforce attribute naming style on custom components in template
@@ -36,7 +37,6 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 {
   "vue/attribute-hyphenation": ["error", "always" | "never", {
     "ignore": [],
-    "includeSlots": false,
   }]
 }
 ```
@@ -47,7 +47,6 @@ and all the [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/At
 - `"always"` (default) ... Use hyphenated name.
 - `"never"` ... Don't use hyphenated name except the ones that are ignored.
 - `"ignore"` ... Array of ignored names
-- `"includeSlots"` ... Will lint attributes on slot elements when set to true
 
 ### `"always"`
 
@@ -110,24 +109,6 @@ Don't use hyphenated name but allow custom attributes
 
 </eslint-code-block>
 
-### `"always", { "includeSlots": true }`
-
-Use hyphenated names on slot elements
-
-<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always', { includeSlots: true }]}">
-
-```vue
-<template>
-  <!-- ✓ GOOD -->
-  <MyComponent><slot my-prop="prop"></slot></MyComponent>
-
-  <!-- ✗ BAD -->
-  <MyComponent><slot myProp="prop"></slot></MyComponent>
-</template>
-```
-
-</eslint-code-block>
-
 ## :couple: Related Rules
 
 - [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)
diff --git a/lib/rules/attribute-hyphenation.js b/lib/rules/attribute-hyphenation.js
index 19add5b1e..f9126a548 100644
--- a/lib/rules/attribute-hyphenation.js
+++ b/lib/rules/attribute-hyphenation.js
@@ -40,9 +40,6 @@ module.exports = {
             },
             uniqueItems: true,
             additionalItems: false
-          },
-          includeSlots: {
-            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -103,17 +100,6 @@ module.exports = {
       return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
     }
 
-    /**
-     * @param {VDirective | VAttribute} node
-     */
-    function isConfiguredSlot(node) {
-      return (
-        optionsPayload &&
-        optionsPayload.includeSlots &&
-        node.parent.parent.name === 'slot'
-      )
-    }
-
     // ----------------------------------------------------------------------
     // Public
     // ----------------------------------------------------------------------
@@ -122,7 +108,7 @@ module.exports = {
       VAttribute(node) {
         if (
           !utils.isCustomComponent(node.parent.parent) &&
-          !isConfiguredSlot(node)
+          node.parent.parent.name !== 'slot'
         )
           return
 
diff --git a/tests/lib/rules/attribute-hyphenation.js b/tests/lib/rules/attribute-hyphenation.js
index 0e455a841..26f9531cb 100644
--- a/tests/lib/rules/attribute-hyphenation.js
+++ b/tests/lib/rules/attribute-hyphenation.js
@@ -60,12 +60,12 @@ ruleTester.run('attribute-hyphenation', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><slot my-prop></slot></div></template>',
-      options: ['always', { includeSlots: true }]
+      options: ['always']
     },
     {
       filename: 'test.vue',
       code: '<template><div><slot myProp></slot></div></template>',
-      options: ['never', { includeSlots: true }]
+      options: ['never']
     }
   ],
 
@@ -267,7 +267,7 @@ ruleTester.run('attribute-hyphenation', rule, {
       filename: 'test.vue',
       code: '<template><div><slot my-prop="foo"></slot></div></template>',
       output: '<template><div><slot myProp="foo"></slot></div></template>',
-      options: ['never', { includeSlots: true }],
+      options: ['never'],
       errors: [
         {
           message: "Attribute 'my-prop' can't be hyphenated.",
@@ -280,7 +280,7 @@ ruleTester.run('attribute-hyphenation', rule, {
       filename: 'test.vue',
       code: '<template><div><slot MyProp="Bar"></slot></div></template>',
       output: '<template><div><slot my-prop="Bar"></slot></div></template>',
-      options: ['always', { includeSlots: true }],
+      options: ['always'],
       errors: [
         {
           message: "Attribute 'MyProp' must be hyphenated.",

From 9fa42efde3461baac39199339c1df2ce3f42f013 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 27 Mar 2022 02:26:30 -0700
Subject: [PATCH 3/3] remove stray linting

---
 docs/rules/attribute-hyphenation.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index df518a05d..2aa8a39e5 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -5,7 +5,6 @@ title: vue/attribute-hyphenation
 description: enforce attribute naming style on custom components in template
 since: v3.9.0
 ---
-
 # vue/attribute-hyphenation
 
 > enforce attribute naming style on custom components in template
@@ -36,7 +35,7 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 ```json
 {
   "vue/attribute-hyphenation": ["error", "always" | "never", {
-    "ignore": [],
+    "ignore": []
   }]
 }
 ```