aloha-vue 1.0.358 → 1.0.359

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.0.358",
+  "version": "1.0.359",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATranslation/ATranslation.js

@@ -3,7 +3,6 @@ import {
 } from "vue";
 
 import AriaLabelAPI from "./compositionAPI/AriaLabelAPI";
-import ATranslationAPI from "./compositionAPI/ATranslationAPI";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
 import HtmlAPI from "./compositionAPI/HtmlAPI";
 import PlaceholderAPI from "./compositionAPI/PlaceholderAPI";
@@ -66,10 +65,6 @@ export default {
     },
   },
   setup(props) {
-    const {
-      translation,
-    } = ATranslationAPI();
-
     const {
       hasTextAfter,
       hasTextBefore,
@@ -82,9 +77,7 @@ export default {
       isTranslateText,
       textForCurrentDevice,
       textLocal,
-    } = TextAPI(props, {
-      translation,
-    });
+    } = TextAPI(props);
 
     const {
       hasHtml,
@@ -99,26 +92,19 @@ export default {
       hasTextBefore,
       textAfterForCurrentDevice,
       textBeforeForCurrentDevice,
-      translation,
     });
 
     const {
       titleLocalOptions,
-    } = TitleAPI(props, {
-      translation,
-    });
+    } = TitleAPI(props);
 
     const {
       placeholderAttributes,
-    } = PlaceholderAPI(props, {
-      translation,
-    });
+    } = PlaceholderAPI(props);
 
     const {
       ariaLabelAttributes,
-    } = AriaLabelAPI(props, {
-      translation,
-    });
+    } = AriaLabelAPI(props);
 
     const {
       attributesLocal,
@@ -145,7 +131,6 @@ export default {
       textAfterForCurrentDevice,
       textBeforeForCurrentDevice,
       textLocal,
-      translation,
     };
   },
   render() {

package/src/ATranslation/compositionAPI/ATranslationAPI.js

@@ -1,6 +1,7 @@
 import {
   computed,
   ref,
+  watch,
 } from "vue";
 
 import {
@@ -8,25 +9,35 @@ import {
 } from "lodash-es";
 
 const language = ref("de");
-let i18n = {};
+export let i18n = {};
+const timeTranslation = ref(new Date());
+export const timeTranslationLastChanged = ref(new Date());
+export let translation = {};
 export const isTranslate = ref(true);
 
-export const translation = computed(() => {
-  if (isTranslate.value) {
-    return i18n[language.value];
-  }
-  return {};
+export const watchList = computed(() => {
+  return [
+    language.value,
+    timeTranslation.value,
+    isTranslate.value,
+  ];
+});
+
+watch(watchList, () => {
+  _updateTranslation();
+}, {
+  immediate: true,
 });
 
 export default function ATranslationAPI() {
   return {
-    i18n,
     isTranslate,
     language,
     setI18n,
     setLanguage,
     toggleTranslate,
-    translation,
+    translationChanges: timeTranslationLastChanged,
+    updateTranslation,
   };
 }
 
@@ -45,3 +56,16 @@ export function toggleTranslate(isTranslateLocal) {
     isTranslate.value = !!isTranslateLocal;
   }
 }
+
+function _updateTranslation() {
+  if (isTranslate.value) {
+    translation = i18n[language.value];
+  } else {
+    translation = {};
+  }
+  timeTranslationLastChanged.value = new Date();
+}
+
+export function updateTranslation() {
+  timeTranslation.value = new Date();
+}

package/src/ATranslation/compositionAPI/AriaLabelAPI.js

@@ -4,7 +4,9 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
-import ATranslationAPI from "./ATranslationAPI";
+import ATranslationAPI, {
+  translation,
+} from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
@@ -17,7 +19,7 @@ export default function AriaLabelAPI(props) {
   const extra = toRef(props, "extra");
 
   const {
-    translation,
+    translationChanges,
   } = ATranslationAPI();
 
   const {
@@ -48,10 +50,13 @@ export default function AriaLabelAPI(props) {
   });
 
   const ariaLabelLocal = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     if (isTranslateAriaLabel.value) {
       return getTranslatedText({
         placeholder: ariaLabelForCurrentDevice.value,
-        translationObj: translation.value,
+        translationObj: translation,
         extra: extra.value,
       });
     }

package/src/ATranslation/compositionAPI/HtmlAPI.js

@@ -4,12 +4,14 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
+import ATranslationAPI, {
+  translation,
+} from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
   sanitizeLocal,
 } from "../../utils/utils";
-
 import {
   isPlainObject,
   isUndefined,
@@ -20,7 +22,6 @@ export default function HtmlAPI(props, {
   hasTextBefore = computed(() => false),
   textAfterForCurrentDevice = computed(() => ""),
   textBeforeForCurrentDevice = computed(() => ""),
-  translation = computed(() => ({})),
 }) {
   const extra = toRef(props, "extra");
   const html = toRef(props, "html");
@@ -35,6 +36,10 @@ export default function HtmlAPI(props, {
     isMobileWidth,
   } = AMobileAPI();
 
+  const {
+    translationChanges,
+  } = ATranslationAPI();
+
   const safeHtmlForCurrentDevice = computed(() => {
     if (isPlainObject(safeHtml.value)) {
       if (isMobileWidth.value) {
@@ -84,11 +89,14 @@ export default function HtmlAPI(props, {
   });
 
   const htmlLocal = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     if (hasSafeHtml.value) {
       if (isTranslateSafeHtml.value) {
         return getTranslatedText({
           placeholder: safeHtmlForCurrentDevice.value,
-          translationObj: translation.value,
+          translationObj: translation,
           extra: extra.value
         });
       }
@@ -98,7 +106,7 @@ export default function HtmlAPI(props, {
       if (isTranslateHtml.value) {
         return sanitizeLocal(getTranslatedText({
           placeholder: htmlForCurrentDevice.value,
-          translationObj: translation.value,
+          translationObj: translation,
           extra: extra.value
         }));
       }

package/src/ATranslation/compositionAPI/PlaceholderAPI.js

@@ -4,7 +4,9 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
-import ATranslationAPI from "./ATranslationAPI";
+import ATranslationAPI, {
+  translation,
+} from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
@@ -17,7 +19,7 @@ export default function PlaceholderAPI(props) {
   const placeholder = toRef(props, "placeholder");
 
   const {
-    translation,
+    translationChanges,
   } = ATranslationAPI();
 
   const {
@@ -48,10 +50,13 @@ export default function PlaceholderAPI(props) {
   });
 
   const placeholderLocal = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     if (isTranslatePlaceholder.value) {
       return getTranslatedText({
         placeholder: placeholderForCurrentDevice.value,
-        translationObj: translation.value,
+        translationObj: translation,
         extra: extra.value,
       });
     }

package/src/ATranslation/compositionAPI/TextAPI.js

@@ -4,6 +4,9 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
+import ATranslationAPI, {
+  translation,
+} from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
@@ -11,9 +14,7 @@ import {
   isUndefined,
 } from "lodash-es";
 
-export default function TextAPI(props, {
-  translation = computed(() => ({})),
-}) {
+export default function TextAPI(props) {
   const extra = toRef(props, "extra");
   const text = toRef(props, "text");
 
@@ -26,6 +27,10 @@ export default function TextAPI(props, {
     isMobileWidth,
   } = AMobileAPI();
 
+  const {
+    translationChanges,
+  } = ATranslationAPI();
+
   const textForCurrentDevice = computed(() => {
     if (isPlainObject(text.value)) {
       if (isMobileWidth.value) {
@@ -45,10 +50,13 @@ export default function TextAPI(props, {
   });
 
   const textLocal = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     if (isTranslateText.value) {
       return getTranslatedText({
         placeholder: textForCurrentDevice.value,
-        translationObj: translation.value,
+        translationObj: translation,
         extra: extra.value
       });
     }

package/src/ATranslation/compositionAPI/TitleAPI.js

@@ -4,6 +4,9 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
+import ATranslationAPI, {
+  translation,
+} from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
@@ -13,9 +16,7 @@ import {
   isPlainObject,
 } from "lodash-es";
 
-export default function TitleAPI(props, {
-  translation = computed(() => ({})),
-}) {
+export default function TitleAPI(props) {
   const extra = toRef(props, "extra");
   const title = toRef(props, "title");
 
@@ -28,6 +29,10 @@ export default function TitleAPI(props, {
     isMobileWidth,
   } = AMobileAPI();
 
+  const {
+    translationChanges,
+  } = ATranslationAPI();
+
   const titleForCurrentDevice = computed(() => {
     if (isPlainObject(title.value)) {
       if (isMobileWidth.value) {
@@ -50,6 +55,9 @@ export default function TitleAPI(props, {
   });
 
   const titleLocalOptions = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     const TITLE_LOCAL_OPTIONS = {
       title: undefined,
       dataTranslateTitle: undefined,
@@ -73,7 +81,7 @@ export default function TitleAPI(props, {
       if (isPlaceholderTranslate(titleEl)) {
         titleCombined += getTranslatedText({
           placeholder: titleEl,
-          translationObj: translation.value,
+          translationObj: translation,
           extra: extra.value,
         });
         dataTranslateTitle += titleEl;

package/src/ATranslation/compositionAPI/UtilsAPI.js

@@ -1,4 +1,5 @@
 import {
+  timeTranslationLastChanged,
   translation,
 } from "./ATranslationAPI";
 
@@ -24,8 +25,8 @@ export function isPlaceholderTranslate(text = "") {
     text[text.length - 1] !== "_");
 }
 
-export function getTranslatedText({ placeholder, translationObj = translation.value, extra }) {
-  if (!translationObj) {
+export function getTranslatedText({ placeholder, translationObj = translation, extra }) {
+  if (!translationObj || !timeTranslationLastChanged.value) {
     return undefined;
   }
   const TEXT_FROM_TRANSLATION = isNil(translationObj[placeholder]) ? placeholder : translationObj[placeholder];

package/src/compositionAPI/APageTabTitleAPI.js

@@ -5,7 +5,9 @@ import {
   watch,
 } from "vue";
 
-import ATranslationAPI from "../ATranslation/compositionAPI/ATranslationAPI";
+import ATranslationAPI, {
+  translation,
+} from "../ATranslation/compositionAPI/ATranslationAPI";
 import UtilsAPI from "../ATranslation/compositionAPI/UtilsAPI";
 
 const baseTitle = ref("");
@@ -15,28 +17,35 @@ export default function APageTabTitleAPI(props) {
   const extra = toRef(props, "extra");
 
   const {
-    translation,
+    translationChanges,
   } = ATranslationAPI();
+
   const {
     isPlaceholderTranslate,
     getTranslatedText,
   } = UtilsAPI();
 
   const baseTitleTranslated = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     if (isPlaceholderTranslate(baseTitle.value)) {
       return getTranslatedText({
         placeholder: baseTitle.value,
-        translationObj: translation.value,
+        translationObj: translation,
       });
     }
     return baseTitle.value;
   });
 
   const titleTranslated = computed(() => {
+    if (!translationChanges.value) {
+      return undefined;
+    }
     if (isPlaceholderTranslate(title.value)) {
       return getTranslatedText({
         placeholder: title.value,
-        translationObj: translation.value,
+        translationObj: translation,
         extra: extra.value,
       });
     }

package/src/plugins/AI18nPlugin.js

@@ -1,11 +1,13 @@
 import {
   setI18n,
   setLanguage,
+  updateTranslation,
 } from "../ATranslation/compositionAPI/ATranslationAPI";
 
 export default {
   install: (app, options, language) => {
     setI18n(options);
     setLanguage(language);
+    updateTranslation();
   },
 };