@xen-orchestra/web-core 0.54.0 → 0.55.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/drawer/VtsDrawer.vue

@@ -0,0 +1,85 @@
+<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, 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,21 @@
+<template>
+  <UiButton accent="brand" :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 { IK_DRAWER } from '@core/packages/drawer/types.ts'
+import { inject } from 'vue'
+
+defineProps<{
+  variant: ButtonVariant
+}>()
+
+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,30 @@
+<template>
+  <VtsDrawerButton variant="primary" @click="handleClick()">
+    <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'
+
+const { onClick } = defineProps<{
+  onClick?: () => void
+}>()
+
+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/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/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/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/state-hero/VtsStateHero.vue

@@ -1,8 +1,11 @@
 <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>
@@ -11,6 +14,7 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { useUiStore } from '@core/stores/ui.store'
 import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -32,7 +36,7 @@ export type StateHeroType =
   | 'all-done'
   | 'creating'
 
-const { format, type, size } = defineProps<{
+const { format, type, size, horizontal } = defineProps<{
   format: StateHeroFormat
   type: StateHeroType
   size: StateHeroSize
@@ -44,8 +48,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 +83,6 @@ const imageSrc = computed(() => {
 
   &:not(.horizontal) {
     flex-direction: column;
-
-    .content {
-      align-items: center;
-    }
   }
 
   .image {
@@ -88,6 +94,10 @@ const imageSrc = computed(() => {
     flex-direction: column;
     gap: 1.6rem;
 
+    &:not(.mobile) {
+      text-align: center;
+    }
+
     &:empty {
       display: none;
     }

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/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/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/modal/UiModal.vue

@@ -1,4 +1,4 @@
-<!-- v2 -->
+<!-- v4 -->
 <template>
   <form :class="className" class="ui-modal" @click.self="emit('dismiss')">
     <div class="modal">
@@ -7,8 +7,8 @@
         :accent="closeIconAccent"
         :target-scale="2"
         class="dismiss-button"
-        icon="fa:xmark"
-        size="small"
+        icon="action:close-cancel-clear"
+        size="medium"
         @click="emit('dismiss')"
       />
       <main class="main">
@@ -36,7 +36,7 @@ import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
-export type ModalAccent = 'info' | 'success' | 'warning' | 'danger'
+export type ModalAccent = 'info' | 'warning' | 'danger'
 
 const { accent } = defineProps<{
   accent: ModalAccent
@@ -58,7 +58,6 @@ const closeIconAccent = useMapper(
   () => accent,
   {
     info: 'brand',
-    success: 'brand',
     warning: 'warning',
     danger: 'danger',
   },
@@ -84,7 +83,10 @@ const className = computed(() => toVariants({ accent }))
     max-height: min(90vh, 80rem);
     padding: 3.2rem 2.4rem 2.4rem;
     gap: 2.4rem;
+    background-color: var(--color-neutral-background-secondary);
     border-radius: 1rem;
+    border-width: 0.1rem;
+    border-style: solid;
 
     &:not(:has(.buttons)) {
       padding-bottom: 3.2rem;
@@ -122,7 +124,7 @@ const className = computed(() => toVariants({ accent }))
 
   &.accent--info {
     .modal {
-      background-color: var(--color-info-background-selected);
+      border-color: var(--color-info-item-base);
     }
 
     .main .icon {
@@ -130,19 +132,9 @@ const className = computed(() => toVariants({ accent }))
     }
   }
 
-  &.accent--success {
-    .modal {
-      background-color: var(--color-success-background-selected);
-    }
-
-    .main .icon {
-      color: var(--color-success-txt-base);
-    }
-  }
-
   &.accent--warning {
     .modal {
-      background-color: var(--color-warning-background-selected);
+      border-color: var(--color-warning-item-base);
     }
 
     .main .icon {
@@ -152,7 +144,7 @@ const className = computed(() => toVariants({ accent }))
 
   &.accent--danger {
     .modal {
-      background-color: var(--color-danger-background-selected);
+      border-color: var(--color-danger-item-base);
     }
 
     .main .icon {

package/lib/composables/default-tab.composable.ts

@@ -14,6 +14,10 @@ export function useDefaultTab(dispatcherRouteName: RouteRecordName & string, def
   watch(
     () => route.name as string,
     name => {
+      if (name == null) {
+        return
+      }
+
       if (name === dispatcherRouteName) {
         const isSameDispatcher = localStorage.getItem(TAB_MEMORY_DISPATCHER) === dispatcherRouteName
         const tabName = (isSameDispatcher ? localStorage.getItem(TAB_MEMORY_LAST) : null) ?? defaultTab

package/lib/icons/action-icons.ts

@@ -1,3 +1,4 @@
+import { slash } from '@core/icons/custom-icons.ts'
 import { defineIconPack, type IconSingleConfig } from '@core/packages/icon'
 import { faCopy, faSquare as checkboxEmpty, type IconDefinition } from '@fortawesome/free-regular-svg-icons'
 import {
@@ -24,6 +25,7 @@ import {
   faLink,
   faLinkSlash,
   faMinus,
+  faPlug,
   faPowerOff,
   faRefresh,
   faRoute,
@@ -132,8 +134,10 @@ export const actionIcons = defineIconPack({
   fill: constructIcon(faFillDrip),
   duplicate: constructIcon(faClone),
   copy: constructIcon(faCopy),
-  connect: constructIcon(faLink),
-  disconnect: constructIcon(faLinkSlash),
+  attach: constructIcon(faLink),
+  detach: constructIcon(faLinkSlash),
+  connect: constructIcon(faPlug),
+  disconnect: [constructIcon(faPlug), { icon: slash }],
   forget: constructIcon(faEraser),
   delete: { icon: faTrash, color: 'var(--color-danger-txt-primary)' },
   'more-actions': constructIcon(faEllipsis),

package/lib/icons/custom-icons.ts

@@ -0,0 +1,16 @@
+import { defineIcon } from '@core/packages/icon'
+import { faSlash } from '@fortawesome/free-solid-svg-icons'
+
+export const slash = defineIcon([
+  {
+    icon: faSlash,
+    color: 'var(--color-neutral-background-primary)',
+    translate: [-0.5, 0.5],
+    size: 20,
+  },
+  {
+    icon: faSlash,
+    translate: [0.5, -0.5],
+    size: 20,
+  },
+])