@xen-orchestra/web-core 0.57.0 → 0.59.0

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

@@ -1,25 +1,30 @@
 <template>
-  <VtsModal class="vts-query-builder-modal" accent="info" dismissible>
+  <UiModal class="vts-query-builder-modal" accent="info" @dismiss="emit('cancel')" @confirm="emit('confirm')">
     <template v-if="uiStore.isSmall" #title>{{ t('query-builder') }}</template>
     <template #content>
       <VtsQueryBuilderGroup v-model="rootGroup" root />
     </template>
     <template #buttons>
-      <VtsModalCancelButton />
-      <VtsModalConfirmButton>{{ t('action:save') }}</VtsModalConfirmButton>
+      <VtsOverlayCancelButton @click="emit('cancel')" />
+      <VtsOverlayConfirmButton>{{ t('action:save') }}</VtsOverlayConfirmButton>
     </template>
-  </VtsModal>
+  </UiModal>
 </template>
 
 <script setup lang="ts">
-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 VtsQueryBuilderGroup from '@core/components/query-builder/VtsQueryBuilderGroup.vue'
-import { type QueryBuilderGroup } from '@core/packages/query-builder/types'
+import UiModal from '@core/components/ui/modal/UiModal.vue'
+import { type QueryBuilderGroup } from '@core/packages/query-builder/types.ts'
 import { useUiStore } from '@core/stores/ui.store.ts'
 import { useI18n } from 'vue-i18n'
 
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
 const rootGroup = defineModel<QueryBuilderGroup>({ required: true })
 
 const { t } = useI18n()

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

@@ -33,7 +33,7 @@ import VtsQueryBuilderFilter from '@core/components/query-builder/VtsQueryBuilde
 import VtsQueryBuilderGroup from '@core/components/query-builder/VtsQueryBuilderGroup.vue'
 import VtsQueryBuilderTreeLine from '@core/components/query-builder/VtsQueryBuilderTreeLine.vue'
 import UiInput from '@core/components/ui/input/UiInput.vue'
