@xen-orchestra/web-core 0.55.0 → 0.57.0

package/lib/components/operation-card/VtsOperationCard.vue

@@ -12,9 +12,10 @@
 </template>
 
 <script lang="ts" setup>
-import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import { useUiStore } from '@core/stores/ui.store.ts'
+import type { StateHeroType } from '@core/types/state-hero.type.ts'
 
 defineProps<{
   title: string

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/panel/VtsPanel.vue

@@ -0,0 +1,80 @@
+<!-- v5 -->
+<template>
+  <UiPanel :error>
+    <template v-if="needsHeader" #header>
+      <slot v-if="slots.header" name="header" />
+      <div v-if="slots.actions || slots['more-actions']" class="action-buttons">
+        <template v-if="slots.actions">
+          <slot name="actions" />
+        </template>
+        <MenuList v-if="slots['more-actions']" placement="bottom-end">
+          <template #trigger="{ open }">
+            <UiButtonIcon icon="action:more-actions" accent="brand" size="medium" @click="open($event)" />
+          </template>
+          <slot name="more-actions" />
+        </MenuList>
+      </div>
+      <div v-if="slots['corner-actions'] || closable" class="corner-actions">
+        <slot v-if="slots['corner-actions']" name="corner-actions" />
+        <UiButtonIcon
+          v-if="closable"
+          v-tooltip="t('action:close')"
+          size="small"
+          variant="tertiary"
+          accent="brand"
+          :icon="closeIcon"
+          @click="emit('close')"
+        />
+      </div>
+    </template>
+    <slot />
+  </UiPanel>
+</template>
+
+<script setup lang="ts">
+import MenuList from '@core/components/menu/MenuList.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiPanel from '@core/components/ui/panel/UiPanel.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { closable, closeIcon = 'action:close-cancel-clear' } = defineProps<{
+  error?: boolean
+  closable?: boolean
+  closeIcon?: IconName
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  header?(): any
+  actions?(): any
+  'more-actions'?(): any
+  'corner-actions'?(): any
+}>()
+
+const { t } = useI18n()
+
+const needsHeader = computed(
+  () => slots.header || slots.actions || slots['more-actions'] || slots['corner-actions'] || closable
+)
+</script>
+
+<style scoped lang="postcss">
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+.corner-actions {
+  display: flex;
+  align-items: center;
+  margin-inline-start: auto;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/panel/VtsSidePanel.vue

@@ -0,0 +1,140 @@
+<!-- v5 -->
+<template>
+  <div class="vts-side-panel-sticky" :class="{ mobile: uiStore.isSmall }">
+    <VtsPanel
+      :closable="hasSelection"
+      :close-icon="uiStore.isSmall ? 'fa:angle-left' : 'action:close-cancel-clear'"
+      class="vts-side-panel"
+      :class="{
+        locked: panelStore.isLocked && !uiStore.isSmall,
+        mobile: uiStore.isSmall,
+      }"
+      @close="handleClose"
+    >
+      <template v-if="slots.actions" #actions>
+        <slot name="actions" />
+      </template>
+
+      <template v-if="slots['more-actions']" #more-actions>
+        <slot name="more-actions" />
+      </template>
+
+      <template v-if="slots['corner-actions'] || !uiStore.isSmall" #corner-actions>
+        <slot v-if="slots['corner-actions']" name="corner-actions" />
+        <UiButtonIcon
+          v-if="!uiStore.isSmall"
+          v-tooltip="{
+            content: panelStore.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
+            placement: 'left',
+          }"
+          accent="brand"
+          size="small"
+          :icon="panelStore.isLocked ? 'action:pin-panel-hide' : 'action:pin-panel'"
+          @click="panelStore.toggleLock()"
+        />
+      </template>
+
+      <VtsStateHero v-if="!hasSelection" format="panel" type="no-selection" size="medium" />
+      <slot v-else />
+    </VtsPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsPanel from '@core/components/panel/VtsPanel.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { usePanelStore } from '@core/stores/panel.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { hasSelection } = defineProps<{
+  hasSelection?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  actions?(): any
+  'more-actions'?(): any
+  'corner-actions'?(): any
+}>()
+
+const panelStore = usePanelStore()
+const uiStore = useUiStore()
+
+const { t } = useI18n()
+
+watch(
+  [() => hasSelection, () => panelStore.isLocked, () => uiStore.isSmall],
+  ([hasSelection]) => {
+    if (hasSelection === undefined) {
+      return
+    }
+
+    panelStore.syncWithSelection(hasSelection)
+  },
+  { immediate: true }
+)
+
+function handleClose() {
+  if (panelStore.syncsOpenStateWithSelection) {
+    panelStore.collapse()
+  }
+
+  emit('close')
+}
+</script>
+
+<style scoped lang="postcss">
+.vts-side-panel-sticky:not(.mobile) {
+  position: sticky;
+  top: 0;
+  align-self: start;
+}
+
+.vts-side-panel {
+  width: var(--side-panel-width, 40rem);
+  transition: transform 0.25s;
+
+  &:not(.mobile) {
+    --panel-viewport-height: calc(100dvh - 5.6rem);
+    --panel-min-height: calc(100dvh - 16.6rem);
+
+    min-height: var(--panel-min-height);
+    max-height: var(--panel-viewport-height);
+    overflow: hidden;
+    transform: translateX(v-bind('panelStore.cssHorizontalOffset'));
+
+    :deep(> .content) {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+    }
+  }
+
+  &.mobile {
+    z-index: 1010;
+    position: fixed;
+    width: 100dvw;
+    height: 100dvh;
+    inset: 0;
+    transform: translateX(v-bind('panelStore.cssHorizontalOffset'));
+
+    :deep(.corner-actions) {
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+      order: -1;
+    }
+
+    :deep(> .content) {
+      overflow: auto;
+    }
+  }
+}
+</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"
@@ -24,6 +23,7 @@
               :placeholder="searchPlaceholder"
               right-icon="fa:magnifying-glass"
               accent="brand"
