aloha-vue 1.2.133 → 1.2.135

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

@@ -90,7 +90,6 @@ export default {
           label: "Hola2",
           id: "hola2",
           keyLabel: "hola",
-          sortId: "hola",
           hide: true,
           footerKeyLabel: "hola",
         },
@@ -115,7 +114,6 @@ export default {
           label: "Obj2",
           id: "obj2",
           keyLabel: "obj.aloha",
-          sortId: "obj.aloha",
           footerKeyLabel: "obj.aloha",
         },
         {
@@ -147,14 +145,12 @@ export default {
           label: "safeHtml",
           id: "safeHtml",
           keyLabelSafeHtml: "test",
-          sortId: "test",
           width: 200,
         },
         {
           label: "html",
           id: "html",
           keyLabelHtml: "test",
-          sortId: "test",
           width: 200,
         },
       ],

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

@@ -26,6 +26,7 @@ aloha-example(
       :rows-footer="rowsFooter"
       :is-loading-table="modelLoading"
       :is-loading-multiple-actions="false"
+      :is-sorting-multi-column="true"
       :views="views"
       :model-view="modelView"
       :model-is-table-without-scroll-start="true"

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

@@ -40,7 +40,7 @@ aloha-example(
       template(
         v-slot:rowActions="{ row }"
       )
-        .a_btn_group(
+        .a_btn_group.a_btn_group_small(
           role="group"
         )
           a-button.a_btn.a_btn_primary(

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.133",
+  "version": "1.2.135",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ADropdown/ADropdown.js

@@ -277,7 +277,11 @@ export default {
       validator: value => difference(value, ["click", "hover", "focus"]).length === 0,
     },
   },
-  setup(props) {
+  emits: [
+    "open",
+    "close",
+  ],
+  setup(props, context) {
     const {
       dropdownButtonRef,
       dropdownRef,
@@ -309,7 +313,7 @@ export default {
       timerCloseHover,
       triggerOpen,
       wasOpened,
-    } = ToggleAPI(props, {
+    } = ToggleAPI(props, context, {
       dropdownButtonRef,
       dropdownRef,
       destroyPopover,

package/src/ADropdown/compositionAPI/ToggleAPI.js

@@ -14,7 +14,7 @@ import {
   forEach,
 } from "lodash-es";
 
-export default function ToggleAPI(props, {
+export default function ToggleAPI(props, { emit }, {
   dropdownButtonRef = ref(undefined),
   dropdownRef = ref(undefined),
   destroyPopover = () => {},
@@ -173,6 +173,7 @@ export default function ToggleAPI(props, {
         });
       }
       openDropdownGlobal();
+      emit("open");
     });
   };
 
@@ -216,6 +217,7 @@ export default function ToggleAPI(props, {
       setFocusToButton();
     }
     triggerOpen.value = undefined;
+    emit("close");
   }
 
   function onClose({ trigger } = {}) {

package/src/ATable/ATable.js

@@ -51,6 +51,11 @@ import {
 export default {
   name: "ATable",
   props: {
+    additionalSortingColumns: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     columnActionsWidth: {
       type: Number,
       required: false,
@@ -227,7 +232,7 @@ export default {
     modelSort: {
       type: [String, Array],
       required: false,
-      default: undefined,
+      default: () => [],
     },
     modelView: {
       type: [String, Number],
@@ -371,6 +376,11 @@ export default {
         empty: "_A_TABLE_EMPTY_TEXT_",
       }),
     },
+    useAdditionalSorting: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     useViewSlot: {
       type: Boolean,
       required: false,
@@ -781,31 +791,35 @@ export default {
         }],
       }, [
         h(ATableTopPanel, {
+          additionalSortingColumns: this.additionalSortingColumns,
           areAllRowsSelected: this.areAllRowsSelected,
           areSomeRowsSelected: this.areSomeRowsSelected,
           closeMultipleActionsActive: this.closeMultipleActionsActive,
           countAllRows: this.countAllRowsLocal,
           disabledActions: this.disabledActions,
           disabledMultipleActions: this.disabledMultipleActions,
+          disabledSort: this.disabledSort,
           disabledViews: this.disabledViews,
+          hasViews: this.hasViews,
           isLabelVisible: this.isLabelVisible,
+          isLoadingMultipleActions: this.isLoadingMultipleActions,
+          isQuickSearch: this.isQuickSearch,
           label: this.label,
-          labelTag: this.labelTag,
           labelClass: this.labelClass,
-          tableActions: this.tableActions,
-          multipleActions: this.multipleActions,
-          isQuickSearch: this.isQuickSearch,
-          isLoadingMultipleActions: this.isLoadingMultipleActions,
+          labelTag: this.labelTag,
           modelQuickSearch: this.modelQuickSearch,
-          selectedRows: this.selectedRows,
-          views: this.views,
-          hasViews: this.hasViews,
-          viewCurrent: this.viewCurrent,
+          modelSort: this.modelSortLocal,
           modelView: this.modelView,
+          multipleActions: this.multipleActions,
+          selectedRows: this.selectedRows,
           showCount: this.showCount,
+          tableActions: this.tableActions,
           tableActionsIndexFirstDropdownAction: this.tableActionsIndexFirstDropdownAction,
           tableActionsIndexFirstDropdownActionMobile: this.tableActionsIndexFirstDropdownActionMobile,
+          useAdditionalSorting: this.useAdditionalSorting,
           useViewSlot: this.useViewSlot,
+          viewCurrent: this.viewCurrent,
+          views: this.views,
           onUpdateViewCurrent: this.updateViewCurrent,
           onUpdateModelQuickSearch: this.updateModelQuickSearch,
           onToggleMultipleActionsActive: this.toggleMultipleActionsActive,

package/src/ATable/ATableGroupedHeader/ATableGroupedHeader.js

@@ -72,11 +72,11 @@ export default {
     "isMobile",
     "isMultipleActionsActive",
   ],
-  setup() {
+  setup(props) {
     const {
       columnsOrdered,
       renderedGroupedColumns,
-    } = ColumnsGroupedAPI();
+    } = ColumnsGroupedAPI(props);
 
     return {
       columnsOrdered,

package/src/ATable/ATableGroupedHeader/compositionAPI/ColumnsGroupedAPI.js

@@ -2,6 +2,7 @@ import {
   computed,
   h,
   inject,
+  toRef,
 } from "vue";
 
 import ATableHeaderTh from "../../ATableHeaderTh/ATableHeaderTh";
@@ -13,11 +14,17 @@ import {
   get,
   includes,
   isArray,
-  map, min, sortBy,
+  map,
+  min,
+  sortBy,
   uniqBy,
 } from "lodash-es";
 
-export default function ColumnsGroupedAPI() {
+export default function ColumnsGroupedAPI(props) {
+  const modelSort = toRef(props, "modelSort");
+  const showFirstSortingSequenceNumber = toRef(props, "showFirstSortingSequenceNumber");
+  const sortingSequenceNumberClass = toRef(props, "sortingSequenceNumberClass");
+
   const columns = cloneDeep(map(inject("columnsFilteredForRender").value, (column, index) => {
     return {
       ...column,
@@ -112,11 +119,14 @@ export default function ColumnsGroupedAPI() {
   const getColumnsForRender = col => {
     return h(ATableHeaderTh, {
       ref: "th",
-      column: col,
-      columnIndex: col._index,
       class: "a_table__cell__child_group",
+      column: col,
       columnGroupNames: col.group,
+      columnIndex: col._index,
       hasMultipleActions: false,
+      modelSort: modelSort.value,
+      showFirstSortingSequenceNumber: showFirstSortingSequenceNumber.value,
+      sortingSequenceNumberClass: sortingSequenceNumberClass.value,
     });
   };
   const getRecursiveGroupForRender = group => {

package/src/ATable/ATableSortingAdditional/ATableSortingAdditional.js

@@ -0,0 +1,205 @@
+import {
+  h,
+  onBeforeUnmount,
+} from "vue";
+
+import ADropdown from "../../ADropdown/ADropdown";
+import AElement from "../../AElement/AElement";
+import AForm from "../../ui/AForm/AForm";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import ColumnsAPI from "./compositionAPI/ColumnsAPI";
+import DropdownAPI from "./compositionAPI/DropdownAPI";
+import FormAPI from "./compositionAPI/FormAPI";
+import ModelAPI from "./compositionAPI/ModelAPI";
+
+export default {
+  name: "ATableSortingAdditional",
+  props: {
+    additionalSortingColumns: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    disabledSort: {
+      type: Boolean,
+      required: false,
+    },
+    modelSort: {
+      type: Array,
+      required: false,
+    },
+  },
+  setup(props) {
+    const {
+      columnsAll,
+    } = ColumnsAPI(props);
+
+    const {
+      dataForForm,
+      hasLastSelectOnlyOneColumn,
+      initDataForForm,
+    } = FormAPI(props, {
+      columnsAll,
+    });
+
+    const {
+      closeDropdown,
+      dropdownRef,
+      isDropdownVisible,
+      wasOpenDropdown,
+    } = DropdownAPI(props, {
+      columnsAll,
+    });
+
+    const {
+      changeModelSortInTable,
+      countModelSort,
+      destroyEventBus,
+      initEventBus,
+      initUnappliedModelSort,
+      removeUnappliedModelSort,
+      textCountModelSort,
+      unappliedModelSort,
+      updateUnappliedModelSort,
+    } = ModelAPI(props, {
+      closeDropdown,
+      hasLastSelectOnlyOneColumn,
+      initDataForForm,
+      wasOpenDropdown,
+    });
+
+    const {
+      excludeRenderAttributes,
+      idPrefix,
+    } = AttributesAPI();
+
+    initEventBus();
+
+    onBeforeUnmount(() => {
+      destroyEventBus();
+    });
+
+    return {
+      changeModelSortInTable,
+      closeDropdown,
+      countModelSort,
+      dataForForm,
+      dropdownRef,
+      excludeRenderAttributes,
+      idPrefix,
+      initUnappliedModelSort,
+      isDropdownVisible,
+      removeUnappliedModelSort,
+      textCountModelSort,
+      unappliedModelSort,
+      updateUnappliedModelSort,
+      wasOpenDropdown,
+    };
+  },
+  render() {
+    if (!this.isDropdownVisible) {
+      return null;
+    }
+
+    return h(ADropdown, {
+      ref: "dropdownRef",
+      buttonClass: "a_btn a_btn_secondary a_table__action",
+      buttonIconLeft: "ArrowDownUp",
+      buttonText: this.textCountModelSort,
+      buttonTextAriaHidden: true,
+      buttonTitle: "_A_TABLE_SORT_ADDITIONAL_DROPDOWN_TITLE_{{count}}_",
+      buttonTextScreenReader: "_A_TABLE_SORT_ADDITIONAL_DROPDOWN_TITLE_{{count}}_",
+      buttonTextClass: "a_badge a_bg_primary",
+      disabled: this.disabledSort,
+      dropdownClass: "a_filter_horizontal__wrapper",
+      dropdownRenderDefault: false,
+      dropdownTag: "div",
+      hasCaret: false,
+      inBody: true,
+      extra: {
+        count: this.countModelSort,
+      },
+      isCloseByClickInside: false,
+      lockArrowsNavigation: false,
+      lockTabNavigation: false,
+      onOpen: this.initUnappliedModelSort,
+    }, {
+      dropdown: () => {
+        return h("div", {
+          class: "a_filter_horizontal",
+        }, [
+          h("div", {
+            class: "a_filter_horizontal__header__wrapper",
+          }, [
+            h("div", {
+              class: "a_filter_horizontal__header",
+            }, [
+              h("div", {
+                class: "a_filter_horizontal__header__texts",
+              }, [
+                h(ATranslation, {
+                  class: "a_filter_horizontal__header__texts__filter",
+                  tag: "span",
+                  text: "_A_TABLE_SORT_ADDITIONAL_HEADER_"
+                }),
+              ]),
+            ]),
+          ]),
+          h("div", {
+            class: "a_filter_horizontal__body__wrapper",
+          }, [
+            h("div", {
+              class: "a_filter_horizontal__body",
+            }, [
+              h(AForm, {
+                idPrefix: this.idPrefix,
+                class: "a_filter_horizontal__body__form",
+                classColumnDefault: "",
+                classColumns: "",
+                data: this.dataForForm,
+                excludeRenderAttributes: this.excludeRenderAttributes,
+                modelValue: this.unappliedModelSort,
+                showErrors: false,
+                onChange: this.updateUnappliedModelSort,
+              }, {
+                slotAppend: ({ item }) => h(AElement, {
+                  type: "button",
+                  class: "a_btn a_btn_primary a_ml_2",
+                  title: "_A_TABLE_SORT_ADDITIONAL_BTN_DELETE_",
+                  textScreenReader: "_A_TABLE_SORT_ADDITIONAL_BTN_DELETE_",
+                  disabled: !this.unappliedModelSort?.[item.additionalProps.index]?.sortId,
+                  iconLeft: "Close",
+                  onClick: () => this.removeUnappliedModelSort({ item }),
+                }),
+              }),
+            ]),
+            h("div", {
+              class: "a_filter_horizontal__footer",
+            }, [
+              h("div", {
+                class: "a_filter_horizontal__footer__actions",
+              }, [
+                h(AElement, {
+                  type: "button",
+                  class: "a_btn a_btn_primary a_text_nowrap a_filter_horizontal__footer__actions__btn_search",
+                  iconLeft: "ArrowDownUp",
+                  text: "_A_TABLE_SORT_ADDITIONAL_START_",
+                  disabled: this.disabledSort,
+                  onClick: this.changeModelSortInTable,
+                }),
+                h(AElement, {
+                  type: "button",
+                  class: "a_btn a_btn_secondary a_text_nowrap a_filter_horizontal__footer__actions__btn_close",
+                  text: "_A_TABLE_SORT_ADDITIONAL_CLOSE_DROPDOWN_",
+                  onClick: this.closeDropdown,
+                }),
+              ]),
+            ]),
+          ]),
+        ]);
+      }
+    });
+  },
+};

package/src/ATable/ATableSortingAdditional/compositionAPI/AttributesAPI.js

@@ -0,0 +1,21 @@
+import {
+  computed,
+  inject,
+} from "vue";
+
+export default function AttributesAPI() {
+  const tableId = inject("tableId");
+
+  const excludeRenderAttributes = [
+    "additionalProps",
+  ];
+
+  const idPrefix = computed(() => {
+    return `${ tableId.value }_`;
+  });
+
+  return {
+    excludeRenderAttributes,
+    idPrefix,
+  };
+}

package/src/ATable/ATableSortingAdditional/compositionAPI/ColumnsAPI.js

@@ -0,0 +1,28 @@
+import {
+  computed,
+  inject,
+  toRef,
+} from "vue";
+
+import {
+  filter,
+} from "lodash-es";
+
+export default function ColumnsAPI(props) {
+  const additionalSortingColumns = toRef(props, "additionalSortingColumns");
+
+  const columnsOrdered = inject("columnsOrdered");
+
+  const columnsAll = computed(() => {
+    return [
+      ...filter(columnsOrdered.value, column => {
+        return column.sortId;
+      }),
+      ...additionalSortingColumns.value,
+    ];
+  });
+
+  return {
+    columnsAll,
+  };
+}

package/src/ATable/ATableSortingAdditional/compositionAPI/DropdownAPI.js

@@ -0,0 +1,26 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+export default function DropdownAPI(props, {
+  columnsAll = computed(() => []),
+}) {
+  const dropdownRef = ref(undefined);
+  const wasOpenDropdown = ref(false);
+
+  const isDropdownVisible = computed(() => {
+    return columnsAll.value.length > 0;
+  });
+
+  const closeDropdown = () => {
+    dropdownRef.value?.onClose({ trigger: "click" });
+  };
+
+  return {
+    closeDropdown,
+    dropdownRef,
+    isDropdownVisible,
+    wasOpenDropdown,
+  };
+}

package/src/ATable/ATableSortingAdditional/compositionAPI/FormAPI.js

@@ -0,0 +1,92 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  filter,
+  forEach,
+  last,
+} from "lodash-es";
+
+export default function FormAPI(props, {
+  columnsAll = computed(() => []),
+}) {
+  const dataForForm = ref([]);
+
+  const initDataForForm = ({ unappliedModelSort = [] }) => {
+    const DATA = [];
+    const DATA_MODES = [
+      {
+        label: "_A_TABLE_SORT_ADDITIONAL_DIRECTION_ASC_",
+        id: "asc",
+      },
+      {
+        label: "_A_TABLE_SORT_ADDITIONAL_DIRECTION_DESC_",
+        id: "desc",
+      },
+    ];
+    let columnsAllFiltered = columnsAll.value;
+    let lastSortId;
+    forEach(unappliedModelSort, ({ sortId }, index) => {
+      const isFirst = index === 0;
+      if (lastSortId) {
+        columnsAllFiltered = filter(columnsAllFiltered, column => {
+          return column.sortId !== lastSortId;
+        });
+      }
+      lastSortId = sortId;
+
+      DATA.push({
+        type: "fieldset",
+        id: `group_${ sortId }`,
+        label: isFirst ?
+          "_A_TABLE_SORT_ADDITIONAL_SORT_BY_" :
+          "_A_TABLE_SORT_ADDITIONAL_THEN_BY_",
+        children: [
+          {
+            id: `[${ index }].sortId`,
+            type: "select",
+            classColumn: "a_column a_column_12_touch a_column_7_fullhd a_column_7_widescreen a_column_7_desktop",
+            deselectable: false,
+            data: columnsAllFiltered,
+            keyId: "sortId",
+            keyLabel: "label",
+            translateData: true,
+            search: true,
+            label: "_A_TABLE_SORT_ADDITIONAL_COLUMN_",
+          },
+          {
+            id: `[${ index }].sortMode`,
+            type: "select",
+            classColumn: "a_column a_column_12_touch a_column_5_fullhd a_column_5_widescreen a_column_5_desktop a_d_flex a_align_items_center",
+            class: "a_width_100",
+            deselectable: false,
+            data: DATA_MODES,
+            keyId: "id",
+            keyLabel: "label",
+            translateData: true,
+            search: false,
+            label: "_A_TABLE_SORT_ADDITIONAL_DIRECTION_",
+            slotAppend: "slotAppend",
+            additionalProps: {
+              index,
+            },
+          },
+        ],
+      });
+    });
+
+    dataForForm.value = DATA;
+  };
+
+  const hasLastSelectOnlyOneColumn = computed(() => {
+    return last(dataForForm.value)?.children?.[0]?.data?.length === 1;
+  });
+
+  return {
+    dataForForm,
+    hasLastSelectOnlyOneColumn,
+    initDataForForm,
+  };
+}

package/src/ATable/ATableSortingAdditional/compositionAPI/ModelAPI.js

@@ -0,0 +1,128 @@
+import {
+  computed,
+  inject,
+  ref,
+  toRef,
+} from "vue";
+
+import EventBus from "../../../utils/EventBus";
+import {
+  cloneDeep,
+  forEach,
+  last,
+  startsWith,
+} from "lodash-es";
+
+export default function ModelAPI(props, {
+  closeDropdown = () => {},
+  hasLastSelectOnlyOneColumn = computed(() => false),
+  initDataForForm = () => {},
+  wasOpenDropdown = ref(false),
+}) {
+  const modelSort = toRef(props, "modelSort");
+
+  const changeModelSort = inject("changeModelSort");
+  const tableId = inject("tableId");
+
+  const unappliedModelSort = ref([]);
+
+  const initUnappliedModelSort = ({ model } = {}) => {
+    if (wasOpenDropdown.value && !model) {
+      return;
+    }
+    wasOpenDropdown.value = true;
+
+    const MODEL_SORT = model ? model : cloneDeep(modelSort.value);
+    MODEL_SORT.push(undefined);
+
+    const UNAPPLIED_MODEL = [];
+    forEach(MODEL_SORT, model => {
+      const sortId = model ? model.replace(/^-/, "") : model;
+      const sortMode = startsWith(model, "-") ?
+        "desc" :
+        "asc";
+      UNAPPLIED_MODEL.push({
+        sortId,
+        sortMode,
+      });
+    });
+
+    unappliedModelSort.value = UNAPPLIED_MODEL;
+    initDataForForm({ unappliedModelSort: UNAPPLIED_MODEL });
+  };
+
+  const isLastModelForColumnNotEmpty = ({ model }) => {
+    const LAST_MODEL = last(model);
+
+    return !!LAST_MODEL.sortId;
+  };
+
+  const updateUnappliedModelSort = ({ model }) => {
+    if (isLastModelForColumnNotEmpty({ model }) && !hasLastSelectOnlyOneColumn.value) {
+      model.push({
+        sortId: undefined,
+        sortMode: "asc",
+      });
+    }
+    unappliedModelSort.value = model;
+    initDataForForm({ unappliedModelSort: unappliedModelSort.value });
+  };
+
+  const removeUnappliedModelSort = ({ item }) => {
+    const INDEX = item.additionalProps.index;
+    unappliedModelSort.value.splice(INDEX, 1);
+    initDataForForm({ unappliedModelSort: unappliedModelSort.value });
+  };
+
+  const changeModelSortInTable = () => {
+    const MODEL = [];
+    forEach(unappliedModelSort.value, modelItem => {
+      if (modelItem.sortId) {
+        MODEL.push(`${ modelItem.sortMode === "asc" ? "" : "-" }${ modelItem.sortId }`);
+      }
+    });
+    changeModelSort({
+      modelAll: MODEL,
+    });
+    closeDropdown();
+  };
+
+  const changeTableSorting = ({ modelSort = [], tableId: _tableId }) => {
+    if (_tableId !== tableId.value) {
+      return;
+    }
+    initUnappliedModelSort({ model: modelSort });
+  };
+
+  const initEventBus = () => {
+    EventBus.$on("changeTableSorting", changeTableSorting);
+  };
+
+  const destroyEventBus = () => {
+    EventBus.$off("changeTableSorting", changeTableSorting);
+  };
+
+  const countModelSort = computed(() => {
+    return modelSort.value?.length || 0;
+  });
+
+  const textCountModelSort = computed(() => {
+    if (countModelSort.value) {
+      return countModelSort.value;
+    }
+
+    return undefined;
+  });
+
+  return {
+    changeModelSortInTable,
+    countModelSort,
+    destroyEventBus,
+    initEventBus,
+    initUnappliedModelSort,
+    removeUnappliedModelSort,
+    textCountModelSort,
+    unappliedModelSort,
+    updateUnappliedModelSort,
+  };
+}

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -138,29 +138,35 @@ export default {
             ]),
           ],
         }),
-        this.$slots.rowActions ?
-          this.$slots.rowActions({
-            tableId: this.tableId,
-            row: this.row,
-            rowIndex: this.rowIndex,
-            isFooter: this.isFooter,
-          }) :
+        this.isRowActionsDropdownVisible || this.$slots.rowActions ?
+          h("div", {
+            class: "a_table__cell_action__group"
+          }, [
+            this.$slots.rowActions ?
+              this.$slots.rowActions({
+                tableId: this.tableId,
+                row: this.row,
+                rowIndex: this.rowIndex,
+                isFooter: this.isFooter,
+              }) :
+              "",
+            this.isRowActionsDropdownVisible && h(ADropdown, {
+              id: this.buttonActionsId,
+              actions: this.rowActionsFiltered,
+              buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
+              buttonIconLeft: "OptionVertical",
+              buttonTextScreenReader: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
+              buttonTitle: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
+              disabled: this.disabledRowActions,
+              extra: {
+                rowNumber: this.rowNumber,
+              },
+              hasCaret: false,
+              inBody: true,
+              placement: "bottom-end",
+            }, this.$slots),
+          ]) :
           "",
-        this.isRowActionsDropdownVisible && h(ADropdown, {
-          id: this.buttonActionsId,
-          actions: this.rowActionsFiltered,
-          buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
-          buttonIconLeft: "OptionVertical",
-          buttonTextScreenReader: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
-          buttonTitle: "_A_TABLE_DROPDOWN_ACTIONS_TITLE_{{rowNumber}}_",
-          disabled: this.disabledRowActions,
-          extra: {
-            rowNumber: this.rowNumber,
-          },
-          hasCaret: false,
-          inBody: true,
-          placement: "bottom-end",
-        }, this.$slots),
       ]),
     ]);
   },

package/src/ATable/ATableTopPanel/ATableTopPanel.js

@@ -6,6 +6,7 @@ import AButton from "../../AButton/AButton";
 import AGroupButtonDropdown from "../../AGroupButtonDropdown/AGroupButtonDropdown";
 import AInput from "../../ui/AInput/AInput";
 import ARadio from "../../ui/ARadio/ARadio";
+import ATableSortingAdditional from "../ATableSortingAdditional/ATableSortingAdditional";
 import ATranslation from "../../ATranslation/ATranslation";
 
 import ActionsAPI from "./compositionAPI/ActionsAPI";
@@ -17,6 +18,11 @@ import ViewsAPI from "./compositionAPI/ViewsAPI";
 export default {
   name: "ATableTopPanel",
   props: {
+    additionalSortingColumns: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     areAllRowsSelected: {
       type: Boolean,
       required: true,
@@ -41,6 +47,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    disabledSort: {
+      type: Boolean,
+      required: false,
+    },
     disabledViews: {
       type: Boolean,
       required: true,
@@ -79,6 +89,10 @@ export default {
       type: String,
       required: true,
     },
+    modelSort: {
+      type: Array,
+      required: false,
+    },
     modelView: {
       type: String,
       required: false,
@@ -111,6 +125,11 @@ export default {
       required: false,
       default: 0,
     },
+    useAdditionalSorting: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     useViewSlot: {
       type: Boolean,
       required: false,
@@ -222,10 +241,12 @@ export default {
         h("div", {
           class: "a_table__top_panel__actions",
         }, [
-          this.$slots.tableActionsPrepend && this.$slots.tableActionsPrepend({
-            isMultipleActionsActive: this.isMultipleActionsActive,
-            modelView: this.modelView,
-          }),
+          this.$slots.tableActionsPrepend ?
+            this.$slots.tableActionsPrepend({
+              isMultipleActionsActive: this.isMultipleActionsActive,
+              modelView: this.modelView,
+            }) :
+            "",
           h(AGroupButtonDropdown, {
             actions: this.tableActionsFiltered,
             actionsClasses: [],
@@ -262,35 +283,48 @@ export default {
               placement: "bottom-end",
             },
           }),
-          this.isQuickSearch && h(AInput, {
-            label: "_A_TABLE_QUICK_SEARCH_",
-            class: "a_table__top_panel__actions__quick_search",
-            modelUndefined: "",
-            modelValue: this.modelQuickSearch,
-            iconPrepend: "Search",
-            "onUpdate:modelValue": this.updateModelQuickSearch,
-          }),
-          this.hasViews && h(ARadio, {
-            modelValue: this.modelView,
-            class: "a_d_inline_block",
-            isButtonGroup: true,
-            disabled: this.disabledViews,
-            slotName: this.viewSlotLocal,
-            data: this.views,
-            keyId: "id",
-            keyLabel: "label",
-            hasBorder: false,
-            classFieldset: "a_p_0",
-            "onUpdate:modelValue": this.updateViewCurrentLocal,
-          }, {
-            viewSlot: arg => this.$slots.viewSlot && this.$slots.viewSlot({
-              ...arg,
-            }),
-          }),
-          this.$slots.tableActionsAppend && this.$slots.tableActionsAppend({
-            isMultipleActionsActive: this.isMultipleActionsActive,
-            modelView: this.modelView,
-          }),
+          this.isQuickSearch ?
+            h(AInput, {
+              label: "_A_TABLE_QUICK_SEARCH_",
+              class: "a_table__top_panel__actions__quick_search",
+              modelUndefined: "",
+              modelValue: this.modelQuickSearch,
+              iconPrepend: "Search",
+              "onUpdate:modelValue": this.updateModelQuickSearch,
+            }) :
+            "",
+          this.hasViews ?
+            h(ARadio, {
+              modelValue: this.modelView,
+              class: "a_d_inline_block",
+              isButtonGroup: true,
+              disabled: this.disabledViews,
+              slotName: this.viewSlotLocal,
+              data: this.views,
+              keyId: "id",
+              keyLabel: "label",
+              hasBorder: false,
+              classFieldset: "a_p_0",
+              "onUpdate:modelValue": this.updateViewCurrentLocal,
+            }, {
+              viewSlot: arg => this.$slots.viewSlot && this.$slots.viewSlot({
+                ...arg,
+              }),
+            }) :
+            "",
+          this.useAdditionalSorting ?
+            h(ATableSortingAdditional, {
+              additionalSortingColumns: this.additionalSortingColumns,
+              disabledSort: this.disabledSort,
+              modelSort: this.modelSort,
+            }) :
+            "",
+          this.$slots.tableActionsAppend ?
+            this.$slots.tableActionsAppend({
+              isMultipleActionsActive: this.isMultipleActionsActive,
+              modelView: this.modelView,
+            }) :
+            "",
         ]),
       ]),
       this.isMultipleActionsActive && h("div", {

package/src/ATable/compositionAPI/SortChangeAPI.js

@@ -4,6 +4,7 @@ import {
   toRef,
 } from "vue";
 
+import EventBus from "../../utils/EventBus";
 import {
   cloneDeep,
 } from "lodash-es";
@@ -12,6 +13,7 @@ export default function SortChangeAPI(props, { emit }, {
   modelSortLocal = ref([]),
   closePreviewAll = () => {},
 }) {
+  const id = toRef(props, "id");
   const isSortingMultiColumn = toRef(props, "isSortingMultiColumn");
   const sortingMultiColumnKey = toRef(props, "sortingMultiColumnKey");
 
@@ -52,15 +54,22 @@ export default function SortChangeAPI(props, { emit }, {
     modelSortLocal.value = [sortId];
   };
 
-  const changeModelSort = ({ sortId, $event }) => {
-    if (isSortingMultiColumnKeyPressed($event)) {
+  const changeModelSort = ({ sortId, $event, modelAll }) => {
+    if (modelAll) {
+      modelSortLocal.value = modelAll;
+    } else if (isSortingMultiColumnKeyPressed($event)) {
       changeModelSortMultiColumn({ sortId });
     } else {
       changeModelSortSingleColumn({ sortId });
     }
+
     emit("changeSorting", {
       modelSort: cloneDeep(modelSortLocal.value),
     });
+    EventBus.$emit("changeTableSorting", {
+      modelSort: cloneDeep(modelSortLocal.value),
+      tableId: id.value,
+    });
     closePreviewAll();
   };
 

package/src/ATable/i18n/de.json

@@ -39,5 +39,16 @@
   "_A_TABLE_SELECT_ALL_VISIBLE_POSSIBLE_ROWS_": "Alle sichtbaren, relevanten Zeilen auswählen",
   "_A_TABLE_SELECT_THIS_ROW_": "Die Zeile auswählen",
   "_A_TABLE_SORT_TITLE_": "Klicken Sie hier, um zwischen aufsteigender, absteigender und keiner Sortierung zu wechseln.",
-  "_A_TABLE_SORT_TITLE_MULTI_COLUMN_": "Halten Sie die Umschalttaste beim Klicken gedrückt, um die Sortierung mehrerer Spalten zu kombinieren."
+  "_A_TABLE_SORT_TITLE_MULTI_COLUMN_": "Halten Sie die Umschalttaste beim Klicken gedrückt, um die Sortierung mehrerer Spalten zu kombinieren.",
+  "_A_TABLE_SORT_ADDITIONAL_HEADER_": "Sortierung",
+  "_A_TABLE_SORT_ADDITIONAL_SORT_BY_": "Sortieren nach",
+  "_A_TABLE_SORT_ADDITIONAL_THEN_BY_": "Dann nach",
+  "_A_TABLE_SORT_ADDITIONAL_COLUMN_": "Spalte",
+  "_A_TABLE_SORT_ADDITIONAL_DIRECTION_": "Reihenfolge",
+  "_A_TABLE_SORT_ADDITIONAL_DIRECTION_ASC_": "Aufsteigend",
+  "_A_TABLE_SORT_ADDITIONAL_DIRECTION_DESC_": "Absteigend",
+  "_A_TABLE_SORT_ADDITIONAL_CLOSE_DROPDOWN_": "Schließen",
+  "_A_TABLE_SORT_ADDITIONAL_START_": "Sortieren",
+  "_A_TABLE_SORT_ADDITIONAL_DROPDOWN_TITLE_{{count}}_": "Sortierung ändern (ausgewählte Spalten: {{ count }})",
+  "_A_TABLE_SORT_ADDITIONAL_BTN_DELETE_": "Sortierung aufheben"
 }

package/src/plugins/AIconPlugin.js

@@ -12,6 +12,7 @@ import AngleDown from "../AIcon/Icons/AngleDown";
 import AngleLeft from "../AIcon/Icons/AngleLeft";
 import AngleRight from "../AIcon/Icons/AngleRight";
 import AngleUp from "../AIcon/Icons/AngleUp";
+import ArrowDownUp from "../AIcon/Icons/bootstrap-1-9-1/ArrowDownUp";
 import ArrowLeft from "../AIcon/Icons/bootstrap-1-9-1/ArrowLeft";
 import ArrowRight from "../AIcon/Icons/bootstrap-1-9-1/ArrowRight";
 import CaretDownFill from "../AIcon/Icons/bootstrap-1-9-1/CaretDownFill";
@@ -63,6 +64,7 @@ export const iconPluginOptions = ref({
     AngleLeft,
     AngleRight,
     AngleUp,
+    ArrowDownUp,
     ArrowLeft,
     ArrowRight,
     CaretDownFill,

package/src/styles/components/AFilters.scss

@@ -99,6 +99,10 @@ $a_breakpoint_touch: 1023px !default;
   .a_form_element_number_controls .a_form_element {
     --a_input_number_width: 100% !important;
   }
+  .a_fieldset {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
 }
 .a_filter_horizontal__add_filter {
   position: relative;

package/src/styles/components/ATable.scss

@@ -331,6 +331,13 @@
   > .a_table__cell__child {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+  }
+}
+.a_table__cell_action__group {
+  margin-left: auto;
+  > * + * {
+    margin-left: 0.5rem;
   }
 }
 .a_table__cell_action_sticky {
@@ -436,9 +443,9 @@
   margin-right: .25rem;
 }
 .a_table__cell_action__btn {
+  --a_btn_padding_y: 0.25rem;
   --a_btn_padding_x: 0.5rem;
-  --a_btn_padding_y: 0.375rem;
-  --a_btn_line_height: 1;
+  --a_btn_font_size: 0.875rem;
 }
 
 .a_table__preview_right {
@@ -533,8 +540,12 @@
 .a_table_mobile__actions_parent {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding-left: var(--a_table_mobile_dt_padding_left);
   padding-right: var(--a_table_mobile_dd_padding_right);
+  .a_table__cell_action {
+    flex-grow: unset;
+  }
 }
 .a_table_mobile__columns_btn_toggle {
   padding: 0;

package/src/ui/AFieldset/AFieldset.js

@@ -156,7 +156,7 @@ export default {
       return null;
     }
 
-    return ("div", {
+    return h("div", {
       style: this.componentStyleHide,
       ...this.attributesToExcludeFromRender,
     }, [
@@ -203,20 +203,27 @@ export default {
             } else if (item.classColumn) {
               classColumn = item.classColumn;
             }
-            return h(this.componentTypesMapping[item.type], {
-              key: itemIndex,
-              modelValue: IS_CONTAINER ? this.modelValue : get(this.modelValue, item.id),
-              modelDependencies: IS_CONTAINER ? this.modelValue : undefined,
+            return h("div", {
               class: classColumn,
-              errors: this.errorsAll[item.id],
-              errorsAll: this.errorsAll,
-              idPrefix: this.idPrefix,
-              "onUpdate:modelValue": model => this.onUpdateModelLocal({ item, model }),
-              onUpdateData: ({ dataKeyByKeyId }) => this.onUpdateDataLocal({ item, dataKeyByKeyId }),
-              ...item,
-              classColumn: undefined,
-              ...this.attributesToExcludeFromRender,
-            }, this.$slots);
+            }, [
+              h(this.componentTypesMapping[item.type], {
+                key: itemIndex,
+                modelValue: IS_CONTAINER ? this.modelValue : get(this.modelValue, item.id),
+                modelDependencies: IS_CONTAINER ? this.modelValue : undefined,
+                errors: this.errorsAll[item.id],
+                errorsAll: this.errorsAll,
+                idPrefix: this.idPrefix,
+                "onUpdate:modelValue": model => this.onUpdateModelLocal({ item, model }),
+                onUpdateData: ({ dataKeyByKeyId }) => this.onUpdateDataLocal({ item, dataKeyByKeyId }),
+                ...item,
+                classColumn: undefined,
+                slotAppend: undefined,
+                ...this.attributesToExcludeFromRender,
+              }, this.$slots),
+              (item.slotAppend && this.$slots[item.slotAppend]) ?
+                this.$slots[item.slotAppend]({ item, itemIndex }) :
+                "",
+            ]);
           }),
           this.slotName &&
           this.$slots[this.slotName] &&

package/src/ui/ASelect/ASelect.js

@@ -72,10 +72,9 @@ export default {
       required: false,
       default: () => {},
     },
-    classColumn: {
-      type: String,
+    class: {
+      type: [String, Object],
       required: false,
-      default: undefined,
     },
     countMultiselect: {
       type: Number,
@@ -615,6 +614,7 @@ export default {
     }
 
     return h("div", {
+      class: this.class,
       style: this.componentStyleHide,
       ...this.attributesToExcludeFromRender,
     }, [