@xen-orchestra/web-core 0.20.0 → 0.21.0

package/lib/components/select/VtsSelect.vue

@@ -1,78 +1,101 @@
 <template>
   <div :class="className" class="vts-select">
-    <VtsBackdrop v-if="isOpen" />
-
     <UiInput
       ref="triggerRef"
       :accent
+      :disabled="isDisabled"
+      :icon
       :model-value="selectedLabel"
       :placeholder
-      :required
+      :required="isRequired"
       :right-icon="faAngleDown"
       readonly
     />
 
-    <UiDropdownList v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="dropdown-list">
-      <template v-if="searchTerm !== undefined" #before>
-        <div class="search-container">
-          <UiInput
-            ref="searchRef"
-            v-model="searchTerm"
-            :placeholder="searchPlaceholder"
-            :right-icon="faMagnifyingGlass"
-            accent="brand"
-          />
-        </div>
-      </template>
-      <UiDropdown v-if="loading || options.length === 0" accent="normal" disabled>
-        {{ loading ? t('loading-in-progress') : t('no-results') }}
-      </UiDropdown>
-      <template v-for="option of options" :key="option.id">
-        <slot :option>
-          <VtsOption :option />
-        </slot>
-      </template>
-    </UiDropdownList>
+    <Teleport v-if="isOpen" to="body">
+      <VtsBackdrop />
+
+      <UiDropdownList ref="dropdownRef" :style="floatingStyles" class="dropdown-list">
+        <template v-if="isSearchable" #before>
+          <div class="search-container">
+            <UiInput
+              ref="searchRef"
+              v-model="searchTerm"
+              :placeholder="searchPlaceholder"
+              :right-icon="faMagnifyingGlass"
+              accent="brand"
+            />
+          </div>
+        </template>
+        <UiDropdown v-if="isLoading || options.length === 0" accent="normal" disabled>
+          {{ isLoading ? t('loading-in-progress') : t('no-results') }}
+        </UiDropdown>
+        <template v-for="option of options" :key="option.id">
+          <slot :option="option as FormSelectIdToOption<TSelectId>">
+            <VtsOption :option />
+          </slot>
+        </template>
+      </UiDropdownList>
+    </Teleport>
   </div>
 </template>
 
-<script generic="TOption extends FormOption" lang="ts" setup>
+<script generic="TSelectId extends FormSelectId" lang="ts" setup>
 import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
 import VtsOption from '@core/components/select/VtsOption.vue'
 import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
 import UiDropdownList from '@core/components/ui/dropdown/UiDropdownList.vue'
 import UiInput from '@core/components/ui/input/UiInput.vue'
-import type { FormOption } from '@core/packages/form-select/types.ts'
-import { useFormSelectController } from '@core/packages/form-select/use-form-select-controller.ts'
+import {
+  type FormSelect,
+  type FormSelectId,
+  type FormSelectIdToOption,
+  useFormSelectController,
+} from '@core/packages/form-select'
 import { toVariants } from '@core/utils/to-variants.util.ts'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import { useCurrentElement, useElementSize } from '@vueuse/core'
