aloha-vue 1.0.144 → 1.0.145

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.144",
+  "version": "1.0.145",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/APageTabTitle/APageTabTitle.js

@@ -1,7 +1,3 @@
-import {
-  toRef,
-} from "vue";
-
 import APageTabTitleAPI from "../compositionAPI/APageTabTitleAPI";
 
 // @vue/component
@@ -12,11 +8,13 @@ export default {
       type: String,
       required: true,
     },
+    extra: {
+      type: Object,
+      required: false,
+    },
   },
   setup(props) {
-    APageTabTitleAPI({
-      title: toRef(props, "title"),
-    });
+    APageTabTitleAPI(props);
   },
   render() {
     return "";

package/src/ATranslation/compositionAPI/UtilsAPI.js

@@ -5,63 +5,63 @@ import {
 } from "lodash-es";
 
 export default function UtilsAPI() {
-  const isPlaceholderTranslate = text => {
-    return !(!isString(text) ||
-      text[0] !== "_" ||
-      text[text.length - 1] !== "_");
-  };
-
-  const spliceString = ({
-    text = "",
-    replaceText = "",
-    firstIndex,
-    lastindex,
-  }) => {
-    return `${ text.slice(0, firstIndex) }${ replaceText }${ text.slice(lastindex, text.length) }`;
+  return {
+    getTranslatedText,
+    isPlaceholderTranslate,
+    replaceText,
+    spliceString,
   };
+}
 
-  const replaceText = ({ text = "", object }) => {
-    if (!isPlainObject(object)) {
-      return text;
-    }
-    let textClone = text;
-    let searchIndexStart = 0;
-    while (true) {
-      const firstIndex = textClone.indexOf("{{", searchIndexStart);
-      const lastIndex = textClone.indexOf("}}", searchIndexStart);
+export function isPlaceholderTranslate(text = "") {
+  return !(!isString(text) ||
+    text[0] !== "_" ||
+    text[text.length - 1] !== "_");
+}
 
-      if (firstIndex === -1 || lastIndex === -1) {
-        break;
-      }
+export function getTranslatedText({ placeholder, translationObj, extra }) {
+  if (extra) {
+    return replaceText({
+      text: translationObj[placeholder],
+      object: extra,
+    });
+  }
+  return translationObj[placeholder];
+}
 
-      const PATH = textClone.slice(firstIndex + 2, lastIndex).trim();
-      const valueFromObject = get(object, PATH);
+function replaceText({ text = "", object }) {
+  if (!isPlainObject(object)) {
+    return text;
+  }
+  let textClone = text;
+  let searchIndexStart = 0;
+  while (true) {
+    const firstIndex = textClone.indexOf("{{", searchIndexStart);
+    const lastIndex = textClone.indexOf("}}", searchIndexStart);
 
-      textClone = spliceString({
-        text: textClone,
-        replaceText: valueFromObject,
-        firstIndex,
-        lastindex: lastIndex + 2,
-      });
-      searchIndexStart = firstIndex + `${ valueFromObject }`.length;
+    if (firstIndex === -1 || lastIndex === -1) {
+      break;
     }
-    return textClone;
-  };
 
-  const getTranslatedText = ({ placeholder, translationObj, extra }) => {
-    if (extra) {
-      return replaceText({
-        text: translationObj[placeholder],
-        object: extra,
-      });
-    }
-    return translationObj[placeholder];
-  };
+    const PATH = textClone.slice(firstIndex + 2, lastIndex).trim();
+    const valueFromObject = get(object, PATH);
 
-  return {
-    getTranslatedText,
-    isPlaceholderTranslate,
-    replaceText,
-    spliceString,
-  };
+    textClone = spliceString({
+      text: textClone,
+      replaceText: valueFromObject,
+      firstIndex,
+      lastindex: lastIndex + 2,
+    });
+    searchIndexStart = firstIndex + `${ valueFromObject }`.length;
+  }
+  return textClone;
+}
+
+function spliceString({
+  text = "",
+  replaceText = "",
+  firstIndex,
+  lastindex,
+}) {
+  return `${ text.slice(0, firstIndex) }${ replaceText }${ text.slice(lastindex, text.length) }`;
 }

package/src/compositionAPI/APageTabTitleAPI.js

@@ -1,21 +1,57 @@
 import {
-  ref, watch,
+  computed,
+  ref,
+  toRef,
+  watch,
 } from "vue";
 
+import ATranslationAPI from "../ATranslation/compositionAPI/ATranslationAPI";
+import UtilsAPI from "../ATranslation/compositionAPI/UtilsAPI";
+
 const baseTitle = ref("");
 
-export default function APageTabTitleAPI({
-  title = ref(""),
-}) {
+export default function APageTabTitleAPI(props) {
+  const title = toRef(props, "title");
+  const extra = toRef(props, "extra");
+
+  const {
+    translation,
+  } = ATranslationAPI();
+  const {
+    isPlaceholderTranslate,
+    getTranslatedText,
+  } = UtilsAPI();
+
+  const baseTitleTranslated = computed(() => {
+    if (isPlaceholderTranslate(baseTitle.value)) {
+      return getTranslatedText({
+        placeholder: baseTitle.value,
+        translationObj: translation.value,
+      });
+    }
+    return baseTitle.value;
+  });
+
+  const titleTranslated = computed(() => {
+    if (isPlaceholderTranslate(title.value)) {
+      return getTranslatedText({
+        placeholder: title.value,
+        translationObj: translation.value,
+        extra: extra.value,
+      });
+    }
+    return title.value;
+  });
+
   const setPageTabTitle = () => {
     let pageTitle = "";
-    if (title.value) {
-      pageTitle = title.value;
-      if (baseTitle.value) {
-        pageTitle += ` - ${ baseTitle.value }`;
+    if (titleTranslated.value) {
+      pageTitle = titleTranslated.value;
+      if (baseTitleTranslated.value) {
+        pageTitle += ` - ${ baseTitleTranslated.value }`;
       }
-    } else if (baseTitle.value) {
-      pageTitle = baseTitle.value;
+    } else if (baseTitleTranslated.value) {
+      pageTitle = baseTitleTranslated.value;
     }
     document.title = pageTitle;
   };