aloha-vue 1.2.101 → 1.2.103

package/package.json

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

package/src/ATable/ATable.js

@@ -407,6 +407,7 @@ export default {
     const {
       columnIdsGroupByLocked,
       columnsFilteredForRender,
+      columnsFilteredForRenderIndexesMapping,
       columnsOrdered,
       countNotHiddenColumns,
     } = ColumnsAPI(props, {
@@ -462,6 +463,7 @@ export default {
     } = ColumnsOrderingAPI(props, context, {
       checkVisibleColumns,
       columnIdsGroupByLocked,
+      columnsFilteredForRenderIndexesMapping,
     });
 
     const {

package/src/ATable/ATableHeader/ATableHeader.js

@@ -88,7 +88,8 @@ export default {
     } = DragAndDropParentAPI({
       classOver: "a_table__th_over",
       classOverRight: "a_table__th_over_right",
-      classOverParent: "a_table__th"
+      classOverParent: "a_table__th",
+      inHeader: true,
     });
 
     const {

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -74,6 +74,7 @@ export default {
       root,
     } = DragAndDropChildAPI(props, context, {
       classOverString: "a_table__th_over",
+      inDropdown: false,
     });
 
     const {

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -53,6 +53,7 @@ export default {
       classOver: "a_table__th__dropdown__li_over",
       classOverRight: "a_table__th__dropdown__li_over_right",
       classOverParent: "a_table__th__dropdown__li",
+      inHeader: false,
     });
 
     const {

package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem/ATableHeaderThActionItem.js

@@ -63,6 +63,7 @@ export default {
       root,
     } = DragAndDropChildAPI(props, context, {
       classOverString: "a_table__th__dropdown__li_over",
+      inDropdown: true,
     });
 
     const {

package/src/ATable/ATableTr/ATableTr.js

@@ -176,6 +176,9 @@ export default {
             labelClass: "a_sr_only",
             isLabelTitle: true,
             "onUpdate:modelValue": this.toggleCheckbox,
+            onClick: $event => {
+              $event.stopPropagation();
+            },
           }),
         ]),
         CHILDREN,

package/src/ATable/compositionAPI/ColumnsAPI.js

@@ -9,7 +9,6 @@ import {
 } from "../utils/utils.js";
 import {
   cloneDeep,
-  filter,
   forEach,
   keyBy,
 } from "lodash-es";
@@ -68,17 +67,35 @@ export default function ColumnsAPI(props, {
     return COLUMNS;
   });
 
-
-  const columnsFilteredForRender = computed(() => {
-    return filter(columnsOrdered.value, (column, columnIndex) => {
-      return isColumnVisible({
+  const columnsFilteredForRenderObj = computed(() => {
+    const COLUMNS = [];
+    const COLUMNS_INDEXES_MAPPING = {};
+    forEach(columnsOrdered.value, (column, columnIndex) => {
+      if (isColumnVisible({
         column,
         columnIndex,
         modelIsTableWithoutScroll: modelIsTableWithoutScroll.value,
         modelColumnsVisibleLocal: modelColumnsVisibleLocal.value,
         indexFirstScrollInvisibleColumn: indexFirstScrollInvisibleColumn.value,
-      });
+      })) {
+        COLUMNS_INDEXES_MAPPING[COLUMNS.length] = columnIndex;
+        COLUMNS.push(column);
+      }
     });
+
+    return {
+      columns: COLUMNS,
+      columnsIndexesMapping: COLUMNS_INDEXES_MAPPING,
+    };
+  });
+
+  const columnsFilteredForRenderIndexesMapping = computed(() => {
+    return columnsFilteredForRenderObj.value.columnsIndexesMapping;
+  });
+
+
+  const columnsFilteredForRender = computed(() => {
+    return columnsFilteredForRenderObj.value.columns;
   });
 
   const countNotHiddenColumns = computed(() => {
@@ -98,6 +115,7 @@ export default function ColumnsAPI(props, {
   return {
     columnIdsGroupByLocked,
     columnsFilteredForRender,
+    columnsFilteredForRenderIndexesMapping,
     columnsOrdered,
     countNotHiddenColumns,
   };

package/src/ATable/compositionAPI/ColumnsOrderingAPI.js

@@ -20,14 +20,20 @@ export default function ColumnsOrderingAPI(props, { emit }, {
     trueColumns: [],
     falseColumns: [],
   })),
+  columnsFilteredForRenderIndexesMapping = computed(() => ({})),
 }) {
   const columns = toRef(props, "columns");
   const modelColumnsOrdering = toRef(props, "modelColumnsOrdering");
 
-  const changeColumnsOrdering = ({ columnIndexDraggable, columnIndexOver, reset }) => {
+  const changeColumnsOrdering = ({ columnIndexDraggable, columnIndexOver, reset, inHeader }) => {
     if (columnIndexDraggable === columnIndexOver && !reset) {
       return;
     }
+    // Not all columns may be shown, so the order may be out of order
+    if (inHeader) {
+      columnIndexDraggable = columnsFilteredForRenderIndexesMapping.value[columnIndexDraggable];
+      columnIndexOver = columnsFilteredForRenderIndexesMapping.value[columnIndexOver];
+    }
     let modelColumnsOrderingLocal = [];
     if (reset) {
       modelColumnsOrderingLocal = [...columnIdsGroupByLocked.value.true, ...columnIdsGroupByLocked.value.false];

package/src/ATable/compositionAPI/DragAndDropChildAPI.js

@@ -5,8 +5,11 @@ import {
   toRef,
 } from "vue";
 
+const CLASS_DRAG = "a_table__drag_element";
+
 export default function DragAndDropChildAPI(props, { emit }, {
   classOverString = "",
+  inDropdown = false,
 }) {
   const column = toRef(props, "column");
   const columnIndex = toRef(props, "columnIndex");
@@ -25,7 +28,11 @@ export default function DragAndDropChildAPI(props, { emit }, {
   });
 
   const dragstart = $event => {
-    $event.target.style.opacity = "0.4";
+    $event.target?.classList.add(CLASS_DRAG);
+    if (inDropdown) {
+      const HEIGHT = $event.target?.offsetHeight || 30;
+      $event.target?.parentElement.style.setProperty("--a_table_draggable_li_height", `${ HEIGHT }px`);
+    }
     $event.dataTransfer.effectAllowed = "move";
     emit("dragstartParent", {
       columnIndex: columnIndex.value,
@@ -33,8 +40,8 @@ export default function DragAndDropChildAPI(props, { emit }, {
   };
 
   const dragend = $event => {
-    $event.target.style.opacity = "1";
-    $event.target.classList.remove(classOver.value);
+    $event.target?.classList.remove(classOver.value);
+    $event.target?.classList.remove(CLASS_DRAG);
     emit("dragendParent");
   };
 
@@ -55,7 +62,7 @@ export default function DragAndDropChildAPI(props, { emit }, {
   };
 
   const dragleave = () => {
-    if (root.value && root.value) {
+    if (root.value && root.value.classList) {
       root.value.classList.remove(classOver.value);
     }
     emit("dragleaveParent", {

package/src/ATable/compositionAPI/DragAndDropParentAPI.js

@@ -13,6 +13,7 @@ export default function DragAndDropParentAPI({
   classOver = "",
   classOverRight = "",
   classOverParent = "",
+  inHeader = false,
 }) {
   const root = ref(undefined);
   const columnIndexDraggable = ref(undefined);
@@ -45,6 +46,7 @@ export default function DragAndDropParentAPI({
     changeColumnsOrdering({
       columnIndexDraggable: columnIndexDraggable.value,
       columnIndexOver: columnIndexOver.value,
+      inHeader,
     });
     $event.stopPropagation();
     return false;

package/src/styles/components/ATable.scss

@@ -44,6 +44,8 @@
   --a_table_multiple_items_selected_bg: var(--a_table_row_preview_was_open_bg);
   --a_table_sort_sequence_num_bg: var(--a_color_primary);
   --a_table_sort_sequence_num_color: var(--a_color_white);
+  --a_table_dnd_th_bg: var(--a_color_gray_500);
+  --a_table_dnd_th_width: 50px;
 
   width: 100%;
   overflow-x: hidden;
@@ -83,6 +85,7 @@
 
 .a_table__cell__child {
   width: 100%;
+  overflow-x: auto;
 }
 .a_table__cell_checkbox {
   --a_table_cell_padding_x: 0;
@@ -126,8 +129,13 @@
   align-items: center;
   position: relative;
   background-color: inherit;
+  padding: 0;
+  .a_table__cell__child {
+    padding: var(--a_table_cell_padding_y) var(--a_table_cell_padding_x);
+  }
   &.a_table__cell_action {
     background-color: inherit;
+    padding: var(--a_table_cell_padding_y) var(--a_table_cell_padding_x);
   }
   + .a_table__th {
     border-left: var(--a_table_th_border_left_width) solid var(--a_table_th_border_left_color);
@@ -155,41 +163,29 @@
   cursor: move;
 }
 .a_table__th_over {
-  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);
+    content: "";
+    display: block;
+    width: var(--a_table_dnd_th_width);
+    height: 100%;
+    background-color: var(--a_table_dnd_th_bg);
   }
 }
 .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);
+    display: block;
+    width: var(--a_table_dnd_th_width);
+    height: 100%;
+    background-color: var(--a_table_dnd_th_bg);
   }
-  &:after {
-    bottom: calc(-1 * var(--a_table_th_border_bottom_width));
-    border-bottom: 15px solid var(--a_table_draggable_color);
+}
+.a_table__th,
+.a_table__th__dropdown__li {
+  .a_sr_only,
+  .a_sr_only_focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
   }
 }
 
@@ -203,41 +199,19 @@
 }
 
 .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);
+    content: "";
+    display: block;
+    height: var(--a_table_draggable_li_height);
+    background-color: var(--a_table_dnd_dropdown_li_bg);
   }
 }
 .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);
+    display: block;
+    height: var(--a_table_draggable_li_height);
+    background-color: var(--a_table_dnd_dropdown_li_bg);
   }
 }
 
@@ -366,11 +340,17 @@
 
 .a_table__th__dropdown__ul {
   --a_table_draggable_color: var(--a_color_primary);
+  --a_table_dnd_dropdown_li_bg: var(--a_color_gray_200);
+  --a_table_draggable_li_height: 30px;
 
+  position: relative;
   list-style: none;
   margin: 0;
   padding: 0;
 }
+.a_table__drag_element {
+  opacity: 0.4;
+}
 .a_table__th__dropdown__ul_dragstart .a_table__th__dropdown__li > * {
   pointer-events: none;
 }