@xen-orchestra/web-core 0.31.0 → 0.32.0

package/lib/assets/css/_colors.pcss

@@ -12,6 +12,10 @@
 
   --color-neutral-border: #d0d0d5;
 
+  /* OPACITY */
+
+  --color-opacity-primary: #1a1b3833;
+
   /* BRAND */
 
   --color-brand-txt-base: #6b63bf;
@@ -107,6 +111,10 @@
 
   --color-neutral-border: #363647;
 
+  /* OPACITY */
+
+  --color-opacity-primary: #1a1b3899;
+
   /* BRAND */
 
   --color-brand-txt-base: #9b92ff;

package/lib/components/backdrop/VtsBackdrop.vue

@@ -1,7 +1,15 @@
 <template>
-  <div class="vts-backdrop" />
+  <div class="vts-backdrop">
+    <slot />
+  </div>
 </template>
 
+<script lang="ts" setup>
+defineSlots<{
+  default?(): any
+}>()
+</script>
+
 <style lang="postcss" scoped>
 .vts-backdrop {
   position: fixed;

package/lib/components/button-group/VtsButtonGroup.vue

@@ -28,7 +28,11 @@ const slots = defineSlots<{
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 2.4rem;
+    gap: 1.6rem;
+
+    @media (--mobile) {
+      flex-direction: column-reverse;
+    }
   }
 }
 </style>

package/lib/components/menu/MenuList.vue

