I18n/extras

src/App.vue

@@ -52,6 +52,7 @@ import { NodeFsImplementation } from './providers/node/fs/NodeFsImplementation';
 import { useRouter } from 'vue-router';
 import { ProtocolProviderImplementation } from './providers/generic/protocol/ProtocolProviderImplementation';
 import { provideProtocolImplementation } from './providers/generic/protocol/ProtocolProvider';
+import { useI18n } from 'vue-i18n';
 
 const store = baseStore;
 const router = useRouter();
@@ -143,6 +144,19 @@ onMounted(async () => {
 watchEffect(() => {
     document.documentElement.classList.toggle('html--dark', quasar.dark.isActive);
 })
+
+const { locale } = useI18n();
+
+document.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.altKey && ['l', '¬'].includes(e.key.toLowerCase())) {
+        console.log("Switch lang");
+        if (locale.value === 'en') {
+            locale.value = 'fr';
+        } else {
+            locale.value = 'en';
+        }
+    }
+})
 </script>
 
 <style lang="scss">

src/boot/i18n.ts

@@ -1,14 +1,15 @@
 import { createI18n } from 'vue-i18n';
-import messages from '../i18n';
+import messages, { datetimeFormats } from '../i18n';
 import { defineBoot } from '#q-app/wrappers';
 // You'll need to create the src/i18n/index.js/.ts file too
 
 const i18n = createI18n({
-    locale: 'en-US',
+    locale: 'en',
     globalInjection: true,
     allowComposition: true,
     legacy: false,
     messages,
+    datetimeFormats
 })
 
 // @ts-ignore

src/components/ExpandableCard.vue

@@ -6,20 +6,20 @@
                     <header class='card-header is-shadowless' :id='id'>
                         <div class='card-header-icon mod-logo' v-if="image !== ''">
                             <figure class='image is-48x48 image-parent'>
-                                <img :src='image' alt='Mod Logo' class='image-overlap'/>
-                                <img v-if="store.state.profile.funkyMode" src='../assets/funky_mode.png' alt='Mod Logo' class='image-overlap'/>
+                                <img :src='image' :alt="t('translations.pages.manager.installed.expandableCard.imageAltText')" class='image-overlap'/>
+                                <img v-if="store.state.profile.funkyMode" src='../assets/funky_mode.png' :alt="t('translations.pages.manager.installed.expandableCard.funkyModeAltText')" class='image-overlap'/>
                             </figure>
                         </div>
                         <span ref="title" class='card-header-title'><slot name='title'></slot></span>
                         <slot name='other-icons'></slot>
                         <!-- Allow movement of mod order -->
                         <a v-if='showSort' class='card-header-icon handle'>
-                            <i class="fas fa-grip-vertical" v-tooltip.left="'Drag to reorder'"></i>
+                            <i class="fas fa-grip-vertical" :v-tooltip.left="t('translations.pages.manager.installed.expandableCard.tooltips.dragToReorder')"></i>
                         </a>
                         <a class='card-header-icon'>
                             <span class='icon'>
-                                <i class='fas fa-angle-right' aria-hidden='true' v-if='!visible' v-tooltip.left="'Expand'"></i>
-                                <i class='fas fa-angle-down' aria-hidden='true' v-if='visible' v-tooltip.left="'Collapse'"></i>
+                                <i class='fas fa-angle-right' aria-hidden='true' v-if='!visible' v-tooltip.left="t('translations.pages.manager.installed.expandableCard.tooltips.expand')"></i>
+                                <i class='fas fa-angle-down' aria-hidden='true' v-if='visible' v-tooltip.left="t('translations.pages.manager.installed.expandableCard.tooltips.collapse')"></i>
                             </span>
                         </a>
                     </header>
@@ -43,8 +43,10 @@
 import { computed, onMounted, ref, watchEffect } from 'vue';
 import { getStore } from '../providers/generic/store/StoreProvider';
 import { State } from '../store';
