aloha-vue 1.0.313 → 1.0.314

package/package.json

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

package/src/AButton/AButton.js

@@ -7,6 +7,7 @@ import ASpinner from "../ASpinner/ASpinner";
 import ATranslation from "../ATranslation/ATranslation";
 
 import ClickAPI from "./comositionAPI/ClickAPI";
+import IconsAPI from "./comositionAPI/IconsAPI";
 import LoadingAPI from "./comositionAPI/LoadingAPI";
 import TextAPI from "./comositionAPI/TextAPI";
 import TitleAPI from "./comositionAPI/TitleAPI";
@@ -82,12 +83,12 @@ export default {
       validator: value => ["right", "left"].indexOf(value) !== -1,
     },
     iconLeft: {
-      type: String,
+      type: [String, Object],
       required: false,
       default: undefined,
     },
     iconRight: {
-      type: String,
+      type: [String, Object],
       required: false,
       default: undefined,
     },
@@ -107,12 +108,12 @@ export default {
       default: undefined,
     },
     text: {
-      type: [String, Number],
+      type: [String, Number, Object],
       required: false,
       default: undefined,
     },
     textScreenReader: {
-      type: String,
+      type: [String, Number, Object],
       required: false,
       default: undefined,
     },
@@ -163,9 +164,16 @@ export default {
       isLoadingRight,
     } = LoadingAPI(props);
 
