@xen-orchestra/web-core 0.35.1 → 0.37.0

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

@@ -0,0 +1,64 @@
+<template>
+  <UiTableCell>
+    <div class="content">
+      <span class="text">
+        {{ truncatedContent }}
+      </span>
+
+      <UiButton
+        v-if="shouldTruncate"
+        accent="brand"
+        size="small"
+        variant="tertiary"
+        class="typo-body-regular-small button"
+        @click="toggleExpanded()"
+      >
+        {{ isExpanded ? t('show-less') : t('show-more') }}
+      </UiButton>
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import { useToggle } from '@vueuse/shared'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { content, limit } = defineProps<{
+  content: string
+  limit?: number
+}>()
+
+const DEFAULT_TRUNCATE_LIMIT = 90
+
+const TRUNCATE_TOLERANCE = 20
+
+const { t } = useI18n()
+
+const truncateLimit = computed(() => limit ?? DEFAULT_TRUNCATE_LIMIT)
+
+const shouldTruncate = computed(() => content.length > truncateLimit.value + TRUNCATE_TOLERANCE)
+
+const [isExpanded, toggleExpanded] = useToggle(false)
+
+const truncatedContent = computed(() => {
+  if (!shouldTruncate.value || isExpanded.value) {
+    return content
+  }
+
+  return `${content.slice(0, truncateLimit.value)}…`
+})
+</script>
+
+<style lang="postcss" scoped>
+.text {
+  overflow-wrap: anywhere;
+}
+
+.button {
+  float: right;
+  margin-top: -0.25rem;
+}
+</style>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -5,7 +5,7 @@
     accent="brand"
     :dot="hasNewTask"
     icon="fa:bars-progress"
-    size="large"
+    size="medium"
     @click="isPanelOpen = true"
   />
   <Teleport v-if="isPanelOpen" to="body">

package/lib/components/tree/VtsTreeLine.vue

