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

.eslintrc.js

@@ -110,6 +110,11 @@ module.exports = {
             defineExposeLast: true,
           },
         ],
+        'vue/no-duplicate-attr-inheritance': 'error',
+        'vue/no-static-inline-styles': 'error',
+        'vue/no-template-target-blank': 'error',
+        'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
+        'vue/no-ref-object-reactivity-loss': 'error',
       },
     },
     {

@xen-orchestra/lite/src/App.vue

@@ -4,7 +4,7 @@
   </div>
   <div v-else>
     <AppHeader v-if="uiStore.hasUi" />
-    <div style="display: flex">
+    <div class="container">
       <AppNavigation v-if="uiStore.hasUi" />
       <main class="main" :class="{ 'no-ui': !uiStore.hasUi }">
         <RouterView />
@@ -67,6 +67,10 @@ useUnreachableHosts()
 </script>
 
 <style lang="postcss" scoped>
+.container {
+  display: flex;
+}
+
 .main {
   overflow: auto;
   flex: 1;

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

@@ -1,10 +1,10 @@
 <template>
-  <transition name="slide">
+  <Transition name="slide">
     <nav v-if="isDesktop || isOpen" ref="navElement" :class="{ collapsible: isMobile }" class="app-navigation">
       <StoryMenu v-if="$route.meta.hasStoryNav" />
       <InfraPoolList v-else />
     </nav>
-  </transition>
+  </Transition>
 </template>
 
 <script lang="ts" setup>

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

@@ -16,9 +16,9 @@
     <div class="wrapper">
       <UiIcon :icon="faWarning" />
       <p v-if="!asTooltip">
-        <i18n-t keypath="you-are-currently-on">
+        <I18nT keypath="you-are-currently-on">
           <strong>{{ masterSessionStorage }}</strong>
-        </i18n-t>
+        </I18nT>
         <br />
         {{ $t('click-to-return-default-pool') }}
       </p>

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

@@ -86,7 +86,7 @@ import UiCounter from '@core/components/UiCounter.vue'
 import { faSliders } from '@fortawesome/free-solid-svg-icons'
 import 'highlight.js/styles/github-dark.css'
 import { uniqueId, upperFirst } from 'lodash-es'
-import { computed, reactive, ref, watch, watchEffect } from 'vue'
+import { computed, onBeforeMount, reactive, ref, watch, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 
 const props = defineProps<{
@@ -133,15 +133,17 @@ const slotParams = computed(() => props.params.filter(isSlotParam))
 
 const selectedTab = ref<TAB>(TAB.NONE)
 
-if (propParams.value.length !== 0) {
-  selectedTab.value = TAB.PROPS
-} else if (eventParams.value.length !== 0) {
-  selectedTab.value = TAB.EVENTS
-} else if (slotParams.value.length !== 0) {
-  selectedTab.value = TAB.SLOTS
-} else if (settingParams.value.length !== 0) {
-  selectedTab.value = TAB.SETTINGS
-}
+onBeforeMount(() => {
+  if (propParams.value.length !== 0) {
+    selectedTab.value = TAB.PROPS
+  } else if (eventParams.value.length !== 0) {
+    selectedTab.value = TAB.EVENTS
+  } else if (slotParams.value.length !== 0) {
+    selectedTab.value = TAB.SLOTS
+  } else if (settingParams.value.length !== 0) {
+    selectedTab.value = TAB.SETTINGS
+  }
+})
 
 const propValues = ref<Record<string, any>>({})
 const settingValues = ref<Record<string, any>>({})

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

@@ -5,7 +5,13 @@
         <UiIcon :icon />
         {{ label }}
       </label>
-      <a v-if="learnMoreUrl !== undefined" :href="learnMoreUrl" class="learn-more-url" target="_blank">
+      <a
+        v-if="learnMoreUrl !== undefined"
+        :href="learnMoreUrl"
+        class="learn-more-url"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
         <UiIcon :icon="faInfoCircle" />
         <span>{{ $t('learn-more') }}</span>
       </a>

@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue

@@ -24,6 +24,10 @@ import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import type { RouteLocationRaw } from 'vue-router'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineProps<{
   icon: IconDefinition
   route: RouteLocationRaw

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

@@ -9,7 +9,7 @@
           <p>{{ $t('allow-self-signed-ssl') }}</p>
           <ul>
             <li v-for="url in urls" :key="url">
-              <a :href="url" class="link" rel="noopener" target="_blank">
+              <a :href="url" class="link" rel="noopener noreferrer" target="_blank">
                 {{ url }}
               </a>
             </li>

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

@@ -2,11 +2,11 @@
   <UiModal @submit.prevent="handleSubmit()">
     <ConfirmModalLayout :icon="faSatellite">
       <template #title>
-        <i18n-t keypath="confirm-delete" scope="global" tag="div">
+        <I18nT keypath="confirm-delete" scope="global" tag="div">
           <span :class="textClass">
             {{ $t('n-vms', { n: vmRefs.length }) }}
           </span>
-        </i18n-t>
+        </I18nT>
       </template>
 
       <template #subtitle>

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

@@ -10,7 +10,7 @@
       </p>
       <ul class="list">
         <li v-for="({ url, label }, index) in labelWithUrl" :key="index">
-          <a :href="url.href" target="_blank">
+          <a :href="url.href" rel="noopener noreferrer" target="_blank">
             {{ label }}
           </a>
         </li>

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

@@ -9,7 +9,7 @@
         .widget(),
     ]"
   >
-    <PowerStateIcon style="font-size: 10rem" v-bind="properties" />
+    <PowerStateIcon class="icon" v-bind="properties" />
   </ComponentStory>
 </template>
 
@@ -19,3 +19,9 @@ 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>
+.icon {
+  font-size: 10rem;
+}
+</style>

@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue

@@ -51,6 +51,10 @@ import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineProps<{
   icon?: IconDefinition
   route: RouteLocationRaw