@xen-orchestra/web-core 0.4.0 → 0.6.0

package/lib/components/icon/VtsIcon.vue

@@ -1,6 +1,6 @@
 <!-- WIP -->
 <template>
-  <UiSpinner v-if="busy" class="vts-icon" />
+  <UiLoader v-if="busy" class="vts-icon" />
   <div v-else-if="overlayIcon !== undefined && icon !== undefined" class="vts-icon stacked" :class="accent">
     <FontAwesomeIcon :fixed-width="fixedWidth" :icon />
     <FontAwesomeIcon class="overlay-icon" :fixed-width="fixedWidth" :icon="overlayIcon" />
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts" setup>
-import UiSpinner from '@core/components/UiSpinner.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-export type IconAccent = 'current' | 'brand' | 'success' | 'warning' | 'danger'
+export type IconAccent = 'current' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
 
 defineProps<{
   accent: IconAccent
@@ -25,71 +25,67 @@ defineProps<{
 </script>
 
 <style lang="postcss" scoped>
-/*
-ACCENT
---vts-icon--color
---vts-icon__overlay-icon--color
-*/
 .vts-icon {
-  &.current {
-    --vts-icon--color: currentColor;
+  &.stacked {
+    display: inline-grid;
+    place-items: center;
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-neutral-background-primary);
+    svg {
+      grid-area: 1 / -1;
+
+      &:last-child {
+        font-size: 50%;
+      }
     }
   }
 
-  &.brand {
-    --vts-icon--color: var(--color-normal-item-base);
+  /* COLOR VARIANTS */
+
+  &.current {
+    color: currentColor;
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-normal-txt-item);
+    .overlay-icon {
+      color: var(--color-neutral-background-primary);
     }
   }
 
-  &.success {
-    --vts-icon--color: var(--color-success-item-base);
+  &.brand {
+    color: var(--color-info-item-base);
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-success-txt-item);
+    .overlay-icon {
+      color: var(--color-info-txt-item);
     }
   }
 
-  &.warning {
-    --vts-icon--color: var(--color-warning-item-base);
+  &.info {
+    color: var(--color-info-item-base);
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-warning-txt-item);
+    .overlay-icon {
+      color: var(--color-info-txt-item);
     }
   }
 
-  &.danger {
-    --vts-icon--color: var(--color-danger-item-base);
+  &.success {
+    color: var(--color-success-item-base);
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-danger-txt-item);
+    .overlay-icon {
+      color: var(--color-success-txt-item);
     }
   }
-}
 
-/* IMPLEMENTATION */
-.vts-icon {
-  color: var(--vts-icon--color);
-
-  &.stacked {
-    display: inline-grid;
-    place-items: center;
+  &.warning {
+    color: var(--color-warning-item-base);
 
     .overlay-icon {
-      color: var(--vts-icon__overlay-icon--color);
+      color: var(--color-warning-txt-item);
     }
+  }
 
-    svg {
-      grid-area: 1 / -1;
+  &.danger {
+    color: var(--color-danger-item-base);
 
-      &:last-child {
-        font-size: 0.75rem;
-      }
+    .overlay-icon {
+      color: var(--color-danger-txt-item);
     }
   }
 }

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/VtsStateHero.vue

@@ -0,0 +1,117 @@
+<template>
+  <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="text">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { computed } from 'vue'
+
+export type StateHeroType = 'page' | 'card' | 'panel'
+
+const props = defineProps<{
+  type: StateHeroType
+  busy?: boolean
+  image?: 'no-result' | 'under-construction' | 'no-data' | 'no-selection' | 'error' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done''
+}>()
+
+const slots = defineSlots<{
+  default?(): any
+}>()
+
+const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
+
+const imageSrc = computed(() => {
+  if (!props.image) {
+    return undefined
+  }
+
+  return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-state-hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .loader,
+  .text {
+    color: var(--color-info-txt-base);
+  }
+
+  .image {
+    order: 2;
+  }
+
+  .text {
+    order: 3;
+  }
+
+  &.page {
+    gap: 2.4rem;
+
+    .text {
+      order: 3;
+    }
+
+    .loader {
+      order: 1;
+      font-size: 10rem;
+    }
+
+    .image {
+      order: 2;
+      width: 90%;
+      max-height: none;
+    }
+  }
+
+  &.card {
+    gap: 2rem;
+
+    .text {
+      order: 3;
+    }
+
+    .loader {
+      font-size: 6rem;
+      order: 1;
+    }
+
+    .image {
+      order: 2;
+      width: 70%;
+      max-height: 20rem;
+    }
+  }
+
+  &.panel {
+    gap: 4rem;
+    justify-content: unset;
+    padding-top: 8rem;
+
+    .text {
+      order: 1;
+    }
+
+    .loader {
+      order: 3;
+      font-size: 6.4rem;
+    }
+
+    .image {
+      order: 2;
+      width: 80%;
+    }
+  }
+}
+</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'