vxe-table 4.23.0-beta.2 → 4.23.0-beta.3

package/dist/all.esm.js

@@ -56,7 +56,7 @@ function getDefaultConfig(val1, def1) {
     return XEUtils.eqNull(val1) ? def1 : val1;
 }
 
-const version = "4.23.0-beta.2";
+const version = "4.23.0-beta.3";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -790,7 +790,8 @@ function wheelScrollTopTo(diffNum, cb) {
  * 通用定位计算
  */
 function updatePanelPlacement(targetElem, panelElem, options) {
-    const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+    const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+        appendTo: '',
         teleportTo: false,
         marginSize: 18,
         isMinWidth: true
@@ -804,7 +805,7 @@ function updatePanelPlacement(targetElem, panelElem, options) {
     const stys = {};
     if (panelElem && targetElem) {
         const bodyEl = document.body;
-        const parentWrapperEl = getPopupWrapperElement(panelElem);
+        const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem);
         if (parentWrapperEl) {
             const targetWidth = targetElem.offsetWidth;
             const targetHeight = targetElem.offsetHeight;
@@ -815,14 +816,16 @@ function updatePanelPlacement(targetElem, panelElem, options) {
             const targetRect = targetElem.getBoundingClientRect();
             const visibleHeight = bodyEl.clientHeight;
             const visibleWidth = bodyEl.clientWidth;
-            const offsetLeft = parentWrapperRect.left;
-            const offsetTop = parentWrapperRect.top;
+            const parentWrapperScrollLeft = parentWrapperEl.scrollLeft;
+            const parentWrapperScrollTop = parentWrapperEl.scrollTop;
+            const parentWrapperOffsetLeft = parentWrapperRect.left;
+            const parentWrapperOffsetTop = parentWrapperRect.top;
             const targetLeft = targetRect.left;
             const targetTop = targetRect.top;
             minWidth = targetElem.offsetWidth;
             if (teleportTo) {
-                left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2);
-                top = defaultTop || (targetTop + targetHeight);
+                left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft;
+                top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop;
                 if (placement === 'top') {
                     panelPlacement = 'top';
                     top = targetTop - panelHeight;
@@ -866,8 +869,8 @@ function updatePanelPlacement(targetElem, panelElem, options) {
                     left = marginSize;
                 }
                 // 偏移
-                top -= offsetTop;
-                left -= offsetLeft;
+                top -= parentWrapperOffsetTop;
+                left -= parentWrapperOffsetLeft;
             }
             else {
                 if (placement === 'top') {
@@ -936,9 +939,20 @@ function getPopupWrapperElement(panelElem) {
     const parentEl = panelElem.parentElement;
     return (parentEl === bodyEl ? document.documentElement : parentEl) || null;
 }
+function getPopupContainer(appendTo) {
+    const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo;
+    return selectElem || 'body';
+}
+function getPopupAppendElement(appendTo) {
+    const selectElem = getPopupContainer(appendTo);
+    if (XEUtils.isString(selectElem)) {
+        return document.querySelector(selectElem) || document.body;
+    }
+    return selectElem;
+}
 
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.2"}`;
+const tableVersion = `table v${"4.23.0-beta.3"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4299,61 +4313,6 @@ function clearColAnimate(elem, clss) {
     }, 500);
 }
 
-/**
- * 计算滚动条滑块的长度
- */
-function getThumbSize(viewportSize, contentSize, trackSize) {
-    if (contentSize <= viewportSize) {
-        return 0;
-    }
-    const ratio = viewportSize / contentSize;
-    const ideal = trackSize * ratio;
-    return Math.max(20, Math.min(ideal, trackSize));
-}
-/**
- * 计算滚动条滑块的偏移位置
- */
-function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxScroll = contentSize - viewportSize;
-    if (maxScroll <= 0) {
-        return 0;
-    }
-    const maxThumbOffset = trackSize - thumbSize;
-    if (maxThumbOffset <= 0) {
-        return 0;
-    }
-    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
-    const ratio = clamped / maxScroll;
-    return ratio * maxThumbOffset;
-}
-/**
- * 根据点击轨道的位置，计算滑块的偏移位置
- */
-function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxThumbOffset = trackSize - thumbSize;
-    const maxScroll = contentSize - viewportSize;
-    if (maxScroll <= 0 || maxThumbOffset <= 0) {
-        return 0;
-    }
-    let thumbOffset = clickPosition - thumbSize / 2;
-    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-    const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll;
-    return scrollOffset;
-}
-/**
- * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
- */
-function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxScroll = contentSize - viewportSize;
-    const maxThumbOffset = trackSize - thumbSize;
-    if (maxScroll <= 0 || maxThumbOffset <= 0) {
-        return 0;
-    }
-    let thumbOffset = pointerPosition - dragOffset;
-    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-    return (thumbOffset / maxThumbOffset) * maxScroll;
-}
-
 // 跨表拖拽
 const crossTableDragRowInfo = reactive({
     row: null
@@ -6449,8 +6408,8 @@ var TableCustomPanelComponent = defineVxeComponent({
             const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData;
             const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
             if (prevDragGroupField || prevDragAggFnColid) {
-                if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
-                    $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
+                if ($xeTable.handlePivotTableAggPanelDragendEvent) {
+                    $xeTable.handlePivotTableAggPanelDragendEvent(evnt);
                 }
             }
             else if (prevDragCol && dragCol) {
@@ -9044,6 +9003,7 @@ hooks$7.add('tableFilterModule', {
                 if (transfer) {
                     const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
                         defaultPlacement: 'bottom',
+                        appendTo: '',
                         isMinWidth: false,
                         teleportTo: transfer
                     });
@@ -16043,7 +16003,8 @@ renderer$2.mixin({
 });
 
 const { warnLog: warnLog$2, errLog: errLog$2 } = createComponentLog('table');
-const { getConfig: getConfig$2, getIcon: getIcon$1, getI18n: getI18n$2, renderer: renderer$1, formats, createEvent: createEvent$2, globalResize, interceptor, hooks: hooks$1, domUtils, globalEvents: globalEvents$1, GLOBAL_EVENT_KEYS: GLOBAL_EVENT_KEYS$1, useFns: useFns$2, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
+const { getConfig: getConfig$2, getIcon: getIcon$1, getI18n: getI18n$2, renderer: renderer$1, formats, scrollbarUtils, createEvent: createEvent$2, globalResize, interceptor, hooks: hooks$1, domUtils, globalEvents: globalEvents$1, GLOBAL_EVENT_KEYS: GLOBAL_EVENT_KEYS$1, useFns: useFns$2, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {};
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -16363,7 +16324,8 @@ var VxeTableComponent = defineVxeComponent({
             return Object.assign({}, getConfig$2().table.checkboxConfig, props.checkboxConfig);
         });
         const computeTooltipOpts = computed(() => {
-            return Object.assign({}, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
+            const { useScrollbar } = props;
+            return Object.assign({ useScrollbar }, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
         });
         const computeHeaderTooltipOpts = computed(() => {
             const tooltipOpts = computeTooltipOpts.value;
@@ -30453,7 +30415,8 @@ var VxeTableComponent = defineVxeComponent({
                             key: 'ctp',
                             ref: refCommTooltip,
                             isArrow: false,
-                            enterable: false
+                            enterable: false,
+                            useScrollbar
                         }),
                         /**
                           * 工具提示
@@ -30476,7 +30439,8 @@ var VxeTableComponent = defineVxeComponent({
                             maxHeight: tableTipConfig.maxHeight,
                             placement: tableTipConfig.placement,
                             defaultPlacement: tableTipConfig.defaultPlacement,
-                            popupClassName: tableTipConfig.popupClassName
+                            popupClassName: tableTipConfig.popupClassName,
+                            useScrollbar: tableTipConfig.useScrollbar
                         }, currTooltipSlot
                             ? {
                                 content: () => {
@@ -30515,7 +30479,8 @@ var VxeTableComponent = defineVxeComponent({
                                 theme: validTipConfig.theme,
                                 enterable: validTipConfig.enterable,
                                 enterDelay: validTipConfig.enterDelay,
-                                leaveDelay: validTipConfig.leaveDelay
+                                leaveDelay: validTipConfig.leaveDelay,
+                                useScrollbar
                             })
                             : renderEmptyElement$1($xeTable)
                     ])