@xen-orchestra/web-core 0.56.0 → 0.57.0

package/lib/assets/css/base.pcss

@@ -90,3 +90,8 @@ pre {
     --scrollbar-border: 0.2rem;
   }
 }
+
+.em-dash-prefix::before {
+  content: '\2014'; /* em dash — */
+  margin-inline-end: 0.8rem;
+}

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

@@ -51,10 +51,10 @@ const unsortedMessages = useArrayMap(
   })
 )
 
-const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['danger', 'warning', 'success', 'info'])
+const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['muted', 'info', 'success', 'warning', 'danger'])
 
 const labelAccent = useMapper<InfoAccent, LabelAccent>(
-  () => messages.value[0]?.accent,
+  () => messages.value.at(-1)?.accent,
   {
     info: 'neutral',
     success: 'neutral',

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -1,27 +1,30 @@
 <template>
-  <div
-    :class="{
-      locked: sidebar.isLocked && !ui.isSmall,
-      expanded: sidebar.isExpanded,
-      mobile: ui.isSmall,
-      'border-right': !ui.isSmall,
-    }"
-    class="vts-layout-sidebar"
-  >
-    <div v-if="!ui.isSmall" class="lock">
-      <UiButtonIcon
-        v-tooltip="{
-          content: sidebar.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
-          placement: 'right',
-        }"
-        accent="brand"
-        size="small"
-        :icon="sidebar.isLocked ? 'fa:thumb-tack-slash' : 'fa:thumb-tack'"
-        @click="sidebar.toggleLock()"
-      />
+  <div :class="className" class="vts-layout-sidebar">
+    <div
+      v-if="!ui.isSmall"
+      :class="{ active: sidebar.isResizing }"
+      class="resize-handle"
+      @mousedown="sidebar.startResize"
+    />
+    <div v-if="slots.header || (showLock && !ui.isSmall)" class="header">
+      <div v-if="slots.header" class="start">
+        <slot name="header" />
+      </div>
+      <div v-if="showLock && !ui.isSmall" class="lock">
+        <UiButtonIcon
+          v-tooltip="{
+            content: sidebar.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
+            placement: lockTooltipPosition,
+          }"
+          accent="brand"
+          size="small"
+          :icon="sidebar.isLocked ? 'fa:thumb-tack-slash' : 'fa:thumb-tack'"
+          @click="sidebar.toggleLock()"
+        />
+      </div>
     </div>
-    <div v-if="slots.header">
-      <slot name="header" />
+    <div v-if="slots.subheader" class="subheader">
+      <slot name="subheader" />
     </div>
     <div class="content">
       <slot />
@@ -29,32 +32,47 @@
     <div v-if="slots.footer">
       <slot name="footer" />
     </div>
