@xen-orchestra/web-core 0.20.1 → 0.22.0

package/lib/components/task/VtsQuickTaskTabBar.vue

@@ -1,7 +1,7 @@
 <template>
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
-      {{ $t('tasks.quick-view.in-progress') }}
+      {{ t('tasks.quick-view.in-progress') }}
       <UiCounter
         v-if="pendingCount !== undefined"
         :value="pendingCount"
@@ -11,7 +11,7 @@
       />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
-      {{ $t('tasks.quick-view.done') }}
+      {{ t('tasks.quick-view.done') }}
       <UiCounter
         v-if="successCount !== undefined"
         :value="successCount"
@@ -21,7 +21,7 @@
       />
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
-      {{ $t('tasks.quick-view.failed') }}
+      {{ t('tasks.quick-view.failed') }}
       <UiCounter
         v-if="failureCount !== undefined"
         :value="failureCount"
@@ -32,12 +32,12 @@
     </TabItem>
     <VtsDivider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
-      {{ $t('tasks.quick-view.all') }}
+      {{ t('tasks.quick-view.all') }}
     </TabItem>
     <!--
     TODO
     <UiButton :right-icon="faAngleRight" class="see-all" level="tertiary" size="extra-small">
-      {{ $t('see-all') }}
+      {{ t('see-all') }}
     </UiButton>
     -->
   </TabList>
@@ -50,6 +50,7 @@ import TabList from '@core/components/tab/TabList.vue'
 import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import type { TaskStatus } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
+import { useI18n } from 'vue-i18n'
 
 export type TaskTab = TaskStatus | 'all'
 
@@ -62,5 +63,7 @@ defineProps<{
 
 const currentTab = defineModel<TaskTab>({ required: true })
 
+const { t } = useI18n()
+
 const { tabs } = useTabList<TaskTab>(['pending', 'success', 'failure', 'all'], currentTab)
 </script>

package/lib/components/ui/card-numbers/UiCardNumbers.vue

@@ -4,7 +4,7 @@
     <span class="label typo-caption-small">{{ label }}</span>
     <div class="values" :class="fontClass">
       <span v-if="percentValue !== undefined">
-        {{ $n(percentValue, 'percent') }}
+        {{ n(percentValue, 'percent') }}
       </span>
       <span>
         {{ `${value ?? '-'} ${unit ?? ''}` }}
@@ -16,6 +16,7 @@
 <script setup lang="ts">
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { size, value, max } = defineProps<{
   label: string
@@ -25,6 +26,8 @@ const { size, value, max } = defineProps<{
   max?: number
 }>()
 
+const { n } = useI18n()
+
 const className = computed(() => toVariants({ size }))
 const fontClass = computed(() => (size === 'medium' ? 'typo-h3' : 'typo-caption-small'))
 

package/lib/components/ui/character-limit/UiCharacterLimit.vue

@@ -1,18 +1,21 @@
 <!-- v1 -->
 <template>
   <span class="ui-character-limit" :class="classes">
-    {{ $t('core.character-limit', { count, max }) }}
+    {{ t('core.character-limit', { count, max }) }}
   </span>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { count, max } = defineProps<{
   count: number
   max: number
 }>()
 
+const { t } = useI18n()
+
 const isTooLong = computed(() => count > max)
 
 const classes = computed(() => {

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

@@ -30,7 +30,7 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
-import { useMapper } from '@core/composables/mapper.composable.ts'
+import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
@@ -79,7 +79,7 @@ const accent = useMapper<LabelAccent, InputAccent>(
     warning: 'warning',
     danger: 'danger',
   },
-  () => _accent
+  'neutral'
 )
 
 if (wrapperController) {

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

@@ -5,7 +5,7 @@
     <label :for="htmlFor" :class="{ required }" class="typo-caption label">
       <slot />
     </label>
-    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ $t('learn-more') }}</UiLink>
+    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ t('learn-more') }}</UiLink>
   </div>
 </template>
 
