@xen-orchestra/web-core 0.16.0 → 0.17.0

package/lib/components/console/VtsRemoteConsole.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
-    <VtsLoadingHero :disabled="isReady" type="panel" />
+    <VtsLoadingHero v-if="!isReady" type="panel" />
     <div ref="console-container" class="console" />
   </div>
 </template>

package/lib/components/data-table/VtsDataTable.vue

@@ -1,24 +1,23 @@
 <template>
   <div class="table-container">
-    <VtsLoadingHero :disabled="isReady" type="table">
-      <VtsTable vertical-border>
-        <thead>
-          <slot name="thead" />
-        </thead>
-        <tbody>
-          <slot name="tbody" />
-        </tbody>
-      </VtsTable>
-    </VtsLoadingHero>
-    <VtsErrorNoDataHero v-if="isReady && hasError" type="table" />
-    <VtsStateHero v-if="isReady && noDataMessage" type="table" image="no-data" />
+    <VtsLoadingHero v-if="!isReady" type="table" />
+    <VtsErrorNoDataHero v-else-if="hasError" type="table" />
+    <VtsNoDataHero v-else-if="noDataMessage" type="table" />
+    <VtsTable v-else vertical-border>
+      <thead>
+        <slot name="thead" />
+      </thead>
+      <tbody>
+        <slot name="tbody" />
+      </tbody>
+    </VtsTable>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
 import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 
 defineProps<{

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="vts-input-wrapper">
+    <UiLabel
+      :accent="labelAccent"
+      :for="id"
+      :href="learnMoreUrl"
+      :icon
+      :required="wrapperController.required"
+      class="label"
+    >
+      <slot name="label">{{ label }}</slot>
+    </UiLabel>
+    <slot />
+    <UiInfo v-for="{ content, accent } of messages" :key="content" :accent>
+      {{ content }}
+    </UiInfo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import { useMapper } from '@core/composables/mapper.composable'
+import { useRanked } from '@core/composables/ranked.composable.ts'
+import type { MaybeArray } from '@core/types/utility.type'
+import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
+import { toArray } from '@core/utils/to-array.utils'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { useArrayMap } from '@vueuse/core'
+import { provide, reactive, useId } from 'vue'
+
+export type InputWrapperMessage = MaybeArray<string | { content: string; accent?: InfoAccent }>
+
+export type InputWrapperController = {
+  id: string
+  labelAccent: LabelAccent
+  required: boolean
+}
+
+const { message: _message } = defineProps<{
+  label?: string
+  learnMoreUrl?: string
+  icon?: IconDefinition
+  message?: InputWrapperMessage
+}>()
+
+defineSlots<{
+  default(): any
+  label?(): any
+}>()
+
+const id = useId()
+
+const unsortedMessages = useArrayMap(
+  () => toArray(_message),
+  item => ({
+    content: typeof item === 'object' ? item.content : item,
+    accent: typeof item === 'object' ? (item.accent ?? 'info') : 'info',
+  })
+)
+
+const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['danger', 'warning', 'success', 'info'])
+
+const labelAccent = useMapper<InfoAccent, LabelAccent>(
+  () => messages.value[0]?.accent,
+  {
+    info: 'neutral',
+    success: 'neutral',
+    warning: 'warning',
+    danger: 'danger',
+  },
+  'neutral'
+)
+
+const wrapperController = reactive({
+  id,
+  labelAccent,
+  required: false,
+}) satisfies InputWrapperController
+
+provide(IK_INPUT_WRAPPER_CONTROLLER, wrapperController)
+</script>
+
+<style lang="postcss" scoped>
+.vts-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .label {
+    min-height: 2.4rem;
+  }
+}
+</style>

package/lib/components/menu/MenuList.vue

