aloha-vue 1.0.235 → 1.0.237

package/docs/src/components/TheMenu/TheMenu.js

@@ -212,6 +212,14 @@ export default {
           },
           icon: "Cog",
         },
+        {
+          id: "GroupButtonDropdown",
+          label: "GroupButtonDropdown",
+          to: {
+            name: "PageGroupButtonDropdown",
+          },
+          icon: "Cog",
+        },
         {
           id: "tabs",
           label: "Tabs",

package/docs/src/main.js

@@ -3,7 +3,8 @@ import { createApp } from "vue";
 import store from "./store/index";
 import router from "./router/index";
 import AI18nPlugin from "../../src/plugins/AI18nPlugin";
-// import alohaPlugin from "../src/plugins/alohaPlugin";
+import AMobilePlugin from "../../src/plugins/AMobilePlugin";
+import AGroupButtonDropdownPlugin from "../../src/plugins/AGroupButtonDropdownPlugin";
 import AIconPlugin from "../../src/plugins/AIconPlugin";
 import AModalPlugin from "../../src/plugins/AModalPlugin";
 import mainIcons from "./mainIcons";
@@ -28,14 +29,21 @@ const TRANSLATIONS = {
 };
 APP.use(AI18nPlugin, TRANSLATIONS, "de");
 APP.use(AIconPlugin, mainIcons);
+APP.use(AMobilePlugin, {
+  breakpoint: 991,
+});
 APP.use(AModalPlugin, {
   propsDefault: {
     closeButtonClass: "a_btn a_btn_link",
   },
 });
-// APP.use(alohaPlugin, {
-//   framework: "bootstrap",
-// });
+APP.use(AGroupButtonDropdownPlugin, {
+  propsDefault: {
+    dropdownAttributes: {
+      buttonText: "Weitere Aktionen",
+    },
+  },
+});
 APP.config.unwrapInjectedRef = true;
 APP.directive("SafeHtml", ASafeHtml);
 APP.use(store).use(router).mount("#app");

package/docs/src/router/index.js

@@ -149,6 +149,11 @@ const ROUTES = [
     name: "PageWizard",
     component: () => import(/* webpackChunkName: "PageWizard" */ "../views/PageWizard/PageWizard.vue"),
   },
+  {
+    path: "/group-button-dropdown",
+    name: "PageGroupButtonDropdown",
+    component: () => import(/* webpackChunkName: "PageGroupButtonDropdown" */ "../views/PageGroupButtonDropdown/PageGroupButtonDropdown.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

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

@@ -31,15 +31,13 @@ div
     button-class="a_btn a_btn_primary"
     :is-render-default="true"
     :actions="dropdownActions"
+    button-text="Weitere Aktionen"
   )
-    template(
-      v-slot:button
-    )
-      span Weitere Aktionen
 
   a-dropdown.ml_3(
     button-class="a_btn a_btn_primary"
     :is-render-default="true"
+
   )
     template(
       v-slot:button

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdown.js

@@ -0,0 +1,52 @@
+import AGroupButtonDropdown from "../../../../src/AGroupButtonDropdown/AGroupButtonDropdown";
+
+export default {
+  name: "PageGroupButtonDropdown",
+  components: {
+    AGroupButtonDropdown,
+  },
+  setup() {
+    const actions = [
+      {
+        text: "Actions 0",
+        type: "button",
+        callback: () => {},
+        isHidden: true,
+      },
+      {
+        text: "Actions 1",
+        type: "button",
+        callback: () => {},
+        disabled: false,
+      },
+      {
+        type: "divider",
+      },
+      {
+        type: "divider",
+      },
+      {
+        text: "Actions 2",
+        type: "button",
+        callback: () => {},
+      },
+      {
+        type: "link",
+        text: "Link 1",
+        href: "#",
+      },
+      {
+        type: "divider",
+      },
+      {
+        type: "link",
+        text: "Link 2",
+        href: "#",
+      },
+    ];
+
+    return {
+      actions,
+    };
+  },
+};

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdown.pug

@@ -0,0 +1,8 @@
+div
+  h1 AGroupButtonDropdown
+
+  a-group-button-dropdown(
+    :actions="actions"
+    :index-first-dropdown-action="2"
+  )
+

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdown.vue

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

package/docs/src/views/PageModal/PageModal.js

@@ -1,3 +1,4 @@
+import AButton from "../../../../src/AButton/AButton";
 import AModal from "../../../../src/AModal/AModal";
 
 import AConfirmAPI from "../../../../src/compositionAPI/AConfirmAPI";
@@ -5,6 +6,7 @@ import AConfirmAPI from "../../../../src/compositionAPI/AConfirmAPI";
 export default {
   name: "PageModal",
   components: {
+    AButton,
     AModal,
   },
   setup() {

package/docs/src/views/PageModal/PageModal.pug

@@ -1,10 +1,13 @@
 div
   h1 AModal
-  button.a_btn.a_btn_primary(
+  a-button.a_btn.a_btn_primary(
     id="btn_modal"
     type="button"
+    text="Open Modal"
+    icon="Cog"
+    :loading="true"
     @click="openModal"
-  ) Open Modal
+  )
 
   a-modal(
     v-if="isModalOpen"

package/package.json

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

package/src/AButton/AButton.js

@@ -250,6 +250,7 @@ export default {
           this.loadingClass,
         ],
       }),
+      this.$slots.buttonAppend && this.$slots.buttonAppend(),
     ]);
   },
 };

