vxe-table 4.16.0-beta.5 → 4.16.0-beta.7

package/es/table/src/table.js

@@ -1,4 +1,4 @@
-import { h, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
+import { h, reactive, ref, provide, inject, nextTick, Teleport, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom';
@@ -44,6 +44,9 @@ export default defineVxeComponent({
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const $xeTabs = inject('$xeTabs', null);
+        const $xeGrid = inject('$xeGrid', null);
+        const $xeGantt = inject('$xeGantt', null);
+        const $xeGGWrapper = $xeGrid || $xeGantt;
         const { computeSize } = useFns.useSize(props);
         const reactData = reactive({
             // 低性能的静态列
@@ -306,6 +309,7 @@ export default defineVxeComponent({
         const refTableRightHeader = ref();
         const refTableRightBody = ref();
         const refTableRightFooter = ref();
+        const refTeleportWrapper = ref();
         const refLeftContainer = ref();
         const refRightContainer = ref();
         const refColResizeBar = ref();
@@ -328,9 +332,6 @@ export default defineVxeComponent({
         const refScrollYBottomCornerElem = ref();
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
-        const $xeGrid = inject('$xeGrid', null);
-        const $xeGantt = inject('$xeGantt', null);
-        const $xeGGWrapper = $xeGrid || $xeGantt;
         let $xeToolbar;
         const computeTableId = computed(() => {
             const { id } = props;
@@ -7706,17 +7707,24 @@ export default defineVxeComponent({
             reactData.dragTipText = tipContent;
         };
         const showDropTip = (evnt, trEl, thEl, showLine, dragPos) => {
-            const el = refElem.value;
-            if (!el) {
+            let wrapperEl = refElem.value;
+            if ($xeGantt && trEl) {
+                const { refGanttContainerElem } = $xeGantt.getRefMaps();
+                const ganttContainerElem = refGanttContainerElem.value;
+                if (ganttContainerElem) {
+                    wrapperEl = ganttContainerElem;
+                }
+            }
+            if (!wrapperEl) {
                 return;
             }
             const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
             const { prevDragToChild } = internalData;
-            const wrapperRect = el.getBoundingClientRect();
+            const wrapperRect = wrapperEl.getBoundingClientRect();
             const osbWidth = overflowY ? scrollbarWidth : 0;
             const osbHeight = overflowX ? scrollbarHeight : 0;
-            const tableWrapperWidth = el.clientWidth;
-            const tableWrapperHeight = el.clientHeight;
+            const tableWrapperWidth = wrapperEl.clientWidth;
+            const tableWrapperHeight = wrapperEl.clientHeight;
             if (trEl) {
                 const rdLineEl = refDragRowLineElem.value;
                 if (rdLineEl) {
@@ -7784,8 +7792,8 @@ export default defineVxeComponent({
             const rdTipEl = refDragTipElem.value;
             if (rdTipEl) {
                 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`;
+                rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+                rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
                 rdTipEl.setAttribute('drag-status', showLine ? (prevDragToChild ? 'sub' : 'normal') : 'disabled');
             }
         };
@@ -8159,7 +8167,7 @@ export default defineVxeComponent({
                 if (!cell) {
                     return;
                 }
-                const cellParams = XEUtils.assign(params, { cell });
+                const cellParams = XEUtils.assign(params, { cell, $table: $xeTable });
                 let dragLeft = 0;
                 const tableRect = tableEl.getBoundingClientRect();
                 const rightContainerRect = rightContainerElem ? rightContainerElem.getBoundingClientRect() : null;
@@ -8286,7 +8294,7 @@ export default defineVxeComponent({
                     const colRest = fullColumnIdData[colid];
                     const dragBtnElem = evnt.target;
                     const cell = dragBtnElem.parentNode;
-                    const cellParams = Object.assign(params, { cell });
+                    const cellParams = Object.assign(params, { cell, $table: $xeTable });
                     const colMinWidth = getColReMinWidth(cellParams);
                     el.setAttribute('data-calc-col', 'Y');
                     let resizeWidth = calcColumnAutoWidth(resizeColumn, el);
@@ -8320,7 +8328,14 @@ export default defineVxeComponent({
                 const resizableOpts = computeResizableOpts.value;
                 const rowOpts = computeRowOpts.value;
                 const cellOpts = computeCellOpts.value;
-                const tableEl = refElem.value;
+                let tableEl = refElem.value;
+                if ($xeGantt) {
+                    const { refGanttContainerElem } = $xeGantt.getRefMaps();
+                    const ganttContainerElem = refGanttContainerElem.value;
+                    if (ganttContainerElem) {
+                        tableEl = ganttContainerElem;
+                    }
+                }
                 const resizeBarElem = refRowResizeBar.value;
                 if (!resizeBarElem) {
                     return;
@@ -9570,6 +9585,7 @@ export default defineVxeComponent({
                 const { treeConfig, dragConfig } = props;
                 const rowDragOpts = computeRowDragOpts.value;
                 const { afterFullData, tableFullData, fullAllDataRowIdData } = internalData;
+                const $xeGanttView = internalData.xeGanttView;
                 const { animation, isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = rowDragOpts;
                 const treeOpts = computeTreeOpts.value;
                 const cellOpts = computeCellOpts.value;
@@ -9756,6 +9772,14 @@ export default defineVxeComponent({
                                 const _newRowIndex = dragRowRest._index;
                                 const firstRow = tableData[0];
                                 const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)];
+                                let wrapperEl = el;
+                                if ($xeGantt && $xeGanttView) {
+                                    const { refGanttContainerElem } = $xeGantt.getRefMaps();
+                                    const ganttContainerElem = refGanttContainerElem.value;
+                                    if (ganttContainerElem) {
+                                        wrapperEl = ganttContainerElem;
+                                    }
+                                }
                                 if (firstRowRest) {
                                     const _firstRowIndex = firstRowRest._index;
                                     const _lastRowIndex = _firstRowIndex + tableData.length;
@@ -9789,14 +9813,26 @@ export default defineVxeComponent({
                                     }
                                     const dragRangeList = tableData.slice(rsIndex, reIndex);
                                     if (dragRangeList.length) {
-                                        const dtTrList = el.querySelectorAll(dragRangeList.map(row => `.vxe-body--row[rowid="${getRowid($xeTable, row)}"]`).join(','));
+                                        const dtClss = [];
+                                        dragRangeList.forEach(row => {
+                                            const rowid = getRowid($xeTable, row);
+                                            dtClss.push(`.vxe-body--row[rowid="${rowid}"]`);
+                                            if ($xeGantt) {
+                                                dtClss.push(`.vxe-gantt-view--body-row[rowid="${rowid}"]`, `.vxe-gantt-view--chart-row[rowid="${rowid}"]`);
+                                            }
+                                        });
+                                        const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
                                         moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
                                     }
                                 }
-                                const newTrList = el.querySelectorAll(`.vxe-body--row[rowid="${dragRowid}"]`);
-                                const newTrEl = newTrList[0];
+                                const drClss = [`.vxe-body--row[rowid="${dragRowid}"]`];
+                                if ($xeGantt) {
+                                    drClss.push(`.vxe-gantt-view--body-row[rowid="${dragRowid}"]`, `.vxe-gantt-view--chart-row[rowid="${dragRowid}"]`);
+                                }
+                                const newDtTrList = wrapperEl.querySelectorAll(drClss.join(','));
+                                const newTrEl = newDtTrList[0];
                                 if (dragOffsetTop > -1 && newTrEl) {
-                                    moveRowAnimateToTb(newTrList, dragOffsetTop - newTrEl.offsetTop);
+                                    moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
                                 }
                             }
                             updateRowOffsetTop();
@@ -9822,7 +9858,7 @@ export default defineVxeComponent({
                 const { lazy } = treeOpts;
                 const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
                 const { prevDragRow, prevDragPos } = internalData;
-                const el = refElem.value;
+                let wrapperEl = refElem.value;
                 if (treeConfig && lazy && prevDragToChild) {
                     // 懒加载
                     const newRowid = getRowid($xeTable, prevDragRow);
@@ -9839,9 +9875,18 @@ export default defineVxeComponent({
                 else {
                     $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
                 }
+                const dtClss = ['.vxe-body--row'];
+                if ($xeGantt) {
+                    const { refGanttContainerElem } = $xeGantt.getRefMaps();
+                    const ganttContainerElem = refGanttContainerElem.value;
+                    if (ganttContainerElem) {
+                        wrapperEl = ganttContainerElem;
+                    }
+                    dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row');
+                }
                 hideDropTip();
                 clearRowDropOrigin();
-                clearRowAnimate(el);
+                clearRowAnimate(wrapperEl, dtClss);
                 internalData.prevDragToChild = false;
                 reactData.dragRow = null;
                 reactData.dragCol = null;
@@ -10214,7 +10259,7 @@ export default defineVxeComponent({
                 $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
                 hideDropTip();
                 clearColDropOrigin();
-                clearColAnimate(el);
+                clearColAnimate(el, ['.vxe-table--column']);
                 internalData.prevDragToChild = false;
                 reactData.dragRow = null;
                 reactData.dragCol = null;
@@ -11485,6 +11530,7 @@ export default defineVxeComponent({
         const renderVN = () => {
             const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
             const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore } = reactData;
+            const { teleportToWrapperElem } = internalData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
             const tableTipConfig = computeTableTipConfig.value;
@@ -11610,52 +11656,69 @@ export default defineVxeComponent({
                         })
                     ]
                     : []),
-                /**
-                 * 行高线
-                 */
                 h('div', {
-                    key: 'trl',
-                    ref: refRowResizeBar,
-                    class: 'vxe-table--resizable-row-bar'
-                }, resizableOpts.showDragTip
-                    ? [
+                    key: 'ttw'
+                }, [
+                    h(Teleport, {
+                        to: teleportToWrapperElem,
+                        disabled: !($xeGantt && teleportToWrapperElem)
+                    }, [
                         h('div', {
-                            class: 'vxe-table--resizable-number-tip'
-                        })
-                    ]
-                    : []),
-                /**
-                 * 加载中
-                 */
-                VxeUILoadingComponent
-                    ? h(VxeUILoadingComponent, {
-                        key: 'lg',
-                        class: 'vxe-table--loading',
-                        modelValue: currLoading,
-                        icon: loadingOpts.icon,
-                        text: loadingOpts.text
-                    }, loadingSlot
-                        ? {
-                            default: () => callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading })
-                        }
-                        : {})
-                    : loadingSlot
-                        ? h('div', {
-                            class: ['vxe-loading--custom-wrapper', {
-                                    'is--visible': currLoading
-                                }]
-                        }, callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }))
-                        : renderEmptyElement($xeTable),
-                /**
-                 * 自定义列
-                 */
-                initStore.custom
-                    ? h(TableCustomPanelComponent, {
-                        key: 'cs',
-                        ref: refTableCustom,
-                        customStore
-                    })
-                    : renderEmptyElement($xeTable),
+                            ref: refTeleportWrapper
+                        }, [
+                            /**
+                             * 行高线
+                             */
+                            h('div', {
+                                key: 'trl',
+                                ref: refRowResizeBar,
+                                class: 'vxe-table--resizable-row-bar'
+                            }, resizableOpts.showDragTip
+                                ? [
+                                    h('div', {
+                                        class: 'vxe-table--resizable-number-tip'
+                                    })
+                                ]
+                                : []),
+                            /**
+                             * 自定义列
+                             */
+                            initStore.custom
+                                ? h(TableCustomPanelComponent, {
+                                    key: 'cs',
+                                    ref: refTableCustom,
+                                    customStore
+                                })
+                                : renderEmptyElement($xeTable),
+                            /**
+                             * 加载中
+                             */
+                            VxeUILoadingComponent
+                                ? h(VxeUILoadingComponent, {
+                                    key: 'lg',
+                                    class: 'vxe-table--loading',
+                                    modelValue: currLoading,
+                                    icon: loadingOpts.icon,
+                                    text: loadingOpts.text
+                                }, loadingSlot
+                                    ? {
+                                        default: () => callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading })
+                                    }
+                                    : {})
+                                : loadingSlot
+                                    ? h('div', {
+                                        class: ['vxe-loading--custom-wrapper', {
+                                                'is--visible': currLoading
+                                            }]
+                                    }, callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }))
+                                    : renderEmptyElement($xeTable),
+                            /**
+                             * 拖拽排序提示
+                             */
+                            renderDragTip()
+                        ])
+                    ])
+                ]),
                 /**
                  * 筛选
                  */
@@ -11695,10 +11758,6 @@ export default defineVxeComponent({
                         ref: refTableMenu
                     })
                     : renderEmptyElement($xeTable),
-                /**
-                 * 拖拽排序提示
-                 */
-                renderDragTip(),
                 /**
                  * 提示相关
                  */
@@ -11920,7 +11979,6 @@ export default defineVxeComponent({
             tablePrivateMethods.preventEvent(null, 'deactivated', { $table: $xeTable });
         });
         onMounted(() => {
-            const $xeGantt = $xeTable.xeGantt;
             const columnOpts = computeColumnOpts.value;
             const rowOpts = computeRowOpts.value;
             const customOpts = computeCustomOpts.value;
@@ -11997,6 +12055,15 @@ export default defineVxeComponent({
                 if (props.resizable) {
                     warnLog('vxe.error.delProp', ['resizable', 'column-config.resizable']);
                 }
+                if (props.virtualXConfig && props.scrollX) {
+                    warnLog('vxe.error.notSupportProp', ['virtual-x-config', 'scroll-x', 'scroll-x=null']);
+                }
+                if (props.virtualYConfig && props.scrollY) {
+                    warnLog('vxe.error.notSupportProp', ['virtual-y-config', 'scroll-y', 'scroll-y=null']);
+                }
+                if (props.aggregateConfig && props.rowGroupConfig) {
+                    warnLog('vxe.error.notSupportProp', ['aggregate-config', 'row-group-config', 'row-group-config=null']);
+                }
                 // if (props.scrollY) {
                 //   warnLog('vxe.error.delProp', ['scroll-y', 'virtual-y-config'])
                 // }
@@ -12085,6 +12152,14 @@ export default defineVxeComponent({
                 if (checkboxOpts.halfField) {
                     warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField']);
                 }
+                if (treeConfig) {
+                    XEUtils.arrayEach(['rowField', 'parentField', 'childrenField', 'hasChildField', 'mapChildrenField'], key => {
+                        const val = treeOpts[key];
+                        if (val && val.indexOf('.') > -1) {
+                            errLog('vxe.error.errProp', [`${key}=${val}`, `${key}=${val.split('.')[0]}`]);
+                        }
+                    });
+                }
                 if (rowOpts.currentMethod) {
                     warnLog('vxe.error.delProp', ['row-config.currentMethod', 'current-row-config.beforeSelectMethod']);
                 }