refactor(i18n): migrate to composition API syntax

strahe · Jan 31, 2025 · b165341 · b165341
1 parent 0c0ae7b
commit b165341
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/ui/src/layouts/sidebar/NavCollapse.vue b/ui/src/layouts/sidebar/NavCollapse.vue
@@ -2,6 +2,7 @@
 import { PropType } from 'vue'
 import NavItem from './NavItem.vue'
 import { IconChevronRight } from '@tabler/icons-vue'
+import { useI18n } from 'vue-i18n'
 import { menuItem } from './sidebarItems'
 
 defineProps({
@@ -18,6 +19,8 @@ defineProps({
     default: 'vertical'
   }
 })
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -32,7 +35,7 @@ defineProps({
           size="20"
         />
       </i>
-      <span class="mr-auto">{{ $t("nav."+item.title) }}</span>
+      <span class="mr-auto">{{ t("nav."+item.title) }}</span>
       <!---If Caption-->
       <small
         v-if="item.subCaption"
@@ -84,7 +87,7 @@ defineProps({
             />
           </template>
           <v-list-item-title class="mr-auto">
-            {{ $t("nav."+item.title) }}
+            {{ t("nav."+item.title) }}
           </v-list-item-title>
         </v-list-item>
       </template>

diff --git a/ui/src/layouts/sidebar/NavGroup.vue b/ui/src/layouts/sidebar/NavGroup.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps({
   item: {
     type: Object,
     required: true,
   },
 })
+const { t } = useI18n()
 </script>
 
 <template>
   <v-list-subheader
     class="smallCap text-subtitle-2"
     color="lightText"
   >
-    {{ $t("nav."+props.item.header) }}
+    {{ t("nav."+props.item.header) }}
   </v-list-subheader>
 </template>
diff --git a/ui/src/layouts/sidebar/NavItem.vue b/ui/src/layouts/sidebar/NavItem.vue
@@ -2,6 +2,7 @@
 import { PropType, onMounted, ref,computed } from 'vue'
 import { IconPointFilled } from '@tabler/icons-vue'
 import { menuItem } from './sidebarItems'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   item: {
@@ -17,6 +18,7 @@ const props = defineProps({
     default: 'vertical'
   }
 })
+const { t } = useI18n()
 
 const relativeURL = ref('')
 
@@ -55,7 +57,7 @@ const icon = computed(() => {
           size="20"
         />
       </i>
-      <span>{{ $t("nav."+item.title) }}</span>
+      <span>{{ t("nav."+item.title) }}</span>
       <small
         v-if="item.subCaption"
         class="text-caption mt-n1 hide-menu"
@@ -95,7 +97,7 @@ const icon = computed(() => {
         />
       </template>
       <v-list-item-title class="mr-auto">
-        {{ $t("nav."+item.title) }}
+        {{ t("nav."+item.title) }}
       </v-list-item-title>
       <v-list-item-subtitle
         v-if="item.subCaption"

diff --git a/ui/src/views/market/asks/AskList.vue b/ui/src/views/market/asks/AskList.vue
@@ -7,8 +7,11 @@ import { MarketMk12StorageAsk } from '@/typed-graph'
 import { attoFilToFilPerTiBPerMonth } from '@/utils/helpers/convertPrice'
 import { formatBytes } from '@/utils/helpers/formatBytes'
 import { IconReload } from '@tabler/icons-vue'
+import { useI18n } from 'vue-i18n'
 import SetAsk from './widgets/SetAsk.vue'
 
+const { d } = useI18n()
+
 const { result, loading, refetch } = useQuery(GetMarketMk12StorageAsks, null, () => ({
   fetchPolicy: 'cache-first',
 }))
@@ -73,10 +76,10 @@ const searchValue = ref<string>()
         {{ formatBytes(value).combined }}
       </template>
       <template #item.createdAt="{ value }">
-        {{ $d(value * 1000, 'long') }}
+        {{ d(value * 1000, 'long') }}
       </template>
       <template #item.expiry="{ value }">
-        {{ $d(value * 1000, 'long') }}
+        {{ d(value * 1000, 'long') }}
       </template>
       <template #item.actions="{ item }">
         <SetAsk