@xen-orchestra/web-core 0.57.0 → 0.59.0

package/lib/components/card/VtsCardRowKeyValue.vue

@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { calculateLineCount } from '@core/utils/line-height.util.ts'
 import { useStyleTag } from '@vueuse/core'
 import { useToggle } from '@vueuse/shared'

package/lib/components/cell-object/VtsCellObject.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import UiButton from '@core/components/ui/button/UiButton.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useClipboard } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/cell-text/VtsCellText.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 
 const slots = defineSlots<{
   default: () => any

package/lib/components/console/VtsActionsConsole.vue

@@ -35,7 +35,7 @@
 <script lang="ts" setup>
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'

package/lib/components/console/VtsClipboardConsole.vue

@@ -17,7 +17,7 @@
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import UiTextarea from '@core/components/ui/text-area/UiTextarea.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/console/VtsLayoutConsole.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 
 defineSlots<{
   default(): any

package/lib/components/console/VtsRemoteConsole.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts" setup>
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import type NoVncClient from '@novnc/novnc/lib/rfb'
 import _RFB from '@novnc/novnc/lib/rfb'
 import { whenever } from '@vueuse/core'

package/lib/components/copy-all-menu-item/VtsCopyAllMenuItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <MenuList placement="bottom-end">
+    <template #trigger="{ open }">
+      <UiButtonIcon
+        v-tooltip="{
+          placement: 'left',
+          content: tooltipContent,
+        }"
+        :icon
+        accent="brand"
+        size="small"
+        :disabled="!isSupported"
+        @click="open($event)"
+      />
+    </template>
+    <MenuItem icon="action:copy" @click="copy()">
+      {{ t('action:copy-all') }}
+    </MenuItem>
+  </MenuList>
+</template>
+
+<script lang="ts" setup>
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { useCopyToClipboard } from '@core/composables/copy.composable.ts'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { values } = defineProps<{
+  values: string[]
+}>()
+
+const { t } = useI18n()
+
+const { copy, copied, isSupported } = useCopyToClipboard(() => values.join(';\n'))
+
+const icon = computed(() => (copied.value ? 'fa:check-circle' : 'action:more-actions'))
+
+const tooltipContent = computed(() => {
+  if (!isSupported.value) {
+    return t('copy-unavailable-http')
+  }
+
+  return copied.value ? t('copied') : t('action:copy-all')
+})
+</script>

package/lib/components/copy-button/VtsCopyButton.vue

@@ -11,8 +11,8 @@
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { useClipboard } from '@vueuse/core'
+import { useCopyToClipboard } from '@core/composables/copy.composable.ts'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -22,7 +22,7 @@ const { value } = defineProps<{
 
 const { t } = useI18n()
 
-const { copy, copied, isSupported } = useClipboard({ source: () => value, legacy: true })
+const { copy, copied, isSupported } = useCopyToClipboard(() => value)
 
 const icon = computed(() => (copied.value ? 'fa:check-circle' : 'fa:copy'))
 </script>

package/lib/components/delete-button/VtsDeleteButton.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{

package/lib/components/icon/VtsIcon.vue

@@ -5,7 +5,7 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { type IconName, icons } from '@core/icons'
 import { DisplayIcon } from '@core/packages/icon'
 import { toVariants } from '@core/utils/to-variants.util.ts'

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -15,9 +15,9 @@ import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
 import { useRanked } from '@core/composables/ranked.composable.ts'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
-import type { MaybeArray } from '@core/types/utility.type'
-import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
-import { toArray } from '@core/utils/to-array.utils'
+import type { MaybeArray } from '@core/types/utility.type.ts'
+import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util.ts'
+import { toArray } from '@core/utils/to-array.utils.ts'
 import { useArrayMap } from '@vueuse/core'
 import { provide, reactive, useId } from 'vue'
 

package/lib/components/key-value-pair/VtsKeyValuePair.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 
 defineProps<{
   label?: string

package/lib/components/layout/VtsContentSidePanel.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import { usePanelStore } from '@core/stores/panel.store'
-import { useUiStore } from '@core/stores/ui.store'
+import { usePanelStore } from '@core/stores/panel.store.ts'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 
 const panelStore = usePanelStore()

package/lib/components/linear-chart/VtsLinearChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { LinearChartData, ValueFormatter } from '@core/types/chart'
+import type { LinearChartData, ValueFormatter } from '@core/types/chart.ts'
 import { utcFormat } from 'd3-time-format'
 import type { EChartsOption } from 'echarts'
 import { LineChart } from 'echarts/charts'

package/lib/components/menu/MenuItem.vue

@@ -35,9 +35,9 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 import type { IconName } from '@core/icons'
-import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
+import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util.ts'
 import { computed, inject, ref } from 'vue'
 
 const props = defineProps<{

package/lib/components/menu/MenuList.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useDisabled } from '@core/composables/disabled.composable'
-import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
+import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util.ts'
 import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
 import { computed, inject, nextTick, provide, ref, useSlots } from 'vue'

package/lib/components/menu/MenuSeparator.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts" setup>
-import { IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
+import { IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util.ts'
 import { computed, inject } from 'vue'
 
 const horizontal = inject(

package/lib/components/modal/VtsActionModal.vue

@@ -1,25 +1,25 @@
 <template>
-  <VtsModal :accent :icon dismissible>
+  <UiModal :accent :icon @confirm="emit('confirm')" @dismiss="emit('cancel')">
     <template #title>
       <span>{{ modalTexts.title }}</span>
     </template>
     <template #content>
-      <span>{{ modalTexts.message }}</span>
+      <span v-if="modalTexts.message">{{ modalTexts.message }}</span>
     </template>
     <template #buttons>
-      <VtsModalCancelButton>{{ t('action:go-back') }}</VtsModalCancelButton>
-      <VtsModalConfirmButton>
+      <VtsOverlayCancelButton @click="emit('cancel')">{{ t('action:go-back') }}</VtsOverlayCancelButton>
+      <VtsOverlayConfirmButton>
         {{ modalTexts.action }}
-      </VtsModalConfirmButton>
+      </VtsOverlayConfirmButton>
     </template>
-  </VtsModal>
+  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import VtsModal from '@core/components/modal/VtsModal.vue'
-import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
-import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import VtsOverlayCancelButton from '@core/components/overlay/VtsOverlayCancelButton.vue'
+import VtsOverlayConfirmButton from '@core/components/overlay/VtsOverlayConfirmButton.vue'
 import type { ModalAccent } from '@core/components/ui/modal/UiModal.vue'
+import UiModal from '@core/components/ui/modal/UiModal.vue'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import type { ActionsByObject, HostActions, ObjectType, VmActions } from '@core/types/object.type.ts'
@@ -27,7 +27,7 @@ import { useI18n } from 'vue-i18n'
 
 type ActionTexts = {
   title: string
-  message: string
+  message?: string
   action: string
 }
 
@@ -54,7 +54,12 @@ const { action, object, hostName } = defineProps<
   }
 >()
 
-const defaultActionByObject: { [O in ObjectType]: ActionsByObject[O] } = {
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const defaultActionByObject: ActionsByObject = {
   vm: 'shutdown',
   host: 'disable',
 }
@@ -86,15 +91,49 @@ const textMappingsByObject: TextMappingByObject = {
   },
   host: {
     enable: {
-      title: t('modal:confirm-host-enable', { host: hostName }),
+      title: t('modal:confirm-host-enable?', { host: hostName }),
       message: t('modal:host-enable-message'),
       action: t('action:enable-host'),
     },
     disable: {
-      title: t('modal:confirm-host-disable', { host: hostName }),
+      title: t('modal:confirm-host-disable?', { host: hostName }),
       message: t('modal:host-disable-message'),
       action: t('action:disable-host'),
     },
+    shutdown: {
+      title: t('modal:confirm-host-shutdown?', { host: hostName }),
+      message: t('modal:host-shutdown-message'),
+      action: t('action:shutdown-host'),
+    },
+    start: {
+      title: t('modal:confirm-host-start?', { host: hostName }),
+      action: t('action:start-host'),
+    },
+    forget: {
+      title: t('modal:confirm-host-forget?', { host: hostName }),
+      message: t('modal:host-forget-message'),
+      action: t('action:forget-host'),
+    },
+    'disable-and-evacuate-vms': {
+      title: t('modal:confirm-host-disable-and-evacuate-vms?', { host: hostName }),
+      message: t('modal:host-disable-and-evacuate-vms-message'),
+      action: t('action:disable-host-and-evacuate-vms'),
+    },
+    reboot: {
+      title: t('modal:confirm-host-reboot?', { host: hostName }),
+      message: t('modal:host-reboot-message'),
+      action: t('action:reboot-host'),
+    },
+    'force-reboot': {
+      title: t('modal:confirm-host-force-reboot?', { host: hostName }),
+      message: t('modal:host-force-reboot-message'),
+      action: t('action:force-reboot-host'),
+    },
+    'smart-reboot': {
+      title: t('modal:confirm-host-smart-reboot?', { host: hostName }),
+      message: t('modal:host-smart-reboot-message'),
+      action: t('action:smart-reboot-host'),
+    },
   },
 }
 

package/lib/components/modal/VtsBlockedModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal accent="danger" icon="status:danger-picto" dismissible>
+  <UiModal accent="danger" icon="status:danger-picto" @dismiss="emit('close')">
     <template #title>
       <span>{{ modalTexts.title }}</span>
     </template>
@@ -12,18 +12,18 @@
     </template>
 
     <template #buttons>
-      <VtsModalCancelButton>{{ t('action:go-back') }}</VtsModalCancelButton>
-      <UiLink :href icon="action:edit" size="medium" @click="emit('confirm')">
+      <VtsOverlayCancelButton @click="emit('close')">{{ t('action:go-back') }}</VtsOverlayCancelButton>
+      <UiLink :href icon="action:edit" size="medium" @click="emit('close')">
         {{ t('action:edit-config') }}
       </UiLink>
     </template>
-  </VtsModal>
+  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import VtsModal from '@core/components/modal/VtsModal.vue'
-import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
+import VtsOverlayCancelButton from '@core/components/overlay/VtsOverlayCancelButton.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
+import UiModal from '@core/components/ui/modal/UiModal.vue'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
 import type { VmBlockedOperations } from '@core/types/object.type.ts'
 import { useI18n } from 'vue-i18n'
@@ -40,7 +40,7 @@ const { blockedOperation } = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  confirm: []
+  close: []
 }>()
 
 const { t } = useI18n()

package/lib/components/modal/VtsDeleteModal.vue

@@ -1,36 +1,41 @@
 <template>
-  <VtsModal accent="warning" icon="status:warning-picto" dismissible>
+  <UiModal accent="warning" icon="status:warning-picto" @confirm="emit('confirm')" @dismiss="emit('cancel')">
     <template #title>
       <I18nT keypath="confirm-delete" scope="global" tag="div">
         <span class="n-delete">
-          <slot name="title" />
+          {{ subject }}
         </span>
       </I18nT>
     </template>
 
     <template #content>
-      <slot name="content">{{ t('please-confirm-to-continue') }}</slot>
+      {{ description ?? t('please-confirm-to-continue') }}
     </template>
 
     <template #buttons>
-      <VtsModalCancelButton>{{ t('action:go-back') }}</VtsModalCancelButton>
-      <VtsModalConfirmButton>
-        <slot name="confirm" />
-      </VtsModalConfirmButton>
+      <VtsOverlayCancelButton @click="emit('cancel')">{{ t('action:go-back') }}</VtsOverlayCancelButton>
+      <VtsOverlayConfirmButton>
+        {{ confirmLabel }}
+      </VtsOverlayConfirmButton>
     </template>
-  </VtsModal>
+  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import VtsModal from '@core/components/modal/VtsModal.vue'
-import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
-import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import VtsOverlayCancelButton from '@core/components/overlay/VtsOverlayCancelButton.vue'
+import VtsOverlayConfirmButton from '@core/components/overlay/VtsOverlayConfirmButton.vue'
+import UiModal from '@core/components/ui/modal/UiModal.vue'
 import { useI18n } from 'vue-i18n'
 
-defineSlots<{
-  title(): any
-  content?(): any
-  confirm(): any
+const { subject, description, confirmLabel } = defineProps<{
+  subject: string
+  confirmLabel: string
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
 }>()
 
 const { t } = useI18n()

package/lib/components/modal/VtsErrorModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal accent="danger" icon="status:danger-picto" dismissible>
+  <UiModal accent="danger" icon="status:danger-picto" @dismiss="emit('close')" @confirm="emit('close')">
     <template #title>
       {{ title }}
     </template>
@@ -11,16 +11,16 @@
     </template>
 
     <template #buttons>
-      <VtsModalConfirmButton>
+      <VtsOverlayConfirmButton>
         {{ t('action:close') }}
-      </VtsModalConfirmButton>
+      </VtsOverlayConfirmButton>
     </template>
-  </VtsModal>
+  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import VtsModal from '@core/components/modal/VtsModal.vue'
-import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import VtsOverlayConfirmButton from '@core/components/overlay/VtsOverlayConfirmButton.vue'
+import UiModal from '@core/components/ui/modal/UiModal.vue'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
@@ -28,6 +28,10 @@ defineProps<{
   error?: string
 }>()
 
+const emit = defineEmits<{
+  close: []
+}>()
+
 defineSlots<{
   content?(): any
 }>()

package/lib/components/overlay/VtsOverlayList.vue

@@ -28,7 +28,7 @@ const overlayStore = useOverlayStore()
   .backdrop {
     position: fixed;
     inset: 0;
-    z-index: 1011;
+    z-index: 1015;
     background-color: var(--color-opacity-primary);
     pointer-events: none;
 
@@ -46,7 +46,7 @@ const overlayStore = useOverlayStore()
   .overlays {
     position: fixed;
     inset: 0;
-    z-index: 1012;
+    z-index: 1016;
 
     /* The container only positions the stacked modals; each modal catches its own
        clicks, so an empty container must let clicks through. */

package/lib/components/panel/VtsPanel.vue

@@ -35,7 +35,7 @@
 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 { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/panel/VtsSidePanel.vue

@@ -44,9 +44,9 @@
 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 { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { usePanelStore } from '@core/stores/panel.store.ts'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/query-builder/VtsQueryBuilder.vue

@@ -47,9 +47,9 @@ import VtsQueryBuilderButton from '@core/components/query-builder/VtsQueryBuilde
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiInput from '@core/components/ui/input/UiInput.vue'
-import type { QueryBuilderSchema } from '@core/packages/query-builder/types'
-import { useQueryBuilder } from '@core/packages/query-builder/use-query-builder'
-import { useUiStore } from '@core/stores/ui.store'
+import type { QueryBuilderSchema } from '@core/packages/query-builder/types.ts'
+import { useQueryBuilder } from '@core/packages/query-builder/use-query-builder.ts'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { onMounted, ref, useId, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/query-builder/VtsQueryBuilderButton.vue

@@ -16,9 +16,10 @@
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { useModal } from '@core/packages/modal/use-modal'
-import type { QueryBuilderGroup } from '@core/packages/query-builder/types'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { KEEP_OVERLAY_OPEN } from '@core/packages/overlay/symbols.ts'
+import { useOverlay } from '@core/packages/overlay/use-overlay.ts'
+import type { QueryBuilderGroup } from '@core/packages/query-builder/types.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -38,15 +39,20 @@ const tooltip = computed(() => (disabled ? 'Current filter is invalid or too com
 
 const { t } = useI18n()
 
-const openModal = useModal(() => ({
-  component: import('@core/components/query-builder/VtsQueryBuilderModal.vue'),
-  props: {
-    modelValue: rootGroup,
-    'onUpdate:modelValue': (newRootGroup: QueryBuilderGroup) => {
+const { open } = useOverlay({
+  component: () => import('@core/components/query-builder/VtsQueryBuilderModal.vue'),
+  events: {
+    'onUpdate:modelValue': newRootGroup => {
       rootGroup.value = newRootGroup
+
+      return KEEP_OVERLAY_OPEN
     },
+    onConfirm: () => emit('confirm'),
+    onCancel: () => emit('cancel'),
   },
-  onConfirm: () => emit('confirm'),
-  onCancel: () => emit('cancel'),
-}))
+})
+
+function openModal() {
+  return open({ props: { modelValue: rootGroup.value } })
+}
 </script>

package/lib/components/query-builder/VtsQueryBuilderFilter.vue

@@ -36,7 +36,7 @@ import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiInput from '@core/components/ui/input/UiInput.vue'
 import { useFormSelect } from '@core/packages/form-select'
-import type { PropertySchema, OperatorSchema, ValueSchema } from '@core/packages/query-builder/types'
+import type { PropertySchema, OperatorSchema, ValueSchema } from '@core/packages/query-builder/types.ts'
 import { useUiStore } from '@core/stores/ui.store.ts'
 import { onMounted, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/query-builder/VtsQueryBuilderGroup.vue

@@ -54,7 +54,7 @@ import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import { useFormSelect } from '@core/packages/form-select'
-import type { QueryBuilderGroup } from '@core/packages/query-builder/types'
+import type { QueryBuilderGroup } from '@core/packages/query-builder/types.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'