vxe-table 3.18.0-beta.7 → 3.18.0

package/es/table/module/keyboard/mixin.js

@@ -129,6 +129,174 @@ function handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRigh
     });
     return params;
 }
+function handleCheckboxRangeEvent($xeTable, evnt, params) {
+    const internalData = $xeTable;
+    const { elemStore } = internalData;
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+    const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+    const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+    const { column, cell } = params;
+    if (column.type === 'checkbox') {
+        let bodyWrapperElem = bodyScrollElem;
+        if (leftScrollElem && column.fixed === 'left') {
+            bodyWrapperElem = leftScrollElem;
+        }
+        else if (rightScrollElem && column.fixed === 'right') {
+            bodyWrapperElem = rightScrollElem;
+        }
+        if (!bodyWrapperElem) {
+            return;
+        }
+        const el = $xeTable.$refs.refElem;
+        const disX = evnt.clientX;
+        const disY = evnt.clientY;
+        const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range');
+        const trElem = cell.parentNode;
+        const selectRecords = $xeTable.getCheckboxRecords();
+        let lastRangeRows = [];
+        const marginSize = 1;
+        const offsetRest = getTargetOffset(evnt.target, bodyWrapperElem);
+        const startTop = offsetRest.offsetTop + evnt.offsetY;
+        const startLeft = offsetRest.offsetLeft + evnt.offsetX;
+        const startScrollTop = bodyWrapperElem.scrollTop;
+        const rowHeight = trElem.offsetHeight;
+        const trRect = trElem.getBoundingClientRect();
+        const offsetClientTop = disY - trRect.y;
+        let mouseScrollTimeout = null;
+        let isMouseScrollDown = false;
+        let mouseScrollSpaceSize = 1;
+        const triggerEvent = (type, evnt) => {
+            $xeTable.dispatchEvent(`checkbox-range-${type}`, {
+                records: () => $xeTable.getCheckboxRecords(),
+                reserves: () => $xeTable.getCheckboxReserveRecords()
+            }, evnt);
+        };
+        const handleChecked = (evnt) => {
+            const { clientX, clientY } = evnt;
+            const offsetLeft = clientX - disX;
+            const offsetTop = clientY - disY + (bodyWrapperElem.scrollTop - startScrollTop);
+            let rangeHeight = Math.abs(offsetTop);
+            let rangeWidth = Math.abs(offsetLeft);
+            let rangeTop = startTop;
+            let rangeLeft = startLeft;
+            if (offsetTop < marginSize) {
+                // 向上
+                rangeTop += offsetTop;
+                if (rangeTop < marginSize) {
+                    rangeTop = marginSize;
+                    rangeHeight = startTop;
+                }
+            }
+            else {
+                // 向下
+                rangeHeight = Math.min(rangeHeight, bodyWrapperElem.scrollHeight - startTop - marginSize);
+            }
+            if (offsetLeft < marginSize) {
+                // 向左
+                rangeLeft += offsetLeft;
+                if (rangeWidth > startLeft) {
+                    rangeLeft = marginSize;
+                    rangeWidth = startLeft;
+                }
+            }
+            else {
+                // 向右
+                rangeWidth = Math.min(rangeWidth, bodyWrapperElem.clientWidth - startLeft - marginSize);
+            }
+            checkboxRangeElem.style.height = `${rangeHeight}px`;
+            checkboxRangeElem.style.width = `${rangeWidth}px`;
+            checkboxRangeElem.style.left = `${rangeLeft}px`;
+            checkboxRangeElem.style.top = `${rangeTop}px`;
+            checkboxRangeElem.style.display = 'block';
+            const rangeRows = getCheckboxRangeRows($xeTable, evnt, params, trElem, trRect, offsetClientTop, offsetTop < marginSize ? -rangeHeight : rangeHeight);
+            // 至少滑动 10px 才能有效匹配
+            if (rangeHeight > 10 && rangeRows.length !== lastRangeRows.length) {
+                const isControlKey = hasControlKey(evnt);
+                lastRangeRows = rangeRows;
+                if (isControlKey) {
+                    rangeRows.forEach((row) => {
+                        $xeTable.handleBatchSelectRows([row], selectRecords.indexOf(row) === -1);
+                    });
+                }
+                else {
+                    $xeTable.setAllCheckboxRow(false);
+                    $xeTable.handleCheckedCheckboxRow(rangeRows, true, false);
+                }
+                triggerEvent('change', evnt);
+            }
+        };
+        // 停止鼠标滚动
+        const stopMouseScroll = () => {
+            clearTimeout(mouseScrollTimeout);
+            mouseScrollTimeout = null;
+        };
+        // 开始鼠标滚动
+        const startMouseScroll = (evnt) => {
+            stopMouseScroll();
+            mouseScrollTimeout = setTimeout(() => {
+                if (mouseScrollTimeout) {
+                    const { scrollLeft, scrollTop, clientHeight, scrollHeight } = bodyWrapperElem;
+                    const topSize = Math.ceil(mouseScrollSpaceSize * 50 / rowHeight);
+                    if (isMouseScrollDown) {
+                        if (scrollTop + clientHeight < scrollHeight) {
+                            $xeTable.scrollTo(scrollLeft, scrollTop + topSize);
+                            startMouseScroll(evnt);
+                            handleChecked(evnt);
+                        }
+                        else {
+                            stopMouseScroll();
+                        }
+                    }
+                    else {
+                        if (scrollTop) {
+                            $xeTable.scrollTo(scrollLeft, scrollTop - topSize);
+                            startMouseScroll(evnt);
+                            handleChecked(evnt);
+                        }
+                        else {
+                            stopMouseScroll();
+                        }
+                    }
+                }
+            }, 50);
+        };
+        addClass(el, 'drag--range');
+        document.onmousemove = evnt => {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { clientY } = evnt;
+            const { boundingTop } = getAbsolutePos(bodyWrapperElem);
+            // 如果超过可视区，触发滚动
+            if (clientY < boundingTop) {
+                isMouseScrollDown = false;
+                mouseScrollSpaceSize = boundingTop - clientY;
+                if (!mouseScrollTimeout) {
+                    startMouseScroll(evnt);
+                }
+            }
+            else if (clientY > boundingTop + bodyWrapperElem.clientHeight) {
+                isMouseScrollDown = true;
+                mouseScrollSpaceSize = clientY - boundingTop - bodyWrapperElem.clientHeight;
+                if (!mouseScrollTimeout) {
+                    startMouseScroll(evnt);
+                }
+            }
+            else if (mouseScrollTimeout) {
+                stopMouseScroll();
+            }
+            handleChecked(evnt);
+        };
+        document.onmouseup = (evnt) => {
+            stopMouseScroll();
+            removeClass(el, 'drag--range');
+            checkboxRangeElem.removeAttribute('style');
+            document.onmousemove = null;
+            document.onmouseup = null;
+            triggerEvent('end', evnt);
+        };
+        triggerEvent('start', evnt);
+    }
+}
 export default {
     methods: {
         // 处理 Tab 键移动
@@ -351,189 +519,24 @@ export default {
         },
         handleCellMousedownEvent(evnt, params) {
             const $xeTable = this;
-            const { editConfig, editOpts, handleSelected, checkboxConfig, checkboxOpts, mouseConfig, mouseOpts } = this;
+            const props = $xeTable;
+            const { editConfig, checkboxConfig, mouseConfig } = props;
+            const checkboxOpts = $xeTable.computeCheckboxOpts;
+            const mouseOpts = $xeTable.computeMouseOpts;
+            const editOpts = $xeTable.computeEditOpts;
             if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaModnEvent) {
                 return $xeTable.triggerCellAreaModnEvent(evnt, params);
             }
             else {
                 if (checkboxConfig && checkboxOpts.range) {
-                    this.handleCheckboxRangeEvent(evnt, params);
+                    handleCheckboxRangeEvent($xeTable, evnt, params);
                 }
                 if (mouseConfig && mouseOpts.selected) {
                     if (!editConfig || editOpts.mode === 'cell') {
-                        handleSelected(params, evnt);
+                        $xeTable.handleSelected(params, evnt);
                     }
                 }
             }
-        },
-        handleCheckboxRangeEvent(evnt, params) {
-            const $xeTable = this;
-            const internalData = $xeTable;
-            const { elemStore } = internalData;
-            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-            const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
-            const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
-            const { column, cell } = params;
-            if (column.type === 'checkbox') {
-                let bodyWrapperElem = bodyScrollElem;
-                if (leftScrollElem && column.fixed === 'left') {
-                    bodyWrapperElem = leftScrollElem;
-                }
-                else if (rightScrollElem && column.fixed === 'right') {
-                    bodyWrapperElem = rightScrollElem;
-                }
-                if (!bodyWrapperElem) {
-                    return;
-                }
-                const el = $xeTable.$refs.refElem;
-                const disX = evnt.clientX;
-                const disY = evnt.clientY;
-                const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range');
-                const trElem = cell.parentNode;
-                const selectRecords = this.getCheckboxRecords();
-                let lastRangeRows = [];
-                const marginSize = 1;
-                const offsetRest = getTargetOffset(evnt.target, bodyWrapperElem);
-                const startTop = offsetRest.offsetTop + evnt.offsetY;
-                const startLeft = offsetRest.offsetLeft + evnt.offsetX;
-                const startScrollTop = bodyWrapperElem.scrollTop;
-                const rowHeight = trElem.offsetHeight;
-                const trRect = trElem.getBoundingClientRect();
-                const offsetClientTop = disY - trRect.y;
-                let mouseScrollTimeout = null;
-                let isMouseScrollDown = false;
-                let mouseScrollSpaceSize = 1;
-                const triggerEvent = (type, evnt) => {
-                    this.emitEvent(`checkbox-range-${type}`, {
-                        records: () => this.getCheckboxRecords(),
-                        reserves: () => this.getCheckboxReserveRecords()
-                    }, evnt);
-                };
-                const handleChecked = (evnt) => {
-                    const { clientX, clientY } = evnt;
-                    const offsetLeft = clientX - disX;
-                    const offsetTop = clientY - disY + (bodyWrapperElem.scrollTop - startScrollTop);
-                    let rangeHeight = Math.abs(offsetTop);
-                    let rangeWidth = Math.abs(offsetLeft);
-                    let rangeTop = startTop;
-                    let rangeLeft = startLeft;
-                    if (offsetTop < marginSize) {
-                        // 向上
-                        rangeTop += offsetTop;
-                        if (rangeTop < marginSize) {
-                            rangeTop = marginSize;
-                            rangeHeight = startTop;
-                        }
-                    }
-                    else {
-                        // 向下
-                        rangeHeight = Math.min(rangeHeight, bodyWrapperElem.scrollHeight - startTop - marginSize);
-                    }
-                    if (offsetLeft < marginSize) {
-                        // 向左
-                        rangeLeft += offsetLeft;
-                        if (rangeWidth > startLeft) {
-                            rangeLeft = marginSize;
-                            rangeWidth = startLeft;
-                        }
-                    }
-                    else {
-                        // 向右
-                        rangeWidth = Math.min(rangeWidth, bodyWrapperElem.clientWidth - startLeft - marginSize);
-                    }
-                    checkboxRangeElem.style.height = `${rangeHeight}px`;
-                    checkboxRangeElem.style.width = `${rangeWidth}px`;
-                    checkboxRangeElem.style.left = `${rangeLeft}px`;
-                    checkboxRangeElem.style.top = `${rangeTop}px`;
-                    checkboxRangeElem.style.display = 'block';
-                    const rangeRows = getCheckboxRangeRows(this, evnt, params, trElem, trRect, offsetClientTop, offsetTop < marginSize ? -rangeHeight : rangeHeight);
-                    // 至少滑动 10px 才能有效匹配
-                    if (rangeHeight > 10 && rangeRows.length !== lastRangeRows.length) {
-                        const isControlKey = hasControlKey(evnt);
-                        lastRangeRows = rangeRows;
-                        if (isControlKey) {
-                            rangeRows.forEach((row) => {
-                                $xeTable.handleBatchSelectRows([row], selectRecords.indexOf(row) === -1);
-                            });
-                        }
-                        else {
-                            this.setAllCheckboxRow(false);
-                            this.handleCheckedCheckboxRow(rangeRows, true, false);
-                        }
-                        triggerEvent('change', evnt);
-                    }
-                };
-                // 停止鼠标滚动
-                const stopMouseScroll = () => {
-                    clearTimeout(mouseScrollTimeout);
-                    mouseScrollTimeout = null;
-                };
-                // 开始鼠标滚动
-                const startMouseScroll = (evnt) => {
-                    stopMouseScroll();
-                    mouseScrollTimeout = setTimeout(() => {
-                        if (mouseScrollTimeout) {
-                            const { scrollLeft, scrollTop, clientHeight, scrollHeight } = bodyWrapperElem;
-                            const topSize = Math.ceil(mouseScrollSpaceSize * 50 / rowHeight);
-                            if (isMouseScrollDown) {
-                                if (scrollTop + clientHeight < scrollHeight) {
-                                    this.scrollTo(scrollLeft, scrollTop + topSize);
-                                    startMouseScroll(evnt);
-                                    handleChecked(evnt);
-                                }
-                                else {
-                                    stopMouseScroll();
-                                }
-                            }
-                            else {
-                                if (scrollTop) {
-                                    this.scrollTo(scrollLeft, scrollTop - topSize);
-                                    startMouseScroll(evnt);
-                                    handleChecked(evnt);
-                                }
-                                else {
-                                    stopMouseScroll();
-                                }
-                            }
-                        }
-                    }, 50);
-                };
-                addClass(el, 'drag--range');
-                document.onmousemove = evnt => {
-                    evnt.preventDefault();
-                    evnt.stopPropagation();
-                    const { clientY } = evnt;
-                    const { boundingTop } = getAbsolutePos(bodyWrapperElem);
-                    // 如果超过可视区，触发滚动
-                    if (clientY < boundingTop) {
-                        isMouseScrollDown = false;
-                        mouseScrollSpaceSize = boundingTop - clientY;
-                        if (!mouseScrollTimeout) {
-                            startMouseScroll(evnt);
-                        }
-                    }
-                    else if (clientY > boundingTop + bodyWrapperElem.clientHeight) {
-                        isMouseScrollDown = true;
-                        mouseScrollSpaceSize = clientY - boundingTop - bodyWrapperElem.clientHeight;
-                        if (!mouseScrollTimeout) {
-                            startMouseScroll(evnt);
-                        }
-                    }
-                    else if (mouseScrollTimeout) {
-                        stopMouseScroll();
-                    }
-                    handleChecked(evnt);
-                };
-                document.onmouseup = (evnt) => {
-                    stopMouseScroll();
-                    removeClass(el, 'drag--range');
-                    checkboxRangeElem.removeAttribute('style');
-                    document.onmousemove = null;
-                    document.onmouseup = null;
-                    triggerEvent('end', evnt);
-                };
-                triggerEvent('start', evnt);
-            }
         }
     }
 };

