@xen-orchestra/web-core 0.35.1 → 0.36.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/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/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),

package/lib/composables/relative-time.composable.ts

@@ -1,66 +1,13 @@
-import type { MaybeRef } from '@vueuse/core'
-import { computed, unref } from 'vue'
+import { formatTimeAgoIntl } from '@vueuse/core'
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export default function useRelativeTime(fromDate: MaybeRef<Date>, toDate: MaybeRef<Date>) {
-  const { t } = useI18n()
-  const fromTime = computed(() => unref(fromDate).getTime())
-  const toTime = computed(() => unref(toDate).getTime())
-  const isPast = computed(() => toTime.value > fromTime.value)
-  const diff = computed(() => Math.abs(toTime.value - fromTime.value))
-
-  return computed(() => {
-    if (diff.value < 10000) {
-      return t('relative-time.now')
-    }
-
-    const years = Math.floor(diff.value / 31556952000)
-    let timeLeft = diff.value % 31556952000
-
-    const months = Math.floor(timeLeft / 2629746000)
-    timeLeft = timeLeft % 2629746000
-
-    const days = Math.floor(timeLeft / 86400000)
-    timeLeft = timeLeft % 86400000
-
-    const hours = Math.floor(timeLeft / 3600000)
-    timeLeft = timeLeft % 3600000
-
-    const minutes = Math.floor(timeLeft / 60000)
-    timeLeft = timeLeft % 60000
-    const seconds = Math.floor(timeLeft / 1000)
-
-    const parts = []
-
-    if (years > 0) {
-      parts.push(t('relative-time.year', { n: years }))
-    }
-
-    if (months > 0) {
-      const n = days >= 15 ? months + 1 : months
-      parts.push(t('relative-time.month', { n }))
-    }
-
-    if (years === 0 && months === 0) {
-      if (days > 0) {
-        parts.push(t('relative-time.day', { n: days }))
-      }
-
-      if (days <= 1 && hours > 0) {
-        parts.push(t('relative-time.hour', { n: hours }))
-      }
-
-      if (days === 0 && minutes > 0) {
-        parts.push(t('relative-time.minute', { n: minutes }))
-      }
+export function getRelativeTime(date: MaybeRefOrGetter<Date>, locale: MaybeRefOrGetter<string>) {
+  return formatTimeAgoIntl(toValue(date), { locale: toValue(locale) })
+}
 
-      if (minutes === 0 && seconds > 0) {
-        parts.push(t('relative-time.second', { n: seconds }))
-      }
-    }
+export default function useRelativeTime(date: MaybeRefOrGetter<Date>) {
+  const { locale } = useI18n()
 
-    return t(isPast.value ? 'relative-time.past' : 'relative-time.future', {
-      str: parts.join(' '),
-    })
-  })
+  return computed(() => getRelativeTime(date, locale))
 }

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

@@ -0,0 +1,56 @@
+import type { StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import type { TableState } from '@core/components/table/VtsTable.vue'
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type TableStateInput = undefined | boolean | string | TableState
+
+export function useTableState(config: {
+  busy?: MaybeRefOrGetter<TableStateInput>
+  error?: MaybeRefOrGetter<TableStateInput>
+  empty?: MaybeRefOrGetter<TableStateInput>
+}) {
+  const { t } = useI18n()
+
+  const DEFAULT_MESSAGES: { [K in StateHeroType]?: string } = {
+    'no-data': t('no-data'),
+    'no-result': t('no-result'),
+    error: t('error-no-data'),
+  }
+
+  function handleStateInput(
+    defaultType: StateHeroType,
+    inputRaw: MaybeRefOrGetter<TableStateInput>
+  ): TableState | undefined {
+    const input = toValue(inputRaw)
+
+    if (input === undefined) {
+      return undefined
+    }
+
+    if (typeof input === 'object') {
+      return { message: DEFAULT_MESSAGES[input.type], ...input }
+    }
+
+    if (typeof input === 'string') {
+      return { type: defaultType, message: input }
+    }
+
+    if (input) {
+      return {
+        type: defaultType,
+        message: DEFAULT_MESSAGES[defaultType],
+      }
+    }
+
+    return undefined
+  }
+
+  return computed(() => {
+    return (
+      handleStateInput('busy', config.busy) ??
+      handleStateInput('error', config.error) ??
+      handleStateInput('no-data', config.empty)
+    )
+  })
+}

package/lib/composables/tree-filter.composable.ts

@@ -1,4 +1,4 @@
-import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import type { TreeNodeBase } from '@core/packages/tree/tree-node-base'
 import { refDebounced } from '@vueuse/shared'
 import { computed, ref } from 'vue'
 
@@ -12,5 +12,5 @@ export function useTreeFilter() {
   const predicate = (node: TreeNodeBase) =>
     hasFilter.value ? node.label.toLocaleLowerCase().includes(debouncedFilter.value.toLocaleLowerCase()) : undefined
 
-  return { filter, predicate, isSearching }
+  return { filter, predicate, isSearching, hasFilter }
 }

package/lib/icons/fa-icons.ts

@@ -58,6 +58,7 @@ import {
   faExclamation,
   faExclamationCircle,
   faExternalLink,
+  faEye,
   faEyeSlash,
   faFileCsv,
   faFileExport,
@@ -166,6 +167,7 @@ export const faIcons = defineIconPack({
   exclamation: { icon: faExclamation },
   'exclamation-circle': { icon: faExclamationCircle },
   'external-link': { icon: faExternalLink },
+  eye: { icon: faEye },
   'eye-slash': { icon: faEyeSlash },
   file: { icon: faFile },
   'file-csv': { icon: faFileCsv },

package/lib/icons/object-icons.ts

@@ -198,7 +198,7 @@ export const objectIcons = defineIconPack({
     },
     { icon: getStatusIcon(state) },
   ]),
-  network: defineIcon([['connected', 'disconnected']], state => [
+  network: defineIcon([['connected', 'partially-connected', 'disconnected']], state => [
     {
       icon: faNetworkWired,
       color: getMainColor(state),