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

Enforces import order via the `import/order` ESLint rule

.eslintrc.js

@@ -79,6 +79,26 @@ module.exports = {
         XO_LITE_GIT_HEAD: true,
       },
       rules: {
+        'import/order': [
+          'error',
+          {
+            groups: ['builtin', 'object', 'internal', ['type', 'external']],
+            alphabetize: {
+              order: 'asc',
+              caseInsensitive: true,
+            },
+            pathGroups: [
+              {
+                pattern: '@/**',
+                group: 'internal',
+              },
+              {
+                pattern: '@core/**',
+                group: 'internal',
+              },
+            ],
+          },
+        ],
         'no-void': ['error', { allowAsStatement: true }],
         'n/no-missing-import': 'off', // using 'import' plugin instead, to support TS aliases
         'no-redeclare': 'off', // automatically checked by the TypeScript compiler

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

@@ -19,13 +19,13 @@
 import AppHeader from '@/components/AppHeader.vue'
 import AppLogin from '@/components/AppLogin.vue'
 import AppNavigation from '@/components/AppNavigation.vue'
-import { usePoolStore } from '@/stores/xen-api/pool.store'
-import TooltipList from '@core/components/tooltip/TooltipList.vue'
 import ModalList from '@/components/ui/modals/ModalList.vue'
 import { useChartTheme } from '@/composables/chart-theme.composable'
 import { useUnreachableHosts } from '@/composables/unreachable-hosts.composable'
-import { useUiStore } from '@core/stores/ui.store'
+import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useXenApiStore } from '@/stores/xen-api.store'
+import TooltipList from '@core/components/tooltip/TooltipList.vue'
+import { useUiStore } from '@core/stores/ui.store'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'

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

@@ -27,12 +27,11 @@
 </template>
 
 <script lang="ts" setup>
