init i18n

Author: gabrielpastori1

package-lock.json

@@ -37,6 +37,7 @@
     "vite": "^4.2.0",
     "vite-plugin-vuetify": "^1.0.0",
     "vue": "^3.2.0",
+    "vue-i18n": "^9.8.0",
     "vue-router": "^4.0.0",
     "vue3-markdown": "^1.1.9",
     "vuetify": "^3.4.0"

package.json

@@ -100,7 +100,8 @@
               class="mb-3"
               :rules="[
                 (v) => {
-                  if (!v) return 'Tempo de expiração é obrigatório';
+                  if (v === '' || v === undefined)
+                    return 'Tempo de expiração é obrigatório';
                   return true;
                 },
               ]"

src/components/instance/settings/Typebot.vue

@@ -50,15 +50,7 @@
             necessário que o servidor da Evolution API seja acessado através de
             uma conexão segura (HTTPS).
           </v-alert>
-
-          <h3 class="mt-5 mb-2">Limitações do Projeto</h3>
-          <p>
-            Como um projeto open-source mantido por voluntários, não há
-            garantias de atualizações futuras. A independência do Evolution
-            Manager em relação à Evolution API significa que alterações na API
-            podem afetar a funcionalidade do Manager.
-          </p>
-
+          
           <span class="mt-5 mb-2 text-disabled">Versão: {{ version }}</span>
         </div>
       </v-card-text>

src/components/modal/About.vue

@@ -3,7 +3,7 @@
     <v-card>
       <v-card-text>
         <div class="d-flex flex-column align-center">
-          <h4>Contribua via PIX</h4>
+          <h4>{{$t('contribute.via')}} PIX</h4>
           <v-img
             src="@/assets/pix.svg"
             height="300px"
@@ -20,7 +20,7 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn text @click="dialog = false" :disabled="loading"> Fechar </v-btn>
+        <v-btn text @click="dialog = false" :disabled="loading"> {{ $t('close') }} </v-btn>
         <v-spacer></v-spacer>
       </v-card-actions>
     </v-card>

src/components/modal/Contribute.vue

@@ -7,7 +7,7 @@
     <v-card>
       <v-card-text>
         <v-form v-model="valid">
-          <h3 class="mb-4">Configurar conexão</h3>
+          <h3 class="mb-4">{{ $t("connection.title") }}</h3>
           <v-text-field
             v-model="connection.host"
             label="URL"
@@ -32,7 +32,7 @@
       </v-card-text>
       <v-card-actions>
         <div class="d-flex flex-wrap justify-space-between w-100 align-center">
-          <v-btn size="small" text @click="showAbout"> Sobre </v-btn>
+          <v-btn size="small" text @click="showAbout"> {{ $t('about.title') }} </v-btn>
           <div class="d-flex justify-end flex-grow-1 gap-1">
             <v-btn
               v-if="!!AppStore.connection.host"
@@ -72,16 +72,16 @@
               :disabled="!valid"
               :loading="loading"
             >
-              Conectar
-            </v-btn>
+            {{ $t('connection.action')  }}
+          </v-btn>
           </div>
         </div>
       </v-card-actions>
     </v-card>
 
     <v-card class="mt-2" v-if="connectionsList && connectionsList.length > 1">
       <v-card-text>
-        <h3 class="mb-4">Conexões salvas</h3>
+        <h3 class="mb-4">{{ $t('connection.saved') }}</h3>
         <v-list>
           <v-list-item
             v-for="conect in connectionsList"

src/components/modal/Settings.vue

@@ -0,0 +1,32 @@
+
+import { en } from 'vuetify/locale'
+
+
+export default {
+  $vuetify: { ...en },
+  all: "All",
+  close: "Close",
+  instance: "Instance | Instances",
+  search: "Search",
+  loading: "Loading",
+  noInstances: "No instances found",
+  status: {
+    close: "Disconnected",
+    connecting: "Connecting",
+    open: "Connected",
+  },
+  about: {
+    title: "About",
+    version: "Version",
+  },
+  contribute: {
+    title: "Contribute",
+    via: "Contribute via",
+    button: "Contribute",
+  },
+  connection: {
+    title: "Configure connection",
+    action: "Connect",
+    saved: "Connection saved | Connections saved",
+  }
+}

src/i18n/en.js

@@ -0,0 +1,35 @@
+
+import { pt } from 'vuetify/locale'
+
+
+export default {
+  $vuetify: { ...pt },
+  all: "Todo | Todos",
+  close: "Fechar",
+  instance: "Instância | Instâncias",
+  search: "Pesquisar",
+  loading: "Carregando",
+  noInstances: "Nenhuma instância encontrada",
+  status: {
+    close: "Desconectado",
+    connecting: "Conectando",
+    open: "Conectado",
+  },
+  about: {
+    title: "Sobre",
+    version: "Versão",
+  },
+  contribute: {
+    title: "Contribuir",
+    via: "Contribua via",
+    button: "Contribua",
+  },
+  connection: {
+    title: "Configurar conexão",
+    action: "Conectar",
+    saved: "Conexão salva | Conexões salvas",
+  }
+
+
+
+}

src/i18n/pt.js

@@ -26,16 +26,29 @@
             }}
           </p>
         </div>
-        <v-chip
-          size="x-small"
-          color="grey"
-          class="flex-shrink-0"
-        >
+        <v-chip size="x-small" color="grey" class="flex-shrink-0">
           <b>{{ AppStore.version }}</b>
         </v-chip>
       </div>
     </v-chip>
     <v-icon v-else color="error"> mdi-alert-circle </v-icon>
+    <v-menu>
+      <template v-slot:activator="{ props }">
+        <v-btn class="ml-1" v-bind="props" icon>
+          <v-icon>mdi-translate</v-icon>
+        </v-btn>
+      </template>
+      <v-list :value="currentLanguage">
+        <v-list-item
+          v-for="lang in availableLanguages"
+          :key="lang"
+          @click="changei18n(lang)"
+          :disabled="lang === currentLanguage"
+        >
+          <v-list-item-title>{{ lang }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
     <v-btn @click="openSettings" icon>
       <v-icon>mdi-cog</v-icon>
     </v-btn>
@@ -61,6 +74,10 @@ export default {
     SettingsModal,
   },
   methods: {
+    changei18n(locale) {
+      this.$vuetify.locale.current = locale;
+      window.localStorage.setItem("locale", locale);
+    },
     toggleTheme() {
       const theme = this.theme.global.current.dark ? "light" : "dark";
       this.theme.global.name = theme;
@@ -91,6 +108,12 @@ export default {
     dark() {
       return this.theme.global.current.dark;
     },
+    availableLanguages() {
+      return this.$i18n.availableLocales;
+    },
+    currentLanguage() {
+      return this.$i18n.locale;
+    },
   },
   async mounted() {
     try {

src/layouts/default/AppBar.vue

@@ -9,7 +9,7 @@
           color="blue"
           >
           <v-icon start> mdi-information </v-icon>
-          Sobre
+          {{ $t("about.title") }}
         </v-btn>
         <v-btn
         @click="contribute"
@@ -18,7 +18,7 @@
           color="light-blue-lighten-1"
         >
           <v-icon start>mdi-hand-coin</v-icon>
-          Contribua com o projeto
+          {{ $t("contribute.button") }}
         </v-btn>
         <p style="font-size: 12px" class="text-disabled">v{{ version }}</p>
       </div>