@xen-orchestra/web-core 0.54.0 → 0.56.0

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="vts-button-group">
+  <div class="vts-button-group" :class="{ 'no-stack': noStack }">
     <div class="line">
       <slot />
     </div>
@@ -10,6 +10,10 @@
 </template>
 
 <script lang="ts" setup>
+defineProps<{
+  noStack?: boolean
+}>()
+
 const slots = defineSlots<{
   default(): any
   tertiary?(): any
@@ -34,5 +38,11 @@ const slots = defineSlots<{
       flex-direction: column-reverse;
     }
   }
+
+  &.no-stack .line {
+    @media (--small) {
+      flex-direction: row;
+    }
+  }
 }
 </style>

package/lib/components/card-object-title/VtsCardObjectTitle.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="vts-card-object-title">
+    <UiLink v-if="label" size="medium" :to :href :icon>
+      {{ label }}
+    </UiLink>
+    <VtsCodeSnippet class="id" :content="id" copy />
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
+import UiLink from '@core/components/ui/link/UiLink.vue'
+import type { IconName } from '@core/icons/index.ts'
+import type { RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  id: string
+  label?: string
+  icon?: IconName
+  to?: RouteLocationRaw
+  href?: string
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-card-object-title {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.8rem;
+
+  .id {
+    width: 100%;
+  }
+}
+</style>

package/lib/components/code-snippet/VtsCodeSnippet.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="vts-code-snippet">
-    <slot>
-      {{ content }}
-    </slot>
+    <div v-tooltip="{ placement: 'bottom' }" class="content text-ellipsis">
+      <slot>
+        {{ content }}
+      </slot>
+    </div>
     <div v-if="copy || slots.addons" class="addons">
       <slot name="addons">
         <VtsCopyButton v-if="copy && content" :value="String(content)" />
@@ -13,6 +15,7 @@
 
 <script lang="ts" setup>
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 
 defineProps<{
   content?: string | number
@@ -27,13 +30,16 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .vts-code-snippet {
-  font-family: 'Courier New', Courier, monospace;
   font-size: 1.4rem;
-  color: var(--color-neutral-txt-primary);
   display: flex;
   align-items: center;
   gap: 0.8rem;
 
+  .content {
+    color: var(--color-neutral-txt-primary);
+    font-family: 'Courier New', Courier, monospace;
+  }
+
   .addons {
     margin-inline-start: auto;
     display: flex;

package/lib/components/drawer/VtsDrawer.vue

@@ -0,0 +1,89 @@
+<template>
+  <UiDrawer
+    :is-open="effectiveIsOpen"
+    :is-dismissible="dismissible"
+    v-on="{ dismiss: handleDismiss, afterLeave: onAfterLeave }"
+  >
+    <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>
+  </UiDrawer>
+</template>
+
+<script lang="ts" setup>
+import UiDrawer from '@core/components/ui/drawer/UiDrawer.vue'
+import { IK_DRAWER } from '@core/packages/drawer/types.ts'
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed, inject, onMounted, ref } from 'vue'
+
+const {
+  dismissible,
+  isOpen = undefined,
+  current,
+} = defineProps<{
+  dismissible?: boolean
+  isOpen?: boolean
+  current?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+
+const slots = defineSlots<{
+  content(): any
+  title?(): any
+  buttons?(): any
+}>()
+
+const drawer = inject(IK_DRAWER, undefined)
+
+const internalVisible = ref(false)
+
+onMounted(() => {
+  if (isOpen === undefined) {
+    internalVisible.value = true
+  }
+})
+
+const effectiveIsOpen = computed(() => isOpen ?? internalVisible.value)
+
+let afterLeaveCallback: (() => void) | undefined
+
+function onAfterLeave() {
+  afterLeaveCallback?.()
+  afterLeaveCallback = undefined
+}
+
+const handleDismiss = computed(() => {
+  if (!dismissible) {
+    return undefined
+  }
+
+  return () => {
+    if (isOpen !== undefined) {
+      emit('dismiss')
+      return
+    }
+
+    afterLeaveCallback = () => drawer?.value.onCancel()
+    internalVisible.value = false
+  }
+})
+
+const { escape } = useMagicKeys()
+
+whenever(escape, () => {
+  if (dismissible && current) {
+    handleDismiss.value?.()
+  }
+})
+</script>

package/lib/components/drawer/VtsDrawerButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <UiButton :accent :busy="drawer?.isBusy.value" :variant size="medium">
+    <slot />
+  </UiButton>
+</template>
+
+<script lang="ts" setup>
+import UiButton, { type ButtonAccent, type ButtonVariant } from '@core/components/ui/button/UiButton.vue'
+import { IK_DRAWER } from '@core/packages/drawer/types.ts'
+import { inject } from 'vue'
+
+const { accent = 'brand' } = defineProps<{
+  variant: ButtonVariant
+  accent?: ButtonAccent
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const drawer = inject(IK_DRAWER)
+</script>

package/lib/components/drawer/VtsDrawerCancelButton.vue

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

package/lib/components/drawer/VtsDrawerConfirmButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <VtsDrawerButton :accent variant="primary" @click="handleClick()">
+    <slot />
+  </VtsDrawerButton>
+</template>
+
+<script lang="ts" setup>
+import VtsDrawerButton from '@core/components/drawer/VtsDrawerButton.vue'
+import type { ButtonAccent } from '@core/components/ui/button/UiButton.vue'
+import { IK_DRAWER } from '@core/packages/drawer/types.ts'
+import { inject } from 'vue'
+
+const { onClick, accent = 'brand' } = defineProps<{
+  onClick?: () => void
+  accent?: ButtonAccent
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const drawer = inject(IK_DRAWER)
+
+function handleClick() {
+  if (onClick) {
+    onClick()
+    return
+  }
+
+  drawer?.value.onConfirm()
+}
+</script>

package/lib/components/drawer/VtsDrawerList.vue

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

package/lib/components/icon/VtsIcon.vue

@@ -1,10 +1,11 @@
 <template>
-  <UiLoader v-if="busy" />
+  <UiLoader v-if="busy" v-tooltip="busyTooltip ?? false" />
   <DisplayIcon v-else-if="icon" class="vts-icon" :class="className" :icon />
 </template>
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import { type IconName, icons } from '@core/icons'
 import { DisplayIcon } from '@core/packages/icon'
 import { toVariants } from '@core/utils/to-variants.util.ts'
@@ -16,6 +17,7 @@ const { size, name } = defineProps<{
   size: IconSize
   name: IconName | undefined
   busy?: boolean
+  busyTooltip?: string
 }>()
 
 const className = computed(() =>

package/lib/components/layout/VtsContentSidePanel.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="vts-content-side-panel"
+    :class="{
+      mobile: uiStore.isSmall,
+      'has-panel-column': hasPanelColumn,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePanelStore } from '@core/stores/panel.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { computed } from 'vue'
+
+const panelStore = usePanelStore()
+const uiStore = useUiStore()
+
+const hasPanelColumn = computed(() => (panelStore.isLocked || panelStore.isExpanded) && !uiStore.isSmall)
+</script>
+
+<style scoped lang="postcss">
+.vts-content-side-panel {
+  --side-panel-width: 40rem;
+
+  &:not(.mobile) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 0;
+    align-items: start;
+    overflow-x: clip;
+    min-height: min-content;
+    transition: grid-template-columns 0.25s;
+
+    &.has-panel-column {
+      grid-template-columns: minmax(0, 1fr) var(--side-panel-width);
+    }
+  }
+}
+</style>

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -59,6 +59,7 @@ const ui = useUiStore()
 
 <style lang="postcss" scoped>
 .vts-layout-sidebar {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -83,8 +84,10 @@ const ui = useUiStore()
   }
 
   .lock {
-    text-align: right;
-    padding: 0.8rem 0.8rem 0;
+    position: absolute;
+    inset-block-start: 0.8rem;
+    inset-inline-end: 1.2rem;
+    z-index: 1;
   }
 
   .content {

package/lib/components/menu/VtsActionsMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuList placement="bottom-end">
+  <MenuList placement="bottom-start">
     <template #trigger="{ open }">
       <UiButtonIcon
         v-tooltip="{
@@ -12,6 +12,7 @@
         @click="open($event)"
       />
     </template>
+    <slot>
     <MenuItem
       v-for="(action, index) of actions"
       :key="index"
@@ -22,7 +23,21 @@
     >
       {{ 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>
+    </slot>
   </MenuList>
 </template>
 
@@ -40,14 +55,33 @@ const { size = 'small', actions = [] } = defineProps<{
   actions?: ActionItem[]
 }>()
 
+defineSlots<{
+  default(): any
+}>()
+
 const { t } = useI18n()
 
-export type ActionItem = {
+type BaseActionItem = {
   label: string
   hint?: string
   icon?: IconName
-  onClick: () => any
   disabled?: boolean
   busy?: boolean
 }
+
+export type LeafActionItem = BaseActionItem & {
+  onClick: () => unknown
+  children?: never
+}
+
+export type GroupActionItem = BaseActionItem & {
+  onClick?: never
+  children: LeafActionItem[]
+}
+
+export type ActionItem = LeafActionItem | GroupActionItem
+
+function isGroupAction(action: ActionItem): action is GroupActionItem {
+  return 'children' in action
+}
 </script>

package/lib/components/modal/VtsModalButton.vue

@@ -26,7 +26,6 @@ const modalAccent = inject(IK_MODAL_ACCENT)
 const buttonAccent = useMapper(
   () => modalAccent?.value,
   {
-    success: 'brand',
     info: 'brand',
     warning: 'warning',
     danger: 'danger',

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/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>