@xen-orchestra/web-core 0.43.0 → 0.45.0

package/lib/components/query-builder/VtsQueryBuilderTreeLine.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="vts-query-builder-tree-line" :class="{ last }" />
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  last?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-query-builder-tree-line {
+  display: flex;
+  flex-direction: column;
+  margin-inline-start: 1rem;
+
+  &::before,
+  &::after {
+    content: '';
+    border-inline-start: 0.3rem solid #00000060;
+    padding-inline-start: 2rem;
+  }
+
+  &::before {
+    height: 3rem;
+    border-block-end: 0.3rem solid #00000060;
+  }
+
+  &::after {
+    flex: 1;
+  }
+
+  &.last {
+    &::before {
+      height: 2rem;
+    }
+    &::after {
+      border-inline-start: none;
+    }
+  }
+}
+</style>

package/lib/components/quick-info-row/VtsQuickInfoRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vts-quick-info-row" :class="{ mobile: uiStore.isMobile }">
+  <div class="vts-quick-info-row" :class="{ mobile: uiStore.isSmall }">
     <span v-tooltip class="typo-body-regular label text-ellipsis">
       <slot name="label">
         {{ label }}

package/lib/components/select/VtsSelect.vue

@@ -12,7 +12,7 @@
       readonly
     />
 
-    <Teleport v-if="isOpen" to="body">
+    <template v-if="isOpen">
       <VtsBackdrop />
 
       <UiDropdownList ref="dropdownRef" :style="floatingStyles" class="dropdown-list">
@@ -36,7 +36,7 @@
           </slot>
         </template>
       </UiDropdownList>
-    </Teleport>
+    </template>
   </div>
 </template>
 
@@ -95,6 +95,10 @@ const className = computed(() => toVariants({ accent }))
 const { width } = useElementSize(useCurrentElement())
 
 const minWidth = computed(() => `${width.value}px`)
+
+defineExpose({
+  focus: () => triggerRef.value?.focus(),
+})
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vts-stacked-bar-with-legend">
     <UiStackedBar :segments :max-value="maxValue" />
-    <VtsLegendList class="list" :horizontal="!uiStore.isMobile">
+    <VtsLegendList class="list" :horizontal="!uiStore.isSmall">
       <UiLegend
         v-for="segment in segments"
         :key="segment.label"

package/lib/components/tab/TabItem.vue

@@ -20,13 +20,13 @@ const props = withDefaults(
   { tag: 'span' }
 )
 
