Work around vue-i18n #1403

VedaWebProject · Aug 7, 2023 · 3f66d31 · 3f66d31
1 parent 39e7aae
commit 3f66d31
Show file tree

Hide file tree

Showing 37 changed files with 229 additions and 251 deletions.
diff --git a/Tekst-Web/src/App.vue b/Tekst-Web/src/App.vue
@@ -13,13 +13,11 @@ import { useInitializeApp } from '@/init';
 import LoginModal from '@/components/LoginModal.vue';
 import HugeLabeledIcon from '@/components/HugeLabeledIcon.vue';
 import ErrorTwotone from '@vicons/material/ErrorTwotone';
-import { useI18n } from 'vue-i18n';
 
 const state = useStateStore();
 const themeVars = useThemeVars();
 const { initialized, error } = useInitializeApp();
 const { theme, themeOverrides, mainBgColor, contentBgColor, accentColors } = useTheme();
-const { t } = useI18n({ useScope: 'global' });
 
 // i18n
 const nUiLangLocale = computed(() => localeProfiles[state.locale].nUiLangLocale);
@@ -37,7 +35,7 @@ const nUiDateLocale = computed(() => localeProfiles[state.locale].nUiDateLocale)
       <div id="app-container">
         <huge-labeled-icon
           v-if="initialized && error"
-          :message="t('init.error')"
+          :message="$t('init.error')"
           :loading="!error && !initialized"
           :icon="ErrorTwotone"
         />

