feat(xo-core): update VtsCounter component to v2

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

@@ -9,7 +9,7 @@
       </th>
       <td v-if="hasMultipleHosts">
         <UiSpinner v-if="!areAllLoaded" />
-        <UiCounter
+        <VtsCounter
           v-else
           v-tooltip="{
             placement: 'left',
@@ -19,7 +19,9 @@
           }"
           :value="patch.$hostRefs.size"
           class="counter"
-          color="danger"
+          accent="danger"
+          variant="primary"
+          size="small"
         />
       </td>
     </tr>
@@ -31,7 +33,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import UiSpinner from '@/components/ui/UiSpinner.vue'
 import UiTable from '@/components/ui/UiTable.vue'
 import type { XenApiPatchWithHostRefs } from '@/composables/host-patches.composable'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'

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

@@ -3,7 +3,13 @@
     <TabItem v-bind="tab(TAB.PROPS, propParams)">Props</TabItem>
     <TabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
       Events
-      <UiCounter v-if="unreadEventsCount > 0" :value="unreadEventsCount" color="success" />
+      <VtsCounter
+        v-if="unreadEventsCount > 0"
+        :value="unreadEventsCount"
+        accent="success"
+        variant="primary"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
@@ -80,11 +86,11 @@ import {
   type Param,
 } from '@/libs/story/story-param'
 import UiButton from '@core/components/button/UiButton.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-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'

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

@@ -4,7 +4,14 @@
       {{ host.name_label || '(Host)' }}
       <template #addons>
         <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="primary" />
+        <VtsCounter
+          v-if="isReady"
+          v-tooltip="$t('running-vm', { count: vmCount })"
+          :value="vmCount"
+          accent="brand"
+          variant="secondary"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template #sublist>
@@ -21,11 +28,11 @@ import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
 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 VtsCounter from '@core/components/counter/VtsCounter.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/shared'

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

@@ -3,7 +3,7 @@
     <UiCardTitle>
       {{ $t('alarms') }}
       <template v-if="isReady && alarms.length > 0" #right>
-        <UiCounter :value="alarms.length" color="danger" />
+        <VtsCounter :value="alarms.length" accent="danger" variant="primary" size="small" />
       </template>
     </UiCardTitle>
     <div v-if="!isStarted" class="pre-start">
@@ -46,7 +46,7 @@ import UiCardTitle from '@/components/ui/UiCardTitle.vue'
 import UiTable from '@/components/ui/UiTable.vue'
 import { useAlarmStore } from '@/stores/xen-api/alarm.store'
 import UiButton from '@core/components/button/UiButton.vue'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 
 const { records: alarms, start, isStarted, isReady, hasError } = useAlarmStore().subscribe({ defer: true })
 </script>

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

@@ -2,7 +2,7 @@
   <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="primary" />
+      <VtsCounter v-if="count > 0" class="count" :value="count" accent="brand" variant="primary" size="small" />
     </component>
     <component :is="tags.right" v-if="$slots.right || right" class="right">
       <slot name="right">{{ right }}</slot>
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { UiCardTitleLevel } from '@/types/enums'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(

@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue

@@ -12,7 +12,7 @@
   >
     <CardTitle v-bind="properties">
       {{ settings.defaultSlotContent }}
-      <UiCounter :value="3" color="danger" size="medium" />
+      <VtsCounter :value="3" accent="danger" size="medium" variant="primary" />
       <template #info>
         {{ settings.infoSlotContent }}
         <UiButton level="tertiary" size="small" color="normal" :right-icon="faAngleRight">See all</UiButton>
@@ -28,6 +28,6 @@ import { slot, setting } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/button/UiButton.vue'
 import CardTitle from '@core/components/card/CardTitle.vue'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 </script>

@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue → @xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue

@@ -3,21 +3,21 @@
     v-slot="{ properties }"
     :params="[
       prop('value').type(`'number' | 'string'`).str().required().preset(2).widget(),
-      prop('color')
-        .type('CounterColor')
+      prop('accent')
         .required()
-        .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
-        .preset('primary')
+        .enum('brand', 'neutral', 'success', 'warning', 'danger', 'muted')
+        .preset('brand')
         .widget(),
-      prop('size').type('CounterSize').enum('small', 'medium').widget(),
+      prop('size').enum('small', 'medium').required().preset('small').widget(),
+      prop('variant').enum('primary', 'secondary').required().preset('primary').widget(),
     ]"
   >
-    <UiCounter v-bind="properties" />
+    <VtsCounter v-bind="properties" />
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop } from '@/libs/story/story-param'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 </script>

@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue

@@ -13,7 +13,7 @@
     <TabList>
       <TabItem v-bind="properties">
         {{ settings.label }}
-        <UiCounter v-if="settings.counter" :value="settings.counter" color="info" />
+        <VtsCounter v-if="settings.counter" :value="settings.counter" accent="brand" variant="primary" size="small" />
       </TabItem>
     </TabList>
   </ComponentStory>
@@ -23,7 +23,7 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 </script>

@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md

@@ -11,7 +11,7 @@
             Host - {{ i }}
             <template #addons>
               <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-              <UiCounter color="info" value="3" />
+              <VtsCounter accent="brand" value="3" variant="secondary" size="small" />
             </template>
           </TreeItemLabel>
           <template #sublist>
@@ -40,10 +40,10 @@
 ```vue-script
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 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 TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 ```

@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue

@@ -10,7 +10,7 @@
                 Host - {{ i }}
                 <template #addons>
                   <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-                  <UiCounter color="info" value="3" />
+                  <VtsCounter accent="brand" value="3" variant="secondary" size="small" />
                 </template>
               </TreeItemLabel>
               <template #sublist>
@@ -42,10 +42,10 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { slot } from '@/libs/story/story-param'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 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 TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 </script>

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

@@ -2,7 +2,7 @@
   <UiCard :color="hasError ? 'error' : undefined">
     <UiTitle class="title-with-counter" type="h4">
       {{ $t('tasks') }}
-      <UiCounter :value="pendingTasks.length" color="primary" size="medium" />
+      <VtsCounter :value="pendingTasks.length" accent="brand" size="medium" variant="primary" />
     </UiTitle>
     <TasksTable :finished-tasks="finishedTasks" :pending-tasks="pendingTasks" />
     <UiCardSpinner v-if="!isReady" />
@@ -16,7 +16,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import UiTitle from '@/components/ui/UiTitle.vue'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useTaskStore } from '@/stores/xen-api/task.store'
-import UiCounter from '@core/components/UiCounter.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import { useI18n } from 'vue-i18n'
 
 const { pendingTasks, finishedTasks, isReady, hasError } = useTaskStore().subscribe()