@xen-orchestra/web-core 0.55.0 → 0.57.0

package/lib/components/tree/VtsTreeList.vue

@@ -6,12 +6,15 @@
 
 <script lang="ts" setup>
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import { inject, provide } from 'vue'
+import { computed, inject, provide, ref } from 'vue'
 
 defineSlots<{
   default(): any
 }>()
 
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
-provide(IK_TREE_LIST_DEPTH, depth + 1)
+const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
+provide(
+  IK_TREE_LIST_DEPTH,
+  computed(() => depth.value + 1)
+)
 </script>

package/lib/components/tree/VtsTreeLoadingItem.vue

@@ -3,7 +3,7 @@
     <div class="label-placeholder">
       <div class="link-placeholder">
         <template v-if="depth > 1">
-          <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
+          <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" />
         </template>
         <VtsIcon :name="icon" size="medium" />
         <div class="loader">&nbsp;</div>
@@ -17,13 +17,13 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 import type { IconName } from '@core/icons'
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 defineProps<{
   icon: IconName
 }>()
 
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
+const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -3,7 +3,7 @@
   <div class="ui-head-bar">
     <div class="label-wrapper">
       <slot name="icon">
-        <VtsIcon :name="icon" size="medium" />
+        <VtsIcon :name="icon" size="large" />
       </slot>
       <h4 v-tooltip class="typo-h4 label text-ellipsis">
         <slot />