-    <div
-      v-if="!ui.isSmall"
-      :class="{ active: sidebar.isResizing }"
-      class="resize-handle"
-      @mousedown="sidebar.startResize"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
 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 { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { type SidebarSide, useLeftSidebarStore, useRightSidebarStore } from '@core/packages/sidebar'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+const { side = 'left', showLock = true } = defineProps<{
+  side?: SidebarSide
+  showLock?: boolean
+}>()
+
 const slots = defineSlots<{
   default(): any
   header?(): any
+  subheader?(): any
   footer?(): any
 }>()
 
 const { t } = useI18n()
 
-const sidebar = useSidebarStore()
 const ui = useUiStore()
+
+const leftSidebar = useLeftSidebarStore()
+const rightSidebar = useRightSidebarStore()
+const sidebar = computed(() => (side === 'right' ? rightSidebar : leftSidebar))
+
+const lockTooltipPosition = computed(() => (side === 'left' ? 'right' : 'left'))
+
+const className = computed(() => [
+  {
+    locked: sidebar.value.isLocked && !ui.isSmall,
+    bordered: !ui.isSmall,
+  },
+  ...toVariants({ side }),
+])
 </script>
 
 <style lang="postcss" scoped>
@@ -62,32 +80,74 @@ const ui = useUiStore()
   position: relative;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   height: 100%;
   background-color: var(--color-neutral-background-secondary);
   width: v-bind('sidebar.cssWidth');
   z-index: 1010;
   transition:
-    margin-left 0.25s,
+    margin-inline 0.25s,
     transform 0.25s;
 
-  &.border-right {
-    border-right: 0.1rem solid var(--color-neutral-border);
+  &.bordered {
+    &.side--left {
+      border-inline-end: 0.1rem solid var(--color-neutral-border);
+    }
+
+    &.side--right {
+      border-inline-start: 0.1rem solid var(--color-neutral-border);
+    }
   }
 
   &.locked {
-    margin-left: v-bind('sidebar.cssOffset');
+    &.side--left {
+      margin-inline-start: v-bind('sidebar.cssLockedOffset');
+    }
+
+    &.side--right {
+      margin-inline-end: v-bind('sidebar.cssLockedOffset');
+    }
   }
 
   &:not(.locked) {
     position: absolute;
-    transform: translateX(v-bind('sidebar.cssOffset'));
+
+    &.side--left {
+      inset-inline-start: 0;
+    }
+
+    &.side--right {
+      inset-inline-end: 0;
+    }
+
+    transform: translateX(v-bind('sidebar.cssUnlockedOffset'));
   }
 
-  .lock {
-    position: absolute;
-    inset-block-start: 0.8rem;
-    inset-inline-end: 1.2rem;
-    z-index: 1;
+  .header,
+  .subheader,
+  .content {
+    &:not(:last-child) {
+      border-block-end: 0.1rem solid var(--color-neutral-border);
+    }
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    background-color: var(--color-neutral-background-primary);
+
+    .start {
+      flex: 1;
+      overflow-x: auto;
+    }
+
+    .lock {
+      flex-shrink: 0;
+      margin-inline-start: auto;
+      margin-inline-end: 0.8rem;
+      margin-block: 0.4rem;
+      z-index: 2;
+    }
   }
 
   .content {
@@ -97,12 +157,13 @@ const ui = useUiStore()
 
   .resize-handle {
     position: absolute;
-    inset: 0 0 0 auto;
+    inset-block: 0;
     width: 0.8rem;
     background-color: transparent;
     cursor: col-resize;
     transition: background-color 0.4s;
     user-select: none;
+    z-index: 1;
 
     &:hover,
     &.active {
@@ -110,5 +171,17 @@ const ui = useUiStore()
       transition: background-color 0.05s;
     }
   }
+
+  &.side--left {
+    .resize-handle {
+      inset-inline-end: 0;
+    }
+  }
+
+  &.side--right {
+    .resize-handle {
+      inset-inline-start: 0;
+    }
+  }
 }
 </style>

package/lib/components/menu/MenuItem.vue

@@ -7,13 +7,21 @@
       :busy="isBusy"
       :disabled="isDisabled"
       :icon
+      class="typo-body-bold-small"
       @click="handleClick"
     >
       <slot />
     </MenuTrigger>
     <MenuList v-else :disabled="isDisabled">
       <template #trigger="{ open, isOpen }">
-        <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
+        <MenuTrigger
+          :active="isOpen"
+          :busy="isBusy"
+          :disabled="isDisabled"
+          class="typo-body-bold-small"
+          :icon
+          @click="open"
+        >
           <slot />
           <VtsIcon :name="submenuIcon" size="medium" class="submenu-icon" />
         </MenuTrigger>

package/lib/components/menu/MenuList.vue

@@ -69,13 +69,15 @@ const open = (event: MouseEvent) => {
 
   isOpen.value = true
 
+  const trigger = event.currentTarget as HTMLElement
+
   nextTick(() => {
     clearClickOutsideEvent = onClickOutside(menu, () => (isOpen.value = false), {
-      ignore: [event.currentTarget as HTMLElement],
+      ignore: () => [trigger, '.menu-list'],
       controls: false,
     })
 
-    placementJs(event.currentTarget as HTMLElement, unrefElement(menu), {
+    placementJs(trigger, unrefElement(menu), {
       placement: props.placement ?? (isParentHorizontal.value ? 'bottom-start' : 'right-start'),
     })
   })

package/lib/components/menu/VtsActionsMenu.vue

@@ -13,30 +13,30 @@
       />
     </template>
     <slot>
-    <MenuItem
-      v-for="(action, index) of actions"
-      :key="index"
-      :icon="action.icon"
-      :disabled="action.disabled"
-      :busy="action.busy"
-      :on-click="action.onClick"
-    >
-      {{ action.label }}
-      <i v-if="action.hint">{{ action.hint }}</i>
-      <template v-if="isGroupAction(action)" #submenu>
-        <MenuItem
-          v-for="(child, childIndex) of action.children"
-          :key="childIndex"
-          :icon="child.icon"
-          :disabled="child.disabled"
-          :busy="child.busy"
-          :on-click="child.onClick"
-        >
-          {{ child.label }}
-          <i v-if="child.hint">{{ child.hint }}</i>
-        </MenuItem>
-      </template>
-    </MenuItem>
+      <MenuItem
+        v-for="(action, index) of actions"
+        :key="index"
+        :icon="action.icon"
+        :disabled="action.disabled"
+        :busy="action.busy"
+        :on-click="action.onClick"
+      >
+        {{ action.label }}
+        <i v-if="action.hint" class="em-dash-prefix">{{ action.hint }}</i>
+        <template v-if="isGroupAction(action)" #submenu>
+          <MenuItem
+            v-for="(child, childIndex) of action.children"
+            :key="childIndex"
+            :icon="child.icon"
+            :disabled="child.disabled"
+            :busy="child.busy"
+            :on-click="child.onClick"
+          >
+            {{ child.label }}
+            <i v-if="child.hint" class="em-dash-prefix">{{ child.hint }}</i>
+          </MenuItem>
+        </template>
+      </MenuItem>
     </slot>
   </MenuList>
 </template>

package/lib/components/modal/VtsActionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal :accent icon="status:info-picto">
+  <VtsModal :accent :icon dismissible>
     <template #title>
       <span>{{ modalTexts.title }}</span>
     </template>
@@ -20,8 +20,9 @@ import VtsModal from '@core/components/modal/VtsModal.vue'
 import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
 import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
 import type { ModalAccent } from '@core/components/ui/modal/UiModal.vue'
+import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
-import type { ObjectType, VmActions } from '@core/types/object.type.ts'
+import type { ActionsByObject, HostActions, ObjectType, VmActions } from '@core/types/object.type.ts'
 import { useI18n } from 'vue-i18n'
 
 type ActionTexts = {
@@ -30,15 +31,37 @@ type ActionTexts = {
   action: string
 }
 
-const { action, object } = defineProps<{
+type TextMappingByObject = {
+  [O in ObjectType]: Record<ActionsByObject[O], ActionTexts>
+}
+
+type VtsActionModalVmProps = {
+  object: 'vm'
   action: VmActions
-  accent: ModalAccent
-  object: ObjectType
-}>()
+  hostName?: never
+}
+
+type VtsActionModalHostProps = {
+  object: 'host'
+  action: HostActions
+  hostName: string
+}
+
+const { action, object, hostName } = defineProps<
+  (VtsActionModalVmProps | VtsActionModalHostProps) & {
+    accent: ModalAccent
+    icon: IconName
+  }
+>()
+
+const defaultActionByObject: { [O in ObjectType]: ActionsByObject[O] } = {
+  vm: 'shutdown',
+  host: 'disable',
+}
 
 const { t } = useI18n()
 
-const textMappingsByObject: Record<ObjectType, Record<VmActions, ActionTexts>> = {
+const textMappingsByObject: TextMappingByObject = {
   vm: {
     'force-reboot': {
       title: t('modal:confirm-vm-force-reboot'),
@@ -61,11 +84,23 @@ const textMappingsByObject: Record<ObjectType, Record<VmActions, ActionTexts>> =
       action: t('modal:action:vm-shutdown'),
     },
   },
+  host: {
+    enable: {
+      title: t('modal:confirm-host-enable', { host: hostName }),
+      message: t('modal:host-enable-message'),
+      action: t('action:enable-host'),
+    },
+    disable: {
+      title: t('modal:confirm-host-disable', { host: hostName }),
+      message: t('modal:host-disable-message'),
+      action: t('action:disable-host'),
+    },
+  },
 }
 
 const modalTexts = useMapper(
   () => action,
-  () => textMappingsByObject[object],
-  () => 'shutdown'
+  () => textMappingsByObject[object] as Record<ActionsByObject[ObjectType], ActionTexts>,
+  () => defaultActionByObject[object]
 )
 </script>

package/lib/components/modal/VtsBlockedModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal accent="danger" icon="status:danger-picto">
+  <VtsModal accent="danger" icon="status:danger-picto" dismissible>
     <template #title>
       <span>{{ modalTexts.title }}</span>
     </template>

package/lib/components/modal/VtsDeleteModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal accent="warning" icon="status:warning-picto">
+  <VtsModal accent="warning" icon="status:warning-picto" dismissible>
     <template #title>
       <I18nT keypath="confirm-delete" scope="global" tag="div">
         <span class="n-delete">

package/lib/components/overlay/VtsOverlayButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <UiButton :accent="buttonAccent" :busy="isBusy" :disabled="isDisabled" :variant size="medium" @click="trigger">
+    <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 { useOverlayTrigger } from '@core/packages/overlay/use-overlay-trigger.ts'
+import { IK_OVERLAY_ACCENT } from '@core/utils/injection-keys.util.ts'
+import { inject } from 'vue'
+
+defineProps<{
+  variant: ButtonVariant
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const { isBusy, isDisabled, trigger } = useOverlayTrigger()
+
+const overlayAccent = inject(IK_OVERLAY_ACCENT, undefined)
+
+const buttonAccent = useMapper(
+  () => overlayAccent?.value,
+  {
+    info: 'brand',
+    warning: 'warning',
+    danger: 'danger',
+  },
+  'info'
+)
+</script>

package/lib/components/overlay/VtsOverlayCancelButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <VtsOverlayButton variant="secondary">
+    <slot>{{ t('cancel') }}</slot>
+  </VtsOverlayButton>
+</template>
+
+<script lang="ts" setup>
+import VtsOverlayButton from '@core/components/overlay/VtsOverlayButton.vue'
+import { useI18n } from 'vue-i18n'
+
+defineSlots<{
+  default?(): any
+}>()
+
+const { t } = useI18n()
+</script>

package/lib/components/overlay/VtsOverlayConfirmButton.vue

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

package/lib/components/overlay/VtsOverlayList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="vts-overlay-list">
+    <Transition name="fade">
+      <div v-if="overlayStore.overlays.length > 0" class="backdrop" />
+    </Transition>
+
+    <TransitionGroup tag="div" name="overlay" class="overlays">
+      <OverlayComponent
+        v-for="overlay of overlayStore.overlays"
+        :key="overlay.key"
+        class="overlay"
+        :overlay
+        :class="{ dimmed: !overlayStore.isCurrent(overlay.key) }"
+      />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import OverlayComponent from '@core/packages/overlay/OverlayComponent.vue'
+import { useOverlayStore } from '@core/packages/overlay/use-overlay-store.ts'
+
+const overlayStore = useOverlayStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-overlay-list {
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1011;
+    background-color: var(--color-opacity-primary);
+    pointer-events: none;
+
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transition: opacity 0.3s ease;
+    }
+
+    &.fade-enter-from,
+    &.fade-leave-to {
+      opacity: 0;
+    }
+  }
+
+  .overlays {
+    position: fixed;
+    inset: 0;
+    z-index: 1012;
+
+    /* The container only positions the stacked modals; each modal catches its own
+       clicks, so an empty container must let clicks through. */
+    pointer-events: none;
+
+    .overlay {
+      pointer-events: auto;
+      transition:
+        opacity 0.3s ease,
+        transform 0.3s ease,
+        filter 0.3s ease;
+
+      &.dimmed {
+        filter: brightness(0.8);
+      }
+
+      &.overlay-enter-from.ui-modal,
+      &.overlay-leave-to.ui-modal {
+        opacity: 0;
+      }
+
+      &.overlay-enter-from.ui-drawer,
+      &.overlay-leave-to.ui-drawer {
+        transform: translateX(100%);
+
+        &:dir(rtl) {
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
+}
+</style>

package/lib/components/progress-bar/VtsProgressBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vts-progress-bar">
-    <UiDataRuler v-if="!noruler" :max="percentageCap" :warning="threshold.payload" />
+    <UiDataRuler v-if="!noRuler" :max="percentageCap" :warning="threshold.payload" />
     <UiProgressBar :accent="threshold.payload.accent ?? 'info'" :fill-width :legend />
   </div>
 </template>
@@ -25,18 +25,20 @@ const {
   label,
   thresholds = defaultProgressThresholds(),
   legendType,
+  noRuler,
 } = defineProps<{
   current: number
   total: number
   label?: string
   legendType?: ProgressBarLegendType
   thresholds?: ProgressBarThresholdConfig
-  noruler?: boolean
+  noRuler?: boolean
 }>()
 
 const progress = useProgress(
   () => current,
-  () => total
+  () => total,
+  () => noRuler
 )
 
 const { percentageCap, percentage, fillWidth } = progress

package/lib/components/select/VtsSelect.vue

@@ -4,7 +4,6 @@
       ref="triggerRef"
       :accent
       :disabled="isDisabled"
-      :icon
       :model-value="selectedLabel"
       :placeholder
       :required="isRequired"
@@ -47,7 +46,6 @@ 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 { IconName } from '@core/icons'
 import {
   type FormSelect,
   type FormSelectId,
@@ -62,7 +60,6 @@ import { useI18n } from 'vue-i18n'
 const { accent, id } = defineProps<{
   accent: 'brand' | 'warning' | 'danger'
   id: TSelectId
-  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/space-card/VtsSpaceCard.vue

@@ -5,7 +5,7 @@
     </UiCardTitle>
 
     <div class="content">
-      <VtsProgressBar noruler :current="used" :total :label legend-type="percent" class="progress" />
+      <VtsProgressBar no-ruler :current="used" :total :label legend-type="percent" class="progress" />
 
       <VtsCardRowKeyValue>
         <template #key>{{ t('used-space') }}</template>