From 41f5634b7a96d1e7e77d2df12fc3407b1fbf03a0 Mon Sep 17 00:00:00 2001 From: Thierry Goettelmann Date: Wed, 7 Sep 2022 15:07:27 +0200 Subject: [PATCH] feat(lite): i18n (#6399) --- @xen-orchestra/lite/README.md | 63 ++++- @xen-orchestra/lite/package.json | 2 + .../lite/src/components/AppHeader.vue | 30 ++- .../lite/src/components/AppLogin.vue | 6 +- .../lite/src/components/CollectionFilter.vue | 16 +- .../src/components/CollectionFilterRow.vue | 9 +- .../lite/src/components/CollectionSorter.vue | 14 +- .../lite/src/components/FormWidget.vue | 2 +- .../src/components/infra/InfraHostList.vue | 2 +- .../lite/src/components/pool/PoolTabBar.vue | 27 ++- .../pool/dashboard/PoolDashboardStatus.vue | 6 +- .../lite/src/components/vm/VmsActionsBar.vue | 16 +- @xen-orchestra/lite/src/i18n.ts | 98 ++++++++ @xen-orchestra/lite/src/locales/en.json | 35 +++ @xen-orchestra/lite/src/locales/fr.json | 35 +++ @xen-orchestra/lite/src/main.ts | 2 + @xen-orchestra/lite/vite.config.ts | 3 +- yarn.lock | 217 +++++++++++++++--- 18 files changed, 503 insertions(+), 80 deletions(-) create mode 100644 @xen-orchestra/lite/src/i18n.ts create mode 100644 @xen-orchestra/lite/src/locales/en.json create mode 100644 @xen-orchestra/lite/src/locales/fr.json diff --git a/@xen-orchestra/lite/README.md b/@xen-orchestra/lite/README.md index 3e6eb21c6..6964ddcc7 100644 --- a/@xen-orchestra/lite/README.md +++ b/@xen-orchestra/lite/README.md @@ -112,7 +112,7 @@ import { faDisplay } from "@fortawesome/free-solid-svg-icons"; Here is the equivalent between font weight and style name. | Style name | Font weight | -|------------|-------------| +| ---------- | ----------- | | Solid | 900 | | Regular | 400 | | Light | 300 | @@ -184,3 +184,64 @@ export const useFoobarStore = defineStore("foobar", () => { }; }); ``` + +### I18n + +Internationalization of the app is done with [Vue-i18n](https://vue-i18n.intlify.dev/). + +Locale files are located in `src/locales` directory. + +Source of truth is `en-US.json` file. + +To quickly check if there are missing translations in other locale files, open `main.ts` and check the `messages` +property of `createI18n()` for TypeScript error. + +#### Example + +```json +{ + "hello": "Hello", + "hello_name": "Hello {name}", + "hello_linked": "@:hello_name how are you?", + "hello_plural": "No hello | Hello to you | Hello to {count} persons" +} +``` + +```html + + +

{{ $t("hello") }}

+ +

{{ $t("hello_name", { name: "World" }) }}

+ +

{{ $t("hello_linked", { name: "World" }) }}

+ +

{{ $tc("hello_plural", 0) }}

+ +

{{ $tc("hello_plural", 1) }}

+ +

{{ $tc("hello_plural", 4) }}

+ + + + +

{{ $d(date, "date_short") }}

+ +

{{ $d(date, "date_medium") }}

+ +

{{ $d(date, "date_long") }}

+ +

{{ $d(date, "datetime_short") }}

+ +

{{ $d(date, "datetime_medium") }}

+ +

{{ $d(date, "datetime_long") }}

+ +

{{ $d(date, "time") }}

+ + + + +

{{ $n(1234567.898765) }}

+ +``` diff --git a/@xen-orchestra/lite/package.json b/@xen-orchestra/lite/package.json index 2f17cb629..d58cbe511 100644 --- a/@xen-orchestra/lite/package.json +++ b/@xen-orchestra/lite/package.json @@ -28,9 +28,11 @@ "make-error": "^1.3.6", "pinia": "^2.0.14", "vue": "^3.2.37", + "vue-i18n": "9", "vue-router": "^4.0.16" }, "devDependencies": { + "@intlify/vite-plugin-vue-i18n": "^6.0.1", "@limegrass/eslint-plugin-import-alias": "^1.0.5", "@rushstack/eslint-patch": "^1.1.0", "@trivago/prettier-plugin-sort-imports": "^3.2.0", diff --git a/@xen-orchestra/lite/src/components/AppHeader.vue b/@xen-orchestra/lite/src/components/AppHeader.vue index 90d36cac0..e0d0deb6c 100644 --- a/@xen-orchestra/lite/src/components/AppHeader.vue +++ b/@xen-orchestra/lite/src/components/AppHeader.vue @@ -4,20 +4,34 @@ XO Lite -
- - Logout +
+ + Logout + + +