vxe-table 4.17.0-beta.8 → 4.17.0

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

@@ -1,30 +1,8 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { getRefElem } from '../../src/util';
-import { hasClass, getAbsolutePos, addClass, removeClass, hasControlKey } from '../../../ui/src/dom';
+import { getAbsolutePos, addClass, removeClass, hasControlKey } from '../../../ui/src/dom';
 const { hooks } = VxeUI;
-const browseObj = XEUtils.browse();
-function getTargetOffset(target, container) {
-    let offsetTop = 0;
-    let offsetLeft = 0;
-    const triggerCheckboxLabel = !browseObj.firefox && hasClass(target, 'vxe-checkbox--label');
-    if (triggerCheckboxLabel) {
-        const checkboxLabelStyle = getComputedStyle(target);
-        offsetTop -= XEUtils.toNumber(checkboxLabelStyle.paddingTop);
-        offsetLeft -= XEUtils.toNumber(checkboxLabelStyle.paddingLeft);
-    }
-    while (target && target !== container) {
-        offsetTop += target.offsetTop;
-        offsetLeft += target.offsetLeft;
-        target = target.offsetParent;
-        if (triggerCheckboxLabel) {
-            const checkboxStyle = getComputedStyle(target);
-            offsetTop -= XEUtils.toNumber(checkboxStyle.paddingTop);
-            offsetLeft -= XEUtils.toNumber(checkboxStyle.paddingLeft);
-        }
-    }
-    return { offsetTop, offsetLeft };
-}
 hooks.add('tableKeyboardModule', {
     setupTable($xeTable) {
         const { props, reactData, internalData } = $xeTable;
@@ -117,6 +95,7 @@ hooks.add('tableKeyboardModule', {
                 if (!bodyWrapperElem) {
                     return;
                 }
+                const bodyRect = bodyWrapperElem.getBoundingClientRect();
                 const el = refElem.value;
                 const disX = evnt.clientX;
                 const disY = evnt.clientY;
@@ -125,9 +104,8 @@ hooks.add('tableKeyboardModule', {
                 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 startTop = evnt.clientY - bodyRect.y + bodyWrapperElem.scrollTop;
+                const startLeft = evnt.clientX - bodyRect.x + bodyWrapperElem.scrollLeft;
                 const startScrollTop = bodyWrapperElem.scrollTop;
                 const rowHeight = trElem.offsetHeight;
                 const trRect = trElem.getBoundingClientRect();

package/es/table/module/menu/hook.js

@@ -171,7 +171,7 @@ hooks.add('tableMenuModule', {
                     }
                     if (internalData._keyCtx) {
                         const type = 'body';
-                        const params = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt };
+                        const params = { source: 'table', type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt };
                         // 如果开启单元格区域
                         if (mouseConfig && mouseOpts.area) {
                             const activeArea = $xeTable.getActiveCellArea();
@@ -199,7 +199,7 @@ hooks.add('tableMenuModule', {
                             // target=td|th，直接向上找 table 去匹配即可
                             return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID;
                         });
-                        const params = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt };
+                        const params = { source: 'table', type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt };
                         if (columnTargetNode.flag) {
                             const cell = columnTargetNode.targetElem;
                             const columnNodeRest = $xeTable.getColumnNode(cell);

package/es/table/src/body.js

@@ -7,6 +7,7 @@ import { updateCellTitle, getPropClass } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
+const sourceType = 'table';
 const renderType = 'body';
 export default defineVxeComponent({
     name: 'VxeTableBody',
@@ -149,6 +150,7 @@ export default defineVxeComponent({
                 $columnIndex,
                 _columnIndex,
                 fixed: fixedType,
+                source: sourceType,
                 type: renderType,
                 isHidden: !!fixedHiddenColumn,
                 level: rowLevel,
@@ -569,6 +571,7 @@ export default defineVxeComponent({
                             $columnIndex,
                             _columnIndex,
                             fixed: fixedType,
+                            source: sourceType,
                             type: renderType,
                             level: rowLevel,
                             row,

package/es/table/src/footer.js

@@ -5,6 +5,7 @@ import { VxeUI } from '../../ui';
 import { updateCellTitle, getPropClass } from '../../ui/src/dom';
 import { getCalcHeight } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
+const sourceType = 'table';
 const renderType = 'footer';
 export default defineVxeComponent({
     name: 'VxeTableFooter',
@@ -88,6 +89,7 @@ export default defineVxeComponent({
                     itemIndex,
                     items: row,
                     fixed: fixedType,
+                    source: sourceType,
                     type: renderType,
                     data: footerTableData
                 };

package/es/table/src/header.js

@@ -6,6 +6,7 @@ import { isEnableConf } from '../../ui/src/utils';
 import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 const { renderer, renderEmptyElement } = VxeUI;
+const sourceType = 'table';
 const renderType = 'header';
 function getColumnFirstChild(column) {
     const { children } = column;
@@ -109,6 +110,7 @@ export default defineVxeComponent({
                     _columnIndex,
                     firstFilterOption: firstFilterOption,
                     fixed: fixedType,
+                    source: sourceType,
                     type: renderType,
                     isHidden: fixedHiddenColumn,
                     hasFilter
@@ -286,6 +288,7 @@ export default defineVxeComponent({
                     _columnIndex,
                     option: firstFilterOption,
                     fixed: fixedType,
+                    source: sourceType,
                     type: renderType,
                     isHidden: fixedHiddenColumn,
                     hasFilter

package/es/table/src/table.js

@@ -413,13 +413,23 @@ export default defineVxeComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         });
-        const computeScrollbarXToTop = computed(() => {
+        const computeScrollbarXOpts = computed(() => {
+            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+            return Object.assign({}, scrollbarOpts.x, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.x) || {});
         });
-        const computeScrollbarYToLeft = computed(() => {
+        const computeScrollbarYOpts = computed(() => {
+            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+            return Object.assign({}, scrollbarOpts.y, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.y) || {});
+        });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return scrollbarXOpts.position === 'top';
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return scrollbarYOpts.position === 'left';
         });
         const computeScrollYThreshold = computed(() => {
             const virtualYOpts = computeVirtualYOpts.value;
@@ -770,6 +780,8 @@ export default defineVxeComponent({
             computeVirtualXOpts,
             computeVirtualYOpts,
             computeScrollbarOpts,
+            computeScrollbarXOpts,
+            computeScrollbarYOpts,
             computeScrollbarXToTop,
             computeScrollbarYToLeft,
             computeColumnOpts,
@@ -2333,7 +2345,6 @@ export default defineVxeComponent({
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
             const scrollbarXConf = scrollbarOpts.x || {};
-            const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYConf = scrollbarOpts.y || {};
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
@@ -2383,16 +2394,31 @@ export default defineVxeComponent({
             }
             const xWrapperEl = refScrollXWrapperElem.value;
             if (xWrapperEl) {
-                xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
                 xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
+                if (scrollbarYToLeft) {
+                    xWrapperEl.style.left = `${osbWidth}px`;
+                }
+                else {
+                    xWrapperEl.style.left = '';
+                }
             }
             if (xLeftCornerEl) {
-                xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
-                xLeftCornerEl.style.display = scrollbarXToTop ? (overflowX && osbHeight ? 'block' : '') : '';
+                if (scrollbarYToLeft) {
+                    xLeftCornerEl.style.width = `${osbWidth}px`;
+                    xLeftCornerEl.style.display = overflowY && osbWidth ? 'block' : '';
+                }
+                else {
+                    xLeftCornerEl.style.display = '';
+                }
             }
             if (xRightCornerEl) {
-                xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-                xRightCornerEl.style.display = scrollbarXToTop ? '' : (xScrollbarVisible === 'visible' ? 'block' : '');
+                if (scrollbarYToLeft) {
+                    xRightCornerEl.style.display = '';
+                }
+                else {
+                    xRightCornerEl.style.width = `${osbWidth}px`;
+                    xRightCornerEl.style.display = xScrollbarVisible === 'visible' ? 'block' : '';
+                }
             }
             const scrollYVirtualEl = refScrollYVirtualElem.value;
             if (scrollYVirtualEl) {
@@ -3970,8 +3996,10 @@ export default defineVxeComponent({
                 updateAfterDataIndex();
                 return nextTick();
             }).then(() => {
+                updateTreeLineStyle();
                 return handleLazyRecalculate(true, true, true);
             }).then(() => {
+                updateTreeLineStyle();
                 setTimeout(() => {
                     $xeTable.updateCellAreas();
                 }, 30);
@@ -4329,6 +4357,9 @@ export default defineVxeComponent({
                 }
             }
         };
+        /**
+         * 更新展开行样式
+         */
         const updateRowExpandStyle = () => {
             const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData;
             const expandOpts = computeExpandOpts.value;
@@ -4384,6 +4415,12 @@ export default defineVxeComponent({
                 }
             }
         };
+        /**
+         * 更新树连接线样式
+         */
+        const updateTreeLineStyle = () => {
+            // 待优化
+        };
         const handleRowExpandScroll = () => {
             const { elemStore } = internalData;
             const rowExpandEl = refRowExpandElem.value;
@@ -11745,14 +11782,24 @@ export default defineVxeComponent({
          * 如果宽度足够情况下，则不需要渲染固定列
          * @param {String} fixedType 固定列类型
          */
-        const renderFixed = (fixedType) => {
+        const renderViewFixed = (fixedType) => {
             const { showHeader, showFooter } = props;
             const { tableData, tableColumn, tableGroupColumn, columnStore, footerTableData } = reactData;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts;
+            const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts;
             const isFixedLeft = fixedType === 'left';
             const fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList;
+            const osXBehavior = XEUtils.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior;
+            const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
             return h('div', {
                 ref: isFixedLeft ? refLeftContainer : refRightContainer,
-                class: `vxe-table--fixed-${fixedType}-wrapper`
+                class: [`vxe-table--fixed-${fixedType}-wrapper`, {
+                        [`x-ob--${osXBehavior}`]: osXBehavior,
+                        [`y-ob--${osYBehavior}`]: osYBehavior
+                    }]
             }, [
                 showHeader
                     ? h(TableHeaderComponent, {
@@ -11940,6 +11987,7 @@ export default defineVxeComponent({
                         $columnIndex,
                         _columnIndex,
                         fixed: '',
+                        source: 'table',
                         type: 'body',
                         level: rowLevel,
                         rowid,
@@ -12039,10 +12087,20 @@ export default defineVxeComponent({
         const renderViewport = () => {
             const { showHeader, showFooter } = props;
             const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts;
+            const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts;
             const { leftList, rightList } = columnStore;
+            const osXBehavior = XEUtils.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior;
+            const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
             return h('div', {
                 ref: refTableViewportElem,
-                class: 'vxe-table--viewport-wrapper'
+                class: ['vxe-table--viewport-wrapper', {
+                        [`x-ob--${osXBehavior}`]: osXBehavior,
+                        [`y-ob--${osYBehavior}`]: osYBehavior
+                    }]
             }, [
                 h('div', {
                     class: 'vxe-table--main-wrapper'
@@ -12080,8 +12138,8 @@ export default defineVxeComponent({
                 h('div', {
                     class: 'vxe-table--fixed-wrapper'
                 }, [
-                    leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-                    rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
+                    leftList && leftList.length && overflowX ? renderViewFixed('left') : renderEmptyElement($xeTable),
+                    rightList && rightList.length && overflowX ? renderViewFixed('right') : renderEmptyElement($xeTable)
                 ]),
                 renderRowExpandedVNs()
             ]);

package/es/table/src/util.js

@@ -566,7 +566,7 @@ const lineOffsetSizes = {
     medium: 1,
     large: 0
 };
-function countTreeExpand(prevRow, params) {
+function countTreeExpandSize(prevRow, params) {
     let count = 1;
     if (!prevRow) {
         return count;
@@ -583,7 +583,7 @@ function countTreeExpand(prevRow, params) {
     const rowChildren = prevRow[transform ? mapChildrenField : childrenField];
     if (rowChildren && treeExpandedFlag && treeExpandedMaps[getRowid($table, prevRow)]) {
         for (let index = 0; index < rowChildren.length; index++) {
-            count += countTreeExpand(rowChildren[index], params);
+            count += countTreeExpandSize(rowChildren[index], params);
         }
     }
     return count;
@@ -613,7 +613,7 @@ export function calcTreeLine(params, prevRow) {
     const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
     let expandSize = 1;
     if (prevRow) {
-        expandSize = countTreeExpand(prevRow, params);
+        expandSize = countTreeExpandSize(prevRow, params);
     }
     let cellHeight = currCellHeight;
     const vnHeight = rowRest.height;

package/es/table/style.css

@@ -1788,6 +1788,18 @@
   overflow: hidden;
   flex-grow: 1;
 }
+.vxe-table--viewport-wrapper.x-ob--contain > .vxe-table--main-wrapper > .vxe-table--header-wrapper > .vxe-table--header-inner-wrapper {
+  overscroll-behavior-x: contain;
+}
+.vxe-table--viewport-wrapper.x-ob--contain > .vxe-table--main-wrapper > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overscroll-behavior-x: contain;
+}
+.vxe-table--viewport-wrapper.x-ob--contain > .vxe-table--main-wrapper > .vxe-table--footer-wrapper > .vxe-table--footer-inner-wrapper {
+  overscroll-behavior-x: contain;
+}
+.vxe-table--viewport-wrapper.y-ob--contain > .vxe-table--main-wrapper > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overscroll-behavior-y: contain;
+}
 
 .vxe-table--header-wrapper,
 .vxe-table--body-wrapper,
@@ -2212,6 +2224,9 @@
   left: 0;
   bottom: 0;
 }
+.vxe-table .vxe-table--scroll-x-wrapper {
+  height: 100%;
+}
 .vxe-table .vxe-table--scroll-x-handle {
   overflow-y: hidden;
   overflow-x: scroll;
@@ -3151,6 +3166,10 @@
   outline: 0;
   background-color: var(--vxe-ui-layout-background-color);
 }
+.vxe-table--render-default .vxe-table--fixed-left-wrapper.y-ob--contain > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper,
+.vxe-table--render-default .vxe-table--fixed-right-wrapper.y-ob--contain > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overscroll-behavior-y: contain;
+}
 .vxe-table--render-default .vxe-table--fixed-left-wrapper .vxe-table--body-wrapper,
 .vxe-table--render-default .vxe-table--fixed-right-wrapper .vxe-table--body-wrapper {
   outline: 0;