+import { computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const { accent, options, selectedLabel } = defineProps<{
+const { accent, id } = defineProps<{
   accent: 'brand' | 'warning' | 'danger'
-  options: TOption[]
-  selectedLabel: string
-  required?: boolean
-  placeholder?: string
-  searchPlaceholder?: string
-  loading?: boolean
+  id: TSelectId
+  icon?: IconDefinition
 }>()
 
-const searchTerm = defineModel<string>('search')
-
 defineSlots<{
-  default(props: { option: TOption }): any
+  default(props: { option: FormSelectIdToOption<TSelectId> }): any
 }>()
 
 const { t } = useI18n()
 
-const { triggerRef, dropdownRef, searchRef, isOpen, floatingStyles } = useFormSelectController({
-  options: () => options,
+const select = inject(id)
+
+if (!select) {
+  throw new Error(`No select configuration has been found for this ID`)
+}
+
+const {
+  options,
   searchTerm,
-})
+  selectedLabel,
+  isSearchable,
+  isDisabled,
+  isRequired,
+  placeholder,
+  searchPlaceholder,
+  isLoading,
+} = select as FormSelect
+
+const { triggerRef, dropdownRef, searchRef, isOpen, floatingStyles } = useFormSelectController(select as FormSelect)
 
 const className = computed(() => toVariants({ accent }))
+
+const { width } = useElementSize(useCurrentElement())
+
+const minWidth = computed(() => `${width.value}px`)
 </script>
 
 <style lang="postcss" scoped>
@@ -80,17 +103,18 @@ const className = computed(() => toVariants({ accent }))
   .ui-input:deep(input) {
     cursor: default;
   }
+}
 
-  .dropdown-list {
-    min-width: 40rem;
-    max-height: 36.2rem; /* 8 Dropdown items */
-    overflow: auto;
-    z-index: 1020;
+/* Teleported */
+.dropdown-list {
+  min-width: v-bind(minWidth);
+  max-height: 36.2rem; /* 8 Dropdown items */
+  overflow: auto;
+  z-index: 1020;
 
-    .search-container {
-      background-color: var(--color-neutral-background-primary);
-      padding: 0.4rem;
-    }
+  .search-container {
+    background-color: var(--color-neutral-background-primary);
+    padding: 0.4rem;
   }
 }
 </style>

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

@@ -0,0 +1,16 @@
+<template>
+  <VtsStateHero :type class="vts-all-done-hero" image="all-done">
+    {{ t('all-done') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  type: StateHeroType
+}>()
+
+const { t } = useI18n()
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <VtsStateHero :type class="vts-all-good-hero" image="all-good">
+    {{ t('all-good') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  type: StateHeroType
+}>()
+
+const { t } = useI18n()
+</script>

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-coming-soon-hero" image="under-construction">
-    {{ $t('coming-soon') }}
+    {{ t('coming-soon') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,11 +1,14 @@
 <template>
-  <VtsStateHero class="vts-error-hero" image="error" :type>{{ $t('error-no-data') }}</VtsStateHero>
+  <VtsStateHero class="vts-error-hero" image="error" :type>{{ t('error-no-data') }}</VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="vts-loading-hero">
     <VtsStateHero :type busy>
-      {{ $t('loading-in-progress') }}
+      {{ t('loading-in-progress') }}
     </VtsStateHero>
     <div v-if="slots.title || slots.text" class="content">
       <div v-if="slots.title" class="title" :class="className">
@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { type } = defineProps<{
   type: StateHeroType
@@ -27,6 +28,8 @@ const slots = defineSlots<{
   text?(): any
 }>()
 
+const { t } = useI18n()
+
 const className = computed(() => (type === 'page' ? 'typo-h1' : 'typo-h2'))
 </script>
 

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

@@ -1,11 +1,14 @@
 <template>
-  <VtsStateHero class="vts-no-data-hero" image="no-data" :type>{{ $t('no-data') }}</VtsStateHero>
+  <VtsStateHero class="vts-no-data-hero" image="no-data" :type>{{ t('no-data') }}</VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-no-selection-hero" image="no-selection">
-    {{ $t('select-to-see-details') }}
+    {{ t('select-to-see-details') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,14 +1,17 @@
 <template>
   <VtsStateHero class="vts-object-not-found-hero" image="no-result" :type>
-    {{ $t('object-not-found', { id }) }}
+    {{ t('object-not-found', { id }) }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   id: string
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -0,0 +1,16 @@
+<template>
+  <VtsStateHero :type class="vts-offline-hero" image="offline">
+    {{ t('offline') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  type: StateHeroType
+}>()
+
+const { t } = useI18n()
+</script>

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

@@ -1,16 +1,19 @@
 <template>
   <VtsStateHero class="vts-page-not-found-hero" image="not-found" :type>
     <span class="numeric">404</span><br />
-    {{ $t('page-not-found') }}
+    {{ t('page-not-found') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

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

@@ -17,7 +17,16 @@ export type StateHeroType = 'page' | 'card' | 'panel' | 'table'
 const props = defineProps<{
   type: StateHeroType
   busy?: boolean
-  image?: 'no-result' | 'under-construction' | 'no-data' | 'no-selection' | 'error' | 'not-found' // TODO: 'offline' | 'all-good' | 'all-done''
+  image?:
+    | 'no-result'
+    | 'under-construction'
+    | 'no-data'
+    | 'no-selection'
+    | 'error'
+    | 'not-found'
+    | 'offline'
+    | 'all-good'
+    | 'all-done'
 }>()
 
 const slots = defineSlots<{

package/lib/components/table/ColumnTitle.vue

@@ -19,14 +19,14 @@
     <MenuItem
       v-for="interaction in interactions"
       :key="interaction.id"
-      v-tooltip="$t('coming-soon')"
+      v-tooltip="t('coming-soon')"
       :disabled="interaction.disabled"
       :on-click="() => updateInteraction(interaction)"
     >
       <VtsIcon :icon="interaction.icon" accent="current" />
       {{ interaction.label }}
       <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo-body-regular-small">
-        {{ $t('core.current').toLowerCase() }}
+        {{ t('core.current').toLowerCase() }}
       </i>
     </MenuItem>
   </MenuList>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -1,7 +1,7 @@
 <template>
   <UiButtonIcon
     ref="buttonRef"
-    v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
+    v-tooltip="{ content: t('tasks.quick-view'), placement: 'bottom-end' }"
     accent="brand"
     :dot="hasNewTask"
     :icon="faBarsProgress"
@@ -24,12 +24,15 @@ import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   tasks: Task[]
   loading?: boolean
 }>()
 
+const { t } = useI18n()
+
 const ids = computed(() => props.tasks.map(task => task.id))
 
 const isPanelOpen = ref(false)

package/lib/components/task/VtsQuickTaskList.vue

@@ -3,11 +3,11 @@
     <li v-if="loading">
       <div class="loading">
         <UiLoader />
-        <div>{{ $t('loading-in-progress') }}</div>
+        <div>{{ t('loading-in-progress') }}</div>
       </div>
     </li>
     <template v-else>
-      <li v-if="tasks.length === 0" class="typo-body-bold">{{ $t('tasks.no-tasks') }}</li>
+      <li v-if="tasks.length === 0" class="typo-body-bold">{{ t('tasks.no-tasks') }}</li>
       <UiQuickTaskItem v-for="task of tasks" :key="task.id" :task />
     </template>
   </ul>
@@ -16,12 +16,15 @@
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import UiQuickTaskItem, { type Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   tasks: Task[]
   sublist?: boolean
   loading?: boolean
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

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

@@ -1,50 +1,42 @@
 <!-- v1 -->
 <template>
-  <div class="ui-card-numbers" :class="sizeClass">
+  <div class="ui-card-numbers" :class="className">
     <span class="label typo-caption-small">{{ label }}</span>
-    <div class="values" :class="sizeClass">
-      <span v-if="percentValue" class="value typo-caption-small">
-        {{ percentValue }}
+    <div class="values" :class="fontClass">
+      <span v-if="percentValue !== undefined">
+        {{ n(percentValue, 'percent') }}
+      </span>
+      <span>
+        {{ `${value ?? '-'} ${unit ?? ''}` }}
       </span>
-
-      <div class="value" :class="valueFontClass">
-        {{ value ?? '-' }}<span class="unit" :class="unitFontClass">{{ unit }}</span>
-      </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
+<script setup lang="ts">
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const props = defineProps<{
+const { size, value, max } = defineProps<{
   label: string
-  size: TSize
+  size: 'small' | 'medium'
   value?: number
   unit?: string
-  max?: TSize extends 'small' ? number : never
+  max?: number
 }>()
 
 const { n } = useI18n()
 
-const sizeClass = computed(() => toVariants({ size: props.size }))
-
-const valueFontClass = computed(() => (props.size === 'medium' ? 'typo-h3' : 'typo-caption-small'))
-
-const unitFontClass = computed(() => (props.size === 'medium' ? 'typo-body-bold-small' : 'typo-caption-small'))
+const className = computed(() => toVariants({ size }))
+const fontClass = computed(() => (size === 'medium' ? 'typo-h3' : 'typo-caption-small'))
 
 const percentValue = computed(() => {
-  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
+  if (value === undefined || max === undefined || max === 0) {
     return undefined
   }
 
-  if (props.value === undefined) {
-    return n(0, 'percent').replace('0', '-')
-  }
-
-  return n(props.value / props.max, 'percent')
+  return value / max
 })
 </script>
 
@@ -57,16 +49,6 @@ const percentValue = computed(() => {
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
-  }
-
-  .value {
-    color: var(--color-neutral-txt-primary);
-    display: flex;
-    gap: 0.2rem;
-    align-items: center;
-  }
-
-  .unit {
     color: var(--color-neutral-txt-primary);
   }
 

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>