package/src/ADropdown/ADropdown.js

@@ -1,8 +1,10 @@
 import {
-  h, onBeforeUnmount,
+  h,
+  onBeforeUnmount,
   Teleport,
 } from "vue";
 
+import AButton from "../AButton/AButton";
 import ADropdownAction from "./ADropdownAction/ADropdownAction";
 import AIcon from "../AIcon/AIcon";
 import ATranslation from "../ATranslation/ATranslation";
@@ -22,6 +24,7 @@ import {
 
 export default {
   name: "ADropdown",
+  inheritAttrs: false,
   components: {
     ATranslation,
   },
@@ -41,6 +44,26 @@ export default {
       required: false,
       default: () => ({}),
     },
+    buttonText: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    buttonTextScreenReader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    buttonTextAriaHidden: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    buttonTextClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     buttonClass: {
       type: [String, Object],
       required: false,
@@ -51,6 +74,76 @@ export default {
       required: false,
       default: "button",
     },
+    buttonTitle: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    buttonIsTitleHtml: {
+      type: Boolean,
+      required: false,
+    },
+    buttonTitlePlacement: {
+      type: String,
+      required: false,
+      default: "top",
+      validator: value => ["top", "left", "bottom", "right"].indexOf(value) !== -1,
+    },
+    buttonLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    buttonLoadingClass: {
+      type: [String, Object],
+      required: false,
+      default: "a_spinner_small",
+    },
+    buttonLoadingAlign: {
+      type: String,
+      required: false,
+      default: "right",
+      validator: value => ["right", "left"].indexOf(value) !== -1,
+    },
+    buttonIcon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    buttonIconAlign: {
+      type: String,
+      required: false,
+      default: "left",
+      validator: value => ["right", "left"].indexOf(value) !== -1,
+    },
+    buttonIconClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    buttonIconAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    buttonIconTag: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    buttonPrevent: {
+      type: Boolean,
+      required: false,
+    },
+    buttonStop: {
+      type: Boolean,
+      required: false,
+    },
+    extraTranslate: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
     classForTooltipInner: {
       type: [String, Object],
       required: false,
@@ -161,6 +254,8 @@ export default {
     });
 
     const {
+      idLocal,
+      buttonAttributesDisabled,
       buttonAttributesLocal,
       dropdownAttributesLocal,
       isMenuRendered,
@@ -183,13 +278,18 @@ export default {
 
     return {
       actionsFiltered,
+      buttonAttributesDisabled,
       buttonAttributesLocal,
       buttonWidth,
       dropdownAttributesLocal,
       dropdownButtonRef,
       dropdownRef,
       hasActions,
+      idLocal,
       isMenuRendered,
+      onToggle,
+      onKeydown,
+      statusExpanded,
     };
   },
   render() {
@@ -198,39 +298,65 @@ export default {
       !this.$slots.dropdown) {
       return "";
     }
-    return h(
-      this.tag,
-      {
-        class: "a_dropdown",
-      },
-      [
-        h(this.buttonTag, this.buttonAttributesLocal, [
-          this.$slots.button && this.$slots.button(),
-          this.isCaret && h(AIcon, {
+    return [
+      h(AButton, {
+        ref: "dropdownButtonRef",
+        ...this.$attrs,
+        id: this.idLocal,
+        tag: this.buttonTag,
+        class: this.buttonClass,
+        text: this.buttonText,
+        textScreenReader: this.buttonTextScreenReader,
+        textAriaHidden: this.buttonTextAriaHidden,
+        textClass: this.buttonTextClass,
+        title: this.buttonTitle,
+        isTitleHtml: this.buttonIsTitleHtml,
+        titlePlacement: this.buttonTitlePlacement,
+        loading: this.buttonLoading,
+        loadingClass: this.buttonLoadingClass,
+        loadingAlign: this.buttonLoadingAlign,
+        icon: this.buttonIcon,
+        iconAlign: this.buttonIconAlign,
+        iconClass: this.buttonIconClass,
+        iconAttributes: this.buttonIconAttributes,
+        iconTag: this.buttonIconTag,
+        prevent: this.buttonPrevent,
+        stop: this.buttonStop,
+        extraTranslate: this.extraTranslate,
+        attributes: this.buttonAttributesLocal,
+        ...this.buttonAttributesDisabled,
+        onClick: this.onToggle,
+        onKeydown: this.onKeydown,
+      }, {
+        default: () => {
+          return this.$slots.button && this.$slots.button();
+        },
+        buttonAppend: () => {
+          return this.isCaret && h(AIcon, {
             class: "a_dropdown__caret",
             icon: "ChevronDown",
-          }),
-        ]),
-        h(Teleport, {
-          to: "body",
-        }, [
-          this.isMenuRendered && h("div", null, [
-            h(
-              this.dropdownTag,
-              this.dropdownAttributesLocal,
-              [
-                this.$slots.dropdown && this.$slots.dropdown(),
-                this.hasActions && this.actionsFiltered.map((action, actionIndex) => {
-                  return h(ADropdownAction, {
-                    key: actionIndex,
-                    action,
-                  }, this.$slots);
-                }),
-              ],
-            ),
-          ]),
+          });
+        },
+      }),
+      h(Teleport, {
+        to: "body",
+      }, [
+        this.isMenuRendered && h("div", null, [
+          h(
+            this.dropdownTag,
+            this.dropdownAttributesLocal,
+            [
+              this.$slots.dropdown && this.$slots.dropdown(),
+              this.hasActions && this.actionsFiltered.map((action, actionIndex) => {
+                return h(ADropdownAction, {
+                  key: actionIndex,
+                  action,
+                }, this.$slots);
+              }),
+            ],
+          ),
         ]),
-      ],
-    );
+      ]),
+    ];
   },
 };

package/src/ADropdown/compositionAPI/ActionsAPI.js

@@ -4,33 +4,16 @@ import {
 } from "vue";
 
 import {
-  filter,
-  forEach,
-  last,
-} from "lodash-es";
+  filterActionsHiddenAndDivider,
+} from "../../utils/actions";
 
 export default function ActionsAPI(props) {
   const actions = toRef(props, "actions");
 
   const actionsFiltered = computed(() => {
-    const ACTIONS_FILTERED = filter(actions.value, action => {
-      return !action.isHidden;
+    return filterActionsHiddenAndDivider({
+      actions: actions.value,
     });
-
-    const ACTIONS_DIVIDER_FILTERED = [];
-    forEach(ACTIONS_FILTERED, action => {
-      if (action.type !== "divider" ||
-        (ACTIONS_DIVIDER_FILTERED.length > 0 &&
-          last(ACTIONS_DIVIDER_FILTERED).type !== "divider")) {
-        ACTIONS_DIVIDER_FILTERED.push(action);
-      }
-    });
-    const LAST_ACTION = last(ACTIONS_DIVIDER_FILTERED);
-    if (LAST_ACTION && LAST_ACTION.type === "divider") {
-      ACTIONS_DIVIDER_FILTERED.pop();
-    }
-
-    return ACTIONS_DIVIDER_FILTERED;
   });
 
   const hasActions = computed(() => {

package/src/ADropdown/compositionAPI/AttributesAPI.js

@@ -10,11 +10,8 @@ import {
 
 export default function AttributesAPI(props, {
   statusExpanded = ref(false),
-  onToggle = () => {},
-  onKeydown = () => {},
 }) {
   const buttonAttributes = toRef(props, "buttonAttributes");
-  const buttonClass = toRef(props, "buttonClass");
   const buttonTag = toRef(props, "buttonTag");
   const disabled = toRef(props, "disabled");
   const dropdownAttributes = toRef(props, "dropdownAttributes");
@@ -29,27 +26,25 @@ export default function AttributesAPI(props, {
 
   const buttonAttributesLocal = computed(() => {
     const BUTTON_ATTRIBUTES = cloneDeep(buttonAttributes.value);
-    BUTTON_ATTRIBUTES.id = idLocal.value;
-    BUTTON_ATTRIBUTES.ref = "dropdownButtonRef";
     BUTTON_ATTRIBUTES["aria-haspopup"] = "true";
     BUTTON_ATTRIBUTES["aria-expanded"] = statusExpanded.value;
-    if (buttonClass.value) {
-      BUTTON_ATTRIBUTES.class = buttonClass.value;
-    }
-    BUTTON_ATTRIBUTES.onClick = onToggle;
-    BUTTON_ATTRIBUTES.onKeydown = onKeydown;
 
     if (buttonTag.value === "button") {
       BUTTON_ATTRIBUTES.type = BUTTON_ATTRIBUTES.type || "button";
     }
+    return BUTTON_ATTRIBUTES;
+  });
+
+  const buttonAttributesDisabled = computed(() => {
+    const ATTRIBUTES = {};
     if (disabled.value) {
       if (buttonTag.value === "button") {
-        BUTTON_ATTRIBUTES.disabled = true;
+        ATTRIBUTES.disabled = true;
       } else if (buttonTag.value === "a") {
-        BUTTON_ATTRIBUTES["aria-disabled"] = "true";
+        ATTRIBUTES.ariaDisabled = true;
       }
     }
-    return BUTTON_ATTRIBUTES;
+    return ATTRIBUTES;
   });
 
   const dropdownAttributesLocal = computed(() => {
@@ -70,6 +65,8 @@ export default function AttributesAPI(props, {
   });
 
   return {
+    idLocal,
+    buttonAttributesDisabled,
     buttonAttributesLocal,
     dropdownAttributesLocal,
     isMenuRendered,

package/src/ADropdown/compositionAPI/PopoverAPI.js

@@ -17,7 +17,7 @@ export default function PopoverAPI(props, {
   const openPopoverWithPopperjs = () => {
     if (!popper.value) {
       popper.value = createPopper(
-        dropdownButtonRef.value,
+        dropdownButtonRef.value.$el,
         dropdownRef.value,
         {
           placement: placement.value,

package/src/AGroupButtonDropdown/AGroupButtonDropdown.js

@@ -0,0 +1,85 @@
+import {
+  h,
+} from "vue";
+
+import AGroupButtonDropdownItem from "./AGroupButtonDropdownItem/AGroupButtonDropdownItem";
+
+import ActionsAPI from "./compositionAPI/ActionsAPI";
+import {
+  groupButtonDropdownPluginOptions,
+} from "../plugins/AGroupButtonDropdownPlugin";
+
+export default {
+  name: "AGroupButtonDropdown",
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    actionsClasses: {
+      type: Array,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.actionsClasses,
+    },
+    dropdownAttributes: {
+      type: Object,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.dropdownAttributes,
+    },
+    hasDividerBeforeDropdown: {
+      type: Boolean,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.hasDividerBeforeDropdown,
+    },
+    indexFirstDropdownAction: {
+      type: Number,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.indexFirstDropdownAction,
+      validator: value => value > -1,
+    },
+    indexFirstDropdownActionMobile: {
+      type: Number,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.indexFirstDropdownActionMobile,
+      validator: value => value > -1,
+    },
+    minDropdownActions: {
+      type: Number,
+      required: false,
+      default: () => groupButtonDropdownPluginOptions.value.propsDefault.minDropdownActions,
+    },
+  },
+  setup(props) {
+    const {
+      actionsAllFiltered,
+      actionsGrouped,
+      hasDropdownActions,
+    } = ActionsAPI(props);
+
+    return {
+      actionsAllFiltered,
+      actionsGrouped,
+      hasDropdownActions,
+    };
+  },
+  render() {
+    if (this.actionsAllFiltered.length) {
+      return h("div", {
+        class: "aloha_group_btn_dropdown",
+      }, [
+        ...this.actionsGrouped.buttons.map((item, itemIndex) => {
+          return h(AGroupButtonDropdownItem, {
+            data: item,
+            actionsDropdown: this.actionsGrouped.dropdown,
+            hasDropdownActions: this.hasDropdownActions,
+            dropdownAttributes: this.dropdownAttributes,
+            actionsClasses: this.actionsClasses,
+            isLast: itemIndex === this.actionsGrouped.buttons.length - 1,
+            hasDividerBeforeDropdown: this.hasDividerBeforeDropdown,
+          }, this.$slots);
+        }),
+      ]);
+    }
+  },
+};

package/src/AGroupButtonDropdown/AGroupButtonDropdownItem/AGroupButtonDropdownItem.js

@@ -0,0 +1,91 @@
+import {
+  h,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import ADropdown from "../../ADropdown/ADropdown";
+import ALink from "../../ALink/ALink";
+
+import DropdownAPI from "./compositionAPI/DropdownAPI";
+
+export default {
+  name: "AGroupButtonDropdownItem",
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    actionsDropdown: {
+      type: Array,
+      required: true,
+    },
+    hasDropdownActions: {
+      type: Boolean,
+      required: true,
+    },
+    dropdownAttributes: {
+      type: Object,
+      required: true,
+    },
+    isLast: {
+      type: Boolean,
+      required: true,
+    },
+    actionsClasses: {
+      type: Array,
+      required: true,
+    },
+    hasDividerBeforeDropdown: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup(props) {
+    const {
+      isDropdownActionsAfterGroup,
+      isDropdownActionsInGroup,
+    } = DropdownAPI(props);
+
+    return {
+      isDropdownActionsAfterGroup,
+      isDropdownActionsInGroup,
+    };
+  },
+  render() {
+    return [
+      h("div", {
+        class: "a_btn_group",
+      }, [
+        ...this.data.children.map(action => {
+          if (action.type === "button") {
+            return h(AButton, {
+              class: this.actionsClasses[action.actionNotDividerIndex],
+              ...action,
+              onClick: action.callback,
+            });
+          }
+          if (action.type === "link") {
+            return h(ALink, action);
+          }
+          if (action.type === "template" &&
+            action.slotName &&
+            this.$slots[action.slotName]) {
+            return this.$slots[action.slotName]({
+              action: action,
+            });
+          }
+        }),
+        this.isDropdownActionsInGroup && h(ADropdown, {
+          isHideWithoutActionAndSlot: true,
+          actions: this.actionsDropdown,
+          ...this.dropdownAttributes,
+        }, this.$slots),
+      ]),
+      this.isDropdownActionsAfterGroup && h(ADropdown, {
+        isHideWithoutActionAndSlot: true,
+        actions: this.actionsDropdown,
+        ...this.dropdownAttributes,
+      }, this.$slots),
+    ];
+  },
+};

package/src/AGroupButtonDropdown/AGroupButtonDropdownItem/compositionAPI/DropdownAPI.js

@@ -0,0 +1,27 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function DropdownAPI(props) {
+  const isLast = toRef(props, "isLast");
+  const hasDropdownActions = toRef(props, "hasDropdownActions");
+  const hasDividerBeforeDropdown = toRef(props, "hasDividerBeforeDropdown");
+
+  const isDropdownActionsVisible = computed(() => {
+    return isLast.value && hasDropdownActions.value;
+  });
+
+  const isDropdownActionsInGroup = computed(() => {
+    return isDropdownActionsVisible.value && !hasDividerBeforeDropdown.value;
+  });
+
+  const isDropdownActionsAfterGroup = computed(() => {
+    return isDropdownActionsVisible.value && hasDividerBeforeDropdown.value;
+  });
+
+  return {
+    isDropdownActionsAfterGroup,
+    isDropdownActionsInGroup,
+  };
+}

package/src/AGroupButtonDropdown/compositionAPI/ActionsAPI.js

@@ -0,0 +1,106 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import AMobileAPI from "../../compositionAPI/AMobileAPI";
+
+import {
+  filterActionsHiddenAndDivider,
+} from "../../utils/actions";
+import {
+  cloneDeep,
+  forEach, last,
+} from "lodash-es";
+
+export default function ActionsAPI(props) {
+  const actions = toRef(props, "actions");
+  const indexFirstDropdownAction = toRef(props, "indexFirstDropdownAction");
+  const indexFirstDropdownActionMobile = toRef(props, "indexFirstDropdownActionMobile");
+  const minDropdownActions = toRef(props, "minDropdownActions");
+
+  const {
+    isMobile,
+  } = AMobileAPI();
+
+  const actionsAllFiltered = computed(() => {
+    return filterActionsHiddenAndDivider({
+      actions: actions.value,
+    });
+  });
+
+  const currentIndexFirstDropdownAction = computed(() => {
+    return isMobile.value ? indexFirstDropdownActionMobile.value : indexFirstDropdownAction.value;
+  });
+
+  const hasMoreEqualActionsThenParameter = ({ actions = [], minCountActions = 0 }) => {
+    let countActions = 0;
+    forEach(actions, action => {
+      if (countActions >= minCountActions) {
+        return false;
+      }
+      if (action.type !== "divider") {
+        countActions++;
+      }
+    });
+
+    return countActions >= minCountActions;
+  };
+
+  const actionsGrouped = computed(() => {
+    const ACTIONS_ALL = cloneDeep(actionsAllFiltered.value);
+
+    const ACTIONS_GROUPED = {
+      buttons: [],
+      dropdown: [],
+    };
+    let actionNotDividerIndex = 0;
+    let isPreviousActionDivider = true;
+    forEach(ACTIONS_ALL, (action, actionIndex) => {
+      if (actionNotDividerIndex === currentIndexFirstDropdownAction.value) {
+        const ACTION_DROPDOWN = ACTIONS_ALL.slice(actionIndex, ACTIONS_ALL.length);
+
+        if (hasMoreEqualActionsThenParameter({
+          actions: ACTION_DROPDOWN,
+          minCountActions: minDropdownActions.value,
+        })) {
+          ACTIONS_GROUPED.dropdown = ACTIONS_ALL.splice(actionIndex, ACTIONS_ALL.length);
+          if (currentIndexFirstDropdownAction.value === 0) {
+            ACTIONS_GROUPED.buttons.push({
+              type: "group",
+              children: [],
+            });
+          }
+          return false;
+        }
+      }
+
+      if (action.type !== "divider") {
+        action.actionNotDividerIndex = actionNotDividerIndex;
+        actionNotDividerIndex++;
+        if (isPreviousActionDivider) {
+          ACTIONS_GROUPED.buttons.push({
+            type: "group",
+            children: [action],
+          });
+        } else {
+          last(ACTIONS_GROUPED.buttons).children.push(action);
+        }
+      } else {
+        isPreviousActionDivider = true;
+      }
+    });
+
+    return ACTIONS_GROUPED;
+  });
+
+  const hasDropdownActions = computed(() => {
+    return actionsGrouped.value.dropdown.length > 0;
+  });
+
+  return {
+    actionsAllFiltered,
+    actionsGrouped,
+    hasDropdownActions,
+  };
+}

package/src/compositionAPI/AMobileAPI.js

@@ -0,0 +1,16 @@
+import {
+  ref,
+} from "vue";
+
+export const isMobile = ref(undefined);
+
+export function setIsMobile(isMobileLocal) {
+  isMobile.value = isMobileLocal;
+}
+
+export default function AMobileAPI() {
+  return {
+    isMobile,
+    setIsMobile,
+  };
+}

package/src/plugins/AGroupButtonDropdownPlugin.js

@@ -0,0 +1,24 @@
+import {
+  ref,
+} from "vue";
+
+export const groupButtonDropdownPluginOptions = ref({
+  propsDefault: {
+    actionsClasses: ["a_btn a_btn_primary", "a_btn a_btn_secondary"],
+    dropdownAttributes: {},
+    hasDividerBeforeDropdown: true,
+    indexFirstDropdownAction: 1,
+    indexFirstDropdownActionMobile: 0,
+    minDropdownActions: 2,
+  },
+});
+export default {
+  install: (app, {
+    propsDefault = {},
+  } = {}) => {
+    groupButtonDropdownPluginOptions.value.propsDefault = {
+      ...groupButtonDropdownPluginOptions.value.propsDefault,
+      ...propsDefault,
+    };
+  },
+};

package/src/plugins/AMobilePlugin.js

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

package/src/styles/components/AButton.scss

@@ -1,11 +1,6 @@
 .aloha_btn {
   position: relative;
-}
-.aloha_btn__spinner_left,
-.aloha_btn__icon_left {
-  margin-right: .5rem;
-}
-.aloha_btn__spinner_right,
-.aloha_btn__icon_right {
-  margin-left: .5rem;
+  & > * + * {
+    margin-left: .5rem;
+  }
 }

package/src/styles/components/AGroupButtonDropdown.scss

@@ -0,0 +1,5 @@
+.aloha_group_btn_dropdown {
+  & > * + * {
+    margin-left: .5rem;
+  }
+}

package/src/styles/components/ALink.scss

@@ -1,11 +1,6 @@
 .aloha_link {
   position: relative;
-}
-.aloha_link__spinner_left,
-.aloha_link__icon_left {
-  margin-right: .5rem;
-}
-.aloha_link__spinner_right,
-.aloha_link__icon_right {
-  margin-left: .5rem;
+  & > * + * {
+    margin-left: .5rem;
+  }
 }

package/src/styles/styles.scss

@@ -19,3 +19,11 @@
 @import "components/AButton";
 @import "components/ALink";
 @import "components/AWizard";
+@import "components/AGroupButtonDropdown";
+
+.a_dropdown__caret {
+  margin: 0;
+}
+* + .a_dropdown__caret {
+  margin-left: 0.5rem;
+}

package/src/utils/actions.js

@@ -0,0 +1,43 @@
+import {
+  filter,
+  forEach,
+  last,
+} from "lodash-es";
+
+export function filterActionsHiddenAndDivider({ actions }) {
+  const ACTIONS_FILTERED = filter(actions, action => {
+    return !action.isHidden;
+  });
+
+  const ACTIONS_DIVIDER_FILTERED = [];
+  forEach(ACTIONS_FILTERED, action => {
+    if (action.type !== "divider" ||
+        (ACTIONS_DIVIDER_FILTERED.length > 0 &&
+          last(ACTIONS_DIVIDER_FILTERED).type !== "divider")) {
+      ACTIONS_DIVIDER_FILTERED.push(action);
+    }
+  });
+  const LAST_ACTION = last(ACTIONS_DIVIDER_FILTERED);
+  if (LAST_ACTION && LAST_ACTION.type === "divider") {
+    ACTIONS_DIVIDER_FILTERED.pop();
+  }
+
+  return ACTIONS_DIVIDER_FILTERED;
+}
+
+export function filterActionsDivider({ actions }) {
+  const ACTIONS_DIVIDER_FILTERED = [];
+  forEach(actions, action => {
+    if (action.type !== "divider" ||
+      (ACTIONS_DIVIDER_FILTERED.length > 0 &&
+        last(ACTIONS_DIVIDER_FILTERED).type !== "divider")) {
+      ACTIONS_DIVIDER_FILTERED.push(action);
+    }
+  });
+  const LAST_ACTION = last(ACTIONS_DIVIDER_FILTERED);
+  if (LAST_ACTION && LAST_ACTION.type === "divider") {
+    ACTIONS_DIVIDER_FILTERED.pop();
+  }
+
+  return ACTIONS_DIVIDER_FILTERED;
+}