feat: improve localization interface

src/index.ts

@@ -1,13 +1,11 @@
-import deepmerge from 'deepmerge';
 import type { App } from 'vue';
 import { reactive } from 'vue';
 
-import defaultDictionary from './i18n'
-import { createTranslator, createWidget } from './ui';
+import { createWidget } from './ui';
 import type { IPlusAuthContext, IWidgetSettings } from './ui/interfaces';
 import type { FetchWrapper } from './ui/utils/fetch';
 import { createFetchWrapper } from './ui/utils/fetch';
-import type { Translator } from './ui/utils/translator';
+import { Translator } from './ui/utils/translator';
 
 export default class PlusAuthWidget {
   private _view: App<Element>;
@@ -22,21 +20,18 @@ export default class PlusAuthWidget {
 
     this.http = createFetchWrapper(settings.apiUrl)
 
-    const { locale: localeSettings, ...otherSettings } = settings
+    const reactiveSettings = reactive(settings)
 
-    const reactiveSettings = reactive(
-      deepmerge({
-        locale: {
-          defaultLocale: localeSettings?.defaultLocale || 'en',
-          selectedLocale: localeSettings?.selectedLocale || context.params?.ui_locale,
-          dictionary: deepmerge(defaultDictionary, localeSettings?.dictionary || {})
+    this.i18n = new Translator(reactiveSettings.locale)
+    if(context.params?.ui_locales){
+      const userPreferredLocales = context.params?.ui_locales?.split(' ') || []
+      for (let contextLocale of userPreferredLocales) {
+        if(this.i18n.locales[contextLocale]){
+          this.i18n.locale = contextLocale
+          break;
         }
-      },
-      otherSettings,
-      { clone: true })
-    )
-
-    this.i18n = createTranslator(reactiveSettings.locale)
+      }
+    }
     this._view = createWidget(container || document.body, reactiveSettings as any, context, {
       i18n: this.i18n,
       http: this.http,

src/ui/components/Footer.vue

@@ -1,13 +1,14 @@
 <template>
   <footer>
-    <template v-if="languages && languages.length">
+    <template v-if="languages && languages.length > 1">
       <PSelect
         v-model="translator.locale"
         flat
         label="Language"
         style="width: auto; margin: 0"
         dense
         hide-messages
+        item-text="label"
         :items="languages"
       />
     </template>
@@ -38,9 +39,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, reactive } from 'vue';
+import { defineComponent, inject } from 'vue';
 
 import type { IPlusAuthContext } from '../interfaces';
+import type { Translator } from '../utils/translator';
 import { translatorKey } from '../utils/translator';
 
 export default defineComponent({
@@ -57,12 +59,11 @@ export default defineComponent({
   },
   setup(){
     const context = inject('context') as IPlusAuthContext
-    const translator = inject(translatorKey) as any
+    const translator = inject(translatorKey) as Translator
     const client = context.client
-    const languages = reactive(context.ui_locales || [])
     return {
       translator,
-      languages,
+      languages: Object.values(translator.locales || []),
       tosUri: client.tosUri,
       policyUri: client.policyUri,
     }

src/ui/index.ts

@@ -7,20 +7,12 @@ import { Theme } from './utils/theme';
 import { Translator, translatorKey } from './utils/translator';
 import { App } from './widget';
 
-export function createTranslator(settings: IWidgetSettings['locale']) {
-  return new Translator(
-    settings.dictionary,
-    settings.defaultLocale,
-    settings.selectedLocale
-  )
-}
-
 export function createWidget(container: Element | string,
                              settings: IWidgetSettings,
                              context: Partial<IPlusAuthContext>,
                              inject) {
   const theme = new Theme(settings.theme);
-  const translator = inject.i18n || createTranslator(settings.locale)
+  const translator = inject.i18n || new Translator(settings.locale)
   const widget = createApp(App(theme, settings));
 
   widget.directive('t', i18n)

src/ui/interfaces/index.ts

@@ -23,6 +23,7 @@ export interface IClient {
 
 type DictionaryItem = string | Record<string, any>
 export interface ILocaleSettings {
+  locales?: Record<string, { label: string, codes: string[] }>
   dictionary: Record<string, typeof defaultDictionary | DictionaryItem>;
   defaultLocale: string;
   selectedLocale?: string;
@@ -189,8 +190,7 @@ export interface IPlusAuthContext {
   prompt?: {
     name: string,
     mode?: string
-  },
-  ui_locales: string[]
+  }
 }
 
 export type ITranslatePath = string | {

src/ui/utils/translator.ts

@@ -1,29 +1,44 @@
+import deepmerge from 'deepmerge';
 import type { Ref } from 'vue';
 import { getCurrentInstance } from 'vue';
 import { ref } from 'vue';
 
+import defaultDictionary from '../../i18n'
+
+import type { ILocaleSettings } from '../interfaces';
+
 import { escapeRegExp, isObject, keysToDotNotation, propertyAccessor } from '.';
 
 export const translatorKey = Symbol('t')
 
 
 export class Translator {
-  private fallBackLocale: string;
+  private defaultLocale: string;
   private dictionary: any;
   private selectedLocale: Ref
+  locales: Record<string, { label: string, codes: string[], value: string }>
 
-  constructor(dictionary: any, fallbackLocale?: string, selectedLocale?: string) {
-    this.dictionary = dictionary;
-    this.fallBackLocale = fallbackLocale || 'en'
-    this.selectedLocale = ref<string | undefined>(selectedLocale || this.fallBackLocale)
+  constructor(options: Partial<ILocaleSettings> = {}) {
+    this.dictionary = deepmerge(defaultDictionary, options.dictionary || {});
+    this.defaultLocale = options.defaultLocale = options.defaultLocale || 'en'
+    this.selectedLocale = ref<string | undefined>(options.selectedLocale || this.defaultLocale)
+    this.locales = Object.keys(this.dictionary).reduce((finalLocales, dictKey) => {
+      finalLocales[dictKey] = options.locales?.[dictKey] || { label: dictKey, codes: [dictKey] }
+      finalLocales[dictKey].value = dictKey
+      return finalLocales
+    }, {})
   }
 
   get localeRef() {
     return this.selectedLocale
   }
 
   set locale(locale: string) {
-    this.selectedLocale.value = locale
+    if (this.locales[locale]) {
+      this.selectedLocale.value = locale
+    } else {
+      this.selectedLocale.value = this.defaultLocale
+    }
   }
 
   get locale(): string {
@@ -51,7 +66,7 @@ export class Translator {
     }
     const locale = opts.locale || this.locale
     const value = propertyAccessor(vm.dictionary[locale], key)
-      || propertyAccessor(vm.dictionary[vm.fallBackLocale], key);
+      || propertyAccessor(vm.dictionary[vm.defaultLocale], key);
     if (value) {
       return vm._interpolate(
         value,
@@ -61,7 +76,7 @@ export class Translator {
     } else if (opts.fallback) {
       return vm._interpolate(
         propertyAccessor(vm.dictionary[locale], opts.fallback)
-        || propertyAccessor(vm.dictionary[vm.fallBackLocale], opts.fallback)
+        || propertyAccessor(vm.dictionary[vm.defaultLocale], opts.fallback)
         || opts.fallback,
         params,
         locale
@@ -83,7 +98,7 @@ export class Translator {
         str = str.replace(searchRegexp,
           v === null ||
           v === undefined ? '' : propertyAccessor(this.dictionary[locale], v)
-            || propertyAccessor(this.dictionary[this.fallBackLocale], v)
+            || propertyAccessor(this.dictionary[this.defaultLocale], v)
             || v
         )
       })