vxe-table 4.8.0 → 4.8.1

package/lib/table/src/table.js

@@ -272,6 +272,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         isFooter: false
       },
       scrollVMLoading: false,
+      isDragRowMove: false,
+      dragRow: null,
+      dragTipText: '',
       _isResize: false,
       _isLoading: false
     });
@@ -346,6 +349,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       columnStatusMaps: {},
       // 行选取状态
       rowStatusMaps: {},
+      // prevDragRow: null,
       inited: false,
       tooltipTimeout: null,
       initStatus: false,
@@ -373,6 +377,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const refRightContainer = (0, _vue.ref)();
     const refCellResizeBar = (0, _vue.ref)();
     const refEmptyPlaceholder = (0, _vue.ref)();
+    const refRowDragTipElem = (0, _vue.ref)();
     const refScrollXVirtualElem = (0, _vue.ref)();
     const refScrollYVirtualElem = (0, _vue.ref)();
     const refScrollXHandleElem = (0, _vue.ref)();
@@ -422,6 +427,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeRowOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
     });
+    const computeDragOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().table.dragConfig, props.dragConfig);
+    });
     const computeResizeOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.resizeConfig, props.resizeConfig);
     });
@@ -667,6 +675,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       computeColumnOpts,
       computeCellOpts,
       computeRowOpts,
+      computeDragOpts,
       computeResizeOpts,
       computeResizableOpts,
       computeSeqOpts,