-import { faWarning } from '@fortawesome/free-solid-svg-icons'
-import { useSessionStorage } from '@vueuse/core'
-
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { useXenApiStore } from '@/stores/xen-api.store'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import { faWarning } from '@fortawesome/free-solid-svg-icons'
+import { useSessionStorage } from '@vueuse/core'
 
 defineProps<{
   asTooltip?: boolean

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

@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { usePoolStore } from '@/stores/xen-api/pool.store'
-import { useRouter } from 'vue-router'
-import { faDownload, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
-import UiButton from '@core/components/button/UiButton.vue'
 import type { PRIMARY_ADDRESS_TYPE } from '@/libs/xen-api/xen-api.enums'
+import { usePoolStore } from '@/stores/xen-api/pool.store'
+import UiButton from '@core/components/button/UiButton.vue'
+import { faDownload, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const { pool } = usePoolStore().subscribe()

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

@@ -8,8 +8,8 @@
 <script lang="ts" setup>
 import StoryMenuTree from '@/components/component-story/StoryMenuTree.vue'
 import UiTitle from '@/components/ui/UiTitle.vue'
-import { type RouteRecordNormalized, useRoute, useRouter } from 'vue-router'
 import { ref } from 'vue'
+import { type RouteRecordNormalized, useRoute, useRouter } from 'vue-router'
 
 const { getRoutes } = useRouter()
 

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

@@ -85,8 +85,8 @@ import StoryWidget from '@/components/component-story/StoryWidget.vue'
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { useModal } from '@/composables/modal.composable'
 import useSortedCollection from '@/composables/sorted-collection.composable'
-import { vTooltip } from '@core/directives/tooltip.directive'
 import type { PropParam } from '@/libs/story/story-param'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import { faClose, faRepeat } from '@fortawesome/free-solid-svg-icons'
 import { useVModel } from '@vueuse/core'
 import { toRef } from 'vue'

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

@@ -35,10 +35,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
 import StoryParamsTable from '@/components/component-story/StoryParamsTable.vue'
 import StoryWidget from '@/components/component-story/StoryWidget.vue'
 import type { SettingParam } from '@/libs/story/story-param'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
   params: SettingParam[]

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

@@ -32,20 +32,19 @@
 </template>
 
 <script lang="ts" setup>
-import { faDisplay } from '@fortawesome/free-solid-svg-icons'
-import { inject, ref } from 'vue'
-
 import FormInputWrapper from '@/components/form/FormInputWrapper.vue'
 import FormSelect from '@/components/form/FormSelect.vue'
 import FormModalLayout from '@/components/ui/modals/layouts/FormModalLayout.vue'
 import ModalApproveButton from '@/components/ui/modals/ModalApproveButton.vue'
 import ModalDeclineButton from '@/components/ui/modals/ModalDeclineButton.vue'
 import UiModal from '@/components/ui/modals/UiModal.vue'
-import { IK_MODAL } from '@/types/injection-keys'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { VM_COMPRESSION_TYPE } from '@/libs/xen-api/xen-api.enums'
 
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
+import { useXenApiStore } from '@/stores/xen-api.store'
+import { IK_MODAL } from '@/types/injection-keys'
+import { faDisplay } from '@fortawesome/free-solid-svg-icons'
+import { inject, ref } from 'vue'
 
 const props = defineProps<{
   vmRefs: XenApiVm['$ref'][]

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

@@ -11,19 +11,19 @@
 </template>
 
 <script lang="ts" setup>
-import { useHostStore } from '@/stores/xen-api/host.store'
-import { computed, defineAsyncComponent, inject } from 'vue'
-import { formatSize } from '@/libs/utils'
-import type { HostStats } from '@/libs/xapi-stats'
-import { IK_HOST_LAST_WEEK_STATS } from '@/types/injection-keys'
-import type { LinearChartData } from '@/types/chart'
-import { map } from 'lodash-es'
 import NoDataError from '@/components/NoDataError.vue'
-import { RRD_STEP_FROM_STRING } from '@/libs/xapi-stats'
 import UiCard from '@/components/ui/UiCard.vue'
-import UiCardTitle from '@/components/ui/UiCardTitle.vue'
 import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
+import UiCardTitle from '@/components/ui/UiCardTitle.vue'
+import { formatSize } from '@/libs/utils'
+import { RRD_STEP_FROM_STRING } from '@/libs/xapi-stats'
+import type { HostStats } from '@/libs/xapi-stats'
+import { useHostStore } from '@/stores/xen-api/host.store'
+import type { LinearChartData } from '@/types/chart'
 import { UiCardTitleLevel } from '@/types/enums'
+import { IK_HOST_LAST_WEEK_STATS } from '@/types/injection-keys'
+import { map } from 'lodash-es'
+import { computed, defineAsyncComponent, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()

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

@@ -21,8 +21,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import ProgressCircle from '@/components/ProgressCircle.vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
   label: string

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

@@ -21,11 +21,11 @@
 <script lang="ts" setup generic="T extends RawObjectType">
 import ObjectLink from '@/components/ObjectLink.vue'
 import RelativeTime from '@/components/RelativeTime.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
 import { parseDateTime } from '@/libs/utils'
 import type { RawObjectType } from '@/libs/xen-api/xen-api.types'
 import { rawTypeToType } from '@/libs/xen-api/xen-api.utils'
 import type { XenApiAlarm } from '@/types/xen-api'
+import { vTooltip } from '@core/directives/tooltip.directive'
 
 defineProps<{
   alarm: XenApiAlarm<T>

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

@@ -6,8 +6,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
   icon?: IconDefinition

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

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ColorContext } from '@/context'
 import { useContext } from '@/composables/context.composable'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { computed } from 'vue'
 

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

@@ -11,9 +11,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { UiCardTitleLevel } from '@/types/enums'
+import UiCounter from '@core/components/UiCounter.vue'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{

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

@@ -4,9 +4,9 @@
 
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { computed } from 'vue'
-import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-svg-icons'
 import type { Color } from '@/types'
+import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
 
 const props = defineProps<{
   state: Color

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

@@ -14,8 +14,8 @@
 import { isVmOperationPending } from '@/libs/vm'
 import { VM_OPERATION, VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCopy } from '@fortawesome/free-solid-svg-icons'

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

@@ -11,11 +11,11 @@
 
 <script lang="ts" setup>
 import { useModal } from '@/composables/modal.composable'
-import { useVmStore } from '@/stores/xen-api/vm.store'
-import { vTooltip } from '@core/directives/tooltip.directive'
 import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
+import { useVmStore } from '@/stores/xen-api/vm.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 

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

@@ -70,11 +70,11 @@ import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { isVmOperationPending } from '@/libs/vm'
 import { VM_OPERATION, VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiHost, XenApiVm } from '@/libs/xen-api/xen-api.types'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { useHostMetricsStore } from '@/stores/xen-api/host-metrics.store'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import {
   faCirclePlay,

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

@@ -8,8 +8,8 @@
 import { isVmOperationPending } from '@/libs/vm'
 import { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import { faCamera } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'

@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue

@@ -33,11 +33,11 @@ import VmActionExportItems from '@/components/vm/VmActionItems/VmActionExportIte
 import VmActionMigrateItem from '@/components/vm/VmActionItems/VmActionMigrateItem.vue'
 import VmActionPowerStateItems from '@/components/vm/VmActionItems/VmActionPowerStateItems.vue'
 import VmActionSnapshotItem from '@/components/vm/VmActionItems/VmActionSnapshotItem.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { faEdit, faEllipsis, faPowerOff } from '@fortawesome/free-solid-svg-icons'
 import { storeToRefs } from 'pinia'

@xen-orchestra/lite/src/composables/filtered-collection.composable.ts

@@ -1,5 +1,5 @@
-import { computed, unref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
 
 export default function useFilteredCollection<T>(
   collection: MaybeRef<T[]>,

@xen-orchestra/lite/src/composables/sorted-collection.composable.ts

@@ -1,5 +1,5 @@
-import { computed, unref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
 
 export default function useSortedCollection<T>(
   collection: MaybeRef<T[]>,

@xen-orchestra/lite/src/composables/vm-migration.composable.ts

@@ -1,8 +1,8 @@
 import { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiHost, XenApiVm } from '@/libs/xen-api/xen-api.types'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import { sortByNameLabel } from '@core/utils/sort-by-name-label.util'
 import { castArray } from 'lodash-es'
 import type { MaybeRefOrGetter } from 'vue'

@xen-orchestra/lite/src/i18n.ts

@@ -1,5 +1,5 @@
-import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
 
 interface Locales {
   [key: string]: {

@xen-orchestra/lite/src/libs/vm.ts

@@ -1,6 +1,6 @@
 import type { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
-import { saveAs } from 'file-saver'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
+import { saveAs } from 'file-saver'
 import { castArray } from 'lodash-es'
 
 function stringifyCsvValue(value: any) {

@xen-orchestra/lite/src/libs/xen-api/xen-api.ts

@@ -1,3 +1,5 @@
+import { useModal } from '@/composables/modal.composable'
+import type { VM_COMPRESSION_TYPE } from '@/libs/xen-api/xen-api.enums'
 import type {
   ObjectType,
   ObjectTypeToRecord,
@@ -18,8 +20,6 @@ import type {
 import { buildXoObject, typeToRawType } from '@/libs/xen-api/xen-api.utils'
 import { JSONRPCClient } from 'json-rpc-2.0'
 import { castArray } from 'lodash-es'
-import type { VM_COMPRESSION_TYPE } from '@/libs/xen-api/xen-api.enums'
-import { useModal } from '@/composables/modal.composable'
 
 export default class XenApi {
   private client: JSONRPCClient

@xen-orchestra/lite/src/stores/xen-api/host.store.ts

@@ -1,8 +1,8 @@
 import type { GetStats } from '@/composables/fetch-stats.composable'
 import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
 import { useHostMetricsStore } from '@/stores/xen-api/host-metrics.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'

@xen-orchestra/lite/src/stores/xen-api/vm.store.ts

@@ -2,9 +2,9 @@ import type { GetStats } from '@/composables/fetch-stats.composable'
 import type { VmStats } from '@/libs/xapi-stats'
 import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiHost, XenApiVm } from '@/libs/xen-api/xen-api.types'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
 import { useHostStore } from '@/stores/xen-api/host.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { sortByNameLabel } from '@core/utils/sort-by-name-label.util'
 import { defineStore } from 'pinia'

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

@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts" setup>
-import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import FormInput from '@/components/form/FormInput.vue'
 import { colorProp, iconProp, model, prop } from '@/libs/story/story-param'
+import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
 
 const presets = {
   $100: {

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

@@ -13,12 +13,12 @@
 </template>
 
 <script lang="ts" setup>
-// eslint-disable-next-line import/no-named-as-default
-import humanFormat from 'human-format'
-import type { LinearChartData } from '@/types/chart'
 import LinearChart from '@/components/charts/LinearChart.vue'
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop } from '@/libs/story/story-param'
+import type { LinearChartData } from '@/types/chart'
+// eslint-disable-next-line import/no-named-as-default
+import humanFormat from 'human-format'
 
 const byteFormatter = (value: number) => humanFormat.bytes(value)
 

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

@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts" setup>
-import PowerStateIcon from '@/components/PowerStateIcon.vue'
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import PowerStateIcon from '@/components/PowerStateIcon.vue'
 import { prop } from '@/libs/story/story-param'
 import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 </script>

@xen-orchestra/lite/src/stories/progress-circle.story.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script lang="ts" setup>
-import ProgressCircle from '@/components/ProgressCircle.vue'
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import ProgressCircle from '@/components/ProgressCircle.vue'
 import { prop } from '@/libs/story/story-param'
 
 const presets = {

@xen-orchestra/lite/src/stories/web-core/stacked-bar.story.vue

@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts" setup>
-import StackedBar from '@core/components/stacked-bar/StackedBar.vue'
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop } from '@/libs/story/story-param'
+import StackedBar from '@core/components/stacked-bar/StackedBar.vue'
 
 const segments = [
   { value: 30, color: 'success' },

@xen-orchestra/lite/src/stories/web-core/status-pill.story.vue

@@ -16,6 +16,6 @@
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import StatusPill from '@core/components/StatusPill.vue'
 import { prop } from '@/libs/story/story-param'
+import StatusPill from '@core/components/StatusPill.vue'
 </script>

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

@@ -22,6 +22,6 @@
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, slot, setting } from '@/libs/story/story-param'
-import UiLegend from '@core/components/UiLegend.vue'
 import { text } from '@/libs/story/story-widget'
+import UiLegend from '@core/components/UiLegend.vue'
 </script>

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

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts" setup>
+import TitleBar from '@/components/TitleBar.vue'
 import { usePageTitleStore } from '@/stores/page-title.store'
+import { faBook } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { faBook } from '@fortawesome/free-solid-svg-icons'
-import TitleBar from '@/components/TitleBar.vue'
 
 const { currentRoute } = useRouter()
 

@xen-orchestra/lite/src/views/host/HostRootView.vue

@@ -6,9 +6,9 @@
 
 <script lang="ts" setup>
 import ObjectNotFoundWrapper from '@/components/ObjectNotFoundWrapper.vue'
-import { useHostStore } from '@/stores/xen-api/host.store'
 import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
+import { useHostStore } from '@/stores/xen-api/host.store'
 import { useUiStore } from '@core/stores/ui.store'
 import { computed, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'

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

@@ -27,9 +27,8 @@
 </template>
 
 <script lang="ts" setup>
-import PoolDashboardAlarms from '@/components/pool/dashboard/PoolDashboardAlarms.vue'
-import PoolDashboardTasks from '@/components/pool/dashboard/PoolDashboardTasks.vue'
 import PoolCpuUsageChart from '@/components/pool/dashboard/cpuUsage/PoolCpuUsageChart.vue'
+import PoolDashboardAlarms from '@/components/pool/dashboard/PoolDashboardAlarms.vue'
 import PoolDashboardCpuProvisioning from '@/components/pool/dashboard/PoolDashboardCpuProvisioning.vue'
 import PoolDashboardCpuUsage from '@/components/pool/dashboard/PoolDashboardCpuUsage.vue'
 import PoolDashboardHostsPatches from '@/components/pool/dashboard/PoolDashboardHostsPatches.vue'
@@ -37,6 +36,7 @@ import PoolDashboardNetworkChart from '@/components/pool/dashboard/PoolDashboard
 import PoolDashboardRamUsage from '@/components/pool/dashboard/PoolDashboardRamUsage.vue'
 import PoolDashboardStatus from '@/components/pool/dashboard/PoolDashboardStatus.vue'
 import PoolDashboardStorageUsage from '@/components/pool/dashboard/PoolDashboardStorageUsage.vue'
+import PoolDashboardTasks from '@/components/pool/dashboard/PoolDashboardTasks.vue'
 import PoolDashboardRamUsageChart from '@/components/pool/dashboard/ramUsage/PoolRamUsage.vue'
 import UiCardGroup from '@/components/ui/UiCardGroup.vue'
 import useFetchStats from '@/composables/fetch-stats.composable'

@xen-orchestra/lite/src/views/settings/SettingsView.vue

@@ -107,23 +107,23 @@
 </template>
 
 <script lang="ts" setup>
+import FormSelect from '@/components/form/FormSelect.vue'
+import TitleBar from '@/components/TitleBar.vue'
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import UiCard from '@/components/ui/UiCard.vue'
+import UiCardTitle from '@/components/ui/UiCardTitle.vue'
+import UiKeyValueList from '@/components/ui/UiKeyValueList.vue'
+import UiKeyValueRow from '@/components/ui/UiKeyValueRow.vue'
+import { locales } from '@/i18n'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
-import { computed, watch } from 'vue'
-import UiCardTitle from '@/components/ui/UiCardTitle.vue'
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import type { BasicColorSchema } from '@vueuse/core'
 import { useUiStore } from '@core/stores/ui.store'
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
-import { locales } from '@/i18n'
 import { faEarthAmericas, faGear, faCheck } from '@fortawesome/free-solid-svg-icons'
-import FormSelect from '@/components/form/FormSelect.vue'
-import TitleBar from '@/components/TitleBar.vue'
-import UiCard from '@/components/ui/UiCard.vue'
-import UiKeyValueList from '@/components/ui/UiKeyValueList.vue'
-import UiKeyValueRow from '@/components/ui/UiKeyValueRow.vue'
+import type { BasicColorSchema } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const xoLiteVersion = XO_LITE_VERSION
 const xoLiteGitHead = XO_LITE_GIT_HEAD

@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue

@@ -215,9 +215,9 @@ import UiRaw from '@/components/ui/UiRaw.vue'
 import { useModal } from '@/composables/modal.composable'
 import type { XenApiNetwork, XenApiSr } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
-import { useXenApiStore } from '@/stores/xen-api.store'
 import { useNetworkStore } from '@/stores/xen-api/network.store'
 import { useSrStore } from '@/stores/xen-api/sr.store'
+import { useXenApiStore } from '@/stores/xen-api.store'
 import ButtonGroup from '@core/components/button/ButtonGroup.vue'
 import UiButton from '@core/components/button/UiButton.vue'
 import { useUiStore } from '@core/stores/ui.store'

@xen-orchestra/lite/vite.config.ts

@@ -1,7 +1,7 @@
-import vueI18n from '@intlify/unplugin-vue-i18n/vite'
-import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { fileURLToPath, URL } from 'url'
+import vueI18n from '@intlify/unplugin-vue-i18n/vite'
+import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/

@xen-orchestra/web-core/lib/components/StatusPill.vue

@@ -4,10 +4,10 @@
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
-import { computed } from 'vue'
+import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
-import type { Color } from '@core/types/color.type'
+import { computed } from 'vue'
 
 type Props = {
   state: 'success' | 'partial' | 'failure'

@xen-orchestra/web-core/lib/components/UiLegend.vue

@@ -11,8 +11,8 @@
 
 <script setup lang="ts">
 import UiIcon from '@core/components/icon/UiIcon.vue'
-import { faCircleInfo, faCircle } from '@fortawesome/free-solid-svg-icons'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCircleInfo, faCircle } from '@fortawesome/free-solid-svg-icons'
 
 type LegendColor = 'default' | 'success' | 'warning' | 'error' | 'disabled' | 'dark-blue'
 

@xen-orchestra/web-core/lib/components/icon/VmIcon.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import PowerStateIcon from '@core/components/PowerStateIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
+import PowerStateIcon from '@core/components/PowerStateIcon.vue'
 import type { POWER_STATE } from '@core/types/power-state.type'
 import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'

@xen-orchestra/web-core/lib/components/menu/MenuItem.vue

@@ -25,8 +25,8 @@
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
-import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
+import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'

@xen-orchestra/web-core/lib/components/menu/MenuList.vue

@@ -12,9 +12,9 @@
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
+import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
 import { computed, inject, nextTick, provide, ref, useSlots } from 'vue'
-import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 
 defineOptions({
   inheritAttrs: false,

@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue

@@ -32,16 +32,16 @@
 </template>
 
 <script lang="ts" setup>
-import MenuList from '@core/components/menu/MenuList.vue'
-import MenuItem from '@core/components/menu/MenuItem.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faArrowDown, faArrowUp, faEyeSlash, faFilter, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
 import { noop } from '@vueuse/core'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed, inject } from 'vue'
-import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
 type InteractionId = 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'hide'
 type Interaction = {

@xen-orchestra/web-core/lib/composables/tree/types.ts

@@ -1,9 +1,9 @@
-import { useTree } from '@core/composables/tree.composable'
 import type { Branch } from '@core/composables/tree/branch'
 import type { BranchDefinition } from '@core/composables/tree/branch-definition'
 import type { Leaf } from '@core/composables/tree/leaf'
 import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
 import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import { useTree } from '@core/composables/tree.composable'
 
 export type TreeNodeId = string | number
 

@xen-orchestra/web-core/lib/i18n.ts

@@ -1,5 +1,5 @@
-import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
 
 interface Locales {
   [key: string]: {

@xen-orchestra/web/src/components/infra/InfraVmItem.vue

@@ -11,10 +11,10 @@
 
 <script lang="ts" setup>
 import type { Vm } from '@/types/vm.type'
+import type { POWER_STATE } from '@core/types/power-state.type'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
-import type { POWER_STATE } from '@core/types/power-state.type'
 
 defineProps<{
   vm: Vm

@xen-orchestra/web/src/components/vm/VmHeader.vue

@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts" setup>
+import type { VmState } from '@core/types/object-icon.type'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import type { VmState } from '@core/types/object-icon.type'
 import { vTooltip } from '@core/directives/tooltip.directive'
 
 defineProps<{

@xen-orchestra/web/src/pages/vm/[id]/console.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts" setup>
-import RemoteConsole from '@core/components/console/RemoteConsole.vue'
 import VmHeader from '@/components/vm/VmHeader.vue'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { RecordId } from '@/types/xo-object.type'
 import type { VmState } from '@core/types/object-icon.type'
+import RemoteConsole from '@core/components/console/RemoteConsole.vue'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router/auto'
 

@xen-orchestra/web/src/stores/xo-rest-api/host.store.ts

@@ -1,7 +1,7 @@
 import { usePoolStore } from '@/stores/xo-rest-api/pool.store'
-import { createXoStoreConfig } from '@/utils/create-xo-store-config.util'
 import type { Host } from '@/types/host.type'
 import type { RecordId } from '@/types/xo-object.type'
+import { createXoStoreConfig } from '@/utils/create-xo-store-config.util'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { sortByNameLabel } from '@core/utils/sort-by-name-label.util'
 import { defineStore } from 'pinia'

@xen-orchestra/web/vite.config.ts

@@ -1,7 +1,7 @@
-import vueI18n from '@intlify/unplugin-vue-i18n/vite'
-import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'node:url'
 import { resolve } from 'path'
+import vueI18n from '@intlify/unplugin-vue-i18n/vite'
+import vue from '@vitejs/plugin-vue'
 import vueRouter from 'unplugin-vue-router/vite'
 import { defineConfig, loadEnv } from 'vite'