@xen-orchestra/web-core 0.0.4 → 0.1.0

package/lib/components/CardNumbers.vue

@@ -3,12 +3,12 @@
   <div class="card-numbers" :class="size">
     <span class="label typo" :class="labelFontClass">{{ label }}</span>
     <div class="values" :class="size">
-      <span v-if="size === 'small' && max" class="value typo c2-semi-bold">
-        {{ $n(valueAsPercentage, 'percent') }}
+      <span v-if="percentValue" class="value typo c2-semi-bold">
+        {{ percentValue }}
       </span>
 
       <div class="value typo" :class="valueFontClass">
-        {{ value }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
+        {{ value ?? '-' }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
       </div>
     </div>
   </div>
@@ -16,29 +16,36 @@
 
 <script setup lang="ts" generic="TSize extends 'small' | 'medium'">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface CardNumbersProps {
   label: string
-  value: number
   size: TSize
+  value?: number
   unit?: string
   max?: TSize extends 'small' ? number : never
 }
 
 const props = defineProps<CardNumbersProps>()
 
+const { n } = useI18n()
+
 const labelFontClass = computed(() => (props.size === 'medium' ? 'c3-semi-bold' : 'c2-semi-bold'))
 
 const valueFontClass = computed(() => (props.size === 'medium' ? 'h3-semi-bold' : 'c2-semi-bold'))
 
 const unitFontClass = computed(() => (props.size === 'medium' ? 'p2-medium' : 'c2-semi-bold'))
 
-const valueAsPercentage = computed(() => {
-  if (props.max === undefined) {
-    return 0
+const percentValue = computed(() => {
+  if (props.size !== 'small' || props.max === undefined) {
+    return undefined
+  }
+
+  if (props.value === undefined) {
+    return n(0, 'percent').replace('0', '-')
   }
 
-  return props.value / props.max
+  return n(props.value / props.max, 'percent')
 })
 </script>
 

package/lib/components/LegendTitle.vue

@@ -2,18 +2,24 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" class="tooltip-icon" />
+    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" />
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-defineProps<{
+export type LegendTitleProps = {
   iconTooltip?: string
   icon?: IconDefinition
+}
+
+defineProps<LegendTitleProps>()
+
+defineSlots<{
+  default(): void
 }>()
 </script>
 
@@ -24,8 +30,4 @@ defineProps<{
   gap: 0.8rem;
   align-items: center;
 }
-
-.tooltip-icon {
-  font-size: 1.2rem;
-}
 </style>

package/lib/components/backup-item/BackupItem.vue

@@ -0,0 +1,37 @@
+<!-- v1.0 -->
+<template>
+  <div class="backup-item">
+    <RouterLink :to="backup.route">
+      {{ backup.label }}
+    </RouterLink>
+    <div class="states">
+      <BackupState v-for="(state, index) in backup.states" :key="index" :state />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BackupState from '@core/components/backup-state/BackupState.vue'
+import type { Backup } from '@core/types/backup.type'
+
+defineProps<{
+  backup: Backup
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.backup-item {
+  padding: 0.8rem 0.4rem;
+  border-top: 0.1rem solid var(--color-grey-500);
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.states {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+</style>

package/lib/components/{StatusPill.vue → backup-state/BackupState.vue}

@@ -1,16 +1,18 @@
+<!-- v1.0 -->
 <template>
-  <UiIcon :color :icon class="status-pill" />
+  <UiIcon :color :icon class="backup-state" />
 </template>
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { BackupState } from '@core/types/backup.type'
 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 { computed } from 'vue'
 
 type Props = {
-  state: 'success' | 'partial' | 'failure'
+  state: BackupState
 }
 
 const props = defineProps<Props>()
@@ -26,7 +28,7 @@ const color = computed(() => states[props.state].color)
 </script>
 
 <style lang="postcss" scoped>
-.status-pill {
+.backup-state {
   font-size: 1rem;
 }
 </style>

package/lib/components/button/ButtonIcon.vue

@@ -10,8 +10,9 @@
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     icon: IconDefinition
     size?: 'small' | 'medium' | 'large'
@@ -19,9 +20,18 @@ withDefaults(
     disabled?: boolean
     active?: boolean
     dot?: boolean
+    targetScale?: number | { x: number; y: number }
   }>(),
-  { color: 'info', size: 'medium' }
+  { color: 'info', size: 'medium', targetScale: 1 }
 )
+
+const cssTargetScale = computed(() => {
+  if (typeof props.targetScale === 'number') {
+    return `scale(${props.targetScale})`
+  }
+
+  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -196,4 +206,15 @@ withDefaults(
     right: var(--dot-offset);
   }
 }
+
+/*
+ * Increase the size of the clickable area,
+ * without changing the padding of the ButtonIcon component
+ */
+.button-icon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: v-bind(cssTargetScale);
+}
 </style>

package/lib/components/console/RemoteConsole.vue

@@ -23,7 +23,7 @@ const consoleContainer = ref<HTMLDivElement | null>(null)
 let vncClient: VncClient | undefined
 let nConnectionAttempts = 0
 
-const handleDisconnectionEvent = () => {
+function handleDisconnectionEvent() {
   clearVncClient()
 
   nConnectionAttempts++
@@ -41,9 +41,11 @@ const handleDisconnectionEvent = () => {
   createVncConnection()
 }
 
-const handleConnectionEvent = () => (nConnectionAttempts = 0)
+function handleConnectionEvent() {
+  nConnectionAttempts = 0
+}
 
-const clearVncClient = () => {
+function clearVncClient() {
   if (vncClient === undefined) {
     return
   }
@@ -55,7 +57,7 @@ const clearVncClient = () => {
   vncClient = undefined
 }
 
-const createVncConnection = async () => {
+async function createVncConnection() {
   if (nConnectionAttempts !== 0) {
     await promiseTimeout(FIBONACCI_MS_ARRAY[nConnectionAttempts - 1])
 

package/lib/components/{DonutChart.vue → donut-chart/DonutChart.vue}

@@ -17,51 +17,47 @@
   </svg>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
-type Segment = {
+export type DonutSegmentColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+
+export type DonutSegment = {
   value: number
-  color: 'success' | 'warning' | 'error' | 'unknown'
+  color: DonutSegmentColor
 }
 
-type ComputedSegment = {
-  color: 'success' | 'warning' | 'error' | 'unknown'
-  percent: number
-  offset: number
+export type DonutChartProps = {
+  segments: DonutSegment[]
+  icon?: IconDefinition
 }
 
-const props = defineProps<{
-  segments: Segment[]
-  maxValue?: number
-  icon?: IconDefinition
-}>()
+const props = defineProps<DonutChartProps>()
 
 const circumference = Math.PI * 80
 
-const totalValue = computed(() => {
-  const sumOfValues = props.segments.reduce((acc, segment) => acc + segment.value, 0)
-  return Math.max(props.maxValue ?? 0, sumOfValues)
-})
+const totalValue = computed(() => props.segments.reduce((total, segment) => total + segment.value, 0))
 
-const computedSegments = computed<ComputedSegment[]>(() => {
+const computedSegments = computed(() => {
   let nextOffset = circumference / 4
+
   return props.segments.map(segment => {
+    const offset = nextOffset
     const percent = (segment.value / totalValue.value) * circumference
-    const currentSegment = {
+    nextOffset -= percent
+
+    return {
       color: segment.color,
       percent,
-      offset: nextOffset,
+      offset,
     }
-    nextOffset -= percent
-    return currentSegment
   })
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .donut-chart {
   width: 100px;
   height: 100px;
@@ -73,6 +69,14 @@ const computedSegments = computed<ComputedSegment[]>(() => {
   fill: transparent;
   --stroke-color: var(--color-grey-100);
 
+  &.primary {
+    --stroke-color: var(--color-purple-base);
+  }
+
+  &.secondary {
+    --stroke-color: var(--color-grey-100);
+  }
+
   &.success {
     --stroke-color: var(--color-green-base);
   }
@@ -81,11 +85,11 @@ const computedSegments = computed<ComputedSegment[]>(() => {
     --stroke-color: var(--color-orange-base);
   }
 
-  &.error {
+  &.danger {
     --stroke-color: var(--color-red-base);
   }
 
-  &.unknown {
+  &.disabled {
     --stroke-color: var(--color-grey-400);
   }
 }

package/lib/components/donut-chart-with-legend/DonutChartWithLegend.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="donut-chart-with-legend">
+    <DonutChart :icon :segments />
+    <LegendGroup :items="segments" :title />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DonutChart, { type DonutChartProps } from '@core/components/donut-chart/DonutChart.vue'
+import LegendGroup, { type LegendGroupProps } from '@core/components/legend/LegendGroup.vue'
+
+export type DonutChartWithLegendProps = {
+  segments: (DonutChartProps['segments'][number] & LegendGroupProps['items'][number])[]
+  title?: LegendGroupProps['title']
+  icon?: DonutChartProps['icon']
+}
+
+defineProps<DonutChartWithLegendProps>()
+</script>
+
+<style lang="postcss" scoped>
+.donut-chart-with-legend {
+  display: flex;
+  align-items: center;
+  gap: 3.2rem;
+}
+</style>

package/lib/components/legend/LegendGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="legend-group">
+    <LegendTitle v-if="title" :icon="title.icon" :icon-tooltip="title.iconTooltip">
+      {{ title.label }}
+    </LegendTitle>
+    <LegendList class="list">
+      <LegendItem
+        v-for="item in items"
+        :key="item.label"
+        :color="item.color"
+        :tooltip="item.tooltip"
+        :unit="item.unit"
+        :value="item.value"
+      >
+        {{ item.label }}
+      </LegendItem>
+    </LegendList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
+import LegendList from '@core/components/legend/LegendList.vue'
+import LegendTitle, { type LegendTitleProps } from '@core/components/LegendTitle.vue'
+
+export type LegendGroupProps = {
+  items: (LegendItemProps & { label: string })[]
+  title?: LegendTitleProps & { label: string }
+}
+
+defineProps<LegendGroupProps>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.list {
+  padding-left: 1.6rem;
+}
+</style>

package/lib/components/{UiLegend.vue → legend/LegendItem.vue}

@@ -1,67 +1,85 @@
 <!-- v1.0 -->
 <template>
-  <li :class="color" class="ui-legend">
+  <li :class="color" class="legend-item">
     <UiIcon :icon="faCircle" class="circle-icon" />
     <span class="label typo p3-regular"><slot /></span>
     <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="info" />
-
-    <span class="value-and-unit typo c3-semi-bold">{{ value }} {{ unit }}</span>
+    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
   </li>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCircleInfo, faCircle } from '@fortawesome/free-solid-svg-icons'
+import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
 
-type LegendColor = 'default' | 'success' | 'warning' | 'error' | 'disabled' | 'dark-blue'
+export type LegendItemColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
 
-defineProps<{
-  color: LegendColor
+export type LegendItemProps = {
+  color: LegendItemColor
   value?: number
   unit?: string
   tooltip?: string
+}
+
+const props = defineProps<LegendItemProps>()
+
+defineSlots<{
+  default(): void
 }>()
+
+const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
 </script>
 
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
-.ui-legend {
+.legend-item {
+  &.primary {
+    --circle-color: var(--color-purple-base);
+  }
+
+  &.secondary {
+    --circle-color: var(--color-grey-100);
+  }
+
   &.success {
     --circle-color: var(--color-green-base);
   }
+
   &.warning {
     --circle-color: var(--color-orange-base);
   }
-  &.error {
+
+  &.danger {
     --circle-color: var(--color-red-base);
   }
-  &.default {
-    --circle-color: var(--color-purple-base);
-  }
+
   &.disabled {
     --circle-color: var(--color-grey-300);
   }
-  &.dark-blue {
-    --circle-color: var(--color-grey-100);
-  }
 }
+
 /* IMPLEMENTATION */
-.ui-legend {
+.legend-item {
   display: flex;
   align-items: center;
   gap: 0.8rem;
 }
+
 .circle-icon {
   font-size: 0.8rem;
   color: var(--circle-color);
 }
+
 .tooltip-icon {
   font-size: 1.2rem;
 }
+
 .label {
   color: var(--color-grey-000);
 }
+
 .value-and-unit {
   color: var(--color-grey-300);
 }

package/lib/components/legend/LegendList.vue

@@ -0,0 +1,28 @@
+<template>
+  <ul class="legend-list" :class="{ horizontal }">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  horizontal?: boolean
+}>()
+
+defineSlots<{
+  default(): void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  &.horizontal {
+    flex-direction: row;
+    gap: 4rem;
+  }
+}
+</style>

package/lib/components/{search-bar/SearchBar.vue → query-search-bar/QuerySearchBar.vue}

@@ -1,21 +1,21 @@
-<!-- v1.1 -->
+<!-- v1.2 -->
 <template>
   <form class="search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
-      {{ $t('core.search-bar.label') }}
+      {{ $t('core.query-search-bar.label') }}
     </label>
     <UiInput
       :id
       v-model="value"
-      :aria-label="uiStore.isMobile ? $t('core.search-bar.label') : undefined"
+      :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
-      :placeholder="$t('core.search-bar.placeholder')"
+      :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
       <UiButton type="submit">{{ $t('core.search') }}</UiButton>
       <Divider type="stretch" />
       <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
-        {{ $t('core.search-bar.use-query-builder') }}
+        {{ $t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
     <template v-else>

package/lib/components/stacked-bar/StackedBar.vue

@@ -2,39 +2,33 @@
 <template>
   <div class="stacked-bar">
     <StackedBarSegment
-      v-for="(segment, index) in computedSegments"
+      v-for="(segment, index) in segments"
       :key="index"
       :color="segment.color"
-      :percentage="segment.percentage"
+      :percentage="(segment.value / max) * 100"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import StackedBarSegment from '@core/components/stacked-bar/StackedBarSegment.vue'
-import type { Color } from '@core/types/color.type'
+import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/stacked-bar/StackedBarSegment.vue'
 import { computed } from 'vue'
 
 type Segment = {
   value: number
-  color: Color
+  color: StackedBarSegmentProps['color']
 }
 
-const props = defineProps<{
+export type StackedBarProps = {
   segments: Segment[]
   maxValue?: number
-}>()
+}
 
-const totalValue = computed(() => props.segments.reduce((acc, bar) => acc + bar.value, 0))
+const props = defineProps<StackedBarProps>()
 
-const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
+const totalValue = computed(() => props.segments.reduce((acc, segment) => acc + segment.value, 0))
 
-const computedSegments = computed(() => {
-  return props.segments.map(segment => ({
-    ...segment,
-    percentage: (segment.value / max.value) * 100,
-  }))
-})
+const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/stacked-bar/StackedBarSegment.vue

@@ -13,15 +13,18 @@
 
 <script lang="ts" setup>
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Color } from '@core/types/color.type'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
 
-defineProps<{
-  color: Color
+export type StackedBarSegmentColor = 'primary' | 'success' | 'warning' | 'danger'
+
+export type StackedBarSegmentProps = {
+  color: StackedBarSegmentColor
   percentage: number
-}>()
+}
+
+defineProps<StackedBarSegmentProps>()
 
 const hidden = ref(false)
 const ellipsisElement = ref<HTMLElement | null>(null)
@@ -34,7 +37,7 @@ useResizeObserver(ellipsisElement, ([entry]) => {
 <style lang="postcss" scoped>
 /* COLOR VARIANT */
 .stacked-bar-segment {
-  &.info {
+  &.primary {
     --background-color: var(--color-purple-base);
   }
 
@@ -46,7 +49,7 @@ useResizeObserver(ellipsisElement, ([entry]) => {
     --background-color: var(--color-orange-base);
   }
 
-  &.error {
+  &.danger {
     --background-color: var(--color-red-base);
   }
 }

package/lib/components/stacked-bar-with-legend/StackedBarWithLegend.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="stacked-bar-with-legend">
+    <StackedBar :segments :max-value="maxValue" />
+    <LegendList class="list" :horizontal="uiStore.isDesktop">
+      <LegendItem
+        v-for="segment in segments"
+        :key="segment.label"
+        :color="segment.color"
+        :tooltip="segment.tooltip"
+        :unit="segment.unit"
+        :value="segment.value"
+      >
+        {{ segment.label }}
+      </LegendItem>
+    </LegendList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
+import LegendList from '@core/components/legend/LegendList.vue'
+import StackedBar, { type StackedBarProps } from '@core/components/stacked-bar/StackedBar.vue'
+import { useUiStore } from '@core/stores/ui.store'
+
+type Segment = StackedBarProps['segments'][number] & LegendItemProps & { label: string }
+
+export type StackedBarWithLegendProps = {
+  segments: Segment[]
+  maxValue?: StackedBarProps['maxValue']
+}
+
+defineProps<StackedBarWithLegendProps>()
+
+const uiStore = useUiStore()
+</script>
+
+<style scoped lang="postcss">
+.stacked-bar-with-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.list {
+  margin-inline-start: auto;
+}
+</style>

package/lib/components/state-hero/ComingSoonHero.vue

@@ -1,9 +1,13 @@
 <template>
-  <StateHero image="under-construction" class="coming-soon-hero">
+  <StateHero :type class="coming-soon-hero" image="under-construction">
     {{ $t('coming-soon') }}
   </StateHero>
 </template>
 
 <script lang="ts" setup>
-import StateHero from '@core/components/state-hero/StateHero.vue'
+import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
 </script>

package/lib/components/state-hero/LoadingHero.vue

@@ -1,9 +1,15 @@
 <template>
-  <StateHero busy class="loading-hero">
+  <StateHero v-if="!disabled" :type busy class="loading-hero">
     {{ $t('loading-in-progress') }}
   </StateHero>
+  <slot v-else />
 </template>
 
 <script lang="ts" setup>
-import StateHero from '@core/components/state-hero/StateHero.vue'
+import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+  disabled?: boolean
+}>()
 </script>

package/lib/components/state-hero/ObjectNotFoundHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <StateHero image="no-result" class="object-not-found-hero">
+  <StateHero class="object-not-found-hero" image="no-result" type="page">
     {{ $t('object-not-found', { id }) }}
   </StateHero>
 </template>

package/lib/components/state-hero/StateHero.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="state-hero">
+  <div :class="type" class="state-hero">
     <UiSpinner v-if="busy" class="spinner" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
-    <p v-if="$slots.default" class="typo h2-black text">
+    <p v-if="$slots.default" :class="typoClass" class="typo text">
       <slot />
     </p>
   </div>
@@ -12,42 +12,60 @@
 import UiSpinner from '@core/components/UiSpinner.vue'
 import { computed } from 'vue'
 
+export type StateHeroType = 'page' | 'card'
+
 const props = defineProps<{
+  type: StateHeroType
   busy?: boolean
   image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
+const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
+
 const imageSrc = computed(() => {
-  try {
-    return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
-  } catch {
+  if (!props.image) {
     return undefined
   }
+
+  return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
 })
 </script>
 
 <style lang="postcss" scoped>
+.state-hero {
+  &.page {
+    --image-width: 90%;
+    --spinner-size: 10rem;
+    --gap: 8.2rem;
+  }
+
+  &.card {
+    --image-width: 70%;
+    --spinner-size: 6rem;
+    --gap: 2rem;
+  }
+}
+
 .state-hero {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4.2rem;
+  gap: var(--gap);
 }
 
 .image {
-  width: 90%;
+  width: var(--image-width);
   max-width: 55rem;
 }
 
 .spinner {
   color: var(--color-purple-base);
-  font-size: 10rem;
+  font-size: var(--spinner-size);
 }
 
 .text {
   color: var(--color-purple-base);
-  margin-top: 4rem;
 }
 </style>

package/lib/components/table/ColumnTitle.vue

@@ -76,12 +76,12 @@ const interactions = computed<Interaction[]>(() => [
 
 const tableName = inject<string>('tableName')
 
+const columnName = `${tableName}__${props.id}`
+
 const currentInteraction = computed(() =>
   interactions.value.find(interaction => router.currentRoute.value.query[columnName] === interaction.id)
 )
 
-const columnName = `${tableName}__${props.id}`
-
 const updateInteraction = (interaction: Interaction) => {
   router.replace({
     query: {

package/lib/components/tree/TreeItemLabel.vue

@@ -20,6 +20,7 @@
         class="toggle"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
+        :target-scale="{ x: 1.5, y: 2 }"
         @click="emit('toggle')"
       />
       <div v-else class="h-line" />
@@ -130,15 +131,4 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
   border-bottom: 0.1rem solid var(--color-purple-base);
   margin-left: -0.4rem;
 }
-
-/*
- * Increase the size of the clickable area,
- * without changing the padding of the ButtonIcon component
- */
-.toggle::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: scale(1.5, 2);
-}
 </style>

package/lib/composables/item-counter.composable.md

@@ -0,0 +1,25 @@
+# `useItemCounter`
+
+This composable is meant to count items based on given filters then output the categorized count.
+
+## Usage
+
+```typescript
+const collection = [
+  { id: 'a', size: 'S' },
+  { id: 'b', size: 'S' },
+  { id: 'c', size: 'XL' },
+  { id: 'd', size: 'M' },
+  { id: 'e', size: 'L' },
+  { id: 'f', size: 'S' },
+]
+
+const count = useItemCounter(collection, {
+  small: item => item.size === 'S',
+  medium: item => item.size === 'M',
+})
+
+console.log(count.small) // 3
+console.log(count.medium) // 1
+console.log(count.$other) // 2
+```

package/lib/composables/item-counter.composable.ts

@@ -0,0 +1,32 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+type Counters<TConfig> = { [K in keyof TConfig | '$other']: number }
+
+export function useItemCounter<TItem, TConfig extends Record<string, (item: TItem) => boolean>>(
+  items: MaybeRefOrGetter<TItem[]>,
+  config: TConfig
+) {
+  const keys = Object.keys(config) as (keyof TConfig)[]
+
+  return computed(() => {
+    const counters = Object.fromEntries(keys.concat('$other').map(key => [key, 0])) as Counters<TConfig>
+
+    for (const item of toValue(items)) {
+      let matched = false
+
+      for (const key of keys) {
+        if (config[key](item)) {
+          matched = true
+          counters[key] += 1
+          break
+        }
+      }
+
+      if (!matched) {
+        counters.$other += 1
+      }
+    }
+
+    return counters
+  })
+}

package/lib/composables/route-query/actions/handle-add.ts

@@ -0,0 +1,9 @@
+import type { WritableComputedRef } from 'vue'
+
+export function handleAdd(source: WritableComputedRef<any>, value: any) {
+  if (Array.isArray(source.value)) {
+    source.value = [...source.value, value]
+  } else if (source.value instanceof Set) {
+    source.value = new Set(source.value).add(value)
+  }
+}

package/lib/composables/route-query/actions/handle-delete.ts

@@ -0,0 +1,16 @@
+import type { WritableComputedRef } from 'vue'
+
+export function handleDelete(source: WritableComputedRef<any>, value: any) {
+  if (Array.isArray(source.value)) {
+    source.value = [...source.value].splice(value, 1)
+  } else if (source.value instanceof Set) {
+    source.value = new Set(source.value)
+    source.value.delete(value)
+  } else if (source.value instanceof Map) {
+    source.value = new Map(source.value)
+    source.value.delete(value)
+  } else if (typeof source.value === 'object' && source.value !== null) {
+    source.value = { ...source.value }
+    delete source.value[value]
+  }
+}

package/lib/composables/route-query/actions/handle-set.ts

@@ -0,0 +1,17 @@
+import type { WritableComputedRef } from 'vue'
+
+export function handleSet(source: WritableComputedRef<any>, key: any, value: any) {
+  if (Array.isArray(source.value)) {
+    source.value = [...source.value]
+    source.value[key] = value
+  } else if (source.value instanceof Map) {
+    source.value = new Map(source.value)
+    source.value.set(key, value)
+  } else if (typeof source.value === 'object') {
+    if (source.value === null) {
+      return
+    }
+
+    source.value = { ...source.value, [key]: value }
+  }
+}

package/lib/composables/route-query/actions/handle-toggle.ts

@@ -0,0 +1,18 @@
+import type { WritableComputedRef } from 'vue'
+
+export function handleToggle(source: WritableComputedRef<any>, valueOrState?: any, state?: any) {
+  if (source.value instanceof Set) {
+    const shouldAdd = state ?? !source.value.has(valueOrState)
+    const newSource = new Set(source.value)
+
+    if (shouldAdd) {
+      newSource.add(valueOrState)
+    } else {
+      newSource.delete(valueOrState)
+    }
+
+    source.value = newSource
+  } else if (typeof source.value === 'boolean') {
+    source.value = valueOrState ?? !source.value
+  }
+}

package/lib/composables/route-query/types.ts

@@ -0,0 +1,42 @@
+import type { EmptyObject } from '@core/types/utility.type'
+import type { WritableComputedRef } from 'vue'
+
+export type Options = {
+  defaultQuery?: string
+}
+
+export type Transformers<TData> = {
+  toData: (value: string) => TData
+  toQuery: (value: TData) => string
+}
+
+export type SetActions<TValue> = {
+  add: (value: TValue) => void
+  delete: (value: TValue) => void
+  toggle: (value: TValue, state?: boolean) => void
+}
+
+export type MapActions<TKey, TValue> = { set: (key: TKey, value: TValue) => void; delete: (key: TKey) => void }
+
+export type ArrayActions<TValue> = {
+  add: (value: TValue) => void
+  delete: (index: number) => void
+  set: (index: number, value: TValue) => void
+}
+
+export type BooleanActions = { toggle: (value?: boolean) => void }
+
+export type Actions = SetActions<any> & MapActions<any, any> & ArrayActions<any> & BooleanActions
+
+export type GuessActions<TData> =
+  TData extends Set<infer TValue>
+    ? SetActions<TValue>
+    : TData extends (infer TValue)[]
+      ? ArrayActions<TValue>
+      : TData extends boolean
+        ? BooleanActions
+        : TData extends Map<infer TKey, infer TValue> | Record<infer TKey, infer TValue>
+          ? MapActions<TKey, TValue>
+          : EmptyObject
+
+export type RouteQuery<TData> = WritableComputedRef<TData> & GuessActions<TData>

package/lib/composables/route-query.composable.ts

@@ -0,0 +1,42 @@
+import { handleAdd } from '@core/composables/route-query/actions/handle-add'
+import { handleDelete } from '@core/composables/route-query/actions/handle-delete'
+import { handleSet } from '@core/composables/route-query/actions/handle-set'
+import { handleToggle } from '@core/composables/route-query/actions/handle-toggle'
+import type { Actions, Options, RouteQuery, Transformers } from '@core/composables/route-query/types'
+import { extendRef } from '@vueuse/core'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useRouteQuery<TData extends string>(name: string): RouteQuery<TData>
+export function useRouteQuery<TData extends string>(name: string, options: Options): RouteQuery<TData>
+export function useRouteQuery<TData>(name: string, options: Options & Transformers<TData>): RouteQuery<TData>
+export function useRouteQuery<TData>(name: string, options: Partial<Options & Transformers<TData>> = {}) {
+  const router = useRouter()
+  const route = useRoute()
+
+  const {
+    defaultQuery = '',
+    toData = (query: string) => query as TData,
+    toQuery = (data: TData) => data as string,
+  } = options
+
+  const source = computed<TData>({
+    get() {
+      return toData((route.query[name] as string | undefined) ?? defaultQuery)
+    },
+    set(newData) {
+      const query = toQuery(newData)
+
+      void router.replace({ query: { ...route.query, [name]: query === defaultQuery ? undefined : query } })
+    },
+  })
+
+  const actions: Actions = {
+    add: handleAdd.bind(null, source),
+    delete: handleDelete.bind(null, source),
+    set: handleSet.bind(null, source),
+    toggle: handleToggle.bind(null, source),
+  }
+
+  return extendRef(source, actions) as unknown as RouteQuery<TData>
+}

package/lib/locales/de.json

@@ -26,7 +26,9 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
+  "patches": "Patches",
   "power-on-for-console": "Konsole ist nach Start der VM verfügbar",
+  "running-vm": "VM eingeschalten | VMs eingeschalten",
   "stats": "Statistiken",
   "storage": "Speicher",
   "support-name": "{name} pro support",

package/lib/locales/en.json

@@ -20,9 +20,9 @@
 
   "core.search": "Search",
 
-  "core.search-bar.label": "Search Engine",
-  "core.search-bar.placeholder": "Write your query…",
-  "core.search-bar.use-query-builder": "Use query builder",
+  "core.query-search-bar.label": "Search Engine",
+  "core.query-search-bar.placeholder": "Write your query…",
+  "core.query-search-bar.use-query-builder": "Use query builder",
 
   "core.select.all": "Select all",
   "core.select.none": "Select none",
@@ -48,7 +48,9 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Network",
   "object-not-found": "Object {id} can't be found…",
+  "patches": "Patches",
   "power-on-for-console": "Power on your VM to access its console",
+  "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
   "stats": "Stats",
   "storage": "Storage",
@@ -64,5 +66,6 @@
   "tasks.quick-view.failed": "Failed",
   "tasks.quick-view.in-progress": "In progress",
 
+  "total": "Total",
   "vms": "VMs"
 }

package/lib/locales/fa.json

@@ -37,7 +37,9 @@
   "log-out": "خروج",
   "master": "میزبان اصلی",
   "network": "شبکه",
+  "patches": "وصله ها",
   "power-on-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "running-vm": "ماشین های مجازی در حال اجرا | ماشین مجازی در حال اجرا",
   "stats": "آمار",
   "storage": "ذخیره سازی",
   "support-name": "پشتیبانی حرفه ای {name}",

package/lib/locales/fr.json

@@ -20,9 +20,9 @@
 
   "core.search": "Rechercher",
 
-  "core.search-bar.label": "Moteur de recherche",
-  "core.search-bar.placeholder": "Écrivez votre requête…",
-  "core.search-bar.use-query-builder": "Utiliser le constructeur de requête",
+  "core.query-search-bar.label": "Moteur de recherche",
+  "core.query-search-bar.placeholder": "Écrivez votre requête…",
+  "core.query-search-bar.use-query-builder": "Utiliser le constructeur de requête",
 
   "core.select.all": "Tout sélectionner",
   "core.select.none": "Tout désélectionner",
@@ -48,7 +48,9 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
   "object-not-found": "L'objet {id} est introuvable…",
+  "patches": "Patches",
   "power-on-for-console": "Allumez votre VM pour accéder à sa console",
+  "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
   "stats": "Stats",
   "storage": "Stockage",
@@ -64,5 +66,6 @@
   "tasks.quick-view.failed": "Échouées",
   "tasks.quick-view.in-progress": "En cours",
 
+  "total": "Total",
   "vms": "VMs"
 }

package/lib/stores/ui.store.ts

@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router'
 export const useUiStore = defineStore('ui', () => {
   const currentHostOpaqueRef = ref()
 
-  const { store: colorMode } = useColorMode({ initialValue: 'dark' })
+  const { store: colorMode } = useColorMode({ initialValue: 'auto' })
 
   const { desktop: isDesktop } = useBreakpoints({
     desktop: 1024,

package/lib/types/backup.type.ts

@@ -0,0 +1,11 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export type BackupState = 'success' | 'failure' | 'partial'
+
+export type BackupStates = BackupState[]
+
+export type Backup = {
+  label: string
+  route: RouteLocationRaw
+  states: BackupStates
+}

package/lib/types/utility.type.ts

@@ -1,3 +1,9 @@
 export type MaybeArray<T> = T | T[]
 
 export type VoidFunction = () => void
+
+declare const __brand: unique symbol
+
+export type Branded<TBrand extends string, TType = string> = TType & { [__brand]: TBrand }
+
+export type EmptyObject = Record<string, never>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "private": false,
   "exports": {
     "./*": {
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@types/novnc__novnc": "^1.3.5",
+    "@types/novnc__novnc": "^1.5.0",
     "@vue/tsconfig": "^0.5.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.13",