@xen-orchestra/web-core 0.20.1 → 0.21.0

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-all-good-hero" image="all-good">
-    {{ $t('all-good') }}
+    {{ t('all-good') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-coming-soon-hero" image="under-construction">
-    {{ $t('coming-soon') }}
+    {{ t('coming-soon') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,11 +1,14 @@
 <template>
-  <VtsStateHero class="vts-error-hero" image="error" :type>{{ $t('error-no-data') }}</VtsStateHero>
+  <VtsStateHero class="vts-error-hero" image="error" :type>{{ t('error-no-data') }}</VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="vts-loading-hero">
     <VtsStateHero :type busy>
-      {{ $t('loading-in-progress') }}
+      {{ t('loading-in-progress') }}
     </VtsStateHero>
     <div v-if="slots.title || slots.text" class="content">
       <div v-if="slots.title" class="title" :class="className">
@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { type } = defineProps<{
   type: StateHeroType
@@ -27,6 +28,8 @@ const slots = defineSlots<{
   text?(): any
 }>()
 
+const { t } = useI18n()
+
 const className = computed(() => (type === 'page' ? 'typo-h1' : 'typo-h2'))
 </script>
 

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

@@ -1,11 +1,14 @@
 <template>
-  <VtsStateHero class="vts-no-data-hero" image="no-data" :type>{{ $t('no-data') }}</VtsStateHero>
+  <VtsStateHero class="vts-no-data-hero" image="no-data" :type>{{ t('no-data') }}</VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-no-selection-hero" image="no-selection">
-    {{ $t('select-to-see-details') }}
+    {{ t('select-to-see-details') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,14 +1,17 @@
 <template>
   <VtsStateHero class="vts-object-not-found-hero" image="no-result" :type>
-    {{ $t('object-not-found', { id }) }}
+    {{ t('object-not-found', { id }) }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   id: string
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,13 +1,16 @@
 <template>
   <VtsStateHero :type class="vts-offline-hero" image="offline">
-    {{ $t('offline') }}
+    {{ t('offline') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>

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

@@ -1,16 +1,19 @@
 <template>
   <VtsStateHero class="vts-page-not-found-hero" image="not-found" :type>
     <span class="numeric">404</span><br />
-    {{ $t('page-not-found') }}
+    {{ t('page-not-found') }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   type: StateHeroType
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/table/ColumnTitle.vue

@@ -19,14 +19,14 @@
     <MenuItem
       v-for="interaction in interactions"
       :key="interaction.id"
-      v-tooltip="$t('coming-soon')"
+      v-tooltip="t('coming-soon')"
       :disabled="interaction.disabled"
       :on-click="() => updateInteraction(interaction)"
     >
       <VtsIcon :icon="interaction.icon" accent="current" />
       {{ interaction.label }}
       <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo-body-regular-small">
-        {{ $t('core.current').toLowerCase() }}
+        {{ t('core.current').toLowerCase() }}
       </i>
     </MenuItem>
   </MenuList>

package/lib/components/task/VtsQuickTaskButton.vue

@@ -1,7 +1,7 @@
 <template>
   <UiButtonIcon
     ref="buttonRef"
-    v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
+    v-tooltip="{ content: t('tasks.quick-view'), placement: 'bottom-end' }"
     accent="brand"
     :dot="hasNewTask"
     :icon="faBarsProgress"
@@ -24,12 +24,15 @@ import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
 import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   tasks: Task[]
   loading?: boolean
 }>()
 
+const { t } = useI18n()
+
 const ids = computed(() => props.tasks.map(task => task.id))
 
 const isPanelOpen = ref(false)

package/lib/components/task/VtsQuickTaskList.vue

@@ -3,11 +3,11 @@
     <li v-if="loading">
       <div class="loading">
         <UiLoader />
-        <div>{{ $t('loading-in-progress') }}</div>
+        <div>{{ t('loading-in-progress') }}</div>
       </div>
     </li>
     <template v-else>
-      <li v-if="tasks.length === 0" class="typo-body-bold">{{ $t('tasks.no-tasks') }}</li>
+      <li v-if="tasks.length === 0" class="typo-body-bold">{{ t('tasks.no-tasks') }}</li>
       <UiQuickTaskItem v-for="task of tasks" :key="task.id" :task />
     </template>
   </ul>
@@ -16,12 +16,15 @@
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import UiQuickTaskItem, { type Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   tasks: Task[]
   sublist?: boolean
   loading?: boolean
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/task/VtsQuickTaskTabBar.vue

@@ -1,7 +1,7 @@
 <template>
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
-      {{ $t('tasks.quick-view.in-progress') }}
+      {{ t('tasks.quick-view.in-progress') }}
       <UiCounter
         v-if="pendingCount !== undefined"
         :value="pendingCount"
@@ -11,7 +11,7 @@
       />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
-      {{ $t('tasks.quick-view.done') }}
+      {{ t('tasks.quick-view.done') }}
       <UiCounter
         v-if="successCount !== undefined"
         :value="successCount"
@@ -21,7 +21,7 @@
       />
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
-      {{ $t('tasks.quick-view.failed') }}
+      {{ t('tasks.quick-view.failed') }}
       <UiCounter
         v-if="failureCount !== undefined"
         :value="failureCount"
@@ -32,12 +32,12 @@
     </TabItem>
     <VtsDivider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
-      {{ $t('tasks.quick-view.all') }}
+      {{ t('tasks.quick-view.all') }}
     </TabItem>
     <!--
     TODO
     <UiButton :right-icon="faAngleRight" class="see-all" level="tertiary" size="extra-small">
-      {{ $t('see-all') }}
+      {{ t('see-all') }}
     </UiButton>
     -->
   </TabList>
@@ -50,6 +50,7 @@ import TabList from '@core/components/tab/TabList.vue'
 import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import type { TaskStatus } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
+import { useI18n } from 'vue-i18n'
 
 export type TaskTab = TaskStatus | 'all'
 
@@ -62,5 +63,7 @@ defineProps<{
 
 const currentTab = defineModel<TaskTab>({ required: true })
 
+const { t } = useI18n()
+
 const { tabs } = useTabList<TaskTab>(['pending', 'success', 'failure', 'all'], currentTab)
 </script>

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

@@ -4,7 +4,7 @@
     <span class="label typo-caption-small">{{ label }}</span>
     <div class="values" :class="fontClass">
       <span v-if="percentValue !== undefined">
-        {{ $n(percentValue, 'percent') }}
+        {{ n(percentValue, 'percent') }}
       </span>
       <span>
         {{ `${value ?? '-'} ${unit ?? ''}` }}
@@ -16,6 +16,7 @@
 <script setup lang="ts">
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { size, value, max } = defineProps<{
   label: string
@@ -25,6 +26,8 @@ const { size, value, max } = defineProps<{
   max?: number
 }>()
 
+const { n } = useI18n()
+
 const className = computed(() => toVariants({ size }))
 const fontClass = computed(() => (size === 'medium' ? 'typo-h3' : 'typo-caption-small'))
 

package/lib/components/ui/character-limit/UiCharacterLimit.vue

@@ -1,18 +1,21 @@
 <!-- v1 -->
 <template>
   <span class="ui-character-limit" :class="classes">
-    {{ $t('core.character-limit', { count, max }) }}
+    {{ t('core.character-limit', { count, max }) }}
   </span>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { count, max } = defineProps<{
   count: number
   max: number
 }>()
 
+const { t } = useI18n()
+
 const isTooLong = computed(() => count > max)
 
 const classes = computed(() => {

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

@@ -30,7 +30,7 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
-import { useMapper } from '@core/composables/mapper.composable.ts'
+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 type { IconDefinition } from '@fortawesome/fontawesome-common-types'
@@ -79,7 +79,7 @@ const accent = useMapper<LabelAccent, InputAccent>(
     warning: 'warning',
     danger: 'danger',
   },
-  () => _accent
+  'neutral'
 )
 
 if (wrapperController) {

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

@@ -5,7 +5,7 @@
     <label :for="htmlFor" :class="{ required }" class="typo-caption label">
       <slot />
     </label>
-    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ $t('learn-more') }}</UiLink>
+    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ t('learn-more') }}</UiLink>
   </div>
 </template>
 
@@ -14,6 +14,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { useI18n } from 'vue-i18n'
 
 export type LabelAccent = 'neutral' | 'warning' | 'danger'
 
@@ -24,6 +25,8 @@ const { for: htmlFor } = defineProps<{
   required?: boolean
   href?: string
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

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

@@ -5,8 +5,8 @@
       <div class="fill" :style="{ width: `${fillWidth}%` }" />
     </div>
     <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
-      <span>{{ $n(0, 'percent') }}</span>
-      <span v-for="step in steps" :key="step">{{ $n(step, 'percent') }}</span>
+      <span>{{ n(0, 'percent') }}</span>
+      <span v-for="step in steps" :key="step">{{ n(step, 'percent') }}</span>
     </div>
     <VtsLegendList class="legend">
       <UiLegend :accent :value="Math.round(percentage)" unit="%">{{ legend }}</UiLegend>
@@ -20,6 +20,7 @@ import UiLegend from '@core/components/ui/legend/UiLegend.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import { useClamp, useMax } from '@vueuse/math'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const {
   value: _value,
@@ -32,6 +33,8 @@ const {
   showSteps?: boolean
 }>()
 
+const { n } = useI18n()
+
 const value = useMax(0, () => _value)
 
 const percentage = computed(() => (max <= 0 ? 0 : (value.value / max) * 100))

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

@@ -2,29 +2,29 @@
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo-body-regular-small label">
-      {{ $t('core.query-search-bar.label') }}
+      {{ t('core.query-search-bar.label') }}
     </label>
     <UiInput
       :id
       v-model="value"
       type="text"
       accent="brand"
-      :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
+      :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
-      :placeholder="$t('core.query-search-bar.placeholder')"
+      :placeholder="t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ t('core.search') }}</UiButton>
       <VtsDivider type="stretch" />
       <UiButton
-        v-tooltip="$t('coming-soon')"
+        v-tooltip="t('coming-soon')"
         size="medium"
         accent="brand"
         variant="secondary"
         :left-icon="faFilter"
         disabled
       >
-        {{ $t('core.query-search-bar.use-query-builder') }}
+        {{ t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
     <template v-else>
@@ -44,11 +44,14 @@ import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
 import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits<{
   search: [value: string]
 }>()
 
+const { t } = useI18n()
+
 const id = uniqueId('search-input-')
 
 const uiStore = useUiStore()

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -13,14 +13,14 @@
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon :icon="faCircleNotch" accent="current" />
-            <span class="typo-body-regular-small">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+            <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
-          {{ $d(task.start, 'datetime_short') }}
+          {{ d(task.start, 'datetime_short') }}
           <template v-if="task.end">
             <VtsIcon :icon="faArrowRight" accent="current" />
-            {{ $d(new Date(task.end), 'datetime_short') }}
+            {{ d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
       </div>
@@ -37,6 +37,7 @@ import UiTag from '@core/components/ui/tag/UiTag.vue'
 import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type TaskStatus = 'pending' | 'success' | 'failure'
 
@@ -54,6 +55,8 @@ const props = defineProps<{
   task: Task
 }>()
 
+const { t, d } = useI18n()
+
 const [isExpanded, toggleExpand] = useToggle()
 
 const subTasks = computed(() => props.task.subtasks ?? [])

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

@@ -7,7 +7,7 @@
     class="stacked-bar-segment typo-caption-small"
   >
     <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
-      {{ $n(percentage / 100, 'percent') }}
+      {{ n(percentage / 100, 'percent') }}
     </div>
   </div>
 </template>
@@ -17,6 +17,7 @@ import { vTooltip } from '@core/directives/tooltip.directive'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type StackedBarSegmentAccent = 'info' | 'success' | 'warning' | 'danger'
 
@@ -27,6 +28,8 @@ export type StackedBarSegmentProps = {
 
 defineProps<StackedBarSegmentProps>()
 
+const { n } = useI18n()
+
 const hidden = ref(false)
 const ellipsisElement = ref<HTMLElement | null>(null)
 

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -8,13 +8,13 @@
       <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
     </div>
     <span class="typo-body-regular-small label">
-      {{ $t('core.select.n-object-of', { from, to, total }) }}
+      {{ t('core.select.n-object-of', { from, to, total }) }}
     </span>
-    <span class="typo-body-regular-small label show">{{ $t('core.pagination.show-by') }}</span>
+    <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
     <div class="dropdown-wrapper">
       <select v-model="showBy" class="dropdown typo-body-regular-small">
         <option v-for="option in [50, 100, 150, 200, -1]" :key="option" :value="option" class="typo-body-bold-small">
-          {{ option === -1 ? $t('core.pagination.all') : option }}
+          {{ option === -1 ? t('core.pagination.all') : option }}
         </option>
       </select>
       <VtsIcon :icon="faAngleDown" accent="current" class="icon" />
@@ -32,6 +32,7 @@ import {
   faAngleLeft,
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   from: number
@@ -49,6 +50,8 @@ const emit = defineEmits<{
 }>()
 
 const showBy = defineModel<number>('showBy', { default: 50 })
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

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

@@ -7,7 +7,7 @@
     <textarea v-bind="attrs" :id ref="textarea" v-model="model" :disabled class="textarea" />
     <UiCharacterLimit v-if="maxCharacters" :count="model.trim().length" :max="maxCharacters" />
     <UiInfo v-if="isExceedingMaxCharacters" accent="danger">
-      {{ $t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
+      {{ t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
     </UiInfo>
     <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
       <slot name="info" />
@@ -23,6 +23,7 @@ import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 defineOptions({
   inheritAttrs: false,
@@ -49,6 +50,8 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 
 const textAreaElement = useTemplateRef('textarea')

package/lib/components/ui/top-bottom-table/UiTopBottomTable.vue

@@ -3,7 +3,7 @@
   <div class="ui-top-bottom-table">
     <div class="content">
       <span class="typo-body-regular-small label">
-        {{ $t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
+        {{ t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
       </span>
 
       <UiButton
@@ -13,7 +13,7 @@
         variant="tertiary"
         @click="emit('toggleSelectAll', true)"
       >
-        {{ $t('core.select.all') }}
+        {{ t('core.select.all') }}
       </UiButton>
       <UiButton
         :disabled="selectedItems === 0"
@@ -22,7 +22,7 @@
         variant="tertiary"
         @click="emit('toggleSelectAll', false)"
       >
-        {{ $t('core.select.unselect') }}
+        {{ t('core.select.unselect') }}
       </UiButton>
     </div>
     <slot />
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   selectedItems: number
@@ -44,6 +45,8 @@ const emit = defineEmits<{
 defineSlots<{
   default(): any
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style scoped lang="postcss">