package/es/table/src/footer.js

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
 import { updateCellTitle } from '../../ui/src/dom';
-import { getCellHeight } from './util';
+import { getCalcHeight } from './util';
 const renderType = 'footer';
 const { renderer, renderEmptyElement } = VxeUI;
 function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $rowIndex, _rowIndex) {
@@ -25,7 +25,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const cellOpts = $xeTable.computeCellOpts;
     const footerCellOpts = $xeTable.computeFooterCellOpts;
-    const currCellHeight = getCellHeight(footerCellOpts.height) || defaultRowHeight;
+    const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight;
     return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
         const colid = column.id;

package/es/table/src/header.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
-import { getCellHeight, convertHeaderColumnToRows } from './util';
+import { getCalcHeight, convertHeaderColumnToRows } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
 const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
@@ -22,7 +22,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
-    const currCellHeight = getCellHeight(headerCellOpts.height) || defaultRowHeight;
+    const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
     const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts;
     return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;

package/es/table/src/table.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { getFuncText, isEnableConf } from '../../ui/src/utils';
 import { initTpImg } from '../../ui/src/dom';
-import { createInternalData, createHandleGetRowId, getCellHeight, hasDeepKey } from './util';
+import { createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util';
 import { VxeUI } from '../../ui';
 import methods from './methods';
 import TableBodyComponent from './body';
@@ -864,10 +864,20 @@ export default {
         },
         computeHeaderCellOpts() {
             const $xeTable = this;
+            const $xeGantt = $xeTable.$xeGantt;
             const props = $xeTable;
             const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
+            const defaultRowHeight = $xeTable.computeDefaultRowHeight;
             const cellOpts = $xeTable.computeCellOpts;
-            headerCellOpts.height = XEUtils.toNumber(getCellHeight(headerCellOpts.height || cellOpts.height));
+            let headCellHeight = XEUtils.toNumber(getCalcHeight(headerCellOpts.height || cellOpts.height));
+            if ($xeGantt) {
+                const taskScaleConfs = $xeGantt.computeTaskScaleConfs;
+                if (taskScaleConfs && taskScaleConfs.length > 2) {
+                    const ganttMinHeadCellHeight = defaultRowHeight / 2 * taskScaleConfs.length;
+                    headCellHeight = Math.max(ganttMinHeadCellHeight, headCellHeight);
+                }
+            }
+            headerCellOpts.height = headCellHeight;
             return headerCellOpts;
         },
         computeFooterCellOpts() {
@@ -875,7 +885,7 @@ export default {
             const props = $xeTable;
             const footerCellOpts = Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
             const cellOpts = $xeTable.computeCellOpts;
-            footerCellOpts.height = XEUtils.toNumber(getCellHeight(footerCellOpts.height || cellOpts.height));
+            footerCellOpts.height = XEUtils.toNumber(getCalcHeight(footerCellOpts.height || cellOpts.height));
             return footerCellOpts;
         },
         rowOpts() {
@@ -1766,6 +1776,15 @@ export default {
         this.preventEvent(null, 'activated');
     },
     deactivated() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { filterStore } = reactData;
+        if (filterStore.visible) {
+            $xeTable.clearFilter();
+        }
+        $xeTable.closeTooltip();
+        internalData.isActivated = false;
         this.preventEvent(null, 'deactivated');
     },
     beforeDestroy() {

package/es/table/src/util.js

@@ -286,7 +286,7 @@ function getElementMarginAndWidth(elem) {
     }
     return 0;
 }
-export function getCellHeight(height) {
+export function getCalcHeight(height) {
     if (height === 'unset') {
         return 0;
     }

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.18.0-beta.7";
+export const version = "3.18.0";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"3.18.0-beta.7"}`;
+const version = `table v${"3.18.0"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);