From 49216ad3ed16304e75e92d11b5951acb80828554 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Fri, 22 Nov 2024 23:59:37 +0800
Subject: [PATCH 1/4] feat: add slot-name-casing rule

---
 docs/rules/index.md                 |   1 +
 docs/rules/slot-name-casing.md      |  88 +++++++++++++++++
 lib/index.js                        |   1 +
 lib/rules/slot-name-casing.js       |  82 ++++++++++++++++
 tests/lib/rules/slot-name-casing.js | 143 ++++++++++++++++++++++++++++
 5 files changed, 315 insertions(+)
 create mode 100644 docs/rules/slot-name-casing.md
 create mode 100644 lib/rules/slot-name-casing.js
 create mode 100644 tests/lib/rules/slot-name-casing.js

diff --git a/docs/rules/index.md b/docs/rules/index.md
index d280011f1..63b6a35f6 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -283,6 +283,7 @@ For example:
 | [vue/require-typed-ref](./require-typed-ref.md) | require `ref` and `shallowRef` functions to be strongly typed |  | :hammer: |
 | [vue/restricted-component-names](./restricted-component-names.md) | enforce using only specific in component names |  | :warning: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
+| [vue/slot-name-casing](./slot-name-casing.md) | enforce specific casing for the slot name |  | :hammer: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
 | [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
 | [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
diff --git a/docs/rules/slot-name-casing.md b/docs/rules/slot-name-casing.md
new file mode 100644
index 000000000..1c4883872
--- /dev/null
+++ b/docs/rules/slot-name-casing.md
@@ -0,0 +1,88 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/slot-name-casing
+description: enforce specific casing for the slot name
+---
+
+# vue/slot-name-casing
+
+> enforce specific casing for the slot name
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
+
+## :book: Rule Details
+
+This rule enforce proper casing of slot names in vue components.
+
+<eslint-code-block :rules="{'vue/slot-name-casing': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <slot name="foo" />
+  <slot name="fooBar" />
+
+  <!-- ✗ BAD -->
+  <slot name="foo-bar" />
+  <slot name="foo_bar" />
+  <slot name="foo:bar" />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/slot-name-casing": ["error", "camelCase" | "kebab-case" | "singleword"]
+}
+```
+
+- `"camelCase"` (default) ... Enforce slot name to be camel case.
+- `"kebab-case"` ... Enforce slot name to be kebab case.
+- `"singleword"` ... Enforce slot name to be single word.
+
+### `"kebab-case"`
+
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'kebab-case']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <slot name="foo" />
+  <slot name="foo-bar" />
+
+  <!-- ✗ BAD -->
+  <slot name="fooBar" />
+  <slot name="foo_bar" />
+  <slot name="foo:bar" />
+</template>
+```
+
+</eslint-code-block>
+
+### `"singleword"`
+
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'singleword']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <slot name="foo" />
+
+  <!-- ✗ BAD -->
+  <slot name="foo-bar" />
+  <slot name="fooBar" />
+  <slot name="foo_bar" />
+  <slot name="foo:bar" />
+</template>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/slot-name-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/slot-name-casing.js)
diff --git a/lib/index.js b/lib/index.js
index a94e6c1f4..ce562f458 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -237,6 +237,7 @@ const plugin = {
     'script-indent': require('./rules/script-indent'),
     'script-setup-uses-vars': require('./rules/script-setup-uses-vars'),
     'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
+    'slot-name-casing': require('./rules/slot-name-casing'),
     'sort-keys': require('./rules/sort-keys'),
     'space-in-parens': require('./rules/space-in-parens'),
     'space-infix-ops': require('./rules/space-infix-ops'),
diff --git a/lib/rules/slot-name-casing.js b/lib/rules/slot-name-casing.js
new file mode 100644
index 000000000..bba0f24e9
--- /dev/null
+++ b/lib/rules/slot-name-casing.js
@@ -0,0 +1,82 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { 'camelCase' | 'kebab-case' | 'singleword' } OptionType
+ * @typedef { (str: string) => boolean } CheckerType
+ */
+
+/**
+ * Checks whether the given string is a single word.
+ * @param {string} str
+ * @return {boolean}
+ */
+function isSingleWord(str) {
+  return /^[a-z]+$/u.test(str)
+}
+
+/** @type {OptionType[]} */
+const allowedCaseOptions = ['camelCase', 'kebab-case', 'singleword']
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce specific casing for the slot name',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/slot-name-casing.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        enum: allowedCaseOptions
+      }
+    ],
+    messages: {
+      invalidCase: 'Slot name "{{name}}" is not in {{caseType}}.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const option = context.options[0]
+
+    /** @type {OptionType} */
+    const caseType = allowedCaseOptions.includes(option) ? option : 'camelCase'
+
+    /** @type {CheckerType} */
+    const checker =
+      caseType === 'singleword' ? isSingleWord : casing.getChecker(caseType)
+
+    /** @param {VAttribute} node */
+    function processSlotNode(node) {
+      const name = node.value?.value
+      if (name && !checker(name)) {
+        context.report({
+          node,
+          loc: node.loc,
+          messageId: 'invalidCase',
+          data: {
+            name,
+            caseType
+          }
+        })
+      }
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VElement} node */
+      "VElement[name='slot']"(node) {
+        const slotName = utils.getAttribute(node, 'name')
+        if (slotName) {
+          processSlotNode(slotName)
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/slot-name-casing.js b/tests/lib/rules/slot-name-casing.js
new file mode 100644
index 000000000..01300516b
--- /dev/null
+++ b/tests/lib/rules/slot-name-casing.js
@@ -0,0 +1,143 @@
+/**
+ * @author WayneZhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/slot-name-casing')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('slot-name-casing', rule, {
+  valid: [
+    `<template><slot key="foo" /></template>`,
+    `<template><slot name /></template>`,
+    `<template><slot name="foo" /></template>`,
+    `<template><slot name="fooBar" /></template>`,
+    `<template><slot :name="fooBar" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <slot name="foo" />
+      <slot name="foo-bar" />
+      <slot :name="fooBar" />
+      </template>`,
+      options: ['kebab-case']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <slot name="foo" />
+      <slot :name="fooBar" />
+      </template>`,
+      options: ['singleword']
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <slot name="foo-bar" />
+      <slot name="foo-Bar_baz" />
+      </template>`,
+      errors: [
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-bar',
+            caseType: 'camelCase'
+          },
+          line: 3,
+          column: 13
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-Bar_baz',
+            caseType: 'camelCase'
+          },
+          line: 4,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <slot name="fooBar" />
+      <slot name="foo-Bar_baz" />
+      </template>`,
+      options: ['kebab-case'],
+      errors: [
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'fooBar',
+            caseType: 'kebab-case'
+          },
+          line: 3,
+          column: 13
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-Bar_baz',
+            caseType: 'kebab-case'
+          },
+          line: 4,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <slot name="foo-bar" />
+      <slot name="fooBar" />
+      <slot name="foo-Bar_baz" />
+      </template>`,
+      options: ['singleword'],
+      errors: [
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-bar',
+            caseType: 'singleword'
+          },
+          line: 3,
+          column: 13
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'fooBar',
+            caseType: 'singleword'
+          },
+          line: 4,
+          column: 13
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-Bar_baz',
+            caseType: 'singleword'
+          },
+          line: 5,
+          column: 13
+        }
+      ]
+    }
+  ]
+})

From c5730a84d0665f5f36808c26886c97cd541e4083 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Sat, 23 Nov 2024 00:03:22 +0800
Subject: [PATCH 2/4] docs: update

---
 docs/rules/slot-name-casing.md | 6 +++---
 lib/rules/slot-name-casing.js  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/rules/slot-name-casing.md b/docs/rules/slot-name-casing.md
index 1c4883872..36b18fa52 100644
--- a/docs/rules/slot-name-casing.md
+++ b/docs/rules/slot-name-casing.md
@@ -40,9 +40,9 @@ This rule enforce proper casing of slot names in vue components.
 }
 ```
 
-- `"camelCase"` (default) ... Enforce slot name to be camel case.
-- `"kebab-case"` ... Enforce slot name to be kebab case.
-- `"singleword"` ... Enforce slot name to be single word.
+- `"camelCase"` (default) ... Enforce slot name to be in camel case.
+- `"kebab-case"` ... Enforce slot name to be in kebab case.
+- `"singleword"` ... Enforce slot name to be a single word.
 
 ### `"kebab-case"`
 
diff --git a/lib/rules/slot-name-casing.js b/lib/rules/slot-name-casing.js
index bba0f24e9..db8afa65f 100644
--- a/lib/rules/slot-name-casing.js
+++ b/lib/rules/slot-name-casing.js
@@ -39,7 +39,7 @@ module.exports = {
       }
     ],
     messages: {
-      invalidCase: 'Slot name "{{name}}" is not in {{caseType}}.'
+      invalidCase: 'Slot name "{{name}}" is not {{caseType}}.'
     }
   },
   /** @param {RuleContext} context */

From a465e1746915d1099f8cbad92775dd9192db174d Mon Sep 17 00:00:00 2001
From: Wayne Zhang <zhanghaowei19W@gmail.com>
Date: Wed, 27 Nov 2024 16:54:30 +0800
Subject: [PATCH 3/4] Apply suggestions from code review

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>
---
 docs/rules/slot-name-casing.md      |  2 +-
 lib/rules/slot-name-casing.js       |  2 +-
 tests/lib/rules/slot-name-casing.js | 63 ++++++++++++++++-------------
 3 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/docs/rules/slot-name-casing.md b/docs/rules/slot-name-casing.md
index 36b18fa52..55133a6b2 100644
--- a/docs/rules/slot-name-casing.md
+++ b/docs/rules/slot-name-casing.md
@@ -13,7 +13,7 @@ description: enforce specific casing for the slot name
 
 ## :book: Rule Details
 
-This rule enforce proper casing of slot names in vue components.
+This rule enforces proper casing of slot names in Vue components.
 
 <eslint-code-block :rules="{'vue/slot-name-casing': ['error']}">
 
diff --git a/lib/rules/slot-name-casing.js b/lib/rules/slot-name-casing.js
index db8afa65f..6d98d8d82 100644
--- a/lib/rules/slot-name-casing.js
+++ b/lib/rules/slot-name-casing.js
@@ -28,7 +28,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'enforce specific casing for the slot name',
+      description: 'enforce specific casing for slot names',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/slot-name-casing.html'
     },
diff --git a/tests/lib/rules/slot-name-casing.js b/tests/lib/rules/slot-name-casing.js
index 01300516b..ea8b72aab 100644
--- a/tests/lib/rules/slot-name-casing.js
+++ b/tests/lib/rules/slot-name-casing.js
@@ -25,20 +25,22 @@ tester.run('slot-name-casing', rule, {
     {
       filename: 'test.vue',
       code: `
-      <template>
-      <slot name="foo" />
-      <slot name="foo-bar" />
-      <slot :name="fooBar" />
-      </template>`,
+        <template>
+          <slot name="foo" />
+          <slot name="foo-bar" />
+          <slot :name="fooBar" />
+        </template>
+      `,
       options: ['kebab-case']
     },
     {
       filename: 'test.vue',
       code: `
-      <template>
-      <slot name="foo" />
-      <slot :name="fooBar" />
-      </template>`,
+        <template>
+          <slot name="foo" />
+          <slot :name="fooBar" />
+        </template>
+      `,
       options: ['singleword']
     }
   ],
@@ -46,10 +48,11 @@ tester.run('slot-name-casing', rule, {
     {
       filename: 'test.vue',
       code: `
-      <template>
-      <slot name="foo-bar" />
-      <slot name="foo-Bar_baz" />
-      </template>`,
+        <template>
+          <slot name="foo-bar" />
+          <slot name="foo-Bar_baz" />
+        </template>
+      `,
       errors: [
         {
           messageId: 'invalidCase',
@@ -58,7 +61,7 @@ tester.run('slot-name-casing', rule, {
             caseType: 'camelCase'
           },
           line: 3,
-          column: 13
+          column: 17
         },
         {
           messageId: 'invalidCase',
@@ -67,17 +70,18 @@ tester.run('slot-name-casing', rule, {
             caseType: 'camelCase'
           },
           line: 4,
-          column: 13
+          column: 17
         }
       ]
     },
     {
       filename: 'test.vue',
       code: `
-      <template>
-      <slot name="fooBar" />
-      <slot name="foo-Bar_baz" />
-      </template>`,
+        <template>
+          <slot name="fooBar" />
+          <slot name="foo-Bar_baz" />
+        </template>
+      `,
       options: ['kebab-case'],
       errors: [
         {
@@ -87,7 +91,7 @@ tester.run('slot-name-casing', rule, {
             caseType: 'kebab-case'
           },
           line: 3,
-          column: 13
+          column: 17
         },
         {
           messageId: 'invalidCase',
@@ -96,18 +100,19 @@ tester.run('slot-name-casing', rule, {
             caseType: 'kebab-case'
           },
           line: 4,
-          column: 13
+          column: 17
         }
       ]
     },
     {
       filename: 'test.vue',
       code: `
-      <template>
-      <slot name="foo-bar" />
-      <slot name="fooBar" />
-      <slot name="foo-Bar_baz" />
-      </template>`,
+        <template>
+          <slot name="foo-bar" />
+          <slot name="fooBar" />
+          <slot name="foo-Bar_baz" />
+        </template>
+      `,
       options: ['singleword'],
       errors: [
         {
@@ -117,7 +122,7 @@ tester.run('slot-name-casing', rule, {
             caseType: 'singleword'
           },
           line: 3,
-          column: 13
+          column: 17
         },
         {
           messageId: 'invalidCase',
@@ -126,7 +131,7 @@ tester.run('slot-name-casing', rule, {
             caseType: 'singleword'
           },
           line: 4,
-          column: 13
+          column: 17
         },
         {
           messageId: 'invalidCase',
@@ -135,7 +140,7 @@ tester.run('slot-name-casing', rule, {
             caseType: 'singleword'
           },
           line: 5,
-          column: 13
+          column: 17
         }
       ]
     }

From 0fffd9df1eaa1e06f24ec6b0232e7a117d9055c5 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Wed, 27 Nov 2024 16:57:45 +0800
Subject: [PATCH 4/4] docs: update

---
 docs/rules/index.md                      | 4 ++--
 docs/rules/restricted-component-names.md | 4 ++--
 docs/rules/slot-name-casing.md           | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 63b6a35f6..074f4bd46 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -281,9 +281,9 @@ For example:
 | [vue/require-prop-comment](./require-prop-comment.md) | require props to have a comment |  | :hammer: |
 | [vue/require-typed-object-prop](./require-typed-object-prop.md) | enforce adding type declarations to object props | :bulb: | :hammer: |
 | [vue/require-typed-ref](./require-typed-ref.md) | require `ref` and `shallowRef` functions to be strongly typed |  | :hammer: |
-| [vue/restricted-component-names](./restricted-component-names.md) | enforce using only specific in component names |  | :warning: |
+| [vue/restricted-component-names](./restricted-component-names.md) | enforce using only specific component names |  | :warning: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
-| [vue/slot-name-casing](./slot-name-casing.md) | enforce specific casing for the slot name |  | :hammer: |
+| [vue/slot-name-casing](./slot-name-casing.md) | enforce specific casing for slot names |  | :hammer: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
 | [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
 | [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
diff --git a/docs/rules/restricted-component-names.md b/docs/rules/restricted-component-names.md
index 65029d7e2..e38ed7a7b 100644
--- a/docs/rules/restricted-component-names.md
+++ b/docs/rules/restricted-component-names.md
@@ -2,12 +2,12 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/restricted-component-names
-description: enforce using only specific in component names
+description: enforce using only specific component names
 ---
 
 # vue/restricted-component-names
 
-> enforce using only specific in component names
+> enforce using only specific component names
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
 
diff --git a/docs/rules/slot-name-casing.md b/docs/rules/slot-name-casing.md
index 55133a6b2..07d793ffe 100644
--- a/docs/rules/slot-name-casing.md
+++ b/docs/rules/slot-name-casing.md
@@ -2,12 +2,12 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/slot-name-casing
-description: enforce specific casing for the slot name
+description: enforce specific casing for slot names
 ---
 
 # vue/slot-name-casing
 
-> enforce specific casing for the slot name
+> enforce specific casing for slot names
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>