@xen-orchestra/web-core 0.4.0 → 0.5.0

package/lib/components/layout/{LayoutSidebar.vue → VtsLayoutSidebar.vue}

@@ -1,8 +1,7 @@
-<!-- v1.0 -->
 <template>
   <div
     :class="{ locked: sidebar.isLocked && !ui.isMobile, expanded: sidebar.isExpanded, mobile: ui.isMobile }"
-    class="layout-sidebar"
+    class="vts-layout-sidebar"
   >
     <div v-if="!ui.isMobile" class="lock">
       <UiButtonIcon
@@ -10,17 +9,19 @@
           content: sidebar.isLocked ? $t('core.sidebar.unlock') : $t('core.sidebar.lock'),
           placement: 'right',
         }"
+        accent="info"
+        size="medium"
         :icon="sidebar.isLocked ? faLock : faLockOpen"
         @click="sidebar.toggleLock()"
       />
     </div>
-    <div v-if="$slots.header">
+    <div v-if="slots.header">
       <slot name="header" />
     </div>
     <div class="content">
       <slot />
     </div>
-    <div v-if="$slots.footer">
+    <div v-if="slots.footer">
       <slot name="footer" />
     </div>
     <div
@@ -33,16 +34,16 @@
 </template>
 
 <script lang="ts" setup>
-import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
 
