@xen-orchestra/web-core 0.16.0 → 0.18.0

package/lib/components/console/VtsRemoteConsole.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
-    <VtsLoadingHero :disabled="isReady" type="panel" />
+    <VtsLoadingHero v-if="!isReady" type="panel" />
     <div ref="console-container" class="console" />
   </div>
 </template>

package/lib/components/data-table/VtsDataTable.vue

@@ -1,24 +1,23 @@
 <template>
   <div class="table-container">
-    <VtsLoadingHero :disabled="isReady" type="table">
-      <VtsTable vertical-border>
-        <thead>
-          <slot name="thead" />
-        </thead>
-        <tbody>
-          <slot name="tbody" />
-        </tbody>
-      </VtsTable>
-    </VtsLoadingHero>
-    <VtsErrorNoDataHero v-if="isReady && hasError" type="table" />
-    <VtsStateHero v-if="isReady && noDataMessage" type="table" image="no-data" />
+    <VtsLoadingHero v-if="!isReady" type="table" />
+    <VtsErrorNoDataHero v-else-if="hasError" type="table" />
+    <VtsNoDataHero v-else-if="noDataMessage" type="table" />
+    <VtsTable v-else vertical-border>
+      <thead>
+        <slot name="thead" />
+      </thead>
+      <tbody>
+        <slot name="tbody" />
+      </tbody>
+    </VtsTable>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
 import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 
 defineProps<{

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="vts-input-wrapper">
+    <UiLabel
+      :accent="labelAccent"
+      :for="id"
+      :href="learnMoreUrl"
+      :icon
+      :required="wrapperController.required"
+      class="label"
+    >
+      <slot name="label">{{ label }}</slot>
+    </UiLabel>
+    <slot />
+    <UiInfo v-for="{ content, accent } of messages" :key="content" :accent>
+      {{ content }}
+    </UiInfo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import { useMapper } from '@core/composables/mapper.composable'
+import { useRanked } from '@core/composables/ranked.composable.ts'
+import type { MaybeArray } from '@core/types/utility.type'
+import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
+import { toArray } from '@core/utils/to-array.utils'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { useArrayMap } from '@vueuse/core'
+import { provide, reactive, useId } from 'vue'
+
+export type InputWrapperMessage = MaybeArray<string | { content: string; accent?: InfoAccent }>
+
+export type InputWrapperController = {
+  id: string
+  labelAccent: LabelAccent
+  required: boolean
+}
+
+const { message: _message } = defineProps<{
+  label?: string
+  learnMoreUrl?: string
+  icon?: IconDefinition
+  message?: InputWrapperMessage
+}>()
+
+defineSlots<{
+  default(): any
+  label?(): any
+}>()
+
+const id = useId()
+
+const unsortedMessages = useArrayMap(
+  () => toArray(_message),
+  item => ({
+    content: typeof item === 'object' ? item.content : item,
+    accent: typeof item === 'object' ? (item.accent ?? 'info') : 'info',
+  })
+)
+
+const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['danger', 'warning', 'success', 'info'])
+
+const labelAccent = useMapper<InfoAccent, LabelAccent>(
+  () => messages.value[0]?.accent,
+  {
+    info: 'neutral',
+    success: 'neutral',
+    warning: 'warning',
+    danger: 'danger',
+  },
+  'neutral'
+)
+
+const wrapperController = reactive({
+  id,
+  labelAccent,
+  required: false,
+}) satisfies InputWrapperController
+
+provide(IK_INPUT_WRAPPER_CONTROLLER, wrapperController)
+</script>
+
+<style lang="postcss" scoped>
+.vts-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .label {
+    min-height: 2.4rem;
+  }
+}
+</style>

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/menu/MenuList.vue

