aloha-vue 1.0.140 → 1.0.141

package/package.json

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

package/src/ATable/ATable.js

@@ -17,14 +17,17 @@ import ATableTopPanel from "./ATableTopPanel/ATableTopPanel";
 import ATableTr from "./ATableTr/ATableTr";
 
 import LimitOffsetAPI from "./compositionAPI/LimitOffsetAPI";
+import MobileAPI from "./compositionAPI/MobileAPI";
+import MobileColumnsAPI from "./compositionAPI/MobileColumnsAPI";
 import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
 import PreviewAPI from "./compositionAPI/PreviewAPI";
 import RowsAPI from "./compositionAPI/RowsAPI";
 import ScrollControlAPI from "./compositionAPI/ScrollControlAPI";
+import TableAttributesAPI from "./compositionAPI/TableAttributesAPI";
 import TableColumnsAPI from "./compositionAPI/TableColumnsAPI";
 import TableColumnsVisibleAPI from "./compositionAPI/TableColumnsVisibleAPI";
-import TableFiltersAPI from "./compositionAPI/TableFiltersAPI";
 import TableColumnsVisibleFunctionAPI from "./compositionAPI/TableColumnsVisibleFunctionAPI";
+import TableFiltersAPI from "./compositionAPI/TableFiltersAPI";
 
 import {
   getModelColumnsOrderingDefault,
@@ -66,6 +69,12 @@ export default {
       required: false,
       default: undefined,
     },
+    countVisibleMobileColumns: {
+      type: Number,
+      required: false,
+      default: 4,
+      validator: value => value > 0,
+    },
     data: {
       type: [Array, Object, Promise],
       required: false,
@@ -150,6 +159,12 @@ export default {
       required: false,
       default: 10,
     },
+    mobileWidth: {
+      type: Number,
+      required: false,
+      default: 768,
+      validator: value => value >= 0,
+    },
     modelColumnsOrdering: {
       type: Array,
       required: false,
@@ -276,6 +291,10 @@ export default {
       modelColumnsVisibleLocal,
     } = TableColumnsVisibleAPI();
 
+    const {
+      isMobile,
+    } = MobileAPI(props);
+
     const {
       hasRows,
       limit,
@@ -311,6 +330,7 @@ export default {
       modelIsTableWithoutScroll,
     } = ScrollControlAPI(props, context, {
       columnsOrdered,
+      isMobile,
       isMultipleActionsActive,
       modelColumnsVisibleLocal,
     });
@@ -369,13 +389,29 @@ export default {
       offset,
     });
 
+    const {
+      tableChildRole,
+      tableRoleAttributes,
+    } = TableAttributesAPI({
+      isMobile,
+    });
+
+    const {
+      allVisibleMobileColumns,
+    } = MobileColumnsAPI({
+      columnsOrdered,
+      isMobile,
+      modelColumnsVisibleLocal,
+    });
+
     provide("changeModelIsTableWithoutScroll", changeModelIsTableWithoutScroll);
     provide("columnsOrdered", columnsOrdered);
-    provide("columnsVisibleAdditionalSpaceForOneGrow", columnsVisibleAdditionalSpaceForOneGrow);
     provide("columnsScrollInvisible", columnsScrollInvisible);
+    provide("columnsVisibleAdditionalSpaceForOneGrow", columnsVisibleAdditionalSpaceForOneGrow);
     provide("currentMultipleActions", currentMultipleActions);
     provide("hasPreview", hasPreview);
     provide("indexFirstScrollInvisibleColumn", indexFirstScrollInvisibleColumn);
+    provide("isMobile", isMobile);
     provide("isMultipleActionsActive", isMultipleActionsActive);
     provide("modelIsTableWithoutScroll", modelIsTableWithoutScroll);
     provide("onTogglePreview", onTogglePreview);
@@ -389,6 +425,10 @@ export default {
 
 
     return {
+      allVisibleMobileColumns,
+      isMobile,
+      tableRoleAttributes,
+      tableChildRole,
       aTableRef,
       tableGrandparentRef,
       checkVisibleColumns,
@@ -537,7 +577,9 @@ export default {
   render() {
     return h("div", {
       ref: "tableGrandparentRef",
-      class: "a_table__grandparent",
+      class: ["a_table__grandparent", {
+        a_table_mobile: this.isMobile,
+      }],
     }, [
       this.hasFilters && h(ATableFiltersTop, {
         filtersGroup: this.filtersGroup,
@@ -579,7 +621,7 @@ export default {
           }, this.$slots),
           h("div", {
             class: "a_table",
-            role: "table",
+            ...this.tableRoleAttributes,
           }, [
             h(ATableHeader, {
               areAllRowsSelected: this.areAllRowsSelected,
@@ -589,9 +631,11 @@ export default {
             }),
             h("div", {
               class: "a_table__body",
-              role: "rowgroup",
+              role: this.tableChildRole,
             }, this.rowsLocal.map((row, rowIndex) => {
               return h(ATableTr, {
+                allVisibleMobileColumns: this.allVisibleMobileColumns,
+                countVisibleMobileColumns: this.countVisibleMobileColumns,
                 row,
                 rowIndex,
                 selectedRowsIndexes: this.selectedRowsIndexes,
@@ -612,9 +656,11 @@ export default {
             })),
             (this.hasRows && this.hasRowsFooter) && h("div", {
               class: "a_table__footer",
-              role: "rowgroup",
+              role: this.tableChildRole,
             }, this.rowsFooter.map((row, rowIndex) => {
               return h(ATableTr, {
+                allVisibleMobileColumns: this.allVisibleMobileColumns,
+                countVisibleMobileColumns: this.countVisibleMobileColumns,
                 row,
                 rowIndex,
                 selectedRowsIndexes: this.selectedRowsIndexes,

package/src/ATable/ATableHeader/ATableHeader.js

@@ -32,13 +32,15 @@ export default {
     "setSelectedRowsIndexes",
   ],
   inject: [
-    "isActionColumnVisible",
     "changeColumnsOrdering",
     "columnsOrdered",
+    "isActionColumnVisible",
+    "isMobile",
     "isMultipleActionsActive",
   ],
   setup(props, { emit }) {
     const {
+      columnIndexDraggable,
       dragstart,
       dragenter,
       dragleave,
@@ -48,6 +50,7 @@ export default {
       root,
     } = DragAndDropParentAPI({
       classOver: "a_table__th_over",
+      classOverRight: "a_table__th_over_right",
       classOverParent: "a_table__th"
     });
 
@@ -56,6 +59,7 @@ export default {
     };
 
     return {
+      columnIndexDraggable,
       dragstart,
       dragenter,
       dragleave,
@@ -68,6 +72,9 @@ export default {
     };
   },
   render() {
+    if (this.isMobile) {
+      return "";
+    }
     return h("div", {
       ref: "root",
       role: "rowgroup",
@@ -98,6 +105,7 @@ export default {
             ref: "th",
             column: column,
             columnIndex: columnIndex,
+            columnIndexDraggable: this.columnIndexDraggable,
             "model-sort": this.modelSort,
             onDragstartParent: this.dragstart,
             onDragenterParent: this.dragenter,

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -23,6 +23,11 @@ export default {
       type: Number,
       required: true,
     },
+    columnIndexDraggable: {
+      type: Number,
+      required: false,
+      default: -1,
+    },
     modelSort: {
       type: String,
       required: false,
@@ -50,7 +55,7 @@ export default {
       isLocked,
       root,
     } = DragAndDropChildAPI(props, context, {
-      classOver: "a_table__th_over",
+      classOverString: "a_table__th_over",
     });
 
     return {

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -34,15 +34,17 @@ export default {
   ],
   setup() {
     const {
-      dragstart,
+      columnIndexDraggable,
+      dragend,
       dragenter,
       dragleave,
-      dragend,
+      dragstart,
       drop,
       isDragstart,
       root,
     } = DragAndDropParentAPI({
       classOver: "a_table__th__dropdown__li_over",
+      classOverRight: "a_table__th__dropdown__li_over_right",
       classOverParent: "a_table__th__dropdown__li",
     });
 
@@ -52,6 +54,7 @@ export default {
     } = ColumnSearchAPI();
 
     return {
+      columnIndexDraggable,
       dragstart,
       dragenter,
       dragleave,
@@ -193,6 +196,7 @@ export default {
               return h(ATableHeaderThActionItem, {
                 column,
                 columnIndex,
+                columnIndexDraggable: this.columnIndexDraggable,
                 searchColumnModel: this.searchColumnModel,
                 onDragstartParent: this.dragstart,
                 onDragenterParent: this.dragenter,

package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem.js

@@ -30,6 +30,11 @@ export default {
       type: Number,
       required: true,
     },
+    columnIndexDraggable: {
+      type: Number,
+      required: false,
+      default: -1,
+    },
     searchColumnModel: {
       type: String,
       required: true,
@@ -57,7 +62,7 @@ export default {
       isLocked,
       root,
     } = DragAndDropChildAPI(props, context, {
-      classOver: "a_table__th__dropdown__li_over",
+      classOverString: "a_table__th__dropdown__li_over",
     });
 
     const {

package/src/ATable/ATableTd/ATableTd.js

@@ -3,11 +3,10 @@ import {
   resolveComponent,
 } from "vue";
 
-import ColumnStylesAPI from "../compositionAPI/ColumnStylesAPI";
+import ATranslation from "../../ATranslation/ATranslation";
+
+import AttributesAPI from "./compositionAPI/AttributesAPI";
 
-import {
-  isClickOnLinkOrButton
-} from "../utils/utils";
 import {
   cloneDeep,
   forEach,
@@ -45,17 +44,18 @@ export default {
   inject: [
     "columnsDefaultValue",
     "hasPreview",
+    "isMobile",
     "onTogglePreview",
     "rowsLocal",
     "valuesForColumnDefault",
   ],
   setup(props) {
     const {
-      columnsStyles,
-    } = ColumnStylesAPI(props);
+      attributesForTd,
+    } = AttributesAPI(props);
 
     return {
-      columnsStyles,
+      attributesForTd,
     };
   },
   computed: {
@@ -104,31 +104,6 @@ export default {
       return !!this.slot;
     },
 
-    attributesForTd() {
-      const ATTRIBUTES = {
-        role: "cell",
-        class: [
-          "a_table__td a_table__cell",
-          {
-            a_table__cell_click: this.hasPreview && !this.isFooter,
-          },
-        ],
-        style: this.columnsStyles,
-      };
-      if (this.hasPreview && !this.isFooter) {
-        ATTRIBUTES.onClick = $event => {
-          if (isClickOnLinkOrButton($event)) {
-            return;
-          }
-          this.onTogglePreview({
-            row: this.row,
-            rowIndex: this.rowIndex,
-          });
-        };
-      }
-      return ATTRIBUTES;
-    },
-
     isLink() {
       return !!this.column.to;
     },
@@ -175,9 +150,9 @@ export default {
     if (this.column.isRender === false) {
       return "";
     }
-    return h(
-      "div", 
-      this.attributesForTd, 
+    const TD = h(
+      "div",
+      this.attributesForTd,
       [
         h("div", {
           class: [
@@ -210,5 +185,18 @@ export default {
             ])
       ]
     );
+
+    if (!this.isMobile) {
+      return TD;
+    }
+    return [
+      h(ATranslation, {
+        text: this.column.label,
+        tag: "dt",
+      }),
+      h("dd", {}, [
+        TD,
+      ]),
+    ];
   },
 };

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

@@ -0,0 +1,56 @@
+import {
+  computed,
+  inject,
+  toRef,
+} from "vue";
+
+import ColumnStylesAPI from "../../compositionAPI/ColumnStylesAPI";
+
+import {
+  isClickOnLinkOrButton,
+} from "../../utils/utils";
+
+export default function AttributesAPI(props) {
+  const isFooter = toRef(props, "isFooter");
+  const row = toRef(props, "row");
+  const rowIndex = toRef(props, "rowIndex");
+
+  const hasPreview = inject("hasPreview");
+  const isMobile = inject("isMobile");
+  const onTogglePreview = inject("onTogglePreview");
+
+  const {
+    columnsStyles,
+  } = ColumnStylesAPI(props);
+
+  const attributesForTd = computed(() => {
+    const ATTRIBUTES = {
+      class: [
+        "a_table__td a_table__cell",
+        {
+          a_table__cell_click: hasPreview.value && !isFooter.value,
+        },
+      ],
+      style: columnsStyles.value,
+    };
+    if (!isMobile.value) {
+      ATTRIBUTES.role = "cell";
+    }
+    if (hasPreview.value && !isFooter.value) {
+      ATTRIBUTES.onClick = $event => {
+        if (isClickOnLinkOrButton($event)) {
+          return;
+        }
+        onTogglePreview({
+          row: row.value,
+          rowIndex: rowIndex.value,
+        });
+      };
+    }
+    return ATTRIBUTES;
+  });
+
+  return {
+    attributesForTd,
+  };
+}

package/src/ATable/ATableTr/ATableTr.js

@@ -8,7 +8,11 @@ import ATableTd from "../ATableTd/ATableTd";
 import ATableTdAction from "../ATableTdAction/ATableTdAction";
 import AOneCheckbox from "../../ui/AOneCheckbox/AOneCheckbox";
 
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import MobileAPI from "./compositionAPI/MobileAPI";
+
 import {
+  forEach,
   get,
   isFunction,
 } from "lodash-es";
@@ -16,6 +20,14 @@ import {
 export default {
   name: "ATableTr",
   props: {
+    allVisibleMobileColumns: {
+      type: Array,
+      required: true,
+    },
+    countVisibleMobileColumns: {
+      type: Number,
+      required: true,
+    },
     row: {
       type: Object,
       required: true,
@@ -54,52 +66,33 @@ export default {
       return false;
     });
 
+    const {
+      rowAttributes,
+    } = AttributesAPI(props);
+
+    const {
+      isAllColumnsVisibleMobile,
+      isBtnToggleAllColumnsVisible,
+      textBtnToggleAllColumns,
+      toggleAllColumnsVisibleMobile,
+    } = MobileAPI(props);
+
     return {
+      isAllColumnsVisibleMobile,
+      isBtnToggleAllColumnsVisible,
       isCheckboxDisabled,
       isMultipleActionsActive,
+      rowAttributes,
+      textBtnToggleAllColumns,
+      toggleAllColumnsVisibleMobile,
     };
   },
   inject: [
     "columnsOrdered",
-    "hasPreview",
     "isActionColumnVisible",
-    "previewRightRowIndex",
-    "previewRightRowIndexLast",
-    "tableId",
+    "isMobile",
   ],
   computed: {
-    rowId() {
-      return `${ this.tableId }_${ this.rowIndex }`;
-    },
-
-    rowAttributes() {
-      const ATTRIBUTES = {
-        id: this.rowId,
-        class: this.rowClass,
-        role: "row",
-      };
-      if (this.hasPreview) {
-        ATTRIBUTES.tabindex = -1;
-      }
-      return ATTRIBUTES;
-    },
-
-    rowClass() {
-      return ["a_table__row a_table__row_hover", {
-        a_table__row_focus: this.isPreviewRightForCurrentRowOpen,
-        a_table__row_focus_was: this.isPreviewRightForCurrentRowWasOpen,
-      }];
-    },
-
-    isPreviewRightForCurrentRowOpen() {
-      return this.rowIndex === this.previewRightRowIndex;
-    },
-
-    isPreviewRightForCurrentRowWasOpen() {
-      return !this.isPreviewRightForCurrentRowOpen &&
-        this.rowIndex === this.previewRightRowIndexLast;
-    },
-
     isRowSelected() {
       return !!this.selectedRowsIndexes[this.rowIndex];
     },
@@ -110,6 +103,47 @@ export default {
     },
   },
   render() {
+    let tds = [];
+    if (this.isMobile && !this.isAllColumnsVisibleMobile) {
+      forEach(this.allVisibleMobileColumns, (column, columnIndex) => {
+        if (columnIndex + 1 > this.countVisibleMobileColumns) {
+          return false;
+        }
+        tds.push(
+          h(ATableTd, {
+            column,
+            columnIndex,
+            row: this.row,
+            rowIndex: this.rowIndex,
+            isFooter: this.isFooter,
+          }, this.$slots)
+        );
+      });
+    } else {
+      tds = this.columnsOrdered.map((column, columnIndex) => {
+        return h(ATableTd, {
+          column,
+          columnIndex,
+          row: this.row,
+          rowIndex: this.rowIndex,
+          isFooter: this.isFooter,
+        }, this.$slots);
+      });
+    }
+
+    const ACTIONS = this.isActionColumnVisible &&
+      h(ATableTdAction, {
+        row: this.row,
+        rowIndex: this.rowIndex,
+        isFooter: this.isFooter,
+      }, this.$slots);
+
+    const CHILDREN = this.isMobile ?
+      h("dl", {
+        class: "a_table_mobile__dl",
+      }, tds) :
+      tds;
+
     return h("div", this.rowAttributes, [
       this.isMultipleActionsActive && h("div", {
         scope: "row",
@@ -123,20 +157,18 @@ export default {
           "onUpdate:modelValue": this.toggleCheckbox,
         }),
       ]),
-      this.columnsOrdered.map((column, columnIndex) => {
-        return h(ATableTd, {
-          column,
-          columnIndex,
-          row: this.row,
-          rowIndex: this.rowIndex,
-          isFooter: this.isFooter,
-        }, this.$slots);
-      }),
-      this.isActionColumnVisible && h(ATableTdAction, {
-        row: this.row,
-        rowIndex: this.rowIndex,
-        isFooter: this.isFooter,
-      }, this.$slots),
+      CHILDREN,
+      this.isMobile ?
+        h("div", {
+          class: "a_table_mobile__actions_parent",
+        }, [
+          this.isBtnToggleAllColumnsVisible && h("button", {
+            class: "a_btn a_btn_link a_table_mobile__columns_btn_toggle",
+            onClick: this.toggleAllColumnsVisibleMobile,
+          }, this.textBtnToggleAllColumns),
+          ACTIONS,
+        ]) :
+        ACTIONS,
     ]);
   },
 };

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

@@ -0,0 +1,55 @@
+import {
+  computed,
+  inject,
+  toRef,
+} from "vue";
+
+export default function AttributesAPI(props) {
+  const rowIndex = toRef(props, "rowIndex");
+
+  const hasPreview = inject("hasPreview");
+  const isMobile = inject("isMobile");
+  const previewRightRowIndex = inject("previewRightRowIndex");
+  const previewRightRowIndexLast = inject("previewRightRowIndexLast");
+  const tableId = inject("tableId");
+
+  const rowId = computed(() => {
+    return `${ tableId.value }_${ rowIndex.value }`;
+  });
+
+  const isPreviewRightForCurrentRowOpen = computed(() => {
+    return rowIndex.value === previewRightRowIndex.value;
+  });
+
+  const isPreviewRightForCurrentRowWasOpen = computed(() => {
+    return !isPreviewRightForCurrentRowOpen.value &&
+      rowIndex.value === previewRightRowIndexLast.value;
+  });
+
+  const rowClass = computed(() => {
+    return ["a_table__row a_table__row_hover", {
+      a_table__row_focus: isPreviewRightForCurrentRowOpen.value,
+      a_table__row_focus_was: isPreviewRightForCurrentRowWasOpen.value,
+    }];
+  });
+
+  const roleLocal = computed(() => {
+    return isMobile.value ? "listitem" : "row";
+  });
+
+  const rowAttributes = computed(() => {
+    const ATTRIBUTES = {
+      id: rowId.value,
+      class: rowClass.value,
+      role: roleLocal.value,
+    };
+    if (hasPreview.value) {
+      ATTRIBUTES.tabindex = -1;
+    }
+    return ATTRIBUTES;
+  });
+
+  return {
+    rowAttributes,
+  };
+}

package/src/ATable/ATableTr/compositionAPI/MobileAPI.js

@@ -0,0 +1,47 @@
+import {
+  computed, inject,
+  ref, toRef,
+} from "vue";
+
+export default function MobileAPI(props) {
+  const allVisibleMobileColumns = toRef(props, "allVisibleMobileColumns");
+  const countVisibleMobileColumns = toRef(props, "countVisibleMobileColumns");
+
+  const isMobile = inject("isMobile");
+
+  const isAllColumnsVisibleMobile = ref(false);
+
+  const countInvisibleMobileColumns = computed(() => {
+    return allVisibleMobileColumns.value.length - countVisibleMobileColumns.value;
+  });
+
+  const isBtnToggleAllColumnsVisible = computed(() => {
+    return isMobile.value &&
+      (allVisibleMobileColumns.value.length > countVisibleMobileColumns.value);
+  });
+
+  const textOpenBtnToggleAllColumns = computed(() => {
+    return countInvisibleMobileColumns.value === 1 ?
+      `+ ${ countInvisibleMobileColumns.value } Feld` :
+      `+ ${ countInvisibleMobileColumns.value } Felder`;
+  });
+
+  const textBtnToggleAllColumns = computed(() => {
+    return isAllColumnsVisibleMobile.value ?
+      "Schließen" :
+      textOpenBtnToggleAllColumns.value;
+  });
+
+  const toggleAllColumnsVisibleMobile = $event => {
+    isAllColumnsVisibleMobile.value = !isAllColumnsVisibleMobile.value;
+    $event.stopPropagation();
+  };
+
+
+  return {
+    isAllColumnsVisibleMobile,
+    isBtnToggleAllColumnsVisible,
+    textBtnToggleAllColumns,
+    toggleAllColumnsVisibleMobile,
+  };
+}

package/src/ATable/compositionAPI/DragAndDropChildAPI.js

@@ -5,15 +5,25 @@ import {
   toRef,
 } from "vue";
 
-export default function DragAndDropChildAPI(props, { emit }, { classOver = "" }) {
+export default function DragAndDropChildAPI(props, { emit }, {
+  classOverString = "",
+}) {
   const column = toRef(props, "column");
   const columnIndex = toRef(props, "columnIndex");
+  const columnIndexDraggable = toRef(props, "columnIndexDraggable");
 
   const isLoadingOptions = inject("isLoadingOptions");
   const isColumnsDnd = inject("isColumnsDnd");
 
   const root = ref(null);
 
+  const classOver = computed(() => {
+    if (columnIndexDraggable.value > columnIndex.value) {
+      return classOverString;
+    }
+    return `${ classOverString }_right`;
+  });
+
   const dragstart = $event => {
     $event.target.style.opacity = "0.4";
     $event.dataTransfer.effectAllowed = "move";
@@ -24,13 +34,13 @@ export default function DragAndDropChildAPI(props, { emit }, { classOver = "" })
 
   const dragend = $event => {
     $event.target.style.opacity = "1";
-    $event.target.classList.remove(classOver);
+    $event.target.classList.remove(classOver.value);
     emit("dragendParent");
   };
 
   const dragenter = () => {
-    if (root.value && root.value) {
-      root.value.classList.add(classOver);
+    if (root.value && root.value.classList) {
+      root.value.classList.add(classOver.value);
     }
     emit("dragenterParent", {
       columnIndex: columnIndex.value,
@@ -46,7 +56,7 @@ export default function DragAndDropChildAPI(props, { emit }, { classOver = "" })
 
   const dragleave = () => {
     if (root.value && root.value) {
-      root.value.classList.remove(classOver);
+      root.value.classList.remove(classOver.value);
     }
     emit("dragleaveParent", {
       columnIndex: columnIndex.value,

package/src/ATable/compositionAPI/DragAndDropParentAPI.js

@@ -11,6 +11,7 @@ import {
 
 export default function DragAndDropParentAPI({
   classOver = "",
+  classOverRight = "",
   classOverParent = "",
 }) {
   const root = ref(undefined);
@@ -53,6 +54,7 @@ export default function DragAndDropParentAPI({
     const CHILDREN = root.value.querySelectorAll(`.${ classOverParent }`);
     CHILDREN.forEach(child => {
       child.classList.remove(classOver);
+      child.classList.remove(classOverRight);
     });
   };
 
@@ -63,6 +65,7 @@ export default function DragAndDropParentAPI({
 
 
   return {
+    columnIndexDraggable,
     dragstart,
     dragenter,
     dragleave,

package/src/ATable/compositionAPI/MobileAPI.js

@@ -0,0 +1,26 @@
+import {
+  onBeforeUnmount,
+  ref,
+  toRef,
+} from "vue";
+
+export default function MobileAPI(props) {
+  const mobileWidth = toRef(props, "mobileWidth");
+
+  const isMobile = ref(false);
+
+  const checkMobileWidth = () => {
+    isMobile.value = window.innerWidth <= mobileWidth.value;
+  };
+
+  checkMobileWidth();
+  window.addEventListener("resize", checkMobileWidth);
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", checkMobileWidth);
+  });
+
+  return {
+    isMobile,
+  };
+}

package/src/ATable/compositionAPI/MobileColumnsAPI.js

@@ -0,0 +1,27 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+import {
+  filter,
+} from "lodash-es";
+
+export default function MobileColumnsAPI({
+  columnsOrdered = ref([]),
+  isMobile = ref(false),
+  modelColumnsVisibleLocal = ref({}),
+}) {
+  const allVisibleMobileColumns = computed(() => {
+    if (!isMobile.value) {
+      return [];
+    }
+    return filter(columnsOrdered.value, column => {
+      return !!(column.isRender !== false && modelColumnsVisibleLocal.value[column.id]);
+    });
+  });
+
+  return {
+    allVisibleMobileColumns,
+  };
+}

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -3,7 +3,7 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  toRef,
+  toRef, watch,
 } from "vue";
 
 import {
@@ -14,6 +14,7 @@ import {
 
 export default function ScrollControlAPI(props, { emit }, {
   columnsOrdered = computed(() => []),
+  isMobile = ref(false),
   isMultipleActionsActive = ref(undefined),
   modelColumnsVisibleLocal = ref({}),
 }) {
@@ -84,7 +85,17 @@ export default function ScrollControlAPI(props, { emit }, {
     }
   };
 
+  const setAllDefaultForMobile = () => {
+    columnsScrollInvisible.value = [];
+    columnsVisibleAdditionalSpaceForOneGrow.value = 0;
+    indexFirstScrollInvisibleColumn.value = 1000;
+  };
+
   const checkVisibleColumns = () => {
+    if (isMobile.value) {
+      setAllDefaultForMobile();
+      return;
+    }
     const TABLE_WIDTH_WITHOUT_ACTIONS = tableWidth.value - columnsSpecialWidth.value;
 
     let columnsWidthInOrder = 0;
@@ -127,8 +138,19 @@ export default function ScrollControlAPI(props, { emit }, {
     }
   });
 
+  watch(isMobile, newValue => {
+    if (newValue) {
+      resizeOb.unobserve(aTableRef.value);
+      setAllDefaultForMobile();
+    } else {
+      resizeOb.observe(aTableRef.value);
+    }
+  });
+
   onMounted(() => {
-    resizeOb.observe(aTableRef.value);
+    if (!isMobile.value) {
+      resizeOb.observe(aTableRef.value);
+    }
   });
   onBeforeUnmount(() => {
     resizeOb.unobserve(aTableRef.value);

package/src/ATable/compositionAPI/TableAttributesAPI.js

@@ -0,0 +1,25 @@
+import {
+  computed,
+  ref,
+} from "vue";
+
+export default function TableAttributesAPI({
+  isMobile = ref(false),
+}) {
+  const tableRoleAttributes = computed(() => {
+    const ATTRIBUTES = {};
+    if (!isMobile.value) {
+      ATTRIBUTES.role = "table";
+    }
+    return ATTRIBUTES;
+  });
+
+  const tableChildRole = computed(() => {
+    return isMobile.value ? "list" : "rowgroup";
+  });
+
+  return {
+    tableChildRole,
+    tableRoleAttributes,
+  };
+}

package/src/styles/components/ATable.scss

@@ -1,7 +1,7 @@
 .a_table__parent {
   --a_table_th_bg: #f1f4f7;
-  --a_table_th_border_width: 0 0 3px 0;
-  --a_table_th_border_color: #d0c9c0;
+  --a_table_th_border_bottom_width: 3px;
+  --a_table_th_border_bottom_color: #d0c9c0;
   --a_table_th_sorting_bg: #d0e3a4;
   --a_table_cell_padding_x: .5rem;
   --a_table_cell_padding_y: .5rem;
@@ -18,6 +18,8 @@
   --a_table_preview_right_header_bg: #f1f4f7;
   --a_table_preview_right_header_font_size: 1.5rem;
   --a_table_footer_border_top: 2px solid var(--a_color_gray_800);
+  --a_table_draggable_color: var(--a_color_primary);
+  --a_table_mobile_dt_dd_border_bottom: 1px solid var(--a_color_gray_200);
 
   width: 100%;
   overflow-x: hidden;
@@ -51,15 +53,19 @@
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
-  .a_table__row_hover:hover &,
-  .a_table__row_hover:focus-within & {
-    background-color: var(--a_table_row_hover_bg);
-  }
-  .a_table__row.a_table__row_focus > & {
-     background-color: var(--a_table_row_preview_focus_bg);
-  }
-  .a_table__row.a_table__row_focus_was > & {
-    background-color: var(--a_table_row_preview_focus_was_bg);
+}
+.a_table__grandparent:not(.a_table_mobile) {
+  .a_table__cell {
+    .a_table__row_hover:hover &,
+    .a_table__row_hover:focus-within & {
+      background-color: var(--a_table_row_hover_bg);
+    }
+    .a_table__row.a_table__row_focus > & {
+      background-color: var(--a_table_row_preview_focus_bg);
+    }
+    .a_table__row.a_table__row_focus_was > & {
+      background-color: var(--a_table_row_preview_focus_was_bg);
+    }
   }
 }
 .a_table__cell__child {
@@ -92,16 +98,89 @@
   display: flex;
   align-items: center;
   background-color: var(--a_table_th_bg);
-  border-style: solid;
-  border-width: var(--a_table_th_border_width);
-  border-color: var(--a_table_th_border_color);
+  border-bottom: var(--a_table_th_border_bottom_width) solid var(--a_table_th_border_bottom_color);
 }
 .a_table__th_draggable {
   cursor: move;
 }
 .a_table__th_over {
-  border-left: 10px solid #666;
+  border-left: 6px solid var(--a_table_draggable_color);
+  position: relative;
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: -15px;
+    border: 12px solid transparent;
+  }
+  &:before {
+    top: 0;
+    border-top: 15px solid var(--a_table_draggable_color);
+  }
+  &:after {
+    bottom: calc(-1 * var(--a_table_th_border_bottom_width));
+    border-bottom: 15px solid var(--a_table_draggable_color);
+  }
+}
+.a_table__th_over_right {
+  border-right: 6px solid var(--a_table_draggable_color);
+  position: relative;
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    right: -15px;
+    border: 12px solid transparent;
+  }
+  &:before {
+    top: 0;
+    border-top: 15px solid var(--a_table_draggable_color);
+  }
+  &:after {
+    bottom: calc(-1 * var(--a_table_th_border_bottom_width));
+    border-bottom: 15px solid var(--a_table_draggable_color);
+  }
+}
+
+.a_table__th__dropdown__li_over {
+  border-top: 6px solid var(--a_table_draggable_color);
+  position: relative;
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    top: -15px;
+    border: 12px solid transparent;
+  }
+  &:before {
+    left: 0;
+    border-left: 15px solid var(--a_table_draggable_color);
+  }
+  &:after {
+    right: 0;
+    border-right: 15px solid var(--a_table_draggable_color);
+  }
+}
+.a_table__th__dropdown__li_over_right {
+  border-bottom: 6px solid var(--a_table_draggable_color);
+  position: relative;
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -15px;
+    border: 12px solid transparent;
+  }
+  &:before {
+    left: 0;
+    border-left: 15px solid var(--a_table_draggable_color);
+  }
+  &:after {
+    right: 0;
+    border-right: 15px solid var(--a_table_draggable_color);
+  }
 }
+
 .a_table__th_sorting {
   background-color: var(--a_table_th_sorting_bg);
 }
@@ -172,6 +251,8 @@
 }
 
 .a_table__th__dropdown__ul {
+  --a_table_draggable_color: var(--a_color_primary);
+
   list-style: none;
   margin: 0;
   padding: 0;
@@ -190,9 +271,7 @@
   margin-left: 1rem;
   cursor: move;
 }
-.a_table__th__dropdown__li_over {
-  border-left: 10px solid red;
-}
+
 .a_table__th__dropdown__search {
   padding-top: .75rem;
 }
@@ -322,3 +401,46 @@
 .a_pagination__count__button {
   padding: 0;
 }
+
+.a_table_mobile {
+  .a_table__row {
+    flex-direction: column;
+    border-top: 1px solid;
+    border-top-color: inherit;
+  }
+  .a_table__td {
+    border-bottom: none;
+  }
+}
+
+.a_table_mobile__dl {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  dt, dd {
+    width: 50%;
+    border-bottom: var(--a_table_mobile_dt_dd_border_bottom);
+    display: flex;
+    align-items: center;
+  }
+  dt {
+    font-weight: bolder;
+    padding-right: 1rem;
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-word;
+    hyphens: auto;
+  }
+  .a_table__td {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+.a_table_mobile__actions_parent {
+  display: flex;
+  align-items: center;
+}
+.a_table_mobile__columns_btn_toggle {
+  padding: 0;
+}