@xen-orchestra/web-core 0.52.0 → 0.54.0

package/lib/components/console/VtsRemoteConsole.vue

@@ -8,7 +8,8 @@
 <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'
@@ -30,7 +31,10 @@ 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() {
@@ -80,7 +84,7 @@ async function createVncConnection() {
 
   vncClient = new VncClient(consoleContainer.value!, url.toString(), {
     wsProtocols: ['binary'],
-  })
+  }) as NoVncClient
   vncClient.scaleViewport = true
   vncClient.background = 'transparent'
 

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

@@ -4,7 +4,7 @@
       <slot name="label">{{ label }}</slot>
     </UiLabel>
     <slot />
-    <UiInfo v-for="{ content, accent } of messages" :key="content" :accent>
+    <UiInfo v-for="{ content, accent } of messages" :key="content" :accent :wrap="wrapMessage">
       {{ content }}
     </UiInfo>
   </div>
@@ -33,6 +33,7 @@ const { message: _message } = defineProps<{
   label?: string
   learnMoreUrl?: string
   message?: InputWrapperMessage
+  wrapMessage?: boolean
 }>()
 
 defineSlots<{

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/VtsDoubleLinkCell.vue

@@ -1,7 +1,7 @@
 <template>
   <UiTableCell>
     <div class="vts-double-link-cell">
-      <UiLink size="medium" :icon :to :href :target class="link">
+      <UiLink size="medium" :icon :to :href :target :disabled class="link">
         <slot />
       </UiLink>
       <UiLink

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/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 {

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

@@ -133,6 +133,10 @@ defineExpose({ focus })
     color: var(--color-brand-txt-base);
   }
 
+  &.disabled .right-icon {
+    color: var(--color-neutral-txt-secondary);
+  }
+
   .readonly-input {
     border: none;
     width: 0;
@@ -171,7 +175,7 @@ defineExpose({ focus })
       border-color: var(--color-brand-item-active);
     }
 
-    &:has(input:disabled) {
+    &.disabled {
       border-color: var(--color-neutral-border);
       background-color: var(--color-neutral-background-disabled);
     }
@@ -188,7 +192,7 @@ defineExpose({ focus })
       border-color: var(--color-warning-item-active);
     }
 
-    &:has(input:disabled) {
+    &.disabled {
       border-color: var(--color-neutral-border);
       background-color: var(--color-neutral-background-disabled);
     }
@@ -205,7 +209,7 @@ defineExpose({ focus })
       border-color: var(--color-danger-item-active);
     }
 
-    &:has(input:disabled) {
+    &.disabled {
       border-color: var(--color-neutral-border);
       background-color: var(--color-neutral-background-disabled);
     }

package/lib/components/ui/link/UiLink.vue

@@ -1,15 +1,17 @@
-<!-- v3 -->
+<!-- v6 -->
 <template>
   <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
     <VtsIcon :name="icon" size="medium" />
     <slot />
-    <VtsIcon v-if="attributes.target === '_blank'" name="fa:up-right-from-square" size="medium" class="external-icon" />
+    <VtsIcon v-if="attributes.target === '_blank'" name="action:open-in-new-tab" size="medium" class="external-icon" />
+    <VtsIcon v-if="isPrimary" v-tooltip="primaryTooltip" name="status:primary-circle" size="medium" />
   </component>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconName } from '@core/icons'
 import { computed } from 'vue'
 
@@ -17,6 +19,8 @@ const props = defineProps<
   LinkOptions & {
     size: 'small' | 'medium'
     icon?: IconName
+    isPrimary?: boolean
+    primaryTooltip?: string
   }
 >()
 

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

@@ -1,34 +1,27 @@
-<!-- v3 -->
-<!-- TODO: implement tertiary variant to bump to v4 -->
+<!-- v5 -->
 <template>
-  <span :class="toVariants({ accent, variant })" class="ui-tag typo-body-regular-small">
-    <slot name="icon">
-      <VtsIcon :name="icon" size="medium" />
-    </slot>
-    <span>
-      <slot />
-    </span>
+  <span :class="className" class="ui-tag typo-body-regular-small">
+    <slot />
   </span>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
 
-type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+export type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
 type TagVariant = 'primary' | 'secondary'
 
-defineProps<{
+const { accent, variant } = defineProps<{
   accent: TagAccent
   variant: TagVariant
-  icon?: IconName
 }>()
 
 defineSlots<{
   default(): any
-  icon?(): any
 }>()
+
+const className = computed(() => toVariants({ accent, variant }))
 </script>
 
 <style lang="postcss" scoped>
@@ -39,9 +32,9 @@ defineSlots<{
   gap: 0.8rem;
   white-space: normal;
   word-break: break-word;
-  padding: 0.2rem 0.8rem;
-  border-radius: 0.4rem;
+  padding: 0.35rem 0.8rem;
   vertical-align: middle;
+  border-radius: 0.4rem;
 
   /* COLOR VARIANTS */
 

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

@@ -0,0 +1,39 @@
+<!-- v1 -->
+<template>
+  <span class="ui-tertiary-tag">
+    <UiTag :accent variant="primary" class="radius-left">
+      <slot name="term" />
+    </UiTag>
+    <UiTag :accent variant="secondary" class="radius-right">
+      <slot />
+    </UiTag>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiTag, { type TagAccent } from '@core/components/ui/tag/UiTag.vue'
+
+defineProps<{
+  accent: TagAccent
+}>()
+
+defineSlots<{
+  default(): any
+  term(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-tertiary-tag {
+  display: inline-flex;
+  flex-direction: row;
+
+  :deep(.radius-left) {
+    border-radius: 0.4rem 0 0 0.4rem;
+  }
+
+  :deep(.radius-right) {
+    border-radius: 0 0.4rem 0.4rem 0;
+  }
+}
+</style>

package/lib/icons/action-icons.ts

@@ -39,7 +39,7 @@ import {
 function constructIcon(icon: IconDefinition): IconSingleConfig {
   return {
     icon,
-    color: 'var(--color-neutral-txt-primary)',
+    color: 'currentColor',
   }
 }
 

package/lib/icons/status-icons.ts

@@ -29,7 +29,7 @@ import {
 function constructIcon(icon: IconDefinition): IconSingleConfig {
   return {
     icon,
-    color: 'var(--color-neutral-txt-primary)',
+    color: 'currentColor',
   }
 }