vxe-pc-ui 4.17.7 → 4.17.8

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.17.7"}`;
+const uiVersion = `ui v${"4.17.8"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$i = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.17.7";
+const version = "4.17.8";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -512,7 +512,8 @@ setConfig$1({
         theme: 'dark',
         enterDelay: 500,
         leaveDelay: 300,
-        isArrow: true
+        isArrow: true,
+        defaultPlacement: 'top'
     },
     transfer: {},
     tree: {
@@ -526,8 +527,7 @@ setConfig$1({
         tooltipConfig: {
             mode: 'tooltip',
             enterable: true,
-            leaveDelay: 300,
-            defaultPlacement: 'top'
+            leaveDelay: 300
         },
         dragConfig: {
             showIcon: true,
@@ -1964,119 +1964,156 @@ function scrollToView(elem) {
         }
     }
 }
+/**
+ * 通用定位计算
+ */
 function updatePanelPlacement(targetElem, panelElem, options) {
-    const { placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({ teleportTo: false, marginSize: 18, isMinWidth: true }, options);
+    const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+        teleportTo: false,
+        marginSize: 18,
+        isMinWidth: true
+    }, options);
     let panelPlacement = 'bottom';
     let top = '';
     let bottom = '';
-    let left = '';
-    const right = '';
+    let left = 0;
     let minWidth = '';
+    let arrowLeft = '';
     const stys = {};
     if (panelElem && targetElem) {
-        const documentElement = document.documentElement;
-        const bodyElem = document.body;
-        const targetHeight = targetElem.offsetHeight;
-        const panelHeight = panelElem.offsetHeight;
-        const panelWidth = panelElem.offsetWidth;
-        const panelRect = panelElem.getBoundingClientRect();
-        const targetRect = targetElem.getBoundingClientRect();
-        const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight;
-        const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth;
-        minWidth = targetElem.offsetWidth;
-        if (teleportTo) {
-            left = targetRect.left;
-            top = targetRect.top + targetHeight;
-            if (placement === 'top') {
-                panelPlacement = 'top';
-                top = targetRect.top - panelHeight;
-            }
-            else if (!placement) {
-                if (defaultPlacement === 'top') {
+        const parentEl = panelElem.parentElement;
+        const parentWrapperEl = parentEl === document.body ? document.documentElement : parentEl;
+        if (parentWrapperEl) {
+            const targetWidth = targetElem.offsetWidth;
+            const targetHeight = targetElem.offsetHeight;
+            const panelHeight = panelElem.offsetHeight;
+            const panelWidth = panelElem.offsetWidth;
+            const parentWrapperRect = parentWrapperEl.getBoundingClientRect();
+            const panelRect = panelElem.getBoundingClientRect();
+            const targetRect = targetElem.getBoundingClientRect();
+            const visibleHeight = parentWrapperEl.clientHeight;
+            const visibleWidth = parentWrapperEl.clientWidth;
+            const offsetLeft = parentWrapperRect.left;
+            const offsetTop = parentWrapperRect.top;
+            const targetLeft = targetRect.left;
+            const targetTop = targetRect.top;
+            minWidth = targetElem.offsetWidth;
+            if (teleportTo) {
+                left = defaultLeft || (targetLeft);
+                top = defaultTop || (targetTop + targetHeight);
+                if (placement === 'top') {
                     panelPlacement = 'top';
-                    top = targetRect.top - panelHeight;
-                    // 如果上面不够放，则向下
-                    if (top < marginSize) {
-                        panelPlacement = 'bottom';
-                        top = targetRect.top + targetHeight;
-                    }
-                    // 如果下面不够放，则向上（优先）
-                    if (top + panelHeight + marginSize > visibleHeight) {
+                    top = targetTop - panelHeight;
+                }
+                else if (!placement) {
+                    if (defaultPlacement === 'top') {
                         panelPlacement = 'top';
-                        top = targetRect.top - panelHeight;
+                        top = targetTop - panelHeight;
+                        // 如果上面不够放，则向下
+                        if (top < marginSize) {
+                            panelPlacement = 'bottom';
+                            top = targetTop + targetHeight;
+                        }
+                        // 如果下面不够放，则向上（优先）
+                        if (top + panelHeight + marginSize > visibleHeight) {
+                            panelPlacement = 'top';
+                            top = targetTop - panelHeight;
+                        }
+                    }
+                    else {
+                        // 如果下面不够放，则向上
+                        if (top + panelHeight + marginSize > visibleHeight) {
+                            panelPlacement = 'top';
+                            top = targetTop - panelHeight;
+                        }
+                        // 如果上面不够放，则向下（优先）
+                        if (top < marginSize) {
+                            panelPlacement = 'bottom';
+                            top = targetTop + targetHeight;
+                        }
                     }
                 }
-                else {
+                // 如果溢出右边
+                if (left + panelWidth + marginSize > visibleWidth) {
+                    left -= left + panelWidth + marginSize - visibleWidth;
+                }
+                // 如果溢出左边
+                if (left < marginSize) {
+                    left = marginSize;
+                }
+                // 偏移
+                top -= offsetTop;
+                left -= offsetLeft;
+            }
+            else {
+                if (placement === 'top') {
+                    panelPlacement = 'top';
+                    bottom = targetHeight;
+                }
+                else if (!placement) {
                     // 如果下面不够放，则向上
-                    if (top + panelHeight + marginSize > visibleHeight) {
-                        panelPlacement = 'top';
-                        top = targetRect.top - panelHeight;
-                    }
-                    // 如果上面不够放，则向下（优先）
-                    if (top < marginSize) {
-                        panelPlacement = 'bottom';
-                        top = targetRect.top + targetHeight;
+                    top = targetHeight;
+                    if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
+                        // 如果上面不够放，则向下（优先）
+                        if (targetTop - targetHeight - panelHeight > marginSize) {
+                            panelPlacement = 'top';
+                            top = '';
+                            bottom = targetHeight;
+                        }
                     }
                 }
+                // 是否超出右侧
+                if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
+                    left = -(panelRect.left + panelRect.width + marginSize - visibleWidth);
+                }
             }
-            // 如果溢出右边
-            if (left + panelWidth + marginSize > visibleWidth) {
-                left -= left + panelWidth + marginSize - visibleWidth;
+            if (XEUtils.isNumber(top)) {
+                stys.top = toCssUnit(top);
             }
-            // 如果溢出左边
-            if (left < marginSize) {
-                left = marginSize;
+            if (XEUtils.isNumber(bottom)) {
+                stys.bottom = toCssUnit(bottom);
             }
-        }
-        else {
-            if (placement === 'top') {
-                panelPlacement = 'top';
-                bottom = targetHeight;
-            }
-            else if (!placement) {
-                // 如果下面不够放，则向上
-                top = targetHeight;
-                if (targetRect.top + targetHeight + panelHeight + marginSize > visibleHeight) {
-                    // 如果上面不够放，则向下（优先）
-                    if (targetRect.top - targetHeight - panelHeight > marginSize) {
-                        panelPlacement = 'top';
-                        top = '';
-                        bottom = targetHeight;
-                    }
+            if (XEUtils.isNumber(left)) {
+                stys.left = toCssUnit(left);
+            }
+            if (isMinWidth && XEUtils.isNumber(minWidth)) {
+                stys.minWidth = toCssUnit(minWidth);
+            }
+            // 箭头
+            if (left === targetLeft) {
+                if (targetWidth <= panelWidth) {
+                    arrowLeft = targetWidth / 2;
                 }
             }
-            // 是否超出右侧
-            if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
-                left = -(panelRect.left + panelRect.width + marginSize - visibleWidth);
+            else if (left < targetLeft) {
+                if (left + panelWidth > targetLeft + targetWidth) {
+                    arrowLeft = (targetLeft - left) + targetWidth / 2;
+                }
+                else {
+                    arrowLeft = (targetLeft - left) + (panelWidth - (targetLeft - left)) / 2;
+                }
             }
         }
-        if (XEUtils.isNumber(top)) {
-            stys.top = toCssUnit(top);
-        }
-        if (XEUtils.isNumber(bottom)) {
-            stys.bottom = toCssUnit(bottom);
-        }
-        if (XEUtils.isNumber(left)) {
-            stys.left = toCssUnit(left);
-        }
-        if (XEUtils.isNumber(right)) {
-            stys.right = toCssUnit(right);
-        }
-        if (isMinWidth && XEUtils.isNumber(minWidth)) {
-            stys.minWidth = toCssUnit(minWidth);
-        }
     }
     return {
         top: top || 0,
         bottom: bottom || 0,
         left: left || 0,
-        right: 0,
+        arrowLeft: arrowLeft || 0,
         style: stys,
         placement: panelPlacement
     };
 }
 function getPopupContainer(appendTo) {
-    return appendTo ? ((XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo) || 'body') : 'body';
+    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;
 }
 
 function assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink) {
@@ -2691,6 +2728,10 @@ var VxeTooltipComponent = defineVxeComponent({
         leaveDelay: {
             type: Number,
             default: () => getConfig$3().tooltip.leaveDelay
+        },
+        appendTo: {
+            type: [String, Function],
+            default: () => getConfig$3().tooltip.appendTo
         }
     },
     emits: [
@@ -2738,99 +2779,8 @@ var VxeTooltipComponent = defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
-        let tooltipMethods = {};
-        const updateTipStyle = () => {
-            const { isArrow, placement, defaultPlacement } = props;
-            const { tipTarget: targetElem, tipStore, tipPos } = reactData;
-            let top = '';
-            let left = '';
-            let panelPlacement = 'bottom';
-            let arrowLeft = '';
-            const panelElem = refElem.value;
-            if (panelElem && targetElem) {
-                const documentElement = document.documentElement;
-                const bodyElem = document.body;
-                const targetWidth = targetElem.offsetWidth;
-                const targetHeight = targetElem.offsetHeight;
-                const panelHeight = panelElem.offsetHeight;
-                const panelWidth = panelElem.offsetWidth;
-                const targetRect = targetElem.getBoundingClientRect();
-                const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight;
-                const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth;
-                const marginSize = 6;
-                left = targetRect.left;
-                top = targetRect.top + targetHeight;
-                if (tipPos && (tipPos.oLeft || tipPos.oTop)) {
-                    if (isArrow) {
-                        left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2;
-                    }
-                    else {
-                        left = tipPos.x + 1;
-                        top = tipPos.y + 1;
-                    }
-                }
-                else {
-                    left = targetRect.left + (targetWidth - panelWidth) / 2;
-                }
-                if (placement === 'top') {
-                    panelPlacement = 'top';
-                    top = targetRect.top - panelHeight;
-                }
-                else if (!placement) {
-                    if (defaultPlacement === 'top') {
-                        panelPlacement = 'top';
-                        top = targetRect.top - panelHeight;
-                        // 如果上面不够放，则向下
-                        if (top < marginSize) {
-                            panelPlacement = 'bottom';
-                            top = targetRect.top + targetHeight;
-                        }
-                        // 如果下面不够放，则向上（优先）
-                        if (top + panelHeight + marginSize > visibleHeight) {
-                            panelPlacement = 'top';
-                            top = targetRect.top - panelHeight;
-                        }
-                    }
-                    else {
-                        // 如果下面不够放，则向上
-                        if (top + panelHeight + marginSize > visibleHeight) {
-                            panelPlacement = 'top';
-                            top = targetRect.top - panelHeight;
-                        }
-                        // 如果上面不够放，则向下（优先）
-                        if (top < marginSize) {
-                            panelPlacement = 'bottom';
-                            top = targetRect.top + targetHeight;
-                        }
-                    }
-                }
-                // 如果溢出右边
-                if (left + panelWidth + marginSize > visibleWidth) {
-                    left -= left + panelWidth + marginSize - visibleWidth;
-                }
-                // 如果溢出左边
-                if (left < marginSize) {
-                    left = marginSize;
-                }
-                // 箭头
-                if (left === targetRect.left) {
-                    if (targetWidth <= panelWidth) {
-                        arrowLeft = targetWidth / 2;
-                    }
-                }
-                else if (left < targetRect.left) {
-                    if (left + panelWidth > targetRect.left + targetWidth) {
-                        arrowLeft = (targetRect.left - left) + targetWidth / 2;
-                    }
-                    else {
-                        arrowLeft = (targetRect.left - left) + (panelWidth - (targetRect.left - left)) / 2;
-                    }
-                }
-                tipStore.placement = panelPlacement;
-                tipStore.style.top = `${top}px`;
-                tipStore.style.left = `${left}px`;
-                tipStore.arrowStyle.left = `${arrowLeft}px`;
-            }
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $tooltip: $xeTooltip }, params));
         };
         const updateValue = (value) => {
             if (value !== reactData.visible) {
@@ -2839,14 +2789,18 @@ var VxeTooltipComponent = defineVxeComponent({
                 emit('update:modelValue', value);
             }
         };
-        const updateZindex = () => {
-            if (reactData.tipZindex < getLastZIndex()) {
+        const updateZIndex = () => {
+            const { zIndex } = props;
+            if (zIndex) {
+                reactData.tipZindex = XEUtils.toNumber(zIndex);
+            }
+            else if (reactData.tipZindex < getLastZIndex()) {
                 reactData.tipZindex = nextZIndex();
             }
         };
         const clickEvent = () => {
             if (reactData.visible) {
-                tooltipMethods.close();
+                $xeTooltip.close();
             }
             else {
                 handleVisible(reactData.target || getSelectorEl(), props.content);
@@ -2861,12 +2815,12 @@ var VxeTooltipComponent = defineVxeComponent({
             if (enterable && trigger === 'hover') {
                 setTimeout(() => {
                     if (!reactData.tipActive) {
-                        tooltipMethods.close();
+                        $xeTooltip.close();
                     }
                 }, leaveDelay);
             }
             else {
-                tooltipMethods.close();
+                $xeTooltip.close();
             }
         };
         const wrapperMouseenterEvent = () => {
@@ -2878,22 +2832,23 @@ var VxeTooltipComponent = defineVxeComponent({
             if (enterable && trigger === 'hover') {
                 setTimeout(() => {
                     if (!reactData.tipActive) {
-                        tooltipMethods.close();
+                        $xeTooltip.close();
                     }
                 }, leaveDelay);
             }
         };
         const showTip = () => {
+            const { appendTo } = props;
             const { tipStore } = reactData;
-            const el = refElem.value;
-            if (el) {
-                const parentNode = el.parentNode;
+            const panelElem = refElem.value;
+            if (panelElem) {
+                const parentNode = panelElem.parentNode;
                 if (!parentNode) {
-                    document.body.appendChild(el);
+                    getPopupAppendElement(appendTo).appendChild(panelElem);
                 }
             }
             updateValue(true);
-            updateZindex();
+            updateZIndex();
             tipStore.placement = 'top';
             tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex };
             tipStore.arrowStyle = { left: '50%' };
@@ -2954,10 +2909,50 @@ var VxeTooltipComponent = defineVxeComponent({
             }
             return null;
         };
-        tooltipMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $tooltip: $xeTooltip }, params));
-            },
+        const updateTipStyle = () => {
+            const { placement, defaultPlacement, isArrow } = props;
+            const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData;
+            const panelElem = refElem.value;
+            if (!targetElem || !panelElem) {
+                return;
+            }
+            const targetRect = targetElem.getBoundingClientRect();
+            const targetWidth = targetElem.offsetWidth;
+            const targetHeight = targetElem.offsetHeight;
+            const panelWidth = panelElem.offsetWidth;
+            const targetLeft = targetRect.left;
+            const targetTop = targetRect.top;
+            // 支持特殊定位逻辑
+            let left = targetLeft;
+            let top = targetTop + targetHeight;
+            if (tipPos && (tipPos.oLeft || tipPos.oTop)) {
+                if (isArrow) {
+                    left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2;
+                }
+                else {
+                    left = tipPos.x + 1;
+                    top = tipPos.y + 1;
+                }
+            }
+            else {
+                left = targetLeft + (targetWidth - panelWidth) / 2;
+            }
+            const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                defaultTop: top,
+                defaultLeft: left,
+                placement: placement,
+                defaultPlacement: defaultPlacement,
+                teleportTo: true
+            });
+            const panelStyle = Object.assign(ppObj.style, {
+                zIndex: tipZindex
+            });
+            tipStore.placement = ppObj.placement;
+            tipStore.style = panelStyle;
+            tipStore.arrowStyle.left = `${ppObj.arrowLeft}px`;
+        };
+        const tooltipMethods = {
+            dispatchEvent,
             openByEvent(evnt, target, content) {
                 return handleVisible(target || reactData.target || getSelectorEl(), content, evnt);
             },
@@ -2980,20 +2975,8 @@ var VxeTooltipComponent = defineVxeComponent({
                 return handleVisible(target, content);
             },
             updatePlacement() {
-                const { visible, tipTarget } = reactData;
-                let el = refElem.value;
-                if (visible && tipTarget && el) {
-                    updateTipStyle();
-                }
-                return nextTick().then(() => {
-                    el = refElem.value;
-                    if (tipTarget && el) {
-                        updateTipStyle();
-                        return nextTick().then(() => {
-                            updateTipStyle();
-                        });
-                    }
-                });
+                updateTipStyle();
+                return nextTick().then(updateTipStyle);
             },
             isActived() {
                 return reactData.tipActive;
@@ -3080,7 +3063,7 @@ var VxeTooltipComponent = defineVxeComponent({
                     handleVisible(reactData.target || getSelectorEl(), props.content);
                 }
                 else {
-                    tooltipMethods.close();
+                    $xeTooltip.close();
                 }
             }
             reactData.isUpdate = false;
@@ -3093,21 +3076,21 @@ var VxeTooltipComponent = defineVxeComponent({
             }
             nextTick(() => {
                 const { trigger, content } = props;
-                const wrapperElem = refElem.value;
-                if (wrapperElem) {
-                    const parentNode = wrapperElem.parentNode;
+                const panelElem = refElem.value;
+                if (panelElem) {
+                    const parentNode = panelElem.parentNode;
                     if (parentNode) {
                         reactData.tipContent = content;
                         reactData.tipZindex = nextZIndex();
-                        XEUtils.arrayEach(wrapperElem.children, (elem, index) => {
+                        XEUtils.arrayEach(panelElem.children, (elem, index) => {
                             if (index) {
-                                parentNode.insertBefore(elem, wrapperElem);
+                                parentNode.insertBefore(elem, panelElem);
                                 if (!reactData.target) {
                                     reactData.target = elem;
                                 }
                             }
                         });
-                        parentNode.removeChild(wrapperElem);
+                        parentNode.removeChild(panelElem);
                         const { target } = reactData;
                         if (target) {
                             if (trigger === 'hover') {
@@ -3127,7 +3110,7 @@ var VxeTooltipComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             const { target } = reactData;
-            const wrapperElem = refElem.value;
+            const panelElem = refElem.value;
             if (target) {
                 target.onmouseenter = null;
                 target.onmouseleave = null;
@@ -3137,10 +3120,10 @@ var VxeTooltipComponent = defineVxeComponent({
             if (contentWrapperfEl) {
                 contentWrapperfEl.removeEventListener('wheel', wheelEvent);
             }
-            if (wrapperElem) {
-                const parentNode = wrapperElem.parentNode;
+            if (panelElem) {
+                const parentNode = panelElem.parentNode;
                 if (parentNode) {
-                    parentNode.removeChild(wrapperElem);
+                    parentNode.removeChild(panelElem);
                 }
             }
         });
@@ -44403,11 +44386,11 @@ var VxeTreeComponent = defineVxeComponent({
             ]);
         };
         const renderList = (treeList) => {
-            const { transform, emptyText } = props;
+            const { loading, transform, emptyText } = props;
             const { treeExpandedMaps } = internalData;
             const childrenField = computeChildrenField.value;
             const emptySlot = slots.empty;
-            if (!treeList.length) {
+            if (!loading && !treeList.length) {
                 return [
                     h('div', {
                         class: 'vxe-tree--empty-placeholder'