@@ -37,7 +37,7 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .ui-head-bar {
-  min-height: 5.6rem;
+  min-height: 6rem;
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 1.6rem;

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

@@ -1,6 +1,11 @@
-<!-- v5 -->
+<!-- v9 -->
 <template>
-  <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
+  <div :class="toVariants({ accent, disabled, selected })" class="ui-input" @click.self="focus()">
+    <span v-if="slots.prefix || prefix" class="prefix">
+      <slot name="prefix">
+        {{ prefix }}
+      </slot>
+    </span>
     <span v-if="readonly" class="typo-body-regular input text-ellipsis">
       <input ref="inputRef" class="readonly-input" readonly type="text" />
       {{ modelValue }}
@@ -19,14 +24,19 @@
     />
     <UiButtonIcon
       v-if="!disabled && modelValue && clearable"
-      icon="fa:xmark"
-      accent="brand"
       size="small"
+      icon="action:close-cancel-clear"
+      accent="brand"
       @click="clear()"
     />
     <slot v-if="slots['right-icon'] || rightIcon" name="right-icon">
       <VtsIcon :name="rightIcon" size="medium" class="right-icon" />
     </slot>
+    <span v-if="slots.suffix || suffix" class="suffix">
+      <slot name="suffix">
+        {{ suffix }}
+      </slot>
+    </span>
   </div>
 </template>
 
@@ -52,16 +62,20 @@ const {
   required,
   disabled,
   id,
+  detached,
 } = defineProps<{
   accent: InputAccent
   id?: string
   required?: boolean
   disabled?: boolean
+  selected?: boolean
   readonly?: boolean
+  detached?: boolean
   type?: InputType
-  icon?: IconName
   rightIcon?: IconName
   clearable?: boolean
+  prefix?: string
+  suffix?: string
 }>()
 
 const emit = defineEmits<{
@@ -72,6 +86,8 @@ const modelValue = defineModel<string | number | undefined>({ required: true })
 
 const slots = defineSlots<{
   'right-icon'?(): any
+  prefix?(): any
+  suffix?(): any
 }>()
 
 function handleInput(event: Event) {
@@ -82,7 +98,7 @@ const attrs = useAttrs()
 
 const inputRef = ref<HTMLInputElement>()
 
-const wrapperController = inject(IK_INPUT_WRAPPER_CONTROLLER, undefined)
+const wrapperController = detached ? undefined : inject(IK_INPUT_WRAPPER_CONTROLLER, undefined)
 
 const accent = useMapper<LabelAccent, InputAccent>(
   () => wrapperController?.labelAccent,
@@ -133,6 +149,31 @@ defineExpose({ focus })
     color: var(--color-brand-txt-base);
   }
 
+  .prefix,
+  .suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    background-color: var(--color-neutral-background-secondary);
+    padding: 0.8rem 1.6rem;
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .prefix {
+    border-end-start-radius: 0.4rem;
+    border-start-start-radius: 0.4rem;
+    border-inline-end: 0.1rem solid var(--color-neutral-border);
+    margin-inline-start: -1.6rem;
+  }
+
+  .suffix {
+    border-end-end-radius: 0.4rem;
+    border-start-end-radius: 0.4rem;
+    border-inline-start: 0.1rem solid var(--color-neutral-border);
+    margin-inline-end: -1.6rem;
+  }
+
   &.disabled .right-icon {
     color: var(--color-neutral-txt-secondary);
   }
@@ -161,12 +202,9 @@ defineExpose({ focus })
   /* VARIANT */
 
   &.accent--brand {
+    --selected-color: var(--color-brand-item-base);
     border-color: var(--color-neutral-border);
 
-    &:focus-within {
-      border-color: var(--color-brand-item-base);
-    }
-
     &:hover {
       border-color: var(--color-brand-item-hover);
     }
@@ -182,6 +220,7 @@ defineExpose({ focus })
   }
 
   &.accent--warning {
+    --selected-color: var(--color-warning-item-base);
     border-color: var(--color-warning-item-base);
 
     &:hover {
@@ -199,6 +238,7 @@ defineExpose({ focus })
   }
 
   &.accent--danger {
+    --selected-color: var(--color-danger-item-base);
     border-color: var(--color-danger-item-base);
 
     &:hover {
@@ -214,5 +254,11 @@ defineExpose({ focus })
       background-color: var(--color-neutral-background-disabled);
     }
   }
+
+  &:focus-within,
+  &.selected {
+    border-color: var(--selected-color);
+    border-width: 0.2rem;
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <!-- v6 -->
 <template>
   <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
-    <VtsIcon :name="icon" size="medium" />
+    <VtsIcon :name="icon" :busy :busy-tooltip size="medium" />
     <slot />
     <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" />
@@ -19,6 +19,8 @@ const props = defineProps<
   LinkOptions & {
     size: 'small' | 'medium'
     icon?: IconName
+    busy?: boolean
+    busyTooltip?: string
     isPrimary?: boolean
     primaryTooltip?: string
   }

package/lib/components/ui/panel/UiPanel.vue

@@ -1,6 +1,6 @@
-<!-- v2 -->
+<!-- v5 -->
 <template>
-  <div class="ui-panel" :class="{ error, 'mobile-drawer': uiStore.isSmall }">
+  <div class="ui-panel" :class="{ error }">
     <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>
@@ -11,8 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { useUiStore } from '@core/stores/ui.store'
-
 defineProps<{
   error?: boolean
 }>()
@@ -21,31 +19,25 @@ const slots = defineSlots<{
   default(): any
   header?(): any
 }>()
-
-const uiStore = useUiStore()
 </script>
 
 <style scoped lang="postcss">
 .ui-panel {
-  position: sticky;
-  top: 0;
   display: flex;
   flex-direction: column;
   border-inline-start: 0.1rem solid var(--color-neutral-border);
+  border-block-end: 0.1rem solid var(--color-neutral-border);
+  border-end-start-radius: 0.8rem;
   background-color: var(--color-neutral-background-secondary);
 
-  &:not(.mobile-drawer) {
-    min-height: calc(100dvh - 16rem);
-  }
-
   .header {
+    flex-shrink: 0;
+    padding: 0.4rem 1.6rem;
     border-bottom: 0.1rem solid var(--color-neutral-border);
     background-color: var(--color-neutral-background-primary);
     display: flex;
-    justify-content: flex-end;
     align-items: center;
     gap: 1.6rem;
-    padding: 0.4rem 1.6rem;
   }
 
   .content {
@@ -53,20 +45,11 @@ const uiStore = useUiStore()
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
-  }
-
-  &.mobile-drawer {
-    .content {
-      overflow: auto;
-    }
+    scrollbar-width: thin;
   }
 
   &.error {
     background-color: var(--color-danger-background-selected);
-
-    .content {
-      padding-top: 15rem;
-    }
   }
 }
 </style>

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

@@ -10,24 +10,12 @@
       type="text"
       accent="brand"
       :aria-label="uiStore.isSmall ? t('query-search-bar:label') : undefined"
-      :icon="!uiStore.isSmall ? 'fa:magnifying-glass' : undefined"
       :placeholder="t('query-search-bar:placeholder')"
     />
     <template v-if="!uiStore.isSmall">
-      <UiButton size="medium" accent="brand" variant="primary" type="submit" class="action-button">
+      <UiButton size="medium" accent="brand" variant="secondary" type="submit" class="action-button">
         {{ t('action:search') }}
       </UiButton>
-      <VtsDivider type="stretch" />
-      <UiButton
-        v-tooltip="t('coming-soon!')"
-        size="medium"
-        accent="brand"
-        variant="secondary"
-        disabled
-        class="action-button"
-      >
-        {{ t('query-search-bar:use-query-builder') }}
-      </UiButton>
     </template>
 
     <!-- Mobile icons: search + filter -->
@@ -39,11 +27,9 @@
 </template>
 
 <script lang="ts" setup>
-import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiInput from '@core/components/ui/input/UiInput.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
 import { ref } from 'vue'

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -34,7 +34,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiTag from '@core/components/ui/tag/UiTag.vue'
-import type { Task } from '@core/types/task.type.ts'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue

@@ -15,8 +15,8 @@
 <script lang="ts" setup>
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import VtsQuickTaskTabBar, { type TaskTab } from '@core/components/task/VtsQuickTaskTabBar.vue'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import type { Task } from '@core/types/task.type.ts'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{

package/lib/components/ui/task-item/UiTaskItem.vue

@@ -21,10 +21,13 @@
       </div>
 
       <div class="main-content">
-        <div v-if="task.name" class="content-left">
-          <UiLink size="medium">
-            {{ task.name }}
-          </UiLink>
+        <div v-if="task.nameParts || task.name" class="content-left">
+          <template v-if="task.nameParts">
+            <template v-for="(part, index) in task.nameParts" :key="index">
+              <UiLink size="medium" :to="part.to">{{ part.text }}</UiLink>
+            </template>
+          </template>
+          <UiLink v-else size="small">{{ task.name }}</UiLink>
           <div v-if="shouldShowInfos || hasSubTasks" class="infos">
             <UiCounter v-if="hasSubTasks" :value="subTasksCount" accent="brand" variant="secondary" size="small" />
             <UiInfo v-if="hasInfos" accent="info" />
@@ -41,7 +44,7 @@
             <UiCircleProgressBar :accent="progressAccent" size="small" :value="progress" />
           </div>
           <div class="actions">
-            <UiButtonIcon icon="fa:eye" size="medium" accent="brand" @click="emit('select', task.id)" />
+            <UiButtonIcon icon="fa:eye" size="small" accent="brand" @click="emit('select', task.id)" />
           </div>
         </div>
       </div>
@@ -61,6 +64,7 @@ import UiLink from '@core/components/ui/link/UiLink.vue'
 import UiTaskList from '@core/components/ui/task-list/UiTaskList.vue'
 import { useTimeAgo } from '@core/composables/locale-time-ago.composable.ts'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { TaskObjectSegment, TaskStatus } from '@core/types/task.type.ts'
 import { logicOr } from '@vueuse/math'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -69,9 +73,13 @@ export type Task = {
   id: string
   infos?: { data: unknown; message: string }[]
   name?: string
+  nameParts?: TaskObjectSegment[]
   progress?: number
+  tag?: string
+  userName?: string
+  start?: number
   end?: number
-  status: 'failure' | 'interrupted' | 'pending' | 'success'
+  status: TaskStatus
   subtasks?: Task[]
   warnings?: { data: unknown; message: string }[]
 }

package/lib/components/ui/task-list/UiTaskList.vue

@@ -16,8 +16,8 @@
 
 <script lang="ts" setup>
 import UiTaskItem from '@core/components/ui/task-item/UiTaskItem.vue'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { useCollection } from '@core/packages/collection'
-import type { Task } from '@core/types/task.type.ts'
 
 const { tasks, depth = 0 } = defineProps<{
   tasks: Task[]

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

@@ -1,16 +1,19 @@
-<!-- v2 -->
+<!-- v5 -->
 <template>
-  <div class="ui-textarea" :class="toVariants({ accent: hasMaxCharactersError ? 'danger' : accent })">
+  <div class="ui-textarea" :class="toVariants({ accent: isExceedingMaxCharacters ? 'danger' : accent })">
     <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" />
     <UiCharacterLimit v-if="maxCharacters" :count="model.trim().length" :max="maxCharacters" />
+    <UiInfo v-if="slots.info" accent="info">
+      <slot name="info" />
+    </UiInfo>
     <UiInfo v-if="isExceedingMaxCharacters" accent="danger">
       {{ t('field:exceeds-max-characters', { max: maxCharacters }) }}
     </UiInfo>
-    <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
-      <slot name="info" />
+    <UiInfo v-if="slots.message && labelAccent !== 'neutral'" :accent="labelAccent">
+      <slot name="message" />
     </UiInfo>
   </div>
 </template>
@@ -46,6 +49,7 @@ const model = defineModel<string>({ required: true })
 const slots = defineSlots<{
   default?(): any
   info?(): any
+  message?(): any
 }>()
 
 const { t } = useI18n()
@@ -58,16 +62,10 @@ const { focused } = useFocus(textAreaElement)
 
 // WIP: To update when using VeeValidate and custom validation rules
 const isExceedingMaxCharacters = computed(() =>
-  maxCharacters !== undefined ? model.value.trim().length > maxCharacters : false
+  maxCharacters !== undefined ? !focused.value && model.value.trim().length > maxCharacters : false
 )
 
-const hasMaxCharactersError = computed(() => !focused.value && isExceedingMaxCharacters.value)
-
 const labelAccent = computed(() => {
-  if (hasMaxCharactersError.value) {
-    return 'danger'
-  }
-
   return accent === 'brand' ? 'neutral' : accent
 })
 </script>
@@ -101,8 +99,8 @@ const labelAccent = computed(() => {
       }
 
       &:focus:not(:active) {
-        border-width: 0.2rem;
         border-color: var(--color-brand-item-base);
+        box-shadow: inset 0 0 0 0.1rem var(--color-brand-item-base);
       }
 
       &:disabled {
@@ -125,8 +123,8 @@ const labelAccent = computed(() => {
       }
 
       &:focus:not(:active) {
-        border-width: 0.2rem;
         border-color: var(--color-warning-item-base);
+        box-shadow: inset 0 0 0 0.1rem var(--color-warning-item-base);
       }
 
       &:disabled {
@@ -149,8 +147,8 @@ const labelAccent = computed(() => {
       }
 
       &:focus:not(:active) {
-        border-width: 0.2rem;
         border-color: var(--color-danger-item-base);
+        box-shadow: inset 0 0 0 0.1rem var(--color-danger-item-base);
       }
 
       &:disabled {

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -72,7 +72,7 @@ const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
 
 const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
 
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
+const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/vif-connection-toggle-modal/VtsVifConnectionToggleModal.vue

@@ -0,0 +1,43 @@
+<template>
+  <VtsModal accent="info" icon="status:info-picto" dismissible>
+    <template #title>
+      {{ connection.title }}
+    </template>
+
+    <template v-if="action === CONNECTION_ACTION.DISCONNECT" #content>
+      {{ t('vif-disconnect-info') }}
+    </template>
+
+    <template #buttons>
+      <VtsModalCancelButton>{{ t('action:go-back') }}</VtsModalCancelButton>
+      <VtsModalConfirmButton>
+        {{ connection.action }}
+      </VtsModalConfirmButton>
+    </template>
+  </VtsModal>
+</template>
+
+<script lang="ts" setup>
+import VtsModal from '@core/components/modal/VtsModal.vue'
+import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
+import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import { useMapper } from '@core/packages/mapper'
+import { CONNECTION_ACTION, type ConnectionAction } from '@core/types/connection.ts'
+import { useI18n } from 'vue-i18n'
+
+const { action, count } = defineProps<{
+  action: ConnectionAction
+  count: number
+}>()
+
+const { t } = useI18n()
+
+const connection = useMapper(
+  () => action,
+  () => ({
+    connect: { title: t('vif-connect-title', { n: count }), action: t('action:connect-n-vifs', { n: count }) },
+    disconnect: { title: t('vif-disconnect-title', { n: count }), action: t('action:disconnect-n-vifs', { n: count }) },
+  }),
+  'connect'
+)
+</script>

package/lib/composables/table/multi-select.composable.md

@@ -0,0 +1,33 @@
+# useMultiSelect composable
+
+```vue
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>
+          <input type="checkbox" v-model="areAllSelected" />
+        </th>
+        <th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="item in items">
+        <td>
+          <input type="checkbox" :value="item.id" v-model="selected" />
+        </td>
+        <td>{{ item.name }}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- You can use something else than a "Select All" checkbox -->
+  <button @click="areAllSelected = !areAllSelected">Toggle all selected</button>
+</template>
+
+<script lang="ts" setup>
+import useMultiSelect from './multi-select.composable'
+
+const { selected, areAllSelected } = useMultiSelect()
+</script>
+```

package/lib/composables/table-state.composable.ts

@@ -1,5 +1,5 @@
-import type { StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 import type { TableState } from '@core/components/table/VtsTable.vue'
+import type { StateHeroType } from '@core/types/state-hero.type.ts'
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/icons/action-icons.ts

@@ -4,9 +4,11 @@ import { faCopy, faSquare as checkboxEmpty, type IconDefinition } from '@fortawe
 import {
   faAdd,
   faArrowCircleRight,
+  faArrowDownLong,
   faArrowRight,
   faArrowRotateLeft,
   faArrowRotateRight,
+  faArrowUpLong,
   faArrowUpRightFromSquare,
   faBan,
   faBars,
@@ -146,6 +148,18 @@ export const actionIcons = defineIconPack({
     color: 'var(--color-neutral-txt-primary)',
     rotate: 90,
   },
+  'import-export': [
+    {
+      icon: faArrowUpLong,
+      color: 'var(--color-neutral-txt-primary)',
+      translate: [-5, 0],
+    },
+    {
+      icon: faArrowDownLong,
+      color: 'var(--color-neutral-txt-primary)',
+      translate: [5, 0],
+    },
+  ],
   reboot: constructIcon(faArrowRotateRight),
   'force-reboot': [
     constructIcon(faArrowRotateRight),