diff --git a/Tekst-Web/src/components/LoginModal.vue b/Tekst-Web/src/components/LoginModal.vue
@@ -90,7 +90,7 @@ onMounted(() => {
       embedded
     >
       <div class="form-container">
-        <h2 style="text-align: center">{{ t('account.login.heading') }}</h2>
+        <h2 style="text-align: center">{{ $t('account.login.heading') }}</h2>
         <div v-show="args[0]" class="login-message">{{ args[0] }}</div>
         <n-form
           ref="formRef"
@@ -102,12 +102,12 @@ onMounted(() => {
           <n-form-item
             path="email"
             :rule="accountFormRules.loginEmail"
-            :label="t('models.user.email')"
+            :label="$t('models.user.email')"
           >
             <n-input
               v-model:value="formModel.email"
               type="text"
-              :placeholder="t('models.user.email')"
+              :placeholder="$t('models.user.email')"
               @keydown.enter.prevent
               :disabled="isResolving"
               ref="emailInputRef"
@@ -116,12 +116,12 @@ onMounted(() => {
           <n-form-item
             path="password"
             :rule="accountFormRules.loginPassword"
-            :label="t('models.user.password')"
+            :label="$t('models.user.password')"
           >
             <n-input
               v-model:value="formModel.password"
               type="password"
-              :placeholder="t('models.user.password')"
+              :placeholder="$t('models.user.password')"
               :disabled="isResolving"
               @keyup.enter="handleLoginClick(resolve, args[1])"
             />
@@ -135,7 +135,7 @@ onMounted(() => {
             style="margin-bottom: 2rem; font-size: var(--app-ui-font-size-mini)"
             @click="handleForgotPasswordClick(resolve)"
           >
-            {{ t('account.forgotPassword.forgotPassword') }}
+            {{ $t('account.forgotPassword.forgotPassword') }}
           </n-button>
         </div>
 
@@ -147,10 +147,10 @@ onMounted(() => {
             :loading="isResolving"
             :disabled="isResolving"
           >
-            {{ t('account.loginBtn') }}
+            {{ $t('account.loginBtn') }}
           </n-button>
           <n-button v-if="args[2]" secondary block @click="reject(switchToRegistration())">
-            {{ t('account.switchToRegister') }}
+            {{ $t('account.switchToRegister') }}
           </n-button>
         </n-space>
       </div>

diff --git a/Tekst-Web/src/components/admin/InsertLevelButton.vue b/Tekst-Web/src/components/admin/InsertLevelButton.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import { NButton, NIcon } from 'naive-ui';
 import AddRound from '@vicons/material/AddRound';
-import { useI18n } from 'vue-i18n';
 
 defineProps<{
   level: number;
 }>();
 defineEmits(['click']);
-
-const { t } = useI18n({ useScope: 'global' });
 </script>
 
 <template>
@@ -17,7 +14,7 @@ const { t } = useI18n({ useScope: 'global' });
     <n-button
       secondary
       circle
-      :title="t('admin.texts.levels.tipInsertLevel', { n: level + 1 })"
+      :title="$t('admin.texts.levels.tipInsertLevel', { n: level + 1 })"
       @click="$emit('click', level)"
       :focusable="false"
     >

diff --git a/Tekst-Web/src/components/admin/UserListItem.vue b/Tekst-Web/src/components/admin/UserListItem.vue
@@ -10,7 +10,6 @@ import CheckCircleRound from '@vicons/material/CheckCircleRound';
 import QuestionMarkRound from '@vicons/material/QuestionMarkRound';
 import ClearRound from '@vicons/material/ClearRound';
 import { usePlatformData } from '@/platformData';
-import { useI18n } from 'vue-i18n';
 
 defineProps<{
   targetUser: UserRead;
@@ -20,7 +19,6 @@ defineProps<{
 defineEmits(['superuserClick', 'activeClick', 'verifiedClick', 'deleteClick']);
 
 const { pfData } = usePlatformData();
-const { t } = useI18n({ useScope: 'global' });
 
 const statusBtnMinWidth = '128px';
 </script>
@@ -34,14 +32,14 @@ const statusBtnMinWidth = '128px';
     >
       <template #description>
         <a
-          :href="`mailto:${targetUser.email}?subject=${t('admin.users.mailtoSubject', {
+          :href="`mailto:${targetUser.email}?subject=${$t('admin.users.mailtoSubject', {
             platform: pfData?.info?.platformName,
           })}`"
-          :title="t('admin.users.mailtoLinkTitle', { username: targetUser.username })"
+          :title="$t('admin.users.mailtoLinkTitle', { username: targetUser.username })"
         >
           {{ targetUser.email }}
         </a>
-        – {{ t('admin.users.registeredAt') }}
+        – {{ $t('admin.users.registeredAt') }}
         <n-time :time="new Date(targetUser.createdAt)" type="date" />
       </template>
       <template #header-extra>
@@ -53,15 +51,15 @@ const statusBtnMinWidth = '128px';
             :type="targetUser.isSuperuser ? 'info' : 'default'"
             :title="
               targetUser.isSuperuser
-                ? t('admin.users.statusBtnTitle.setUser', { username: targetUser.username })
-                : t('admin.users.statusBtnTitle.setSuperuser', { username: targetUser.username })
+                ? $t('admin.users.statusBtnTitle.setUser', { username: targetUser.username })
+                : $t('admin.users.statusBtnTitle.setSuperuser', { username: targetUser.username })
             "
             size="tiny"
             :style="{ minWidth: statusBtnMinWidth }"
             @click="$emit('superuserClick', targetUser)"
           >
             {{
-              targetUser.isSuperuser ? t('models.user.isSuperuser') : t('models.user.modelLabel')
+              targetUser.isSuperuser ? $t('models.user.isSuperuser') : $t('models.user.modelLabel')
             }}
             <template #icon>
               <n-icon :component="targetUser.isSuperuser ? StarRound : PersonRound" />
@@ -74,14 +72,14 @@ const statusBtnMinWidth = '128px';
             :type="targetUser.isActive ? 'success' : 'error'"
             :title="
               targetUser.isActive
-                ? t('admin.users.statusBtnTitle.setInactive', { username: targetUser.username })
-                : t('admin.users.statusBtnTitle.setActive', { username: targetUser.username })
+                ? $t('admin.users.statusBtnTitle.setInactive', { username: targetUser.username })
+                : $t('admin.users.statusBtnTitle.setActive', { username: targetUser.username })
             "
             size="tiny"
             :style="{ minWidth: statusBtnMinWidth }"
             @click="$emit('activeClick', targetUser)"
           >
-            {{ targetUser.isActive ? t('models.user.isActive') : t('models.user.isInactive') }}
+            {{ targetUser.isActive ? $t('models.user.isActive') : $t('models.user.isInactive') }}
             <template #icon>
               <n-icon :component="targetUser.isActive ? CheckCircleRound : BlockRound" />
             </template>
@@ -93,15 +91,15 @@ const statusBtnMinWidth = '128px';
             :type="targetUser.isVerified ? 'success' : 'warning'"
             :title="
               targetUser.isVerified
-                ? t('admin.users.statusBtnTitle.setUnverified', { username: targetUser.username })
-                : t('admin.users.statusBtnTitle.setVerified', { username: targetUser.username })
+                ? $t('admin.users.statusBtnTitle.setUnverified', { username: targetUser.username })
+                : $t('admin.users.statusBtnTitle.setVerified', { username: targetUser.username })
             "
             size="tiny"
             :style="{ minWidth: statusBtnMinWidth }"
             @click="$emit('verifiedClick', targetUser)"
           >
             {{
-              targetUser.isVerified ? t('models.user.isVerified') : t('models.user.isUnverified')
+              targetUser.isVerified ? $t('models.user.isVerified') : $t('models.user.isUnverified')
             }}
             <template #icon>
               <n-icon :component="targetUser.isVerified ? VerifiedUserRound : QuestionMarkRound" />
@@ -112,7 +110,7 @@ const statusBtnMinWidth = '128px';
             strong
             secondary
             type="error"
-            :title="t('admin.users.statusBtnTitle.deleteUser', { username: targetUser.username })"
+            :title="$t('admin.users.statusBtnTitle.deleteUser', { username: targetUser.username })"
             size="tiny"
             :disabled="currentUser && currentUser.id === targetUser.id"
             @click="$emit('deleteClick', targetUser)"

diff --git a/Tekst-Web/src/components/browse/BrowseLocationControls.vue b/Tekst-Web/src/components/browse/BrowseLocationControls.vue
@@ -11,12 +11,10 @@ import router from '@/router';
 import ModalButtonFooter from '@/components/ModalButtonFooter.vue';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { useApi } from '@/api';
-import { useI18n } from 'vue-i18n';
 
 const state = useStateStore();
 const browse = useBrowseStore();
 const route = useRoute();
-const { t } = useI18n({ useScope: 'global' });
 const { browseApi } = useApi();
 
 const { ArrowLeft, ArrowRight } = useMagicKeys();
@@ -221,7 +219,7 @@ whenever(ArrowLeft, () => {
         @click="navigate"
         :disabled="browse.position === 0"
         :focusable="false"
-        :title="t('browse.toolbar.tipPreviousLocation')"
+        :title="$t('browse.toolbar.tipPreviousLocation')"
         size="large"
         color="#fff"
       >
@@ -233,7 +231,7 @@ whenever(ArrowLeft, () => {
 
     <n-button
       secondary
-      :title="t('browse.toolbar.tipSelectLocation')"
+      :title="$t('browse.toolbar.tipSelectLocation')"
       @click="showModal = true"
       :focusable="false"
       size="large"
@@ -250,7 +248,7 @@ whenever(ArrowLeft, () => {
         secondary
         @click="navigate"
         :focusable="false"
-        :title="t('browse.toolbar.tipNextLocation')"
+        :title="$t('browse.toolbar.tipNextLocation')"
         size="large"
         color="#fff"
       >
@@ -271,14 +269,14 @@ whenever(ArrowLeft, () => {
     size="large"
     class="tekst-modal"
   >
-    <h2>{{ t('browse.location.modalHeading') }}</h2>
+    <h2>{{ $t('browse.location.modalHeading') }}</h2>
     <n-form
       label-placement="left"
       label-width="auto"
       :show-feedback="false"
       :show-require-mark="false"
     >
-      <n-form-item :label="t('browse.location.level')">
+      <n-form-item :label="$t('browse.location.level')">
         <n-select :options="browseLevelOptions" v-model:value="browseLevel" />
       </n-form-item>
 
@@ -305,10 +303,10 @@ whenever(ArrowLeft, () => {
     <!-- <pre style="font-size: 11px; line-height: 1">{{ locationSelectModels }}</pre> -->
     <ModalButtonFooter>
       <n-button @click="showModal = false" :focusable="false">
-        {{ t('general.cancelAction') }}
+        {{ $t('general.cancelAction') }}
       </n-button>
       <n-button type="primary" @click="handleLocationSelect">
-        {{ t('general.selectAction') }}
+        {{ $t('general.selectAction') }}
       </n-button>
     </ModalButtonFooter>
   </n-modal>

diff --git a/Tekst-Web/src/components/browse/BrowseToolbar.vue b/Tekst-Web/src/components/browse/BrowseToolbar.vue
@@ -7,11 +7,9 @@ import CompressRound from '@vicons/material/CompressRound';
 import ExpandRound from '@vicons/material/ExpandRound';
 import LayersRound from '@vicons/material/LayersRound';
 import { useBrowseStore, useStateStore } from '@/stores';
-import { useI18n } from 'vue-i18n';
 
 const state = useStateStore();
 const browse = useBrowseStore();
-const { t } = useI18n({ useScope: 'global' });
 
 const affixRef = ref(null);
 
@@ -41,7 +39,7 @@ onMounted(() => {
           :secondary="!browse.reducedView"
           :ghost="browse.reducedView"
           size="large"
-          :title="t('browse.toolbar.tipReducedView')"
+          :title="$t('browse.toolbar.tipReducedView')"
           color="#fff"
           :focusable="false"
           @click="browse.reducedView = !browse.reducedView"
@@ -55,7 +53,7 @@ onMounted(() => {
         <n-button
           secondary
           size="large"
-          :title="t('browse.toolbar.tipOpenDataLayerList')"
+          :title="$t('browse.toolbar.tipOpenDataLayerList')"
           color="#fff"
           :focusable="false"
           @click="browse.showLayerToggleDrawer = true"

diff --git a/Tekst-Web/src/components/browse/LayerToggleDrawer.vue b/Tekst-Web/src/components/browse/LayerToggleDrawer.vue
@@ -3,13 +3,11 @@ import { computed } from 'vue';
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useBrowseStore } from '@/stores';
 import LayerToggleDrawerItem from '@/components/browse/LayerToggleDrawerItem.vue';
-import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{ show: boolean }>();
 const emits = defineEmits<{ (e: 'update:show', show: boolean): void }>();
 
 const browse = useBrowseStore();
-const { t } = useI18n({ useScope: 'global' });
 
 const show = computed({
   get() {
@@ -30,7 +28,7 @@ const show = computed({
     style="max-width: 90%"
   >
     <n-drawer-content
-      :title="t('browse.layerToggleDrawer.heading')"
+      :title="$t('browse.layerToggleDrawer.heading')"
       header-style="font-size: var(--app-ui-font-size-huge); font-weight: var(--app-ui-font-weight-light)"
       closable
     >

diff --git a/Tekst-Web/src/components/browse/LayerToggleDrawerItem.vue b/Tekst-Web/src/components/browse/LayerToggleDrawerItem.vue
@@ -38,7 +38,7 @@ const infoTooltip = computed(() => (props.disabled ? t('browse.locationLayerNoDa
       <div class="layer-toggle-item-title-container">
         <div class="layer-toggle-item-title">{{ layer.title }}</div>
         <div class="layer-toggle-item-title-extra">
-          ({{ t('browse.location.level') }}: {{ state.textLevelLabels[layer.level] }})
+          ({{ $t('browse.location.level') }}: {{ state.textLevelLabels[layer.level] }})
         </div>
       </div>
       <div class="layer-toggle-item-meta">

diff --git a/Tekst-Web/src/components/browse/widgets/DeepLLinksWidget.vue b/Tekst-Web/src/components/browse/widgets/DeepLLinksWidget.vue
@@ -7,7 +7,6 @@ import type { VNodeChild } from 'vue';
 import { useStateStore } from '@/stores';
 import { NDropdown } from 'naive-ui';
 import type { DropdownOption } from 'naive-ui';
-import { useI18n } from 'vue-i18n';
 
 const DEEPL_TRANSLATOR_URL = 'https://www.deepl.com/translator';
 
@@ -17,7 +16,6 @@ const props = defineProps<{
 }>();
 
 const state = useStateStore();
-const { t } = useI18n({ useScope: 'global' });
 
 const unitsTextEncoded = computed<string>(() => {
   const unitsText = props.layer.units
@@ -65,7 +63,7 @@ function renderOption(option: DropdownOption) {
     show-arrow
   >
     <UnitContainerHeaderWidget
-      :title="t('browse.units.widgets.deepLTranslate.title')"
+      :title="$t('browse.units.widgets.deepLTranslate.title')"
       :iconComponent="TranslateRound"
     />
   </n-dropdown>

diff --git a/Tekst-Web/src/components/browse/widgets/LayerDeactivateWidget.vue b/Tekst-Web/src/components/browse/widgets/LayerDeactivateWidget.vue
@@ -24,7 +24,7 @@ function handleClick() {
 
 <template>
   <UnitContainerHeaderWidget
-    :title="t('browse.units.widgets.deactivateWidget.title')"
+    :title="$t('browse.units.widgets.deactivateWidget.title')"
     :iconComponent="ClearRound"
     @click="handleClick"
   />