@xen-orchestra/web-core 0.20.1 → 0.21.0

package/lib/components/backup-state/VtsBackupState.vue

@@ -1,29 +1,32 @@
 <template>
-  <VtsIcon :accent="color" :icon class="vts-backup-state" />
+  <UiInfo :accent="state.accent" class="vts-backup-state">
+    {{ state.text }}
+  </UiInfo>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { useMapper } from '@core/packages/mapper'
+import { useI18n } from 'vue-i18n'
 
-export type BackupState = 'success' | 'failure' | 'partial'
-
-type Props = {
+const { state: _state } = defineProps<{
   state: BackupState
-}
+}>()
 
-const props = defineProps<Props>()
+const { t } = useI18n()
 
-const states: Record<Props['state'], { icon: IconDefinition; color: 'success' | 'warning' | 'danger' }> = {
-  success: { icon: faCheckCircle, color: 'success' },
-  partial: { icon: faCircleMinus, color: 'warning' },
-  failure: { icon: faCircleXmark, color: 'danger' },
-}
+type BackupState = 'success' | 'failure' | 'skipped' | 'interrupted'
 
-const icon = computed(() => states[props.state].icon)
-const color = computed(() => states[props.state].color)
+const state = useMapper<BackupState, { text: string; accent: InfoAccent }>(
+  () => _state,
+  {
+    success: { text: t('success'), accent: 'success' },
+    failure: { text: t('failure'), accent: 'danger' },
+    skipped: { text: t('skipped'), accent: 'warning' },
+    interrupted: { text: t('interrupted'), accent: 'danger' },
+  },
+  'failure'
+)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/cell-object/VtsCellObject.vue

@@ -15,7 +15,7 @@
           accent="brand"
           @click="copy(id)"
         >
-          {{ copied ? $t('core.copied') : $t('core.copy-id') }}
+          {{ copied ? t('core.copied') : t('core.copy-id') }}
         </UiButton>
       </template>
     </div>
@@ -27,12 +27,15 @@ import UiButton from '@core/components/ui/button/UiButton.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCopy } from '@fortawesome/free-solid-svg-icons'
 import { useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   id?: string
   copiableId?: boolean
 }>()
 
+const { t } = useI18n()
+
 const { isSupported, copy, copied } = useClipboard()
 </script>
 

package/lib/components/console/VtsActionsConsole.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiCardTitle>{{ $t('console-actions') }}</UiCardTitle>
+  <UiCardTitle>{{ t('console-actions') }}</UiCardTitle>
   <UiButton
     class="button"
     accent="brand"
@@ -8,7 +8,7 @@
     :left-icon="isFullscreen ? faDownLeftAndUpRightToCenter : faUpRightAndDownLeftFromCenter"
     @click="toggleFullScreen"
   >
-    {{ $t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
+    {{ t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
   </UiButton>
   <UiButton
     class="button"
@@ -18,7 +18,7 @@
     :left-icon="faArrowUpRightFromSquare"
     @click="openInNewTab"
   >
-    {{ $t('open-console-in-new-tab') }}
+    {{ t('open-console-in-new-tab') }}
   </UiButton>
   <UiButton
     class="button"
@@ -28,7 +28,7 @@
     :left-icon="faKeyboard"
     @click="sendCtrlAltDel"
   >
-    {{ $t('send-ctrl-alt-del') }}
+    {{ t('send-ctrl-alt-del') }}
   </UiButton>
 </template>
 
@@ -45,12 +45,15 @@ import {
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 defineProps<{
   sendCtrlAltDel: () => void
 }>()
 
+const { t } = useI18n()
+
 const router = useRouter()
 const uiStore = useUiStore()
 

package/lib/components/console/VtsClipboardConsole.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="vts-clipboard-console">
-    <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
-    <UiTextarea v-tooltip="$t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
+    <UiCardTitle>{{ t('console-clipboard') }}</UiCardTitle>
+    <UiTextarea v-tooltip="t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
     <div class="buttons-container">
-      <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
-        {{ $t('send') }}
+      <UiButton v-tooltip="t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
+        {{ t('send') }}
       </UiButton>
-      <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="secondary" size="medium" disabled>
-        {{ $t('receive') }}
+      <UiButton v-tooltip="t('coming-soon')" accent="brand" variant="secondary" size="medium" disabled>
+        {{ t('receive') }}
       </UiButton>
     </div>
   </div>
@@ -19,8 +19,11 @@ import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import UiTextarea from '@core/components/ui/text-area/UiTextarea.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const modelValue = ref('')
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

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

@@ -1,29 +1,22 @@
 <template>
-  <UiButtonIcon v-tooltip="copied && $t('core.copied')" :icon size="medium" accent="brand" @click="copyToClipboard()" />
+  <UiButtonIcon v-tooltip="copied && t('core.copied')" :icon size="medium" accent="brand" @click="copy()" />
 </template>
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCheckCircle, faCopy } from '@fortawesome/free-solid-svg-icons'
-import { useClipboard, useTimeoutFn } from '@vueuse/core'
-import { ref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { value } = defineProps<{
   value: string
 }>()
 
-const { copy, copied } = useClipboard()
+const { t } = useI18n()
 
-const icon = ref(faCopy)
+const { copy, copied } = useClipboard({ source: () => value })
 
-const { start: changeIcon } = useTimeoutFn(() => {
-  icon.value = faCopy
-}, 1_500) // 1.5s is time to toltips is visible
-
-function copyToClipboard() {
-  copy(value)
-  icon.value = faCheckCircle
-  changeIcon()
-}
+const icon = computed(() => (copied.value ? faCheckCircle : faCopy))
 </script>

package/lib/components/dropdown/DropdownTitle.vue

@@ -10,10 +10,10 @@
     </div>
     <div v-if="onToggleSelectAll" class="buttons">
       <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">
-        {{ $t('core.select.all') }}
+        {{ t('core.select.all') }}
       </span>
       <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">
-        {{ $t('core.select.none') }}
+        {{ t('core.select.none') }}
       </span>
     </div>
   </div>
@@ -22,6 +22,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { useI18n } from 'vue-i18n'
 
 withDefaults(
   defineProps<{
@@ -35,6 +36,8 @@ withDefaults(
 const emit = defineEmits<{
   toggleSelectAll: [value: boolean]
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/icon/NewVtsIcon.vue

@@ -0,0 +1,49 @@
+<template>
+  <DisplayIcon v-if="icon" class="vts-icon" :class="className" :icon />
+</template>
+
+<script lang="ts" setup>
+import { type IconName, icons } from '@core/icons'
+import { DisplayIcon } from '@core/packages/icon'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+
+export type IconSize = 'small' | 'medium' | 'large' | 'current'
+
+const { size, name } = defineProps<{
+  size: IconSize
+  name: IconName
+}>()
+
+const className = computed(() =>
+  toVariants({
+    size: size === 'current' ? undefined : size,
+  })
+)
+
+const icon = computed(() => {
+  const icon = icons[name]
+
+  if (icon === undefined) {
+    console.warn(`Icon "${name}" not found.`)
+  }
+
+  return icon
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-icon {
+  &.size--small {
+    font-size: 1.2rem;
+  }
+
+  &.size--medium {
+    font-size: 1.6rem;
+  }
+
+  &.size--large {
+    font-size: 2rem;
+  }
+}
+</style>

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>