-defineSlots<{
-  header(): any
+const slots = defineSlots<{
   default(): any
-  footer(): any
+  header?(): any
+  footer?(): any
 }>()
 
 const sidebar = useSidebarStore()
@@ -50,7 +51,7 @@ const ui = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
-.layout-sidebar {
+.vts-layout-sidebar {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -70,31 +71,31 @@ const ui = useUiStore()
     position: absolute;
     transform: translateX(v-bind('sidebar.cssOffset'));
   }
-}
 
-.lock {
-  text-align: right;
-  padding: 0.8rem;
-}
+  .lock {
+    text-align: right;
+    padding: 0.8rem;
+  }
 
-.content {
-  flex: 1;
-  overflow: auto;
-}
+  .content {
+    flex: 1;
+    overflow: auto;
+  }
 
-.resize-handle {
-  position: absolute;
-  inset: 0 0 0 auto;
-  width: 0.8rem;
-  background-color: transparent;
-  cursor: col-resize;
-  transition: background-color 0.4s;
-  user-select: none;
+  .resize-handle {
+    position: absolute;
+    inset: 0 0 0 auto;
+    width: 0.8rem;
+    background-color: transparent;
+    cursor: col-resize;
+    transition: background-color 0.4s;
+    user-select: none;
 
-  &:hover,
-  &.active {
-    background-color: var(--color-neutral-border);
-    transition: background-color 0.05s;
+    &:hover,
+    &.active {
+      background-color: var(--color-neutral-border);
+      transition: background-color 0.05s;
+    }
   }
 }
 </style>

package/lib/components/legend-group/VtsLegendGroup.vue

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

package/lib/components/{legend/LegendList.vue → legend-list/VtsLegendList.vue}

@@ -1,5 +1,5 @@
 <template>
-  <ul class="legend-list" :class="{ horizontal }">
+  <ul class="vts-legend-list" :class="{ horizontal }">
     <slot />
   </ul>
 </template>
@@ -15,7 +15,7 @@ defineSlots<{
 </script>
 
 <style lang="postcss" scoped>
-.legend-list {
+.vts-legend-list {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;

package/lib/components/menu/MenuTrigger.vue

@@ -40,12 +40,12 @@ defineProps<{
     cursor: pointer;
 
     &:hover {
-      background-color: var(--color-normal-background-selected);
+      background-color: var(--color-info-background-selected);
     }
 
     &:active,
     &.active {
-      background-color: var(--color-normal-background-hover);
+      background-color: var(--color-info-background-hover);
     }
   }
 }

package/lib/components/stacked-bar-with-legend/{StackedBarWithLegend.vue → VtsStackedBarWithLegend.vue}

@@ -1,25 +1,25 @@
 <template>
-  <div class="stacked-bar-with-legend">
-    <StackedBar :segments :max-value="maxValue" />
-    <LegendList class="list" :horizontal="uiStore.isDesktop">
-      <LegendItem
+  <div class="vts-stacked-bar-with-legend">
+    <UiStackedBar :segments :max-value="maxValue" />
+    <VtsLegendList class="list" :horizontal="uiStore.isDesktop">
+      <UiLegend
         v-for="segment in segments"
         :key="segment.label"
-        :color="segment.color"
+        :accent="segment.accent"
         :tooltip="segment.tooltip"
         :unit="segment.unit"
         :value="segment.value"
       >
         {{ segment.label }}
-      </LegendItem>
-    </LegendList>
+      </UiLegend>
+    </VtsLegendList>
   </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 VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
+import UiLegend, { type LegendItemProps } from '@core/components/ui/legend/UiLegend.vue'
+import UiStackedBar, { type StackedBarProps } from '@core/components/ui/stacked-bar/UiStackedBar.vue'
 import { useUiStore } from '@core/stores/ui.store'
 
 type Segment = StackedBarProps['segments'][number] & LegendItemProps & { label: string }
@@ -35,13 +35,13 @@ const uiStore = useUiStore()
 </script>
 
 <style scoped lang="postcss">
-.stacked-bar-with-legend {
+.vts-stacked-bar-with-legend {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-}
 
-.list {
-  margin-inline-start: auto;
+  .list {
+    margin-inline-start: auto;
+  }
 }
 </style>

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

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

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

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

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

@@ -0,0 +1,11 @@
+<template>
+  <VtsStateHero class="vts-no-data-hero" image="no-data" :type>{{ $t('no-data') }}</VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero class="vts-object-not-found-hero" image="no-result" type="page">
+    {{ $t('object-not-found', { id }) }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  id: string
+}>()
+</script>

package/lib/components/state-hero/{StateHero.vue → VtsStateHero.vue}

@@ -1,15 +1,15 @@
 <template>
-  <div :class="type" class="state-hero">
-    <UiSpinner v-if="busy" class="spinner" />
+  <div :class="type" class="vts-state-hero">
+    <UiLoader v-if="busy" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
-    <p v-if="$slots.default" :class="typoClass" class="typo text">
+    <p v-if="slots.default" :class="typoClass" class="text">
       <slot />
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiSpinner from '@core/components/UiSpinner.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { computed } from 'vue'
 
 export type StateHeroType = 'page' | 'card'
@@ -20,7 +20,11 @@ const props = defineProps<{
   image?: 'no-result' | 'under-construction' | 'no-data' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
-const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
+const slots = defineSlots<{
+  default?(): any
+}>()
+
+const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
 
 const imageSrc = computed(() => {
   if (!props.image) {
@@ -32,43 +36,46 @@ const imageSrc = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.state-hero {
-  &.page {
-    --image-width: 90%;
-    --image-max-height: none;
-    --spinner-size: 10rem;
-    --gap: 8.2rem;
-  }
-
-  &.card {
-    --image-width: 70%;
-    --image-max-height: 20rem;
-    --spinner-size: 6rem;
-    --gap: 2rem;
-  }
-}
-
-.state-hero {
+.vts-state-hero {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--gap);
-}
 
-.image {
-  width: var(--image-width);
-  max-width: 55rem;
-  max-height: var(--image-max-height);
-}
+  .image {
+    max-width: 55rem;
+  }
 
-.spinner {
-  color: var(--color-normal-txt-base);
-  font-size: var(--spinner-size);
-}
+  .loader,
+  .text {
+    color: var(--color-info-txt-base);
+  }
+
+  &.page {
+    gap: 8.2rem;
+
+    .image {
+      width: 90%;
+      max-height: none;
+    }
 
-.text {
-  color: var(--color-normal-txt-base);
+    .loader {
+      font-size: 10rem;
+    }
+  }
+
+  &.card {
+    gap: 2rem;
+
+    .image {
+      width: 70%;
+      max-height: 20rem;
+    }
+
+    .loader {
+      font-size: 6rem;
+    }
+  }
 }
 </style>

package/lib/components/tab/TabItem.vue

@@ -47,20 +47,20 @@ const classNames = computed(() => {
 
   &:is(:hover, .hover, :focus-visible) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-item-hover);
-    --background-color: var(--color-normal-background-hover);
+    --border-color: var(--color-info-item-hover);
+    --background-color: var(--color-info-background-hover);
   }
 
   &:is(:active, .pressed) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-item-active);
-    --background-color: var(--color-normal-background-active);
+    --border-color: var(--color-info-item-active);
+    --background-color: var(--color-info-background-active);
   }
 
   &:is(.active, .selected) {
     --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-item-base);
-    --background-color: var(--color-normal-background-selected);
+    --border-color: var(--color-info-item-base);
+    --background-color: var(--color-info-background-selected);
   }
 
   &:is(:disabled, .disabled) {

package/lib/components/table/ColumnTitle.vue

@@ -95,22 +95,22 @@ const updateInteraction = (interaction: Interaction) => {
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .column-header.interactive {
-  --color: var(--color-normal-txt-base);
+  --color: var(--color-info-txt-base);
   --background-color: var(--color-neutral-background-primary);
 
   &.focus {
-    --color: var(--color-normal-txt-base);
-    --background-color: var(--color-normal-background-selected);
+    --color: var(--color-info-txt-base);
+    --background-color: var(--color-info-background-selected);
   }
 
   &:hover {
-    --color: var(--color-normal-txt-hover);
-    --background-color: var(--color-normal-background-hover);
+    --color: var(--color-info-txt-hover);
+    --background-color: var(--color-info-background-hover);
   }
 
   &:active {
-    --color: var(--color-normal-txt-active);
-    --background-color: var(--color-normal-background-active);
+    --color: var(--color-info-txt-active);
+    --background-color: var(--color-info-background-active);
   }
 
   &.disabled {

package/lib/components/table/{UiTable.vue → VtsTable.vue}

@@ -1,5 +1,5 @@
 <template>
-  <table :class="{ 'vertical-border': verticalBorder }" class="ui-table typo p2-regular">
+  <table :class="{ 'vertical-border': verticalBorder }" class="vts-table typo p2-regular">
     <slot />
   </table>
 </template>
@@ -12,11 +12,15 @@ const props = defineProps<{
   verticalBorder?: boolean
 }>()
 
+defineSlots<{
+  default(): any
+}>()
+
 provide('tableName', props.name)
 </script>
 
 <style lang="postcss" scoped>
-.ui-table {
+.vts-table {
   width: 100%;
   border-spacing: 0;
   background-color: var(--color-neutral-background-primary);
@@ -39,7 +43,7 @@ provide('tableName', props.name)
   :deep(thead) {
     th,
     td {
-      color: var(--color-normal-txt-base);
+      color: var(--color-info-txt-base);
       font-size: 1.4rem;
       font-weight: 400;
       text-transform: uppercase;

package/lib/components/task/{QuickTaskButton.vue → VtsQuickTaskButton.vue}

@@ -1,24 +1,25 @@
 <template>
-  <ButtonIcon
+  <UiButtonIcon
     ref="buttonRef"
     v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
+    accent="info"
     :dot="hasNewTask"
     :icon="faBarsProgress"
     size="large"
     @click="isPanelOpen = true"
   />
   <Teleport v-if="isPanelOpen" to="body">
-    <Backdrop @click="isPanelOpen = false" />
-    <QuickTaskPanel ref="panelRef" :loading :tasks />
+    <VtsBackdrop @click="isPanelOpen = false" />
+    <UiQuickTaskPanel ref="panelRef" :loading :tasks />
   </Teleport>
 </template>
 
 <script lang="ts" setup>
-import Backdrop from '@core/components/backdrop/Backdrop.vue'
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import QuickTaskPanel from '@core/components/task/QuickTaskPanel.vue'
+import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
+import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Task } from '@core/types/task.type'
 import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'

package/lib/components/task/{QuickTaskList.vue → VtsQuickTaskList.vue}

@@ -2,21 +2,20 @@
   <ul :class="{ sublist }" class="vts-quick-task-list">
     <li v-if="loading">
       <div class="loading">
-        <UiSpinner />
+        <UiLoader />
         <div>{{ $t('loading-in-progress') }}</div>
       </div>
     </li>
     <template v-else>
       <li v-if="tasks.length === 0" class="typo p1-medium">{{ $t('tasks.no-tasks') }}</li>
-      <QuickTaskItem v-for="task of tasks" :key="task.id" :task />
+      <UiQuickTaskItem v-for="task of tasks" :key="task.id" :task />
     </template>
   </ul>
 </template>
 
 <script lang="ts" setup>
-import QuickTaskItem from '@core/components/task/QuickTaskItem.vue'
-import UiSpinner from '@core/components/UiSpinner.vue'
-import type { Task } from '@core/types/task.type'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import UiQuickTaskItem, { type Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 
 defineProps<{
   tasks: Task[]
@@ -37,12 +36,12 @@ defineProps<{
     max-height: 40rem;
     overflow: auto;
   }
-}
 
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
 }
 </style>

package/lib/components/task/{QuickTaskTabBar.vue → VtsQuickTaskTabBar.vue}

@@ -2,17 +2,11 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <VtsCounter
-        v-if="pendingCount !== undefined"
-        :value="pendingCount"
-        accent="brand"
-        variant="primary"
-        size="small"
-      />
+      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" accent="info" variant="primary" size="small" />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
-      <VtsCounter
+      <UiCounter
         v-if="successCount !== undefined"
         :value="successCount"
         accent="success"
@@ -22,7 +16,7 @@
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
       {{ $t('tasks.quick-view.failed') }}
-      <VtsCounter
+      <UiCounter
         v-if="failureCount !== undefined"
         :value="failureCount"
         accent="danger"
@@ -30,7 +24,7 @@
         size="small"
       />
     </TabItem>
-    <Divider type="tab" />
+    <VtsDivider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
       {{ $t('tasks.quick-view.all') }}
     </TabItem>
@@ -44,12 +38,14 @@
 </template>
 
 <script lang="ts" setup>
-import VtsCounter from '@core/components/counter/VtsCounter.vue'
-import Divider from '@core/components/divider/Divider.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import type { TaskStatus } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
-import type { TaskTab } from '@core/types/task.type'
+
+export type TaskTab = TaskStatus | 'all'
 
 defineProps<{
   loading?: boolean

package/lib/components/{tooltip/TooltipList.vue → tooltip-list/VtsTooltipList.vue}

@@ -1,10 +1,9 @@
-<!-- v1.0 -->
 <template>
-  <AppTooltip v-for="tooltip in tooltips" :key="tooltip.key" :options="tooltip.options" :target="tooltip.target" />
+  <UiTooltip v-for="tooltip in tooltips" :key="tooltip.key" :options="tooltip.options" :target="tooltip.target" />
 </template>
 
 <script lang="ts" setup>
-import AppTooltip from '@core/components/tooltip/TooltipItem.vue'
+import UiTooltip from '@core/components/ui/tooltip/UiTooltip.vue'
 import { useTooltipStore } from '@core/stores/tooltip.store'
 import { storeToRefs } from 'pinia'