@xen-orchestra/web-core 0.20.1 → 0.22.0

package/lib/components/input-group/VtsInputGroup.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="vts-input-group">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.vts-input-group {
+  display: flex;
+  align-items: center;
+
+  :slotted(> .ui-input),
+  :slotted(> .vts-select) {
+    &:hover {
+      z-index: 1;
+    }
+
+    &:focus-within {
+      z-index: 2;
+    }
+
+    &:not(:first-child) {
+      margin-left: -1px;
+
+      &,
+      .ui-input {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      &,
+      .ui-input {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -20,8 +20,8 @@
 <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 { useMapper } from '@core/packages/mapper/use-mapper.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'
@@ -70,7 +70,7 @@ const labelAccent = useMapper<InfoAccent, LabelAccent>(
     danger: 'danger',
     muted: 'neutral',
   },
-  'neutral'
+  'info'
 )
 
 const wrapperController = reactive({

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -6,12 +6,12 @@
     <div v-if="!ui.isMobile" class="lock">
       <UiButtonIcon
         v-tooltip="{
-          content: sidebar.isLocked ? $t('core.sidebar.unlock') : $t('core.sidebar.lock'),
+          content: sidebar.isLocked ? t('core.sidebar.unlock') : t('core.sidebar.lock'),
           placement: 'right',
         }"
         accent="brand"
         size="medium"
-        :icon="sidebar.isLocked ? faLock : faLockOpen"
+        :icon="sidebar.isLocked ? faThumbTackSlash : faThumbTack"
         @click="sidebar.toggleLock()"
       />
     </div>
@@ -38,7 +38,8 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
-import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
+import { faThumbTack, faThumbTackSlash } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
 
 const slots = defineSlots<{
   default(): any
@@ -46,6 +47,8 @@ const slots = defineSlots<{
   footer?(): any
 }>()
 
+const { t } = useI18n()
+
 const sidebar = useSidebarStore()
 const ui = useUiStore()
 </script>

package/lib/components/linear-chart/VtsLinearChart.vue

@@ -29,6 +29,10 @@ const valueFormatter = computed<ValueFormatter>(() => {
   const formatter = _valueFormatter
 
   return value => {
+    if (value === null) {
+      return ''
+    }
+
     if (formatter === undefined) {
       return value.toString()
     }

package/lib/components/object-icon/VtsObjectIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <NewVtsIcon :name="iconName" :size />
+</template>
+
+<script generic="TType extends ObjectIconType" lang="ts" setup>
+import NewVtsIcon, { type IconSize } from '@core/components/icon/NewVtsIcon.vue'
+import type { ObjectIconName } from '@core/icons'
+import { computed } from 'vue'
+
+export type ObjectIconType = ObjectIconName extends `object:${infer TType}:${string}` ? TType : never
+
+export type ObjectIconState<TType extends ObjectIconType> =
+  Extract<ObjectIconName, `object:${TType}:${string}`> extends `object:${TType}:${infer TState}` ? TState : never
+
+const { type, state } = defineProps<{
+  type: TType
+  state: ObjectIconState<TType>
+  size: IconSize
+}>()
+
+const iconName = computed(() => `object:${type}:${state}` as ObjectIconName)
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <UiCard class="vts-quick-info-card">
-    <UiCardTitle>{{ $t('quick-info') }}</UiCardTitle>
+    <UiCardTitle>{{ t('quick-info') }}</UiCardTitle>
     <VtsLoadingHero v-if="loading" type="card" />
     <div v-else class="info-container">
       <slot />
@@ -12,10 +12,13 @@
 import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   loading: boolean
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/select/VtsOption.vue

@@ -1,24 +1,28 @@
 <template>
   <UiDropdown
     ref="elementRef"
-    :checkbox="option.properties.multiple"
+    :accent
+    :checkbox="isMultiple"
     :disabled="option.properties.disabled"
     :hover="option.flags.active"
     :selected="option.flags.selected"
-    accent="normal"
   >
     <slot>{{ option.properties.label }}</slot>
   </UiDropdown>
 </template>
 
-<script generic="TOption extends FormOption" lang="ts" setup>
-import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
-import type { FormOption } from '@core/packages/form-select/types.ts'
-import { useFormOptionController } from '@core/packages/form-select/use-form-option-controller.ts'
+<script generic="TOption extends FormOption<{ accent?: DropdownAccent }>" lang="ts" setup>
+import UiDropdown, { type DropdownAccent } from '@core/components/ui/dropdown/UiDropdown.vue'
+import { type FormOption, IK_FORM_SELECT_CONTROLLER, useFormOptionController } from '@core/packages/form-select'
+import { computed, inject } from 'vue'
 
 const { option } = defineProps<{
   option: TOption
 }>()
 
+const accent = computed(() => option.properties.accent ?? 'normal')
+
 const { elementRef } = useFormOptionController(() => option)
+
+const { isMultiple } = inject(IK_FORM_SELECT_CONTROLLER)!
 </script>

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-all-done-hero" image="all-done">
-    {{ $t('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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-all-good-hero" image="all-good">
-    {{ $t('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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-offline-hero" image="offline">
-    {{ $t('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/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>