@xen-orchestra/web-core 0.57.0 → 0.59.0

package/lib/components/ui/info/UiInfo.vue

@@ -10,7 +10,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'
 import { useMapper } from '@core/packages/mapper'
 

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

@@ -46,8 +46,8 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
-import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
-import { toVariants } from '@core/utils/to-variants.util'
+import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { inject, ref, useAttrs, watchEffect } from 'vue'
 
 export type InputAccent = 'brand' | 'warning' | 'danger'

package/lib/components/ui/label/UiLabel.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { useI18n } from 'vue-i18n'
 
 export type LabelAccent = 'neutral' | 'warning' | 'danger'

package/lib/components/ui/legend/UiLegend.vue

@@ -10,8 +10,8 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-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 { computed } from 'vue'
 
 export type LegendItemAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'

package/lib/components/ui/legend-title/UiLegendTitle.vue

@@ -8,7 +8,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'
 
 export type LegendTitleProps = {

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

@@ -10,8 +10,8 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable.ts'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 import { computed } from 'vue'
 

package/lib/components/ui/loader/UiLoader.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { uniqueId } from '@core/utils/unique-id.util'
+import { uniqueId } from '@core/utils/unique-id.util.ts'
 
 const firstHalfId = uniqueId('spinner-first-half-')
 const secondHalfId = uniqueId('spinner-second-half-')

package/lib/components/ui/modal/UiModal.vue

@@ -1,7 +1,7 @@
 <!-- v4 -->
 <template>
-  <form :class="className" class="ui-modal" @click.self="emit('dismiss')">
-    <div class="modal">
+  <form :class="className" class="ui-modal" @click.self="emit('dismiss')" @submit.prevent="emit('confirm')">
+    <div :aria-labelledby="slots.title ? titleId : undefined" aria-modal="true" class="modal" role="dialog">
       <UiButtonIcon
         v-if="onDismiss"
         :accent="closeIconAccent"
@@ -13,7 +13,7 @@
       />
       <main class="main">
         <VtsIcon v-if="icon" :name="icon" class="icon" size="current" />
-        <div v-if="slots.title" class="typo-h4">
+        <div v-if="slots.title" :id="titleId" class="typo-h4">
           <slot name="title" />
         </div>
         <div class="content">
@@ -33,18 +33,21 @@ 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 { useOverlayEscape } from '@core/packages/overlay/use-overlay-escape.ts'
+import { IK_OVERLAY_ACCENT } from '@core/utils/injection-keys.util.ts'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import { computed } from 'vue'
+import { computed, provide, useId } from 'vue'
 
 export type ModalAccent = 'info' | 'warning' | 'danger'
 
 const { accent } = defineProps<{
   accent: ModalAccent
   icon?: IconName
-  onDismiss?: () => void
+  onDismiss?: () => any
 }>()
 
 const emit = defineEmits<{
+  confirm: []
   dismiss: []
 }>()
 
@@ -54,6 +57,10 @@ const slots = defineSlots<{
   title?(): any
 }>()
 
+useOverlayEscape(() => emit('dismiss'))
+
+const titleId = useId()
+
 const closeIconAccent = useMapper(
   () => accent,
   {
@@ -65,6 +72,11 @@ const closeIconAccent = useMapper(
 )
 
 const className = computed(() => toVariants({ accent }))
+
+provide(
+  IK_OVERLAY_ACCENT,
+  computed(() => accent)
+)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/object-link/UiObjectLink.vue

@@ -22,7 +22,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'
 import { type RouteLocationRaw } from 'vue-router'
 

package/lib/components/ui/panel-card/UiPanelCard.vue

@@ -0,0 +1,20 @@
+<template>
+  <UiCard class="ui-panel-card">
+    <slot />
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import UiCard from '@core/components/ui/card/UiCard.vue'
+
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-panel-card {
+  gap: 1.6rem;
+  padding: 1.6rem;
+}
+</style>

package/lib/components/ui/progress-bar/UiProgressBar.vue

@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
 import UiLegend from '@core/components/ui/legend/UiLegend.vue'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type ProgressBarAccent = 'info' | 'warning' | 'danger'

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -30,8 +30,8 @@
 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 { useUiStore } from '@core/stores/ui.store'
-import { uniqueId } from '@core/utils/unique-id.util'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { uniqueId } from '@core/utils/unique-id.util.ts'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue

@@ -16,7 +16,7 @@
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import VtsQuickTaskTabBar, { type TaskTab } from '@core/components/task/VtsQuickTaskTabBar.vue'
 import type { Task } from '@core/components/ui/task-item/UiTaskItem.vue'
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -11,8 +11,8 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.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 } from 'vue'
 
 const { accent, value, disabled } = defineProps<{

package/lib/components/ui/stacked-bar/StackedBarSegment.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script lang="ts" setup>
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { hasEllipsis } from '@core/utils/has-ellipsis.util'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { hasEllipsis } from '@core/utils/has-ellipsis.util.ts'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/stacked-bar/UiStackedBar.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/ui/stacked-bar/StackedBarSegment.vue'
-import { formatSizeParse } from '@core/utils/size.util'
+import { formatSizeParse } from '@core/utils/size.util.ts'
 import { computed } from 'vue'
 
 type Segment = {

package/lib/components/ui/tag/UiTag.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'
 
 export type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'

package/lib/components/ui/task-item/UiTaskItem.vue

@@ -63,7 +63,7 @@ import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
 import UiTaskList from '@core/components/ui/task-list/UiTaskList.vue'
 import { useTimeAgo } from '@core/composables/locale-time-ago.composable.ts'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { TaskObjectSegment, TaskStatus } from '@core/types/task.type.ts'
 import { logicOr } from '@vueuse/math'
 import { computed } from 'vue'

package/lib/components/ui/text-area/UiTextarea.vue

@@ -22,7 +22,7 @@
 import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/toaster/UiToaster.vue

@@ -24,7 +24,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 ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
 

package/lib/components/ui/toggle/UiToggle.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 
 const { busy, disabled } = defineProps<{
   disabled?: boolean

package/lib/components/ui/tooltip/UiTooltip.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { TooltipOptions } from '@core/stores/tooltip.store'
-import { hasEllipsis } from '@core/utils/has-ellipsis.util'
+import type { TooltipOptions } from '@core/stores/tooltip.store.ts'
+import { hasEllipsis } from '@core/utils/has-ellipsis.util.ts'
 import { isString } from 'lodash-es'
 import place from 'placement.js'
 import { computed, ref, watch, watchEffect } from 'vue'

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -9,17 +9,19 @@
       <template v-if="depth > 1">
         <VtsTreeLine v-for="i in depth - 1" :key="i" />
       </template>
-      <UiButtonIcon
-        v-if="hasToggle"
-        v-tooltip="isExpanded ? t('action:close') : t('action:open')"
-        class="toggle"
-        accent="brand"
-        :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
-        size="small"
-        :target-scale="{ x: 1.5, y: 2 }"
-        @click="emit('toggle')"
-      />
-      <div v-else class="h-line" />
+      <div class="toggle-wrapper">
+        <UiButtonIcon
+          v-if="hasToggle"
+          v-tooltip="isExpanded ? t('action:close') : t('action:open')"
+          class="toggle"
+          accent="brand"
+          :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
+          size="small"
+          :target-scale="{ x: 1.5, y: 2 }"
+          @click="emit('toggle')"
+        />
+        <div v-else class="h-line" />
+      </div>
       <a :href class="link typo-body-bold-small" @click="navigate">
         <slot name="icon">
           <VtsIcon :name="icon" size="medium" class="icon" />
@@ -28,7 +30,9 @@
           <slot />
         </div>
       </a>
-      <slot name="addons" />
+      <div class="addons-wrapper">
+        <slot name="addons" />
+      </div>
     </div>
   </RouterLink>
 </template>
@@ -37,9 +41,13 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 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 type { IconName } from '@core/icons'
-import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
+import {
+  IK_TREE_ITEM_EXPANDED,
+  IK_TREE_ITEM_HAS_CHILDREN,
+  IK_TREE_LIST_DEPTH,
+} from '@core/utils/injection-keys.util.ts'
 import { inject, ref, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
@@ -86,6 +94,13 @@ const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
   padding: 0 0.8rem;
   margin-bottom: 0.2rem;
 
+  .toggle-wrapper {
+    width: 2.4rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
   .link {
     display: flex;
     align-items: center;
@@ -108,10 +123,19 @@ const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
   .icon {
     font-size: 1.6rem;
   }
+  .addons-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-shrink: 0;
+  }
+
+  .toggle {
+    width: 100%;
+  }
 
   .h-line {
-    width: 2rem;
-    margin-left: -0.4rem;
+    width: 100%;
   }
 
   /* INTERACTION VARIANTS */

package/lib/components/ui/user-link/UiUserLink.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { type RouteLocationRaw } from 'vue-router'
 
 defineProps<{

package/lib/components/ui/user-logo/UiUserLogo.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 
 export type UserLogoSize = 'extra-small' | 'small' | 'medium'
 

package/lib/components/{vif-connection-toggle-modal/VtsVifConnectionToggleModal.vue → vif-connection-modal/VtsVifConnectionModal.vue}

@@ -1,26 +1,26 @@
 <template>
-  <VtsModal accent="info" icon="status:info-picto" dismissible>
+  <UiModal accent="info" icon="status:info-picto" @confirm="emit('confirm')" @dismiss="emit('cancel')">
     <template #title>
       {{ connection.title }}
     </template>
 
-    <template v-if="action === CONNECTION_ACTION.DISCONNECT" #content>
-      {{ t('vif-disconnect-info') }}
+    <template #content>
+      <template v-if="action === CONNECTION_ACTION.DISCONNECT">{{ t('vif-disconnect-info') }}</template>
     </template>
 
     <template #buttons>
-      <VtsModalCancelButton>{{ t('action:go-back') }}</VtsModalCancelButton>
-      <VtsModalConfirmButton>
+      <VtsOverlayCancelButton @click="emit('cancel')">{{ t('action:go-back') }}</VtsOverlayCancelButton>
+      <VtsOverlayConfirmButton>
         {{ connection.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 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 { useI18n } from 'vue-i18n'
@@ -30,6 +30,11 @@ const { action, count } = defineProps<{
   count: number
 }>()
 
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
 const { t } = useI18n()
 
 const connection = useMapper(

package/lib/composables/chart-theme.composable.ts

@@ -1,4 +1,4 @@
-import { useUiStore } from '@core/stores/ui.store'
+import { useUiStore } from '@core/stores/ui.store.ts'
 import { storeToRefs, type Pinia } from 'pinia'
 import { computed, provide, ref, watch } from 'vue'
 import { THEME_KEY } from 'vue-echarts'

package/lib/composables/context.composable.ts

@@ -1,4 +1,4 @@
-import { toComputed } from '@core/utils/to-computed.util'
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import type { ComputedRef, InjectionKey, MaybeRefOrGetter } from 'vue'
 import { inject, provide, toValue } from 'vue'
 

package/lib/composables/copy.composable.ts

@@ -0,0 +1,6 @@
+import { useClipboard } from '@vueuse/core'
+import type { MaybeRefOrGetter } from 'vue'
+
+export function useCopyToClipboard(source: MaybeRefOrGetter<string>) {
+  return useClipboard({ source, legacy: true })
+}

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

@@ -21,7 +21,7 @@ export function useDefaultTab(dispatcherRouteName: RouteRecordName & string, def
       if (name === dispatcherRouteName) {
         const isSameDispatcher = localStorage.getItem(TAB_MEMORY_DISPATCHER) === dispatcherRouteName
         const tabName = (isSameDispatcher ? localStorage.getItem(TAB_MEMORY_LAST) : null) ?? defaultTab
-        void router.replace({ name: `${dispatcherRouteName}/${tabName}` } as RouteLocationRaw)
+        void router.replace({ name: `${dispatcherRouteName}/${tabName}`, query: route.query } as RouteLocationRaw)
       } else if (!name.startsWith(dispatcherRouteName)) {
         return
       }

package/lib/composables/disabled.composable.ts

@@ -1,4 +1,4 @@
-import { IK_DISABLED } from '@core/utils/injection-keys.util'
+import { IK_DISABLED } from '@core/utils/injection-keys.util.ts'
 import { computed, inject, type MaybeRefOrGetter, provide, toValue } from 'vue'
 
 export function useDisabled(condition?: MaybeRefOrGetter<boolean>) {

package/lib/composables/hide-route-query.composable.ts

@@ -1,4 +1,4 @@
-import { useRouteQuery } from '@core/composables/route-query.composable'
+import { useRouteQuery } from '@core/composables/route-query.composable.ts'
 
 export function useHideRouteQuery(id: string) {
   return useRouteQuery(id, {

package/lib/composables/link-component.composable.ts

@@ -1,4 +1,4 @@
-import { toComputed } from '@core/utils/to-computed.util'
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import type { MaybeRefOrGetter } from 'vue'
 import { computed } from 'vue'
 import type { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric, RouteLocationAsString } from 'vue-router'

package/lib/composables/modals/use-action-modal.ts

@@ -0,0 +1,11 @@
+import { useOverlay } from '@core/packages/overlay/use-overlay.ts'
+
+export function useActionModal() {
+  return useOverlay({
+    component: () => import('@core/components/modal/VtsActionModal.vue'),
+    events: {
+      onConfirm: true,
+      onCancel: true,
+    },
+  })
+}

package/lib/composables/modals/use-blocked-modal.ts

@@ -0,0 +1,10 @@
+import { useOverlay } from '@core/packages/overlay/use-overlay.ts'
+
+export function useBlockedModal() {
+  return useOverlay({
+    component: () => import('@core/components/modal/VtsBlockedModal.vue'),
+    events: {
+      onClose: true,
+    },
+  })
+}

package/lib/composables/modals/use-delete-modal.ts

@@ -0,0 +1,11 @@
+import { useOverlay } from '@core/packages/overlay/use-overlay.ts'
+
+export function useDeleteModal() {
+  return useOverlay({
+    component: () => import('@core/components/modal/VtsDeleteModal.vue'),
+    events: {
+      onConfirm: true,
+      onCancel: true,
+    },
+  })
+}

package/lib/composables/pagination.composable.ts

@@ -1,7 +1,7 @@
 import type { TablePaginationSize } from '@core/components/ui/table-pagination/UiTablePagination.vue'
-import { useRouteQuery } from '@core/composables/route-query.composable'
+import { useRouteQuery } from '@core/composables/route-query.composable.ts'
 import { useUiStore } from '@core/stores/ui.store.ts'
-import { toComputed } from '@core/utils/to-computed.util'
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import { clamp, useLocalStorage } from '@vueuse/core'
 import { computed, type MaybeRefOrGetter } from 'vue'
 

package/lib/composables/route-query/types.ts

@@ -1,4 +1,4 @@
-import type { EmptyObject } from '@core/types/utility.type'
+import type { EmptyObject } from '@core/types/utility.type.ts'
 import type { WritableComputedRef } from 'vue'
 
 export type Options = {

package/lib/composables/route-query.composable.ts

@@ -1,8 +1,8 @@
-import { handleAdd } from '@core/composables/route-query/actions/handle-add'
-import { handleDelete } from '@core/composables/route-query/actions/handle-delete'
-import { handleSet } from '@core/composables/route-query/actions/handle-set'
-import { handleToggle } from '@core/composables/route-query/actions/handle-toggle'
-import type { Actions, Options, RouteQuery, Transformers } from '@core/composables/route-query/types'
+import { handleAdd } from '@core/composables/route-query/actions/handle-add.ts'
+import { handleDelete } from '@core/composables/route-query/actions/handle-delete.ts'
+import { handleSet } from '@core/composables/route-query/actions/handle-set.ts'
+import { handleToggle } from '@core/composables/route-query/actions/handle-toggle.ts'
+import type { Actions, Options, RouteQuery, Transformers } from '@core/composables/route-query/types.ts'
 import { extendRef } from '@vueuse/core'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

package/lib/composables/sort-route-query.composable.ts

@@ -1,4 +1,4 @@
-import { useRouteQuery } from '@core/composables/route-query.composable'
+import { useRouteQuery } from '@core/composables/route-query.composable.ts'
 
 export function useSortRouteQuery(id: string) {
   return useRouteQuery(id, {

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

@@ -1,4 +1,4 @@
-import type { Tab, TabList } from '@core/types/tab.type'
+import type { Tab, TabList } from '@core/types/tab.type.ts'
 import { computed, type MaybeRefOrGetter, type Ref, toRef } from 'vue'
 
 export function useTabList<TName extends string>(names: TName[], initialTab?: MaybeRefOrGetter<TName>) {

package/lib/composables/table/create-base-definition.ts

@@ -1,4 +1,4 @@
-import type { BaseDefinition, ColumnOptions } from '@core/composables/table/type'
+import type { BaseDefinition, ColumnOptions } from '@core/composables/table/type.ts'
 
 export function createBaseDefinition<TId extends string, TRecord>(
   columnId: TId,