+    const {
+      iconLeftCurrentDevice,
+      iconRightCurrentDevice,
+    } = IconsAPI(props);
+
     const {
       isTextScreenReaderVisible,
       isTextVisible,
+      textForCurrentDevice,
+      textScreenReaderForCurrentDevice,
     } = TextAPI(props);
 
     const {
@@ -173,12 +181,16 @@ export default {
     } = ClickAPI(props, context);
 
     return {
+      iconLeftCurrentDevice,
+      iconRightCurrentDevice,
       isLoadingLeft,
       isLoadingRight,
       isTextScreenReaderVisible,
       isTextVisible,
       isTitleVisible,
       onClick,
+      textForCurrentDevice,
+      textScreenReaderForCurrentDevice,
     };
   },
   render() {
@@ -210,7 +222,7 @@ export default {
       this.isTextScreenReaderVisible && h(ATranslation, {
         class: "a_sr_only aloha_btn__hidden",
         tag: "span",
-        html: this.textScreenReader,
+        html: this.textScreenReaderForCurrentDevice,
         extra: this.extraTranslate,
       }),
       this.isLoadingLeft && h(ASpinner, {
@@ -219,8 +231,8 @@ export default {
           this.loadingClass,
         ],
       }),
-      this.iconLeft && h(AIcon, {
-        icon: this.iconLeft,
+      this.iconLeftCurrentDevice && h(AIcon, {
+        icon: this.iconLeftCurrentDevice,
         iconTag: this.iconTag,
         class: [
           "aloha_btn__icon_left",
@@ -232,12 +244,12 @@ export default {
       this.isTextVisible && h(ATranslation, {
         tag: "span",
         class: this.textClass,
-        html: this.text,
+        html: this.textForCurrentDevice,
         extra: this.extraTranslate,
         ariaHidden: this.textAriaHidden,
       }),
-      this.iconRight && h(AIcon, {
-        icon: this.iconRight,
+      this.iconRightCurrentDevice && h(AIcon, {
+        icon: this.iconRightCurrentDevice,
         iconTag: this.iconTag,
         class: [
           "aloha_btn__icon_right",

package/src/AButton/comositionAPI/IconsAPI.js

@@ -0,0 +1,44 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import AMobileAPI from "../../compositionAPI/AMobileAPI";
+
+import {
+  isPlainObject,
+} from "lodash-es";
+
+export default function IconsAPI(props) {
+  const iconLeft = toRef(props, "iconLeft");
+  const iconRight = toRef(props, "iconRight");
+
+  const {
+    isMobileWidth,
+  } = AMobileAPI();
+
+  const iconLeftCurrentDevice = computed(() => {
+    if (isPlainObject(iconLeft.value)) {
+      if (isMobileWidth.value) {
+        return iconLeft.value.mobile;
+      }
+      return iconLeft.value.desktop;
+    }
+    return iconLeft.value;
+  });
+
+  const iconRightCurrentDevice = computed(() => {
+    if (isPlainObject(iconRight.value)) {
+      if (isMobileWidth.value) {
+        return iconRight.value.mobile;
+      }
+      return iconRight.value.desktop;
+    }
+    return iconRight.value;
+  });
+
+  return {
+    iconLeftCurrentDevice,
+    iconRightCurrentDevice,
+  };
+}

package/src/AButton/comositionAPI/TextAPI.js

@@ -3,7 +3,10 @@ import {
   toRef,
 } from "vue";
 
+import AMobileAPI from "../../compositionAPI/AMobileAPI";
+
 import {
+  isPlainObject,
   isUndefined,
 } from "lodash-es";
 
@@ -11,16 +14,42 @@ export default function TextAPI(props) {
   const text = toRef(props, "text");
   const textScreenReader = toRef(props, "textScreenReader");
 
+  const {
+    isMobileWidth,
+  } = AMobileAPI();
+
+  const textForCurrentDevice = computed(() => {
+    if (isPlainObject(text.value)) {
+      if (isMobileWidth.value) {
+        return text.value.mobile;
+      }
+      return text.value.desktop;
+    }
+    return text.value;
+  });
+
+  const textScreenReaderForCurrentDevice = computed(() => {
+    if (isPlainObject(textScreenReader.value)) {
+      if (isMobileWidth.value) {
+        return textScreenReader.value.mobile;
+      }
+      return textScreenReader.value.desktop;
+    }
+    return textScreenReader.value;
+  });
+
   const isTextVisible = computed(() => {
-    return !isUndefined(text.value);
+    return !isUndefined(textForCurrentDevice.value);
   });
 
   const isTextScreenReaderVisible = computed(() => {
-    return !isUndefined(textScreenReader.value);
+    return !isUndefined(textScreenReaderForCurrentDevice.value);
   });
 
   return {
     isTextScreenReaderVisible,
     isTextVisible,
+    textForCurrentDevice,
+    textScreenReaderForCurrentDevice,
   };
 }

package/src/AGroupButtonDropdown/compositionAPI/ActionsAPI.js

@@ -10,7 +10,8 @@ import {
 } from "../../utils/actions";
 import {
   cloneDeep,
-  forEach, last,
+  forEach,
+  last,
 } from "lodash-es";
 
 export default function ActionsAPI(props) {
@@ -20,7 +21,7 @@ export default function ActionsAPI(props) {
   const minDropdownActions = toRef(props, "minDropdownActions");
 
   const {
-    isMobile,
+    isMobileWidth,
   } = AMobileAPI();
 
   const actionsAllFiltered = computed(() => {
@@ -30,7 +31,7 @@ export default function ActionsAPI(props) {
   });
 
   const currentIndexFirstDropdownAction = computed(() => {
-    return isMobile.value ? indexFirstDropdownActionMobile.value : indexFirstDropdownAction.value;
+    return isMobileWidth.value ? indexFirstDropdownActionMobile.value : indexFirstDropdownAction.value;
   });
 
   const hasMoreEqualActionsThenParameter = ({ actions = [], minCountActions = 0 }) => {

package/src/ALink/ALink.js

@@ -7,6 +7,7 @@ import AIcon from "../AIcon/AIcon";
 import ASpinner from "../ASpinner/ASpinner";
 import ATranslation from "../ATranslation/ATranslation";
 
+import IconsAPI from "../AButton/comositionAPI/IconsAPI";
 import LoadingAPI from "../AButton/comositionAPI/LoadingAPI";
 import TextAPI from "../AButton/comositionAPI/TextAPI";
 import TitleAPI from "../AButton/comositionAPI/TitleAPI";
@@ -146,17 +147,28 @@ export default {
       isLoadingRight,
     } = LoadingAPI(props);
 
+    const {
+      iconLeftCurrentDevice,
+      iconRightCurrentDevice,
+    } = IconsAPI(props);
+
     const {
       isTextScreenReaderVisible,
       isTextVisible,
+      textForCurrentDevice,
+      textScreenReaderForCurrentDevice,
     } = TextAPI(props);
 
     return {
+      iconLeftCurrentDevice,
+      iconRightCurrentDevice,
       isLoadingLeft,
       isLoadingRight,
       isTextScreenReaderVisible,
       isTextVisible,
       isTitleVisible,
+      textForCurrentDevice,
+      textScreenReaderForCurrentDevice,
     };
   },
   render() {
@@ -169,7 +181,7 @@ export default {
       this.isTextScreenReaderVisible && h(ATranslation, {
         class: "a_sr_only aloha_link__hidden",
         tag: "span",
-        html: this.textScreenReader,
+        html: this.textScreenReaderForCurrentDevice,
         extra: this.extraTranslate,
       }),
       this.isLoadingLeft && h(ASpinner, {
@@ -178,8 +190,8 @@ export default {
           this.loadingClass,
         ],
       }),
-      this.iconLeft && h(AIcon, {
-        icon: this.iconLeft,
+      this.iconLeftCurrentDevice && h(AIcon, {
+        icon: this.iconLeftCurrentDevice,
         iconTag: this.iconTag,
         class: [
           "aloha_link__icon_left",
@@ -191,12 +203,12 @@ export default {
       this.isTextVisible && h(ATranslation, {
         tag: "span",
         class: this.textClass,
-        html: this.text,
+        html: this.textForCurrentDevice,
         extra: this.extraTranslate,
         ariaHidden: this.textAriaHidden,
       }),
-      this.iconRight && h(AIcon, {
-        icon: this.iconRight,
+      this.iconRightCurrentDevice && h(AIcon, {
+        icon: this.iconRightCurrentDevice,
         iconTag: this.iconTag,
         class: [
           "aloha_link__icon_right",

package/src/ATable/ATable.js

@@ -359,7 +359,7 @@ export default {
     } = TableColumnsVisibleAPI();
 
     const {
-      isMobile,
+      isMobileWidth: isMobile,
     } = AMobileAPI();
 
     const {

package/src/ATable/ATableFiltersTop/ATableFiltersTop.js

@@ -107,7 +107,12 @@ export default {
       class: "a_btn a_btn_primary a_text_nowrap",
       iconLeft: "Search",
       type: "submit",
-      text: "_SUCHE_STARTEN_",
+      text: {
+        desktop: "_SUCHE_STARTEN_",
+      },
+      textScreenReader: {
+        mobile: "_SUCHE_STARTEN_",
+      },
       prevent: true,
       stop: true,
       disabled: this.isLoadingTable,

package/src/compositionAPI/AMobileAPI.js

@@ -2,15 +2,15 @@ import {
   ref,
 } from "vue";
 
-export const isMobile = ref(undefined);
+export const isMobileWidth = ref(undefined);
 
-export function setIsMobile(isMobileLocal) {
-  isMobile.value = isMobileLocal;
+export function setIsMobileWidth(isMobileWidthLocal) {
+  isMobileWidth.value = isMobileWidthLocal;
 }
 
 export default function AMobileAPI() {
   return {
-    isMobile,
-    setIsMobile,
+    isMobileWidth,
+    setIsMobileWidth,
   };
 }

package/src/plugins/AMobilePlugin.js

@@ -1,21 +1,21 @@
 import {
-  isMobile,
-  setIsMobile,
+  isMobileWidth,
+  setIsMobileWidth,
 } from "../compositionAPI/AMobileAPI";
 
 export default {
   install: (app, {
     breakpoint,
   } = {}) => {
-    setIsMobile(window.innerWidth <= breakpoint);
+    setIsMobileWidth(window.innerWidth <= breakpoint);
     const resizeWindow = () => {
       if (window.innerWidth > breakpoint) {
-        if (isMobile.value) {
-          setIsMobile(false);
+        if (isMobileWidth.value) {
+          setIsMobileWidth(false);
         }
       } else {
-        if (!isMobile.value) {
-          setIsMobile(true);
+        if (!isMobileWidth.value) {
+          setIsMobileWidth(true);
         }
       }
     };