@xen-orchestra/web-core 0.32.0 → 0.34.0

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

@@ -88,13 +88,12 @@ const open = (event: MouseEvent) => {
 .menu-list {
   display: inline-flex;
   flex-direction: column;
-  padding: 0.4rem;
   cursor: default;
   color: var(--color-neutral-txt-primary);
   border-radius: 0.4rem;
   background-color: var(--color-neutral-background-primary);
-  gap: 0.2rem;
   z-index: 1010;
+  overflow: scroll;
 
   &.horizontal {
     flex-direction: row;

package/lib/components/menu/MenuTrigger.vue

@@ -20,17 +20,11 @@ defineProps<{
 
 <style lang="postcss" scoped>
 .menu-trigger {
-  font-size: 1.6rem;
-  font-weight: 400;
   display: flex;
   align-items: center;
-  height: 4.4rem;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  white-space: nowrap;
-  border-radius: 0.8rem;
-  gap: 1rem;
-  background-color: var(--color-neutral-background-primary);
+  padding-inline: 1.6rem;
+  gap: 0.8rem;
+  height: 4.5rem;
 
   &.disabled {
     color: var(--color-neutral-txt-secondary);
@@ -40,12 +34,12 @@ defineProps<{
     cursor: pointer;
 
     &:hover {
-      background-color: var(--color-brand-background-selected);
+      background-color: var(--color-brand-background-hover);
     }
 
     &:active,
     &.active {
-      background-color: var(--color-brand-background-hover);
+      background-color: var(--color-brand-background-active);
     }
   }
 }

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/ui/breadcrumb/UiBreadcrumb.vue

@@ -0,0 +1,79 @@
+<!-- v2 -->
+<template>
+  <nav class="ui-breadcrumb" :class="className" :aria-label="t('aria.breadcrumb.label')">
+    <ol>
+      <li v-for="child in slots.default()" :key="child.ctx.uid">
+        <component :is="child" />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { useMapper } from '@core/packages/mapper'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { size } = defineProps<{
+  size: 'small' | 'medium'
+}>()
+
+const slots = defineSlots<{
+  default(): any
+}>()
+
+const { t } = useI18n()
+
+const fontWeight = useMapper(
+  () => size,
+  {
+    small: 'typo-body-bold-small',
+    medium: 'typo-body-bold',
+  },
+  'medium'
+)
+
+const className = computed(() => [toVariants({ size }), fontWeight.value])
+</script>
+
+<style lang="postcss" scoped>
+.ui-breadcrumb {
+  ol {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    flex-wrap: wrap;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    color: var(--color-neutral-txt-primary);
+  }
+
+  li:not(:last-child)::after {
+    content: '';
+    display: inline-block;
+    margin-inline: 0.8rem 0.4rem;
+    border-inline-end: 0.2rem solid var(--color-neutral-txt-secondary);
+    border-block-start: 0.2rem solid var(--color-neutral-txt-secondary);
+    transform: rotate(45deg);
+    vertical-align: middle;
+  }
+
+  &.size--small {
+    li:not(:last-child)::after {
+      width: 0.7rem;
+      height: 0.7rem;
+    }
+  }
+
+  &.size--medium {
+    li:not(:last-child)::after {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+  }
+}
+</style>

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

@@ -1,8 +1,6 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
-    <UiLoader v-if="isSearching" />
-    <VtsIcon v-else :name="icon" size="medium" class="left-icon" />
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
@@ -31,7 +29,6 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
-import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
@@ -59,7 +56,6 @@ const {
   icon?: IconName
   rightIcon?: IconName
   clearable?: boolean
-  isSearching?: boolean
 }>()
 
 const modelValue = defineModel<string | number>({ required: true })
@@ -117,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 {
@@ -136,6 +127,10 @@ defineExpose({ focus })
     &::placeholder {
       color: var(--color-neutral-txt-secondary);
     }
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
   }
 
   /* VARIANT */

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

@@ -5,7 +5,9 @@
     <slot name="icon">
       <VtsIcon :name="icon" size="medium" />
     </slot>
-    <span class="text-ellipsis"><slot /></span>
+    <span class="text-ellipsis">
+      <slot />
+    </span>
   </span>
 </template>
 

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/icons/fa-icons.ts

@@ -1,13 +1,14 @@
 import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
 import {
   faBuilding,
+  faCopy,
   faFile,
   faFolderClosed,
   faFolderOpen,
   faSquareCheck,
-  faCopy,
 } from '@fortawesome/free-regular-svg-icons'
 import {
+  faA,
   faAlignLeft,
   faAngleDoubleLeft,
   faAngleDoubleRight,
@@ -37,6 +38,7 @@ import {
   faCircleMinus,
   faCircleNotch,
   faCirclePlay,
+  faCircleUser,
   faCircleXmark,
   faCity,
   faClock,
@@ -63,6 +65,7 @@ import {
   faFloppyDisk,
   faFont,
   faGear,
+  faHardDrive,
   faHashtag,
   faHeadset,
   faInfo,
@@ -75,6 +78,7 @@ import {
   faLockOpen,
   faMagnifyingGlass,
   faMemory,
+  faMessage,
   faMicrochip,
   faMinus,
   faMoon,
@@ -85,6 +89,7 @@ import {
   faPlug,
   faPlus,
   faPowerOff,
+  faPuzzlePiece,
   faRemove,
   faRepeat,
   faRotateLeft,
@@ -108,6 +113,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 
 export const faIcons = defineIconPack({
+  a: { icon: faA },
   'align-left': { icon: faAlignLeft },
   'angle-double-left': { icon: faAngleDoubleLeft },
   'angle-double-right': { icon: faAngleDoubleRight },
@@ -126,6 +132,7 @@ export const faIcons = defineIconPack({
   book: { icon: faBook },
   building: { icon: faBuilding },
   camera: { icon: faCamera },
+  calendar: { icon: faCalendar },
   'caret-down': { icon: faCaretDown },
   'caret-up': { icon: faCaretUp },
   check: { icon: faCheck },
@@ -137,9 +144,11 @@ export const faIcons = defineIconPack({
   'circle-minus': { icon: faCircleMinus },
   'circle-notch': { icon: faCircleNotch },
   'circle-play': { icon: faCirclePlay },
+  'circle-user': { icon: faCircleUser },
   'circle-xmark': { icon: faCircleXmark },
   city: { icon: faCity },
   close: { icon: faClose },
+  clock: { icon: faClock },
   code: { icon: faCode },
   comments: { icon: faComments },
   copy: { icon: faCopy },
@@ -167,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 },
@@ -179,6 +189,7 @@ export const faIcons = defineIconPack({
   'lock-open': { icon: faLockOpen },
   'magnifying-glass': { icon: faMagnifyingGlass },
   memory: { icon: faMemory },
+  message: { icon: faMessage },
   microchip: { icon: faMicrochip },
   minus: { icon: faMinus },
   moon: { icon: faMoon },
@@ -202,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,
+    },
+  ],
 })