+import { useI18n } from "vue-i18n";
 
 const store = getStore<State>();
+const { t } = useI18n();
 
 type ExpandableCardProps = {
     image?: string;

src/components/buttons/DonateButton.vue

@@ -2,15 +2,18 @@
     <ExternalLink v-if="mod && mod.getDonationLink()"
           :url="mod.getDonationLink()"
           class="card-footer-item"
-          v-tooltip.left="{content: 'Donate to the mod author', distance: 0}">
+          v-tooltip.left="{content: t('translations.pages.manager.installed.localModCard.tooltips.donate'), distance: 0}">
         <i class='fas fa-heart margin-right margin-right--half-width'></i>
-        Donate
+        {{ t('translations.pages.manager.installed.localModCard.actions.donate') }}
     </ExternalLink>
 </template>
 
 <script lang="ts" setup>
 import ThunderstoreMod from '../../model/ThunderstoreMod';
 import { ExternalLink } from '../../components/all';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 type DonateButtonProps = {
     mod: ThunderstoreMod;

src/components/config-components/ConfigEditLayout.vue

@@ -2,16 +2,20 @@
     <div>
         <Hero
             :title="configFile.getName()"
-            subtitle="Editing config file"
+            :subtitle="t('translations.pages.configEditor.editConfig.subtitle')"
             hero-type="primary"
         />
         <br/>
         <div class="sticky-top sticky-top--buttons margin-right">
-            <button class="button is-info margin-right margin-right--half-width" @click="save">Save</button>
-            <button class="button is-danger" @click="cancel">Cancel</button>
+            <button class="button is-info margin-right margin-right--half-width" @click="save">
+                {{ t('translations.pages.configEditor.editConfig.actions.save') }}
+            </button>
+            <button class="button is-danger" @click="cancel">
+                {{ t('translations.pages.configEditor.editConfig.actions.cancel') }}
+            </button>
         </div>
         <div v-if="configFile.getPath().toLowerCase().endsWith('.cfg')" class="margin-right non-selectable">
-            <h3 class='subtitle is-3'>Sections</h3>
+            <h3 class='subtitle is-3'>{{ t('translations.pages.configEditor.editConfig.sections') }}</h3>
             <ul>
                 <li v-for="(value, key) in dumpedConfigVariables" :key="`${key}-${value.toString()}-tab`">
                     <a :href="`#${key}`">{{ key }}</a>
@@ -30,8 +34,10 @@
                                 <span class="pre selectable" v-if="!line.commentsExpanded">{{getCommentDisplayShort(line.comments)}}</span>
                                 <span class="pre selectable" v-else>{{getCommentDisplay(line.comments)}}</span>
                                 <a @click="toggleEntryExpansion(key, variable)">
-                                    <span v-if="!line.commentsExpanded">Show more</span>
-                                    <span v-else>Show less</span>
+                                    <span v-if="!line.commentsExpanded">
+                                        {{ t('translations.pages.configEditor.editConfig.actions.showMore') }}
+                                    </span>
+                                    <span v-else>{{ t('translations.pages.configEditor.editConfig.actions.showLess') }}</span>
                                 </a>
                             </template>
                             <span class="pre" v-else>{{getCommentDisplay(line.comments)}}</span>
@@ -79,15 +85,18 @@
 import ConfigLine from '../../model/file/ConfigLine';
 import FsProvider from '../../providers/generic/file/FsProvider';
 import ConfigFile from '../../model/file/ConfigFile';
-import { DeferredInput, Hero } from '../all';
+import { Hero } from '../all';
 import QuillEditor from '../QuillEditor.vue';
 import BepInExConfigUtils from '../../utils/BepInExConfigUtils';
 import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 type ConfigEditLayoutProps = {
     configFile: ConfigFile;
 }
 
+const { t, d, messages, locale } = useI18n();
+
 const props = defineProps<ConfigEditLayoutProps>();
 const emits = defineEmits<{
     (e: 'changed'): void;

src/components/config-components/ConfigSelectionLayout.vue

@@ -1,42 +1,40 @@
 <template>
     <div>
         <Hero
-            title="Config editor"
-            subtitle="Select a configuration file to edit"
+            :title="t('translations.pages.configEditor.hero.title')"
+            :subtitle="t('translations.pages.configEditor.hero.subtitle')"
             hero-type="primary"
         />
         <div class="notification is-warning is-square">
             <div class="container">
-                <p>
-                    Configuration files are generated after launching the game, with the mod installed, at least once.
-                </p>
+                <p>{{ t('translations.pages.configEditor.warning.content') }}</p>
             </div>
         </div>
         <div class='is-shadowless'>
             <div class='no-padding-left card-header-title'>
 
                 <div class="input-group input-group--flex margin-right">
-                    <label for="config-search" class="non-selectable">Search</label>
+                    <label for="config-search" class="non-selectable">{{ t('translations.pages.configEditor.actions.search.label') }}</label>
                     <input
                         v-model="filterText"
                         id="config-search"
                         class="input margin-right"
                         type="text"
-                        placeholder="Search for config files"
+                        :placeholder="t('translations.pages.configEditor.actions.search.placeholder')"
                         autocomplete="off"
                     />
                 </div>
 
                 <div class="input-group margin-right">
-                    <label for="config-sort-order" class="non-selectable">Sort</label>
+                    <label for="config-sort-order" class="non-selectable">{{ t('translations.pages.configEditor.actions.sort.label') }}</label>
                     <select id="config-sort-order" class="select select--content-spacing margin-right margin-right--half-width" v-model="sortOrder">
-                        <option v-for="(key, index) in getSortOrderOptions()" :key="`${index}-deprecated-position-option`">
-                            {{key}}
+                        <option v-for="(key, index) in SortConfigFile" :key="`${index}-deprecated-position-option`" :value="key">
+                            {{ t(`translations.enums.sortConfigFile.${EnumResolver.from(SortConfigFile, key)}`) }}
                         </option>
                     </select>
                     <select id="config-sort-direction" class="select select--content-spacing" v-model="sortDirection">
-                        <option v-for="(key, index) in getSortDirectionOptions()" :key="`${index}-deprecated-position-option`">
-                            {{key}}
+                        <option v-for="(key, index) in SortDirection" :key="`${index}-deprecated-position-option`" :value="key">
+                            {{ t(`translations.enums.sortDirection.${EnumResolver.from(SortDirection, key)}`) }}
                         </option>
                     </select>
                 </div>
@@ -51,9 +49,9 @@
                     <template v-slot:title>
                         <span>{{file.getName()}}</span>
                     </template>
-                    <a class='card-footer-item' @click="editConfig(file)">Edit Config</a>
-                    <a class='card-footer-item' @click="openConfig(file)">Open File</a>
-                    <a class='card-footer-item' @click="deleteConfig(file)">Delete</a>
+                    <a class='card-footer-item' @click="editConfig(file)">{{ t('translations.pages.configEditor.actions.editConfig' )}}</a>
+                    <a class='card-footer-item' @click="openConfig(file)">{{ t('translations.pages.configEditor.actions.openFile' )}}</a>
+                    <a class='card-footer-item' @click="deleteConfig(file)">{{ t('translations.pages.configEditor.actions.delete' )}}</a>
                 </ExpandableCard>
             </div>
         </div>
@@ -76,8 +74,11 @@ import { computed, onMounted, ref, watch, watchEffect } from 'vue';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
 import path from '../../providers/node/path/path';
+import { useI18n } from 'vue-i18n';
+import EnumResolver from '../../model/enums/_EnumResolver';
 
 const store = getStore<State>();
+const { t, d, messages, locale } = useI18n();
 
 const emits = defineEmits<{
     (e: 'edit', file: ConfigFile): void;