aloha-vue 1.2.109 → 1.2.111

package/docs/src/views/Functions/Utils/PageUtilsIsArrayOfArrays/PageUtilsIsArrayOfArraysExample/compositionAPI/JsAPI.js

@@ -11,6 +11,8 @@ isArrayOfArrays([[], [], []]);
 isArrayOfArrays([1, 2, 3]);
 // ${ isArrayOfArrays([1, 2, 3]) }
 
+isArrayOfArrays([]);
+// ${ isArrayOfArrays([]) }
 isArrayOfArrays("Aloha");
 // ${ isArrayOfArrays("Aloha") }
 isArrayOfArrays(1);

package/docs/src/views/Functions/Utils/PageUtilsIsArrayOfArrays/i18n/hr.json

@@ -1,4 +1,4 @@
 {
-  "_PAGE_UTILS_IS_ARRAY_OF_ARRAYS_ARGUMENTS_VALUE_": "_PAGE_UTILS_IS_ARRAY_OF_ARRAYS_ARGUMENTS_VALUE_",
-  "_PAGE_UTILS_IS_ARRAY_OF_ARRAYS_DESCRIPTION_": "_PAGE_UTILS_IS_ARRAY_OF_ARRAYS_DESCRIPTION_"
+  "_PAGE_UTILS_IS_ARRAY_OF_ARRAYS_ARGUMENTS_VALUE_": "Vrijednost koju treba provjeriti.",
+  "_PAGE_UTILS_IS_ARRAY_OF_ARRAYS_DESCRIPTION_": "Provjerava je li ulazna vrijednost niz nizova."
 }

package/docs/src/views/Functions/Utils/PageUtilsIsArrayOfStrings/PageUtilsIsArrayOfStringsExample/compositionAPI/JsAPI.js

@@ -16,7 +16,20 @@ isArrayOfStrings(["Aloha", false]);
 isArrayOfStrings(["Aloha", undefined]);
 // ${ isArrayOfStrings(["Aloha", undefined]) }
 isArrayOfStrings(["Aloha", null]);
-// ${ isArrayOfStrings(["Aloha", null]) }`;
+// ${ isArrayOfStrings(["Aloha", null]) }
+
+isArrayOfStrings([]);
+// ${ isArrayOfStrings([]) }
+isArrayOfStrings("Aloha");
+// ${ isArrayOfStrings("Aloha") }
+isArrayOfStrings(1);
+// ${ isArrayOfStrings(1) }
+isArrayOfStrings(undefined);
+// ${ isArrayOfStrings(undefined) }
+isArrayOfStrings(null);
+// ${ isArrayOfStrings(null) }
+isArrayOfStrings({});
+// ${ isArrayOfStrings({}) }`;
 
   return {
     codeJs,

package/docs/src/views/Functions/Utils/PageUtilsIsArrayOfStrings/i18n/hr.json

@@ -1,4 +1,4 @@
 {
-  "_PAGE_UTILS_IS_ARRAY_OF_STRINGS_ARGUMENTS_VALUE_": "_PAGE_UTILS_IS_ARRAY_OF_STRINGS_ARGUMENTS_VALUE_",
-  "_PAGE_UTILS_IS_ARRAY_OF_STRINGS_DESCRIPTION_": "_PAGE_UTILS_IS_ARRAY_OF_STRINGS_DESCRIPTION_"
+  "_PAGE_UTILS_IS_ARRAY_OF_STRINGS_ARGUMENTS_VALUE_": "Vrijednost koju treba provjeriti.",
+  "_PAGE_UTILS_IS_ARRAY_OF_STRINGS_DESCRIPTION_": "Provjerava je li ulazna vrijednost niz stringova."
 }

package/docs/src/views/Functions/i18n/hr.json

@@ -2,5 +2,5 @@
   "_PAGE_FUNCTIONS_ARGUMENTS_HEADER_": "Argumenti",
   "_PAGE_FUNCTIONS_IMPORT_COMPOSITION_API_HEADER_": "Import kao kompozicijski API",
   "_PAGE_FUNCTIONS_IMPORT_FUNCTION_HEADER_": "Import kao funkcija",
-  "_PAGE_FUNCTIONS_TESTS_HEADER_": "Tests"
+  "_PAGE_FUNCTIONS_TESTS_HEADER_": "Testovi"
 }

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

