adds french i18n

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 1.0.11
 
 * update chinese translation, thanks @XiangtingLee, fixes [#251](https://github.com/cars10/elasticvue/pull/251)
+* adds french translation, thanks @XNxa, fixes [#250](https://github.com/cars10/elasticvue/pull/250)
 
 ## 1.0.10
 

playwright.config.ts

@@ -42,10 +42,10 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] }
     },
 
-    //{
-    //  name: 'webkit',
-    //  use: { ...devices['Desktop Safari'] },
-    //},
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
 
     /* Test against mobile viewports. */
     // {

src/components/base/LanguageSwitcher.vue

@@ -3,26 +3,19 @@
          data-testid="change-language-button">
     <q-menu>
       <q-list>
-        <q-item v-close-popup
+        <q-item v-for="{code, title, icon} in languages"
+                :key="code"
+                v-close-popup
                 clickable
+                dense
+
                 active-class="bg-grey-8"
-                :active="store.language === 'en'"
-                :title="t('base.language_switcher.languages.en.title')"
-                data-testid="change-language__english"
-                @click="changeLanguage('en')">
+                :active="store.language === code"
+                :title="title"
+                :data-testid="`change-language__${code}`"
+                @click="changeLanguage(code)">
           <q-item-section>
-            <img :src="en" alt="English" height="16">
-          </q-item-section>
-        </q-item>
-        <q-item v-close-popup
-                clickable
-                active-class="bg-grey-8"
-                :active="store.language === 'cn'"
-                :title="t('base.language_switcher.languages.cn.title')"
-                data-testid="change-language__chinese"
-                @click="changeLanguage('cn')">
-          <q-item-section>
-            <img :src="cn" alt="Chinese" height="16">
+            <img :src="icon" :alt="title" height="16">
           </q-item-section>
         </q-item>
       </q-list>
@@ -33,6 +26,7 @@
 <script setup lang="ts">
   import en from '../../assets/images/icons/flags/en.svg'
   import cn from '../../assets/images/icons/flags/cn.svg'
+  import fr from '../../assets/images/icons/flags/fr.svg'
   import { useI18nStore } from '../../store/i18n'
   import { useTranslation } from '../../composables/i18n.ts'
   import { ValidLocale } from '../../consts.ts'
@@ -46,4 +40,15 @@
     store.setLanguage(lang)
     router.go(0)
   }
+
+  type Language = {
+    code: ValidLocale
+    title: string
+    icon: string
+  }
+  const languages: Language[] = [
+    { code: 'en', title: t('base.language_switcher.languages.en.title'), icon: en },
+    { code: 'cn', title: t('base.language_switcher.languages.cn.title'), icon: cn },
+    { code: 'fr', title: t('base.language_switcher.languages.fr.title'), icon: fr }
+  ]
 </script>

src/consts.ts

@@ -8,9 +8,10 @@ export const REQUEST_DEFAULT_HEADERS = {
 export const SUPPORTED_COUNTRY_LOCALES: Record<string, ValidLocale> = {
   en: 'en',
   cn: 'cn',
-  zh: 'cn'
+  zh: 'cn',
+  fr: 'fr'
 }
-export type ValidLocale = 'en' | 'cn'
+export type ValidLocale = 'en' | 'cn' | 'fr'
 export const DEFAULT_LOCALE: ValidLocale = 'en'
 
 export const DEFAULT_ROWS_PER_PAGE = [10, 20, 100, 0]

src/locales/cn.json

@@ -24,6 +24,9 @@
         },
         "cn": {
           "title": "设置为中文"
+        },
+        "fr": {
+          "title": "法语"
         }
       }
     },

src/locales/en.json

@@ -24,6 +24,9 @@
         },
         "cn": {
           "title": "Chinese"
+        },
+        "fr": {
+          "title": "French"
         }
       }
     },

src/plugins/vue-i18n.ts

@@ -2,6 +2,7 @@
 import { createI18n } from 'vue-i18n'
 import en from '../locales/en.json'
 import cn from '../locales/cn.json'
+import fr from '../locales/fr.json'
 import { useI18nStore } from '../store/i18n'
 
 export const vueI18n = () => {
@@ -15,7 +16,7 @@ export const vueI18n = () => {
     legacy: false,
     locale: language,
     fallbackLocale: 'en',
-    messages: { en, cn },
+    messages: { en, cn, fr },
     warnHtmlMessage: false
   })
 }

tests/e2e/tests/pages/Base.spec.ts

@@ -33,7 +33,7 @@ test.describe('base', () => {
         await openElasticvue(page)
         page.getByTestId('change-language-button').click()
 
-        await expect(page.getByTestId('change-language__english')).toHaveClass(/q-item--active/)
+        await expect(page.getByTestId('change-language__en')).toHaveClass(/q-item--active/)
       })
     })
   })