aloha-vue 1.0.142 → 1.0.144

package/docs/src/components/TheNavbar/TheNavbar.js

@@ -1,6 +1,10 @@
 import AIcon from "../../../../src/AIcon/AIcon";
 import AMenuButtonToggle from "../../../../src/AMenu/AMenuButtonToggle";
 
+import {
+  setLanguage,
+} from "../../../../src/ATranslation/compositionAPI/ATranslationAPI";
+
 export default {
   name: "TheNavbar",
   components: {
@@ -30,13 +34,10 @@ export default {
       ],
     };
   },
-  created() {
-    this.changeLanguage();
-  },
   methods: {
     changeLanguage() {
       setTimeout(() => {
-        this.$root.$i18n.language = this.modelLanguage;
+        setLanguage(this.modelLanguage);
       });
     },
   },

package/package.json

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

package/src/ATranslation/ATranslation.js

@@ -1,11 +1,14 @@
 import {
   h,
 } from "vue";
-import {
-  isPlainObject,
-  isString,
-  get,
-} from "lodash-es";
+
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import ATranslationAPI from "./compositionAPI/ATranslationAPI";
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import TextAPI from "./compositionAPI/TextAPI";
+import TitleAPI from "./compositionAPI/TitleAPI";
+import PlaceholderAPI from "./compositionAPI/PlaceholderAPI";
+import AriaLabelAPI from "./compositionAPI/AriaLabelAPI";
 
 export default {
   name: "ATranslation",
@@ -50,180 +53,67 @@ export default {
       default: "",
     },
   },