@@ -14,6 +14,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 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'
+import { useI18n } from 'vue-i18n'
 
 export type LabelAccent = 'neutral' | 'warning' | 'danger'
 
@@ -24,6 +25,8 @@ const { for: htmlFor } = defineProps<{
   required?: boolean
   href?: string
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/panel/UiPanel.vue

@@ -1,6 +1,6 @@
-<!-- wip -->
+<!-- v2 -->
 <template>
-  <div class="ui-panel" :class="{ error }">
+  <div class="ui-panel" :class="{ error, 'mobile-drawer': uiStore.isMobile }">
     <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>
@@ -11,6 +11,8 @@
 </template>
 
 <script setup lang="ts">
+import { useUiStore } from '@core/stores/ui.store'
+
 defineProps<{
   error?: boolean
 }>()
@@ -19,11 +21,12 @@ const slots = defineSlots<{
   default(): any
   header?(): any
 }>()
+
+const uiStore = useUiStore()
 </script>
 
 <style scoped lang="postcss">
 .ui-panel {
-  max-height: calc(100dvh - 5.5rem);
   position: sticky;
   top: 0;
   display: flex;
@@ -31,6 +34,10 @@ const slots = defineSlots<{
   border-inline-start: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
+  &:not(.mobile-drawer) {
+    height: calc(100dvh - 16rem);
+  }
+
   .header {
     border-bottom: 0.1rem solid var(--color-neutral-border);
     background-color: var(--color-neutral-background-primary);
@@ -48,6 +55,12 @@ const slots = defineSlots<{
     gap: 0.8rem;
   }
 
+  &.mobile-drawer {
+    .content {
+      overflow: auto;
+    }
+  }
+
   &.error {
     background-color: var(--color-danger-background-selected);
 

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

@@ -5,8 +5,8 @@
       <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>
+      <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>
@@ -20,6 +20,7 @@ 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'
+import { useI18n } from 'vue-i18n'
 
 const {
   value: _value,
@@ -32,6 +33,8 @@ const {
   showSteps?: boolean
 }>()
 
+const { n } = useI18n()
+
 const value = useMax(0, () => _value)
 
 const percentage = computed(() => (max <= 0 ? 0 : (value.value / max) * 100))

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

@@ -2,29 +2,29 @@
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo-body-regular-small label">
-      {{ $t('core.query-search-bar.label') }}
+      {{ t('core.query-search-bar.label') }}
     </label>
     <UiInput
       :id
       v-model="value"
       type="text"
       accent="brand"
-      :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
+      :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
-      :placeholder="$t('core.query-search-bar.placeholder')"
+      :placeholder="t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ t('core.search') }}</UiButton>
       <VtsDivider type="stretch" />
       <UiButton
-        v-tooltip="$t('coming-soon')"
+        v-tooltip="t('coming-soon')"
         size="medium"
         accent="brand"
         variant="secondary"
         :left-icon="faFilter"
         disabled
       >
-        {{ $t('core.query-search-bar.use-query-builder') }}
+        {{ t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
     <template v-else>
@@ -44,11 +44,14 @@ import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
 import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits<{
   search: [value: string]
 }>()
 
+const { t } = useI18n()
+
 const id = uniqueId('search-input-')
 
 const uiStore = useUiStore()

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -13,14 +13,14 @@
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon :icon="faCircleNotch" accent="current" />
-            <span class="typo-body-regular-small">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+            <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
-          {{ $d(task.start, 'datetime_short') }}
+          {{ d(task.start, 'datetime_short') }}
           <template v-if="task.end">
             <VtsIcon :icon="faArrowRight" accent="current" />
-            {{ $d(new Date(task.end), 'datetime_short') }}
+            {{ d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
       </div>
@@ -37,6 +37,7 @@ import UiTag from '@core/components/ui/tag/UiTag.vue'
 import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type TaskStatus = 'pending' | 'success' | 'failure'
 
@@ -54,6 +55,8 @@ const props = defineProps<{
   task: Task
 }>()
 
+const { t, d } = useI18n()
+
 const [isExpanded, toggleExpand] = useToggle()
 
 const subTasks = computed(() => props.task.subtasks ?? [])

package/lib/components/ui/quoteCode/UiQuoteCode.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="ui-quote-code" :class="className">
+    <div class="label-container">
+      <div :class="fontClasses.labelClass" class="label">
+        {{ label }}
+      </div>
+      <div v-if="slots.actions || copy" class="actions">
+        <VtsCopyButton v-if="copy" :value="codeTextValue ?? ''" />
+        <slot name="actions" />
+      </div>
+    </div>
+    <code ref="code-element" :class="fontClasses.codeClass" class="code-container">
+      <slot />
+    </code>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import { useMapper } from '@core/packages/mapper'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed, useTemplateRef } from 'vue'
+
+type QuoteCodeAccent = 'brand' | 'danger'
+type QuoteCodeSize = 'small' | 'medium'
+
+const { size, accent } = defineProps<{
+  label: string
+  size: QuoteCodeSize
+  accent: QuoteCodeAccent
+  copy?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  actions?(): any
+}>()
+
+const codeElement = useTemplateRef('code-element')
+const codeTextValue = computed(() => codeElement.value?.textContent)
+
+const mapping = {
+  small: {
+    labelClass: 'typo-body-regular-small',
+    codeClass: 'typo-form-value-small',
+  },
+  medium: {
+    labelClass: 'typo-body-regular',
+    codeClass: 'typo-form-value',
+  },
+}
+
+const fontClasses = useMapper(() => size, mapping, 'medium')
+
+const className = computed(() =>
+  toVariants({
+    accent,
+  })
+)
+</script>
+
+<style lang="postcss" scoped>
+.ui-quote-code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .label-container {
+    display: flex;
+    justify-content: space-between;
+
+    .label {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    .actions {
+      display: flex;
+      gap: 0.8rem;
+      align-items: center;
+    }
+  }
+
+  .code-container {
+    background-color: var(--color-neutral-background-disabled);
+    padding: 0.8rem 1.2rem;
+    border-radius: 0.4rem;
+    border-inline-start: 0.2rem solid;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  &.accent--brand {
+    .code-container {
+      border-inline-start-color: var(--color-brand-item-base);
+    }
+  }
+
+  &.accent--danger {
+    .code-container {
+      border-inline-start-color: var(--color-danger-item-base);
+    }
+  }
+}
+</style>

package/lib/components/ui/stacked-bar/StackedBarSegment.vue

@@ -7,7 +7,7 @@
     class="stacked-bar-segment typo-caption-small"
   >
     <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
-      {{ $n(percentage / 100, 'percent') }}
+      {{ n(percentage / 100, 'percent') }}
     </div>
   </div>
 </template>
@@ -17,6 +17,7 @@ import { vTooltip } from '@core/directives/tooltip.directive'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type StackedBarSegmentAccent = 'info' | 'success' | 'warning' | 'danger'
 
@@ -27,6 +28,8 @@ export type StackedBarSegmentProps = {
 
 defineProps<StackedBarSegmentProps>()
 
+const { n } = useI18n()
+
 const hidden = ref(false)
 const ellipsisElement = ref<HTMLElement | null>(null)
 

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

@@ -8,13 +8,13 @@
       <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
     </div>
     <span class="typo-body-regular-small label">
-      {{ $t('core.select.n-object-of', { from, to, total }) }}
+      {{ t('core.select.n-object-of', { from, to, total }) }}
     </span>
-    <span class="typo-body-regular-small label show">{{ $t('core.pagination.show-by') }}</span>
+    <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
     <div class="dropdown-wrapper">
       <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 === -1 ? t('core.pagination.all') : option }}
         </option>
       </select>
       <VtsIcon :icon="faAngleDown" accent="current" class="icon" />
@@ -32,6 +32,7 @@ import {
   faAngleLeft,
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   from: number
@@ -49,6 +50,8 @@ const emit = defineEmits<{
 }>()
 
 const showBy = defineModel<number>('showBy', { default: 50 })
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/text-area/UiTextarea.vue

@@ -7,7 +7,7 @@
     <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="isExceedingMaxCharacters" accent="danger">
-      {{ $t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
+      {{ t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
     </UiInfo>
     <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
       <slot name="info" />
@@ -23,6 +23,7 @@ import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 defineOptions({
   inheritAttrs: false,
@@ -49,6 +50,8 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 
 const textAreaElement = useTemplateRef('textarea')

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

@@ -3,7 +3,7 @@
   <div class="ui-top-bottom-table">
     <div class="content">
       <span class="typo-body-regular-small label">
-        {{ $t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
+        {{ t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
       </span>
 
       <UiButton
@@ -13,7 +13,7 @@
         variant="tertiary"
         @click="emit('toggleSelectAll', true)"
       >
-        {{ $t('core.select.all') }}
+        {{ t('core.select.all') }}
       </UiButton>
       <UiButton
         :disabled="selectedItems === 0"
@@ -22,7 +22,7 @@
         variant="tertiary"
         @click="emit('toggleSelectAll', false)"
       >
-        {{ $t('core.select.unselect') }}
+        {{ t('core.select.unselect') }}
       </UiButton>
     </div>
     <slot />
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   selectedItems: number
@@ -44,6 +45,8 @@ const emit = defineEmits<{
 defineSlots<{
   default(): any
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style scoped lang="postcss">

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

@@ -16,7 +16,7 @@
       </template>
       <UiButtonIcon
         v-if="hasToggle"
-        v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
+        v-tooltip="isExpanded ? t('core.close') : t('core.open')"
         class="toggle"
         accent="brand"
         :icon="isExpanded ? faAngleDown : faAngleRight"
@@ -47,6 +47,7 @@ import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH }
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOptions({
@@ -69,6 +70,8 @@ defineSlots<{
   addons?(): any
 }>()
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))

package/lib/composables/local-time-ago.composable.ts

@@ -0,0 +1,53 @@
+import { useTimestamp } from '@vueuse/core'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export enum SECONDS {
+  MINUTE = 60,
+  HOUR = SECONDS.MINUTE * 60,
+  DAY = SECONDS.HOUR * 24,
+  WEEK = SECONDS.DAY * 7,
+  MONTH = SECONDS.DAY * 30,
+  YEAR = SECONDS.DAY * 365,
+}
+
+export type TimeThreshold = [number, Intl.RelativeTimeFormatUnit]
+
+const timeThresholds: TimeThreshold[] = [
+  [SECONDS.MINUTE, 'second'],
+  [SECONDS.HOUR, 'minute'],
+  [SECONDS.DAY, 'hour'],
+  [SECONDS.WEEK, 'day'],
+  [SECONDS.MONTH, 'week'],
+  [SECONDS.YEAR, 'month'],
+  [Infinity, 'year'],
+]
+
+export function useTimeAgo(referenceDate: MaybeRefOrGetter<Date | number | string>) {
+  const { locale } = useI18n()
+
+  const formatter = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
+
+  const now = useTimestamp({ interval: 1000 })
+
+  const referenceTime = computed(() => new Date(toValue(referenceDate)).getTime())
+
+  const distance = computed(() => {
+    const diff = Math.trunc((referenceTime.value - now.value) / 1000)
+
+    if (Math.abs(diff) < 60) {
+      return Math.trunc(diff / 10) * 10 || 0 // Avoid recomputing when the value changes from 0 to -0
+    }
+
+    return timeThresholds.reduce(
+      (acc, [threshold]) => (Math.abs(acc) < threshold ? acc : Math.trunc(acc / threshold) * threshold),
+      diff
+    )
+  })
+
+  return computed(() => {
+    const index = timeThresholds.findIndex(([threshold]) => Math.abs(distance.value) < threshold)
+    const divisor = index > 0 ? timeThresholds[index - 1][0] : 1
+    return formatter.value.format(Math.trunc(distance.value / divisor), timeThresholds[index][1])
+  })
+}