@xen-orchestra/web-core 0.4.0 → 0.5.0

package/lib/components/ui/legend/UiLegend.vue

@@ -0,0 +1,98 @@
+<!-- v3 -->
+<template>
+  <li :class="classNames" class="ui-legend">
+    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
+    <span class="label typo p3-regular"><slot /></span>
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
+    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { toVariants } from '@core/utils/to-variants.util'
+import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+export type LegendItemAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
+
+export type LegendItemProps = {
+  accent: LegendItemAccent
+  value?: number
+  unit?: string
+  tooltip?: string
+}
+
+const props = defineProps<LegendItemProps>()
+
+defineSlots<{
+  default(): void
+}>()
+
+const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
+
+const classNames = computed(() => toVariants({ accent: props.accent }))
+</script>
+
+<style lang="postcss" scoped>
+.ui-legend {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .circle-icon {
+    font-size: 0.8rem;
+  }
+
+  .tooltip-icon {
+    font-size: 1.2rem;
+  }
+
+  .label {
+    color: var(--color-neutral-txt-primary);
+  }
+
+  .value-and-unit {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  /* COLORS VARIANTS */
+
+  &.accent--neutral {
+    .circle-icon {
+      color: var(--color-neutral-txt-primary);
+    }
+  }
+
+  &.accent--info {
+    .circle-icon {
+      color: var(--color-info-item-base);
+    }
+  }
+
+  &.accent--success {
+    .circle-icon {
+      color: var(--color-success-item-base);
+    }
+  }
+
+  &.accent--warning {
+    .circle-icon {
+      color: var(--color-warning-item-base);
+    }
+  }
+
+  &.accent--danger {
+    .circle-icon {
+      color: var(--color-danger-item-base);
+    }
+  }
+
+  &.accent--muted {
+    .circle-icon {
+      color: var(--color-neutral-background-disabled);
+    }
+  }
+}
+</style>

package/lib/components/{LegendTitle.vue → ui/legend-title/UiLegendTitle.vue}

@@ -1,8 +1,8 @@
-<!-- v1.0 -->
+<!-- v3 -->
 <template>
-  <div class="legend-title typo c3-semi-bold">
+  <div class="ui-legend-title typo c3-semi-bold">
     <slot />
-    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="brand" />
+    <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="info" />
   </div>
 </template>
 
@@ -24,7 +24,7 @@ defineSlots<{
 </script>
 
 <style lang="postcss" scoped>
-.legend-title {
+.ui-legend-title {
   color: var(--color-neutral-txt-secondary);
   display: flex;
   gap: 0.8rem;

package/lib/components/{UiSpinner.vue → ui/loader/UiLoader.vue}

@@ -1,8 +1,8 @@
 <!-- Adapted from https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ -->
 
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <svg class="ui-spinner" fill="none" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+  <svg class="ui-loader" fill="none" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient :id="secondHalfId">
         <stop offset="0%" stop-color="currentColor" stop-opacity="0" />
@@ -30,7 +30,7 @@ const secondHalfId = uniqueId('spinner-second-half-')
 </script>
 
 <style lang="postcss" scoped>
-.ui-spinner {
+.ui-loader {
   width: 1.2em;
   height: 1.2em;
   animation: rotate 1s linear infinite;

package/lib/components/{icon/ObjectIcon.vue → ui/object-icon/UiObjectIcon.vue}

@@ -1,10 +1,10 @@
-<!-- VM v1.0 -->
-<!-- Host v1.0 -->
-<!-- SR v1.0 -->
-<!-- Backup Repository v1.0 -->
-<!-- Network v1.0 -->
+<!-- VM v2 -->
+<!-- Host v2 -->
+<!-- SR v2 -->
+<!-- Backup Repository v2 -->
+<!-- Network v2 -->
 <template>
-  <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
+  <FontAwesomeLayers :class="[toVariants({ size }), { muted: stateConfig === undefined }]" class="ui-object-icon">
     <VtsIcon :icon="mainIcon" accent="current" />
     <VtsIcon :icon="stateIcon" accent="current" :style="stateIconStyle" class="state" />
   </FontAwesomeLayers>
@@ -12,7 +12,8 @@
 
 <script generic="TType extends SupportedType" lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { ObjectIconConfig, ObjectIconSize, SupportedState, SupportedType } from '@core/types/object-icon.type'
+import type { ObjectIconConfig, SupportedState, SupportedType } from '@core/types/object-icon.type'
+import { toVariants } from '@core/utils/to-variants.util'
 import {
   faCheckCircle,
   faCircleMinus,
@@ -31,13 +32,15 @@ import {
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
 
+export type ObjectIconSize = 'small' | 'medium' | 'large'
+
 const props = withDefaults(
   defineProps<{
     type: TType
+    size: ObjectIconSize
     state?: SupportedState<TType> | 'disabled'
-    size?: ObjectIconSize
   }>(),
-  { size: 'small', state: 'disabled' }
+  { state: 'disabled' }
 )
 
 const config: ObjectIconConfig = {
@@ -62,7 +65,7 @@ const config: ObjectIconConfig = {
       },
       suspended: {
         icon: faMoon,
-        color: '--color-normal-item-base',
+        color: '--color-info-item-base',
         translate: {
           x: [88, 130, 140],
           y: [65, 75, 90],
@@ -70,7 +73,7 @@ const config: ObjectIconConfig = {
       },
       paused: {
         icon: faPause,
-        color: '--color-normal-item-active',
+        color: '--color-info-item-active',
         translate: {
           x: [110, 154, 170],
           y: [65, 75, 90],
@@ -191,16 +194,16 @@ const stateIconStyle = computed(() => {
 
   let translateIndex: number
 
-  if (props.size === 'extra-small') {
+  if (props.size === 'small') {
     translateIndex = 0
-  } else if (props.size === 'medium') {
+  } else if (props.size === 'large') {
     translateIndex = 2
   } else {
     translateIndex = 1
   }
 
   return {
-    '--vts-icon--color': `var(${stateConfig.value.color})`,
+    color: `var(${stateConfig.value.color})`,
     '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
     '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
   }
@@ -208,36 +211,41 @@ const stateIconStyle = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-/* SIZE VARIANTS */
-.object-icon {
-  &.extra-small {
-    --font-size: 0.8rem;
-    --state-icon-font-size: 0.75em;
+.ui-object-icon {
+  flex-shrink: 0;
+
+  &.muted {
+    color: var(--color-neutral-txt-secondary);
   }
 
-  &.small {
-    --font-size: 1.6rem;
-    --state-icon-font-size: 0.625em;
+  .state {
+    transform: translate(var(--state-icon-translate-x), var(--state-icon-translate-y));
   }
 
-  &.medium {
-    --font-size: 2.4rem;
-    --state-icon-font-size: 0.5em;
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    font-size: 0.8rem;
+
+    .state {
+      font-size: 0.75em;
+    }
   }
-}
 
-/* IMPLEMENTATION */
-.object-icon {
-  flex-shrink: 0;
-  font-size: var(--font-size);
+  &.size--medium {
+    font-size: 1.6rem;
 
-  &.disabled {
-    color: var(--color-neutral-txt-secondary);
+    .state {
+      font-size: 0.625em;
+    }
   }
-}
 
-.state {
-  font-size: var(--state-icon-font-size);
-  transform: translate(var(--state-icon-translate-x), var(--state-icon-translate-y));
+  &.size--large {
+    font-size: 2.4rem;
+
+    .state {
+      font-size: 0.5em;
+    }
+  }
 }
 </style>

package/lib/components/ui/object-link/UiObjectLink.vue

@@ -0,0 +1,83 @@
+<!-- v3 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo p3-regular-underline">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon accent="current" />
+      </slot>
+    </span>
+    <span v-tooltip class="content text-ellipsis">
+      <slot />
+    </span>
+  </RouterLink>
+  <span v-else :class="{ disabled }" class="ui-object-link typo p3-regular-underline">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon accent="current" />
+      </slot>
+    </span>
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { type RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  route?: RouteLocationRaw
+  disabled?: boolean
+  icon?: IconDefinition
+}>()
+
+defineSlots<{
+  default(): any
+  icon(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-object-link {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  color: var(--color-info-txt-base);
+  gap: 1rem;
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+    cursor: not-allowed;
+  }
+
+  .icon {
+    color: var(--color-neutral-txt-primary);
+    font-size: 0.8rem;
+  }
+
+  /* INTERACTION VARIANTS */
+
+  &.is-link {
+    &:hover {
+      color: var(--color-info-txt-hover);
+    }
+
+    &:active {
+      color: var(--color-info-txt-active);
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -0.6rem;
+        border: 0.2rem solid var(--color-info-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+  }
+}
+</style>

package/lib/components/ui/panel/UiPanel.vue

@@ -0,0 +1,57 @@
+<!-- wip -->
+<template>
+  <div class="ui-panel" :class="{ error }">
+    <div v-if="slots.header" class="header">
+      <slot name="header" />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  error?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  header?(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-secondary);
+
+  .header {
+    border-bottom: 0.1rem solid var(--color-neutral-border);
+    background-color: var(--color-neutral-background-primary);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 1.6rem;
+    padding: 0.4rem 1.6rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 0.8rem;
+    gap: 0.8rem;
+  }
+
+  &.error {
+    background-color: var(--color-danger-background-selected);
+
+    .content {
+      padding-top: 15rem;
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,6 @@
-<!-- v1.2 -->
+<!-- v3 -->
 <template>
-  <form class="search-bar" @submit.prevent="emit('search', value)">
+  <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
       {{ $t('core.query-search-bar.label') }}
     </label>
@@ -12,13 +12,13 @@
       :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" color="normal" level="primary" type="submit">{{ $t('core.search') }}</UiButton>
-      <Divider type="stretch" />
+      <UiButton size="medium" accent="info" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
+      <VtsDivider type="stretch" />
       <UiButton
         v-tooltip="$t('coming-soon')"
         size="medium"
-        color="normal"
-        level="secondary"
+        accent="info"
+        variant="secondary"
         :left-icon="faFilter"
         disabled
       >
@@ -26,17 +26,17 @@
       </UiButton>
     </template>
     <template v-else>
-      <ButtonIcon type="submit" :icon="faMagnifyingGlass" />
-      <ButtonIcon disabled :icon="faFilter" />
+      <UiButtonIcon accent="info" size="medium" type="submit" :icon="faMagnifyingGlass" />
+      <UiButtonIcon accent="info" size="medium" disabled :icon="faFilter" />
     </template>
   </form>
 </template>
 
 <script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiButton from '@core/components/button/UiButton.vue'
-import Divider from '@core/components/divider/Divider.vue'
-import UiInput from '@core/components/input/UiInput.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
@@ -55,13 +55,13 @@ const value = ref<string>('')
 </script>
 
 <style lang="postcss" scoped>
-.search-bar {
+.ui-query-search-bar {
   display: flex;
   gap: 1.6rem;
   align-items: center;
-}
 
-.label {
-  color: var(--color-neutral-txt-secondary);
+  .label {
+    color: var(--color-neutral-txt-secondary);
+  }
 }
 </style>

package/lib/components/{task/QuickTaskItem.vue → ui/quick-task-item/UiQuickTaskItem.vue}

@@ -1,7 +1,8 @@
+<!-- WIP -->
 <template>
-  <li class="vts-quick-task-item">
+  <li class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
-      <ButtonIcon :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+      <UiButtonIcon accent="info" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
     </div>
     <div class="content">
       <div class="typo p1-medium">
@@ -9,7 +10,7 @@
       </div>
       <div class="informations">
         <div class="line-1">
-          <UiTag v-if="task.tag" color="secondary">{{ task.tag }}</UiTag>
+          <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon :icon="faCircleNotch" accent="current" />
             <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
@@ -23,21 +24,32 @@
           </template>
         </div>
       </div>
-      <QuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
+      <VtsQuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
     </div>
   </li>
 </template>
 
 <script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import QuickTaskList from '@core/components/task/QuickTaskList.vue'
-import UiTag from '@core/components/UiTag.vue'
-import type { Task } from '@core/types/task.type'
+import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiTag from '@core/components/ui/tag/UiTag.vue'
 import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 
+export type TaskStatus = 'pending' | 'success' | 'failure'
+
+export type Task = {
+  id: string | number
+  name: string
+  status: TaskStatus
+  tag?: string
+  start?: number
+  end?: number
+  subtasks?: Task[]
+}
+
 const props = defineProps<{
   task: Task
 }>()
@@ -50,42 +62,42 @@ const hasSubTasks = computed(() => subTasksCount.value > 0)
 </script>
 
 <style lang="postcss" scoped>
-.vts-quick-task-item {
+.ui-quick-task-item {
   display: flex;
 
   &:not(:last-child) {
     border-bottom: 0.1rem solid var(--color-neutral-border);
   }
-}
 
-.toggle {
-  padding: 0.4rem 0;
-}
+  .toggle {
+    padding: 0.4rem 0;
+  }
 
-.content {
-  flex: 1;
-  padding: 0.4rem 0.4rem 0.4rem 0.8rem;
-}
+  .content {
+    flex: 1;
+    padding: 0.4rem 0.4rem 0.4rem 0.8rem;
+  }
 
-.informations {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
+  .informations {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
 
-.line-1 {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem 0.8rem;
-}
+  .line-1 {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem 0.8rem;
+  }
 
-.line-2 {
-  color: var(--color-neutral-txt-secondary);
-}
+  .line-2 {
+    color: var(--color-neutral-txt-secondary);
+  }
 
-.subtasks {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
+  .subtasks {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
 }
 </style>

package/lib/components/{task/QuickTaskPanel.vue → ui/quick-task-panel/UiQuickTaskPanel.vue}

@@ -1,21 +1,22 @@
+<!-- WIP -->
 <template>
-  <div :class="{ mobile: isMobile }" class="vts-quick-tasks">
-    <QuickTaskTabBar
+  <div :class="{ mobile: isMobile }" class="ui-quick-task-panel">
+    <VtsQuickTaskTabBar
       v-model="currentTab"
       :failure-count="failureTasks.length"
       :loading
       :pending-count="pendingTasks.length"
       :success-count="successTasks.length"
     />
-    <QuickTaskList :loading :tasks="currentTasks" />
+    <VtsQuickTaskList :loading :tasks="currentTasks" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import QuickTaskList from '@core/components/task/QuickTaskList.vue'
-import QuickTaskTabBar from '@core/components/task/QuickTaskTabBar.vue'
+import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
+import VtsQuickTaskTabBar, { type TaskTab } from '@core/components/task/VtsQuickTaskTabBar.vue'
+import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import type { Task, TaskTab } from '@core/types/task.type'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -48,7 +49,7 @@ const currentTasks = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.vts-quick-tasks {
+.ui-quick-task-panel {
   width: fit-content;
   min-width: 65rem;
   border-radius: 0.8rem;