@xen-orchestra/web-core 0.35.1 → 0.37.0

package/lib/components/console/VtsRemoteConsole.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
-    <VtsStateHero v-if="!isReady" format="page" busy size="medium">{{ t('loading') }}</VtsStateHero>
+    <VtsStateHero v-if="!isReady" format="page" type="busy" size="medium">{{ t('loading') }}</VtsStateHero>
     <div ref="console-container" class="console" />
   </div>
 </template>

package/lib/components/copy-button/VtsCopyButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiButtonIcon v-tooltip="copied && t('core.copied')" :icon size="medium" accent="brand" @click="copy()" />
+  <UiButtonIcon v-tooltip="copied && t('core.copied')" :icon size="small" accent="brand" @click="copy()" />
 </template>
 
 <script setup lang="ts">

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -10,7 +10,7 @@
           placement: 'right',
         }"
         accent="brand"
-        size="medium"
+        size="small"
         :icon="sidebar.isLocked ? 'fa:thumb-tack-slash' : 'fa:thumb-tack'"
         @click="sidebar.toggleLock()"
       />

package/lib/components/quick-info-card/VtsQuickInfoCard.vue

@@ -1,7 +1,7 @@
 <template>
   <UiCard class="vts-quick-info-card">
     <UiCardTitle>{{ t('quick-info') }}</UiCardTitle>
-    <VtsStateHero v-if="loading" format="card" busy size="medium" />
+    <VtsStateHero v-if="loading" format="card" type="busy" size="medium" />
     <div v-else class="info-container">
       <slot />
     </div>

package/lib/components/relative-time/VtsRelativeTime.vue

@@ -5,7 +5,6 @@
 <script lang="ts" setup>
 import useRelativeTime from '@core/composables/relative-time.composable'
 import { parseDateTime } from '@core/utils/time.util'
-import { useNow } from '@vueuse/core'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -13,6 +12,6 @@ const props = defineProps<{
 }>()
 
 const date = computed(() => new Date(parseDateTime(props.date)))
-const now = useNow({ interval: 1000 })
-const relativeTime = useRelativeTime(date, now)
+
+const relativeTime = useRelativeTime(date)
 </script>

package/lib/components/select/VtsSelect.vue

@@ -65,7 +65,7 @@ const { accent, id } = defineProps<{
 }>()
 
 defineSlots<{
-  default(props: { option: FormSelectIdToOption<TSelectId> }): any
+  default?(props: { option: FormSelectIdToOption<TSelectId> }): any
 }>()
 
 const { t } = useI18n()

package/lib/components/state-hero/VtsStateHero.vue

@@ -1,8 +1,9 @@
 <template>
   <div :class="[className, { horizontal, error, success, 'no-background': noBackground }]" class="vts-state-hero">
-    <UiLoader v-if="busy" class="loader" />
+    <UiLoader v-if="type === 'busy'" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" :alt="type" class="image" />
-    <div v-if="slots.default" :class="typoClass" class="content">
+    <div v-if="slots.default || success" :class="typoClass" class="content">
+      <div v-if="success">{{ t('all-good') }}</div>
       <slot />
     </div>
   </div>
@@ -12,10 +13,14 @@
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
 
-type StateHeroType =
+export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'
+
+export type StateHeroType =
+  | 'busy'
   | 'no-result'
   | 'under-construction'
   | 'no-data'
@@ -26,12 +31,11 @@ type StateHeroType =
   | 'all-good'
   | 'all-done'
 
