chore(web stack): add new ESLint Vue rules

[ByScripts]

Description

This PR brings a first set of new ESLint rules for XO Lite / 6 / Core stack.

• vue/multi-word-component-names

  This rule has been deactivated to allow single word components name. The way we import and use our component should not be a problem if HTML brings new tags later.

• vue/block-order

  Ensure consistency across components for template, script and style block order.

• vue/block-tag-newline

  Ensure consistency for block opening and closing tags.

  <!-- GOOD -->
  <template>Foobar</template>
  
  <!-- GOOD -->
  <template>
  Foobar
  </template>
  
  <!-- BAD -->
  <template>Foobar
  </template>

• vue/component-api-style

  Ensure our components exclusively use script setup API.

• vue/custom-event-name-casing

  Ensure our custom event names to be camelCase

• vue/define-props-declaration

  Ensure our props are declared with TypeScript

  // GOOD
  defineProps<{ foo: string }>()
  
  // BAD
  defineProps({ foo: String })

• vue/enforce-style-attribute

  Ensure that all our components are using scoped or module style. This prevents leaking styles across the whole app

• vue/html-comment-content-newline

  Ensure consistency across HTML comments

• vue/html-comment-content-spacing

  Ensure consistency across HTML comments

• vue/no-empty-component-block

  Prevent defining empty script or style tags

• vue/no-multiple-objects-in-class

  <!-- GOOD -->
  <div :class="[{ foo, bar }]">
  
  <!-- BAD -->
  <div :class="[{ foo }, { bar }]">

• vue/no-required-prop-with-default

  Prevent setting a default value for required props

• vue/no-undef-components

  Prevent using a non imported component in template

• vue/no-unused-refs

  Prevent defining a unused ref (<div ref="foo">) in template.

• vue/no-use-v-else-with-v-for

  Prevent using v-else-if or v-else on the same element as v-for

• vue/no-useless-mustaches

  Prevent using useless mustache syntax (e.g. <div>{{ 'My Text' }}</div>)

• vue/no-useless-v-bind

  Prevent useless bind attribute (e.g. <div :foo="'literal'">)

• vue/no-v-text

  Prevent usage of v-text

  <!-- GOOD -->
  <div>{{ foo }}</div>
  
  <!-- BAD -->
  <div v-text="foo"></div>

• vue/padding-line-between-blocks

  Ensure a blank line between template, script and template tags

• vue/prefer-define-options

  Force usage of defineOptions

  <!-- GOOD -->
  <script lang="ts" setup>
  defineOptions({
  inheritAttrs: false
  })
  </script>

  <!-- BAD -->
  <script>
  export default {
  inheritAttrs: false
  }
  </script>
  
  <script lang="ts" setup>
  // ...
  </script>

• vue/prefer-separate-static-class

  Prevent mixing static and dynamic classes

  <!-- GOOD -->
  <div class="foo" :class="{ bar }">
  
  <!-- BAD -->
  <div :class="[{ bar }">

• vue/prefer-true-attribute-shorthand

  <!-- GOOD -->
  <MyComponent active>
  
  <!-- BAD -->
  <MyComponent :active="true">

• vue/require-macro-variable-name

  Ensure consistency across macros variable names (e.g. const props for defineProps, const emit for defineEmits etc.)

• vue/html-button-has-type

  Prevent forgetting to add a type to <button> which could lead to unexpected behavior since it submit by default.

Checklist

• Commit
  • Title follows commit conventions
  • Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
  • If bug fix, add Introduced by
• Changelog
  • If visible by XOA users, add changelog entry
  • Update "Packages to release" in CHANGELOG.unreleased.md
• PR
  • If UI changes, add screenshots
  • If not finished or not tested, open as Draft

[ByScripts]

@pdonias Can you merge? Thanks.