aloha-vue 1.0.233 → 1.0.235

package/docs/src/views/PageDropdown/PageDropdown.js

@@ -6,8 +6,42 @@ export default {
     ADropdown,
   },
   setup() {
-    return {
+    const dropdownActions = [
+      {
+        text: "Actions 0",
+        type: "button",
+        callback: () => {},
+        isHidden: true,
+      },
+      {
+        text: "Actions 1",
+        type: "button",
+        callback: () => {},
+        disabled: true,
+      },
+      {
+        type: "divider",
+      },
+      {
+        type: "divider",
+      },
+      {
+        text: "Actions 2",
+        type: "button",
+        callback: () => {},
+      },
+      {
+        type: "link",
+        text: "Link 1",
+        href: "#",
+      },
+      {
+        type: "divider",
+      },
+    ];
 
+    return {
+      dropdownActions,
     };
   },
 };

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

@@ -27,4 +27,22 @@ div
           href="#"
         ) Item 3
 
-  button.a_btn.a_btn_primary.a_ml_2 Test
+  a-dropdown.ml_3(
+    button-class="a_btn a_btn_primary"
+    :is-render-default="true"
+    :actions="dropdownActions"
+  )
+    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
+    )
+      span Weitere Aktionen2
+

package/package.json

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

package/src/AButton/AButton.js