@@ -3235,7 +3244,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const handleCheckAllEvent = (evnt, value) => {
       handleCheckedAllCheckboxRow(value);
       if (evnt) {
-        tableMethods.dispatchEvent('checkbox-all', {
+        dispatchEvent('checkbox-all', {
           records: tableMethods.getCheckboxRecords(),
           reserves: tableMethods.getCheckboxReserveRecords(),
           indeterminates: tableMethods.getCheckboxIndeterminateRecords(),
@@ -3314,14 +3323,22 @@ var _default = exports.default = (0, _vue.defineComponent)({
       leading: false,
       trailing: true
     });
-    const scrollXEvent = evnt => {
-      const wrapperEl = evnt.currentTarget;
+    const handleSyncScrollX = scrollLeft => {
       const tableHeader = refTableHeader.value;
       const tableBody = refTableBody.value;
       const tableFooter = refTableFooter.value;
       const bodyElem = tableBody.$el;
       const headerElem = tableHeader ? tableHeader.$el : null;
       const footerElem = tableFooter ? tableFooter.$el : null;
+      (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
+      (0, _dom.setScrollLeft)(headerElem, scrollLeft);
+      (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+      (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
+      (0, _dom.setScrollLeft)(headerElem, scrollLeft);
+      (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+    };
+    const scrollXEvent = evnt => {
+      const wrapperEl = evnt.currentTarget;
       const {
         scrollTop,
         scrollLeft
@@ -3330,9 +3347,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const isRollY = false;
       internalData.lastScrollLeft = scrollLeft;
       reactData.lastScrollTime = Date.now();
-      (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
-      (0, _dom.setScrollLeft)(headerElem, scrollLeft);
-      (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+      handleSyncScrollX(scrollLeft);
       $xeTable.triggerScrollXEvent(evnt);
       $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
         type: 'table',
@@ -3347,14 +3362,19 @@ var _default = exports.default = (0, _vue.defineComponent)({
       leading: false,
       trailing: true
     });
-    const scrollYEvent = evnt => {
-      const wrapperEl = evnt.currentTarget;
+    const handleSyncScrollY = scrollTop => {
       const tableBody = refTableBody.value;
       const leftBody = refTableLeftBody.value;
       const rightBody = refTableRightBody.value;
       const bodyElem = tableBody.$el;
       const leftElem = leftBody ? leftBody.$el : null;
       const rightElem = rightBody ? rightBody.$el : null;
+      (0, _dom.setScrollTop)(bodyElem, scrollTop);
+      (0, _dom.setScrollTop)(leftElem, scrollTop);
+      (0, _dom.setScrollTop)(rightElem, scrollTop);
+    };
+    const scrollYEvent = evnt => {
+      const wrapperEl = evnt.currentTarget;
       const {
         scrollTop,
         scrollLeft
@@ -3363,9 +3383,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const isRollY = true;
       internalData.lastScrollTop = scrollTop;
       reactData.lastScrollTime = Date.now();
-      (0, _dom.setScrollTop)(bodyElem, scrollTop);
-      (0, _dom.setScrollTop)(leftElem, scrollTop);
-      (0, _dom.setScrollTop)(rightElem, scrollTop);
+      handleSyncScrollY(scrollTop);
       $xeTable.triggerScrollYEvent(evnt);
       $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
         type: 'table',
@@ -3375,13 +3393,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
       });
     };
     let keyCtxTimeout;
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $table: $xeTable,
+        $grid: $xeGrid
+      }, params));
+    };
     tableMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $table: $xeTable,
-          $grid: $xeGrid
-        }, params));
-      },
+      dispatchEvent,
       /**
        * 重置表格的一切数据状态
        */
@@ -4895,7 +4914,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           visible: false
         });
         if (visible) {
-          $xeTable.dispatchEvent('filter-visible', {
+          dispatchEvent('filter-visible', {
             column,
             property: column.field,
             field: column.field,
@@ -5835,7 +5854,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 tablePrivateMethods.preventEvent(evnt, 'event.clearAreas', {}, () => {
                   $xeTable.clearCellAreas();
                   $xeTable.clearCopyCellArea();
-                  $xeTable.dispatchEvent('clear-cell-area-selection', {
+                  dispatchEvent('clear-cell-area-selection', {
                     cellAreas
                   }, evnt);
                 });
@@ -5897,7 +5916,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
       if (isEsc) {
         tablePrivateMethods.preventEvent(evnt, 'event.keydown', null, () => {
-          tableMethods.dispatchEvent('keydown-start', {}, evnt);
+          dispatchEvent('keydown-start', {}, evnt);
           if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
             $xeTable.handleKeyboardEvent(evnt);
           } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
@@ -5919,8 +5938,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
               }
             }
           }
-          tableMethods.dispatchEvent('keydown', {}, evnt);
-          tableMethods.dispatchEvent('keydown-end', {}, evnt);
+          dispatchEvent('keydown', {}, evnt);
+          dispatchEvent('keydown-end', {}, evnt);
         });
       }
     };
@@ -6112,7 +6131,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 }
                 // 如果按下 del 键，更新表尾数据
                 tableMethods.updateFooter();
-                $xeTable.dispatchEvent('cell-delete-value', params, evnt);
+                dispatchEvent('cell-delete-value', params, evnt);
               }
             }
           } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && (0, _utils.isEnableConf)(editConfig) && (selected.row || selected.column)) {
@@ -6138,7 +6157,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                     (0, _util.setCellValue)(selected.row, selected.column, null);
                     $xeTable.handleEdit(selected.args, evnt);
                   }
-                  $xeTable.dispatchEvent('cell-backspace-value', params, evnt);
+                  dispatchEvent('cell-backspace-value', params, evnt);
                 }
               }
             }
@@ -6192,7 +6211,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               }
             }
           }
-          tableMethods.dispatchEvent('keydown', {}, evnt);
+          dispatchEvent('keydown', {}, evnt);
         });
       }
     };
@@ -6219,7 +6238,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             $xeTable.handlePasteCellAreaEvent(evnt);
           }
         }
-        tableMethods.dispatchEvent('paste', {}, evnt);
+        dispatchEvent('paste', {}, evnt);
       }
     };
     const handleGlobalCopyEvent = evnt => {
@@ -6245,7 +6264,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             $xeTable.handleCopyCellAreaEvent(evnt);
           }
         }