-  inject: ["i18n"],
-  computed: {
-    textBeforeHtml() {
-      return this.textBefore ? `<span>${ this.textBefore }</span>` : "";
-    },
-
-    textAfterHtml() {
-      return this.textAfter ? `<span>${ this.textAfter }</span>` : "";
-    },
-
-    htmlLocal() {
-      if (!this.html) {
-        return undefined;
-      }
-      let html = this.html;
-
-      if (this.isTranslateHtml) {
-        html = this.getTranslatedText({
-          placeholder: this.html,
-        });
-      }
-      return `${ this.textBeforeHtml }${ html }${ this.textAfterHtml }`;
-    },
-
-    isTranslateHtml() {
-      return !(!this.html || !this.isPlaceholderTranslate(this.html));
-    },
-
-    textLocal() {
-      if (this.isTranslateText) {
-        return this.getTranslatedText({
-          placeholder: this.text,
-        });
-      }
-      return this.text;
-    },
-
-    isTranslateText() {
-      return !(!this.text || !this.isPlaceholderTranslate(this.text));
-    },
-
-    titleLocal() {
-      if (this.isTranslateTitle) {
-        return this.getTranslatedText({
-          placeholder: this.title,
-        });
-      }
-      return this.title;
-    },
-
-    isTranslateTitle() {
-      return !(!this.title || !this.isPlaceholderTranslate(this.title));
-    },
-
-    placeholderLocal() {
-      if (this.isTranslatePlaceholder) {
-        return this.getTranslatedText({
-          placeholder: this.placeholder,
-        });
-      }
-      return this.placeholder;
-    },
-
-    isTranslatePlaceholder() {
-      return !(!this.placeholder || !this.isPlaceholderTranslate(this.placeholder));
-    },
-
-    ariaLabelLocal() {
-      if (this.isTranslateAriaLabel) {
-        return this.getTranslatedText({
-          placeholder: this.ariaLabel,
-        });
-      }
-      return this.ariaLabel;
-    },
-
-    isTranslateAriaLabel() {
-      return !(!this.ariaLabel || !this.isPlaceholderTranslate(this.ariaLabel));
-    },
-
-    attributesLocal() {
-      const ATTRIBUTES = {};
-      if (this.isTranslateText) {
-        ATTRIBUTES["data-translate-text"] = this.text;
-      }
-      if (this.isTranslateHtml) {
-        ATTRIBUTES["data-translate-html"] = this.html;
-      }
-      if (this.html) {
-        ATTRIBUTES.innerHTML = this.htmlLocal;
-      }
-      if (this.title) {
-        ATTRIBUTES.title = this.titleLocal;
-      }
-      if (this.isTranslateTitle) {
-        ATTRIBUTES["data-translate-title"] = this.title;
-      }
-      if (this.placeholder) {
-        ATTRIBUTES.placeholder = this.placeholderLocal;
-      }
-      if (this.isTranslatePlaceholder) {
-        ATTRIBUTES["data-translate-placeholder"] = this.placeholder;
-      }
-      if (this.ariaLabel) {
-        ATTRIBUTES["aria-label"] = this.ariaLabelLocal;
-      }
-      if (this.isTranslateAriaLabel) {
-        ATTRIBUTES["data-translate-aria-label"] = this.ariaLabel;
-      }
-      return ATTRIBUTES;
-    },
-
-    translation() {
-      return this.i18n[this.$root.$i18n.language];
-    },
-
-    textLocalWithBeforeAndAfter() {
-      return `${ this.textBefore }${ this.textLocal }${ this.textAfter }`;
-    },
-  },
-  methods: {
-    isPlaceholderTranslate(text) {
-      return !(!isString(text) ||
-        text[0] !== "_" ||
-        text[text.length - 1] !== "_");
-    },
-
-    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);
-
-        if (firstIndex === -1 || lastIndex === -1) {
-          break;
-        }
-
-        const PATH = textClone.slice(firstIndex + 2, lastIndex).trim();
-        const valueFromObject = get(object, PATH);
-
-        textClone = this.spliceString({
-          text: textClone,
-          replaceText: valueFromObject,
-          firstIndex,
-          lastindex: lastIndex + 2,
-        });
-        searchIndexStart = firstIndex + `${ valueFromObject }`.length;
-      }
-      return textClone;
-    },
-
-    spliceString({
-      text = "",
-      replaceText = "",
-      firstIndex,
-      lastindex,
-    }) {
-      return `${ text.slice(0, firstIndex) }${ replaceText }${ text.slice(lastindex, text.length) }`;
-    },
-
-
-    getTranslatedText({ placeholder }) {
-      if (this.extra) {
-        return this.replaceText({
-          text: this.translation[placeholder],
-          object: this.extra,
-        });
-      }
-      return this.translation[placeholder];
-    },
+  setup(props) {
+    const {
+      translation,
+    } = ATranslationAPI();
+
+    const {
+      htmlLocal,
+      isTranslateHtml,
+    } = HtmlAPI(props, {
+      translation,
+    });
+
+    const {
+      isTranslateText,
+      textLocal,
+      textLocalWithBeforeAndAfter,
+    } = TextAPI(props, {
+      translation,
+    });
+
+    const {
+      isTranslateTitle,
+      titleLocal,
+    } = TitleAPI(props, {
+      translation,
+    });
+
+    const {
+      isTranslatePlaceholder,
+      placeholderLocal,
+    } = PlaceholderAPI(props, {
+      translation,
+    });
+
+    const {
+      ariaLabelLocal,
+      isTranslateAriaLabel,
+    } = AriaLabelAPI(props, {
+      translation,
+    });
+
+    const {
+      attributesLocal,
+    } = AttributesAPI(props, {
+      ariaLabelLocal,
+      htmlLocal,
+      isTranslateAriaLabel,
+      isTranslateHtml,
+      isTranslatePlaceholder,
+      isTranslateText,
+      isTranslateTitle,
+      placeholderLocal,
+      titleLocal,
+    });
+
+    return {
+      attributesLocal,
+      htmlLocal,
+      textLocal,
+      textLocalWithBeforeAndAfter,
+    };
   },
   render() {
     if (this.htmlLocal) {

package/src/ATranslation/compositionAPI/ATranslationAPI.js

@@ -0,0 +1,30 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+
+const language = ref("de");
+const i18n = ref({});
+
+export default function ATranslationAPI() {
+  const translation = computed(() => {
+    return i18n.value[language.value];
+  });
+
+  return {
+    i18n,
+    language,
+    setI18n,
+    setLanguage,
+    translation,
+  };
+}
+
+export function setI18n(i18nLocal = {}) {
+  i18n.value = i18nLocal;
+}
+
+export function setLanguage(languageLocal = "") {
+  language.value = languageLocal;
+}

package/src/ATranslation/compositionAPI/AriaLabelAPI.js

@@ -0,0 +1,38 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import UtilsAPI from "./UtilsAPI";
+
+export default function AriaLabelAPI(props, {
+  translation = computed(() => ({})),
+}) {
+  const ariaLabel = toRef(props, "ariaLabel");
+  const extra = toRef(props, "extra");
+
+  const {
+    isPlaceholderTranslate,
+    getTranslatedText,
+  } = UtilsAPI();
+
+  const isTranslateAriaLabel = computed(() => {
+    return !(!ariaLabel.value || !isPlaceholderTranslate(ariaLabel.value));
+  });
+
+  const ariaLabelLocal = computed(() => {
+    if (isTranslateAriaLabel.value) {
+      return getTranslatedText({
+        placeholder: ariaLabel.value,
+        translationObj: translation.value,
+        extra: extra.value,
+      });
+    }
+    return ariaLabel.value;
+  });
+
+  return {
+    ariaLabelLocal,
+    isTranslateAriaLabel,
+  };
+}

package/src/ATranslation/compositionAPI/AttributesAPI.js

@@ -0,0 +1,58 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function AttributesAPI(props, {
+  ariaLabelLocal = computed(() => ""),
+  htmlLocal = computed(() => ""),
+  isTranslateAriaLabel = computed(() => false),
+  isTranslateHtml = computed(() => false),
+  isTranslatePlaceholder = computed(() => false),
+  isTranslateText = computed(() => false),
+  isTranslateTitle = computed(() => false),
+  placeholderLocal = computed(() => ""),
+  titleLocal = computed(() => ""),
+}) {
+  const ariaLabel = toRef(props, "ariaLabel");
+  const html = toRef(props, "html");
+  const placeholder = toRef(props, "placeholder");
+  const text = toRef(props, "text");
+  const title = toRef(props, "title");
+
+  const attributesLocal = computed(() => {
+    const ATTRIBUTES = {};
+    if (isTranslateText.value) {
+      ATTRIBUTES["data-translate-text"] = text.value;
+    }
+    if (isTranslateHtml.value) {
+      ATTRIBUTES["data-translate-html"] = html.value;
+    }
+    if (html.value) {
+      ATTRIBUTES.innerHTML = htmlLocal.value;
+    }
+    if (title.value) {
+      ATTRIBUTES.title = titleLocal.value;
+    }
+    if (isTranslateTitle.value) {
+      ATTRIBUTES["data-translate-title"] = title.value;
+    }
+    if (placeholder.value) {
+      ATTRIBUTES.placeholder = placeholderLocal.value;
+    }
+    if (isTranslatePlaceholder.value) {
+      ATTRIBUTES["data-translate-placeholder"] = placeholder.value;
+    }
+    if (ariaLabel.value) {
+      ATTRIBUTES["aria-label"] = ariaLabelLocal.value;
+    }
+    if (isTranslateAriaLabel.value) {
+      ATTRIBUTES["data-translate-aria-label"] = ariaLabel.value;
+    }
+    return ATTRIBUTES;
+  });
+
+  return {
+    attributesLocal,
+  };
+}

package/src/ATranslation/compositionAPI/HtmlAPI.js

@@ -0,0 +1,57 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import UtilsAPI from "./UtilsAPI";
+
+export default function HtmlAPI(props, {
+  translation = computed(() => ({})),
+}) {
+  const extra = toRef(props, "extra");
+  const html = toRef(props, "html");
+  const textAfter = toRef(props, "textAfter");
+  const textBefore = toRef(props, "textBefore");
+
+  const {
+    isPlaceholderTranslate,
+    getTranslatedText,
+  } = UtilsAPI();
+
+  const isTranslateHtml = computed(() => {
+    return !(!html.value || !isPlaceholderTranslate(html.value));
+  });
+
+  const textBeforeHtml = computed(() => {
+    return textBefore.value ?
+      `<span>${ textBefore.value }</span>` :
+      "";
+  });
+
+  const textAfterHtml = computed(() => {
+    return textAfter.value ?
+      `<span>${ textAfter.value }</span>` :
+      "";
+  });
+
+  const htmlLocal = computed(() => {
+    if (!html.value) {
+      return undefined;
+    }
+    let htmlString = html.value;
+
+    if (isTranslateHtml.value) {
+      htmlString = getTranslatedText({
+        placeholder: html.value,
+        translationObj: translation.value,
+        extra: extra.value
+      });
+    }
+    return `${ textBeforeHtml.value }${ htmlString }${ textAfterHtml.value }`;
+  });
+
+  return {
+    htmlLocal,
+    isTranslateHtml,
+  };
+}

package/src/ATranslation/compositionAPI/PlaceholderAPI.js

@@ -0,0 +1,38 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import UtilsAPI from "./UtilsAPI";
+
+export default function PlaceholderAPI(props, {
+  translation = computed(() => ({})),
+}) {
+  const extra = toRef(props, "extra");
+  const placeholder = toRef(props, "placeholder");
+
+  const {
+    isPlaceholderTranslate,
+    getTranslatedText,
+  } = UtilsAPI();
+
+  const isTranslatePlaceholder = computed(() => {
+    return !(!placeholder.value || !isPlaceholderTranslate(placeholder.value));
+  });
+
+  const placeholderLocal = computed(() => {
+    if (isTranslatePlaceholder.value) {
+      return getTranslatedText({
+        placeholder: placeholder.value,
+        translationObj: translation.value,
+        extra: extra.value,
+      });
+    }
+    return placeholder.value;
+  });
+
+  return {
+    isTranslatePlaceholder,
+    placeholderLocal,
+  };
+}

package/src/ATranslation/compositionAPI/TextAPI.js

@@ -0,0 +1,45 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import UtilsAPI from "./UtilsAPI";
+
+export default function TextAPI(props, {
+  translation = computed(() => ({})),
+}) {
+  const extra = toRef(props, "extra");
+  const text = toRef(props, "text");
+  const textAfter = toRef(props, "textAfter");
+  const textBefore = toRef(props, "textBefore");
+
+  const {
+    isPlaceholderTranslate,
+    getTranslatedText,
+  } = UtilsAPI();
+
+  const isTranslateText = computed(() => {
+    return !(!text.value || !isPlaceholderTranslate(text.value));
+  });
+
+  const textLocal = computed(() => {
+    if (isTranslateText.value) {
+      return getTranslatedText({
+        placeholder: text.value,
+        translationObj: translation.value,
+        extra: extra.value
+      });
+    }
+    return text.value;
+  });
+
+  const textLocalWithBeforeAndAfter = computed(() => {
+    return `${ textBefore.value }${ textLocal.value }${ textAfter.value }`;
+  });
+
+  return {
+    isTranslateText,
+    textLocal,
+    textLocalWithBeforeAndAfter,
+  };
+}

package/src/ATranslation/compositionAPI/TitleAPI.js

@@ -0,0 +1,38 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import UtilsAPI from "./UtilsAPI";
+
+export default function TitleAPI(props, {
+  translation = computed(() => ({})),
+}) {
+  const extra = toRef(props, "extra");
+  const title = toRef(props, "title");
+
+  const {
+    isPlaceholderTranslate,
+    getTranslatedText,
+  } = UtilsAPI();
+
+  const isTranslateTitle = computed(() => {
+    return !(!title.value || !isPlaceholderTranslate(title.value));
+  });
+
+  const titleLocal = computed(() => {
+    if (isTranslateTitle.value) {
+      return getTranslatedText({
+        placeholder: title.value,
+        translationObj: translation.value,
+        extra: extra.value,
+      });
+    }
+    return title.value;
+  });
+
+  return {
+    isTranslateTitle,
+    titleLocal,
+  };
+}

package/src/ATranslation/compositionAPI/UtilsAPI.js

@@ -0,0 +1,67 @@
+import {
+  get,
+  isPlainObject,
+  isString,
+} 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) }`;
+  };
+
+  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);
+
+      if (firstIndex === -1 || lastIndex === -1) {
+        break;
+      }
+
+      const PATH = textClone.slice(firstIndex + 2, lastIndex).trim();
+      const valueFromObject = get(object, PATH);
+
+      textClone = spliceString({
+        text: textClone,
+        replaceText: valueFromObject,
+        firstIndex,
+        lastindex: lastIndex + 2,
+      });
+      searchIndexStart = firstIndex + `${ valueFromObject }`.length;
+    }
+    return textClone;
+  };
+
+  const getTranslatedText = ({ placeholder, translationObj, extra }) => {
+    if (extra) {
+      return replaceText({
+        text: translationObj[placeholder],
+        object: extra,
+      });
+    }
+    return translationObj[placeholder];
+  };
+
+  return {
+    getTranslatedText,
+    isPlaceholderTranslate,
+    replaceText,
+    spliceString,
+  };
+}

package/src/compositionAPI/APageTabTitleAPI.js

@@ -2,15 +2,20 @@ import {
   ref, watch,
 } from "vue";
 
-const BASE_TITLE = ref("");
+const baseTitle = ref("");
 
 export default function APageTabTitleAPI({
   title = ref(""),
 }) {
   const setPageTabTitle = () => {
-    let pageTitle = BASE_TITLE.value;
+    let pageTitle = "";
     if (title.value) {
-      pageTitle = `${ title.value } - ${ pageTitle }`;
+      pageTitle = title.value;
+      if (baseTitle.value) {
+        pageTitle += ` - ${ baseTitle.value }`;
+      }
+    } else if (baseTitle.value) {
+      pageTitle = baseTitle.value;
     }
     document.title = pageTitle;
   };
@@ -22,6 +27,6 @@ export default function APageTabTitleAPI({
   });
 }
 
-export function setBaseTitle({ baseTitle = "" }) {
-  BASE_TITLE.value = baseTitle;
+export function setBaseTitle(baseTitleArg = "") {
+  baseTitle.value = baseTitleArg;
 }

package/src/plugins/AI18nPlugin.js

@@ -1,10 +1,11 @@
 import {
-  reactive,
-} from "vue";
+  setI18n,
+  setLanguage,
+} from "../ATranslation/compositionAPI/ATranslationAPI";
 
 export default {
   install: (app, options, language) => {
-    app.config.globalProperties.$i18n = reactive({ language: language });
-    app.provide("i18n", options);
+    setI18n(options);
+    setLanguage(language);
   },
 };

package/src/plugins/APageTabTitlePlugin.js

@@ -4,6 +4,6 @@ import {
 
 export default {
   install: (app, baseTitle = "") => {
-    setBaseTitle({ baseTitle });
+    setBaseTitle(baseTitle);
   },
 };