@@ -18,12 +18,23 @@ import {
 
 export default {
   name: "AButton",
+  inheritAttrs: false,
   props: {
     id: {
       type: String,
       required: false,
       default: () => uniqueId("a_btn_"),
     },
+    class: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    attributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
     type: {
       type: String,
       required: false,
@@ -171,9 +182,11 @@ export default {
   },
   render() {
     return h("button", {
+      ...this.attributes,
       id: this.id,
       class: [
         "aloha_btn",
+        this.class,
         {
           disabled: this.ariaDisabled,
         },

package/src/ADropdown/ADropdown.js

@@ -1,23 +1,24 @@
 import {
-  h,
+  h, onBeforeUnmount,
   Teleport,
 } from "vue";
 
+import ADropdownAction from "./ADropdownAction/ADropdownAction";
 import AIcon from "../AIcon/AIcon";
 import ATranslation from "../ATranslation/ATranslation";
 
-import AKeysCode from "../const/AKeysCode";
+import ActionsAPI from "./compositionAPI/ActionsAPI";
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import FocusAPI from "./compositionAPI/FocusAPI";
+import PopoverAPI from "./compositionAPI/PopoverAPI";
+import RefsAPI from "./compositionAPI/RefsAPI";
+import ToggleAPI from "./compositionAPI/ToggleAPI";
+
 import placements from "../const/placements";
 import {
-  createPopper,
-} from "@popperjs/core";
-import {
-  cloneDeep,
-  forEach,
   uniqueId,
 } from "lodash-es";
 
-const ELEMENTS_FOR_ARROWS = `button:not([disabled]), input:not([disabled]), a`;
 
 export default {
   name: "ADropdown",
@@ -25,32 +26,41 @@ export default {
     ATranslation,
   },
   props: {
-    id: {
-      type: String,
+    actions: {
+      type: Array,
       required: false,
-      default: () => uniqueId("a_dropdown_btn_"),
+      default: () => [],
     },
-    tag: {
-      type: String,
+    isHideWithoutActionAndSlot: {
+      type: Boolean,
       required: false,
-      default: "div",
+      default: true,
     },
-    buttonTag: {
-      type: String,
+    buttonAttributes: {
+      type: Object,
       required: false,
-      default: "button",
+      default: () => ({}),
     },
     buttonClass: {
-      type: String,
+      type: [String, Object],
       required: false,
       default: "a_btn a_btn_secondary dropdown_button",
     },
-    buttonStyle: {
+    buttonTag: {
+      type: String,
+      required: false,
+      default: "button",
+    },
+    classForTooltipInner: {
       type: [String, Object],
       required: false,
-      default: undefined,
+      default: "a_position_relative p-0 font_family_inherit",
     },
-    buttonAttributes: {
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    dropdownAttributes: {
       type: Object,
       required: false,
       default: () => ({}),
@@ -65,34 +75,20 @@ export default {
       required: false,
       default: "ul",
     },
-    dropdownAttributes: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    inBody: {
-      type: Boolean,
+    elementsForArrows: {
+      type: String,
       required: false,
+      default: "button:not([disabled]), input:not([disabled]), a",
     },
-    disabled: {
-      type: Boolean,
+    id: {
+      type: String,
       required: false,
+      default: () => uniqueId("a_dropdown_btn_"),
     },
-    isListWidthSameWithButton: {
+    inBody: {
       type: Boolean,
       required: false,
     },
-    classForTooltipInner: {
-      type: [String, Object],
-      required: false,
-      default: "a_position_relative p-0 font_family_inherit",
-    },
-    placement: {
-      type: String,
-      required: false,
-      default: "bottom-start",
-      validator: placement => placements.indexOf(placement) !== -1,
-    },
     isCaret: {
       type: Boolean,
       required: false,
@@ -103,263 +99,105 @@ export default {
       required: false,
       default: true,
     },
-    menuWidth: {
-      type: Number,
+    isListWidthSameWithButton: {
+      type: Boolean,
       required: false,
-      default: undefined,
     },
     isRenderDefault: {
       type: Boolean,
       required: false,
       default: false,
     },
-  },
-  data() {
-    return {
-      statusExpanded: false,
-      statusEventPressArrows: false,
-      buttonWidth: undefined,
-      popper: undefined,
-    };
-  },
-  computed: {
-    ariaExpanded() {
-      return `${ this.statusExpanded }`;
-    },
-
-    idForPopover() {
-      return `${ this.htmlId }_popover`;
-    },
-
-    idLocal() {
-      return this.buttonAttributes.id || this.id;
-    },
-
-    buttonAttributesLocal() {
-      const BUTTON_ATTRIBUTES = cloneDeep(this.buttonAttributes);
-      BUTTON_ATTRIBUTES.id = this.idLocal;
-      BUTTON_ATTRIBUTES.ref = "dropdown_button";
-      BUTTON_ATTRIBUTES["aria-haspopup"] = "true";
-      BUTTON_ATTRIBUTES["aria-expanded"] = this.ariaExpanded;
-      if (this.buttonClass) {
-        BUTTON_ATTRIBUTES.class = this.buttonClass;
-      }
-      if (this.buttonStyle) {
-        BUTTON_ATTRIBUTES.style = this.buttonStyle;
-      }
-      BUTTON_ATTRIBUTES.onClick = this.onToggle;
-      BUTTON_ATTRIBUTES.onKeydown = this.onKeydown;
-
-      if (this.buttonTag === "button") {
-        BUTTON_ATTRIBUTES.type = BUTTON_ATTRIBUTES.type || "button";
-      }
-      if (this.disabled) {
-        if (this.buttonTag === "button") {
-          BUTTON_ATTRIBUTES.disabled = true;
-        } else if (this.buttonTag === "a") {
-          BUTTON_ATTRIBUTES["aria-disabled"] = "true";
-        }
-      }
-      return BUTTON_ATTRIBUTES;
-    },
-
-    stylesForTooltipInner() {
-      if (this.buttonWidth) {
-        return `min-width: ${ this.buttonWidth }px; max-width: ${ this.buttonWidth }px;`;
-      }
-      return "";
+    menuWidth: {
+      type: Number,
+      required: false,
+      default: undefined,
     },
-
-    dropdownAttributesLocal() {
-      const DROPDOWN_ATTRIBUTES = cloneDeep(this.dropdownAttributes);
-      DROPDOWN_ATTRIBUTES.ref = "dropdown";
-      DROPDOWN_ATTRIBUTES["aria-labelledby"] = this.idLocal;
-      DROPDOWN_ATTRIBUTES.class = ["a_dropdown__menu", this.dropdownClass, {
-        a_dropdown__menu_show: this.statusExpanded,
-      }];
-      if (this.menuWidth) {
-        DROPDOWN_ATTRIBUTES.style = `width: ${ this.menuWidth }px`;
-      }
-      return DROPDOWN_ATTRIBUTES;
+    placement: {
+      type: String,
+      required: false,
+      default: "bottom-start",
+      validator: placement => placements.indexOf(placement) !== -1,
     },
-
-    isMenuRendered() {
-      return this.isRenderDefault || this.statusExpanded;
+    tag: {
+      type: String,
+      required: false,
+      default: "div",
     },
   },
-  beforeUnmount() {
-    this.destroyEventCloseClick();
-    this.destroyEventPressArrows();
-    this.destroyPopover();
-  },
-  methods: {
-    onKeydown($event) {
-      if ($event.keyCode === AKeysCode.enter ||
-        $event.keyCode === AKeysCode.space ||
-        $event.keyCode === AKeysCode.arrowUp ||
-        $event.keyCode === AKeysCode.arrowDown) {
-        this.onToggle();
-        $event.stopPropagation();
-        $event.preventDefault();
-      }
-    },
+  setup(props) {
+    const {
+      dropdownButtonRef,
+      dropdownRef,
+    } = RefsAPI();
+
+    const {
+      setFocusToFirstElement,
+    } = FocusAPI(props, {
+      dropdownRef,
+    });
+
+    const {
+      destroyPopover,
+      openPopoverWithPopperjs,
+    } = PopoverAPI(props, {
+      dropdownButtonRef,
+      dropdownRef,
+    });
+
+    const {
+      buttonWidth,
+      destroyEventCloseClick,
+      destroyEventPressArrows,
+      onKeydown,
+      onToggle,
+      statusExpanded,
+    } = ToggleAPI(props, {
+      dropdownButtonRef,
+      dropdownRef,
+      openPopoverWithPopperjs,
+      destroyPopover,
+      setFocusToFirstElement,
+    });
+
+    const {
+      buttonAttributesLocal,
+      dropdownAttributesLocal,
+      isMenuRendered,
+    } = AttributesAPI(props, {
+      statusExpanded,
+      onToggle,
+      onKeydown,
+    });
+
+    const {
+      actionsFiltered,
+      hasActions,
+    } = ActionsAPI(props);
+
+    onBeforeUnmount(() => {
+      destroyEventCloseClick();
+      destroyEventPressArrows();
+      destroyPopover();
+    });
 
-    onToggle() {
-      if (this.disabled) {
-        return;
-      }
-      if (this.statusExpanded) {
-        this.onClose();
-      } else {
-        this.onOpen();
-      }
-    },
-
-    onOpen() {
-      this.setButtonWidth();
-      this.initEventPressArrows();
-      setTimeout(() => {
-        this.openPopoverWithPopperjs();
-        this.setEventCloseClick();
-        setTimeout(() => {
-          this.setFocusToFirstElement();
-        });
-      });
-      this.statusExpanded = true;
-    },
-
-    setButtonWidth() {
-      if (this.isListWidthSameWithButton) {
-        this.buttonWidth = this.$refs.dropdown_button.clientWidth;
-      }
-    },
-
-    setEventCloseClick() {
-      document.addEventListener("click", this.onClickEvent);
-    },
-
-    destroyEventCloseClick() {
-      document.removeEventListener("click", this.onClickEvent);
-    },
-
-    onClickEvent($event) {
-      if (this.$refs.dropdown.contains($event.target)) {
-        if (this.isCloseByClickInside) {
-          this.onClose();
-          this.setFocusToButton();
-        }
-      } else {
-        this.onClose();
-      }
-    },
-
-    onClose() {
-      this.destroyEventCloseClick();
-      this.destroyEventPressArrows();
-      this.destroyPopover();
-      this.statusExpanded = false;
-    },
-
-    initEventPressArrows() {
-      if (this.statusEventPressArrows) { // Event ist schon installiert
-        return;
-      }
-      this.statusEventPressArrows = true;
-      document.body.addEventListener("keydown", this.pressButton);
-    },
-
-    destroyEventPressArrows() {
-      if (!this.statusEventPressArrows) { // Event ist schon zestört
-        return;
-      }
-      this.statusEventPressArrows = false;
-      document.body.removeEventListener("keydown", this.pressButton);
-    },
-
-    setFocusToButton() {
-      this.$refs.dropdown_button.focus();
-    },
-
-    pressButton($event) {
-      const EVENT = $event || window.$event;
-      if (EVENT.keyCode === AKeysCode.arrowDown ||
-        EVENT.keyCode === AKeysCode.arrowUp) { // arrow down or up
-        const DOWN = EVENT.keyCode === AKeysCode.arrowDown;
-        this.pressArrows({ down: DOWN });
-        $event.preventDefault();
-        $event.stopPropagation();
-      } else if (EVENT.keyCode === AKeysCode.escape) {
-        this.onClose();
-        this.setFocusToButton();
-        $event.preventDefault();
-        $event.stopPropagation();
-      } else if (EVENT.keyCode === AKeysCode.tab) {
-        this.onClose();
-        this.setFocusToButton();
-      }
-    },
-
-    pressArrows({ down }) {
-      const ELEMENTS = this.$refs.dropdown.querySelectorAll(ELEMENTS_FOR_ARROWS);
-      if (ELEMENTS.length === 0) {
-        return;
-      }
-      forEach(ELEMENTS, (element, index) => {
-        if (element === document.activeElement) {
-          if (down) {
-            if (index < ELEMENTS.length - 1) {
-              ELEMENTS[index + 1].focus();
-            }
-          } else {
-            if (index > 0) {
-              ELEMENTS[index - 1].focus();
-            }
-          }
-          return false;
-        }
-      });
-    },
-
-    setFocusToFirstElement() {
-      if (!this.$refs.dropdown) {
-        return;
-      }
-      const ELEMENTS = this.$refs.dropdown.querySelectorAll(ELEMENTS_FOR_ARROWS);
-      if (ELEMENTS.length === 0) {
-        return;
-      }
-      ELEMENTS[0].focus();
-    },
-
-    openPopoverWithPopperjs() {
-      if (!this.popper) {
-        this.popper = createPopper(
-          this.$refs.dropdown_button,
-          this.$refs.dropdown,
-          {
-            placement: this.placement,
-            removeOnDestroy: true,
-            modifiers: [
-              {
-                name: "offset",
-                options: {
-                  offset: [0, 0],
-                },
-              },
-            ],
-          },
-        );
-      }
-    },
-
-    destroyPopover() {
-      if (this.popper) {
-        this.popper.destroy();
-        this.popper = undefined;
-      }
-    },
+    return {
+      actionsFiltered,
+      buttonAttributesLocal,
+      buttonWidth,
+      dropdownAttributesLocal,
+      dropdownButtonRef,
+      dropdownRef,
+      hasActions,
+      isMenuRendered,
+    };
   },
   render() {
+    if (this.isHideWithoutActionAndSlot &&
+      !this.hasActions && 
+      !this.$slots.dropdown) {
+      return "";
+    }
     return h(
       this.tag,
       {
@@ -382,6 +220,12 @@ export default {
               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/ADropdownAction/ADropdownAction.js

@@ -0,0 +1,55 @@
+import {
+  h,
+} from "vue";
+
+import AButton from "../../AButton/AButton";
+import ALink from "../../ALink/ALink";
+
+export default {
+  name: "ADropdownAction",
+  props: {
+    action: {
+      type: Object,
+      required: true,
+    },
+  },
+  render() {
+    if (this.action.type === "button") {
+      return h("li", {
+        class: this.action.liClass,
+      }, [
+        h(AButton, {
+          class: "a_dropdown__item",
+          ...this.action,
+          onClick: this.action.callback,
+        }),
+      ]);
+    }
+    if (this.action.type === "divider") {
+      return h("li", {
+        class: [
+          "a_dropdown__divider",
+          this.action.liClass,
+        ],
+      });
+    }
+    if (this.action.type === "link") {
+      return h("li", {
+        class: this.action.liClass,
+      }, [
+        h(ALink, {
+          class: "a_dropdown__item",
+          ...this.action,
+        })
+      ]);
+    }
+    if (this.action.type === "template" &&
+      this.action.slotName &&
+      this.$slots[this.action.slotName]) {
+      return this.$slots[this.action.slotName]({
+        action: this.action,
+      });
+    }
+    return "";
+  },
+};

package/src/ADropdown/compositionAPI/ActionsAPI.js

@@ -0,0 +1,44 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  filter,
+  forEach,
+  last,
+} from "lodash-es";
+
+export default function ActionsAPI(props) {
+  const actions = toRef(props, "actions");
+
+  const actionsFiltered = computed(() => {
+    const ACTIONS_FILTERED = filter(actions.value, 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;
+  });
+
+  const hasActions = computed(() => {
+    return actionsFiltered.value.length > 0;
+  });
+
+  return {
+    actionsFiltered,
+    hasActions,
+  };
+}

package/src/ADropdown/compositionAPI/AttributesAPI.js

@@ -0,0 +1,77 @@
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+} from "lodash-es";
+
+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");
+  const dropdownClass = toRef(props, "dropdownClass");
+  const id = toRef(props, "id");
+  const isRenderDefault = toRef(props, "isRenderDefault");
+  const menuWidth = toRef(props, "menuWidth");
+
+  const idLocal = computed(() => {
+    return buttonAttributes.value.id || id.value;
+  });
+
+  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";
+    }
+    if (disabled.value) {
+      if (buttonTag.value === "button") {
+        BUTTON_ATTRIBUTES.disabled = true;
+      } else if (buttonTag.value === "a") {
+        BUTTON_ATTRIBUTES["aria-disabled"] = "true";
+      }
+    }
+    return BUTTON_ATTRIBUTES;
+  });
+
+  const dropdownAttributesLocal = computed(() => {
+    const DROPDOWN_ATTRIBUTES = cloneDeep(dropdownAttributes.value);
+    DROPDOWN_ATTRIBUTES.ref = "dropdownRef";
+    DROPDOWN_ATTRIBUTES["aria-labelledby"] = idLocal.value;
+    DROPDOWN_ATTRIBUTES.class = ["a_dropdown__menu", dropdownClass.value, {
+      a_dropdown__menu_show: statusExpanded.value,
+    }];
+    if (menuWidth.value) {
+      DROPDOWN_ATTRIBUTES.style = `width: ${ menuWidth.value }px`;
+    }
+    return DROPDOWN_ATTRIBUTES;
+  });
+
+  const isMenuRendered = computed(() => {
+    return isRenderDefault.value || statusExpanded.value;
+  });
+
+  return {
+    buttonAttributesLocal,
+    dropdownAttributesLocal,
+    isMenuRendered,
+  };
+}

package/src/ADropdown/compositionAPI/FocusAPI.js

@@ -0,0 +1,25 @@
+import {
+  ref,
+  toRef,
+} from "vue";
+
+export default function FocusAPI(props, {
+  dropdownRef = ref(undefined),
+}) {
+  const elementsForArrows = toRef(props, "elementsForArrows");
+
+  const setFocusToFirstElement = () => {
+    if (!dropdownRef.value) {
+      return;
+    }
+    const ELEMENTS = dropdownRef.value.querySelectorAll(elementsForArrows.value);
+    if (ELEMENTS.length === 0) {
+      return;
+    }
+    ELEMENTS[0].focus();
+  };
+
+  return {
+    setFocusToFirstElement,
+  };
+}

package/src/ADropdown/compositionAPI/PopoverAPI.js

@@ -0,0 +1,49 @@
+import {
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  createPopper,
+} from "@popperjs/core";
+
+export default function PopoverAPI(props, {
+  dropdownButtonRef = ref(undefined),
+  dropdownRef = ref(undefined),
+}) {
+  const placement = toRef(props, "placement");
+
+  const popper = ref(undefined);
+  const openPopoverWithPopperjs = () => {
+    if (!popper.value) {
+      popper.value = createPopper(
+        dropdownButtonRef.value,
+        dropdownRef.value,
+        {
+          placement: placement.value,
+          removeOnDestroy: true,
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 0],
+              },
+            },
+          ],
+        },
+      );
+    }
+  };
+
+  const destroyPopover = () => {
+    if (popper.value) {
+      popper.value.destroy();
+      popper.value = undefined;
+    }
+  };
+
+  return {
+    destroyPopover,
+    openPopoverWithPopperjs,
+  };
+}

package/src/ADropdown/compositionAPI/RefsAPI.js

@@ -0,0 +1,13 @@
+import {
+  ref,
+} from "vue";
+
+export default function RefsAPI() {
+  const dropdownButtonRef = ref(undefined);
+  const dropdownRef = ref(undefined);
+
+  return {
+    dropdownButtonRef,
+    dropdownRef,
+  };
+}

package/src/ADropdown/compositionAPI/ToggleAPI.js

@@ -0,0 +1,163 @@
+import {
+  ref,
+  toRef,
+} from "vue";
+
+import AKeysCode from "../../const/AKeysCode";
+import {
+  forEach,
+} from "lodash-es";
+
+export default function ToggleAPI(props, {
+  dropdownButtonRef = ref(undefined),
+  dropdownRef = ref(undefined),
+  openPopoverWithPopperjs = () => {},
+  destroyPopover = () => {},
+  setFocusToFirstElement = () => {},
+}) {
+  const disabled = toRef(props, "disabled");
+  const isCloseByClickInside = toRef(props, "isCloseByClickInside");
+  const isListWidthSameWithButton = toRef(props, "isListWidthSameWithButton");
+  const elementsForArrows = toRef(props, "elementsForArrows");
+
+  const statusExpanded = ref(false);
+  const buttonWidth = ref(undefined);
+  const statusEventPressArrows = ref(false);
+
+  const pressArrows = ({ down }) => {
+    const ELEMENTS = dropdownRef.value.querySelectorAll(elementsForArrows.value);
+    if (ELEMENTS.length === 0) {
+      return;
+    }
+    forEach(ELEMENTS, (element, index) => {
+      if (element === document.activeElement) {
+        if (down) {
+          if (index < ELEMENTS.length - 1) {
+            ELEMENTS[index + 1].focus();
+          }
+        } else {
+          if (index > 0) {
+            ELEMENTS[index - 1].focus();
+          }
+        }
+        return false;
+      }
+    });
+  };
+
+  const setFocusToButton = () => {
+    dropdownRef.value.focus();
+  };
+
+  const pressButton = $event => {
+    const EVENT = $event || window.$event;
+    if (EVENT.keyCode === AKeysCode.arrowDown ||
+      EVENT.keyCode === AKeysCode.arrowUp) { // arrow down or up
+      const DOWN = EVENT.keyCode === AKeysCode.arrowDown;
+      pressArrows({ down: DOWN });
+      $event.preventDefault();
+      $event.stopPropagation();
+    } else if (EVENT.keyCode === AKeysCode.escape) {
+      onClose();
+      setFocusToButton();
+      $event.preventDefault();
+      $event.stopPropagation();
+    } else if (EVENT.keyCode === AKeysCode.tab) {
+      onClose();
+      setFocusToButton();
+    }
+  };
+
+  const setEventCloseClick = () => {
+    document.addEventListener("click", onClickEvent);
+  };
+
+  const destroyEventCloseClick = () => {
+    document.removeEventListener("click", onClickEvent);
+  };
+
+  const initEventPressArrows = () => {
+    if (statusEventPressArrows.value) { // Event ist schon installiert
+      return;
+    }
+    statusEventPressArrows.value = true;
+    document.body.addEventListener("keydown", pressButton);
+  };
+
+  const destroyEventPressArrows = () => {
+    if (!statusEventPressArrows.value) { // Event ist schon zestört
+      return;
+    }
+    statusEventPressArrows.value = false;
+    document.body.removeEventListener("keydown", pressButton);
+  };
+
+  const setButtonWidth = () => {
+    if (isListWidthSameWithButton.value &&
+      dropdownButtonRef.value) {
+      buttonWidth.value = dropdownButtonRef.value.clientWidth;
+    }
+  };
+
+  const onOpen = () => {
+    setButtonWidth();
+    initEventPressArrows();
+    setTimeout(() => {
+      openPopoverWithPopperjs();
+      setEventCloseClick();
+      setTimeout(() => {
+        setFocusToFirstElement();
+      });
+    });
+    statusExpanded.value = true;
+  };
+
+  const onToggle = () => {
+    if (disabled.value) {
+      return;
+    }
+    if (statusExpanded.value) {
+      onClose();
+    } else {
+      onOpen();
+    }
+  };
+
+  const onKeydown = $event => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space ||
+      $event.keyCode === AKeysCode.arrowUp ||
+      $event.keyCode === AKeysCode.arrowDown) {
+      onToggle();
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+  };
+
+  function onClose() {
+    destroyEventCloseClick();
+    destroyEventPressArrows();
+    destroyPopover();
+    statusExpanded.value = false;
+  }
+
+  function onClickEvent($event) {
+    if (dropdownRef.value.contains($event.target)) {
+      if (isCloseByClickInside.value) {
+        onClose();
+        setFocusToButton();
+      }
+    } else {
+      onClose();
+    }
+  }
+
+  return {
+    buttonWidth,
+    destroyEventCloseClick,
+    destroyEventPressArrows,
+    onKeydown,
+    onToggle,
+    statusExpanded,
+  };
+}

package/src/ALink/ALink.js

@@ -0,0 +1,261 @@
+import {
+  h,
+  resolveComponent,
+} from "vue";
+
+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";
+
+import {
+  uniqueId,
+} from "lodash-es";
+
+export default {
+  name: "ALink",
+  inheritAttrs: false,
+  props: {
+    attributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    class: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    extraTranslate: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    href: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconAlign: {
+      type: String,
+      required: false,
+      default: "left",
+      validator: value => ["right", "left"].indexOf(value) !== -1,
+    },
+    iconAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    iconClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconTag: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId("a_link_"),
+    },
+    isTitleHtml: {
+      type: Boolean,
+      required: false,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loadingAlign: {
+      type: String,
+      required: false,
+      default: "right",
+      validator: value => ["right", "left"].indexOf(value) !== -1,
+    },
+    loadingClass: {
+      type: [String, Object],
+      required: false,
+      default: "a_spinner_small",
+    },
+    target: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    text: {
+      type: [String, Number],
+      required: false,
+      default: undefined,
+    },
+    textAriaHidden: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    textClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    textScreenReader: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    titlePlacement: {
+      type: String,
+      required: false,
+      default: "top",
+      validator: value => ["top", "left", "bottom", "right"].indexOf(value) !== -1,
+    },
+    to: {
+      type: [Object, String],
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const {
+      isTitleVisible,
+    } = TitleAPI(props);
+
+    const {
+      isLoadingLeft,
+      isLoadingRight,
+    } = LoadingAPI(props);
+
+    const {
+      isIconLeft,
+      isIconRight,
+    } = IconAPI(props);
+
+    const {
+      isTextScreenReaderVisible,
+      isTextVisible,
+    } = TextAPI(props);
+
+    return {
+      isIconLeft,
+      isIconRight,
+      isLoadingLeft,
+      isLoadingRight,
+      isTextScreenReaderVisible,
+      isTextVisible,
+      isTitleVisible,
+    };
+  },
+  render() {
+    const CHILDREN = [
+      this.isTitleVisible && h("span", {
+        ariaHidden: true,
+        class: "a_position_absolute_all",
+        title: this.title,
+      }),
+      this.isLoadingLeft && h(ASpinner, {
+        class: [
+          "aloha_link__spinner_left",
+          this.loadingClass,
+        ],
+      }),
+      this.isIconLeft && h(AIcon, {
+        icon: this.icon,
+        iconTag: this.iconTag,
+        class: [
+          this.iconClass,
+          {
+            aloha_link__icon_left: this.isTextVisible || this.$slots.default,
+          },
+        ],
+        ...this.iconAttributes,
+      }),
+      this.$slots.default && this.$slots.default(),
+      this.isTextVisible && h(ATranslation, {
+        tag: "span",
+        class: this.textClass,
+        html: this.text,
+        extra: this.extraTranslate,
+        ariaHidden: this.textAriaHidden,
+      }),
+      this.isTextScreenReaderVisible && h(ATranslation, {
+        class: "a_sr_only",
+        tag: "span",
+        html: this.textScreenReader,
+        extra: this.extraTranslate,
+      }),
+      this.isIconRight && h(AIcon, {
+        icon: this.icon,
+        iconTag: this.iconTag,
+        class: [
+          "aloha_link__icon_right",
+          this.iconClass,
+          {
+            aloha_link__icon_right: this.isTextVisible || this.$slots.default,
+          },
+        ],
+        ...this.iconAttributes,
+      }),
+      this.isLoadingRight && h(ASpinner, {
+        class: [
+          "aloha_link__spinner_right",
+          this.loadingClass,
+        ],
+      }),
+    ];
+
+    if (this.href) {
+      return h("a", {
+        ...this.attributes,
+        href: this.href,
+        target: this.target,
+        id: this.id,
+        class: [
+          "aloha_link",
+          this.class,
+          {
+            inactive: this.disabled,
+          },
+        ],
+        ariaDisabled: this.disabled,
+      }, CHILDREN);
+    }
+    if (this.to) {
+      return h(resolveComponent("RouterLink"), {
+        ...this.attributes,
+        to: this.to,
+        id: this.id,
+        class: [
+          "aloha_link",
+          this.class,
+          {
+            inactive: this.disabled,
+          },
+        ],
+        ariaDisabled: this.disabled,
+      }, CHILDREN);
+    }
+  },
+};

package/src/ATable/ATableTopPanel/compositionAPI/ActionsAPI.js

@@ -65,8 +65,8 @@ export default function ActionsAPI(props, { emit }) {
         ACTIONS_DIVIDER_FILTERED.push(action);
       }
     });
-
-    if (last(ACTIONS_DIVIDER_FILTERED).isDivider) {
+    const LAST_ACTION = last(ACTIONS_DIVIDER_FILTERED);
+    if (LAST_ACTION && LAST_ACTION.isDivider) {
       ACTIONS_DIVIDER_FILTERED.pop();
     }
 

package/src/ATable/compositionAPI/RowActionsAPI.js

@@ -43,7 +43,8 @@ export default function RowActionsAPI(props) {
       }
     });
 
-    if (last(ROW_ACTIONS_DIVIDER_FILTERED).isDivider) {
+    const LAST_ACTION = last(ROW_ACTIONS_DIVIDER_FILTERED);
+    if (LAST_ACTION && LAST_ACTION.isDivider) {
       ROW_ACTIONS_DIVIDER_FILTERED.pop();
     }
 

package/src/styles/components/ALink.scss

@@ -0,0 +1,11 @@
+.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;
+}

package/src/styles/styles.scss

@@ -17,4 +17,5 @@
 @import "components/ACloak";
 @import "components/ALoading";
 @import "components/AButton";
+@import "components/ALink";
 @import "components/AWizard";