@@ -55,6 +55,56 @@ export default {
       },
     ];
 
+    const columnsGrouped = [
+      {
+        id: "column1",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_1_",
+        group: ["Group 1", "Group 1.3"],
+        width: 500,
+      },
+      {
+        id: "column6",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_2_",
+        group: ["Group 1", "Group 1.1", "Group 1.1.1"],
+      },
+      {
+        id: "column7",
+        keyLabel: "id",
+        label: "_A_TABLE_COLUMN_3_",
+        group: ["Group 1.1", "Group 1.1.2", "Group 1"],
+      },
+      {
+        id: "column2",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_4_",
+        group: ["Group 1", "Group 1.2"],
+      },
+      {
+        id: "column3",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_5_",
+        group: ["Group 2", "Group 2.1"],
+      },
+      {
+        id: "column4",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_6_",
+        group: ["_A_TABLE_COLUMN_6_", "Group 2.2"],
+      },
+      {
+        id: "column5",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_7_",
+      },
+      {
+        id: "column6",
+        keyLabel: "aloha",
+        label: "_A_TABLE_COLUMN_8_",
+      },
+    ];
+
     const data = ref([]);
 
     const setData = () => {
@@ -74,6 +124,7 @@ export default {
       codeHtml,
       codeJs,
       columns,
+      columnsGrouped,
       data,
     };
   },

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

@@ -11,3 +11,10 @@ aloha-example(
       label="_A_TABLE_GROUP_SIMPLE_LABEL_"
       key-id="id"
     )
+    a-table(
+      :columns="columnsGrouped"
+      :data="data"
+      label="_A_TABLE_GROUP_SIMPLE_LABEL_"
+      key-id="id"
+      :is-simple-table="true"
+    )

package/package.json

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

package/src/ADropdown/ADropdown.js

@@ -110,7 +110,7 @@ export default {
       default: "button",
     },
     buttonText: {
-      type: [String, Number, Object],
+      type: [String, Number, Object, Array],
       required: false,
       default: undefined,
     },
@@ -125,12 +125,12 @@ export default {
       default: undefined,
     },
     buttonTextScreenReader: {
-      type: String,
+      type: [String, Number, Object, Array],
       required: false,
       default: undefined,
     },
     buttonTitle: {
-      type: String,
+      type: [String, Number, Object, Array],
       required: false,
       default: undefined,
     },

package/src/ATable/ATable.js

@@ -9,12 +9,12 @@ import AGet from "../AGet/AGet";
 import ALoading from "../ALoading/ALoading";
 import APagination from "../APagination/APagination";
 import ATableHeader from "./ATableHeader/ATableHeader";
+import ATableGroupedHeader from "./ATableGroupedHeader/ATableGroupedHeader";
 import ATablePreviewRight from "./ATablePreviewRight/ATablePreviewRight";
 import ATableTopPanel from "./ATableTopPanel/ATableTopPanel";
 import ATableTr from "./ATableTr/ATableTr";
 import ATranslation from "../ATranslation/ATranslation";
 
-import AMobileAPI from "../compositionAPI/AMobileAPI";
 import ColumnsAPI from "./compositionAPI/ColumnsAPI";
 import ColumnsOrderingAPI from "./compositionAPI/ColumnsOrderingAPI";
 import FocusTableAPI from "./compositionAPI/FocusTableAPI";
@@ -25,6 +25,7 @@ import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
 import PreviewAPI from "./compositionAPI/PreviewAPI";
 import RowsAPI from "./compositionAPI/RowsAPI";
 import ScrollControlAPI from "./compositionAPI/ScrollControlAPI";
+import SimpleTableAPI from "./compositionAPI/SimpleTableAPI";
 import SortAPI from "./compositionAPI/SortAPI";
 import SortChangeAPI from "./compositionAPI/SortChangeAPI";
 import StickyAPI from "./compositionAPI/StickyAPI";
@@ -128,6 +129,11 @@ export default {
       required: false,
       default: false,
     },
