@xen-orchestra/web-core 0.3.0 → 0.5.0

package/lib/assets/css/_colors.pcss

@@ -12,21 +12,37 @@
 
   --color-neutral-border: #d0d0d5;
 
-  /* NORMAL */
+  /* BRAND */
 
-  --color-normal-txt-base: #6b63bf;
-  --color-normal-txt-hover: color-mix(in srgb, #000000 20%, var(--color-normal-txt-base));
-  --color-normal-txt-active: color-mix(in srgb, #000000 40%, var(--color-normal-txt-base));
+  --color-brand-txt-base: #6b63bf;
+  --color-brand-txt-hover: color-mix(in srgb, #000000 20%, var(--color-brand-txt-base));
+  --color-brand-txt-active: color-mix(in srgb, #000000 40%, var(--color-brand-txt-base));
 
-  --color-normal-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-normal-item-base));
-  --color-normal-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-normal-item-base));
-  --color-normal-background-active: color-mix(in srgb, #ffffff 70%, var(--color-normal-item-base));
+  --color-brand-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-brand-item-base));
+  --color-brand-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-brand-item-base));
+  --color-brand-background-active: color-mix(in srgb, #ffffff 70%, var(--color-brand-item-base));
 
-  --color-normal-txt-item: #030029;
-  --color-normal-item-base: #8f84ff;
-  --color-normal-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-item-base));
-  --color-normal-item-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-item-base));
-  --color-normal-item-disabled: #d2ceff;
+  --color-brand-txt-item: #030029;
+  --color-brand-item-base: #8f84ff;
+  --color-brand-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-brand-item-base));
+  --color-brand-item-active: color-mix(in srgb, #ffffff 40%, var(--color-brand-item-base));
+  --color-brand-item-disabled: #d2ceff;
+
+  /* INFO */
+
+  --color-info-txt-base: #6b63bf;
+  --color-info-txt-hover: color-mix(in srgb, #000000 20%, var(--color-info-txt-base));
+  --color-info-txt-active: color-mix(in srgb, #000000 40%, var(--color-info-txt-base));
+
+  --color-info-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-info-item-base));
+  --color-info-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-info-item-base));
+  --color-info-background-active: color-mix(in srgb, #ffffff 70%, var(--color-info-item-base));
+
+  --color-info-txt-item: #030029;
+  --color-info-item-base: #8f84ff;
+  --color-info-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-item-base));
+  --color-info-item-active: color-mix(in srgb, #ffffff 40%, var(--color-info-item-base));
+  --color-info-item-disabled: #d2ceff;
 
   /* SUCCESS */
 
@@ -91,21 +107,37 @@
 
   --color-neutral-border: #363647;
 
-  /* NORMAL */
+  /* BRAND */
+
+  --color-brand-txt-base: #9b92ff;
+  --color-brand-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-brand-txt-base));
+  --color-brand-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-brand-txt-base));
+
+  --color-brand-background-selected: color-mix(in srgb, #000000 70%, var(--color-brand-item-base));
+  --color-brand-background-hover: color-mix(in srgb, #000000 60%, var(--color-brand-item-base));
+  --color-brand-background-active: color-mix(in srgb, #000000 50%, var(--color-brand-item-base));
+
+  --color-brand-txt-item: #030029;
+  --color-brand-item-base: #8f84ff;
+  --color-brand-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-brand-item-base));
+  --color-brand-item-active: color-mix(in srgb, #ffffff 40%, var(--color-brand-item-base));
+  --color-brand-item-disabled: #393566;
+
+  /* INFO */
 
-  --color-normal-txt-base: #9b92ff;
-  --color-normal-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-txt-base));
-  --color-normal-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-txt-base));
+  --color-info-txt-base: #9b92ff;
+  --color-info-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-txt-base));
+  --color-info-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-info-txt-base));
 
