aloha-vue 1.0.342 → 1.0.344

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.344",
   "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/ADropdown/ADropdown.js

@@ -184,6 +184,7 @@ export default {
     inBody: {
       type: Boolean,
       required: false,
+      default: true,
     },
     isCaret: {
       type: Boolean,
@@ -204,6 +205,11 @@ export default {
       required: false,
       default: undefined,
     },
+    persist: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     placement: {
       type: String,
       required: false,
@@ -248,11 +254,13 @@ export default {
       onKeydown,
       onToggle,
       statusExpanded,
+      wasOpened,
     } = ToggleAPI(props, {
       dropdownButtonRef,
       dropdownRef,
       destroyPopover,
       setFocusToFirstElement,
+      startPopper,
     });
 
     const {
@@ -263,8 +271,7 @@ export default {
       isMenuRendered,
     } = AttributesAPI(props, {
       statusExpanded,
-      onToggle,
-      onKeydown,
+      wasOpened,
     });
 
     const {

package/src/ADropdown/compositionAPI/AttributesAPI.js

@@ -10,6 +10,7 @@ import {
 
 export default function AttributesAPI(props, {
   statusExpanded = ref(false),
+  wasOpened = ref(false),
 }) {
   const buttonAttributes = toRef(props, "buttonAttributes");
   const buttonTag = toRef(props, "buttonTag");
@@ -18,6 +19,7 @@ export default function AttributesAPI(props, {
   const dropdownClass = toRef(props, "dropdownClass");
   const id = toRef(props, "id");
   const menuWidth = toRef(props, "menuWidth");
+  const persist = toRef(props, "persist");
 
   const idLocal = computed(() => {
     return buttonAttributes.value.id || id.value;
@@ -60,7 +62,7 @@ export default function AttributesAPI(props, {
   });
 
   const isMenuRendered = computed(() => {
-    return statusExpanded.value;
+    return statusExpanded.value || (persist.value && wasOpened.value);
   });
 
   return {

package/src/ADropdown/compositionAPI/ToggleAPI.js

@@ -15,15 +15,18 @@ export default function ToggleAPI(props, {
   dropdownRef = ref(undefined),
   destroyPopover = () => {},
   setFocusToFirstElement = () => {},
+  startPopper = () => {},
 }) {
   const disabled = toRef(props, "disabled");
+  const elementsForArrows = toRef(props, "elementsForArrows");
   const isCloseByClickInside = toRef(props, "isCloseByClickInside");
   const isListWidthSameWithButton = toRef(props, "isListWidthSameWithButton");
-  const elementsForArrows = toRef(props, "elementsForArrows");
+  const persist = toRef(props, "persist");
 
-  const statusExpanded = ref(false);
   const buttonWidth = ref(undefined);
   const statusEventPressArrows = ref(false);
+  const statusExpanded = ref(false);
+  const wasOpened = ref(false);
 
   const {
     closeDropdownGlobal,
@@ -109,6 +112,11 @@ export default function ToggleAPI(props, {
     setButtonWidth();
     initEventPressArrows();
     statusExpanded.value = true;
+    if (persist.value &&
+      wasOpened.value) {
+      startPopper();
+    }
+    wasOpened.value = true;
     setTimeout(() => {
       setEventCloseClick();
       setTimeout(() => {
@@ -166,5 +174,6 @@ export default function ToggleAPI(props, {
     onKeydown,
     onToggle,
     statusExpanded,
+    wasOpened,
   };
 }

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,
   };
 }