aloha-vue 1.0.243 → 1.0.245

package/docs/src/views/PageTable/PageTable.js

@@ -130,61 +130,64 @@ export default {
       isLoadingOptions: false,
       rowActions: [
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          label: "Click me",
+          type: "button",
+          text: "Click me",
           title: "Click me title",
           isHidden: false,
           callback: this.clickMe,
-          class: "aloha",
+          class: "aloha a_dropdown__item",
           disabled: false,
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          labelCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha }`,
+          type: "button",
+          textCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha }`,
           titleCallback: ({ row, rowIndex }) => `${ rowIndex } Click ${ row.aloha } title`,
           isHiddenCallback: ({ row, rowIndex }) => !!(rowIndex > 2 && row.aloha),
           disabledCallback: ({ row, rowIndex }) => !(rowIndex > 2 && row.aloha),
           callback: this.clickMe,
         },
         {
-          icon: "Export",
+          iconLeft: "Export",
           type: "link",
-          hrefCallback: ({ row }) => `dokumente/${ row.pk }/download/`,
-          label: "Dokument herunterladen",
+          hrefCallback: ({ row }) => `dokumente/${ row.number }/download/`,
+          text: "Dokument herunterladen",
           target: "_blank",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
       ],
       multipleActions: [
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          label: "Aloha1",
+          type: "button",
+          text: "Aloha1",
           title: "Aloha1 Title",
           isHidden: false,
           callback: this.clickMe,
@@ -194,19 +197,20 @@ export default {
           isAllRowsSelected: true,
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          label: "Aloha1 modal",
+          type: "button",
+          text: "Aloha1 modal",
           title: "Aloha1 Title",
           callback: this.clickMeModal,
           disabled: false,
@@ -215,71 +219,66 @@ export default {
           isHiddenCallback: this.isHiddenMultiple,
         },
         {
-          isDivider: true,
+          type: "divider",
         },
         {
-          isDivider: true,
+          type: "divider",
         },
       ],
       tableActions: [
         {
-          label: "Aloha1",
+          text: "Aloha1",
           title: "Aloha1 Title",
           isHidden: false,
           callback: this.clickMe,
-          disabled: true,
           type: "button",
           class: "a_btn a_btn_primary",
-          icon: "Plus",
+          iconLeft: "Plus",
           id: "aloha_1"
         },
         {
-          label: "Aloha2",
+          type: "divider",
+        },
+        {
+          text: "Aloha2",
           title: "Aloha2 Title",
           callback: this.clickMe,
           disabled: false,
           class: "a_btn a_btn_secondary",
-          id: "aloha_2"
+          id: "aloha_2",
+          type: "button",
         },
         {
-          label: "Aloha link to",
+          type: "divider",
+        },
+        {
+          text: "Aloha link to",
           title: "Aloha link Title",
           disabled: false,
           class: "a_btn a_btn_secondary",
           type: "link",
+          iconRight: "Plus",
           to: "/spinner",
         },
         {
-          label: "Aloha link href",
+          text: "Aloha link href",
           title: "Aloha link Title",
           disabled: false,
           class: "a_btn a_btn_secondary",
           type: "link",
           href: "/spinner",
-          icon: "Plus",
+          iconLeft: "Plus",
         },
         {
-          title: "Aloha link Title",
-          disabled: false,
-          class: "a_btn a_btn_secondary",
-          type: "link",
-          href: "/spinner",
-          icon: "Plus",
+          type: "divider",
         },
         {
-          label: "Aloha3",
-          title: "Aloha3 Title",
+          text: "Aloha link Title",
           disabled: false,
-          type: "dropdown",
           class: "a_btn a_btn_secondary",
-          children: [
-            {
-              label: "Aloha4",
-              title: "Aloha4 Title",
-              callback: this.clickMe,
-              disabled: false,
-            },
-          ],
+          type: "link",
+          href: "/spinner",
+          iconLeft: "Plus",
         },
       ],
       modelQuickSearch: "",

package/docs/src/views/PageTable/PageTable.pug

@@ -16,7 +16,7 @@ div
     :filters="filters"
     :rows-footer="rowsFooter"
     :is-loading-table="false"
-    :is-loading-multiple-actions="true"
+    :is-loading-multiple-actions="false"
     :views="views"
     :model-view="modelView"
     v-model:modelQuickSearch="modelQuickSearch"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.243",
+  "version": "1.0.245",
   "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,7 +7,6 @@ import ASpinner from "../ASpinner/ASpinner";
 import ATranslation from "../ATranslation/ATranslation";
 
 import ClickAPI from "./comositionAPI/ClickAPI";
-import IconAPI from "./comositionAPI/IconAPI";
 import LoadingAPI from "./comositionAPI/LoadingAPI";
 import TextAPI from "./comositionAPI/TextAPI";
 import TitleAPI from "./comositionAPI/TitleAPI";
@@ -82,16 +81,15 @@ export default {
       default: "right",
       validator: value => ["right", "left"].indexOf(value) !== -1,
     },
-    icon: {
+    iconLeft: {
       type: String,
       required: false,
       default: undefined,
     },
-    iconAlign: {
+    iconRight: {
       type: String,
       required: false,
-      default: "left",
-      validator: value => ["right", "left"].indexOf(value) !== -1,
+      default: undefined,
     },
     iconClass: {
       type: String,
@@ -155,11 +153,6 @@ export default {
       isLoadingRight,
     } = LoadingAPI(props);
 
-    const {
-      isIconLeft,
-      isIconRight,
-    } = IconAPI(props);
-
     const {
       isTextScreenReaderVisible,
       isTextVisible,
@@ -170,8 +163,6 @@ export default {
     } = ClickAPI(props, context);
 
     return {
-      isIconLeft,
-      isIconRight,
       isLoadingLeft,
       isLoadingRight,
       isTextScreenReaderVisible,
@@ -213,8 +204,8 @@ export default {
           this.loadingClass,
         ],
       }),
-      this.isIconLeft && h(AIcon, {
-        icon: this.icon,
+      this.iconLeft && h(AIcon, {
+        icon: this.iconLeft,
         iconTag: this.iconTag,
         class: [
           "aloha_btn__icon_left",
@@ -230,8 +221,8 @@ export default {
         extra: this.extraTranslate,
         ariaHidden: this.textAriaHidden,
       }),
-      this.isIconRight && h(AIcon, {
-        icon: this.icon,
+      this.iconRight && h(AIcon, {
+        icon: this.iconRight,
         iconTag: this.iconTag,
         class: [
           "aloha_btn__icon_right",

package/src/ADropdown/ADropdown.js

@@ -105,16 +105,15 @@ export default {
       default: "right",
       validator: value => ["right", "left"].indexOf(value) !== -1,
     },
-    buttonIcon: {
+    buttonIconLeft: {
       type: String,
       required: false,
       default: undefined,
     },
-    buttonIconAlign: {
+    buttonIconRight: {
       type: String,
       required: false,
-      default: "left",
-      validator: value => ["right", "left"].indexOf(value) !== -1,
+      default: undefined,
     },
     buttonIconClass: {
       type: String,
@@ -217,6 +216,11 @@ export default {
       required: false,
       default: "div",
     },
+    useActionClass: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   setup(props) {
     const {
@@ -315,8 +319,8 @@ export default {
         loading: this.buttonLoading,
         loadingClass: this.buttonLoadingClass,
         loadingAlign: this.buttonLoadingAlign,
-        icon: this.buttonIcon,
-        iconAlign: this.buttonIconAlign,
+        iconLeft: this.buttonIconLeft,
+        iconRight: this.buttonIconRight,
         iconClass: this.buttonIconClass,
         iconAttributes: this.buttonIconAttributes,
         iconTag: this.buttonIconTag,
@@ -351,6 +355,7 @@ export default {
                 return h(ADropdownAction, {
                   key: actionIndex,
                   action,
+                  useActionClass: this.useActionClass,
                 }, this.$slots);
               }),
             ],

package/src/ADropdown/ADropdownAction/ADropdownAction.js

@@ -5,6 +5,8 @@ import {
 import AButton from "../../AButton/AButton";
 import ALink from "../../ALink/ALink";
 
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+
 export default {
   name: "ADropdownAction",
   props: {
@@ -12,6 +14,19 @@ export default {
       type: Object,
       required: true,
     },
+    useActionClass: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup(props) {
+    const {
+      attributesAction,
+    } = AttributesAPI(props);
+
+    return {
+      attributesAction,
+    };
   },
   render() {
     if (this.action.type === "button") {
@@ -19,8 +34,7 @@ export default {
         class: this.action.liClass,
       }, [
         h(AButton, {
-          class: "a_dropdown__item",
-          ...this.action,
+          ...this.attributesAction,
           onClick: this.action.callback,
         }),
       ]);
@@ -37,10 +51,7 @@ export default {
       return h("li", {
         class: this.action.liClass,
       }, [
-        h(ALink, {
-          class: "a_dropdown__item",
-          ...this.action,
-        })
+        h(ALink, this.attributesAction),
       ]);
     }
     if (this.action.type === "template" &&

package/src/ADropdown/ADropdownAction/compositionAPI/AttributesAPI.js

@@ -0,0 +1,24 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function AttributesAPI(props) {
+  const action = toRef(props, "action");
+  const useActionClass = toRef(props, "useActionClass");
+
+  const attributesAction = computed(() => {
+    const ATTRIBUTES = {
+      class: "a_dropdown__item",
+      ...action.value,
+    };
+    if (!useActionClass.value) {
+      ATTRIBUTES.class = "a_dropdown__item";
+    }
+    return ATTRIBUTES;
+  });
+
+  return {
+    attributesAction,
+  };
+}

package/src/AGroupButtonDropdown/AGroupButtonDropdown.js

@@ -22,6 +22,10 @@ export default {
       required: false,
       default: () => groupButtonDropdownPluginOptions.value.propsDefault.actionsClasses,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
     dropdownAttributes: {
       type: Object,
       required: false,
@@ -36,19 +40,29 @@ export default {
       type: Number,
       required: false,
       default: () => groupButtonDropdownPluginOptions.value.propsDefault.indexFirstDropdownAction,
-      validator: value => value > -1,
+      validator: value => value >= -1,
     },
     indexFirstDropdownActionMobile: {
       type: Number,
       required: false,
       default: () => groupButtonDropdownPluginOptions.value.propsDefault.indexFirstDropdownActionMobile,
-      validator: value => value > -1,
+      validator: value => value >= -1,
     },
     minDropdownActions: {
       type: Number,
       required: false,
       default: () => groupButtonDropdownPluginOptions.value.propsDefault.minDropdownActions,
     },
+    useActionClass: {
+      type: Boolean,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.useActionClass,
+    },
+    useDropdownActionClass: {
+      type: Boolean,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.useDropdownActionClass,
+    }
   },
   setup(props) {
     const {
@@ -71,12 +85,15 @@ export default {
         ...this.actionsGrouped.buttons.map((item, itemIndex) => {
           return h(AGroupButtonDropdownItem, {
             data: item,
+            disabled: this.disabled,
             actionsDropdown: this.actionsGrouped.dropdown,
             hasDropdownActions: this.hasDropdownActions,
             dropdownAttributes: this.dropdownAttributes,
             actionsClasses: this.actionsClasses,
             isLast: itemIndex === this.actionsGrouped.buttons.length - 1,
             hasDividerBeforeDropdown: this.hasDividerBeforeDropdown,
+            useActionClass: this.useActionClass,
+            useDropdownActionClass: this.useDropdownActionClass,
           }, this.$slots);
         }),
       ]);

package/src/AGroupButtonDropdown/AGroupButtonDropdownItem/AGroupButtonDropdownItem.js

@@ -11,34 +11,46 @@ import DropdownAPI from "./compositionAPI/DropdownAPI";
 export default {
   name: "AGroupButtonDropdownItem",
   props: {
-    data: {
-      type: Object,
+    actionsClasses: {
+      type: Array,
       required: true,
     },
     actionsDropdown: {
       type: Array,
       required: true,
     },
-    hasDropdownActions: {
-      type: Boolean,
+    data: {
+      type: Object,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
     dropdownAttributes: {
       type: Object,
       required: true,
     },
-    isLast: {
+    hasDividerBeforeDropdown: {
       type: Boolean,
       required: true,
     },
-    actionsClasses: {
-      type: Array,
+    hasDropdownActions: {
+      type: Boolean,
       required: true,
     },
-    hasDividerBeforeDropdown: {
+    isLast: {
       type: Boolean,
       required: true,
     },
+    useActionClass: {
+      type: Boolean,
+      required: false,
+    },
+    useDropdownActionClass: {
+      type: Boolean,
+      required: false,
+    },
   },
   setup(props) {
     const {
@@ -57,23 +69,28 @@ export default {
         class: "a_btn_group",
       }, [
         ...this.data.children.map(action => {
+          const CLASS = this.useActionClass && action.class ? action.class : this.actionsClasses[action.actionNotDividerIndex];
+          const DISABLED = this.disabled || action.disabled;
           if (action.type === "button") {
             return h(AButton, {
-              class: this.actionsClasses[action.actionNotDividerIndex],
               ...action,
+              class: CLASS,
+              disabled: DISABLED,
               onClick: action.callback,
             });
           }
           if (action.type === "link") {
             return h(ALink, {
-              class: this.actionsClasses[action.actionNotDividerIndex],
-              ...action
+              ...action,
+              disabled: DISABLED,
+              class: CLASS,
             });
           }
           if (action.type === "template" &&
             action.slotName &&
             this.$slots[action.slotName]) {
             return this.$slots[action.slotName]({
+              class: CLASS,
               action: action,
             });
           }
@@ -81,12 +98,14 @@ export default {
         this.isDropdownActionsInGroup && h(ADropdown, {
           isHideWithoutActionAndSlot: true,
           actions: this.actionsDropdown,
+          useActionClass: this.useDropdownActionClass,
           ...this.dropdownAttributes,
         }, this.$slots),
       ]),
       this.isDropdownActionsAfterGroup && h(ADropdown, {
         isHideWithoutActionAndSlot: true,
         actions: this.actionsDropdown,
+        useActionClass: this.useDropdownActionClass,
         ...this.dropdownAttributes,
       }, this.$slots),
     ];

package/src/AGroupButtonDropdown/compositionAPI/ActionsAPI.js

@@ -86,6 +86,7 @@ export default function ActionsAPI(props) {
         } else {
           last(ACTIONS_GROUPED.buttons).children.push(action);
         }
+        isPreviousActionDivider = false;
       } else {
         isPreviousActionDivider = true;
       }

package/src/ALink/ALink.js

@@ -7,7 +7,6 @@ import AIcon from "../AIcon/AIcon";
 import ASpinner from "../ASpinner/ASpinner";
 import ATranslation from "../ATranslation/ATranslation";
 
-import IconAPI from "../AButton/comositionAPI/IconAPI";
 import LoadingAPI from "../AButton/comositionAPI/LoadingAPI";
 import TextAPI from "../AButton/comositionAPI/TextAPI";
 import TitleAPI from "../AButton/comositionAPI/TitleAPI";
@@ -45,16 +44,15 @@ export default {
       required: false,
       default: undefined,
     },
-    icon: {
+    iconLeft: {
       type: String,
       required: false,
       default: undefined,
     },
-    iconAlign: {
+    iconRight: {
       type: String,
       required: false,
-      default: "left",
-      validator: value => ["right", "left"].indexOf(value) !== -1,
+      default: undefined,
     },
     iconAttributes: {
       type: Object,
@@ -148,19 +146,12 @@ export default {
       isLoadingRight,
     } = LoadingAPI(props);
 
-    const {
-      isIconLeft,
-      isIconRight,
-    } = IconAPI(props);
-
     const {
       isTextScreenReaderVisible,
       isTextVisible,
     } = TextAPI(props);
 
     return {
-      isIconLeft,
-      isIconRight,
       isLoadingLeft,
       isLoadingRight,
       isTextScreenReaderVisible,
@@ -187,14 +178,12 @@ export default {
           this.loadingClass,
         ],
       }),
-      this.isIconLeft && h(AIcon, {
-        icon: this.icon,
+      this.iconLeft && h(AIcon, {
+        icon: this.iconLeft,
         iconTag: this.iconTag,
         class: [
+          "aloha_link__icon_left",
           this.iconClass,
-          {
-            aloha_link__icon_left: this.isTextVisible || this.$slots.default,
-          },
         ],
         ...this.iconAttributes,
       }),
@@ -206,15 +195,12 @@ export default {
         extra: this.extraTranslate,
         ariaHidden: this.textAriaHidden,
       }),
-      this.isIconRight && h(AIcon, {
-        icon: this.icon,
+      this.iconRight && h(AIcon, {
+        icon: this.iconRight,
         iconTag: this.iconTag,
         class: [
           "aloha_link__icon_right",
           this.iconClass,
-          {
-            aloha_link__icon_right: this.isTextVisible || this.$slots.default,
-          },
         ],
         ...this.iconAttributes,
       }),
@@ -255,7 +241,7 @@ export default {
           },
         ],
         ariaDisabled: this.disabled,
-      }, CHILDREN);
+      }, () => CHILDREN);
     }
   },
 };