@xen-orchestra/web-core 0.55.0 → 0.56.0

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

@@ -24,7 +24,11 @@ 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, current } = defineProps<{
+const {
+  dismissible,
+  isOpen = undefined,
+  current,
+} = defineProps<{
   dismissible?: boolean
   isOpen?: boolean
   current?: boolean

package/lib/components/drawer/VtsDrawerButton.vue

@@ -1,16 +1,17 @@
 <template>
-  <UiButton accent="brand" :busy="drawer?.isBusy.value" :variant size="medium">
+  <UiButton :accent :busy="drawer?.isBusy.value" :variant size="medium">
     <slot />
   </UiButton>
 </template>
 
 <script lang="ts" setup>
-import UiButton, { type ButtonVariant } from '@core/components/ui/button/UiButton.vue'
+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'
 
-defineProps<{
+const { accent = 'brand' } = defineProps<{
   variant: ButtonVariant
+  accent?: ButtonAccent
 }>()
 
 defineSlots<{

package/lib/components/drawer/VtsDrawerConfirmButton.vue

@@ -1,16 +1,18 @@
 <template>
-  <VtsDrawerButton variant="primary" @click="handleClick()">
+  <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 } = defineProps<{
+const { onClick, accent = 'brand' } = defineProps<{
   onClick?: () => void
+  accent?: ButtonAccent
 }>()
 
 defineSlots<{

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

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/select/VtsSelect.vue

@@ -24,6 +24,7 @@
               :placeholder="searchPlaceholder"
               right-icon="fa:magnifying-glass"
               accent="brand"
+              detached
             />
           </div>
         </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/tree/VtsTreeItem.vue

@@ -15,6 +15,7 @@ import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vu
 const props = defineProps<{
   nodeId?: TreeNodeId
   expanded?: boolean
+  hasChildren?: boolean
 }>()
 
 defineSlots<{
@@ -24,11 +25,16 @@ defineSlots<{
 
 const sidebar = useSidebarStore()
 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>

package/lib/components/tree/VtsTreeList.vue

@@ -6,12 +6,15 @@
 
 <script lang="ts" setup>
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import { inject, provide } from 'vue'
+import { computed, inject, provide, ref } from 'vue'
 
 defineSlots<{
   default(): any
 }>()
 
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
-provide(IK_TREE_LIST_DEPTH, depth + 1)
+const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
+provide(
+  IK_TREE_LIST_DEPTH,
+  computed(() => depth.value + 1)
+)
 </script>