chore(web stack): add new ESLint Vue rules (#7727)

.eslintrc.js

@@ -75,9 +75,33 @@ module.exports = {
       },
       rules: {
         'no-void': 'off',
-        'n/no-missing-import': 'off', // using 'import' plugin instead to support TS aliases
+        'n/no-missing-import': 'off', // using 'import' plugin instead, to support TS aliases
         '@typescript-eslint/no-explicit-any': 'off',
         'vue/require-default-prop': 'off', // https://github.com/vuejs/eslint-plugin-vue/issues/2051
+        'vue/multi-word-component-names': 'off',
+        'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
+        'vue/block-tag-newline': ['error', { singleline: 'consistent', multiline: 'always', maxEmptyLines: 0 }],
+        'vue/component-api-style': ['error', ['script-setup']],
+        'vue/custom-event-name-casing': ['error', 'camelCase'],
+        'vue/define-props-declaration': ['error', 'type-based'],
+        'vue/enforce-style-attribute': ['error', { allow: ['scoped', 'module'] }],
+        'vue/html-comment-content-newline': ['error', { singleline: 'never', multiline: 'always' }],
+        'vue/html-comment-content-spacing': ['error', 'always'],
+        'vue/no-empty-component-block': 'error',
+        'vue/no-multiple-objects-in-class': 'error',
+        'vue/no-required-prop-with-default': 'error',
+        'vue/no-undef-components': ['error', { ignorePatterns: ['RouterLink', 'RouterView', 'I18nT'] }],
+        'vue/no-unused-refs': 'error',
+        'vue/no-use-v-else-with-v-for': 'error',
+        'vue/no-useless-mustaches': 'error',
+        'vue/no-useless-v-bind': 'error',
+        'vue/no-v-text': 'error',
+        'vue/padding-line-between-blocks': 'error',
+        'vue/prefer-define-options': 'error',
+        'vue/prefer-separate-static-class': 'error',
+        'vue/prefer-true-attribute-shorthand': 'error',
+        'vue/require-macro-variable-name': 'error',
+        'vue/html-button-has-type': 'error',
       },
     },
     {

@xen-orchestra/lite/src/components/AccountButton.vue

@@ -1,7 +1,7 @@
 <template>
   <MenuList placement="bottom-end" shadow>
     <template #trigger="{ open, isOpen }">
-      <button :class="{ active: isOpen }" class="account-button" @click="open">
+      <button type="button" :class="{ active: isOpen }" class="account-button" @click="open">
         <UiIcon :icon="faCircleUser" class="user-icon" />
         <UiIcon :icon="faAngleDown" class="dropdown-icon" />
       </button>

@xen-orchestra/lite/src/components/RelativeTime.vue

@@ -16,5 +16,3 @@ const date = computed(() => new Date(parseDateTime(props.date)))
 const now = useNow({ interval: 1000 })
 const relativeTime = useRelativeTime(date, now)
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue

@@ -4,8 +4,6 @@
   </table>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="postcss" scoped>
 .story-params-table {
   border-spacing: 0;

@xen-orchestra/lite/src/components/component-story/StorySettingParams.vue

@@ -3,7 +3,7 @@
     <thead>
       <tr>
         <th>Setting</th>
-        <th><!--Widget--></th>
+        <th><!-- Widget --></th>
         <th>Help</th>
       </tr>
     </thead>
@@ -53,7 +53,7 @@ const emit = defineEmits<{
 const model = useVModel(props, 'modelValue', emit)
 </script>
 
-<style lang="postcss">
+<style lang="postcss" scoped>
 .reset-all {
   text-align: right;
   padding-top: 1.2rem;

@xen-orchestra/lite/src/components/form/FormSelect.vue

@@ -11,5 +11,3 @@ import { provide } from 'vue'
 
 provide(IK_INPUT_TYPE, 'select')
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/form/FormTextarea.vue

@@ -9,5 +9,3 @@ import { provide } from 'vue'
 
 provide(IK_INPUT_TYPE, 'textarea')
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/modals/InvalidFieldModal.vue

@@ -30,5 +30,3 @@ defineProps<{
 
 const modal = inject(IK_MODAL)!
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuUsage.vue

@@ -10,6 +10,7 @@
     <VmsCpuUsage />
   </UiCard>
 </template>
+
 <script lang="ts" setup>
 import HostsCpuUsage from '@/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue'
 import VmsCpuUsage from '@/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue'

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardTasks.vue

@@ -13,5 +13,3 @@ import { useTaskStore } from '@/stores/xen-api/task.store'
 
 const { pendingTasks } = useTaskStore().subscribe()
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/ui/SizeStatsSummary.vue

@@ -20,6 +20,7 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { formatSize, percent } from '@/libs/utils'
 import { computed } from 'vue'
@@ -34,6 +35,7 @@ const percentUsed = computed(() => percent(props.usage, props.size))
 
 const isDisplayed = computed(() => !isNaN(percentUsed.value) && !isNaN(percentFree.value))
 </script>
+
 <style lang="postcss" scoped>
 .summary {
   display: flex;

@xen-orchestra/lite/src/components/ui/UiCardFooter.vue

@@ -9,8 +9,6 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="postcss" scoped>
 .footer {
   color: var(--color-grey-200);

@xen-orchestra/lite/src/components/ui/UiCardTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['ui-section-title', tags.left]">
+  <div class="ui-section-title" :class="tags.left">
     <component :is="tags.left" v-if="$slots.default || left" class="left">
       <slot>{{ left }}</slot>
       <UiCounter v-if="count > 0" class="count" :value="count" color="info" />

@xen-orchestra/lite/src/components/ui/UiFilterGroup.vue

@@ -4,8 +4,6 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="postcss" scoped>
 .ui-filter-group {
   display: flex;

@xen-orchestra/lite/src/components/ui/UiKeyValueList.vue

@@ -6,8 +6,6 @@
   </table>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="postcss" scoped>
 .ui-key-value-list {
   border-spacing: 0;

@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue

@@ -9,8 +9,6 @@
   </tr>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="postcss" scoped>
 .key,
 .value {

@xen-orchestra/lite/src/components/ui/UiRaw.vue

@@ -2,8 +2,6 @@
   <pre class="ui-raw"><slot /></pre>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="postcss" scoped>
 .ui-raw {
   background-color: var(--color-grey-500);

@xen-orchestra/lite/src/components/ui/icon/UiIcon.vue

@@ -17,5 +17,3 @@ withDefaults(
   { fixedWidth: true }
 )
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue

@@ -17,7 +17,7 @@ withDefaults(
 )
 </script>
 
-<style lang="postcss">
+<style lang="postcss" scoped>
 .unit {
   color: var(--color-grey-300);
   display: flex;

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionCopyItem.vue

@@ -54,5 +54,3 @@ const handleCopy = async () => {
   await xapiStore.getXapi().vm.clone(vmRefsToClone)
 }
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue

@@ -10,6 +10,7 @@
     {{ $t(isSingleAction ? 'export-vm' : 'export-vms') }}
   </MenuItem>
 </template>
+
 <script lang="ts" setup>
 import { useContext } from '@/composables/context.composable'
 import { useModal } from '@/composables/modal.composable'

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionSnapshotItem.vue

@@ -35,5 +35,3 @@ const handleSnapshot = () => {
   return useXenApiStore().getXapi().vm.snapshot(vmRefsToSnapshot)
 }
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/form/form-input.story.vue

@@ -33,5 +33,3 @@ const presets = {
   },
 }
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/form/form-section.story.vue

@@ -20,5 +20,3 @@ import FormInput from '@/components/form/FormInput.vue'
 import FormSection from '@/components/form/FormSection.vue'
 import { model, prop, slot } from '@/libs/story/story-param'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/linear-chart.story.vue

@@ -126,5 +126,3 @@ const presets = {
   },
 }
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/modals/layouts/basic-modal-layout.story.vue

@@ -15,5 +15,3 @@ import BasicModalLayout from '@/components/ui/modals/layouts/BasicModalLayout.vu
 import { setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue

@@ -39,5 +39,3 @@ import { iconProp, slot } from '@/libs/story/story-param'
 import UiButton from '@core/components/button/UiButton.vue'
 import { faRoute } from '@fortawesome/free-solid-svg-icons'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/power-state-icon.story.vue

@@ -19,5 +19,3 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop } from '@/libs/story/story-param'
 import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/ui-filter.story.vue

@@ -13,5 +13,3 @@ import UiFilter from '@/components/ui/UiFilter.vue'
 import { event, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/web-core/button/button-group.story.vue

@@ -22,5 +22,3 @@ import { slot } from '@/libs/story/story-param'
 import ButtonGroup from '@core/components/button/ButtonGroup.vue'
 import UiButton from '@core/components/button/UiButton.vue'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue

@@ -69,5 +69,3 @@ import { choice } from '@/libs/story/story-widget'
 import UiButton from '@core/components/button/UiButton.vue'
 import { faFloppyDisk, faRocket, faShip, faTrash } from '@fortawesome/free-solid-svg-icons'
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/views/StoryView.vue

@@ -24,5 +24,3 @@ const title = computed(() => {
 
 usePageTitleStore().setTitle(title)
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/views/pool/PoolRootView.vue

@@ -17,5 +17,3 @@ const { pool } = usePoolStore().subscribe()
 
 usePageTitleStore().setObject(pool)
 </script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/web-core/lib/components/tooltip/TooltipList.vue

@@ -11,5 +11,3 @@ import { storeToRefs } from 'pinia'
 const tooltipStore = useTooltipStore()
 const { tooltips } = storeToRefs(tooltipStore)
 </script>
-
-<style scoped></style>

@xen-orchestra/web/src/pages/dev/index.vue

@@ -1,5 +1 @@
 <template>Dev</template>
-
-<script lang="ts" setup></script>
-
-<style lang="postcss" scoped></style>

@xen-orchestra/web/src/pages/dev/token.vue

@@ -6,7 +6,7 @@
       <button type="submit">Register token</button>
     </form>
 
-    <button class="clear-token" @click="clearToken">Clear token</button>
+    <button type="button" class="clear-token" @click="clearToken">Clear token</button>
   </div>
 </template>