aloha-vue 1.0.358 → 1.0.360

package/docs/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@popperjs/core": "2.11.8",
     "axios": "1.4.0",
-    "aloha-css": "1.0.103",
+    "aloha-css": "1.0.110",
     "dompurify": "3.0.3",
     "fecha": "4.2.3",
     "highlight.js": "11.8.0",

package/docs/src/mainTranslation.js

@@ -23,6 +23,7 @@ import PageDisclosureI18n from "./views/PageDisclosure/i18n/PageDisclosureI18n";
 import PageTooltipI18n from "./views/PageTooltip/i18n/PageTooltipI18n";
 import PageGroupButtonDropdownI18n from "./views/PageGroupButtonDropdown/i18n/PageGroupButtonDropdownI18n";
 import PageDropdownI18n from "./views/PageDropdown/i18n/PageDropdownI18n";
+import PageListI18n from "./views/PageList/i18n/PageListI18n";
 
 export const mainTranslation = {
   ar: {
@@ -42,6 +43,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.ar,
     ...PageGroupButtonDropdownI18n.ar,
     ...PageDropdownI18n.ar,
+    ...PageListI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -60,6 +62,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.de,
     ...PageGroupButtonDropdownI18n.de,
     ...PageDropdownI18n.de,
+    ...PageListI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -78,6 +81,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.en,
     ...PageGroupButtonDropdownI18n.en,
     ...PageDropdownI18n.en,
+    ...PageListI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -96,6 +100,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.es,
     ...PageGroupButtonDropdownI18n.es,
     ...PageDropdownI18n.es,
+    ...PageListI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -114,6 +119,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.fr,
     ...PageGroupButtonDropdownI18n.fr,
     ...PageDropdownI18n.fr,
+    ...PageListI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -132,6 +138,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.hr,
     ...PageGroupButtonDropdownI18n.hr,
     ...PageDropdownI18n.hr,
+    ...PageListI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -150,6 +157,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.it,
     ...PageGroupButtonDropdownI18n.it,
     ...PageDropdownI18n.it,
+    ...PageListI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -168,5 +176,6 @@ export const mainTranslation = {
     ...PageTooltipI18n.ru,
     ...PageGroupButtonDropdownI18n.ru,
     ...PageDropdownI18n.ru,
+    ...PageListI18n.ru,
   },
 };

package/docs/src/views/PageDropdown/PageDropdown.js

@@ -5,6 +5,7 @@ import ATranslation from "../../../../src/ATranslation/ATranslation";
 import PageDropdownBasic from "./PageDropdownBasic/PageDropdownBasic.vue";
 import PageDropdownButtonClass from "./PageDropdownButtonClass/PageDropdownButtonClass.vue";
 import PageDropdownButtonIcons from "./PageDropdownButtonIcons/PageDropdownButtonIcons.vue";
+import PageDropdownButtonLoading from "./PageDropdownButtonLoading/PageDropdownButtonLoading.vue";
 import PageDropdownButtonText from "./PageDropdownButtonText/PageDropdownButtonText.vue";
 import PageDropdownCaretIcon from "./PageDropdownCaretIcon/PageDropdownCaretIcon.vue";
 import PageDropdownHasCaret from "./PageDropdownHasCaret/PageDropdownHasCaret.vue";
@@ -27,6 +28,7 @@ export default {
     PageDropdownBasic,
     PageDropdownButtonClass,
     PageDropdownButtonIcons,
+    PageDropdownButtonLoading,
     PageDropdownButtonText,
     PageDropdownCaretIcon,
     PageDropdownHasCaret,

package/docs/src/views/PageDropdown/PageDropdown.pug

@@ -17,6 +17,8 @@ aloha-page(
 
     page-dropdown-button-icons
 
+    page-dropdown-button-loading
+
     page-dropdown-in-body
 
     page-dropdown-triggers

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/PageDropdownButtonLoading.js

@@ -0,0 +1,41 @@
+import ADropdown from "../../../../../src/ADropdown/ADropdown";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDropdownButtonLoading",
+  components: {
+    ADropdown,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const dropdownActions = [
+      {
+        text: "Actions 0",
+        type: "button",
+        callback: () => {},
+      },
+      {
+        text: "Actions 1",
+        type: "button",
+        callback: () => {},
+      },
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      dropdownActions,
+    };
+  },
+};

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/PageDropdownButtonLoading.pug

@@ -0,0 +1,26 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DROPDOWN_GROUP_BUTTON_LOADING_HEADER_"
+  description="_A_DROPDOWN_GROUP_BUTTON_LOADING_DESCRIPTION_"
+  :props="['button-loading', 'button-loading-align']"
+)
+  a-dropdown(
+    :actions="dropdownActions"
+    button-text="aloha"
+    :button-loading="true"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-text="aloha"
+    :button-loading="true"
+    button-loading-align="left"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-text="aloha"
+    :button-loading="true"
+    button-loading-align="right"
+  )

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/PageDropdownButtonLoading.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageDropdownButtonLoading.pug"></template>
+<script src="./PageDropdownButtonLoading.js"></script>

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/compositionAPI/HtmlAPI.js

@@ -0,0 +1,25 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  button-text="aloha"
+  :button-loading="true"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-text="aloha"
+  :button-loading="true"
+  button-loading-align="left"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-text="aloha"
+  :button-loading="true"
+  button-loading-align="right"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/compositionAPI/JsAPI.js

@@ -0,0 +1,32 @@
+export default function JsAPI() {
+  const codeJs = `import ADropdown from "aloha-vue/src/ADropdown/ADropdown";
+    
+export default {
+  name: "PageDropdownButtonLoading",
+  components: {
+    ADropdown,
+  },
+  setup() {
+    const dropdownActions = [
+      {
+        text: "Actions 0",
+        type: "button",
+        callback: () => {},
+      },
+      {
+        text: "Actions 1",
+        type: "button",
+        callback: () => {},
+      },
+    ];
+
+    return {
+      dropdownActions,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageDropdown/i18n/de.json

@@ -1,5 +1,9 @@
 {
   "_A_DROPDOWN_COMPONENT_NAME_": "Dropdown",
+  "_A_DROPDOWN_GROUP_BUTTON_LOADING_HEADER_": "Ladezustand des Dropdown-Buttons",
+  "_A_DROPDOWN_GROUP_BUTTON_LOADING_DESCRIPTION_": "Der Ladezustand des Dropdown-Buttons kann mit den Props <strong>button-loading</strong> und <strong>button-loading-align</strong> angepasst werden .",
+  "_A_DROPDOWN_PROPS_BUTTON_LOADING_": "Die Prop ermöglicht es Ihnen, den Ladezustand des Dropdown-Buttons zu steuern.",
+  "_A_DROPDOWN_PROPS_BUTTON_LOADING_ALIGN_": "Die Prop ermöglicht es Ihnen, die Position des Ladezustands im Button anzupassen.",
   "_A_DROPDOWN_GROUP_BUTTON_ICONS_HEADER_": "Anpassbare Button-Icons",
   "_A_DROPDOWN_GROUP_BUTTON_ICONS_DESCRIPTION_": "Icons vor und nach dem Text des Dropdown-Buttons können mit den Props <strong>button-icon-left</strong> und <strong>button-icon-right</strong> angepasst werden.",
   "_A_DROPDOWN_PROPS_BUTTON_ICON_LEFT_": "Die Props ermöglichen es Ihnen, den Icon vor dem Text des Dropdown-Buttons anzuzeigen.",

package/docs/src/views/PageList/PageList.js

@@ -1,9 +1,52 @@
+import AlohaPage from "../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import ATranslation from "../../../../src/ATranslation/ATranslation";
 import AList from "../../../../src/AList/AList";
+import PageListClassGroup from "./PageListClassGroup/PageListClassGroup.vue";
+
+import EventsAPI from "./compositionAPI/EventsAPI";
+import ExposesAPI from "./compositionAPI/ExposesAPI";
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import SlotsAPI from "./compositionAPI/SlotsAPI";
 
 export default {
   name: "PageList",
   components: {
+    AlohaPage,
+    AlohaTableProps,
+    ATranslation,
     AList,
+    PageListClassGroup,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataSlots,
+    } = SlotsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    const {
+      dataExposes,
+    } = ExposesAPI();
+
+    return {
+      dataEvents,
+      dataExposes,
+      dataProps,
+      dataSlots,
+      pageTitle,
+    };
   },
   data() {
     return {

package/docs/src/views/PageList/PageList.pug

@@ -1,23 +1,36 @@
-div
-  h1 PageList
-  h2 without children
-  a-list(
-    :data="items"
-    key-label="label"
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
   )
-  h2 with children
-  a-list(
-    :data="items"
-    key-label="label"
-    key-children="items"
-  )
-  h2 with slot
-  a-list(
-    :data="items"
-    key-children="items"
-  )
-    template(
-      v-slot:listItem="vm"
+    a-translation(
+      tag="p"
+      html="_A_LIST_COMPONENT_DESCRIPTION_"
+    )
+
+    page-list-class-group
+
+
+
+    h2 without children
+    a-list(
+      :data="items"
+      key-label="label"
+    )
+    h2 with children
+    a-list(
+      :data="items"
+      key-label="label"
+      key-children="items"
+    )
+    h2 with slot
+    a-list(
+      :data="items"
+      key-children="items"
     )
-      pre {{ vm.item.label }}
+      template(
+        v-slot:listItem="vm"
+      )
+        pre {{ vm.item.label }}
 

package/docs/src/views/PageList/PageListClassGroup/PageListClassGroup.js

@@ -0,0 +1,43 @@
+import AList from "../../../../../src/AList/AList";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageListClassGroup",
+  components: {
+    AList,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const items = [
+      {
+        label: "label 1",
+      },
+      {
+        label: "label 2",
+      },
+      {
+        label: "label 3",
+      },
+      {
+        label: "label 4",
+      },
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      items,
+    };
+  },
+};

package/docs/src/views/PageList/PageListClassGroup/PageListClassGroup.pug

@@ -0,0 +1,27 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_LIST_GROUP_CLASS_GROUP_HEADER_"
+  description="_A_LIST_GROUP_CLASS_GROUP_DESCRIPTION_"
+  :props="['class-main', 'class-item']"
+)
+  a-list(
+    :data="items"
+    key-label="label"
+    class-main="a_list_group"
+    class-item="a_list_group__item"
+  )
+
+  a-list.a_mt_5(
+    :data="items"
+    key-label="label"
+    class-main="a_list_group a_list_group_gap"
+    class-item="a_list_group__item"
+  )
+
+  a-list.a_mt_5(
+    :data="items"
+    key-label="label"
+    class-main="a_list_group a_list_group_edge"
+    class-item="a_list_group__item"
+  )

package/docs/src/views/PageList/PageListClassGroup/PageListClassGroup.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageListClassGroup.pug"></template>
+<script src="./PageListClassGroup.js"></script>

package/docs/src/views/PageList/PageListClassGroup/compositionAPI/HtmlAPI.js

@@ -0,0 +1,17 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  :in-body="true"
+  button-text="in-body='true'"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  :in-body="false"
+  button-text="in-body='false'"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageList/PageListClassGroup/compositionAPI/JsAPI.js

@@ -0,0 +1,34 @@
+export default function JsAPI() {
+  const codeJs = `import AList from "aloha-vue/src/AList/AList";
+    
+export default {
+  name: "PageListClassGroup",
+  components: {
+    AList,
+  },
+  setup() {
+    const items = [
+      {
+        label: "label 1",
+      },
+      {
+        label: "label 2",
+      },
+      {
+        label: "label 3",
+      },
+      {
+        label: "label 4",
+      },
+    ];
+
+    return {
+      items,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageList/compositionAPI/EventsAPI.js

@@ -0,0 +1,13 @@
+export default function EventsAPI() {
+  const dataEvents = [
+    {
+      name: "close",
+      description: "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_",
+      type: "Function",
+    },
+  ];
+
+  return {
+    dataEvents,
+  };
+}

package/docs/src/views/PageList/compositionAPI/ExposesAPI.js

@@ -0,0 +1,18 @@
+export default function ExposesAPI() {
+  const dataExposes = [
+    {
+      name: "close",
+      description: "_A_ALERT_EXPOSES_CLOSE_DESCRIPTION_",
+      type: "Function",
+    },
+    {
+      name: "isHidden",
+      description: "_A_ALERT_EXPOSES_IS_HIDDEN_DESCRIPTION_",
+      type: "Boolean",
+    },
+  ];
+
+  return {
+    dataExposes,
+  };
+}

package/docs/src/views/PageList/compositionAPI/PageTitleAPI.js

@@ -0,0 +1,24 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  getTranslatedText,
+} from "../../../../../src/ATranslation/compositionAPI/UtilsAPI";
+
+
+export default function PageTitleAPI() {
+  const componentNameTranslated = computed(() => {
+    return getTranslatedText({
+      placeholder: "_A_LIST_COMPONENT_NAME_",
+    });
+  });
+
+  const pageTitle = computed(() => {
+    return `AList${ componentNameTranslated.value ? ` (${ componentNameTranslated.value })` : "" }`;
+  });
+
+  return {
+    pageTitle,
+  };
+}

package/docs/src/views/PageList/compositionAPI/PropsAPI.js

@@ -0,0 +1,106 @@
+export default function PropsAPI() {
+  const dataProps = [
+    {
+      name: "alert-class",
+      description: "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_",
+      type: "String / Object",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "alert-content-class",
+      description: "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_",
+      type: "String / Object",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "btn-close-attributes",
+      description: "_A_ALERT_PROPS_BTN_CLOSE_ATTRIBUTES_DESCRIPTION_",
+      type: "Object",
+      default: "{}",
+      required: false,
+    },
+    {
+      name: "closable",
+      description: "_A_ALERT_PROPS_CLOSABLE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "show-icon",
+      description: "_A_ALERT_PROPS_HAS_ICON_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "html",
+      description: "_A_ALERT_PROPS_HTML_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "icon",
+      description: "_A_ALERT_PROPS_ICON_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "icon-class",
+      description: "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "is-visible",
+      description: "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "removeAlertOnClose",
+      description: "_A_ALERT_PROPS_REMOVE_ALERT_ON_CLOSE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "safe-html",
+      description: "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "text",
+      description: "_A_ALERT_PROPS_TEXT_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "text-close",
+      description: "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_",
+      type: "String",
+      default: "_ALERT_CLOSE_",
+      required: false,
+    },
+    {
+      name: "type",
+      description: "_A_ALERT_PROPS_TYPE_DESCRIPTION_",
+      type: "String",
+      default: "danger",
+      required: false,
+    },
+  ];
+
+  return {
+    dataProps,
+  };
+}

package/docs/src/views/PageList/compositionAPI/SlotsAPI.js

@@ -0,0 +1,12 @@
+export default function SlotsAPI() {
+  const dataSlots = [
+    {
+      name: "default",
+      description: "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_",
+    },
+  ];
+
+  return {
+    dataSlots,
+  };
+}

package/docs/src/views/PageList/i18n/PageListI18n.js

@@ -0,0 +1,19 @@
+import ar from "./ar.json";
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fr from "./fr.json";
+import hr from "./hr.json";
+import it from "./it.json";
+import ru from "./ru.json";
+
+export default {
+  ar,
+  de,
+  en,
+  es,
+  fr,
+  hr,
+  it,
+  ru,
+};

package/docs/src/views/PageList/i18n/ar.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/de.json

@@ -0,0 +1,3 @@
+{
+  "_A_LIST_COMPONENT_NAME_": "Liste"
+}

package/docs/src/views/PageList/i18n/en.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/es.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/fr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/hr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/it.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+
+}

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.360",
   "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/directives/ASafeHtml.js

@@ -1,12 +1,15 @@
 import {
   sanitizeLocal,
 } from "../utils/utils";
+import {
+  isNil,
+} from "lodash-es";
 
 export default {
   beforeMount(el, binding) {
-    el.innerHTML = sanitizeLocal(binding.value);
+    el.innerHTML = sanitizeLocal(isNil(binding.value) ? "" : binding.value);
   },
   updated(el, binding) {
-    el.innerHTML = sanitizeLocal(binding.value);
+    el.innerHTML = sanitizeLocal(isNil(binding.value) ? "" : binding.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();
   },
 };