sprintify-ui 0.1.15 → 0.1.16

package/src/i18n/index.ts

@@ -0,0 +1,60 @@
+import { useI18nStore } from '@/stores/i18n';
+import en from '@/lang/en.json';
+import fr from '@/lang/fr.json';
+import { get } from 'lodash';
+
+export function t(key: string, args?: Record<string, any> | undefined): string {
+  const value = getTranslationValue(key);
+
+  return replaceArgs(value, args);
+}
+
+function getCurrentLocale() {
+  try {
+    const i18nStore = useI18nStore();
+    return i18nStore.locale;
+  } catch (error) {
+    console.error(error);
+    return 'en';
+  }
+}
+
+function getTranslationValue(key: string) {
+  const locale = getCurrentLocale();
+
+  if (locale === 'fr') {
+    const frValue = get(fr, key);
+    if (frValue) return frValue;
+  }
+
+  return get(en, key, key);
+}
+
+function replaceArgs(
+  value: string,
+  args: Record<string, any> | undefined
+): string {
+  let result = value;
+
+  if (!args) return result;
+
+  if (args.count !== undefined && value.includes('|')) {
+    const parts = value.split('|');
+
+    if (parts.length == 2) {
+      const [singular, plural] = value.split('|');
+      result = args.count > 1 ? plural : singular;
+    } else if (parts.length == 3) {
+      const [zero, singular, plural] = value.split('|');
+      result = args.count == 0 ? zero : args.count > 1 ? plural : singular;
+    }
+
+    result.trim();
+  }
+
+  Object.keys(args).forEach((key: any) => {
+    result = result.replace(`{${key}}`, args[key]);
+  });
+
+  return result;
+}

package/src/index.ts

@@ -2,7 +2,6 @@ import axios, { AxiosInstance } from 'axios';
 import { App } from 'vue';
 import * as components from './components';
 import QueryString from 'qs';
-import { createI18n, I18n } from 'vue-i18n';
 import en from '@/lang/en.json';
 import fr from '@/lang/fr.json';
 import { useDialogsStore } from './stores/dialogs';
@@ -17,10 +16,10 @@ import './assets/main.css';
 import { Locales } from './types';
 import { Country } from './types/Country';
 import { Region } from './types/Region';
+import { useI18nStore } from './stores/i18n';
 
 export interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  i18n?: I18n<typeof messages, {}, {}, string, true>;
   http?: AxiosInstance;
   upload_url?: string;
   locales?: Locales;
@@ -31,11 +30,6 @@ export interface Options {
 }
 
 const config = {
-  i18n: createI18n({
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages: { en, fr },
-  }),
   http: axios.create(),
   locales: {
     en: 'English',
@@ -61,10 +55,6 @@ function install(app: App, options?: Options) {
     app.component(key, components[key]);
   }
 
-  if (options?.i18n) {
-    config.i18n = options.i18n;
-  }
-
   if (options?.http) {
     config.http = options.http;
   }
@@ -92,6 +82,16 @@ function install(app: App, options?: Options) {
   if (options?.regions) {
     config.regions = options.regions;
   }
+
+  if (app.config.globalProperties.$i18n) {
+    watch(
+      () => app.config.globalProperties.$i18n.locale,
+      (locale) => {
+        useI18nStore().set(locale);
+      },
+      { immediate: true }
+    );
+  }
 }
 
 export default { install };

package/src/stores/dialogs.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
-import { config } from '@/index';
 import { Dialog, DialogOptions } from '../types';
+import { t } from '@/i18n';
 
 export const useDialogsStore = defineStore('dialogs', {
   state: () => {
@@ -17,8 +17,8 @@ export const useDialogsStore = defineStore('dialogs', {
         color: options.color ?? 'info',
         title: options.title,
         message: options.message,
-        confirmText: options.confirmText ?? config.i18n.global.t('sui.confirm'),
-        cancelText: options.cancelText ?? config.i18n.global.t('sui.cancel'),
+        confirmText: options.confirmText ?? t('sui.confirm'),
+        cancelText: options.cancelText ?? t('sui.cancel'),
         closeOnOutsideClick: options.closeOnOutsideClick ?? true,
         onConfirm:
           options.onConfirm ??

package/src/stores/i18n.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia';
+
+export const useI18nStore = defineStore('i18n', {
+  state: () => {
+    return {
+      locale: 'en',
+    };
+  },
+  actions: {
+    set(locale: string) {
+      this.locale = locale;
+    },
+  },
+});

package/src/utils/fileSizeFormat.ts

@@ -1,14 +1,14 @@
-import { config } from '@/index';
+import { t } from '@/i18n';
 
 export default function (size: number): string {
   const i = Math.floor(Math.log(size) / Math.log(1024));
 
   const units = [
-    config.i18n.global.t('sui.units.b'),
-    config.i18n.global.t('sui.units.kb'),
-    config.i18n.global.t('sui.units.mb'),
-    config.i18n.global.t('sui.units.gb'),
-    config.i18n.global.t('sui.units.tb'),
+    t('sui.units.b'),
+    t('sui.units.kb'),
+    t('sui.units.mb'),
+    t('sui.units.gb'),
+    t('sui.units.tb'),
   ];
 
   return +(size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + units[i];

package/src/utils/toHumanList.ts

@@ -1,9 +1,9 @@
-import { config } from '@/index';
+import { t } from '@/i18n';
 
 export default function (list: string[], conjunction?: string): string {
   let sentence = '';
 
-  conjunction = conjunction ? conjunction : config.i18n.global.t('sui.and');
+  conjunction = conjunction ? conjunction : t('sui.and');
 
   for (let i = 0; i < list.length; i++) {
     const item = list[i];