@xen-orchestra/web-core 0.17.0 → 0.19.0

package/lib/components/icon/VtsIcon.vue

@@ -13,7 +13,7 @@ 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' | 'info' | 'success' | 'warning' | 'danger'
+export type IconAccent = 'current' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
 defineProps<{
   accent: IconAccent
@@ -88,5 +88,13 @@ defineProps<{
       color: var(--color-danger-txt-item);
     }
   }
+
+  &.muted {
+    color: var(--color-neutral-background-disabled);
+
+    .overlay-icon {
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
 }
 </style>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -68,6 +68,7 @@ const labelAccent = useMapper<InfoAccent, LabelAccent>(
     success: 'neutral',
     warning: 'warning',
     danger: 'danger',
+    muted: 'neutral',
   },
   'neutral'
 )

package/lib/components/{charts/LinearChart.md → linear-chart/VtsLinearChart.md}

@@ -2,12 +2,12 @@
 
 ```vue
 <template>
-  <LinearChart :data="data" :value-formatter="customValueFormatter" />
+  <VtsLinearChart :data :value-formatter="customValueFormatter" />
 </template>
 
 <script lang="ts" setup>
-import type { LinearChartData } from '@/types/chart'
-import LinearChart from '@/components/charts/LinearChart.vue'
+import type { LinearChartData } from '@core/types/chart'
+import VstLinearChart from '@core/components/linear-chart/VtsLinearChart.vue'
 
 const data: LinearChartData = [
   {

package/lib/components/{charts/LinearChart.vue → linear-chart/VtsLinearChart.vue}

@@ -1,20 +1,23 @@
 <template>
-  <VueCharts :option autoresize class="chart" />
+  <VueCharts :option autoresize class="vts-linear-chart" />
 </template>
 
 <script lang="ts" setup>
 import type { LinearChartData, ValueFormatter } from '@core/types/chart'
-import { IK_CHART_VALUE_FORMATTER } from '@core/utils/injection-keys.util'
 import { utcFormat } from 'd3-time-format'
 import type { EChartsOption } from 'echarts'
 import { LineChart } from 'echarts/charts'
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
 import VueCharts from 'vue-echarts'
 
-const props = defineProps<{
+const {
+  data,
+  valueFormatter: _valueFormatter,
+  maxValue,
+} = defineProps<{
   data: LinearChartData
   valueFormatter?: ValueFormatter
   maxValue?: number
@@ -23,7 +26,7 @@ const props = defineProps<{
 const Y_AXIS_MAX_VALUE = 200
 
 const valueFormatter = computed<ValueFormatter>(() => {
-  const formatter = props.valueFormatter
+  const formatter = _valueFormatter
 
   return value => {
     if (formatter === undefined) {
@@ -34,13 +37,11 @@ const valueFormatter = computed<ValueFormatter>(() => {
   }
 })
 
-provide(IK_CHART_VALUE_FORMATTER, valueFormatter)
-
 use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed<EChartsOption>(() => ({
   legend: {
-    data: props.data.map(series => series.label),
+    data: data.map(series => series.label),
   },
   tooltip: {
     valueFormatter: v => valueFormatter.value(v as number),
@@ -58,9 +59,9 @@ const option = computed<EChartsOption>(() => ({
     axisLabel: {
       formatter: valueFormatter.value,
     },
-    max: props.maxValue ?? Y_AXIS_MAX_VALUE,
+    max: maxValue ?? Y_AXIS_MAX_VALUE,
   },
-  series: props.data.map((series, index) => ({
+  series: data.map((series, index) => ({
     type: 'line',
     name: series.label,
     zlevel: index + 1,
@@ -70,7 +71,7 @@ const option = computed<EChartsOption>(() => ({
 </script>
 
 <style lang="postcss" scoped>
-.chart {
+.vts-linear-chart {
   width: 100%;
   height: 30rem;
 }

package/lib/components/quick-info-card/VtsQuickInfoCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiCard class="vts-quick-info-card">
+    <UiCardTitle>{{ $t('quick-info') }}</UiCardTitle>
+    <VtsLoadingHero v-if="loading" type="card" />
+    <div v-else class="info-container">
+      <slot />
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+
+defineProps<{
+  loading: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-info-card {
+  .info-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+    gap: 2.4rem;
+  }
+}
+</style>

package/lib/components/quick-info-column/VtsQuickInfoColumn.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="vts-quick-info-column">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.vts-quick-info-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/quick-info-row/VtsQuickInfoRow.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="vts-quick-info-row">
+    <span class="typo-body-bold">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </span>
+    <span v-tooltip class="typo-body-regular value text-ellipsis">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+
+defineProps<{
+  label?: string
+  value?: string
+}>()
+
+defineSlots<{
+  label?(): any
+  value?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-info-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  .value:empty::before {
+    content: '-';
+  }
+}
+</style>

package/lib/components/ui/alert/UiAlert.vue

@@ -0,0 +1,105 @@
+<!-- v3 -->
+<template>
+  <div :class="toVariants({ accent })" class="ui-alert">
+    <div class="content">
+      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <div class="alert typo-body-regular-small">
+        <div>
+          <slot />
+        </div>
+        <div v-if="slots.description">
+          <slot name="description" />
+        </div>
+      </div>
+      <UiButtonIcon
+        v-if="close"
+        class="close-button"
+        :icon="faXmark"
+        accent="brand"
+        size="medium"
+        @click="emit('close')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faCheck, faCircle, faExclamation, faInfo, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+type AlertAccent = 'info' | 'success' | 'warning' | 'danger'
+
+const { accent } = defineProps<{
+  accent: AlertAccent
+  close?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  description?(): any
+}>()
+
+const iconByAccent: Record<AlertAccent, IconDefinition> = {
+  info: faInfo,
+  success: faCheck,
+  warning: faExclamation,
+  danger: faXmark,
+}
+
+const icon = computed(() => iconByAccent[accent])
+</script>
+
+<style scoped lang="postcss">
+.ui-alert {
+  padding: 1.6rem;
+  border: 0.1rem solid;
+  border-radius: 0.4rem;
+
+  .content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.6rem;
+
+    .information-icon {
+      font-size: 2.7rem;
+    }
+
+    .alert {
+      align-self: center;
+    }
+
+    .close-button {
+      margin-inline-start: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  &.accent--info {
+    background-color: var(--color-info-background-selected);
+    border-color: var(--color-info-item-base);
+  }
+
+  &.accent--success {
+    background-color: var(--color-success-background-selected);
+    border-color: var(--color-success-item-base);
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+    border-color: var(--color-warning-item-base);
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+    border-color: var(--color-danger-item-base);
+  }
+}
+</style>

package/lib/components/ui/card/UiCard.vue

@@ -24,6 +24,18 @@ defineSlots<{
   border: 0.1rem solid var(--color-neutral-border);
   border-radius: 0.8rem;
 
+  &:has(> .vts-linear-chart) {
+    padding-inline: 0;
+
+    > *:not(.vts-linear-chart) {
+      padding-inline: 2.4rem;
+    }
+
+    :deep(.vts-linear-chart) {
+      padding-inline-end: 2.4rem;
+    }
+  }
+
   &.horizontal {
     flex-direction: row;
   }

package/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

@@ -0,0 +1,212 @@
+<!-- v4 -->
+<template>
+  <div class="ui-circle-progress-bar" :class="className">
+    <svg
+      :width="circleSize"
+      :height="circleSize"
+      :viewBox="`0 0 ${circleSize} ${circleSize}`"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle :r="radius" :cx="circleSize / 2" :cy="circleSize / 2" fill="transparent" class="background" />
+      <circle
+        :r="radius"
+        :cx="circleSize / 2"
+        :cy="circleSize / 2"
+        fill="transparent"
+        class="fill"
+        :class="{ success: isCompleteWithSuccess }"
+      />
+    </svg>
+    <div v-if="size !== 'extra-small'" class="overlay">
+      <VtsIcon v-if="isComplete" class="icon" :icon :accent="iconAccent" />
+      <span v-else>{{ percentValue }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { useClamp, useMax } from '@vueuse/math'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const {
+  accent,
+  size,
+  value: _value,
+  maxValue = 100,
+} = defineProps<{
+  accent: CircleProgressBarAccent
+  size: CircleProgressBarSize
+  value: number
+  maxValue?: number
+}>()
+
+const { n } = useI18n()
+
+type CircleProgressBarAccent = 'info' | 'warning' | 'danger'
+type CircleProgressBarSize = 'extra-small' | 'small' | 'medium' | 'large'
+
+const circleSizeMap = {
+  'extra-small': 16,
+  small: 40,
+  medium: 64,
+  large: 164,
+}
+
+const strokeWidthMap = {
+  'extra-small': 2,
+  small: 4,
+  medium: 6,
+  large: 16,
+}
+
+const fontClassesMap = {
+  'extra-small': undefined,
+  small: 'typo-body-bold-small',
+  medium: 'typo-h5',
+  large: 'typo-h3',
+}
+
+const circleSize = computed(() => circleSizeMap[size])
+const fontClass = computed(() => fontClassesMap[size])
+const strokeWidth = computed(() => strokeWidthMap[size])
+
+const radius = computed(() => (circleSize.value - strokeWidth.value) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+
+const value = useMax(0, () => _value)
+const valuePercent = useClamp(() => (value.value / maxValue) * 100 || 0, 0, 100)
+
+const isComplete = computed(() => valuePercent.value >= 100)
+const isCompleteWithSuccess = computed(() => isComplete.value && accent === 'info')
+
+const dashOffset = computed(() => {
+  if (valuePercent.value > 100) return
+  return circumference.value * (1 - valuePercent.value / 100)
+})
+
+const percentValue = computed(() => n(valuePercent.value / 100, 'percent'))
+
+const iconAccent = computed(() => (isCompleteWithSuccess.value ? 'success' : accent))
+const icon = computed(() => (accent === 'warning' || accent === 'danger' ? faExclamation : faCheck))
+
+const className = computed(() => [
+  fontClass.value,
+  toVariants({
+    accent,
+    size,
+  }),
+])
+</script>
+
+<style lang="postcss" scoped>
+.ui-circle-progress-bar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* ACCENT */
+
+  &.accent--info {
+    color: var(--color-info-item-base);
+
+    .fill {
+      stroke: var(--color-info-item-base);
+    }
+
+    .background {
+      stroke: var(--color-info-background-selected);
+    }
+
+    .success {
+      stroke: var(--color-success-item-base);
+    }
+  }
+
+  &.accent--warning {
+    color: var(--color-warning-item-base);
+
+    .fill {
+      stroke: var(--color-warning-item-base);
+    }
+
+    .background {
+      stroke: var(--color-warning-background-selected);
+    }
+  }
+
+  &.accent--danger {
+    color: var(--color-danger-item-base);
+
+    .fill {
+      stroke: var(--color-danger-item-base);
+    }
+
+    .background {
+      stroke: var(--color-danger-background-selected);
+    }
+  }
+
+  /* SIZE */
+
+  &.size--extra-small {
+    .background,
+    .fill {
+      stroke-width: 2;
+    }
+  }
+
+  &.size--small {
+    .icon {
+      font-size: 1.6rem;
+    }
+
+    .background,
+    .fill {
+      stroke-width: 4;
+    }
+  }
+
+  &.size--medium {
+    .icon {
+      font-size: 3.2rem;
+    }
+
+    .background,
+    .fill {
+      stroke-width: 6;
+    }
+  }
+
+  &.size--large {
+    .icon {
+      font-size: 4.8rem;
+    }
+
+    .background,
+    .fill {
+      stroke-width: 16;
+    }
+  }
+
+  .fill {
+    stroke-linecap: butt;
+    transition: stroke-dashoffset 0.3s ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    stroke-dasharray: v-bind(circumference);
+    stroke-dashoffset: v-bind(dashOffset);
+  }
+
+  .overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

package/lib/components/ui/info/UiInfo.vue

@@ -1,8 +1,8 @@
-<!-- v2 -->
+<!-- v4 -->
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p v-tooltip="!wrap" class="typo-form-info" :class="{ 'text-ellipsis': !wrap }">
+    <p v-tooltip="!wrap" class="typo-body-regular-small" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>
@@ -16,12 +16,13 @@ import {
   faCircle,
   faExclamation,
   faInfo,
+  faMinus,
   faXmark,
   type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-export type InfoAccent = 'info' | 'success' | 'warning' | 'danger'
+export type InfoAccent = 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
 const { accent } = defineProps<{
   accent: InfoAccent
@@ -37,6 +38,7 @@ const iconByAccent: Record<InfoAccent, IconDefinition> = {
   success: faCheck,
   warning: faExclamation,
   danger: faXmark,
+  muted: faMinus,
 }
 
 const icon = computed(() => iconByAccent[accent])