-const { isMobile } = storeToRefs(useUiStore())
+const { isSmall } = storeToRefs(useUiStore())
 
 const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => {
   return [
-    isMobile.value ? 'typo-caption-small' : 'typo-caption',
+    isSmall.value ? 'typo-caption-small' : 'typo-caption',
     {
       disabled: isDisabled.value,
       active: props.active,

package/lib/components/tree/VtsTreeItem.vue

@@ -32,7 +32,7 @@ const updateHasChildren = () => {
 }
 
 const handleClick = () => {
-  if (uiStore.isMobile) {
+  if (uiStore.isSmall) {
     sidebar.toggleExpand(false)
   }
 }

package/lib/components/ui/button-icon/UiButtonIcon.vue

@@ -17,13 +17,7 @@ export type ButtonIconAccent = 'brand' | 'warning' | 'danger'
 
 export type ButtonIconSize = 'small' | 'medium' | 'large'
 
-const {
-  accent,
-  size,
-  disabled,
-  selected,
-  targetScale = 1,
-} = defineProps<{
+const { accent, size, disabled, selected, targetScale } = defineProps<{
   icon: IconName
   size: ButtonIconSize
   accent: ButtonIconAccent
@@ -34,11 +28,13 @@ const {
 }>()
 
 const cssTargetScale = computed(() => {
-  if (typeof targetScale === 'number') {
-    return `scale(${targetScale})`
+  const scale = targetScale ?? (size === 'small' ? 1.6 : 1)
+
+  if (typeof scale === 'number') {
+    return `scale(${scale})`
   }
 
-  return `scale(${targetScale.x}, ${targetScale.y})`
+  return `scale(${scale.x}, ${scale.y})`
 })
 
 const classNames = computed(() => {

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

@@ -1,7 +1,12 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
+    <span v-if="readonly" class="typo-body-regular input text-ellipsis">
+      <input ref="inputRef" class="readonly-input" readonly type="text" />
+      {{ modelValue }}
+    </span>
     <input
+      v-else
       :id="wrapperController?.id ?? id"
       ref="inputRef"
       :value="modelValue"
@@ -15,7 +20,6 @@
     <UiButtonIcon
       v-if="!disabled && modelValue && clearable"
       icon="fa:xmark"
-      :target-scale="1.6"
       accent="brand"
       size="small"
       @click="clear()"
@@ -53,13 +57,18 @@ const {
   id?: string
   required?: boolean
   disabled?: boolean
+  readonly?: boolean
   type?: InputType
   icon?: IconName
   rightIcon?: IconName
   clearable?: boolean
 }>()
 
-const modelValue = defineModel<string | number>({ required: true })
+const emit = defineEmits<{
+  clear: []
+}>()
+
+const modelValue = defineModel<string | number | undefined>({ required: true })
 
 const slots = defineSlots<{
   'right-icon'?(): any
@@ -97,6 +106,7 @@ function focus() {
 
 function clear() {
   modelValue.value = ''
+  emit('clear')
   focus()
 }
 
@@ -115,7 +125,7 @@ defineExpose({ focus })
   color: var(--color-neutral-txt-primary);
   height: 4rem;
   width: 100%;
-  min-width: 15rem;
+  text-align: left;
   padding-inline: 1.6rem;
 
   .right-icon {
@@ -123,6 +133,12 @@ defineExpose({ focus })
     color: var(--color-brand-txt-base);
   }
 
+  .readonly-input {
+    border: none;
+    width: 0;
+    padding: 0;
+  }
+
   .input {
     background-color: transparent;
     border: none;

package/lib/components/ui/modal/UiModal.vue

@@ -85,7 +85,6 @@ const className = computed(() => toVariants({ accent }))
     padding: 3.2rem 2.4rem 2.4rem;
     gap: 2.4rem;
     border-radius: 1rem;
-    overflow: auto;
 
     &:not(:has(.buttons)) {
       padding-bottom: 3.2rem;

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

@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <div class="ui-panel" :class="{ error, 'mobile-drawer': uiStore.isMobile }">
+  <div class="ui-panel" :class="{ error, 'mobile-drawer': uiStore.isSmall }">
     <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>

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

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
-    <label v-if="uiStore.isDesktopLarge" :for="id" class="typo-body-regular-small label">
+    <label v-if="uiStore.isLarge" :for="id" class="typo-body-regular-small label">
       {{ t('query-search-bar:label') }}
     </label>
     <UiInput
@@ -9,11 +9,11 @@
       v-model="value"
       type="text"
       accent="brand"
-      :aria-label="uiStore.isMobile ? t('query-search-bar:label') : undefined"
-      :icon="!uiStore.isMobile ? 'fa:magnifying-glass' : undefined"
+      :aria-label="uiStore.isSmall ? t('query-search-bar:label') : undefined"
+      :icon="!uiStore.isSmall ? 'fa:magnifying-glass' : undefined"
       :placeholder="t('query-search-bar:placeholder')"
     />
-    <template v-if="!uiStore.isMobile">
+    <template v-if="!uiStore.isSmall">
       <UiButton size="medium" accent="brand" variant="primary" type="submit" class="action-button">
         {{ t('action:search') }}
       </UiButton>

package/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue

@@ -1,6 +1,6 @@
 <!-- WIP -->
 <template>
-  <div :class="{ mobile: isMobile }" class="ui-quick-task-panel">
+  <div :class="{ mobile: isSmall }" class="ui-quick-task-panel">
     <VtsQuickTaskTabBar
       v-model="currentTab"
       :failure-count="failureTasks.length"
@@ -24,7 +24,7 @@ const props = defineProps<{
   loading?: boolean
 }>()
 
-const { isMobile } = useUiStore()
+const { isSmall } = useUiStore()
 
 const currentTab = ref<TaskTab>('pending')
 

package/lib/composables/debounced-ref.composable.ts

@@ -0,0 +1,40 @@
+import { useDebounceFn } from '@vueuse/shared'
+import { type Ref, type ComputedRef, ref, computed, watch } from 'vue'
+
+export type UseDebouncedRefReturn<TValue> = {
+  value: Ref<TValue>
+  debouncedValue: ComputedRef<TValue>
+  isDebouncing: ComputedRef<boolean>
+  forceUpdate: () => void
+}
+
+export function useDebouncedRef<TValue>(initialValue: TValue, delay: number): UseDebouncedRefReturn<TValue> {
+  const value = ref(initialValue) as Ref<TValue>
+
+  const debouncedValue = ref(initialValue) as Ref<TValue>
+
+  const updater = useDebounceFn(() => {
+    debouncedValue.value = value.value
+  }, delay)
+
+  watch(value, newValue => {
+    if (!newValue) {
+      debouncedValue.value = newValue
+    } else {
+      updater()
+    }
+  })
+
+  const isDebouncing = computed(() => debouncedValue.value !== value.value)
+
+  function forceUpdate() {
+    debouncedValue.value = value.value
+  }
+
+  return {
+    value,
+    debouncedValue: computed(() => debouncedValue.value),
+    isDebouncing,
+    forceUpdate,
+  }
+}

package/lib/composables/pagination.composable.ts

@@ -81,7 +81,7 @@ export function usePagination<T>(id: string, _records: MaybeRefOrGetter<T[]>) {
   const uiStore = useUiStore()
 
   const paginationBindings = computed<PaginationBindings>(() => ({
-    size: (uiStore.isMobile ? 'small' : 'medium') as TablePaginationSize,
+    size: (uiStore.isSmall ? 'small' : 'medium') as TablePaginationSize,
     showBy: showBy.value,
     'onUpdate:showBy': (value: number) => (showBy.value = value),
     from: Math.max(0, startIndex.value + 1),

package/lib/composables/tree-filter.composable.ts

@@ -1,14 +1,23 @@
+import { useDebouncedRef } from '@core/composables/debounced-ref.composable.ts'
 import type { TreeNodeBase } from '@core/packages/tree/tree-node-base'
-import { refDebounced } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+import { whenever } from '@vueuse/shared'
+import { computed } from 'vue'
 
 export function useTreeFilter() {
-  const filter = ref('')
-  const debouncedFilter = refDebounced(filter, 500)
-  const hasFilter = computed(() => filter.value.trim().length > 0)
-  const isSearching = computed(() =>
-    filter.value.trim().length === 0 ? false : filter.value !== debouncedFilter.value
+  const {
+    value: filter,
+    debouncedValue: debouncedFilter,
+    isDebouncing: isSearching,
+    forceUpdate,
+  } = useDebouncedRef('', 500)
+
+  whenever(
+    () => filter.value === '',
+    () => forceUpdate()
   )
+
+  const hasFilter = computed(() => filter.value.trim().length > 0)
+
   const predicate = (node: TreeNodeBase) =>
     hasFilter.value ? node.label.toLocaleLowerCase().includes(debouncedFilter.value.toLocaleLowerCase()) : undefined
 

package/lib/i18n.ts

@@ -81,6 +81,10 @@ export const locales: Locales = {
     code: 'pl',
     name: 'Polski',
   },
+  'zh-Hans': {
+    code: 'zh-Hans',
+    name: '中文（简体）',
+  },
 }
 
 export default createI18n({

package/lib/icons/fa-icons.ts

@@ -42,6 +42,7 @@ import {
   faCircleXmark,
   faCity,
   faClock,
+  faClone,
   faClose,
   faCode,
   faComments,
@@ -84,6 +85,7 @@ import {
   faMinus,
   faMoon,
   faNetworkWired,
+  faObjectGroup,
   faPause,
   faPencil,
   faPlay,
@@ -98,6 +100,7 @@ import {
   faSatellite,
   faServer,
   faSliders,
+  faSpinner,
   faSquare,
   faSquareCaretDown,
   faStar,
@@ -149,8 +152,9 @@ export const faIcons = defineIconPack({
   'circle-user': { icon: faCircleUser },
   'circle-xmark': { icon: faCircleXmark },
   city: { icon: faCity },
-  close: { icon: faClose },
   clock: { icon: faClock },
+  clone: { icon: faClone },
+  close: { icon: faClose },
   code: { icon: faCode },
   comments: { icon: faComments },
   copy: { icon: faCopy },
@@ -197,6 +201,7 @@ export const faIcons = defineIconPack({
   minus: { icon: faMinus },
   moon: { icon: faMoon },
   'network-wired': { icon: faNetworkWired },
+  'object-group': { icon: faObjectGroup },
   pause: { icon: faPause },
   pencil: { icon: faPencil },
   play: { icon: faPlay },
@@ -210,6 +215,7 @@ export const faIcons = defineIconPack({
   satellite: { icon: faSatellite },
   server: { icon: faServer },
   sliders: { icon: faSliders },
+  spinner: { icon: faSpinner, spin: true },
   square: { icon: faSquare },
   'square-caret-down': { icon: faSquareCaretDown },
   'square-check': { icon: faSquareCheck },