@xen-orchestra/web-core 0.33.0 → 0.35.0

package/lib/components/dropdown/{DropdownTitle.vue → VtsDropdownTitle.vue}

@@ -3,9 +3,9 @@
  TODO: Replace `span` with `UiButton` when new version (with tertiary) is available
  -->
 <template>
-  <div class="dropdown-title">
+  <div class="vts-dropdown-title">
     <VtsIcon :name="icon" size="medium" />
-    <div class="label c3 semi-bold">
+    <div class="typo-caption-small">
       <slot />
     </div>
     <div v-if="onToggleSelectAll" class="buttons">
@@ -41,12 +41,12 @@ const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>
-.dropdown-title {
+.vts-dropdown-title {
   display: flex;
   align-items: center;
   padding: 0.4rem 1.6rem;
   gap: 0.8rem;
-  height: 2.6rem;
+  height: 2.9rem;
   background: var(--color-neutral-background-secondary);
 }
 

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

@@ -1,13 +1,6 @@
 <template>
   <div class="vts-input-wrapper">
-    <UiLabel
-      :accent="labelAccent"
-      :for="id"
-      :href="learnMoreUrl"
-      :icon
-      :required="wrapperController.required"
-      class="label"
-    >
+    <UiLabel :accent="labelAccent" :for="id" :href="learnMoreUrl" :required="wrapperController.required" class="label">
       <slot name="label">{{ label }}</slot>
     </UiLabel>
     <slot />
@@ -21,7 +14,6 @@
 import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
 import { useRanked } from '@core/composables/ranked.composable.ts'
-import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import type { MaybeArray } from '@core/types/utility.type'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
@@ -40,7 +32,6 @@ export type InputWrapperController = {
 const { message: _message } = defineProps<{
   label?: string
   learnMoreUrl?: string
-  icon?: IconName
   message?: InputWrapperMessage
 }>()
 

package/lib/components/label-value-list/VtsLabelValueList.vue

@@ -0,0 +1,46 @@
+<template>
+  <template v-for="(value, label) in fields" :key="label">
+    <VtsCardRowKeyValue v-if="isPrimitiveOrBooleanString(value)">
+      <template #key>
+        <span class="label">{{ label }}</span>
+      </template>
+      <template #value>
+        <template v-if="isBooleanLike(value)">
+          <VtsEnabledState :enabled="toBoolean(value)" />
+        </template>
+        <template v-else>
+          {{ value }}
+        </template>
+      </template>
+      <template v-if="!isBooleanLike(value)" #addons>
+        <VtsCopyButton :value="String(value)" />
+      </template>
+    </VtsCardRowKeyValue>
+    <VtsLabelValueList v-else :fields="value" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
+import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import VtsEnabledState from '@core/components/enabled-state/VtsEnabledState.vue'
+
+defineProps<{
+  fields: Record<string, unknown> | unknown
+}>()
+
+const isBooleanString = (value: unknown): value is string => value === 'true' || value === 'false'
+
+const isBooleanLike = (value: unknown): boolean => typeof value === 'boolean' || isBooleanString(value)
+
+const toBoolean = (value: unknown): boolean => value === true || value === 'true'
+
+const isPrimitiveOrBooleanString = (value: unknown): boolean =>
+  ['number', 'string'].includes(typeof value) || isBooleanString(value)
+</script>
+
+<style lang="postcss" scoped>
+.label {
+  text-transform: capitalize;
+}
+</style>

package/lib/components/menu/MenuList.vue

@@ -93,6 +93,7 @@ const open = (event: MouseEvent) => {
   border-radius: 0.4rem;
   background-color: var(--color-neutral-background-primary);
   z-index: 1010;
+  overflow: auto;
 
   &.horizontal {
     flex-direction: row;

package/lib/components/progress-bar/VtsProgressBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vts-progress-bar">
-    <UiDataRuler :max="percentageCap" :warning="threshold.payload" />
+    <UiDataRuler v-if="!noruler" :max="percentageCap" :warning="threshold.payload" />
     <UiProgressBar :accent="threshold.payload.accent ?? 'info'" :fill-width :legend />
   </div>
 </template>
@@ -28,9 +28,10 @@ const {
 } = defineProps<{
   current: number
   total: number
-  label: string
+  label?: string
   legendType?: ProgressBarLegendType
   thresholds?: ProgressBarThresholdConfig
+  noruler?: boolean
 }>()
 
 const progress = useProgress(
@@ -40,7 +41,11 @@ const progress = useProgress(
 
 const { percentageCap, percentage, fillWidth } = progress
 
-const legend = useProgressToLegend(() => legendType, label, progress)
+const legend = useProgressToLegend(
+  () => legendType,
+  () => label,
+  progress
+)
 
 const threshold = useThreshold(percentage, () => thresholds)
 </script>

package/lib/components/size-progress-cell/VtsSizeProgressCell.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="progress-cell">
+    <VtsProgressBar :current :total noruler class="progress" />
+    <span>{{ n(percentage / 100, { maximumFractionDigits: 0, style: 'percent' }) }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsProgressBar from '@core/components/progress-bar/VtsProgressBar.vue'
+import { useProgress } from '@core/packages/progress/use-progress.ts'
+import { useI18n } from 'vue-i18n'
+
+const { current, total } = defineProps<{
+  current: number
+  total: number
+}>()
+
+const { n } = useI18n()
+
+const { percentage } = useProgress(
+  () => current,
+  () => total
+)
+</script>
+
+<style lang="postcss" scoped>
+.progress-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .progress {
+    flex-grow: 1;
+  }
+}
+</style>

package/lib/components/space-card/VtsSpaceCard.vue

@@ -0,0 +1,94 @@
+<template>
+  <UiCard class="card-container">
+    <UiCardTitle>
+      {{ t('space') }}
+    </UiCardTitle>
+
+    <div class="content">
+      <VtsProgressBar noruler :current="used" :total :label legend-type="percent" class="progress" />
+
+      <VtsCardRowKeyValue>
+        <template #key>{{ t('used-space') }}</template>
+        <template #value>{{ usedSpace.formattedValue }}</template>
+        <template v-if="usedSpace.rawValue > 0" #addons>
+          <VtsCopyButton :value="usedSpace.formattedValue" />
+        </template>
+      </VtsCardRowKeyValue>
+
+      <VtsCardRowKeyValue>
+        <template #key>{{ t('free-space') }}</template>
+        <template #value>
+          {{ freeSpace.formattedValue }}
+        </template>
+        <template v-if="freeSpace.rawValue > 0" #addons>
+          <VtsCopyButton :value="freeSpace.formattedValue" />
+        </template>
+      </VtsCardRowKeyValue>
+
+      <VtsCardRowKeyValue>
+        <template #key>{{ totalSizeLabel ? totalSizeLabel : t('size') }}</template>
+        <template #value>
+          {{ totalSpace.formattedValue }}
+        </template>
+        <template v-if="totalSpace.rawValue > 0" #addons>
+          <VtsCopyButton :value="totalSpace.formattedValue" />
+        </template>
+      </VtsCardRowKeyValue>
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
+import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import VtsProgressBar from '@core/components/progress-bar/VtsProgressBar.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import { formatSize } from '@core/utils/size.util'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { used, total } = defineProps<{
+  used: number
+  total: number
+  label: string
+  totalSizeLabel?: string
+}>()
+
+const { t } = useI18n()
+
+const usedSpace = computed(() => ({
+  formattedValue: formatSize(used, 2),
+  rawValue: used,
+}))
+
+const totalSpace = computed(() => ({
+  formattedValue: formatSize(total, 2),
+  rawValue: total,
+}))
+
+const freeSpace = computed(() => {
+  const rawFreeSpace = total - used
+
+  return {
+    formattedValue: formatSize(rawFreeSpace, 2),
+    rawValue: rawFreeSpace,
+  }
+})
+</script>
+
+<style scoped lang="postcss">
+.card-container {
+  gap: 1.6rem;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+
+    .progress {
+      margin-block-end: 1.6rem;
+    }
+  }
+}
+</style>

package/lib/components/ui/input/UiInput.vue

@@ -1,7 +1,6 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
-    <VtsIcon :name="icon" size="medium" class="left-icon" />
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
@@ -114,14 +113,9 @@ defineExpose({ focus })
   min-width: 15rem;
   padding-inline: 1.6rem;
 
-  .left-icon,
   .right-icon {
     pointer-events: none;
-    color: var(--color-neutral-txt-secondary);
-  }
-
-  &:not(.disabled) .right-icon {
-    color: var(--color-brand-item-base);
+    color: var(--color-brand-txt-base);
   }
 
   .input {
@@ -133,6 +127,10 @@ defineExpose({ focus })
     &::placeholder {
       color: var(--color-neutral-txt-secondary);
     }
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
   }
 
   /* VARIANT */

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

@@ -1,18 +1,15 @@
-<!-- v1 -->
+<!-- v3 -->
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
-    <VtsIcon :name="icon" size="medium" class="icon" />
-    <label :for="htmlFor" :class="{ required }" class="typo-caption label">
+    <label :for="htmlFor" :class="{ required }" class="typo-body-bold label">
       <slot />
     </label>
-    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ t('learn-more') }}</UiLink>
+    <UiLink v-if="href" size="small" :href>{{ t('learn-more') }}</UiLink>
   </div>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 import { useI18n } from 'vue-i18n'
 
@@ -21,7 +18,6 @@ export type LabelAccent = 'neutral' | 'warning' | 'danger'
 const { for: htmlFor } = defineProps<{
   accent: LabelAccent
   for?: string
-  icon?: IconName
   required?: boolean
   href?: string
 }>()
@@ -33,10 +29,7 @@ const { t } = useI18n()
 .ui-label {
   display: flex;
   align-items: center;
-
-  .icon {
-    margin-right: 0.8rem;
-  }
+  justify-content: space-between;
 
   .label {
     &.required::after {
@@ -46,10 +39,6 @@ const { t } = useI18n()
     }
   }
 
-  .learn-more-link {
-    margin-left: auto;
-  }
-
   /* ACCENT VARIANTS */
 
   &.accent--neutral {

package/lib/components/ui/tag/UiTag.vue

@@ -5,12 +5,15 @@
     <slot name="icon">
       <VtsIcon :name="icon" size="medium" />
     </slot>
-    <span class="text-ellipsis"><slot /></span>
+    <span v-tooltip class="text-ellipsis">
+      <slot />
+    </span>
   </span>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 

package/lib/components/ui/tag/UiTagsList.vue

@@ -1,14 +1,24 @@
 <!-- v1 -->
 <template>
-  <div class="ui-tags-list">
+  <div class="ui-tags-list" :class="{ nowrap }">
     <slot />
   </div>
 </template>
 
+<script lang="ts" setup>
+defineProps<{
+  nowrap?: boolean
+}>()
+</script>
+
 <style lang="postcss" scoped>
 .ui-tags-list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
 }
+
+.nowrap {
+  flex-wrap: nowrap;
+}
 </style>

package/lib/components/ui/text-area/UiTextarea.vue

@@ -1,7 +1,7 @@
 <!-- v2 -->
 <template>
   <div class="ui-textarea" :class="toVariants({ accent: hasMaxCharactersError ? 'danger' : accent })">
-    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href :for="id">
+    <UiLabel v-if="slots.default" :accent="labelAccent" :required :href :for="id">
       <slot />
     </UiLabel>
     <textarea v-bind="attrs" :id ref="textarea" v-model="model" :disabled class="textarea" />
@@ -19,7 +19,6 @@
 import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
-import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
@@ -39,7 +38,6 @@ const {
   maxCharacters?: number
   disabled?: boolean
   href?: string
-  icon?: IconName
   required?: boolean
 }>()
 

package/lib/i18n.ts

@@ -57,6 +57,10 @@ export const locales: Locales = {
     code: 'pt_BR',
     name: 'Português (Brasil)',
   },
+  da: {
+    code: 'da',
+    name: 'Danish',
+  },
 }
 
 export default createI18n({

package/lib/icons/fa-icons.ts

@@ -65,6 +65,7 @@ import {
   faFloppyDisk,
   faFont,
   faGear,
+  faHardDrive,
   faHashtag,
   faHeadset,
   faInfo,
@@ -88,6 +89,7 @@ import {
   faPlug,
   faPlus,
   faPowerOff,
+  faPuzzlePiece,
   faRemove,
   faRepeat,
   faRotateLeft,
@@ -174,6 +176,7 @@ export const faIcons = defineIconPack({
   'folder-open': { icon: faFolderOpen },
   font: { icon: faFont },
   gear: { icon: faGear },
+  'hard-drive': { icon: faHardDrive },
   hashtag: { icon: faHashtag },
   headset: { icon: faHeadset },
   info: { icon: faInfo },
@@ -210,6 +213,7 @@ export const faIcons = defineIconPack({
   star: { icon: faStar },
   stop: { icon: faStop },
   tags: { icon: faTags },
+  template: { icon: faPuzzlePiece },
   time: { icon: faClock },
   'thumb-tack': { icon: faThumbTack },
   'thumb-tack-slash': { icon: faThumbTackSlash },

package/lib/icons/legacy-icons.ts

@@ -44,10 +44,17 @@ export const legacyIcons = defineIconPack({
       icon: accent === 'success' ? faCheck : faExclamation,
     },
   ]),
-  halted: {
-    icon: faStop,
-    color: 'var(--color-danger-item-base)',
-  },
+  halted: [
+    {
+      icon: faCircle,
+      color: 'var(--color-danger-item-base)',
+    },
+    {
+      icon: faStop,
+      color: 'var(--color-danger-txt-item)',
+      size: 8,
+    },
+  ],
   info: {
     icon: faCircleInfo,
     color: 'var(--color-info-item-base)',
@@ -68,10 +75,17 @@ export const legacyIcons = defineIconPack({
       size: 8,
     },
   ],
-  running: {
-    icon: faPlay,
-    color: 'var(--color-success-item-base)',
-  },
+  running: [
+    {
+      icon: faCircle,
+      color: 'var(--color-success-item-base)',
+    },
+    {
+      icon: faPlay,
+      color: 'var(--color-success-txt-item)',
+      size: 8,
+    },
+  ],
   status: defineIcon([['info', 'success', 'warning', 'danger', 'muted']], accent => [
     {
       icon: faCircle,
@@ -87,4 +101,15 @@ export const legacyIcons = defineIconPack({
     icon: faMoon,
     color: 'var(--color-info-item-base)',
   },
+  checked: [
+    {
+      icon: faCircle,
+      color: 'var(--color-success-item-base)',
+    },
+    {
+      icon: faCheck,
+      color: 'var(--color-success-txt-item)',
+      size: 8,
+    },
+  ],
 })

package/lib/locales/cs.json

@@ -34,6 +34,7 @@
   "api-info-details": "Podrobnosti o informaci z API",
   "api-warning-details": "Podrobnosti o varování z API",
   "appearance": "Vzhled",
+  "aria.breadcrumb.label": "Drobečková navigace",
   "ascending": "vzestupně",
   "auto-generated": "Automaticky vytvořeno",
   "auto-power": "Automatické zapínání",
@@ -50,12 +51,12 @@
   "backup-repositories": "Repozitáře zálohy",
   "backup-repository": "Repozitář pro zálohy (místní, NFS, SMB)",
   "backup-targets": "Cíle zálohování",
-  "backup.continuous-replication": "Průběžná replikace",
-  "backup.disaster-recovery": "Obnova po havárii",
   "backup.full": "Plná záloha",
+  "backup.full-replication": "Úplná replikace",
   "backup.incremental": "Přírůstková záloha",
-  "backup.metadata": "Záloha metadat",
-  "backup.mirror": "Zrcadlení zálohy",
+  "backup.incremental-replication": "Přírůstková replikace",
+  "backup.mirror.full": "Zrcadlová úplná záloha",
+  "backup.mirror.incremental": "Zrcadlová přírůstková záloha",
   "backup.pool-metadata": "Metadata fondu",
   "backup.rolling-snapshot": "Průběžně zachycovaný stav",
   "backup.xo-config": "Nastavení XO",
@@ -78,7 +79,6 @@
   "bond-devices": "Zařízení svazku",
   "bond-status": "Stav svazku",
   "boot-firmware": "Firmware zavádění",
-  "boot-firmware-bios": "Šablona už obsahuje řetězec BIOS",
   "boot-firmware-uefi": "Firmware, kterým zaváděno, je UEFI",
   "boot-vm": "Nastartovat virt. stroj",
   "build-number": "Číslo sestavení",
@@ -293,6 +293,8 @@
   "ip-addresses": "IP adresy",
   "ip-mode": "Režim IP",
   "ip-port-placeholder": "adresa[:port]",
+  "ipv4": "IPv4 adresa | IPv4 adresy",
+  "ipv6": "IPv6 adresa | IPv6 adresy",
   "is-primary-host": "{name} je hlavní hostitel",
   "iscsi-iqn": "iSCSI IQN název",
   "iso-dvd": "ISO/DVD",
@@ -367,6 +369,7 @@
   "manage-citrix-pv-drivers-via-windows-update": "Spravovat citrix PV ovladače prostřednictvím Windows Update",
   "management": "Správa",
   "management-agent-version": "Verze agenta pro správu",
+  "management-ip": "IP adresa správy",
   "manufacturer-info": "Informace o výrobci",
   "master": "Hlavní hostitel",
   "maximum-cpu-limit": "Limit procesoru nejvýše",
@@ -383,7 +386,7 @@
   "minimum-dynamic-memory": "Dynamicky přidělované paměti nejméně",
   "minimum-static-memory": "Staticky přidělené paměti nejméně",
   "missing-patches": "Chybějící záplaty",
-  "mode": "Režim",
+  "mode": "Režim | Režimy",
   "more-actions": "Další akce",
   "mtu": "MTU",
   "multi-creation": "Vícenásobné vytvoření",
@@ -427,6 +430,7 @@
   "no-config": "Žádné nastavení",
   "no-data": "Žádné údaje",
   "no-data-to-calculate": "Žádná data k výpočtu",
+  "no-hosts-detected": "Nezjištěni žádní hostitelé.",
   "no-network-detected": "Nezjištěna žádná síť",
   "no-pif-detected": "Nezjištěno žádné fyz. rozhraní",
   "no-pools-detected": "Nezjištěny žádné fondy",
@@ -573,6 +577,7 @@
   "snapshot": "Zachytit stav",
   "snapshot-mode": "Režim zachyceného stavu",
   "sockets-with-cores-per-socket": "{nSockets} patic × {nCores} jader/patici",
+  "software": "Software",
   "software-tooling": "Software a nástroje",
   "sort-by": "Seřadit podle",
   "source-backup-repository": "Zdrojový repozitář záloh",
@@ -627,6 +632,7 @@
   "tasks.quick-view.failed": "Nezdařilo se",
   "tasks.quick-view.in-progress": "Probíhá",
   "template": "Šablona",
+  "template-has-bios-strings": "Šablona už obsahuje řetězec BIOS",
   "theme-auto": "Automaticky",
   "theme-dark": "Tmavý",
   "theme-light": "Světlý",