Add component-name-in-template-casing: 'PascalCaseNamespaced'

[aleksey-hoffman]

What rule do you want to change? vue/component-name-in-template-casing

Does this change cause the rule to produce more or fewer warnings? More

How will the change be implemented? (New option, new default behavior, etc.)? New option

Please provide some example code that this change will affect:

Vue added support for Namespaced Components:

https://vuejs.org/api/sfc-script-setup.html#namespaced-components

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

What does the rule currently do for this code? Breaks

What will the rule do after it's changed? Allow to specify PascalCaseOrNamespaced option so you could use both PascalCase and PascalCaseOrNamespaced names

'vue/component-name-in-template-casing': ['error', 'PascalCaseOrNamespaced'],

Additional context

[aleksey-hoffman]

This regex workaround would work but it won't autofix the name

'vue/component-name-in-template-casing': ['error', 'PascalCase', {
  ignores: ['/^[A-Z][a-zA-Z]*(\\.[A-Z][a-zA-Z]*)*$/']
},

[waynzh]

I can't reproduce with the example code: https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJxVjrsKwzAMRX9FaAmUOoaOwWQsFPoJWVxXKYZYNn50Cfn3OikJ7SI49+oIzWj8k7BDlUy0IUOiXEI/sHXBxwwn0AmuPjoYo3fQtHKsIIyvNRPn1Ays5NetVoVMLkw6UyUAtartjUPJG+/JXT9o6qd1KvmTbI78k5Q8LuIZY5koYTfju5A8vhCsHQnLYl8VRifLL+wuy/IBNDFPbA==

[r-thomson]

This regex workaround would work but it won't autofix the name

What would a hypothetical autofix do? From my testing, a namespaced component is case-sensitive (on both sides of the “.”), so I don’t think you could make any casing changes without breaking things.