-        tableMethods.dispatchEvent('copy', {}, evnt);
+        dispatchEvent('copy', {}, evnt);
       }
     };
     const handleGlobalCutEvent = evnt => {
@@ -6271,7 +6290,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             $xeTable.handleCutCellAreaEvent(evnt);
           }
         }
-        tableMethods.dispatchEvent('cut', {}, evnt);
+        dispatchEvent('cut', {}, evnt);
       }
     };
     const handleGlobalResizeEvent = () => {
@@ -6296,6 +6315,50 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
       }
     };
+    const clearRowDropOrigin = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'row--drag-origin';
+        _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          (0, _dom.removeClass)(elem, clss);
+        });
+      }
+    };
+    const clearRowDropTarget = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'row--drag-active-target';
+        _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          (0, _dom.removeClass)(elem, clss);
+        });
+      }
+    };
+    const showRowDropTip = evnt => {
+      const rdTipEl = refRowDragTipElem.value;
+      if (!rdTipEl) {
+        return;
+      }
+      const el = refElem.value;
+      if (!el) {
+        return;
+      }
+      if (rdTipEl) {
+        const wrapperRect = el.getBoundingClientRect();
+        rdTipEl.style.display = 'block';
+        rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+        rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+      }
+    };
+    const hideRowDropTip = () => {
+      const rdTipEl = refRowDragTipElem.value;
+      if (rdTipEl) {
+        rdTipEl.style.display = '';
+      }
+    };
+    const updateRowDropTipContent = tdEl => {
+      reactData.dragTipText = tdEl.textContent || '';
+    };
     /**
      * 处理显示 tooltip
      * @param {Event} evnt 事件
@@ -7195,7 +7258,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (sortOpts.trigger === 'cell' && !(triggerResizable || triggerSort || triggerFilter)) {
           tablePrivateMethods.triggerSortEvent(evnt, column, getNextSortOrder(column));
         }
-        tableMethods.dispatchEvent('header-cell-click', Object.assign({
+        dispatchEvent('header-cell-click', Object.assign({
           triggerResizable,
           triggerSort,
           triggerFilter,
@@ -7206,7 +7269,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
       },
       triggerHeaderCellDblclickEvent(evnt, params) {
-        tableMethods.dispatchEvent('header-cell-dblclick', Object.assign({
+        dispatchEvent('header-cell-dblclick', Object.assign({
           cell: evnt.currentTarget
         }, params), evnt);
       },
@@ -7307,7 +7370,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             }
           }
         }
-        tableMethods.dispatchEvent('cell-click', params, evnt);
+        dispatchEvent('cell-click', params, evnt);
       },
       /**
        * 列双击点击事件
@@ -7339,7 +7402,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             }
           }
         }
-        tableMethods.dispatchEvent('cell-dblclick', params, evnt);
+        dispatchEvent('cell-dblclick', params, evnt);
       },
       handleToggleCheckRowEvent(evnt, params) {
         const {
@@ -7395,7 +7458,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               tableMethods.setAllCheckboxRow(false);
               const rangeRows = _rowIndex < _firstRowIndex ? afterFullData.slice(_rowIndex, _firstRowIndex + 1) : afterFullData.slice(_firstRowIndex, _rowIndex + 1);
               handleCheckedCheckboxRow(rangeRows, true, false);
-              tableMethods.dispatchEvent('checkbox-range-select', Object.assign({
+              dispatchEvent('checkbox-range-select', Object.assign({
                 rangeRecords: rangeRows
               }, params), evnt);
               return;
@@ -7407,7 +7470,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         })) {
           tablePrivateMethods.handleSelectRow(params, value);
           tablePrivateMethods.checkSelectionStatus();
-          tableMethods.dispatchEvent('checkbox-change', Object.assign({
+          dispatchEvent('checkbox-change', Object.assign({
             records: tableMethods.getCheckboxRecords(),
             reserves: tableMethods.getCheckboxReserveRecords(),
             indeterminates: tableMethods.getCheckboxIndeterminateRecords(),
@@ -7461,7 +7524,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
         }
         if (isChange) {
-          tableMethods.dispatchEvent('radio-change', Object.assign({
+          dispatchEvent('radio-change', Object.assign({
             oldValue,
             newValue
           }, params), evnt);
@@ -7498,7 +7561,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         })) {
           tableMethods.setCurrentRow(newValue);
           if (isChange) {
-            tableMethods.dispatchEvent('current-change', Object.assign({
+            dispatchEvent('current-change', Object.assign({
               oldValue,
               newValue
             }, params), evnt);
@@ -7531,7 +7594,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           const columnIndex = tableMethods.getColumnIndex(column);
           const $columnIndex = tableMethods.getVMColumnIndex(column);
           tableMethods.setRowExpand(row, expanded);
-          tableMethods.dispatchEvent('toggle-row-expand', {
+          dispatchEvent('toggle-row-expand', {
             expanded,
             column,
             columnIndex,
@@ -7568,7 +7631,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           const columnIndex = tableMethods.getColumnIndex(column);
           const $columnIndex = tableMethods.getVMColumnIndex(column);
           tableMethods.setTreeExpand(row, expanded);
-          tableMethods.dispatchEvent('toggle-tree-expand', {
+          dispatchEvent('toggle-tree-expand', {
             expanded,
             column,
             columnIndex,
@@ -7612,9 +7675,153 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (mouseConfig && mouseOpts.area && $xeTable.handleSortEvent) {
             $xeTable.handleSortEvent(evnt, params);
           }
-          tableMethods.dispatchEvent('sort-change', params, evnt);
+          dispatchEvent('sort-change', params, evnt);
+        }
+      },
+      handleRowDragDragstartEvent(evnt) {
+        const img = new Image();
+        if (evnt.dataTransfer) {
+          evnt.dataTransfer.setDragImage(img, 0, 0);
         }
       },
+      handleRowDragDragendEvent(evnt) {
+        const {
+          treeConfig
+        } = props;
+        const rowOpts = computeRowOpts.value;
+        const {
+          dragEndMethod
+        } = rowOpts;
+        const treeOpts = computeTreeOpts.value;
+        const {
+          transform
+        } = treeOpts;
+        const {
+          dragRow
+        } = reactData;
+        const {
+          afterFullData,
+          tableFullData,
+          prevDragRow,
+          prevDragPos
+        } = internalData;
+        if (prevDragRow && dragRow) {
+          // 判断是否有拖动
+          if (prevDragRow !== dragRow) {
+            Promise.resolve(dragEndMethod ? dragEndMethod({
+              oldRow: dragRow,
+              newRow: prevDragRow
+            }) : true).then(status => {
+              if (!status) {
+                return;
+              }
+              const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+              // 移出源位置
+              const oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
+              const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
+              afterFullData.splice(oafIndex, 1);
+              tableFullData.splice(otfIndex, 1);
+              // 插新位置
+              const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
+              const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
+              const nafIndex = pafIndex + dragOffsetIndex;
+              const ntfIndex = ptfIndex + dragOffsetIndex;
+              afterFullData.splice(nafIndex, 0, dragRow);
+              tableFullData.splice(ntfIndex, 0, dragRow);
+              reactData.isDragRowMove = true;
+              $xeTable.cacheRowMap();
+              $xeTable.updateScrollYStatus();
+              $xeTable.handleTableData(treeConfig && transform);
+              if (!(treeConfig && transform)) {
+                $xeTable.updateAfterDataIndex();
+              }
+              $xeTable.updateFooter();
+              $xeTable.checkSelectionStatus();
+              if (reactData.scrollYLoad) {
+                $xeTable.updateScrollYSpace();
+              }
+              (0, _vue.nextTick)().then(() => {
+                $xeTable.updateCellAreas();
+                return $xeTable.recalculate();
+              });
+              dispatchEvent('row-dragend', {
+                oldRow: dragRow,
+                newRow: prevDragRow,
+                _index: {
+                  newIndex: nafIndex,
+                  oldIndex: oafIndex
+                }
+              }, evnt);
+            }).catch(() => {});
+          }
+        }
+        hideRowDropTip();
+        clearRowDropOrigin();
+        clearRowDropTarget();
+        reactData.dragRow = null;
+        setTimeout(() => {
+          reactData.isDragRowMove = false;
+        }, 500);
+      },
+      handleRowDragDragoverEvent(evnt) {
+        const trEl = evnt.currentTarget;
+        const rowid = trEl.getAttribute('rowid');
+        const row = $xeTable.getRowById(rowid);
+        clearRowDropTarget();
+        if (row) {
+          evnt.preventDefault();
+          evnt.preventDefault();
+          const {
+            dragRow
+          } = reactData;
+          const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+          const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+          (0, _dom.addClass)(trEl, 'row--drag-active-target');
+          trEl.setAttribute('drag-pos', dragPos);
+          internalData.prevDragRow = row;
+          internalData.prevDragPos = dragPos;
+          dispatchEvent('row-dragover', {
+            oldRow: dragRow,
+            targetRow: row,
+            dragPos
+          }, evnt);
+        }
+        showRowDropTip(evnt);
+      },
+      handleCellDragMousedownEvent(evnt, params) {
+        var _a;
+        evnt.stopPropagation();
+        const rowOpts = computeRowOpts.value;
+        const {
+          dragStartMethod
+        } = rowOpts;
+        const {
+          row
+        } = params;
+        const dragEl = evnt.currentTarget;
+        const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
+        const trEl = tdEl.parentNode;
+        reactData.isDragRowMove = false;
+        clearRowDropOrigin();
+        if (dragStartMethod && !dragStartMethod(params)) {
+          trEl.draggable = false;
+          reactData.dragRow = null;
+          hideRowDropTip();
+          return;
+        }
+        reactData.dragRow = row;
+        trEl.draggable = true;
+        (0, _dom.addClass)(trEl, 'row--drag-origin');
+        showRowDropTip(evnt);
+        updateRowDropTipContent(tdEl);
+        dispatchEvent('row-dragstart', params, evnt);
+      },
+      handleCellDragMouseupEvent() {
+        clearRowDropOrigin();
+        hideRowDropTip();
+        reactData.dragRow = null;
+        reactData.isDragRowMove = false;
+      },
       /**
        * 横向 X 可视渲染事件处理
        */
