vxe-table 3.11.15 → 3.11.17

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.11.15";
+const version = "3.11.17";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2253,6 +2253,10 @@ core_.VxeUI.setConfig({
     resizeConfig: {
       // refreshDelay: 250
     },
+    resizableConfig: {
+      dragMode: 'auto',
+      showDragTip: true
+    },
     radioConfig: {
       // trigger: 'default'
       strict: true
@@ -2276,7 +2280,7 @@ core_.VxeUI.setConfig({
       autoPos: true,
       message: 'inline',
       msgMode: 'single',
-      theme: 'normal'
+      theme: 'beautify'
     },
     columnConfig: {
       maxFixedSize: 4
@@ -2774,7 +2778,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.11.15"}`;
+const log_version = `table v${"3.11.17"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -3058,7 +3062,7 @@ function getPaddingLeftRightSize(elem) {
   }
   return 0;
 }
-function getElemenMarginWidth(elem) {
+function getElementMarginWidth(elem) {
   if (elem) {
     const computedStyle = getComputedStyle(elem);
     const marginLeft = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(computedStyle.marginLeft);
@@ -3183,14 +3187,15 @@ function getColReMinWidth(params) {
   let mWidth = minTitleWidth + paddingLeftRight;
   // 默认最小宽处理
   if (hasEllipsis) {
-    const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '--title>.vxe-cell--checkbox'));
-    const requiredIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'));
-    const editIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'));
-    const prefixIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'));
-    const suffixIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'));
-    const sortIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'));
-    const filterIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'));
-    mWidth += checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth;
+    const dragIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--drag-handle'));
+    const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--checkbox'));
+    const requiredIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'));
+    const editIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'));
+    const prefixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'));
+    const suffixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'));
+    const sortIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'));
+    const filterIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'));
+    mWidth += dragIconWidth + checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth;
   }
   // 如果设置最小宽
   if (colMinWidth) {
@@ -5289,8 +5294,12 @@ const updateRowDropTipContent = ($xeTable, tdEl) => {
 const updateColDropOrigin = ($xeTable, column) => {
   const el = $xeTable.$el;
   if (el) {
+    const colQuerys = [];
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
+      colQuerys.push(`[colid="${item.id}"]`);
+    });
     const clss = 'col--drag-origin';
-    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), elem => {
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(colQuerys.join(',')), elem => {
       addClass(elem, clss);
     });
   }
@@ -14323,28 +14332,36 @@ function renderHeads(h, _vm, headerGroups) {
       this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
     },
     resizeMousedown(evnt, params) {
+      const $xeTable = this.$parent;
+      const tableInternalData = $xeTable;
       const {
         column
       } = params;
       const {
         $parent: $xetable,
-        $el,
         fixedType
       } = this;
+      const {
+        visibleColumn
+      } = tableInternalData;
       const {
         tableBody,
         leftContainer,
-        rightContainer,
-        resizeBar: resizeBarElem
+        rightContainer
       } = $xetable.$refs;
+      const tableEl = $xeTable.$el;
+      const resizeBarElem = $xetable.$refs.resizeBar;
+      const resizeTipElem = $xetable.$refs.refCellResizeTip;
+      const wrapperElem = this.$el;
       const {
         target: dragBtnElem,
         clientX: dragClientX
       } = evnt;
       const cell = params.cell = dragBtnElem.parentNode;
+      const resizableOpts = $xeTable.computeResizableOpts;
       let dragLeft = 0;
       const tableBodyElem = tableBody.$el;
-      const pos = getOffsetPos(dragBtnElem, $el);
+      const pos = getOffsetPos(dragBtnElem, tableEl);
       const dragBtnWidth = dragBtnElem.clientWidth;
       const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
       const minInterval = getColReMinWidth(params) - dragBtnOffsetWidth; // 列之间的最小间距
@@ -14390,7 +14407,24 @@ function renderHeads(h, _vm, headerGroups) {
           // left = Math.min(left, tableBodyElem.clientWidth + tableBodyElem.scrollLeft - 40)
         }
         dragLeft = Math.max(left, dragMinLeft);
-        resizeBarElem.style.left = `${dragLeft - scrollLeft}px`;
+        const resizeBarLeft = dragLeft - scrollLeft;
+        resizeBarElem.style.left = `${resizeBarLeft}px`;
+        if (resizableOpts.showDragTip && resizeTipElem) {
+          const tableWidth = tableEl.clientWidth;
+          const wrapperRect = wrapperElem.getBoundingClientRect();
+          const resizeBarWidth = resizeBarElem.clientWidth;
+          const resizeTipWidth = resizeTipElem.clientWidth;
+          const resizeTipHeight = resizeTipElem.clientHeight;
+          let resizeTipLeft = -resizeTipWidth;
+          if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
+            resizeTipLeft = resizeTipWidth + resizeBarWidth - resizeBarLeft;
+          } else if (resizeBarLeft > tableWidth) {
+            resizeTipLeft += tableWidth - resizeBarLeft;
+          }
+          resizeTipElem.style.left = `${resizeTipLeft}px`;
+          resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
+          resizeTipElem.textContent = `${column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)}px`;
+        }
       };
       $xetable._isResize = true;
       addClass($xetable.$el, 'drag--resize');
@@ -14401,6 +14435,15 @@ function renderHeads(h, _vm, headerGroups) {
         document.onmouseup = domMouseup;
         const resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft);
         column.resizeWidth = resizeWidth;
+        if (resizableOpts.dragMode === 'fixed') {
+          visibleColumn.forEach(item => {
+            if (item.id !== column.id) {
+              if (!item.resizeWidth) {
+                item.resizeWidth = item.renderWidth;
+              }
+            }
+          });
+        }
         resizeBarElem.style.display = 'none';
         $xetable._isResize = false;
         $xetable._lastResizeTime = Date.now();
@@ -23269,6 +23312,7 @@ function handleUupdateResize(_vm) {
       rowOpts,
       checkboxOpts,
       loadingOpts,
+      resizableOpts,
       editRules
     } = $xeTable;
     const {
@@ -23420,7 +23464,10 @@ function handleUupdateResize(_vm) {
         'padding-bottom': `${scrollbarHeight}px`
       } : {},
       ref: 'resizeBar'
-    }),
+    }, resizableOpts.showDragTip ? [h('div', {
+      ref: 'refCellResizeTip',
+      class: 'vxe-table--resizable-number-tip'
+    }, '23432px')] : []),
     /**
      * 加载中
      */