@@ -94,6 +94,7 @@ const open = (event: MouseEvent) => {
   border-radius: 0.4rem;
   background-color: var(--color-neutral-background-primary);
   gap: 0.2rem;
+  z-index: 1010;
 
   &.horizontal {
     flex-direction: row;

package/lib/components/modal/VtsModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <UiModal :icon :accent v-on="{ dismiss: handleDismiss, submit: handleSubmit }">
+    <template v-if="slots.title" #title>
+      <slot name="title" />
+    </template>
+
+    <template #content>
+      <slot name="content" />
+    </template>
+
+    <template v-if="slots.buttons" #buttons>
+      <slot name="buttons" />
+    </template>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import UiModal, { type ModalAccent } from '@core/components/ui/modal/UiModal.vue'
+import type { IconName } from '@core/icons'
+import { IK_MODAL } from '@core/packages/modal/types.ts'
+import { IK_MODAL_ACCENT } from '@core/utils/injection-keys.util.ts'
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed, inject, provide } from 'vue'
+
+const { accent, dismissible, onConfirm, onDismiss, current } = defineProps<{
+  accent: ModalAccent
+  icon?: IconName
+  dismissible?: boolean
+  onConfirm?: () => void
+  onDismiss?: () => void
+  current?: boolean
+}>()
+
+const emit = defineEmits<{
+  confirm: []
+  dismiss: []
+}>()
+
+const slots = defineSlots<{
+  content(): any
+  buttons?(): any
+  title?(): any
+}>()
+
+const modal = inject(IK_MODAL)
+
+provide(
+  IK_MODAL_ACCENT,
+  computed(() => accent)
+)
+
+const handleDismiss = computed(() => {
+  if (!dismissible) {
+    return undefined
+  }
+
+  if (onDismiss) {
+    return () => emit('dismiss')
+  }
+
+  return () => modal?.value.onCancel()
+})
+
+function handleSubmit(event: SubmitEvent) {
+  event.preventDefault()
+
+  if (onConfirm) {
+    emit('confirm')
+    return
+  }
+
+  modal?.value.onConfirm()
+}
+
+const { escape } = useMagicKeys()
+
+whenever(escape, () => {
+  if (dismissible && current) {
+    handleDismiss.value?.()
+  }
+})
+</script>

package/lib/components/modal/VtsModalButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <UiButton :accent="buttonAccent" :busy="modal?.isBusy.value" :variant size="medium">
+    <slot />
+  </UiButton>
+</template>
+
+<script lang="ts" setup>
+import UiButton, { type ButtonVariant } from '@core/components/ui/button/UiButton.vue'
+import { useMapper } from '@core/packages/mapper'
+import { IK_MODAL } from '@core/packages/modal/types.ts'
+import { IK_MODAL_ACCENT } from '@core/utils/injection-keys.util.ts'
+import { inject } from 'vue'
+
+defineProps<{
+  variant: ButtonVariant
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const modal = inject(IK_MODAL)
+
+const modalAccent = inject(IK_MODAL_ACCENT)
+
+const buttonAccent = useMapper(
+  () => modalAccent?.value,
+  {
+    success: 'brand',
+    info: 'brand',
+    warning: 'warning',
+    danger: 'danger',
+  },
+  'info'
+)
+</script>

package/lib/components/modal/VtsModalCancelButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <VtsModalButton variant="secondary" @click="handleClick">
+    <slot>{{ t('cancel') }}</slot>
+  </VtsModalButton>
+</template>
+
+<script lang="ts" setup>
+import VtsModalButton from '@core/components/modal/VtsModalButton.vue'
+import { IK_MODAL } from '@core/packages/modal/types.ts'
+import { inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { onClick } = defineProps<{
+  onClick?: () => void
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+defineSlots<{
+  default?(): any
+}>()
+
+const { t } = useI18n()
+
+const modal = inject(IK_MODAL)
+
+function handleClick() {
+  if (onClick) {
+    emit('click')
+    return
+  }
+
+  modal?.value.onCancel()
+}
+</script>

package/lib/components/modal/VtsModalConfirmButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <VtsModalButton variant="primary" :type="onClick ? 'button' : 'submit'" @click="emit('click')">
+    <slot />
+  </VtsModalButton>
+</template>
+
+<script lang="ts" setup>
+import VtsModalButton from '@core/components/modal/VtsModalButton.vue'
+
+const { onClick } = defineProps<{
+  onClick?: () => void
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+</script>

package/lib/components/modal/VtsModalList.vue

@@ -0,0 +1,34 @@
+<template>
+  <div v-if="modalStore.modals.length > 0" class="vts-modal-list">
+    <ModalProvider v-for="(modal, index) of modalStore.modals" :key="modal.id" :modal>
+      <component
+        :is="modal.component"
+        class="modal-component"
+        v-bind="modal.props"
+        :current="index === modalStore.modals.length - 1"
+        @confirm="modal.onConfirm"
+        @cancel="modal.onCancel"
+      />
+    </ModalProvider>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useModalStore } from '@core/packages/modal/modal.store.ts'
+import ModalProvider from '@core/packages/modal/ModalProvider.vue'
+
+const modalStore = useModalStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-modal-list {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-opacity-primary);
+  z-index: 1010;
+
+  .modal-component:not(:last-child) {
+    filter: brightness(0.8);
+  }
+}
+</style>

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

@@ -2,19 +2,14 @@
   <VtsIcon :name="iconName" :size />
 </template>
 
-<script generic="TType extends ObjectIconType" lang="ts" setup>
+<script generic="TType extends ObjectType, TState extends ObjectState<TType>" lang="ts" setup>
 import VtsIcon, { type IconSize } from '@core/components/icon/VtsIcon.vue'
-import type { ObjectIconName } from '@core/icons'
+import type { ObjectIconName, ObjectState, ObjectType } 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>
+  state: TState
   size: IconSize
 }>()
 

package/lib/components/status/VtsStatus.vue

@@ -0,0 +1,66 @@
+<template>
+  <UiInfo v-tooltip="iconOnly ? currentStatus.text : false" class="vts-status" :accent="currentStatus.accent">
+    <template v-if="!iconOnly">{{ currentStatus.text }}</template>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { useMapper } from '@core/packages/mapper'
+import { useI18n } from 'vue-i18n'
+
+export type Status =
+  | 'connecting'
+  | 'connected'
+  | 'disconnected'
+  | 'partially-connected'
+  | 'disconnected-from-physical-device'
+  | 'physically-disconnected'
+  | 'unable-to-connect-to-the-pool'
+  | 'success'
+  | 'skipped'
+  | 'interrupted'
+  | 'failure'
+  | 'pending'
+  | 'enabled'
+  | 'disabled'
+  | true
+  | false
+
+const { status } = defineProps<{
+  status: Status
+  iconOnly?: boolean
+}>()
+
+const { t } = useI18n()
+
+const currentStatus = useMapper<Status, { text: string; accent: InfoAccent }>(
+  () => status,
+  () => [
+    ['connecting', { text: t('connecting'), accent: 'info' }],
+    ['connected', { text: t('connected'), accent: 'success' }],
+    ['disconnected', { text: t('disconnected'), accent: 'danger' }],
+    ['partially-connected', { text: t('partially-connected'), accent: 'warning' }],
+    ['disconnected-from-physical-device', { text: t('disconnected-from-physical-device'), accent: 'warning' }],
+    ['physically-disconnected', { text: t('disconnected-from-physical-device'), accent: 'danger' }],
+    ['unable-to-connect-to-the-pool', { text: t('unable-to-connect-to-the-pool'), accent: 'danger' }],
+    ['success', { text: t('success'), accent: 'success' }],
+    ['skipped', { text: t('skipped'), accent: 'warning' }],
+    ['interrupted', { text: t('interrupted'), accent: 'danger' }],
+    ['failure', { text: t('failure'), accent: 'danger' }],
+    ['pending', { text: t('in-progress'), accent: 'info' }],
+    ['enabled', { text: t('enabled'), accent: 'success' }],
+    ['disabled', { text: t('disabled'), accent: 'muted' }],
+    [true, { text: t('enabled'), accent: 'success' }],
+    [false, { text: t('disabled'), accent: 'muted' }],
+  ],
+  false
+)
+</script>
+
+<style lang="postcss" scoped>
+.vts-status {
+  align-items: center;
+}
+</style>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -9,8 +9,9 @@
     @click="isPanelOpen = true"
   />
   <Teleport v-if="isPanelOpen" to="body">
-    <VtsBackdrop @click="isPanelOpen = false" />
-    <UiQuickTaskPanel ref="panelRef" :loading :tasks />
+    <VtsBackdrop @click.self="isPanelOpen = false">
+      <UiQuickTaskPanel ref="panelRef" :loading :tasks />
+    </VtsBackdrop>
   </Teleport>
 </template>
 

package/lib/components/task/VtsQuickTaskList.vue

@@ -1,15 +1,26 @@
 <template>
-  <ul :class="{ sublist }" class="vts-quick-task-list">
+  <DynamicScroller
+    v-if="!loading && tasks.length > 0"
+    :items="tasks"
+    :min-item-size="83"
+    class="vts-quick-task-list"
+    list-tag="ul"
+    item-tag="li"
+  >
+    <template #default="{ item: task, active }">
+      <DynamicScrollerItem :item="task" :active :size-dependencies="[task.subtasks]">
+        <UiQuickTaskItem :task />
+      </DynamicScrollerItem>
+    </template>
+  </DynamicScroller>
+  <ul v-else class="vts-quick-task-list">
     <li v-if="loading">
       <div class="loading">
         <UiLoader />
         <div>{{ t('loading') }}</div>
       </div>
     </li>
-    <template v-else>
-      <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>
+    <li v-else-if="tasks.length === 0" class="typo-body-bold">{{ t('tasks.no-tasks') }}</li>
   </ul>
 </template>
 
@@ -17,6 +28,7 @@
 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'
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 
 defineProps<{
   tasks: Task[]

package/lib/components/tree/VtsTreeItem.vue

@@ -1,8 +1,8 @@
 <template>
-  <li class="vts-tree-item" @click="handleClick()">
+  <div class="vts-tree-item" @click="handleClick()">
     <slot />
     <slot v-if="expanded" name="sublist" />
-  </li>
+  </div>
 </template>
 
 <script lang="ts" setup>

package/lib/components/ui/button/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- v6 -->
+<!-- v7 -->
 <template>
   <button :class="classNames" :disabled="busy || isDisabled || lockIcon" class="ui-button" type="button">
     <VtsIcon :busy :name="leftIcon" class="icon" size="current" />
@@ -14,9 +14,9 @@ import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
 
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
-type ButtonAccent = 'brand' | 'warning' | 'danger'
-type ButtonSize = 'small' | 'medium'
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+export type ButtonAccent = 'brand' | 'warning' | 'danger'
+export type ButtonSize = 'small' | 'medium'
 
 const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
   variant: ButtonVariant
@@ -111,17 +111,11 @@ const classNames = computed(() => [
         color: var(--color-brand-txt-item);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-brand-item-disabled);
         border-color: var(--color-brand-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-brand-item-base);
-        border-color: var(--color-brand-item-base);
-        color: var(--color-brand-txt-item);
-      }
     }
 
     &.variant--secondary {
@@ -145,17 +139,11 @@ const classNames = computed(() => [
         color: var(--color-brand-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-txt-secondary);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-brand-item-base);
-        color: var(--color-brand-txt-base);
-      }
     }
 
     &.variant--tertiary {
@@ -179,17 +167,11 @@ const classNames = computed(() => [
         color: var(--color-brand-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: transparent;
         border-color: transparent;
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-brand-background-selected);
-        border-color: var(--color-brand-background-selected);
-        color: var(--color-brand-txt-base);
-      }
     }
   }
 
@@ -215,17 +197,11 @@ const classNames = computed(() => [
         color: var(--color-warning-txt-item);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-warning-item-disabled);
         border-color: var(--color-warning-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-warning-item-base);
-        border-color: var(--color-warning-item-base);
-        color: var(--color-warning-txt-item);
-      }
     }
 
     &.variant--secondary {
@@ -249,17 +225,11 @@ const classNames = computed(() => [
         color: var(--color-warning-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-txt-secondary);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-warning-txt-base);
-        color: var(--color-warning-txt-base);
-      }
     }
 
     &.variant--tertiary {
@@ -283,17 +253,11 @@ const classNames = computed(() => [
         color: var(--color-warning-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: transparent;
         border-color: transparent;
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-warning-background-selected);
-        border-color: var(--color-warning-background-selected);
-        color: var(--color-warning-txt-base);
-      }
     }
   }
 
@@ -319,17 +283,11 @@ const classNames = computed(() => [
         color: var(--color-danger-txt-item);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-danger-item-disabled);
         border-color: var(--color-danger-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-danger-item-base);
-        border-color: var(--color-danger-item-base);
-        color: var(--color-danger-txt-item);
-      }
     }
 
     &.variant--secondary {
@@ -353,17 +311,11 @@ const classNames = computed(() => [
         color: var(--color-danger-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-txt-secondary);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-danger-txt-base);
-        color: var(--color-danger-txt-base);
-      }
     }
 
     &.variant--tertiary {
@@ -387,17 +339,11 @@ const classNames = computed(() => [
         color: var(--color-danger-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: transparent;
         border-color: transparent;
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-danger-background-selected);
-        border-color: var(--color-danger-background-selected);
-        color: var(--color-danger-txt-base);
-      }
     }
   }
 

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

@@ -1,7 +1,8 @@
 <!-- v5 -->
 <template>
   <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
-    <VtsIcon :name="icon" size="medium" class="left-icon" />
+    <UiLoader v-if="isSearching" />
+    <VtsIcon v-else :name="icon" size="medium" class="left-icon" />
     <input
       :id="wrapperController?.id ?? id"
       ref="inputRef"
@@ -30,6 +31,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 UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
@@ -57,6 +59,7 @@ const {
   icon?: IconName
   rightIcon?: IconName
   clearable?: boolean
+  isSearching?: boolean
 }>()
 
 const modelValue = defineModel<string | number>({ required: true })