@xen-orchestra/web-core 0.15.0 → 0.17.0

package/lib/components/connection-status/VtsConnectionStatus.vue

@@ -14,6 +14,7 @@ export type ConnectionStatus =
   | 'disconnected'
   | 'partially-connected'
   | 'disconnected-from-physical-device'
+  | 'physically-disconnected'
 type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
 
 const { status } = defineProps<{
@@ -27,6 +28,8 @@ const statuses: ComputedRef<ConnectionStatusesMap> = computed(() => ({
   disconnected: { text: t('disconnected'), accent: 'danger' },
   'partially-connected': { text: t('partially-connected'), accent: 'warning' },
   'disconnected-from-physical-device': { text: t('disconnected-from-physical-device'), accent: 'warning' },
+  // This status is used in host pif side panel
+  'physically-disconnected': { text: t('disconnected-from-physical-device'), accent: 'danger' },
 }))
 
 const currentStatus = computed(() => statuses.value[status])

package/lib/components/console/VtsClipboardConsole.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vts-clipboard-console">
     <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
-    <UiTextarea v-tooltip="$t('coming-soon')" accent="info" disabled :model-value="modelValue" />
+    <UiTextarea v-tooltip="$t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
     <div class="buttons-container">
       <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
         {{ $t('send') }}
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import UiTextarea from '@core/components/ui/input/UiTextarea.vue'
+import UiTextarea from '@core/components/ui/text-area/UiTextarea.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { ref } from 'vue'
 

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/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/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/character-limit/UiCharacterLimit.vue

@@ -0,0 +1,35 @@
+<!-- v1 -->
+<template>
+  <span class="ui-character-limit" :class="classes">
+    {{ $t('core.character-limit', { count, max }) }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const { count, max } = defineProps<{
+  count: number
+  max: number
+}>()
+
+const isTooLong = computed(() => count > max)
+
+const classes = computed(() => {
+  if (isTooLong.value) {
+    return ['has-error', 'typo-body-bold-small']
+  }
+
+  return 'typo-body-regular-small'
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-character-limit {
+  color: var(--color-neutral-txt-secondary);
+
+  &.has-error {
+    color: var(--color-danger-txt-base);
+  }
+}
+</style>

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/input/UiInput.vue

@@ -22,7 +22,7 @@
         @click="modelValue = ''"
       />
     </div>
-    <UiInfo v-if="slots.info || info" :accent>
+    <UiInfo v-if="slots.info || info" :accent="accent === 'brand' ? 'info' : accent">
       <slot name="info">{{ info }}</slot>
     </UiInfo>
   </div>
@@ -37,7 +37,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed, useAttrs, useId } from 'vue'
 
-type InputAccent = 'info' | 'warning' | 'danger'
+type InputAccent = 'brand' | 'warning' | 'danger'
 type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
@@ -67,7 +67,7 @@ const slots = defineSlots<{
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
+const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
 </script>
 
 <style lang="postcss" scoped>
@@ -76,7 +76,6 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   position: relative;
   display: flex;
   flex-direction: column;
-  flex: 1;
   gap: 0.4rem;
   flex: 1;
 
@@ -107,20 +106,20 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
 
   /* VARIANT */
 
-  &.accent--info {
+  &.accent--brand {
     .input {
       border-color: var(--color-neutral-border);
 
       &:hover {
-        border-color: var(--color-info-item-hover);
+        border-color: var(--color-brand-item-hover);
       }
 
       &:focus {
-        border-color: var(--color-info-item-base);
+        border-color: var(--color-brand-item-base);
       }
 
       &:active {
-        border-color: var(--color-info-item-active);
+        border-color: var(--color-brand-item-active);
       }
 
       &:disabled {

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

package/lib/components/ui/progress-bar/UiProgressBar.vue

@@ -0,0 +1,108 @@
+<!-- v2 -->
+<template>
+  <div class="ui-progress-bar" :class="className">
+    <div class="progress-bar">
+      <div class="fill" :style="{ width: `${fillWidth}%` }" />
+    </div>
+    <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
+      <span>{{ $n(0, 'percent') }}</span>
+      <span v-for="step in steps" :key="step">{{ $n(step, 'percent') }}</span>
+    </div>
+    <VtsLegendList class="legend">
+      <UiLegend :accent :value="Math.round(percentage)" unit="%">{{ legend }}</UiLegend>
+    </VtsLegendList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
+import UiLegend from '@core/components/ui/legend/UiLegend.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import { useClamp, useMax } from '@vueuse/math'
+import { computed } from 'vue'
+
+const {
+  value: _value,
+  max = 100,
+  showSteps,
+} = defineProps<{
+  legend: string
+  value: number
+  max?: number
+  showSteps?: boolean
+}>()
+
+const value = useMax(0, () => _value)
+
+const percentage = computed(() => (max <= 0 ? 0 : (value.value / max) * 100))
+const maxPercentage = computed(() => Math.ceil(percentage.value / 100) * 100)
+const fillWidth = useClamp(() => (percentage.value / maxPercentage.value) * 100 || 0, 0, 100)
+const shouldShowSteps = computed(() => showSteps || percentage.value > 100)
+const steps = useMax(1, () => Math.floor(maxPercentage.value / 100))
+
+const accent = computed(() => {
+  if (percentage.value >= 90) {
+    return 'danger'
+  }
+
+  if (percentage.value >= 80) {
+    return 'warning'
+  }
+
+  return 'info'
+})
+
+const className = computed(() => toVariants({ accent: accent.value }))
+</script>
+
+<style lang="postcss" scoped>
+.ui-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .progress-bar {
+    width: 100%;
+    height: 1.2rem;
+    border-radius: 0.4rem;
+    overflow: hidden;
+    background-color: var(--color-neutral-background-disabled);
+
+    .fill {
+      width: 0;
+      height: 100%;
+      transition: width 0.25s ease-in-out;
+    }
+  }
+
+  .steps {
+    color: var(--color-neutral-txt-secondary);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .legend {
+    margin-inline-start: auto;
+  }
+
+  /* ACCENT */
+
+  &.accent--info {
+    .fill {
+      background-color: var(--color-info-item-base);
+    }
+  }
+
+  &.accent--warning {
+    .fill {
+      background-color: var(--color-warning-item-base);
+    }
+  }
+
+  &.accent--danger {
+    .fill {
+      background-color: var(--color-danger-item-base);
+    }
+  }
+}
+</style>

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -8,7 +8,7 @@
       :id
       v-model="value"
       type="text"
-      accent="info"
+      accent="brand"
       :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
       :placeholder="$t('core.query-search-bar.placeholder')"