-const { format, type, size, busy } = defineProps<{
+const { format, type, size } = defineProps<{
   format: StateHeroFormat
-  type?: StateHeroType
-  size: 'extra-small' | 'small' | 'medium' | 'large'
+  type: StateHeroType
+  size: StateHeroSize
   horizontal?: boolean
-  busy?: boolean
   noBackground?: boolean
 }>()
 
@@ -39,16 +43,18 @@ const slots = defineSlots<{
   default?(): any
 }>()
 
+const { t } = useI18n()
+
 const typoClass = computed(() => (format === 'page' ? 'typo-h2' : 'typo-h4'))
 
 const className = computed(() => toVariants({ size, format }))
 
-const error = computed(() => !busy && type === 'error')
+const error = computed(() => type === 'error')
 
-const success = computed(() => !busy && (type === 'all-good' || type === 'all-done'))
+const success = computed(() => type === 'all-good' || type === 'all-done')
 
 const imageSrc = computed(() => {
-  if (!type) {
+  if (type === 'busy') {
     return undefined
   }
 
@@ -80,6 +86,10 @@ const imageSrc = computed(() => {
     display: flex;
     flex-direction: column;
     gap: 1.6rem;
+
+    &:empty {
+      display: none;
+    }
   }
 
   .loader,

package/lib/components/table/VtsRow.vue

@@ -0,0 +1,26 @@
+<template>
+  <tr class="vts-row" :class="{ selected }">
+    <slot />
+  </tr>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  selected?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-row {
+  &.selected {
+    --ui-table-cell-background-color: var(--color-brand-background-selected);
+  }
+
+  &:not(:last-child) {
+    :deep(th),
+    :deep(td) {
+      border-bottom: none;
+    }
+  }
+}
+</style>

package/lib/components/table/VtsTable.vue

@@ -1,66 +1,123 @@
 <template>
-  <table :class="{ 'vertical-border': verticalBorder }" class="vts-table typo-body-regular-small">
-    <slot />
-  </table>
+  <div class="vts-table" :class="className">
+    <VtsStateHero v-if="state" format="table" :type="state.type" :size="state.size ?? 'medium'">
+      {{ state.message }}
+    </VtsStateHero>
+    <div v-else class="table-container">
+      <UiTablePagination v-if="paginationBindings" v-bind="paginationBindings" class="pagination" />
+      <div ref="wrapper" class="wrapper">
+        <table class="table" vertical-border>
+          <slot />
+        </table>
+      </div>
+      <UiTablePagination v-if="paginationBindings" v-bind="paginationBindings" class="pagination" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { provide } from 'vue'
+import VtsStateHero, { type StateHeroSize, type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import UiTablePagination from '@core/components/ui/table-pagination/UiTablePagination.vue'
+import type { PaginationBindings } from '@core/composables/pagination.composable'
+import { hasEllipsis } from '@core/utils/has-ellipsis.util'
+import { toVariants } from '@core/utils/to-variants.util'
+import { useResizeObserver, useScroll } from '@vueuse/core'
+import { computed, ref, useTemplateRef } from 'vue'
 
-const props = defineProps<{
-  name?: string
-  verticalBorder?: boolean
-}>()
+export type TableStickySide = 'left' | 'right' | 'both'
+
+export type TableState = {
+  type: StateHeroType
+  message?: string
+  size?: StateHeroSize
+}
 
-defineSlots<{
-  default(): any
+const { state, sticky } = defineProps<{
+  state?: TableState
+  sticky?: TableStickySide
+  paginationBindings?: PaginationBindings
 }>()
 
-provide('tableName', props.name)
+const wrapper = useTemplateRef('wrapper')
+
+const { arrivedState } = useScroll(wrapper)
+
+const canScroll = ref(false)
+
+useResizeObserver(wrapper, ([entry]) => {
+  canScroll.value = hasEllipsis(entry.target)
+})
+
+const className = computed(() =>
+  canScroll.value
+    ? toVariants({
+        sticky,
+        stuck: arrivedState.left ? (arrivedState.right ? 'both' : 'left') : arrivedState.right ? 'right' : false,
+      })
+    : {}
+)
 </script>
 
 <style lang="postcss" scoped>
 .vts-table {
-  width: 100%;
-  border-spacing: 0;
-  background-color: var(--color-neutral-background-primary);
-  line-height: 2.4rem;
-  color: var(--color-neutral-txt-secondary);
-  border-collapse: collapse;
-  table-layout: fixed;
-
-  :deep(th),
-  :deep(td) {
-    padding: 1rem;
-    border-top: 0.1rem solid var(--color-neutral-border);
-    text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+
+  .table-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
   }
 
-  :deep(th) {
-    font-weight: 700;
+  .pagination {
+    margin-left: auto;
   }
 
-  :deep(thead) {
-    th,
-    td {
-      color: var(--color-brand-txt-base);
-      font-size: 1.4rem;
-      font-weight: 400;
-      text-transform: uppercase;
-    }
+  .wrapper {
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  .table {
+    min-width: 100%;
+    width: max-content;
+    border-spacing: 0;
   }
 
-  &.vertical-border {
-    :deep(th),
-    :deep(td) {
-      border-right: 0.1rem solid var(--color-neutral-border);
+  &.sticky--left,
+  &.sticky--both {
+    :deep(th:first-child),
+    :deep(td:first-child) {
+      position: sticky;
+      left: 0;
+      border-right: 0.3rem solid var(--color-brand-item-base);
+      transition: border-right 0.1s ease-out;
+      z-index: 1;
+    }
 
-      &:first-child {
-        border-left: none;
+    &.stuck--left {
+      :deep(th:first-child),
+      :deep(td:first-child) {
+        border-right-color: var(--color-neutral-border);
       }
+    }
+  }
+
+  &.sticky--right,
+  &.sticky--both {
+    :deep(th:last-child),
+    :deep(td:last-child) {
+      position: sticky;
+      right: 0;
+      border-left: 0.3rem solid var(--color-brand-item-base);
+      transition: border-left 0.1s ease-out;
+    }
 
-      &:last-child {
-        border-right: none;
+    &.stuck--right {
+      :deep(th:last-child),
+      :deep(td:last-child) {
+        border-left-color: var(--color-neutral-border);
       }
     }
   }

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

@@ -0,0 +1,59 @@
+<template>
+  <UiTableCell>
+    <div v-if="items.length > 1 && !isExpanded" class="content">
+      {{ items[0] }}
+      <UiButton
+        accent="brand"
+        size="small"
+        variant="tertiary"
+        class="typo-body-regular-small more"
+        @click="toggleExpand(true)"
+      >
+        {{ `+${items.length - 1}` }}
+      </UiButton>
+    </div>
+    <ul v-else>
+      <li v-for="(item, index) of items" :key="index">
+        <div class="content">
+          {{ item }}
+          <UiButton
+            v-if="isExpanded && index === 0"
+            accent="brand"
+            size="small"
+            variant="tertiary"
+            class="typo-body-regular-small more"
+            @click="toggleExpand(false)"
+          >
+            <VtsIcon size="small" name="fa:minus" />
+          </UiButton>
+        </div>
+      </li>
+    </ul>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import type { MaybeArray } from '@core/types/utility.type'
+import { useToggle } from '@vueuse/shared'
+
+defineProps<{
+  items: MaybeArray<string>
+}>()
+
+const [isExpanded, toggleExpand] = useToggle()
+</script>
+
+<style lang="postcss" scoped>
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .more {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <UiColumnHeader class="vts-header-cell">
+    <div class="cell-content">
+      <VtsIcon v-if="icon" :name="icon" size="medium" />
+      <slot />
+    </div>
+  </UiColumnHeader>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiColumnHeader from '@core/components/ui/column-header/UiColumnHeader.vue'
+import type { IconName } from '@core/icons'
+
+defineProps<{
+  icon?: IconName
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-header-cell {
+  max-width: 30rem;
+
+  .cell-content {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    white-space: nowrap;
+  }
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <UiTableCell>
+    <UiLink size="medium" :icon :to :href :target class="link">
+      <slot />
+      <VtsIcon v-if="rightIcon" v-tooltip="rightIcon.tooltip ?? false" :name="rightIcon.icon" size="medium" />
+    </UiLink>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiLink from '@core/components/ui/link/UiLink.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import type { LinkOptions } from '@core/composables/link-component.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
+
+export type VtsLinkCellProps = LinkOptions & {
+  icon?: IconName
+  rightIcon?: {
+    icon: IconName
+    tooltip?: string
+  }
+}
+
+defineProps<VtsLinkCellProps>()
+</script>
+
+<style lang="postcss" scoped>
+.link {
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <UiTableCell align="end">
+    <slot />
+    <span v-if="unit" class="unit">{{ unit }}</span>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+
+defineProps<{
+  unit?: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.unit {
+  color: var(--color-neutral-txt-secondary);
+  margin-inline-start: 0.4rem;
+}
+</style>

package/lib/components/{size-progress-cell/VtsSizeProgressCell.vue → table/cells/VtsProgressBarCell.vue}

@@ -1,12 +1,15 @@
 <template>
-  <div class="progress-cell">
-    <VtsProgressBar :current :total noruler class="progress" />
-    <span>{{ n(percentage / 100, { maximumFractionDigits: 0, style: 'percent' }) }}</span>
-  </div>
+  <UiTableCell>
+    <div class="container">
+      <VtsProgressBar :current :total noruler class="progress" />
+      <span>{{ n(percentage / 100, { maximumFractionDigits: 0, style: 'percent' }) }}</span>
+    </div>
+  </UiTableCell>
 </template>
 
 <script setup lang="ts">
 import VtsProgressBar from '@core/components/progress-bar/VtsProgressBar.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
 import { useProgress } from '@core/packages/progress/use-progress.ts'
 import { useI18n } from 'vue-i18n'
 
@@ -24,7 +27,7 @@ const { percentage } = useProgress(
 </script>
 
 <style lang="postcss" scoped>
-.progress-cell {
+.container {
   display: flex;
   align-items: center;
   gap: 0.8rem;

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

@@ -0,0 +1,69 @@
+<template>
+  <UiTableCell>
+    <div class="statuses" :class="{ 'has-label': !iconOnly, progressive: progressiveSize }">
+      <VtsStatus
+        v-for="(statusItem, index) of statuses"
+        :key="index"
+        v-tooltip="statusItem.tooltip ?? false"
+        :icon-only
+        class="status"
+        :status="statusItem.status"
+      />
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import VtsStatus, { type Status } from '@core/components/status/VtsStatus.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { MaybeArray } from '@core/types/utility.type'
+import { toArray } from '@core/utils/to-array.utils'
+import { computed } from 'vue'
+
+export type StatusCellProps = {
+  status: MaybeArray<Status | { status: Status; tooltip?: string }>
+  progressiveSize?: boolean
+  iconOnly?: boolean
+}
+
+const { status } = defineProps<StatusCellProps>()
+
+const statuses = computed(() => toArray(status).map(status => (typeof status === 'object' ? status : { status })))
+</script>
+
+<style lang="postcss" scoped>
+.statuses {
+  display: flex;
+  align-items: center;
+
+  &.has-label {
+    gap: 1.2rem;
+  }
+
+  &.progressive .status {
+    position: relative;
+
+    &:first-child {
+      scale: 1.2;
+    }
+
+    &:nth-child(2) {
+      margin-inline-start: 0.7rem;
+    }
+
+    /* From 3rd status onward, all are scaled down to 0.8 */
+    &:nth-child(n + 3) {
+      scale: 0.8;
+      margin-inline-start: 0.4rem;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        transform: scale(1.7);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <UiTableCell>
+    <UiTagsList>
+      <UiTag v-for="tagItem of tags" :key="tagItem" accent="info" variant="secondary">
+        {{ tagItem }}
+      </UiTag>
+    </UiTagsList>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+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'
+import { computed } from 'vue'
+
+const { tag } = defineProps<{
+  tag: MaybeArray<string>
+}>()
+
+const tags = computed(() => toArray(tag).filter(tagItem => tagItem.trim() !== ''))
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <UiTableCell>
+    <div class="content">
+      <span><slot /></span>
+      <VtsIcon v-if="rightIcon" v-tooltip="rightIcon.tooltip ?? false" :name="rightIcon.icon" size="medium" />
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
+
+export type TextCellProps = {
+  rightIcon?: {
+    icon: IconName
+    tooltip?: string
+  }
+}
+
+defineProps<TextCellProps>()
+</script>
+
+<style lang="postcss" scoped>
+.content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+</style>