@xen-orchestra/web-core 0.56.0 → 0.57.0

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

@@ -1,7 +1,7 @@
 <template>
   <UiTableCell>
     <div class="container">
-      <VtsProgressBar :current :total noruler class="progress" />
+      <VtsProgressBar :current :total no-ruler class="progress" />
       <span>{{ n(percentage / 100, { maximumFractionDigits: 0, style: 'percent' }) }}</span>
     </div>
   </UiTableCell>

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

@@ -0,0 +1,29 @@
+<template>
+  <UiTableCell>
+    <div class="user-name">
+      <UiUserLogo size="small" />
+      <UiLink :href size="medium">
+        {{ content }}
+      </UiLink>
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import UiLink from '@core/components/ui/link/UiLink.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
+
+defineProps<{
+  content: string
+  href?: string
+}>()
+</script>
+
+<style scoped lang="postcss">
+.user-name {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -19,8 +19,8 @@
 import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Task } from '@core/types/task.type.ts'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'

package/lib/components/task/VtsQuickTaskList.vue

@@ -27,7 +27,7 @@
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import UiQuickTaskItem from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
-import type { Task } from '@core/types/task.type.ts'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { useI18n } from 'vue-i18n'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 

package/lib/components/tree/VtsTreeItem.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts" setup>
+import { useLeftSidebarStore } from '@core/packages/sidebar'
 import type { TreeNodeId } from '@core/packages/tree/types.ts'
-import { useSidebarStore } from '@core/stores/sidebar.store'
-import { useUiStore } from '@core/stores/ui.store'
-import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util.ts'
 import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vue'
 
 const props = defineProps<{
@@ -23,7 +23,7 @@ defineSlots<{
   sublist?(): any
 }>()
 
-const sidebar = useSidebarStore()
+const sidebar = useLeftSidebarStore()
 const uiStore = useUiStore()
 const hasChildrenState = ref(false)
 

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

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>
 
@@ -58,12 +68,14 @@ const {
   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<{
@@ -74,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) {
@@ -135,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);
   }
@@ -163,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);
     }
@@ -184,6 +220,7 @@ defineExpose({ focus })
   }
 
   &.accent--warning {
+    --selected-color: var(--color-warning-item-base);
     border-color: var(--color-warning-item-base);
 
     &:hover {
@@ -201,6 +238,7 @@ defineExpose({ focus })
   }
 
   &.accent--danger {
+    --selected-color: var(--color-danger-item-base);
     border-color: var(--color-danger-item-base);
 
     &:hover {
@@ -216,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/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/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>
+```