@@ -74,6 +74,7 @@ const open = (event: MouseEvent) => {
   nextTick(() => {
     clearClickOutsideEvent = onClickOutside(menu, () => (isOpen.value = false), {
       ignore: [event.currentTarget as HTMLElement],
+      controls: false,
     })
 
     placementJs(event.currentTarget as HTMLElement, unrefElement(menu), {

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/state-hero/VtsLoadingHero.vue

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

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/dropdown/UiDropdown.vue

@@ -0,0 +1,214 @@
+<!-- v7 -->
+<template>
+  <div v-tooltip="{ selector: '.text-ellipsis' }" :class="className" class="ui-dropdown">
+    <UiCheckbox v-if="checkbox" :disabled :model-value="selected" accent="brand" />
+    <slot name="icon">
+      <VtsIcon :icon accent="current" />
+    </slot>
+    <div class="text-ellipsis typo-body-bold-small">
+      <slot />
+    </div>
+    <div v-if="info" class="info typo-body-regular-small">{{ info }}</div>
+    <VtsIcon
+      v-if="subMenuIcon || locked"
+      :accent="disabled ? 'current' : 'brand'"
+      :icon="locked ? faLock : faAngleRight"
+      class="right-icon"
+      fixed-width
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faAngleRight, faLock } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+export type DropdownAccent = 'normal' | 'brand' | 'success' | 'warning' | 'danger'
+
+const {
+  accent,
+  disabled: _disabled,
+  locked,
+  selected,
+  hover,
+} = defineProps<{
+  accent: DropdownAccent
+  disabled?: boolean
+  locked?: boolean
+  selected?: boolean
+  hover?: boolean
+  checkbox?: boolean
+  subMenuIcon?: boolean
+  icon?: IconDefinition
+  info?: string
+}>()
+
+const disabled = computed(() => _disabled || locked)
+
+const className = computed(() =>
+  toVariants({
+    accent,
+    disabled: disabled.value,
+    selected,
+    hover,
+  })
+)
+</script>
+
+<style lang="postcss" scoped>
+.ui-dropdown {
+  display: flex;
+  align-items: center;
+  padding: 1.2rem;
+  gap: 0.8rem;
+  height: 4.5rem;
+  cursor: default;
+
+  &.accent--normal {
+    color: var(--color-neutral-txt-primary);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      background-color: var(--color-brand-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      background-color: var(--color-brand-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-brand-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--brand {
+    color: var(--color-brand-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-brand-txt-base);
+      background-color: var(--color-brand-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-brand-txt-hover);
+      background-color: var(--color-brand-background-hover);
+    }
+
+    &:active {
+      color: var(--color-brand-txt-active);
+      background-color: var(--color-brand-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--success {
+    color: var(--color-success-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-success-txt-base);
+      background-color: var(--color-success-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-success-txt-hover);
+      background-color: var(--color-success-background-hover);
+    }
+
+    &:active {
+      color: var(--color-success-txt-active);
+      background-color: var(--color-success-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--warning {
+    color: var(--color-warning-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-warning-txt-base);
+      background-color: var(--color-warning-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-warning-txt-hover);
+      background-color: var(--color-warning-background-hover);
+    }
+
+    &:active {
+      color: var(--color-warning-txt-active);
+      background-color: var(--color-warning-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--danger {
+    color: var(--color-danger-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-danger-txt-base);
+      background-color: var(--color-danger-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-danger-txt-hover);
+      background-color: var(--color-danger-background-hover);
+    }
+
+    &:active {
+      color: var(--color-danger-txt-active);
+      background-color: var(--color-danger-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0.2rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  .info {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .right-icon {
+    font-size: 1.2rem;
+  }
+}
+</style>

package/lib/components/ui/dropdown/UiDropdownList.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="ui-dropdown-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.ui-dropdown-list {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: var(--color-neutral-background-primary);
+  border: 0.1rem solid var(--color-neutral-border);
+  border-radius: 0.4rem;
+}
+</style>

package/lib/components/ui/label/UiLabel.vue

@@ -15,8 +15,10 @@ import UiLink from '@core/components/ui/link/UiLink.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
+export type LabelAccent = 'neutral' | 'warning' | 'danger'
+
 const { for: htmlFor } = defineProps<{
-  accent: 'neutral' | 'warning' | 'danger'
+  accent: LabelAccent
   for?: string
   icon?: IconDefinition
   required?: boolean