aloha-vue 1.0.342 → 1.0.343

package/package.json

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

package/src/AButton/AButton.js

@@ -6,6 +6,7 @@ import AIcon from "../AIcon/AIcon";
 import ASpinner from "../ASpinner/ASpinner";
 import ATranslation from "../ATranslation/ATranslation";
 
+import AriaLabelAPI from "../ATranslation/compositionAPI/AriaLabelAPI";
 import ClickAPI from "./comositionAPI/ClickAPI";
 import ComponentLocalAPI from "./comositionAPI/ComponentLocalAPI";
 import HtmlTitleAPI from "./comositionAPI/HtmlTitleAPI";
@@ -222,7 +223,12 @@ export default {
       htmlTitleAttributes,
     } = HtmlTitleAPI(props);
 
+    const {
+      ariaLabelAttributes,
+    } = AriaLabelAPI(props);
+
     return {
+      ariaLabelAttributes,
       buttonRef,
       componentLocal,
       htmlTitleAttributes,
@@ -239,6 +245,7 @@ export default {
       ...this.$attrs,
       ...this.attributes,
       ...this.htmlTitleAttributes,
+      ...this.ariaLabelAttributes,
       ref: "buttonRef",
       id: this.id,
       class: [
@@ -291,7 +298,6 @@ export default {
         this.$slots.default && this.$slots.default(),
         this.isTextOrHtmlVisible && h(ATranslation, {
           ariaHidden: this.textAriaHidden,
-          ariaLabel: this.ariaLabel,
           class: this.textClass,
           extra: this.extra,
           html: this.html,

package/src/ALink/ALink.js

@@ -6,6 +6,7 @@ import AIcon from "../AIcon/AIcon";
 import ASpinner from "../ASpinner/ASpinner";
 import ATranslation from "../ATranslation/ATranslation";
 
+import AriaLabelAPI from "../ATranslation/compositionAPI/AriaLabelAPI";
 import ComponentLocalAPI from "./compositionAPI/ComponentLocalAPI";
 import HtmlTitleAPI from "./compositionAPI/HtmlTitleAPI";
 import LoadingAPI from "../AButton/comositionAPI/LoadingAPI";
@@ -22,6 +23,11 @@ export default {
   name: "ALink",
   inheritAttrs: false,
   props: {
+    ariaLabel: {
+      type: [String, Number, Object],
+      required: false,
+      default: undefined,
+    },
     attributes: {
       type: Object,
       required: false,
@@ -203,7 +209,12 @@ export default {
       isRouterLink,
     });
 
+    const {
+      ariaLabelAttributes,
+    } = AriaLabelAPI(props);
+
     return {
+      ariaLabelAttributes,
       componentLocal,
       isLoadingLeft,
       htmlTitleAttributes,
@@ -220,6 +231,7 @@ export default {
       ...this.attributes,
       ...this.htmlTitleAttributes,
       ...this.toHrefAttributes,
+      ...this.ariaLabelAttributes,
       id: this.id,
       target: this.target,
       class: [
@@ -266,7 +278,6 @@ export default {
         this.$slots.default && this.$slots.default(),
         this.isTextOrHtmlVisible && h(ATranslation, {
           ariaHidden: this.textAriaHidden,
-          ariaLabel: this.ariaLabel,
           class: this.textClass,
           extra: this.extra,
           html: this.html,

package/src/ATranslation/ATranslation.js

@@ -109,19 +109,13 @@ export default {
     });
 
     const {
-      hasPlaceholder,
-      isTranslatePlaceholder,
-      placeholderForCurrentDevice,
-      placeholderLocal,
+      placeholderAttributes,
     } = PlaceholderAPI(props, {
       translation,
     });
 
     const {
-      ariaLabelForCurrentDevice,
-      ariaLabelLocal,
-      hasAriaLabel,
-      isTranslateAriaLabel,
+      ariaLabelAttributes,
     } = AriaLabelAPI(props, {
       translation,
     });
@@ -129,24 +123,17 @@ export default {
     const {
       attributesLocal,
     } = AttributesAPI({
-      ariaLabelForCurrentDevice,
-      ariaLabelLocal,
-      hasAriaLabel,
-      hasPlaceholder,
       htmlForCurrentDevice,
-      isTranslateAriaLabel,
       isTranslateHtml,
-      isTranslatePlaceholder,
       isTranslateSafeHtml,
       isTranslateText,
-      placeholderForCurrentDevice,
-      placeholderLocal,
       safeHtmlForCurrentDevice,
       textForCurrentDevice,
       titleLocalOptions,
     });
 
     return {
+      ariaLabelAttributes,
       attributesLocal,
       hasText,
       hasTextAfter,
@@ -154,6 +141,7 @@ export default {
       hasHtml,
       hasSafeHtml,
       htmlLocalWithBeforeAndAfter,
+      placeholderAttributes,
       textAfterForCurrentDevice,
       textBeforeForCurrentDevice,
       textLocal,
@@ -162,7 +150,11 @@ export default {
   },
   render() {
     if (this.hasText) {
-      return h(this.tag, this.attributesLocal, [
+      return h(this.tag, {
+        ...this.attributesLocal,
+        ...this.ariaLabelAttributes,
+        ...this.placeholderAttributes,
+      }, [
         this.textBeforeForCurrentDevice,
         this.textLocal,
         this.$slots.default && this.$slots.default(),
@@ -173,11 +165,17 @@ export default {
     if (this.hasSafeHtml || this.hasHtml) {
       return h(this.tag, {
         ...this.attributesLocal,
+        ...this.ariaLabelAttributes,
+        ...this.placeholderAttributes,
         innerHTML: this.htmlLocalWithBeforeAndAfter,
       });
     }
 
-    return h(this.tag, this.attributesLocal, [
+    return h(this.tag, {
+      ...this.attributesLocal,
+      ...this.ariaLabelAttributes,
+      ...this.placeholderAttributes,
+    }, [
       this.textBeforeForCurrentDevice,
       this.$slots.default && this.$slots.default(),
       this.textAfterForCurrentDevice,

package/src/ATranslation/compositionAPI/AriaLabelAPI.js

@@ -4,6 +4,7 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
+import ATranslationAPI from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
@@ -11,12 +12,14 @@ import {
   isUndefined,
 } from "lodash-es";
 
-export default function AriaLabelAPI(props, {
-  translation = computed(() => ({})),
-}) {
+export default function AriaLabelAPI(props) {
   const ariaLabel = toRef(props, "ariaLabel");
   const extra = toRef(props, "extra");
 
+  const {
+    translation,
+  } = ATranslationAPI();
+
   const {
     isPlaceholderTranslate,
     getTranslatedText,
@@ -55,10 +58,18 @@ export default function AriaLabelAPI(props, {
     return ariaLabelForCurrentDevice.value;
   });
 
+  const ariaLabelAttributes = computed(() => {
+    const ATTRIBUTES = {};
+    if (hasAriaLabel.value) {
+      ATTRIBUTES["aria-label"] = ariaLabelLocal.value;
+      if (isTranslateAriaLabel.value) {
+        ATTRIBUTES["data-translate-aria-label"] = ariaLabelForCurrentDevice.value;
+      }
+    }
+    return ATTRIBUTES;
+  });
+
   return {
-    ariaLabelForCurrentDevice,
-    ariaLabelLocal,
-    hasAriaLabel,
-    isTranslateAriaLabel,
+    ariaLabelAttributes,
   };
 }

package/src/ATranslation/compositionAPI/AttributesAPI.js

@@ -3,18 +3,10 @@ import {
 } from "vue";
 
 export default function AttributesAPI({
-  ariaLabelForCurrentDevice = computed(() => ""),
-  ariaLabelLocal = computed(() => ""),
-  hasAriaLabel = computed(() => false),
-  hasPlaceholder = computed(() => false),
   htmlForCurrentDevice = computed(() => ""),
-  isTranslateAriaLabel = computed(() => false),
   isTranslateHtml = computed(() => false),
-  isTranslatePlaceholder = computed(() => false),
   isTranslateSafeHtml = computed(() => false),
   isTranslateText = computed(() => false),
-  placeholderForCurrentDevice = computed(() => ""),
-  placeholderLocal = computed(() => ""),
   safeHtmlForCurrentDevice = computed(() => ""),
   textForCurrentDevice = computed(() => ({})),
   titleLocalOptions = computed(() => ({})),
@@ -34,18 +26,6 @@ export default function AttributesAPI({
         ATTRIBUTES["data-translate-title"] = titleLocalOptions.value.dataTranslateTitle;
       }
     }
-    if (hasPlaceholder.value) {
-      ATTRIBUTES.placeholder = placeholderLocal.value;
-      if (isTranslatePlaceholder.value) {
-        ATTRIBUTES["data-translate-placeholder"] = placeholderForCurrentDevice.value;
-      }
-    }
-    if (hasAriaLabel.value) {
-      ATTRIBUTES["aria-label"] = ariaLabelLocal.value;
-      if (isTranslateAriaLabel.value) {
-        ATTRIBUTES["data-translate-aria-label"] = ariaLabelForCurrentDevice.value;
-      }
-    }
 
     return ATTRIBUTES;
   });

package/src/ATranslation/compositionAPI/PlaceholderAPI.js

@@ -4,6 +4,7 @@ import {
 } from "vue";
 
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
+import ATranslationAPI from "./ATranslationAPI";
 import UtilsAPI from "./UtilsAPI";
 
 import {
@@ -11,12 +12,14 @@ import {
   isUndefined,
 } from "lodash-es";
 
-export default function PlaceholderAPI(props, {
-  translation = computed(() => ({})),
-}) {
+export default function PlaceholderAPI(props) {
   const extra = toRef(props, "extra");
   const placeholder = toRef(props, "placeholder");
 
+  const {
+    translation,
+  } = ATranslationAPI();
+
   const {
     isPlaceholderTranslate,
     getTranslatedText,
@@ -55,10 +58,18 @@ export default function PlaceholderAPI(props, {
     return placeholderForCurrentDevice.value;
   });
 
+  const placeholderAttributes = computed(() => {
+    const ATTRIBUTES = {};
+    if (hasPlaceholder.value) {
+      ATTRIBUTES.placeholder = placeholderLocal.value;
+      if (isTranslatePlaceholder.value) {
+        ATTRIBUTES["data-translate-placeholder"] = placeholderForCurrentDevice.value;
+      }
+    }
+    return ATTRIBUTES;
+  });
+
   return {
-    hasPlaceholder,
-    isTranslatePlaceholder,
-    placeholderForCurrentDevice,
-    placeholderLocal,
+    placeholderAttributes,
   };
 }