-  --color-normal-background-selected: color-mix(in srgb, #000000 70%, var(--color-normal-txt-base));
-  --color-normal-background-hover: color-mix(in srgb, #000000 60%, var(--color-normal-txt-base));
-  --color-normal-background-active: color-mix(in srgb, #000000 50%, var(--color-normal-txt-base));
+  --color-info-background-selected: color-mix(in srgb, #000000 70%, var(--color-info-item-base));
+  --color-info-background-hover: color-mix(in srgb, #000000 60%, var(--color-info-item-base));
+  --color-info-background-active: color-mix(in srgb, #000000 50%, var(--color-info-item-base));
 
-  --color-normal-txt-item: #030029;
-  --color-normal-item-base: #8f84ff;
-  --color-normal-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-item-base));
-  --color-normal-item-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-item-base));
-  --color-normal-item-disabled: #393566;
+  --color-info-txt-item: #030029;
+  --color-info-item-base: #8f84ff;
+  --color-info-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-info-item-base));
+  --color-info-item-active: color-mix(in srgb, #ffffff 40%, var(--color-info-item-base));
+  --color-info-item-disabled: #393566;
 
   /* SUCCESS */
 

package/lib/assets/css/_context.pcss

@@ -11,7 +11,7 @@
 }
 
 .context-color-info {
-  color: var(--color-normal-txt-base);
+  color: var(--color-info-txt-base);
 }
 
 .context-background-color-success {
@@ -27,7 +27,7 @@
 }
 
 .context-background-color-info {
-  background-color: var(--color-normal-background-selected);
+  background-color: var(--color-info-background-selected);
 }
 
 .context-border-color-success {
@@ -43,18 +43,18 @@
 }
 
 .context-border-color-info {
-  border-color: var(--color-normal-txt-base);
+  border-color: var(--color-info-txt-base);
 }
 
 .color-context-info {
-  --color-context-primary: var(--color-normal-txt-base);
-  --color-context-primary-hover: var(--color-normal-txt-hover);
-  --color-context-primary-active: var(--color-normal-txt-active);
+  --color-context-primary: var(--color-info-txt-base);
+  --color-context-primary-hover: var(--color-info-txt-hover);
+  --color-context-primary-active: var(--color-info-txt-active);
   --color-context-primary-disabled: var(--color-neutral-txt-secondary);
 
-  --color-context-secondary: var(--color-normal-background-selected);
-  --color-context-secondary-hover: var(--color-normal-background-selected);
-  --color-context-secondary-active: var(--color-normal-background-active);
+  --color-context-secondary: var(--color-info-background-selected);
+  --color-context-secondary-hover: var(--color-info-background-selected);
+  --color-context-secondary-active: var(--color-info-background-active);
 
   --color-context-tertiary: var(--color-neutral-background-primary);
 }

package/lib/assets/css/base.pcss

@@ -19,8 +19,8 @@
 
   --scrollbar-width: 1.4rem;
   --scrollbar-border: 0.4rem;
-  --scrollbar-thumb-color: var(--color-normal-item-active);
-  --scrollbar-track-color: var(--color-normal-background-selected);
+  --scrollbar-thumb-color: var(--color-info-item-active);
+  --scrollbar-track-color: var(--color-info-background-selected);
 
   /* Firefox/Gecko and Chrome versions >= 121 */
   scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
@@ -45,7 +45,7 @@
 }
 
 a {
-  color: var(--color-normal-txt-base);
+  color: var(--color-info-txt-base);
 }
 
 code,