+              detached
             />
           </div>
         </template>
@@ -46,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,
@@ -61,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>

package/lib/components/state-hero/VtsStateHero.vue

@@ -9,32 +9,24 @@
       <div v-if="success">{{ t('all-good!') }}</div>
       <slot />
     </div>
+    <div v-else-if="type === 'no-selection'" :class="typoClass" class="content">
+      <I18nT keypath="select-to-see-details" scope="global" tag="p">
+        <template #icon>
+          <VtsIcon name="fa:eye" size="current" />
+        </template>
+      </I18nT>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { useUiStore } from '@core/stores/ui.store'
+import type { StateHeroFormat, StateHeroSize, StateHeroType } from '@core/types/state-hero.type.ts'
 import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-
-export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
-
-export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'
-
-export type StateHeroType =
-  | 'busy'
-  | 'no-result'
-  | 'under-construction'
-  | 'no-data'
-  | 'no-selection'
-  | 'error'
-  | 'not-found'
-  | 'offline'
-  | 'all-good'
-  | 'all-done'
-  | 'creating'
+import VtsIcon from '../icon/VtsIcon.vue'
 
 const { format, type, size, horizontal } = defineProps<{
   format: StateHeroFormat

package/lib/components/table/VtsTable.vue

@@ -16,9 +16,10 @@
 </template>
 
 <script lang="ts" setup>
-import VtsStateHero, { type StateHeroSize, type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiTablePagination from '@core/components/ui/table-pagination/UiTablePagination.vue'
 import type { PaginationBindings } from '@core/composables/pagination.composable'
+import type { StateHeroType, StateHeroSize } from '@core/types/state-hero.type.ts'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { toVariants } from '@core/utils/to-variants.util'
 import { useResizeObserver, useScroll } from '@vueuse/core'

package/lib/components/table/cells/VtsActionCell.vue

@@ -9,6 +9,9 @@
         @click="emit('click')"
       />
       <VtsActionsMenu v-if="actions.length" :actions />
+      <VtsActionsMenu v-else>
+        <slot />
+      </VtsActionsMenu>
     </div>
   </UiTableCell>
 </template>
@@ -34,6 +37,10 @@ const {
 const emit = defineEmits<{
   click: []
 }>()
+
+defineSlots<{
+  default(): any
+}>()
 </script>
 
 <style scoped lang="postcss">

package/lib/components/table/cells/VtsLinkCell.vue

@@ -1,7 +1,7 @@
 <template>
   <UiTableCell>
     <div class="vts-link-cell">
-      <UiLink size="medium" :icon :to :href :target class="link">
+      <UiLink size="medium" :icon :busy :busy-tooltip :to :href :target class="link">
         <slot />
         <VtsIcon v-if="rightIcon" v-tooltip="rightIcon.tooltip ?? false" :name="rightIcon.icon" size="medium" />
       </UiLink>
@@ -21,6 +21,8 @@ import type { IconName } from '@core/icons'
 
 export type VtsLinkCellProps = LinkOptions & {
   icon?: IconName
+  busy?: boolean
+  busyTooltip?: string
   rightIcon?: {
     icon: IconName
     tooltip?: string

package/lib/components/table/cells/VtsProgressBarCell.vue

@@ -1,7 +1,7 @@
 <template>
   <UiTableCell>
     <div class="container">
-      <VtsProgressBar :current :total noruler class="progress" />
+      <VtsProgressBar :current :total no-ruler class="progress" />
       <span>{{ n(percentage / 100, { maximumFractionDigits: 0, style: 'percent' }) }}</span>
     </div>
   </UiTableCell>

package/lib/components/table/cells/VtsUserNameCell.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiTableCell>
+    <div class="user-name">
+      <UiUserLogo size="small" />
+      <UiLink :href size="medium">
+        {{ content }}
+      </UiLink>
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import UiLink from '@core/components/ui/link/UiLink.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
+
+defineProps<{
+  content: string
+  href?: string
+}>()
+</script>
+
+<style scoped lang="postcss">
+.user-name {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -19,8 +19,8 @@
 import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Task } from '@core/types/task.type.ts'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'

package/lib/components/task/VtsQuickTaskList.vue

@@ -27,7 +27,7 @@
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import UiQuickTaskItem from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
-import type { Task } from '@core/types/task.type.ts'
+import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
 import { useI18n } from 'vue-i18n'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 

package/lib/components/tree/VtsTreeItem.vue

@@ -6,15 +6,16 @@
 </template>
 
 <script lang="ts" setup>
+import { useLeftSidebarStore } from '@core/packages/sidebar'
 import type { TreeNodeId } from '@core/packages/tree/types.ts'
-import { useSidebarStore } from '@core/stores/sidebar.store'
-import { useUiStore } from '@core/stores/ui.store'
-import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util.ts'
 import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vue'
 
 const props = defineProps<{
   nodeId?: TreeNodeId
   expanded?: boolean
+  hasChildren?: boolean
 }>()
 
 defineSlots<{
@@ -22,13 +23,18 @@ defineSlots<{
   sublist?(): any
 }>()
 
-const sidebar = useSidebarStore()
+const sidebar = useLeftSidebarStore()
 const uiStore = useUiStore()
-const hasChildren = ref(false)
+const hasChildrenState = ref(false)
 
 const updateHasChildren = () => {
+  if (props.hasChildren !== undefined) {
+    hasChildrenState.value = props.hasChildren
+    return
+  }
+
   const { sublist } = useSlots()
-  hasChildren.value = sublist !== undefined
+  hasChildrenState.value = sublist !== undefined
 }
 
 const handleClick = () => {
@@ -40,6 +46,6 @@ const handleClick = () => {
 onBeforeMount(() => updateHasChildren())
 onBeforeUpdate(() => updateHasChildren())
 
-provide(IK_TREE_ITEM_HAS_CHILDREN, hasChildren)
+provide(IK_TREE_ITEM_HAS_CHILDREN, hasChildrenState)
 provide(IK_TREE_ITEM_EXPANDED, toRef(props, 'expanded'))
 </script>