@xen-orchestra/web-core 0.54.0 → 0.56.0

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/query-builder/VtsQueryBuilderModal.vue

@@ -44,7 +44,6 @@ const uiStore = useUiStore()
   }
 
   &:deep(.modal) {
-    background-color: var(--color-neutral-background-primary) !important;
     padding: 0;
     gap: 0;
 

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

@@ -1,38 +1,34 @@
 <template>
-  <div :class="[className, { horizontal, error, success, 'no-background': noBackground }]" class="vts-state-hero">
+  <div
+    :class="[className, { horizontal: isHorizontal, error, success, 'no-background': noBackground }]"
+    class="vts-state-hero"
+  >
     <UiLoader v-if="type === 'busy'" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" :alt="type" class="image" />
-    <div v-if="slots.default || success" :class="typoClass" class="content">
+    <div v-if="slots.default || success" :class="[typoClass, { mobile: isMobile }]" class="content">
       <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'
+import VtsIcon from '../icon/VtsIcon.vue'
 
-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'
-
-const { format, type, size } = defineProps<{
+const { format, type, size, horizontal } = defineProps<{
   format: StateHeroFormat
   type: StateHeroType
   size: StateHeroSize
@@ -44,8 +40,14 @@ const slots = defineSlots<{
   default?(): any
 }>()
 
+const uiStore = useUiStore()
+
 const { t } = useI18n()
 
+const isHorizontal = computed(() => horizontal && !uiStore.isSmall)
+
+const isMobile = computed(() => uiStore.isSmall)
+
 const typoClass = computed(() => (format === 'page' ? 'typo-h2' : 'typo-h4'))
 
 const className = computed(() => toVariants({ size, format }))
@@ -73,10 +75,6 @@ const imageSrc = computed(() => {
 
   &:not(.horizontal) {
     flex-direction: column;
-
-    .content {
-      align-items: center;
-    }
   }
 
   .image {
@@ -88,6 +86,10 @@ const imageSrc = computed(() => {
     flex-direction: column;
     gap: 1.6rem;
 
+    &:not(.mobile) {
+      text-align: center;
+    }
+
     &:empty {
       display: none;
     }

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/VtsHeaderCell.vue

@@ -1,31 +1,15 @@
 <template>
   <UiColumnHeader class="vts-header-cell">
-    <div class="cell-content">
-      <VtsIcon v-if="icon" :name="icon" size="medium" />
-      <slot />
-    </div>
+    <slot />
   </UiColumnHeader>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiColumnHeader from '@core/components/ui/column-header/UiColumnHeader.vue'
-import type { IconName } from '@core/icons'
-
-defineProps<{
-  icon?: IconName
-}>()
 </script>
 
 <style lang="postcss" scoped>
 .vts-header-cell {
   max-width: 30rem;
-
-  .cell-content {
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-    white-space: nowrap;
-  }
 }
 </style>

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/VtsTagCell.vue

@@ -1,7 +1,7 @@
 <template>
   <UiTableCell>
     <UiTagsList>
-      <VtsTag v-for="tagItem of tags" :key="tagItem" :value="tagItem" />
+      <VtsTag v-for="tagItem of tags" :key="tagItem" :value="tagItem" :accent />
     </UiTagsList>
   </UiTableCell>
 </template>
@@ -9,13 +9,15 @@
 <script setup lang="ts">
 import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import type { TagAccent } from '@core/components/ui/tag/UiTag.vue'
 import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
 import type { MaybeArray } from '@core/types/utility.type'
 import { toArray } from '@core/utils/to-array.utils'
 import { computed } from 'vue'
 
-const { tag } = defineProps<{
+const { tag, accent } = defineProps<{
   tag: MaybeArray<string>
+  accent: TagAccent
 }>()
 
 const tags = computed(() => toArray(tag).filter(tagItem => tagItem.trim() !== ''))

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>

package/lib/components/tree/VtsTreeLoadingItem.vue

@@ -3,7 +3,7 @@
     <div class="label-placeholder">
       <div class="link-placeholder">
         <template v-if="depth > 1">
-          <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
+          <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" />
         </template>
         <VtsIcon :name="icon" size="medium" />
         <div class="loader">&nbsp;</div>
@@ -17,13 +17,13 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 import type { IconName } from '@core/icons'
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 defineProps<{
   icon: IconName
 }>()
 
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
+const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/drawer/UiDrawer.vue

@@ -0,0 +1,123 @@
+<template>
+  <Transition name="drawer" @after-leave="emit('afterLeave')">
+    <div v-if="isOpen" class="ui-drawer" aria-modal="true" role="dialog" @click.self="isDismissible && emit('dismiss')">
+      <aside class="drawer">
+        <div class="header">
+          <div v-if="slots.title || title !== undefined" class="typo-h4">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+          <UiButtonIcon
+            v-if="isDismissible"
+            :target-scale="2"
+            icon="action:close-cancel-clear"
+            accent="brand"
+            size="small"
+            @click="emit('dismiss')"
+          />
+        </div>
+        <div class="content">
+          <slot name="content" />
+        </div>
+        <VtsButtonGroup v-if="slots.buttons" no-stack class="buttons">
+          <slot name="buttons" />
+        </VtsButtonGroup>
+      </aside>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+
+defineProps<{
+  isOpen: boolean
+  isDismissible?: boolean
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+  afterLeave: []
+}>()
+
+const slots = defineSlots<{
+  content(): any
+  title?(): any
+  buttons?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* Slide-in from right */
+.drawer-enter-active.ui-drawer,
+.drawer-leave-active.ui-drawer {
+  transition: opacity 0.3s ease;
+}
+
+.drawer-enter-active .drawer,
+.drawer-leave-active .drawer {
+  transition: transform 0.3s ease;
+}
+
+.drawer-enter-from.ui-drawer,
+.drawer-leave-to.ui-drawer {
+  opacity: 0;
+}
+
+.drawer-enter-from .drawer,
+.drawer-leave-to .drawer {
+  transform: translateX(100%);
+
+  &:dir(rtl) {
+    transform: translateX(-100%);
+  }
+}
+
+.ui-drawer {
+  position: fixed;
+  display: flex;
+  inset: 0;
+  justify-content: flex-end;
+  align-items: stretch;
+
+  .drawer {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 100dvh;
+    background-color: var(--color-neutral-background-secondary);
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1.6rem;
+      background-color: var(--color-neutral-background-primary);
+      border-block-end: 0.1rem solid var(--color-neutral-border);
+    }
+
+    .content {
+      overflow: auto;
+      flex: 1;
+      padding: 2.4rem;
+    }
+
+    .buttons {
+      margin-block-start: auto;
+      padding: 1.6rem;
+      background-color: var(--color-neutral-background-primary);
+      border-block-start: 0.1rem solid var(--color-neutral-border);
+    }
+
+    @media (--medium-or-large) {
+      min-width: 50%;
+      max-width: 50%;
+      border-inline-start: 0.1rem solid var(--color-neutral-border);
+    }
+  }
+}
+</style>

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -37,7 +37,7 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .ui-head-bar {
-  min-height: 5.6rem;
+  min-height: 6rem;
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 1.6rem;

package/lib/components/ui/input/UiInput.vue

@@ -52,12 +52,14 @@ const {
   required,
   disabled,
   id,
+  detached,
 } = defineProps<{
   accent: InputAccent
   id?: string
   required?: boolean
   disabled?: boolean
   readonly?: boolean
+  detached?: boolean
   type?: InputType
   icon?: IconName
   rightIcon?: IconName
@@ -82,7 +84,7 @@ const attrs = useAttrs()
 
 const inputRef = ref<HTMLInputElement>()
 
-const wrapperController = inject(IK_INPUT_WRAPPER_CONTROLLER, undefined)
+const wrapperController = detached ? undefined : inject(IK_INPUT_WRAPPER_CONTROLLER, undefined)
 
 const accent = useMapper<LabelAccent, InputAccent>(
   () => wrapperController?.labelAccent,

package/lib/components/ui/link/UiLink.vue

@@ -1,7 +1,7 @@
 <!-- v6 -->
 <template>
   <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
-    <VtsIcon :name="icon" size="medium" />
+    <VtsIcon :name="icon" :busy :busy-tooltip size="medium" />
     <slot />
     <VtsIcon v-if="attributes.target === '_blank'" name="action:open-in-new-tab" size="medium" class="external-icon" />
     <VtsIcon v-if="isPrimary" v-tooltip="primaryTooltip" name="status:primary-circle" size="medium" />
@@ -19,6 +19,8 @@ const props = defineProps<
   LinkOptions & {
     size: 'small' | 'medium'
     icon?: IconName
+    busy?: boolean
+    busyTooltip?: string
     isPrimary?: boolean
     primaryTooltip?: string
   }