@@ -62,17 +62,17 @@ pre {
 
 .link {
   text-decoration: underline;
-  color: var(--color-normal-txt-base);
+  color: var(--color-info-txt-base);
   cursor: pointer;
 }
 
 .link:hover {
-  color: var(--color-normal-txt-hover);
+  color: var(--color-info-txt-hover);
 }
 
 .link:active,
 .link.router-link-active {
-  color: var(--color-normal-txt-active);
+  color: var(--color-info-txt-active);
 }
 
 .link.router-link-active {

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="vts-backup-item">
+    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
+      {{ backup.label }}
+    </RouterLink>
+    <p v-else class="typo p3-medium">
+      {{ backup.label }}
+    </p>
+    <div class="states">
+      <VtsBackupState v-for="(state, index) in backup.states" :key="index" :state />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsBackupState, { type BackupState } from '@core/components/backup-state/VtsBackupState.vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export type BackupStates = BackupState[]
+
+export type Backup = {
+  label: string
+  route?: RouteLocationRaw
+  states: BackupStates
+}
+
+defineProps<{
+  backup: Backup
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-backup-item {
+  padding: 0.8rem 0.4rem;
+  border-top: 0.1rem solid var(--color-neutral-border);
+  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/backup-state/{BackupState.vue → VtsBackupState.vue}

@@ -1,15 +1,15 @@
-<!-- v1.0 -->
 <template>
-  <VtsIcon :accent="color" :icon class="backup-state" />
+  <VtsIcon :accent="color" :icon class="vts-backup-state" />
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { BackupState } from '@core/types/backup.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
+export type BackupState = 'success' | 'failure' | 'partial'
+
 type Props = {
   state: BackupState
 }
@@ -27,7 +27,7 @@ const color = computed(() => states[props.state].color)
 </script>
 
 <style lang="postcss" scoped>
-.backup-state {
+.vts-backup-state {
   font-size: 1rem;
 }
 </style>

package/lib/components/{button/ButtonGroup.vue → button-group/VtsButtonGroup.vue}

@@ -1,7 +1,8 @@
-<!-- v1.0 -->
 <template>
-  <div class="button-group">
-    <div class="line"><slot /></div>
+  <div class="vts-button-group">
+    <div class="line">
+      <slot />
+    </div>
     <div v-if="slots.tertiary" class="line">
       <slot name="tertiary" />
     </div>
@@ -10,13 +11,13 @@
 
 <script lang="ts" setup>
 const slots = defineSlots<{
-  default: () => void
-  tertiary?: () => void
+  default(): any
+  tertiary?(): any
 }>()
 </script>
 
 <style lang="postcss" scoped>
-.button-group {
+.vts-button-group {
   display: flex;
   flex-direction: column;
   align-items: center;

package/lib/components/cell-object/{CellObject.vue → VtsCellObject.vue}

@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- WIP -->
 <template>
-  <td class="cell-object">
+  <td class="vts-cell-object">
     <div class="data">
       <slot />
       <template v-if="id !== undefined">
@@ -10,9 +10,9 @@
         <UiButton
           v-if="isSupported && copiableId"
           :left-icon="faCopy"
-          level="secondary"
+          variant="secondary"
           size="small"
-          :color="copied ? 'success' : 'normal'"
+          :accent="copied ? 'success' : 'info'"
           @click="copy(id)"
         >
           {{ copied ? $t('core.copied') : $t('core.copy-id') }}
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCopy } from '@fortawesome/free-solid-svg-icons'
 import { useClipboard } from '@vueuse/core'
@@ -37,18 +37,18 @@ const { isSupported, copy, copied } = useClipboard()
 </script>
 
 <style lang="postcss" scoped>
-.cell-object {
+.vts-cell-object {
   padding: 0.8rem;
   border: 0.1rem solid var(--color-neutral-border);
-}
 
-.data {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-}
+  .data {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+  }
 
-.id {
-  color: var(--color-neutral-txt-secondary);
+  .id {
+    color: var(--color-neutral-txt-secondary);
+  }
 }
 </style>

package/lib/components/cell-text/{CellText.vue → VtsCellText.vue}

@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- WIP -->
 <template>
-  <td class="cell-text">
+  <td class="vts-cell-text">
     <div class="data typo p2-regular">
       <span v-tooltip class="text-ellipsis">
         <slot />
@@ -22,19 +22,19 @@ const slots = defineSlots<{
 </script>
 
 <style lang="postcss" scoped>
-.cell-text {
+.vts-cell-text {
   padding: 0.8rem;
   border: 0.1rem solid var(--color-neutral-border);
   color: var(--color-neutral-txt-primary);
-}
 
-.data {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-}
+  .data {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+  }
 
-.info {
-  color: var(--color-neutral-txt-secondary);
+  .info {
+    color: var(--color-neutral-txt-secondary);
+  }
 }
 </style>

package/lib/components/console/{RemoteConsole.vue → VtsRemoteConsole.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="remote-console">
+  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
     <div ref="consoleContainer" class="console" />
   </div>
 </template>
@@ -96,26 +96,20 @@ const uiStore = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
-.remote-console {
-  --padding: 0.8rem;
-  --height: 80rem;
-  --width: 100%;
+.vts-remote-console {
+  padding: 0.8rem;
+  height: 80rem;
+  width: 100%;
+  max-width: 100%;
 
   &.mobile {
-    --padding: 0.8rem 0;
-    --height: 100%;
-    --width: 95vw;
+    padding: 0.8rem 0;
+    height: 100%;
+    width: 95vw;
   }
-}
-
-.remote-console {
-  padding: var(--padding);
-  height: var(--height);
-  width: var(--width);
-  max-width: 100%;
-}
 
-.console {
-  height: 100%;
+  .console {
+    height: 100%;
+  }
 }
 </style>

package/lib/components/donut-chart-with-legend/{DonutChartWithLegend.vue → VtsDonutChartWithLegend.vue}

@@ -1,13 +1,13 @@
 <template>
-  <div class="donut-chart-with-legend">
-    <DonutChart :icon :segments />
-    <LegendGroup :items="segments" :title />
+  <div class="vts-donut-chart-with-legend">
+    <UiDonutChart :icon :segments />
+    <VtsLegendGroup :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'
+import VtsLegendGroup, { type LegendGroupProps } from '@core/components/legend-group/VtsLegendGroup.vue'
+import UiDonutChart, { type DonutChartProps } from '@core/components/ui/donut-chart/UiDonutChart.vue'
 
 export type DonutChartWithLegendProps = {
   segments: (DonutChartProps['segments'][number] & LegendGroupProps['items'][number])[]
@@ -19,7 +19,7 @@ defineProps<DonutChartWithLegendProps>()
 </script>
 
 <style lang="postcss" scoped>
-.donut-chart-with-legend {
+.vts-donut-chart-with-legend {
   display: flex;
   align-items: center;
   gap: 3.2rem;

package/lib/components/dropdown/DropdownItem.vue

@@ -1,11 +1,6 @@
 <template>
   <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
-    <!-- TODO: replace with correct color typing when available -->
-    <VtsIcon
-      v-if="checkbox"
-      :accent="color === 'normal' ? 'brand' : color"
-      :icon="selected ? faSquareCheck : faSquare"
-    />
+    <VtsIcon v-if="checkbox" :accent="color" :icon="selected ? faSquareCheck : faSquare" />
     <slot name="icon">
       <VtsIcon :icon accent="current" />
     </slot>
@@ -13,14 +8,13 @@
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
-    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'brand'" :icon="faAngleRight" class="right-icon" />
+    <VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'info'" :icon="faAngleRight" class="right-icon" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsIcon, { type IconAccent } from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Color } from '@core/types/color.type'
 import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faSquare } from '@fortawesome/free-regular-svg-icons'
@@ -29,7 +23,7 @@ import { computed, inject } from 'vue'
 
 defineProps<{
   arrow?: boolean
-  color: Color
+  color: IconAccent
   disabled?: boolean
   icon?: IconDefinition
   info?: string
@@ -45,23 +39,23 @@ const checkbox = inject(
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .dropdown-item {
-  &.normal {
+  &.info {
     --color: var(--color-neutral-txt-primary);
     --background-color: var(--color-neutral-background-primary);
 
     &:is(.active, .selected) {
       --color: var(--color-neutral-txt-primary);
-      --background-color: var(--color-normal-background-selected);
+      --background-color: var(--color-info-background-selected);
     }
 
     &:is(:hover, .hover, :focus-visible) {
       --color: var(--color-neutral-txt-primary);
-      --background-color: var(--color-normal-background-hover);
+      --background-color: var(--color-info-background-hover);
     }
 
     &:is(:active, .pressed) {
       --color: var(--color-neutral-txt-primary);
-      --background-color: var(--color-normal-background-active);
+      --background-color: var(--color-info-background-active);
     }
 
     &.disabled {

package/lib/components/dropdown/DropdownTitle.vue

@@ -55,14 +55,14 @@ const emit = defineEmits<{
   span {
     cursor: pointer;
     text-decoration: underline;
-    color: var(--color-normal-txt-base);
+    color: var(--color-info-txt-base);
 
     &:hover {
-      color: var(--color-normal-item-hover);
+      color: var(--color-info-item-hover);
     }
 
     &:active {
-      color: var(--color-normal-item-active);
+      color: var(--color-info-item-active);
     }
   }
 }

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);
     }
   }
 }