@xen-orchestra/web-core 0.31.1 → 0.33.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/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

@@ -88,12 +88,11 @@ const open = (event: MouseEvent) => {
 .menu-list {
   display: inline-flex;
   flex-direction: column;
-  padding: 0.4rem;
   cursor: default;
   color: var(--color-neutral-txt-primary);
   border-radius: 0.4rem;
   background-color: var(--color-neutral-background-primary);
-  gap: 0.2rem;
+  z-index: 1010;
 
   &.horizontal {
     flex-direction: row;

package/lib/components/menu/MenuTrigger.vue

@@ -20,17 +20,11 @@ defineProps<{
 
 <style lang="postcss" scoped>
 .menu-trigger {
-  font-size: 1.6rem;
-  font-weight: 400;
   display: flex;
   align-items: center;
-  height: 4.4rem;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  white-space: nowrap;
-  border-radius: 0.8rem;
-  gap: 1rem;
-  background-color: var(--color-neutral-background-primary);
+  padding-inline: 1.6rem;
+  gap: 0.8rem;
+  height: 4.5rem;
 
   &.disabled {
     color: var(--color-neutral-txt-secondary);
@@ -40,12 +34,12 @@ defineProps<{
     cursor: pointer;
 
     &:hover {
-      background-color: var(--color-brand-background-selected);
+      background-color: var(--color-brand-background-hover);
     }
 
     &:active,
     &.active {
-      background-color: var(--color-brand-background-hover);
+      background-color: var(--color-brand-background-active);
     }
   }
 }

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/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/breadcrumb/UiBreadcrumb.vue

@@ -0,0 +1,79 @@
+<!-- v2 -->
+<template>
+  <nav class="ui-breadcrumb" :class="className" :aria-label="t('aria.breadcrumb.label')">
+    <ol>
+      <li v-for="child in slots.default()" :key="child.ctx.uid">
+        <component :is="child" />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { useMapper } from '@core/packages/mapper'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { size } = defineProps<{
+  size: 'small' | 'medium'
+}>()
+
+const slots = defineSlots<{
+  default(): any
+}>()
+
+const { t } = useI18n()
+
+const fontWeight = useMapper(
+  () => size,
+  {
+    small: 'typo-body-bold-small',
+    medium: 'typo-body-bold',
+  },
+  'medium'
+)
+
+const className = computed(() => [toVariants({ size }), fontWeight.value])
+</script>
+
+<style lang="postcss" scoped>
+.ui-breadcrumb {
+  ol {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    flex-wrap: wrap;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    color: var(--color-neutral-txt-primary);
+  }
+
+  li:not(:last-child)::after {
+    content: '';
+    display: inline-block;
+    margin-inline: 0.8rem 0.4rem;
+    border-inline-end: 0.2rem solid var(--color-neutral-txt-secondary);
+    border-block-start: 0.2rem solid var(--color-neutral-txt-secondary);
+    transform: rotate(45deg);
+    vertical-align: middle;
+  }
+
+  &.size--small {
+    li:not(:last-child)::after {
+      width: 0.7rem;
+      height: 0.7rem;
+    }
+  }
+
+  &.size--medium {
+    li:not(:last-child)::after {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+  }
+}
+</style>