@xen-orchestra/web-core 0.51.0 → 0.53.0

package/lib/assets/css/_reset.pcss

@@ -25,7 +25,10 @@ h5,
 h6,
 p,
 ol,
-ul {
+ul,
+dl,
+dt,
+dd {
   margin: 0;
   padding: 0;
   font-weight: inherit;
@@ -36,6 +39,10 @@ ul {
   list-style: none;
 }
 
+dd {
+  margin-inline-start: 0;
+}
+
 img {
   max-width: 100%;
   height: auto;

package/lib/components/column/VtsColumn.vue

@@ -13,9 +13,13 @@ defineSlots<{
 <style lang="postcss" scoped>
 .vts-column {
   flex: 1;
-  flex-basis: 0;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
+  min-width: 0;
+
+  @container vts-columns (max-width: 90rem) {
+    flex-basis: 100%;
+  }
 }
 </style>

package/lib/components/columns/VtsColumns.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="vts-columns" :class="{ mobile: uiStore.isSmall }">
+  <div class="vts-columns" :class="{ 'extra-space-around': extraSpaceAround }">
     <component :is="nodes[index - 1] ?? VtsColumn" v-for="index of columns" :key="index" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsColumn from '@core/components/column/VtsColumn.vue'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 
 const { columns: _columns = 2 } = defineProps<{
   columns?: number
+  extraSpaceAround?: boolean
 }>()
 
 const slots = defineSlots<{
@@ -20,19 +20,28 @@ const slots = defineSlots<{
 const nodes = computed(() => slots.default())
 
 const columns = computed(() => Math.max(_columns, nodes.value.length))
-
-const uiStore = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
 .vts-columns {
+  container-type: inline-size;
+  container-name: vts-columns;
   display: flex;
+  flex-wrap: wrap;
   gap: 0.8rem;
-  padding: 0.8rem;
-  flex-direction: row;
 
-  &.mobile {
-    flex-direction: column;
+  &.extra-space-around {
+    margin: 0.8rem;
+  }
+
+  & > * {
+    flex: 1 0 0;
+  }
+
+  @container vts-columns (max-width: 60rem) {
+    & > * {
+      flex-basis: 100%;
+    }
   }
 }
 </style>

package/lib/components/console/VtsRemoteConsole.vue

@@ -8,14 +8,15 @@
 <script lang="ts" setup>
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import VncClient from '@novnc/novnc/lib/rfb'
+import type NoVncClient from '@novnc/novnc/lib/rfb'
+import _RFB from '@novnc/novnc/lib/rfb'
 import { whenever } from '@vueuse/core'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
-import { onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue'
+import { onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const props = defineProps<{
+const { url, isConsoleAvailable } = defineProps<{
   url: URL
   isConsoleAvailable: boolean
 }>()
@@ -30,23 +31,24 @@ const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_
 const consoleContainer = useTemplateRef<HTMLDivElement | null>('console-container')
 const isReady = ref(false)
 
-let vncClient: VncClient | undefined
+// See https://rolldown.rs/in-depth/bundling-cjs#ambiguous-default-import-from-cjs-modules
+const VncClient = typeof _RFB === 'object' && _RFB !== null && (_RFB as any).__esModule ? (_RFB as any).default : _RFB
+
+let vncClient: NoVncClient | undefined
 let nConnectionAttempts = 0
 
 function handleDisconnectionEvent() {
   clearVncClient()
-  if (props.isConsoleAvailable) {
+  if (isConsoleAvailable) {
     nConnectionAttempts++
 
     if (nConnectionAttempts > N_TOTAL_TRIES) {
-      console.error('The number of reconnection attempts has been exceeded for:', props.url)
+      console.error('The number of reconnection attempts has been exceeded for:', url)
       return
     }
 
     console.error(
-      `Connection lost for the remote console: ${props.url}. New attempt in ${
-        FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
-      }ms`
+      `Connection lost for the remote console: ${url}. New attempt in ${FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]}ms`
     )
     createVncConnection()
   }
@@ -80,9 +82,9 @@ async function createVncConnection() {
     }
   }
 
-  vncClient = new VncClient(consoleContainer.value!, props.url.toString(), {
+  vncClient = new VncClient(consoleContainer.value!, url.toString(), {
     wsProtocols: ['binary'],
-  })
+  }) as NoVncClient
   vncClient.scaleViewport = true
   vncClient.background = 'transparent'
 
@@ -114,16 +116,20 @@ whenever(
   }
 )
 
-watchEffect(() => {
-  if (consoleContainer.value === null || !props.isConsoleAvailable) {
-    return
-  }
+watch(
+  [consoleContainer, () => isConsoleAvailable, () => url.toString()],
+  ([container, isAvailable]) => {
+    if (container === null || !isAvailable) {
+      return
+    }
 
-  nConnectionAttempts = 0
+    nConnectionAttempts = 0
 
-  clearVncClient()
-  createVncConnection()
-})
+    clearVncClient()
+    createVncConnection()
+  },
+  { immediate: true }
+)
 
 onBeforeUnmount(() => {
   clearVncClient()

package/lib/components/form/VtsForm.vue

@@ -0,0 +1,15 @@
+<template>
+  <form novalidate @submit.prevent="emit('submit')">
+    <slot />
+  </form>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits<{
+  submit: []
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+</script>

package/lib/components/{quick-info-column/VtsQuickInfoColumn.vue → key-value-list/VtsKeyValueList.vue}

@@ -1,11 +1,11 @@
 <template>
-  <div class="vts-quick-info-column">
+  <dl class="vts-key-value-list">
     <slot />
-  </div>
+  </dl>
 </template>
 
 <style lang="postcss" scoped>
-.vts-quick-info-column {
+.vts-key-value-list {
   display: flex;
   flex-direction: column;
   gap: 1.6rem;

package/lib/components/key-value-pair/VtsKeyValuePair.vue

@@ -0,0 +1,48 @@
+<template>
+  <dt class="typo-body-regular label">
+    <slot name="label">
+      {{ label }}
+    </slot>
+  </dt>
+  <dd class="typo-body-regular value">
+    <span v-tooltip class="text-ellipsis">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </span>
+  </dd>
+</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>
+.label {
+  color: var(--color-neutral-txt-secondary);
+}
+
+.value {
+  color: var(--color-neutral-txt-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
+
+  .text-ellipsis {
+    &:empty::before {
+      content: '-';
+    }
+  }
+}
+</style>

package/lib/components/key-value-row/VtsKeyValueRow.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="vts-key-value-row" :class="{ mobile: uiStore.isSmallOrMedium }">
+    <VtsKeyValuePair :label :value>
+      <template v-if="slots.label" #label>
+        <slot name="label" />
+      </template>
+      <template v-if="slots.value" #value>
+        <slot name="value" />
+      </template>
+    </VtsKeyValuePair>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsKeyValuePair from '@core/components/key-value-pair/VtsKeyValuePair.vue'
+import { useUiStore } from '@core/stores/ui.store.ts'
+
+defineProps<{
+  label?: string
+  value?: string
+}>()
+
+const slots = defineSlots<{
+  label?(): any
+  value?(): any
+}>()
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-key-value-row {
+  display: flex;
+  gap: 2.4rem;
+
+  &.mobile {
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  :deep(dt) {
+    flex-shrink: 0;
+  }
+}
+</style>

package/lib/components/status/VtsStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiInfo v-tooltip="iconOnly ? currentStatus.text : false" class="vts-status" :accent="currentStatus.accent">
+  <UiInfo v-tooltip="iconOnly ? currentStatus.text : false" :accent="currentStatus.accent">
     <template v-if="!iconOnly">{{ currentStatus.text }}</template>
   </UiInfo>
 </template>
@@ -62,9 +62,3 @@ const currentStatus = useMapper<Status, { text: string; accent: InfoAccent }>(
   false
 )
 </script>
-
-<style lang="postcss" scoped>
-.vts-status {
-  align-items: center;
-}
-</style>

package/lib/components/table/cells/VtsTagCell.vue

@@ -1,16 +1,14 @@
 <template>
   <UiTableCell>
     <UiTagsList>
-      <UiTag v-for="tagItem of tags" :key="tagItem" accent="info" variant="secondary">
-        {{ tagItem }}
-      </UiTag>
+      <VtsTag v-for="tagItem of tags" :key="tagItem" :value="tagItem" />
     </UiTagsList>
   </UiTableCell>
 </template>
 
 <script setup lang="ts">
+import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
-import UiTag from '@core/components/ui/tag/UiTag.vue'
 import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
 import type { MaybeArray } from '@core/types/utility.type'
 import { toArray } from '@core/utils/to-array.utils'

package/lib/components/tabular-key-value-list/VtsTabularKeyValueList.vue

@@ -0,0 +1,29 @@
+<template>
+  <dl class="vts-tabular-key-value-list" :class="{ 'full-height': fullHeight }">
+    <slot />
+  </dl>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  fullHeight?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-tabular-key-value-list {
+  container-type: inline-size;
+  container-name: vts-tabular-key-value-list;
+  display: grid;
+  grid-template-columns: minmax(min-content, 20rem) 1fr;
+  row-gap: 1.6rem;
+  column-gap: 2.4rem;
+  align-items: start;
+  align-self: flex-start;
+  width: 100%;
+
+  &.full-height {
+    height: 100%;
+  }
+}
+</style>

package/lib/components/tabular-key-value-row/VtsTabularKeyValueRow.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="vts-tabular-key-value-row">
+    <VtsKeyValuePair :label :value>
+      <template v-if="slots.label" #label>
+        <slot name="label" />
+      </template>
+      <template v-if="slots.value" #value>
+        <slot name="value" />
+      </template>
+    </VtsKeyValuePair>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsKeyValuePair from '@core/components/key-value-pair/VtsKeyValuePair.vue'
+
+defineProps<{
+  label?: string
+  value?: string
+}>()
+
+const slots = defineSlots<{
+  label?(): any
+  value?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-tabular-key-value-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
+  align-items: start;
+
+  @container vts-tabular-key-value-list (max-width: 40rem) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.8rem;
+  }
+}
+</style>

package/lib/components/tag/VtsTag.vue

@@ -0,0 +1,30 @@
+<template>
+  <UiTertiaryTag v-if="parsedTag" :accent>
+    <template #term>{{ parsedTag.term }}</template>
+    {{ parsedTag.label }}
+  </UiTertiaryTag>
+  <UiTag v-else :accent :variant>
+    {{ value }}
+  </UiTag>
+</template>
+
+<script lang="ts" setup>
+import UiTag, { type TagAccent } from '@core/components/ui/tag/UiTag.vue'
+import UiTertiaryTag from '@core/components/ui/tag/UiTertiaryTag.vue'
+import { parseTag } from '@core/utils/parse-tag.util'
+import { computed } from 'vue'
+
+type TagVariant = 'primary' | 'secondary'
+
+const {
+  value,
+  accent = 'info',
+  variant = 'secondary',
+} = defineProps<{
+  value: string
+  accent?: TagAccent
+  variant?: TagVariant
+}>()
+
+const parsedTag = computed(() => parseTag(value))
+</script>

package/lib/components/ui/chip/UiChip.vue

@@ -1,31 +1,28 @@
-<!-- v4 -->
+<!-- v8 -->
 <template>
-  <span :class="classNames" class="ui-chip typo-body-regular-small" @click="emit('edit')">
-    <ChipIcon :disabled :icon />
-    <span class="content text-ellipsis">
+  <span :class="classNames" class="ui-chip typo-body-regular-small">
+    <span class="text-ellipsis">
       <slot />
     </span>
-    <ChipRemoveIcon v-if="!disabled" :accent @click.stop="emit('remove')" />
+    <button v-if="!disabled" class="icon" type="button" @click.stop="emit('remove')">
+      <VtsIcon name="action:close-cancel-clear" size="medium" />
+    </button>
   </span>
 </template>
 
 <script lang="ts" setup>
-import ChipIcon from '@core/components/ui/chip/ChipIcon.vue'
-import ChipRemoveIcon from '@core/components/ui/chip/ChipRemoveIcon.vue'
-import type { IconName } from '@core/icons'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
 
 export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const { accent, disabled } = defineProps<{
   accent: ChipAccent
-  icon?: IconName
   disabled?: boolean
 }>()
 
 const emit = defineEmits<{
-  edit: []
   remove: []
 }>()
 
@@ -36,8 +33,8 @@ defineSlots<{
 const classNames = computed(() => {
   return [
     toVariants({
-      accent: props.accent,
-      muted: props.disabled,
+      accent,
+      muted: disabled,
     }),
   ]
 })
@@ -45,37 +42,51 @@ const classNames = computed(() => {
 
 <style lang="postcss" scoped>
 .ui-chip {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.8rem;
-  padding: 0.4rem 0.8rem;
+  gap: 0.4rem;
+  padding: 0.4rem 1.2rem;
   border-radius: 10rem;
   color: var(--color-neutral-txt-primary);
-  cursor: pointer;
   min-height: 2.4rem;
   vertical-align: middle;
   white-space: nowrap;
-  min-width: 0;
 
   &.muted {
     color: var(--color-neutral-txt-secondary);
     pointer-events: none;
   }
 
-  .content {
-    line-height: 1.6rem;
+  .icon {
+    border-radius: 0 10rem 10rem 0;
+    padding: 0.4rem;
+    margin: -0.4rem -1.2rem -0.4rem 0;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
   }
 
+  .icon:focus-visible {
+    outline: 0.2rem solid var(--color-brand-txt-base);
+    outline-offset: 0.2rem;
+  }
   /* COLOR VARIANTS */
-
   &.accent--info {
     background-color: var(--color-info-background-selected);
 
-    &:is(:hover, :focus-visible) {
+    .icon {
+      color: var(--color-info-txt-hover);
+    }
+
+    .icon:hover {
       background-color: var(--color-info-background-hover);
     }
 
-    &:active {
+    .icon:active {
       background-color: var(--color-info-background-active);
     }
 
@@ -87,11 +98,15 @@ const classNames = computed(() => {
   &.accent--success {
     background-color: var(--color-success-background-selected);
 
-    &:is(:hover, :focus-visible) {
+    .icon {
+      color: var(--color-success-txt-hover);
+    }
+
+    .icon:hover {
       background-color: var(--color-success-background-hover);
     }
 
-    &:active {
+    .icon:active {
       background-color: var(--color-success-background-active);
     }
 
@@ -103,11 +118,15 @@ const classNames = computed(() => {
   &.accent--warning {
     background-color: var(--color-warning-background-selected);
 
-    &:is(:hover, :focus-visible) {
+    .icon {
+      color: var(--color-warning-txt-hover);
+    }
+
+    .icon:hover {
       background-color: var(--color-warning-background-hover);
     }
 
-    &:active {
+    .icon:active {
       background-color: var(--color-warning-background-active);
     }
 
@@ -119,11 +138,15 @@ const classNames = computed(() => {
   &.accent--danger {
     background-color: var(--color-danger-background-selected);
 
-    &:is(:hover, :focus-visible) {
+    .icon {
+      color: var(--color-danger-txt-hover);
+    }
+
+    .icon:hover {
       background-color: var(--color-danger-background-hover);
     }
 
-    &:active {
+    .icon:active {
       background-color: var(--color-danger-background-active);
     }
 

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

@@ -1,8 +1,8 @@
-<!-- v4 -->
+<!-- v6 -->
 <template>
   <div class="ui-info">
-    <VtsIcon class="icon" :name="icon" size="medium" />
-    <p v-tooltip="!wrap" class="typo-body-regular-small label" :class="{ 'text-ellipsis': !wrap }">
+    <VtsIcon class="icon" :name="icon" :size />
+    <p v-tooltip="!wrap" class="label" :class="[textSize, { 'text-ellipsis': !wrap }]">
       <slot />
     </p>
   </div>
@@ -15,10 +15,12 @@ import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper'
 
 export type InfoAccent = 'info' | 'success' | 'warning' | 'danger' | 'muted'
+type Size = 'small' | 'medium'
 
-const { accent } = defineProps<{
+const { accent, size = 'medium' } = defineProps<{
   accent: InfoAccent
   wrap?: boolean
+  size?: Size
 }>()
 
 defineSlots<{
@@ -36,16 +38,25 @@ const icon = useMapper<InfoAccent, IconName>(
   },
   'muted'
 )
+
+const textSize = useMapper<Size, any>(
+  () => size,
+  {
+    small: 'typo-body-regular-small',
+    medium: 'typo-body-regular',
+  },
+  'medium'
+)
 </script>
 
 <style lang="postcss" scoped>
 .ui-info {
-  align-items: start;
+  align-items: baseline;
   display: flex;
   gap: 0.8rem;
 
   .icon {
-    font-size: 1.6rem;
+    transform: translateY(0.2ex);
   }
 
   .label:empty {