-import type { QueryBuilderNode } from '@core/packages/query-builder/types'
+import type { QueryBuilderNode } from '@core/packages/query-builder/types.ts'
 
 defineProps<{
   index: number

package/lib/components/relative-time/VtsRelativeTime.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts" setup>
-import useRelativeTime from '@core/composables/relative-time.composable'
-import { parseDateTime } from '@core/utils/time.util'
+import useRelativeTime from '@core/composables/relative-time.composable.ts'
+import { parseDateTime } from '@core/utils/time.util.ts'
 import { computed } from 'vue'
 
 const props = defineProps<{

package/lib/components/space-card/VtsSpaceCard.vue

@@ -1,9 +1,11 @@
 <template>
-  <UiCard class="card-container">
+  <UiPanelCard class="vts-space-card">
     <UiCardTitle>
       {{ t('space') }}
     </UiCardTitle>
 
+    <slot name="alert" />
+
     <div class="content">
       <VtsProgressBar no-ruler :current="used" :total :label legend-type="percent" class="progress" />
 
@@ -35,16 +37,16 @@
         </template>
       </VtsCardRowKeyValue>
     </div>
-  </UiCard>
+  </UiPanelCard>
 </template>
 
 <script setup lang="ts">
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import VtsProgressBar from '@core/components/progress-bar/VtsProgressBar.vue'
-import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import { formatSize } from '@core/utils/size.util'
+import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
+import { formatSize } from '@core/utils/size.util.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -55,6 +57,10 @@ const { used, total } = defineProps<{
   totalSizeLabel?: string
 }>()
 
+defineSlots<{
+  alert?(): any
+}>()
+
 const { t } = useI18n()
 
 const usedSpace = computed(() => ({
@@ -78,9 +84,7 @@ const freeSpace = computed(() => {
 </script>
 
 <style scoped lang="postcss">
-.card-container {
-  gap: 1.6rem;
-
+.vts-space-card {
   .content {
     display: flex;
     flex-direction: column;

package/lib/components/sr-connection-modal/VtsSrConnectionModal.vue

@@ -0,0 +1,77 @@
+<template>
+  <UiModal accent="info" icon="status:info-picto" @confirm="emit('confirm')" @dismiss="emit('cancel')">
+    <template #title>
+      {{ title }}
+    </template>
+
+    <template #content>
+      {{ info }}
+    </template>
+
+    <template #buttons>
+      <VtsOverlayCancelButton @click="emit('cancel')">{{ t('action:go-back') }}</VtsOverlayCancelButton>
+      <VtsOverlayConfirmButton>
+        {{ confirmLabel }}
+      </VtsOverlayConfirmButton>
+    </template>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+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 { useMapper } from '@core/packages/mapper'
+import { CONNECTION_ACTION, type ConnectionAction } from '@core/types/connection.ts'
+import type { SrAccessMode, SrScope } from '@core/types/storage-repository.type.ts'
+import { getSrModalInfoVariant } from '@core/utils/sr.utils.ts'
+import { useI18n } from 'vue-i18n'
+
+const { action, count, scope, accessMode, hostsCount } = defineProps<{
+  action: ConnectionAction
+  count: number
+  scope: SrScope
+  accessMode: SrAccessMode
+  hostsCount: number
+}>()
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const { t } = useI18n()
+
+const title = useMapper(
+  () => action,
+  () => ({
+    [CONNECTION_ACTION.CONNECT]: t('sr-connect-title', { n: count }),
+    [CONNECTION_ACTION.DISCONNECT]: t('sr-disconnect-title', { n: count }),
+  }),
+  CONNECTION_ACTION.CONNECT
+)
+
+const info = useMapper(
+  () => `${action}-${getSrModalInfoVariant(scope, accessMode)}`,
+  () => ({
+    'connect-host': t('sr-connect-info-host', { n: count }),
+    'connect-pool-local': t('sr-connect-info-pool-local', { n: count }),
+    'connect-pool-mixed': t('sr-connect-info-pool-mixed'),
+    'connect-pool-shared': t('sr-connect-info-pool-shared', { n: count, hostsCount }),
+    'disconnect-host': t('sr-disconnect-info-host', { n: count }),
+    'disconnect-pool-local': t('sr-disconnect-info-pool-local', { n: count }),
+    'disconnect-pool-mixed': t('sr-disconnect-info-pool-mixed'),
+    'disconnect-pool-shared': t('sr-disconnect-info-pool-shared', { n: count, hostsCount }),
+  }),
+  'connect-pool-shared'
+)
+
+const confirmLabel = useMapper(
+  () => action,
+  () => ({
+    [CONNECTION_ACTION.CONNECT]: t('action:connect-n-srs', { n: count }),
+    [CONNECTION_ACTION.DISCONNECT]: t('action:disconnect-n-srs', { n: count }),
+  }),
+  CONNECTION_ACTION.CONNECT
+)
+</script>

package/lib/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue

@@ -20,7 +20,7 @@
 import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
 import UiLegend, { type LegendItemProps } from '@core/components/ui/legend/UiLegend.vue'
 import UiStackedBar, { type StackedBarProps } from '@core/components/ui/stacked-bar/UiStackedBar.vue'
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 
 type Segment = StackedBarProps['segments'][number] & LegendItemProps & { label: string }
 

package/lib/components/state-hero/VtsStateHero.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 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'

package/lib/components/status/VtsStatus.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useMapper } from '@core/packages/mapper'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/tab/TabItem.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useDisabled } from '@core/composables/disabled.composable'
-import { useUiStore } from '@core/stores/ui.store'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 
 const props = withDefaults(

package/lib/components/tab/TabList.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 
 const props = defineProps<{
   disabled?: boolean

package/lib/components/table/VtsTable.vue

@@ -18,10 +18,10 @@
 <script lang="ts" setup>
 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 { PaginationBindings } from '@core/composables/pagination.composable.ts'
 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 { hasEllipsis } from '@core/utils/has-ellipsis.util.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { useResizeObserver, useScroll } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 

package/lib/components/table/cells/VtsCollapsedListCell.vue

@@ -36,7 +36,7 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
-import type { MaybeArray } from '@core/types/utility.type'
+import type { MaybeArray } from '@core/types/utility.type.ts'
 import { useToggle } from '@vueuse/shared'
 
 defineProps<{

package/lib/components/table/cells/VtsLinkCell.vue

@@ -15,8 +15,8 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
 import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
-import type { LinkOptions } from '@core/composables/link-component.composable'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import type { LinkOptions } from '@core/composables/link-component.composable.ts'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 
 export type VtsLinkCellProps = LinkOptions & {

package/lib/components/table/cells/VtsStatusCell.vue

@@ -16,9 +16,9 @@
 <script setup lang="ts">
 import VtsStatus, { type Status } from '@core/components/status/VtsStatus.vue'
 import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import type { MaybeArray } from '@core/types/utility.type'
-import { toArray } from '@core/utils/to-array.utils'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import type { MaybeArray } from '@core/types/utility.type.ts'
+import { toArray } from '@core/utils/to-array.utils.ts'
 import { computed } from 'vue'
 
 export type StatusCellProps = {

package/lib/components/table/cells/VtsTagCell.vue

@@ -11,8 +11,8 @@ 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 type { MaybeArray } from '@core/types/utility.type.ts'
+import { toArray } from '@core/utils/to-array.utils.ts'
 import { computed } from 'vue'
 
 const { tag, accent } = defineProps<{

package/lib/components/table/cells/VtsTextCell.vue

@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 
 export type TextCellProps = {

package/lib/components/tag/VtsTag.vue

@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import UiTag, { type TagAccent } from '@core/components/ui/tag/UiTag.vue'
 import UiTertiaryTag from '@core/components/ui/tag/UiTertiaryTag.vue'
-import { parseTag } from '@core/utils/parse-tag.util'
+import { parseTag } from '@core/utils/parse-tag.util.ts'
 import { computed } from 'vue'
 
 type TagVariant = 'primary' | 'secondary'

package/lib/components/task/VtsQuickTaskButton.vue

@@ -20,7 +20,7 @@ import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
 import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'

package/lib/components/task/VtsQuickTaskTabBar.vue

@@ -48,7 +48,7 @@ import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
 import UiCounter from '@core/components/ui/counter/UiCounter.vue'
-import { useTabList } from '@core/composables/tab-list.composable'
+import { useTabList } from '@core/composables/tab-list.composable.ts'
 import type { TaskStatus } from '@core/types/task.type.ts'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/tooltip-list/VtsTooltipList.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import UiTooltip from '@core/components/ui/tooltip/UiTooltip.vue'
-import { useTooltipStore } from '@core/stores/tooltip.store'
+import { useTooltipStore } from '@core/stores/tooltip.store.ts'
 import { storeToRefs } from 'pinia'
 
 const tooltipStore = useTooltipStore()

package/lib/components/tree/VtsTreeList.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
+import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util.ts'
 import { computed, inject, provide, ref } from 'vue'
 
 defineSlots<{

package/lib/components/tree/VtsTreeLoadingItem.vue

@@ -16,7 +16,7 @@
 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 { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util.ts'
 import { inject, ref } from 'vue'
 
 defineProps<{

package/lib/components/ui/account-menu-button/UiAccountMenuButton.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts" setup>
 import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 
 defineProps<{
   size: 'extra-small' | 'small' | 'medium'

package/lib/components/ui/alarm-item/UiAlarmItem.vue

@@ -36,8 +36,8 @@
 <script lang="ts" setup>
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { useTimeAgo } from '@core/composables/locale-time-ago.composable.ts'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { toVariants } from '@core/utils/to-variants.util'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/alert/UiAlert.vue

@@ -28,7 +28,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 
 type AlertAccent = 'info' | 'success' | 'warning' | 'danger'
 

package/lib/components/ui/button/UiButton.vue

@@ -9,9 +9,9 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 import type { IconName } from '@core/icons'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'

package/lib/components/ui/button-icon/UiButtonIcon.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconName } from '@core/icons'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type ButtonIconAccent = 'brand' | 'warning' | 'danger'

package/lib/components/ui/card-numbers/UiCardNumbers.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -24,8 +24,8 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
-import { toVariants } from '@core/utils/to-variants.util'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
 
 type CheckboxAccent = 'brand' | 'warning' | 'danger'

package/lib/components/ui/chip/UiChip.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'

package/lib/components/ui/counter/UiCounter.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 type CounterAccent = 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'

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

@@ -1,46 +1,50 @@
 <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')"
-          />
+  <form class="ui-drawer" @click.self="emit('dismiss')" @submit.prevent="emit('confirm')">
+    <aside
+      :aria-labelledby="slots.title || title !== undefined ? titleId : undefined"
+      aria-modal="true"
+      class="drawer"
+      role="dialog"
+    >
+      <div class="header">
+        <div v-if="slots.title || title !== undefined" :id="titleId" class="typo-h4">
+          <slot name="title">
+            {{ title }}
+          </slot>
         </div>
-        <div class="content">
-          <slot name="content" />
-        </div>
-        <VtsButtonGroup v-if="slots.buttons" no-stack class="buttons">
-          <slot name="buttons" />
-        </VtsButtonGroup>
-      </aside>
-    </div>
-  </Transition>
+        <UiButtonIcon
+          v-if="onDismiss"
+          :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>
+  </form>
 </template>
 
 <script lang="ts" setup>
 import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { useOverlayEscape } from '@core/packages/overlay/use-overlay-escape.ts'
+import { useId } from 'vue'
 
 defineProps<{
-  isOpen: boolean
-  isDismissible?: boolean
   title?: string
+  onDismiss?: () => any
 }>()
 
 const emit = defineEmits<{
+  confirm: []
   dismiss: []
-  afterLeave: []
 }>()
 
 const slots = defineSlots<{
@@ -48,34 +52,13 @@ const slots = defineSlots<{
   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;
-}
+useOverlayEscape(() => emit('dismiss'))
 
-.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%);
-  }
-}
+const titleId = useId()
+</script>
 
+<style lang="postcss" scoped>
 .ui-drawer {
   position: fixed;
   display: flex;

package/lib/components/ui/dropdown/UiDropdown.vue

@@ -21,9 +21,9 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type DropdownAccent = 'normal' | 'brand' | 'success' | 'warning' | 'danger'

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 import type { IconName } from '@core/icons'
 
 const { disabled, selected, icon } = defineProps<{

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

@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 
 defineProps<{