+    isActionIconVisible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     isColumnsDnd: {
       type: Boolean,
       required: false,
@@ -154,6 +160,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    isSimpleTable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isSortingMultiColumn: {
       type: Boolean,
       required: false,
@@ -389,7 +400,6 @@ export default {
       columnActionsWidthLocal: computed(() => this.columnActionsWidth),
       columnWidthDefault: computed(() => this.columnWidthDefault),
       isActionColumnVisible: computed(() => this.isActionColumnVisible),
-      isColumnsDnd: computed(() => this.isColumnsDnd),
       isLoadingOptions: computed(() => this.isLoadingOptions),
       isLoadingTable: computed(() => this.isLoadingTable),
       rowActions: computed(() => this.rowActions),
@@ -398,12 +408,19 @@ export default {
     };
   },
   setup(props, context) {
+    const {
+      isActionIconVisibleLocal,
+      isColumnsDndLocal,
+      isMobile,
+      modelIsTableWithoutScrollStartLocal,
+    } = SimpleTableAPI(props);
+
     const {
       columnsScrollInvisible,
+      groupedHeaderRef,
       indexFirstScrollInvisibleColumn,
       isMultipleActionsActive,
       modelColumnsVisibleLocal,
-      modelIsTableWithoutScroll,
       tableGrandparentRef,
       tableRef,
     } = VariablesAPI(props);
@@ -433,15 +450,12 @@ export default {
       countNotHiddenColumns,
     } = ColumnsAPI(props, {
       columnsScrollInvisible,
+      groupedHeaderRef,
       indexFirstScrollInvisibleColumn,
       modelColumnsVisibleLocal,
-      modelIsTableWithoutScroll,
+      modelIsTableWithoutScroll: modelIsTableWithoutScrollStartLocal,
     });
 
-    const {
-      isMobileWidth: isMobile,
-    } = AMobileAPI();
-
     const {
       dataSorted,
       initModelSort,
@@ -491,7 +505,7 @@ export default {
       isMobile,
       isMultipleActionsActive,
       modelColumnsVisibleLocal,
-      modelIsTableWithoutScroll,
+      modelIsTableWithoutScroll: modelIsTableWithoutScrollStartLocal,
     });
 
     const {
@@ -501,13 +515,14 @@ export default {
       checkVisibleColumns,
       columnIdsGroupByLocked,
       columnsFilteredForRenderIndexesMapping,
+      groupedHeaderRef,
     });
 
     const {
       isRowActionsStickyLocal,
     } = StickyAPI(props, {
       isMobile,
-      modelIsTableWithoutScroll,
+      modelIsTableWithoutScroll: modelIsTableWithoutScrollStartLocal,
     });
 
     const {
@@ -615,9 +630,11 @@ export default {
     provide("currentMultipleActions", currentMultipleActions);
     provide("hasPreview", hasPreview);
     provide("indexFirstScrollInvisibleColumn", indexFirstScrollInvisibleColumn);
+    provide("isActionIconVisible", isActionIconVisibleLocal);
+    provide("isColumnsDnd", isColumnsDndLocal);
     provide("isMobile", isMobile);
     provide("isMultipleActionsActive", isMultipleActionsActive);
-    provide("modelIsTableWithoutScroll", modelIsTableWithoutScroll);
+    provide("modelIsTableWithoutScroll", modelIsTableWithoutScrollStartLocal);
     provide("onTogglePreview", onTogglePreview);
     provide("previewRightRowIndex", previewRightRowIndex);
     provide("previewRightRowIndexLast", previewRightRowIndexLast);
@@ -648,6 +665,7 @@ export default {
       columnsOrdered,
       deleteRow,
       emptyText,
+      groupedHeaderRef,
       hasMultipleActions,
       hasRows,
       hasViews,
@@ -658,7 +676,7 @@ export default {
       isViewTableVisible,
       limit,
       modelColumnsVisibleLocal,
-      modelIsTableWithoutScroll,
+      modelIsTableWithoutScrollStartLocal,
       modelSortLocal,
       mousedownResizePreviewRight,
       mousemoveResizePreviewRight,
@@ -737,7 +755,7 @@ export default {
     return h("div", {
       ref: "tableGrandparentRef",
       class: ["a_table__grandparent", {
-        a_table_mobile: this.isMobile,
+        a_table_mobile: !this.isSimpleTable && this.isMobile,
       }],
     }, [
       this.$slots.tablePrepend &&
@@ -747,7 +765,7 @@ export default {
       h("div", {
         ref: "aTableRef",
         class: ["a_table__parent", {
-          a_table__parent_scrollable: !this.modelIsTableWithoutScroll,
+          a_table__parent_scrollable: !this.modelIsTableWithoutScrollStartLocal,
         }],
       }, [
         h(ATableTopPanel, {
@@ -791,6 +809,23 @@ export default {
           ],
           ...this.tableRoleAttributes,
         }, [
+          this.isSimpleTable ?
+          h(ATableGroupedHeader, {
+            ref: "groupedHeaderRef",
+            areAllRowsSelected: this.areAllRowsSelected,
+            areAllVisibleRowsSelected: this.areAllVisibleRowsSelected,
+            areSomeRowsSelected: this.areSomeRowsSelected,
+            disabledOptions: this.disabledOptions,
+            disabledSort: this.disabledSort,
+            hasMultipleActions: this.hasMultipleActions,
+            isRowActionsStickyLocal: this.isRowActionsStickyLocal,
+            isSortingMultiColumn: this.isSortingMultiColumn,
+            modelSort: this.modelSortLocal,
+            rowsLocalLength: this.rowsLocalLength,
+            showFirstSortingSequenceNumber: this.showFirstSortingSequenceNumber,
+            sortingSequenceNumberClass: this.sortingSequenceNumberClass,
+            onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
+          }) :
           h(ATableHeader, {
             areAllRowsSelected: this.areAllRowsSelected,
             areAllVisibleRowsSelected: this.areAllVisibleRowsSelected,

package/src/ATable/ATableGroupedHeader/ATableGroupedHeader.js

@@ -0,0 +1,104 @@
+import {
+  h,
+} from "vue";
+
+import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
+import ATableHeaderThAction from "../ATableHeaderThAction/ATableHeaderThAction";
+import ColumnsGroupedAPI from "./compositionAPI/ColumnsGroupedAPI";
+
+export default {
+  name: "ATableGroupedHeader",
+  components: {
+    ATableHeaderTh,
+    ATableHeaderThAction,
+  },
+  props: {
+    areAllRowsSelected: {
+      type: Boolean,
+      required: true,
+    },
+    areAllVisibleRowsSelected: {
+      type: Boolean,
+      required: true,
+    },
+    areSomeRowsSelected: {
+      type: Boolean,
+      required: true,
+    },
+    disabledOptions: {
+      type: Boolean,
+      required: false,
+    },
+    disabledSort: {
+      type: Boolean,
+      required: false,
+    },
+    hasMultipleActions: {
+      type: Boolean,
+      required: true,
+    },
+    isRowActionsStickyLocal: {
+      type: Boolean,
+      required: true,
+    },
+    isSortingMultiColumn: {
+      type: Boolean,
+      required: false,
+    },
+    modelSort: {
+      type: Array,
+      required: true,
+    },
+    rowsLocalLength: {
+      type: Number,
+      required: true,
+    },
+    showFirstSortingSequenceNumber: {
+      type: Boolean,
+      required: false,
+    },
+    sortingSequenceNumberClass: {
+      type: [String, Object],
+      required: false,
+    },
+  },
+  emits: [
+    "setSelectedRowsIndexes",
+  ],
+  inject: [
+    "changeColumnsOrdering",
+    "columnsFilteredForRender",
+    "isActionColumnVisible",
+    "isMobile",
+    "isMultipleActionsActive",
+  ],
+  setup() {
+    const {
+      columnsOrdered,
+      renderedGroupedColumns,
+    } = ColumnsGroupedAPI();
+
+    return {
+      columnsOrdered,
+      renderedGroupedColumns,
+    };
+  },
+  render() {
+    return h("div", {
+      ref: "root",
+      role: "rowgroup",
+      class: "a_table__head",
+    }, [
+      h("div", {
+        class: "a_table__row a_table__head__row",
+        role: "row",
+      }, [
+        this.renderedGroupedColumns,
+        this.isActionColumnVisible && h(ATableHeaderThAction, {
+          disabledOptions: this.disabledOptions,
+          isRowActionsStickyLocal: this.isRowActionsStickyLocal,
+        }),
+      ]),
+    ]);
+  },
+};

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

@@ -0,0 +1,134 @@
+import {
+  computed,
+  h,
+  inject,
+} from "vue";
+
+import ATableHeaderTh from "../../ATableHeaderTh/ATableHeaderTh";
+import ATranslation from "../../../ATranslation/ATranslation";
+
+import {
+  cloneDeep,
+  filter,
+  get,
+  includes,
+  isArray,
+  map,
+  uniqBy,
+} from "lodash-es";
+
+export default function ColumnsGroupedAPI() {
+  const columns = cloneDeep(inject("columnsFilteredForRender"));
+
+  const columnsWithIndexedGroups = computed(() => {
+    return map(columns.value, column => {
+      if (column.group && column.group.length) {
+        column.group = map(column.group, (_group, groupIndex) => {
+          return [
+            _group,
+            groupIndex,
+          ].join("%%%");
+        });
+      }
+
+      return column;
+    });
+  });
+
+  const getRecursiveChildrenForGroup = ({ groups, group, level, columnsOrderedFromGroups }) => {
+    const foundGroupsForCurrentLevel = group ? filter(groups, _group => {
+      return includes(_group, group[level - 1]);
+    }) : groups;
+
+    const uniqGroupsForCurrentLevel = uniqBy(foundGroupsForCurrentLevel, _group => _group[level]);
+
+    const recursiveGroup = map(uniqGroupsForCurrentLevel, _group => {
+      const groupObjectToReturn = {
+        id: _group[level].split("%%%")[0],
+      };
+
+      if (_group.length > level + 1) {
+        groupObjectToReturn.children = get(getRecursiveChildrenForGroup({ groups, group: _group, level: level + 1, columnsOrderedFromGroups }), "recursiveGroup");
+      } else if (_group.length === level + 1) {
+        groupObjectToReturn.columns = filter(columnsWithIndexedGroups.value, column => includes(column.group, _group[level]));
+        columnsOrderedFromGroups.push(...groupObjectToReturn.columns);
+      }
+
+      return groupObjectToReturn;
+    });
+
+    return {
+      columnsOrderedFromGroups,
+      recursiveGroup,
+    };
+  };
+
+  const plainGroupsAndColumns = computed(() => {
+    return map(columnsWithIndexedGroups.value, column => {
+      return get(column, "group", column);
+    });
+  });
+  const onlyGroups = computed(() => {
+    return filter(plainGroupsAndColumns.value, group => isArray(group));
+  });
+  const onlyColumns = computed(() => {
+    return filter(plainGroupsAndColumns.value, group => !isArray(group));
+  });
+  const columnsGrouped = computed(() => {
+    const columnsOrderedFromGroupsLocal = [];
+
+    return getRecursiveChildrenForGroup({ groups: onlyGroups.value, group: null, level: 0, columnsOrderedFromGroups: columnsOrderedFromGroupsLocal });
+  });
+  const columnsOrdered = computed(() => {
+    return [
+      ...columnsGrouped.value.columnsOrderedFromGroups,
+      ...onlyColumns.value,
+    ];
+  });
+
+  const getColumnsForRender = cols => {
+    return map(cols, (column, columnIndex) => {
+      return h(ATableHeaderTh, {
+        ref: "th",
+        column: column,
+        columnIndex: columnIndex,
+        class: "a_table__cell__child_group",
+        columnGroupNames: column.group,
+        hasMultipleActions: false,
+      });
+    });
+  };
+  const getRecursiveGroupForRender = cols => {
+    return map(cols, col => h("div", {
+      class: "a_table__th_group",
+    }, [
+      h("div", {
+        class: "a_table__th_child_group",
+      }, [
+        h("div", {
+          class: "a_table__cell_group",
+        }, [
+          col.id && h(ATranslation, {
+            html: col.id,
+            tag: "span",
+            "aria-hidden": true,
+          }),
+        ]),
+        h("div", {
+          class: "a_table__th_group_container",
+        }, col.children ? getRecursiveGroupForRender(col.children) : getColumnsForRender(col.columns)),
+      ]),
+    ]));
+  };
+  const renderedGroupedColumns = computed(() => {
+    return [
+      ...getRecursiveGroupForRender(columnsGrouped.value.recursiveGroup),
+      ...getColumnsForRender(onlyColumns.value),
+    ];
+  });
+
+  return {
+    columnsOrdered,
+    renderedGroupedColumns,
+  };
+}

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -17,6 +17,11 @@ export default {
       type: Object,
       required: true,
     },
+    columnGroupNames: {
+      type: Array,
+      required: false,
+      default: undefined,
+    },
     columnIndex: {
       type: Number,
       required: true,
@@ -120,6 +125,11 @@ export default {
           this.column.classHeader,
         ],
       }, [
+        this.columnGroupNames && h(ATranslation, {
+          html: this.columnGroupNames,
+          tag: "span",
+          class: "a_sr_only",
+        }),
         h(AButton, {
           class: [
             "a_table__th__btn",

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -27,6 +27,7 @@ export default {
     "changeModelColumnsVisible",
     "columns",
     "columnsOrdered",
+    "isActionIconVisible",
     "modelIsTableWithoutScroll",
   ],
   props: {
@@ -110,7 +111,7 @@ export default {
       h("span", {
         class: "a_sr_only"
       }, "Aktionen"),
-      h(ADropdown, {
+      this.isActionIconVisible && h(ADropdown, {
         buttonClass: "a_btn a_btn_secondary a_table__cell_action__btn",
         buttonTitle: "_A_TABLE_DROPDOWN_OPTIONS_TITLE_",
         buttonTextScreenReader: "_A_TABLE_DROPDOWN_OPTIONS_TITLE_",

package/src/ATable/compositionAPI/ColumnsAPI.js

@@ -10,11 +10,13 @@ import {
 import {
   cloneDeep,
   forEach,
+  get,
   keyBy,
 } from "lodash-es";
 
 export default function ColumnsAPI(props, {
   columnsScrollInvisible = ref([]),
+  groupedHeaderRef = ref({}),
   indexFirstScrollInvisibleColumn = ref(undefined),
   modelColumnsVisibleLocal = ref({}),
   modelIsTableWithoutScroll = ref(false),
@@ -28,6 +30,10 @@ export default function ColumnsAPI(props, {
     return keyBy(columns.value, "id");
   });
 
+  const columnsFromGroupedHeader = computed(() => {
+    return get(groupedHeaderRef, "value.columnsOrdered");
+  });
+
   const columnIdsGroupByLocked = computed(() => {
     const COLUMNS_GROUP_BY_LOCKED = {
       true: [],
@@ -53,6 +59,9 @@ export default function ColumnsAPI(props, {
   });
 
   const columnsOrdered = computed(() => {
+    if (columnsFromGroupedHeader.value && columnsFromGroupedHeader.value.length) {
+      return columnsFromGroupedHeader.value;
+    }
     if (!modelColumnsOrdering.value.length) {
       return [...columnIdsGroupByLocked.value.trueColumns, ...columnIdsGroupByLocked.value.falseColumns];
     }

package/src/ATable/compositionAPI/SimpleTableAPI.js

@@ -0,0 +1,37 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import AMobileAPI from "../../compositionAPI/AMobileAPI";
+
+export default function SimpleTableAPI(props) {
+  const isActionIconVisible = toRef(props, "isActionColumnVisible");
+  const isColumnsDnd = toRef(props, "isColumnsDnd");
+  const isSimpleTable = toRef(props, "isSimpleTable");
+  const modelIsTableWithoutScrollStart = toRef(props, "modelIsTableWithoutScrollStart");
+
+  const {
+    isMobileWidth,
+  } = AMobileAPI();
+
+  const isActionIconVisibleLocal = computed(() => {
+    return !!(isActionIconVisible.value && !isSimpleTable.value);
+  });
+  const isColumnsDndLocal = computed(() => {
+    return !!(isColumnsDnd.value && !isSimpleTable.value);
+  });
+  const isMobile = computed(() => {
+    return !!(isMobileWidth.value && !isSimpleTable.value);
+  });
+  const modelIsTableWithoutScrollStartLocal = computed(() => {
+    return !!(modelIsTableWithoutScrollStart.value && !isSimpleTable.value);
+  });
+
+  return {
+    isActionIconVisibleLocal,
+    isColumnsDndLocal,
+    isMobile,
+    modelIsTableWithoutScrollStartLocal,
+  };
+}

package/src/ATable/compositionAPI/VariablesAPI.js

@@ -7,6 +7,7 @@ export default function VariablesAPI(props) {
   const modelIsTableWithoutScrollStart = toRef(props, "modelIsTableWithoutScrollStart");
 
   const columnsScrollInvisible = ref([]);
+  const groupedHeaderRef = ref(undefined);
   const indexFirstScrollInvisibleColumn = ref(undefined);
   const isMultipleActionsActive = ref(undefined);
   const modelColumnsVisibleLocal = ref({});
@@ -16,6 +17,7 @@ export default function VariablesAPI(props) {
 
   return {
     columnsScrollInvisible,
+    groupedHeaderRef,
     indexFirstScrollInvisibleColumn,
     isMultipleActionsActive,
     modelColumnsVisibleLocal,

package/src/styles/components/ATable.scss

@@ -3,6 +3,8 @@
   --a_table_th_bg: var(--a_color_gray_300);
   --a_table_th_border_vertical_width: 2px;
   --a_table_th_border_vertical_color: var(--a_color_gray_100);
+  --a_table_th_border_horizontal_width: 2px;
+  --a_table_th_border_horizontal_color: var(--a_color_gray_100);
   --a_table_th_border_bottom_width: 2px;
   --a_table_th_border_bottom_color: var(--a_color_gray_500);
   --a_table_th_sorting_bg: #d0e3a4;
@@ -144,6 +146,20 @@
     height: 100%;
   }
 }
+.a_table__th_group_container {
+  display: flex;
+  flex-direction: row;
+}
+.a_table__cell_group {
+  height: 100%;
+  padding: var(--a_table_cell_padding_y) var(--a_table_cell_padding_x);
+}
+.a_table__th_child_group {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
 .a_table__th__btn {
   padding: 0;
   position: relative;
@@ -583,4 +599,22 @@
   .a_table__th + .a_table__th {
     border-left: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
   }
+  .a_table__th_group {
+    width: 100%;
+    &:not(:first-child) {
+      .a_table__cell_group,
+      .a_table__cell__child_group {
+        border-left: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
+      }
+      + .a_table__th {
+        border-left: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
+      }
+    }
+  }
+  .a_table__cell_action {
+    border-left: var(--a_table_th_border_vertical_width) solid var(--a_table_th_border_vertical_color);
+  }
+  .a_table__cell_group {
+    border-bottom: var(--a_table_th_border_horizontal_width) solid var(--a_table_th_border_horizontal_color);
+  }
 }

package/src/utils/__tests__/utils.isArrayOfArrays.test.js

@@ -25,6 +25,10 @@ describe("isArrayOfArrays", () => {
     expect(isArrayOfArrays({})).toBe(false);
   });
 
+  it("should return false if provided with a empty array", () => {
+    expect(isArrayOfArrays([])).toBe(false);
+  });
+
   it("should return false if provided with an array that contains non-array elements", () => {
     const testData = [[1, 2, 3], "This is not an array", [7, 8, 9]];
     const result = isArrayOfArrays(testData);

package/src/utils/__tests__/utils.isArrayOfStrings.test.js

@@ -17,6 +17,10 @@ describe("isArrayOfStrings function", () => {
     expect(result).toBe(false);
   });
 
+  it("should return false if provided with a empty array", () => {
+    expect(isArrayOfStrings([])).toBe(false);
+  });
+
   test("should return false when input is an array but not all elements are strings", () => {
     expect(isArrayOfStrings(["hello", 1234])).toBe(false);
     expect(isArrayOfStrings(["hello", false])).toBe(false);

package/src/utils/utils.js

@@ -35,7 +35,7 @@ function toCorrectFormat(value) {
  * @return {boolean} - True if the input is an array of strings, false otherwise.
  */
 export function isArrayOfStrings(array) {
-  if (!isArray(array)) {
+  if (!isArray(array) || !array.length) {
     return false;
   }
 
@@ -50,7 +50,7 @@ export function isArrayOfStrings(array) {
  * @return {boolean} - True if the input is an array of arrays, false otherwise.
  */
 export function isArrayOfArrays(array) {
-  if (!isArray(array)) {
+  if (!isArray(array) || !array.length) {
     return false;
   }