@@ -14,7 +14,7 @@ defineProps<{
 
 <style lang="postcss" scoped>
 .vts-tree-line {
-  flex: 0 1 1em;
+  flex: 0 1 1.5em;
   align-self: stretch;
   display: flex;
   align-items: center;

package/lib/components/ui/alert/UiAlert.vue

@@ -16,7 +16,7 @@
         class="close-button"
         icon="fa:xmark"
         accent="brand"
-        size="medium"
+        size="small"
         @click="emit('close')"
       />
     </div>

package/lib/components/ui/button/UiButton.vue

@@ -18,7 +18,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
 export type ButtonAccent = 'brand' | 'warning' | 'danger'
 export type ButtonSize = 'small' | 'medium'
 
-const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
+export type ButtonProps = {
   variant: ButtonVariant
   accent: ButtonAccent
   size: ButtonSize
@@ -26,7 +26,9 @@ const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
   disabled?: boolean
   lockIcon?: boolean
   leftIcon?: IconName
-}>()
+}
+
+const { accent, variant, size, disabled, busy, lockIcon } = defineProps<ButtonProps>()
 
 defineSlots<{
   default(): any

package/lib/components/ui/button-icon/UiButtonIcon.vue

@@ -2,7 +2,7 @@
 <!-- TODO: Add complex icon -->
 <template>
   <button :class="classNames" :disabled class="ui-button-icon" type="button">
-    <VtsIcon :name="icon" size="medium" />
+    <VtsIcon :name="icon" size="current" />
     <span v-if="dot" class="dot" />
   </button>
 </template>
@@ -13,8 +13,9 @@ import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
 
-type ButtonIconAccent = 'brand' | 'warning' | 'danger'
-type ButtonSize = 'small' | 'medium' | 'large'
+export type ButtonIconAccent = 'brand' | 'warning' | 'danger'
+
+export type ButtonIconSize = 'small' | 'medium' | 'large'
 
 const {
   accent,
@@ -24,7 +25,7 @@ const {
   targetScale = 1,
 } = defineProps<{
   icon: IconName
-  size: ButtonSize
+  size: ButtonIconSize
   accent: ButtonIconAccent
   disabled?: boolean
   selected?: boolean
@@ -191,9 +192,9 @@ const classNames = computed(() => {
 
   &.size--small {
     & {
-      width: 1.6rem;
-      height: 1.6rem;
-      font-size: 1.2rem;
+      width: 2.4rem;
+      height: 2.4rem;
+      font-size: 1.6rem;
     }
 
     .dot {
@@ -206,9 +207,9 @@ const classNames = computed(() => {
 
   &.size--medium {
     & {
-      width: 2.4rem;
-      height: 2.4rem;
-      font-size: 1.6rem;
+      width: 3.2rem;
+      height: 3.2rem;
+      font-size: 2rem;
     }
 
     .dot {
@@ -223,7 +224,7 @@ const classNames = computed(() => {
     & {
       width: 4rem;
       height: 4rem;
-      font-size: 2.4rem;
+      font-size: 3.2rem;
     }
 
     .dot {

package/lib/components/ui/column-header/UiColumnHeader.vue

@@ -0,0 +1,22 @@
+<!-- WIP -->
+<template>
+  <th class="ui-column-header typo-caption" scope="col">
+    <slot />
+  </th>
+</template>
+
+<style lang="postcss" scoped>
+.ui-column-header {
+  max-width: 30rem;
+  padding: 0.8rem 1.2rem;
+  border-block-start: 0.1rem solid var(--color-neutral-border);
+  border-inline-end: 0.1rem solid var(--color-neutral-border);
+  text-align: start;
+  color: var(--color-brand-txt-base);
+  background-color: var(--color-neutral-background-primary);
+
+  &:last-child {
+    border-inline-end: none;
+  }
+}
+</style>

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

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-info">
     <VtsIcon class="icon" :name="icon" size="medium" />
-    <p v-tooltip="!wrap" class="typo-body-regular-small" :class="{ 'text-ellipsis': !wrap }">
+    <p v-tooltip="!wrap" class="typo-body-regular-small label" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>
@@ -47,5 +47,9 @@ const icon = useMapper<InfoAccent, IconName>(
   .icon {
     font-size: 1.6rem;
   }
+
+  .label:empty {
+    display: none;
+  }
 }
 </style>

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

@@ -35,8 +35,9 @@ import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 import { toVariants } from '@core/utils/to-variants.util'
 import { inject, ref, useAttrs, watchEffect } from 'vue'
 
-type InputAccent = 'brand' | 'warning' | 'danger'
-type InputType = 'text' | 'number' | 'password' | 'search'
+export type InputAccent = 'brand' | 'warning' | 'danger'
+
+export type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
   inheritAttrs: false,

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

@@ -62,6 +62,11 @@ const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.
     cursor: not-allowed;
   }
 
+  &:not([href]) {
+    text-decoration: none;
+    cursor: default;
+  }
+
   .external-icon {
     font-size: 0.75em;
   }

package/lib/components/ui/log-entry-viewer/UiLogEntryViewer.vue

@@ -9,7 +9,7 @@
         <VtsCopyButton :value="content" />
         <UiButtonIcon
           icon="fa:arrow-up-right-from-square"
-          size="medium"
+          size="small"
           accent="brand"
           @click="openRawValueInNewTab()"
         />

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

@@ -32,8 +32,8 @@
 
     <!-- Mobile icons: search + filter -->
     <template v-else>
-      <UiButtonIcon accent="brand" size="medium" type="submit" icon="fa:magnifying-glass" class="action-button" />
-      <UiButtonIcon accent="brand" size="medium" disabled icon="fa:filter" class="action-button" />
+      <UiButtonIcon accent="brand" size="small" type="submit" icon="fa:magnifying-glass" class="action-button" />
+      <UiButtonIcon accent="brand" size="small" disabled icon="fa:filter" class="action-button" />
     </template>
   </form>
 </template>

package/lib/components/ui/table-cell/UiTableCell.vue

@@ -0,0 +1,41 @@
+<!-- WIP -->
+<template>
+  <td class="ui-table-cell typo-body-regular" :class="align">
+    <slot />
+  </td>
+</template>
+
+<script lang="ts" setup>
+export type TableCellAlign = 'start' | 'center' | 'end'
+
+const { align = 'start' } = defineProps<{
+  align?: TableCellAlign
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-table-cell {
+  padding: 1.2rem;
+  border: 0.1rem solid var(--color-neutral-border);
+  border-inline-start: none;
+  color: var(--color-neutral-txt-primary);
+  background-color: var(--ui-table-cell-background-color, var(--color-neutral-background-primary));
+  max-width: 50rem;
+
+  &:last-child {
+    border-inline-end: none;
+  }
+
+  &.start {
+    text-align: start;
+  }
+
+  &.center {
+    text-align: center;
+  }
+
+  &.end {
+    text-align: end;
+  }
+}
+</style>

package/lib/components/ui/table-pagination/PaginationButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiButtonIcon :disabled accent="brand" class="pagination-button" size="medium" :icon />
+  <UiButtonIcon :disabled accent="brand" class="pagination-button" size="small" :icon />
 </template>
 
 <script setup lang="ts">

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

@@ -0,0 +1,229 @@
+<!-- v10 -->
+<template>
+  <li class="ui-task-item" :data-depth="depth">
+    <div class="container">
+      <div class="tree-section">
+        <div class="tree-lines">
+          <div v-for="index in depth - 1" :key="index" class="tree-line">
+            <div class="tree-line-vertical" />
+          </div>
+        </div>
+        <UiButtonIcon
+          v-if="hasSubTasks"
+          v-tooltip="expanded ? t('core.close') : t('core.open')"
+          accent="brand"
+          :icon="expanded ? 'fa:angle-down' : 'fa:angle-right'"
+          size="small"
+          :target-scale="{ x: 1.5, y: 2 }"
+          @click="emit('expand')"
+        />
+        <div v-else class="h-space" />
+      </div>
+
+      <div class="main-content">
+        <div v-if="task.name" class="content-left">
+          <UiLink size="medium">
+            {{ 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" />
+            <UiInfo v-if="hasWarnings" accent="warning" />
+            <UiInfo v-if="isError" accent="danger" />
+          </div>
+        </div>
+
+        <div class="content-right typo-body-regular-small">
+          <span v-if="task.end">
+            {{ `${t('task.ended')} ${end}` }}
+          </span>
+          <div class="progress">
+            <UiCircleProgressBar
+              v-if="task.progress !== undefined"
+              :accent="progressAccent"
+              size="small"
+              :value="task.progress"
+            />
+          </div>
+          <div class="actions">
+            <UiButtonIcon icon="fa:eye" size="medium" accent="brand" @click="emit('select')" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <template v-if="hasSubTasks && expanded">
+      <UiTaskList :tasks="subTasks" :depth />
+    </template>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCircleProgressBar from '@core/components/ui/circle-progress-bar/UiCircleProgressBar.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+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 { logicOr } from '@vueuse/math'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export type Task = {
+  id: string
+  infos?: { data: unknown; message: string }[]
+  name?: string
+  progress?: number
+  end?: number
+  status: 'failure' | 'interrupted' | 'pending' | 'success'
+  tasks?: Task[]
+  warning?: { data: unknown; message: string }[]
+}
+
+const { task } = defineProps<{
+  task: Task
+  depth: number
+  expanded?: boolean
+}>()
+
+const emit = defineEmits<{
+  expand: []
+  select: []
+}>()
+
+const { t } = useI18n()
+
+const subTasks = computed(() => task.tasks ?? [])
+
+const subTasksCount = computed(() => subTasks.value.length)
+
+const hasSubTasks = computed(() => subTasksCount.value > 0)
+
+const isError = computed(() => task.status === 'failure' || task.status === 'interrupted')
+
+const end = useTimeAgo(() => task.end ?? 0)
+
+const hasWarnings = computed(() => task.warning && task.warning.length > 0)
+
+const hasInfos = computed(() => task.infos && task.infos.length > 0)
+
+const shouldShowInfos = logicOr(isError, hasWarnings, hasInfos)
+
+const progressAccent = computed(() => (isError.value ? 'danger' : 'info'))
+</script>
+
+<style lang="postcss" scoped>
+.ui-task-item {
+  &[data-depth='1']:last-child {
+    border-bottom: 0.1rem solid var(--color-neutral-border);
+  }
+
+  .container {
+    display: flex;
+    min-height: 4.8rem;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 100%;
+      position: absolute;
+      clip-path: inset(0 0 0 calc(4rem * v-bind(depth - 1)));
+      height: 0.1rem;
+      background: var(--color-neutral-border);
+    }
+
+    .tree-section {
+      display: flex;
+      align-items: center;
+      padding-left: 1.6rem;
+      gap: 0.4rem;
+
+      .tree-lines {
+        display: flex;
+        align-self: stretch;
+      }
+
+      .tree-line {
+        flex: 0 0 2.8rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .tree-line-vertical {
+          width: 0.1rem;
+          background: var(--color-brand-txt-base);
+          height: 100%;
+        }
+      }
+
+      .h-space {
+        width: 2.4rem;
+      }
+    }
+
+    .main-content {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+      min-width: 0;
+      gap: 1.6rem;
+      padding: 0.4rem 1.6rem;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .content-left {
+      display: flex;
+      gap: 1.6rem;
+      align-items: center;
+      flex-wrap: wrap;
+      color: var(--color-neutral-txt-secondary);
+      word-break: break-word;
+
+      .infos {
+        display: flex;
+        align-items: center;
+        gap: 0.8rem;
+      }
+    }
+
+    .content-right {
+      display: flex;
+      align-items: center;
+      gap: 1.6rem;
+      color: var(--color-neutral-txt-secondary);
+      flex-shrink: 0;
+
+      .progress {
+        display: flex;
+        width: 4rem;
+      }
+
+      .actions {
+        display: flex;
+        gap: 1.6rem;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      .main-content {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.8rem;
+        padding: 0.8rem;
+      }
+
+      .content-right {
+        gap: 0.8rem;
+
+        .actions {
+          gap: 0.8rem;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <ul>
+    <UiTaskItem
+      v-for="task of tasksItems"
+      :key="task.id"
+      :task="task.source"
+      :expanded="task.flags.expanded"
+      :depth="depth + 1"
+      @select="emit('select', task.id)"
+      @expand="task.toggleFlag('expanded')"
+    />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import UiTaskItem, { type Task } from '@core/components/ui/task-item/UiTaskItem.vue'
+import { useCollection } from '@core/packages/collection'
+
+const { tasks, depth = 0 } = defineProps<{
+  tasks: Task[]
+  depth?: number
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+}>()
+
+const { items: tasksItems } = useCollection(() => tasks, {
+  flags: ['expanded'],
+})
+</script>

package/lib/components/ui/toaster/UiToaster.vue

@@ -11,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" icon="fa:xmark" accent="brand" size="medium" @click="emit('close')" />
+      <UiButtonIcon class="close-icon" icon="fa:xmark" accent="brand" size="small" @click="emit('close')" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />

package/lib/components/ui/top-bottom-table/UiTopBottomTable.vue

@@ -1,7 +1,7 @@
 <!-- v2 -->
 <template>
-  <div class="ui-top-bottom-table">
-    <div class="content">
+  <div class="ui-top-bottom-table" :class="{ 'no-content': totalItems === 0 }">
+    <div v-if="totalItems > 0" class="content">
       <span class="typo-body-regular-small label">
         {{ t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
       </span>
@@ -63,5 +63,9 @@ const { t } = useI18n()
   .label {
     color: var(--color-neutral-txt-secondary);
   }
+
+  &.no-content {
+    justify-content: flex-end;
+  }
 }
 </style>

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

@@ -7,12 +7,7 @@
       v-bind="attrs"
     >
       <template v-if="depth > 1">
-        <VtsTreeLine
-          v-for="i in depth - 1"
-          :key="i"
-          :half-height="(!hasToggle && i === depth - 1) || !isExpanded"
-          :right="i === depth - 1"
-        />
+        <VtsTreeLine v-for="i in depth - 1" :key="i" />
       </template>
       <UiButtonIcon
         v-if="hasToggle"
@@ -116,7 +111,6 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 
   .h-line {
     width: 2rem;
-    border-bottom: 0.1rem solid var(--color-brand-txt-base);
     margin-left: -0.4rem;
   }
 

package/lib/composables/pagination.composable.ts

@@ -5,6 +5,21 @@ import { toComputed } from '@core/utils/to-computed.util'
 import { clamp, useLocalStorage } from '@vueuse/core'
 import { computed, type MaybeRefOrGetter } from 'vue'
 
+export type PaginationBindings = {
+  size: TablePaginationSize
+  showBy: number
+  'onUpdate:showBy': (value: number) => void
+  from: number
+  to: number
+  total: number
+  isFirstPage: boolean
+  isLastPage: boolean
+  onFirst: () => void
+  onLast: () => void
+  onNext: () => void
+  onPrevious: () => void
+}
+
 export function usePagination<T>(id: string, _records: MaybeRefOrGetter<T[]>) {
   const records = toComputed(_records)
 
@@ -65,7 +80,7 @@ export function usePagination<T>(id: string, _records: MaybeRefOrGetter<T[]>) {
 
   const uiStore = useUiStore()
 
-  const paginationBindings = computed(() => ({
+  const paginationBindings = computed<PaginationBindings>(() => ({
     size: (uiStore.isMobile ? 'small' : 'medium') as TablePaginationSize,
     showBy: showBy.value,
     'onUpdate:showBy': (value: number) => (showBy.value = value),