@@ -7646,14 +7853,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
         const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
         const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
-        $xeTable.dispatchEvent('scroll', Object.assign({
+        const evntParams = Object.assign({
           bodyHeight,
           bodyWidth,
           scrollHeight,
           scrollWidth,
           isX: isRollX,
           isY: isRollY
-        }, params), evnt);
+        }, params);
+        dispatchEvent('scroll', evntParams, evnt);
       },
       /**
        * 纵向 Y 可视渲染事件处理
@@ -7830,14 +8038,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
       },
       updateScrollXData() {
         // reactData.tableColumn = []
-        (0, _vue.nextTick)(() => {
+        return (0, _vue.nextTick)().then(() => {
           handleTableColumn();
           tablePrivateMethods.updateScrollXSpace();
         });
       },
       updateScrollYData() {
         // reactData.tableData = []
-        (0, _vue.nextTick)(() => {
+        return (0, _vue.nextTick)().then(() => {
           tablePrivateMethods.handleTableData();
           calcCellHeight();
           tablePrivateMethods.updateScrollYSpace();
@@ -8230,6 +8438,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
         key: 'tm',
         ref: refTableMenu
       }) : (0, _vue.createCommentVNode)(),
+      /**
+       * 拖拽提示
+       */
+      rowOpts.drag ? (0, _vue.h)('div', {
+        ref: refRowDragTipElem,
+        class: 'vxe-table--row-drag-hint'
+      }, getI18n('vxe.table.dragTip', [reactData.dragTipText])) : (0, _vue.createCommentVNode)(),
       /**
        * 提示相关
        */