aloha-vue 1.0.52 → 1.0.53

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

@@ -106,6 +106,25 @@ export default {
           callback: this.clickMe,
         },
       ],
+      multipleActions: [
+        {
+          label: "Aloha1",
+          title: "Aloha1 Title",
+          isHidden: false,
+          callback: this.clickMe,
+          disabled: true,
+          icon: "Plus",
+          isConfirm: true,
+        },
+        {
+          label: "Aloha1 modal",
+          title: "Aloha1 Title",
+          isHidden: false,
+          callback: this.clickMeModal,
+          disabled: true,
+          icon: "Plus",
+        },
+      ],
       tableActions: [
         {
           label: "Aloha1",
@@ -180,5 +199,12 @@ export default {
     clickMe({ row, rowIndex } = {}) {
       console.log("row, rowIndex", row, rowIndex);
     },
+
+    clickMeModal({ rows, close }) {
+      console.log("rows", rows,);
+      setTimeout(() => {
+        close();
+      }, 5000);
+    },
   },
 };

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

@@ -7,6 +7,7 @@ div
     label="Example table"
     :row-actions="rowActions"
     :table-actions="tableActions"
+    :multiple-actions="multipleActions"
     preview="right"
     :is-quick-search="true"
     :is-action-column-visible="true"

package/package.json

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

package/src/ATable/ATable.js

@@ -14,7 +14,9 @@ import ATablePreviewRight from "./ATablePreviewRight/ATablePreviewRight";
 import ATableTopPanel from "./ATableTopPanel/ATableTopPanel";
 import ATableTr from "./ATableTr/ATableTr";
 
+import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
 import PreviewAPI from "./compositionAPI/PreviewAPI";
+import RowsAPI from "./compositionAPI/RowsAPI";
 import ScrollControlAPI from "./compositionAPI/ScrollControlAPI";
 
 import {
@@ -29,21 +31,12 @@ import {
   isNil,
   isPlainObject,
   keyBy,
-  orderBy,
-  startsWith,
   uniqueId,
 } from "lodash-es";
 
 
 export default {
   name: "ATable",
-  components: {
-    ATableCountProPage,
-    ATableHeader,
-    ATablePagination,
-    ATableTopPanel,
-    ATableTr,
-  },
   props: {
     id: {
       type: String,
@@ -141,6 +134,11 @@ export default {
       required: false,
       default: () => [],
     },
+    multipleActions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     isPagination: {
       type: Boolean,
       required: false,
@@ -243,6 +241,30 @@ export default {
       return MODEL_COLUMNS;
     });
 
+    const {
+      hasRows,
+      limit,
+      modelSort,
+      offset,
+      rowsLocal,
+      rowsLocalLength,
+    } = RowsAPI(props);
+
+    const {
+      areAllRowsSelected,
+      areSomeRowsSelected,
+      closeMultipleActionsActive,
+      isMultipleActionsActive,
+      selectedRows,
+      selectedRowsIndexes,
+      setEmptySelectedRowsIndexes,
+      setSelectedRowsIndexes,
+      toggleMultipleActionsActive,
+    } = MultipleActionAPI({
+      rowsLocal,
+      rowsLocalLength,
+    });
+
     const {
       aTableRef,
       changeModelIsTableWithoutScroll,
@@ -253,6 +275,7 @@ export default {
       modelIsTableWithoutScroll,
     } = ScrollControlAPI(props, context, {
       columnsOrdered,
+      isMultipleActionsActive,
       modelColumnsVisibleMapping,
     });
 
@@ -279,6 +302,7 @@ export default {
     provide("columnsScrollInvisible", columnsScrollInvisible);
     provide("hasPreview", hasPreview);
     provide("indexFirstScrollInvisibleColumn", indexFirstScrollInvisibleColumn);
+    provide("isMultipleActionsActive", isMultipleActionsActive);
     provide("modelIsTableWithoutScroll", modelIsTableWithoutScroll);
     provide("onTogglePreview", onTogglePreview);
     provide("previewRightRowIndex", previewRightRowIndex);
@@ -305,54 +329,32 @@ export default {
       previewDownRowIndexes,
       previewRightRowIndex,
       togglePreviewResize,
+
+      hasRows,
+      limit,
+      modelSort,
+      offset,
+      rowsLocal,
+      rowsLocalLength,
+
+      areAllRowsSelected,
+      areSomeRowsSelected,
+      closeMultipleActionsActive,
+      isMultipleActionsActive,
+      selectedRows,
+      selectedRowsIndexes,
+      setEmptySelectedRowsIndexes,
+      setSelectedRowsIndexes,
+      toggleMultipleActionsActive,
     };
   },
   data() {
     return {
       resolved: undefined,
       error: undefined,
-      modelSort: this.sortingStart,
-      limit: this.limitStart,
-      offset: this.offsetStart,
     };
   },
   computed: {
-    rowsLocal() {
-      return this.dataPaginated;
-    },
-
-    dataPaginated() {
-      if (this.limit && !this.isPaginationOutside && this.isPagination) {
-        const DATA_SORTED = cloneDeep(this.dataSorted);
-        const INDEX_START = this.offset;
-        const INDEX_END = INDEX_START + this.limit;
-        return DATA_SORTED.slice(INDEX_START, INDEX_END);
-      }
-      return this.dataSorted;
-    },
-
-    dataSorted() {
-      if (this.modelSort && !this.isSortingOutside) {
-        return orderBy(this.data, [this.sortOptions.model], [this.sortOptions.direction]);
-      }
-      return this.data;
-    },
-
-    sortOptions() {
-      if (this.modelSort) {
-        let directionSort = "asc";
-        let modelSort = this.modelSort;
-        if (startsWith(this.modelSort, "-")) {
-          directionSort = "desc";
-          modelSort = this.modelSort.slice(1);
-        }
-        return {
-          direction: directionSort,
-          model: modelSort,
-        };
-      }
-    },
-
     totalRowsCountLocal() {
       return this.totalRowsCount;
     },
@@ -380,10 +382,6 @@ export default {
     isDataArray() {
       return isArray(this.data);
     },
-
-    hasRows() {
-      return !!this.rowsLocal.length;
-    },
   },
   created() {
     this.initModelColumnsOrderingLocal();
@@ -417,6 +415,7 @@ export default {
       this.$emit("changeSorting", {
         modelSort: this.modelSort,
       });
+      this.setEmptySelectedRowsIndexes();
       this.closePreviewAll();
     },
 
@@ -432,6 +431,7 @@ export default {
         offset,
         limit: this.limit,
       });
+      this.setEmptySelectedRowsIndexes();
       this.closePreviewAll();
     },
 
@@ -442,6 +442,7 @@ export default {
         offset: this.offset,
         limit,
       });
+      this.setEmptySelectedRowsIndexes();
       this.closePreviewAll();
     },
 
@@ -476,20 +477,28 @@ export default {
       }],
     }, [
       h(ATableTopPanel, {
+        areSomeRowsSelected: this.areSomeRowsSelected,
+        closeMultipleActionsActive: this.closeMultipleActionsActive,
         countAllRows: this.countAllRowsLocal,
         label: this.label,
         labelTag: this.labelTag,
         tableActions: this.tableActions,
+        multipleActions: this.multipleActions,
         isQuickSearch: this.isQuickSearch,
         modelQuickSearch: this.modelQuickSearch,
+        selectedRows: this.selectedRows,
         onUpdateModelQuickSearch: this.updateModelQuickSearch,
+        onToggleMultipleActionsActive: this.toggleMultipleActionsActive,
       }, this.$slots),
       h("div", {
         class: "a_table",
         role: "table",
       }, [
         h(ATableHeader, {
+          areAllRowsSelected: this.areAllRowsSelected,
+          areSomeRowsSelected: this.areSomeRowsSelected,
           modelSort: this.modelSort,
+          onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
         }),
         h("div", {
           class: "a_table__body",
@@ -498,6 +507,8 @@ export default {
           return h(ATableTr, {
             row,
             rowIndex,
+            selectedRowsIndexes: this.selectedRowsIndexes,
+            onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
           }, {
             get: vm => [
               h(AGet, {

package/src/ATable/ATableHeader/ATableHeader.js

@@ -2,6 +2,7 @@ import {
   h,
 } from "vue";
 
+import AOneCheckbox from "../../ui/AOneCheckbox/AOneCheckbox";
 import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
 import ATableHeaderThAction from "../ATableHeaderThAction/ATableHeaderThAction";
 
@@ -14,17 +15,29 @@ export default {
     ATableHeaderThAction,
   },
   props: {
+    areAllRowsSelected: {
+      type: Boolean,
+      required: true,
+    },
+    areSomeRowsSelected: {
+      type: Boolean,
+      required: true,
+    },
     modelSort: {
       type: String,
       required: false,
     },
   },
+  emits: [
+    "setSelectedRowsIndexes",
+  ],
   inject: [
     "isActionColumnVisible",
     "changeColumnsOrdering",
     "columnsOrdered",
+    "isMultipleActionsActive",
   ],
-  setup() {
+  setup(props, { emit }) {
     const {
       dragstart,
       dragenter,
@@ -38,6 +51,10 @@ export default {
       classOverParent: "a_table__th"
     });
 
+    const toggleCheckbox = () => {
+      emit("setSelectedRowsIndexes", { isAll: true });
+    };
+
     return {
       dragstart,
       dragenter,
@@ -46,6 +63,8 @@ export default {
       drop,
       isDragstart,
       root,
+
+      toggleCheckbox,
     };
   },
   render() {
@@ -61,6 +80,18 @@ export default {
         role: "row",
         onDrop: this.drop,
       }, [
+        this.isMultipleActionsActive && h("div", {
+          scope: "col",
+          role: "columnheader",
+          class: "a_table__th a_table__cell a_table__cell_checkbox",
+          style: `width: 50px; min-width: 50px; max-width: 50px;`,
+        }, [
+          h(AOneCheckbox, {
+            modelValue: this.areAllRowsSelected,
+            indeterminate: this.areSomeRowsSelected && !this.areAllRowsSelected,
+            "onUpdate:modelValue": this.toggleCheckbox,
+          }),
+        ]),
         this.columnsOrdered.map((column, columnIndex) => {
           return h(ATableHeaderTh, {
             ref: "th",

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -112,7 +112,6 @@ export default {
       this.isRowActionsDropdownVisible && h(ADropdown, {
         id: this.buttonActionsId,
         buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
-        dropdownClass: "a_p_0",
         isCaret: false,
         placement: "bottom-end",
       }, {

package/src/ATable/ATableTopPanel/ATableTopPanel.js

@@ -2,6 +2,8 @@ import {
   h,
 } from "vue";
 
+import ADropdown from "../../ADropdown/ADropdown";
+import AIcon from "../../AIcon/AIcon";
 import AInput from "../../ui/AInput/AInput";
 import ATableActionItem from "../ATableActionItem/ATableActionItem";
 
@@ -11,6 +13,10 @@ import TableActionsAPI from "../compositionAPI/TableActionsAPI";
 export default {
   name: "ATableTopPanel",
   props: {
+    areSomeRowsSelected: {
+      type: Boolean,
+      required: true,
+    },
     countAllRows: {
       type: Number,
       required: true,
@@ -28,6 +34,10 @@ export default {
       type: Array,
       required: true,
     },
+    multipleActions: {
+      type: Array,
+      required: true,
+    },
     isQuickSearch: {
       type: Boolean,
       required: false,
@@ -36,21 +46,45 @@ export default {
       type: String,
       required: true,
     },
+    closeMultipleActionsActive: {
+      type: Function,
+      required: true,
+    },
+    selectedRows: {
+      type: Array,
+      required: true,
+    },
   },
   emits: [
     "updateModelQuickSearch",
+    "toggleMultipleActionsActive"
+  ],
+  inject: [
+    "isMultipleActionsActive",
   ],
-  setup(props) {
+  setup(props, context) {
     const {
       filterCurrency,
     } = AFiltersAPI();
 
     const {
+      currentMultipleActions,
+      isMultipleActionsFiltered,
+      multipleActionsFiltered,
+      onCancelMultipleActions,
+      onClickMultipleActions,
+      onOpenModalMultipleActions,
       tableActionFiltered,
-    } = TableActionsAPI(props);
+    } = TableActionsAPI(props, context);
 
     return {
+      currentMultipleActions,
       filterCurrency,
+      isMultipleActionsFiltered,
+      multipleActionsFiltered,
+      onCancelMultipleActions,
+      onClickMultipleActions,
+      onOpenModalMultipleActions,
       tableActionFiltered,
     };
   },
@@ -83,13 +117,52 @@ export default {
         ]),
       h("div", {
         class: "a_table__top_panel__actions",
-      }, [
+      }, this.isMultipleActionsActive ? [
+        h("button", {
+          class: "a_btn a_btn_primary a_table__action",
+          type: "button",
+          disabled: !this.areSomeRowsSelected,
+          onClick: this.onOpenModalMultipleActions,
+        }, this.currentMultipleActions.label),
+        h("button", {
+          class: "a_btn a_btn_secondary a_table__action",
+          type: "button",
+          onClick: this.onCancelMultipleActions,
+        }, "Mehrfachaktion abbrechen"),
+      ] : [
         this.$slots.tableActions && this.$slots.tableActions(),
         this.tableActionFiltered.map(action => {
           return h(ATableActionItem, {
             action,
           });
         }),
+        this.isMultipleActionsFiltered && h(ADropdown, {
+          buttonClass: "a_btn a_btn_secondary a_table__action",
+          placement: "bottom-end",
+        }, {
+          button: () => [
+            h("span", null, "Mehrfachaktionen"),
+          ],
+          dropdown: () => [
+            this.multipleActionsFiltered.map((action, actionIndex) => {
+              return h("li", {}, [
+                h("button", {
+                  key: actionIndex,
+                  class: "a_dropdown__item",
+                  type: "button",
+                  title: action.title,
+                  onClick: () => this.onClickMultipleActions({ action }),
+                }, [
+                  action.icon && h(AIcon, {
+                    class: "a_mr_2",
+                    icon: action.icon,
+                  }),
+                  action.label,
+                ]),
+              ]);
+            }),
+          ],
+        }),
         this.isQuickSearch && h(AInput, {
           label: "Schnellsuche",
           class: "a_table__top_panel__actions__quick_search",

package/src/ATable/ATableTr/ATableTr.js

@@ -4,13 +4,10 @@ import {
 
 import ATableTd from "../ATableTd/ATableTd";
 import ATableTdAction from "../ATableTdAction/ATableTdAction";
+import AOneCheckbox from "../../ui/AOneCheckbox/AOneCheckbox";
 
 export default {
   name: "ATableTr",
-  components: {
-    ATableTd,
-    ATableTdAction,
-  },
   props: {
     row: {
       type: Object,
@@ -20,11 +17,19 @@ export default {
       type: Number,
       required: true,
     },
+    selectedRowsIndexes: {
+      type: Object,
+      required: true,
+    },
   },
+  emits: [
+    "setSelectedRowsIndexes",
+  ],
   inject: [
     "columnsOrdered",
     "hasPreview",
     "isActionColumnVisible",
+    "isMultipleActionsActive",
     "previewRightRowIndex",
     "previewRightRowIndexLast",
     "tableId",
@@ -61,9 +66,28 @@ export default {
       return !this.isPreviewRightForCurrentRowOpen &&
         this.rowIndex === this.previewRightRowIndexLast;
     },
+
+    isRowSelected() {
+      return !!this.selectedRowsIndexes[this.rowIndex];
+    },
+  },
+  methods: {
+    toggleCheckbox() {
+      this.$emit("setSelectedRowsIndexes", { rowIndex: this.rowIndex });
+    },
   },
   render() {
     return h("div", this.rowAttributes, [
+      this.isMultipleActionsActive && h("div", {
+        scope: "row",
+        class: "a_table__td a_table__cell a_table__cell_checkbox",
+        style: `width: 50px; min-width: 50px; max-width: 50px;`,
+      }, [
+        h(AOneCheckbox, {
+          modelValue: this.isRowSelected,
+          "onUpdate:modelValue": this.toggleCheckbox,
+        }),
+      ]),
       this.columnsOrdered.map((column, columnIndex) => {
         return h(ATableTd, {
           column,

package/src/ATable/compositionAPI/MultipleActionAPI.js

@@ -0,0 +1,84 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  filter,
+  size,
+  times,
+} from "lodash-es";
+
+export default function MultipleActionAPI({
+  rowsLocal = computed(() => []),
+  rowsLocalLength = computed(() => 0),
+}) {
+  const isMultipleActionsActive = ref(undefined);
+  const selectedRowsIndexes = ref({});
+  const selectedRows = computed(() => {
+    return filter(rowsLocal.value, (row, index) => {
+      return selectedRowsIndexes.value[index];
+    });
+  });
+
+  const setEmptySelectedRowsIndexes = () => {
+    selectedRowsIndexes.value = {};
+  };
+
+  const closeMultipleActionsActive = () => {
+    isMultipleActionsActive.value = false;
+    setEmptySelectedRowsIndexes();
+  };
+
+  const toggleMultipleActionsActive = () => {
+    if (isMultipleActionsActive.value) {
+      closeMultipleActionsActive();
+    } else {
+      isMultipleActionsActive.value = true;
+    }
+  };
+
+  const selectedRowsIndexesLength = computed(() => {
+    return size(selectedRowsIndexes.value);
+  });
+
+  const areAllRowsSelected = computed(() => {
+    return rowsLocalLength.value === selectedRowsIndexesLength.value;
+  });
+
+  const areSomeRowsSelected = computed(() => {
+    return selectedRowsIndexesLength.value > 0;
+  });
+
+  const setSelectedRowsIndexes = ({ rowIndex, isAll }) => {
+    if (isAll) {
+      if (areSomeRowsSelected.value) {
+        setEmptySelectedRowsIndexes();
+      } else {
+        const SELECTED_ROWS_INDEXES = {};
+        times(rowsLocalLength.value, index => {
+          SELECTED_ROWS_INDEXES[index] = true;
+        });
+        selectedRowsIndexes.value = SELECTED_ROWS_INDEXES;
+      }
+      return;
+    }
+    if (selectedRowsIndexes.value[rowIndex]) {
+      delete selectedRowsIndexes.value[rowIndex];
+    } else {
+      selectedRowsIndexes.value[rowIndex] = true;
+    }
+  };
+
+  return {
+    areAllRowsSelected,
+    areSomeRowsSelected,
+    closeMultipleActionsActive,
+    isMultipleActionsActive,
+    selectedRows,
+    selectedRowsIndexes,
+    setEmptySelectedRowsIndexes,
+    setSelectedRowsIndexes,
+    toggleMultipleActionsActive,
+  };
+}

package/src/ATable/compositionAPI/RowsAPI.js

@@ -0,0 +1,79 @@
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+  orderBy,
+  startsWith,
+} from "lodash-es";
+
+export default function RowsAPI(props) {
+  const sortingStart = toRef(props, "sortingStart");
+  const limitStart = toRef(props, "limitStart");
+  const offsetStart = toRef(props, "offsetStart");
+
+  const modelSort = ref(sortingStart.value);
+  const limit = ref(limitStart.value);
+  const offset = ref(offsetStart.value);
+
+  const sortOptions = computed(() => {
+    if (modelSort.value) {
+      let directionSort = "asc";
+      let modelSortLocal = modelSort.value;
+      if (startsWith(modelSort.value, "-")) {
+        directionSort = "desc";
+        modelSortLocal = modelSort.value.slice(1);
+      }
+      return {
+        direction: directionSort,
+        model: modelSortLocal,
+      };
+    }
+    return {};
+  });
+
+  const isSortingOutside = toRef(props, "isSortingOutside");
+  const data = toRef(props, "data");
+  const dataSorted = computed(() => {
+    if (modelSort.value && !isSortingOutside.value) {
+      return orderBy(data.value, [sortOptions.value.model], [sortOptions.value.direction]);
+    }
+    return data.value;
+  });
+
+  const isPaginationOutside = toRef(props, "isPaginationOutside");
+  const isPagination = toRef(props, "isPagination");
+  const dataPaginated = computed(() => {
+    if (limit.value && !isPaginationOutside.value && isPagination.value) {
+      const DATA_SORTED = cloneDeep(dataSorted.value);
+      const INDEX_START = offset.value;
+      const INDEX_END = INDEX_START + limit.value;
+      return DATA_SORTED.slice(INDEX_START, INDEX_END);
+    }
+    return dataSorted.value;
+  });
+
+  const rowsLocal = computed(() => {
+    return dataPaginated.value;
+  });
+
+  const rowsLocalLength = computed(() => {
+    return rowsLocal.value.length;
+  });
+
+  const hasRows = computed(() => {
+    return !!rowsLocalLength.value;
+  });
+
+  return {
+    hasRows,
+    limit,
+    modelSort,
+    offset,
+    rowsLocal,
+    rowsLocalLength,
+  };
+}

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -14,10 +14,15 @@ import {
 
 export default function ScrollControlAPI(props, { emit }, {
   columnsOrdered = computed(() => []),
+  isMultipleActionsActive = ref(undefined),
   modelColumnsVisibleMapping = computed(() => ({})),
 }) {
   const columnWidthDefault = toRef(props, "columnWidthDefault");
   const columnActionsWidth = toRef(props, "columnActionsWidth");
+  const columnsSpecialWidth = computed(() => {
+    const columnMultipleActionsWidth = isMultipleActionsActive.value ? 50 : 0;
+    return columnMultipleActionsWidth + columnActionsWidth.value;
+  });
 
   const tableWidth = ref(undefined);
   const aTableRef = ref(undefined);
@@ -63,7 +68,7 @@ export default function ScrollControlAPI(props, { emit }, {
     if (!modelIsTableWithoutScroll.value) {
       return;
     }
-    const TABLE_WIDTH_WITHOUT_ACTIONS = tableWidth.value - columnActionsWidth.value;
+    const TABLE_WIDTH_WITHOUT_ACTIONS = tableWidth.value - columnsSpecialWidth.value;
 
     let columnsWidthInOrder = 0;
     let indexFirstScrollInvisibleColumnLocal = 0;

package/src/ATable/compositionAPI/TableActionsAPI.js

@@ -1,15 +1,23 @@
 import {
   computed,
+  ref,
   toRef,
 } from "vue";
 
+import AConfirmAPI from "../../compositionAPI/AConfirmAPI";
+
 import {
   cloneDeep,
   filter,
   forEach,
 } from "lodash-es";
 
-export default function TableActionsAPI(props) {
+export default function TableActionsAPI(props, { emit }) {
+  const {
+    closeConfirm,
+    openConfirm,
+  } = AConfirmAPI();
+
   const tableActions = toRef(props, "tableActions");
 
   const tableActionFiltered = computed(() => {
@@ -34,7 +42,57 @@ export default function TableActionsAPI(props) {
     return TABLE_ACTIONS;
   });
 
+  const multipleActions = toRef(props, "multipleActions");
+  const multipleActionsFiltered = computed(() => {
+    return filter(multipleActions.value, action => {
+      return !action.isHidden;
+    });
+  });
+
+  const isMultipleActionsFiltered = computed(() => {
+    return multipleActionsFiltered.value.length > 0;
+  });
+
+  const currentMultipleActions = ref(undefined);
+
+  const onClickMultipleActions = ({ action }) => {
+    emit("toggleMultipleActionsActive");
+    currentMultipleActions.value = action;
+  };
+
+  const onCancelMultipleActions = () => {
+    emit("toggleMultipleActionsActive");
+    currentMultipleActions.value = undefined;
+  };
+
+  const closeMultipleActionsActive = toRef(props, "closeMultipleActionsActive");
+  const selectedRows = toRef(props, "selectedRows");
+
+  const onStartModalMultipleActions = async() => {
+    await currentMultipleActions.value.callback({ rows: selectedRows.value });
+    closeConfirm();
+    onCancelMultipleActions();
+  };
+
+  const onOpenModalMultipleActions = () => {
+    if (currentMultipleActions.value.isConfirm) {
+      openConfirm({
+        headerText: "Mehrfachaktion durchführen?",
+        bodyHtml: `<div>Möchten Sie die Aktion <strong>${ currentMultipleActions.value.label }</strong> auf <strong>${ selectedRows.value.length }</strong> Objekten durchführen?</div>`,
+        save: onStartModalMultipleActions,
+      });
+    } else {
+      currentMultipleActions.value.callback({ close: closeMultipleActionsActive.value, rows: selectedRows.value });
+    }
+  };
+
   return {
+    currentMultipleActions,
+    isMultipleActionsFiltered,
+    multipleActionsFiltered,
+    onCancelMultipleActions,
+    onClickMultipleActions,
+    onOpenModalMultipleActions,
     tableActionFiltered,
   };
 }

package/src/styles/components/ATable.scss

@@ -43,7 +43,7 @@
   border-width: 0;
 }
 .a_table__cell {
-  padding: var(--a_table_cell_padding_x) var(--a_table_cell_padding_y);
+  padding: var(--a_table_cell_padding_y) var(--a_table_cell_padding_x) ;
   background-color: var(--a_table_bg);
   border-bottom-width: 1px;
   .a_table__row_hover:hover &,
@@ -57,6 +57,9 @@
     background-color: var(--a_table_row_preview_focus_was_bg);
   }
 }
+.a_table__cell_checkbox {
+  --a_table_cell_padding_x: 0;
+}
 
 .a_table__empty_text {
   padding: var(--a_table_cell_padding_x) var(--a_table_cell_padding_y);

package/src/ui/AOneCheckbox/AOneCheckbox.js

@@ -27,6 +27,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    indeterminate: {
+      type: Boolean,
+      required: false,
+    },
   },
   setup(props, context) {
     const {
@@ -61,14 +65,14 @@ export default {
           $event,
         });
       });
+      $event.stopPropagation();
+      $event.preventDefault();
     };
 
     const onKeydown = $event => {
       if ($event.key === "Enter" ||
         $event.keyCode === KEY_CODE_SPACE) {
         onClick($event);
-        $event.stopPropagation();
-        $event.preventDefault();
       }
     };
 
@@ -113,6 +117,7 @@ export default {
               ariaRequired: this.required,
               ariaInvalid: this.isErrors,
               "aria-describedby": this.ariaDescribedbyLocal,
+              indeterminate: this.indeterminate,
               ...this.inputAttributes,
               onClick: this.onClick,
               onKeydown: this.onKeydown,