@@ -74,6 +74,7 @@ const open = (event: MouseEvent) => {
   nextTick(() => {
     clearClickOutsideEvent = onClickOutside(menu, () => (isOpen.value = false), {
       ignore: [event.currentTarget as HTMLElement],
+      controls: false,
     })
 
     placementJs(event.currentTarget as HTMLElement, unrefElement(menu), {

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

@@ -1,8 +1,7 @@
 <template>
-  <VtsStateHero v-if="!disabled" :type busy class="vts-loading-hero">
+  <VtsStateHero :type busy>
     {{ $t('loading-in-progress') }}
   </VtsStateHero>
-  <slot v-else />
 </template>
 
 <script lang="ts" setup>
@@ -10,6 +9,5 @@ import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/Vt
 
 defineProps<{
   type: StateHeroType
-  disabled?: boolean
 }>()
 </script>

package/lib/components/ui/dropdown/UiDropdown.vue

@@ -0,0 +1,214 @@
+<!-- v7 -->
+<template>
+  <div v-tooltip="{ selector: '.text-ellipsis' }" :class="className" class="ui-dropdown">
+    <UiCheckbox v-if="checkbox" :disabled :model-value="selected" accent="brand" />
+    <slot name="icon">
+      <VtsIcon :icon accent="current" />
+    </slot>
+    <div class="text-ellipsis typo-body-bold-small">
+      <slot />
+    </div>
+    <div v-if="info" class="info typo-body-regular-small">{{ info }}</div>
+    <VtsIcon
+      v-if="subMenuIcon || locked"
+      :accent="disabled ? 'current' : 'brand'"
+      :icon="locked ? faLock : faAngleRight"
+      class="right-icon"
+      fixed-width
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faAngleRight, faLock } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+export type DropdownAccent = 'normal' | 'brand' | 'success' | 'warning' | 'danger'
+
+const {
+  accent,
+  disabled: _disabled,
+  locked,
+  selected,
+  hover,
+} = defineProps<{
+  accent: DropdownAccent
+  disabled?: boolean
+  locked?: boolean
+  selected?: boolean
+  hover?: boolean
+  checkbox?: boolean
+  subMenuIcon?: boolean
+  icon?: IconDefinition
+  info?: string
+}>()
+
+const disabled = computed(() => _disabled || locked)
+
+const className = computed(() =>
+  toVariants({
+    accent,
+    disabled: disabled.value,
+    selected,
+    hover,
+  })
+)
+</script>
+
+<style lang="postcss" scoped>
+.ui-dropdown {
+  display: flex;
+  align-items: center;
+  padding: 1.2rem;
+  gap: 0.8rem;
+  height: 4.5rem;
+  cursor: default;
+
+  &.accent--normal {
+    color: var(--color-neutral-txt-primary);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      background-color: var(--color-brand-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      background-color: var(--color-brand-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-brand-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--brand {
+    color: var(--color-brand-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-brand-txt-base);
+      background-color: var(--color-brand-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-brand-txt-hover);
+      background-color: var(--color-brand-background-hover);
+    }
+
+    &:active {
+      color: var(--color-brand-txt-active);
+      background-color: var(--color-brand-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--success {
+    color: var(--color-success-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-success-txt-base);
+      background-color: var(--color-success-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-success-txt-hover);
+      background-color: var(--color-success-background-hover);
+    }
+
+    &:active {
+      color: var(--color-success-txt-active);
+      background-color: var(--color-success-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--warning {
+    color: var(--color-warning-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-warning-txt-base);
+      background-color: var(--color-warning-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-warning-txt-hover);
+      background-color: var(--color-warning-background-hover);
+    }
+
+    &:active {
+      color: var(--color-warning-txt-active);
+      background-color: var(--color-warning-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &.accent--danger {
+    color: var(--color-danger-txt-base);
+    background-color: var(--color-neutral-background-primary);
+
+    &.selected {
+      color: var(--color-danger-txt-base);
+      background-color: var(--color-danger-background-selected);
+    }
+
+    &:is(:hover, .hover) {
+      color: var(--color-danger-txt-hover);
+      background-color: var(--color-danger-background-hover);
+    }
+
+    &:active {
+      color: var(--color-danger-txt-active);
+      background-color: var(--color-danger-background-active);
+    }
+
+    &.disabled {
+      color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0.2rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  .info {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .right-icon {
+    font-size: 1.2rem;
+  }
+}
+</style>

package/lib/components/ui/dropdown/UiDropdownList.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="ui-dropdown-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.ui-dropdown-list {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: var(--color-neutral-background-primary);
+  border: 0.1rem solid var(--color-neutral-border);
+  border-radius: 0.4rem;
+}
+</style>

package/lib/components/ui/label/UiLabel.vue

@@ -15,8 +15,10 @@ import UiLink from '@core/components/ui/link/UiLink.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
+export type LabelAccent = 'neutral' | 'warning' | 'danger'
+
 const { for: htmlFor } = defineProps<{
-  accent: 'neutral' | 'warning' | 'danger'
+  accent: LabelAccent
   for?: string
   icon?: IconDefinition
   required?: boolean

package/lib/components/ui/progress-bar/UiProgressBar.vue

@@ -0,0 +1,108 @@
+<!-- v2 -->
+<template>
+  <div class="ui-progress-bar" :class="className">
+    <div class="progress-bar">
+      <div class="fill" :style="{ width: `${fillWidth}%` }" />
+    </div>
+    <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
+      <span>{{ $n(0, 'percent') }}</span>
+      <span v-for="step in steps" :key="step">{{ $n(step, 'percent') }}</span>
+    </div>
+    <VtsLegendList class="legend">
+      <UiLegend :accent :value="Math.round(percentage)" unit="%">{{ legend }}</UiLegend>
+    </VtsLegendList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
+import UiLegend from '@core/components/ui/legend/UiLegend.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import { useClamp, useMax } from '@vueuse/math'
+import { computed } from 'vue'
+
+const {
+  value: _value,
+  max = 100,
+  showSteps,
+} = defineProps<{
+  legend: string
+  value: number
+  max?: number
+  showSteps?: boolean
+}>()
+
+const value = useMax(0, () => _value)
+
+const percentage = computed(() => (max <= 0 ? 0 : (value.value / max) * 100))
+const maxPercentage = computed(() => Math.ceil(percentage.value / 100) * 100)
+const fillWidth = useClamp(() => (percentage.value / maxPercentage.value) * 100 || 0, 0, 100)
+const shouldShowSteps = computed(() => showSteps || percentage.value > 100)
+const steps = useMax(1, () => Math.floor(maxPercentage.value / 100))
+
+const accent = computed(() => {
+  if (percentage.value >= 90) {
+    return 'danger'
+  }
+
+  if (percentage.value >= 80) {
+    return 'warning'
+  }
+
+  return 'info'
+})
+
+const className = computed(() => toVariants({ accent: accent.value }))
+</script>
+
+<style lang="postcss" scoped>
+.ui-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .progress-bar {
+    width: 100%;
+    height: 1.2rem;
+    border-radius: 0.4rem;
+    overflow: hidden;
+    background-color: var(--color-neutral-background-disabled);
+
+    .fill {
+      width: 0;
+      height: 100%;
+      transition: width 0.25s ease-in-out;
+    }
+  }
+
+  .steps {
+    color: var(--color-neutral-txt-secondary);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .legend {
+    margin-inline-start: auto;
+  }
+
+  /* ACCENT */
+
+  &.accent--info {
+    .fill {
+      background-color: var(--color-info-item-base);
+    }
+  }
+
+  &.accent--warning {
+    .fill {
+      background-color: var(--color-warning-item-base);
+    }
+  }
+
+  &.accent--danger {
+    .fill {
+      background-color: var(--color-danger-item-base);
+    }
+  }
+}
+</style>

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

@@ -2,27 +2,27 @@
 <template>
   <div class="ui-table-pagination">
     <div class="buttons-container">
-      <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleDoubleLeft" @click="goToFirstPage()" />
-      <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleLeft" @click="goToPreviousPage()" />
-      <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleRight" @click="goToNextPage()" />
-      <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleDoubleRight" @click="goToLastPage()" />
+      <PaginationButton :disabled="isFirstPage" :icon="faAngleDoubleLeft" @click="emit('first')" />
+      <PaginationButton :disabled="isFirstPage" :icon="faAngleLeft" @click="emit('previous')" />
+      <PaginationButton :disabled="isLastPage" :icon="faAngleRight" @click="emit('next')" />
+      <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
     </div>
     <span class="typo-body-regular-small label">
-      {{ $t('core.select.n-object-of', { from: startIndex, to: endIndex, total: totalItems }) }}
+      {{ $t('core.select.n-object-of', { from, to, total }) }}
     </span>
-    <span class="typo-body-regular-small label show">{{ $t('core.show-by') }}</span>
+    <span class="typo-body-regular-small label show">{{ $t('core.pagination.show-by') }}</span>
     <div class="dropdown-wrapper">
-      <select v-model="pageSize" :disabled class="dropdown typo-body-regular-small" @change="goToFirstPage">
-        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo-body-bold-small">
-          {{ option }}
+      <select v-model="showBy" class="dropdown typo-body-regular-small">
+        <option v-for="option in [50, 100, 150, 200, -1]" :key="option" :value="option" class="typo-body-bold-small">
+          {{ option === -1 ? $t('core.pagination.all') : option }}
         </option>
       </select>
-      <VtsIcon class="icon" accent="current" :icon="faAngleDown" />
+      <VtsIcon :icon="faAngleDown" accent="current" class="icon" />
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
 import {
@@ -32,60 +32,26 @@ import {
   faAngleLeft,
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
-import { useOffsetPagination } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-
-export type PaginationPayload = {
-  currentPage: number
-  pageSize: number
-  startIndex: number
-  endIndex: number
-}
 
-const { totalItems, disabled = false } = defineProps<{
-  totalItems: number
-  disabled?: boolean
+defineProps<{
+  from: number
+  to: number
+  total: number
+  isFirstPage: boolean
+  isLastPage: boolean
 }>()
 
 const emit = defineEmits<{
-  change: [payload: PaginationPayload]
+  first: []
+  previous: []
+  next: []
+  last: []
 }>()
 
-const pageSize = ref(50)
-const pageSizeOptions = [10, 50, 100, 150, 200]
-const {
-  currentPage,
-  currentPageSize,
-  pageCount,
-  isFirstPage,
-  isLastPage,
-  prev: goToPreviousPage,
-  next: goToNextPage,
-} = useOffsetPagination({
-  total: () => totalItems,
-  pageSize,
-})
-const startIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
-const endIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
-
-const goToFirstPage = () => {
-  currentPage.value = 1
-}
-const goToLastPage = () => {
-  currentPage.value = pageCount.value
-}
-
-watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
-  emit('change', {
-    currentPage: newPage,
-    pageSize: newPageSize,
-    startIndex: startIndex.value,
-    endIndex: endIndex.value,
-  })
-})
+const showBy = defineModel<number>('showBy', { default: 50 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .ui-table-pagination {
   display: flex;
   align-items: center;