vxe-pc-ui 4.17.7 → 4.17.8

package/lib/index.umd.js

@@ -4658,7 +4658,7 @@ function checkDynamic() {
 const {
   log: log_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}` : '';
@@ -4676,7 +4676,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.17.7";
+const ui_version = "4.17.8";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -5093,7 +5093,8 @@ setConfig({
     theme: 'dark',
     enterDelay: 500,
     leaveDelay: 300,
-    isArrow: true
+    isArrow: true,
+    defaultPlacement: 'top'
   },
   transfer: {},
   tree: {
@@ -5107,8 +5108,7 @@ setConfig({
     tooltipConfig: {
       mode: 'tooltip',
       enterable: true,
-      leaveDelay: 300,
-      defaultPlacement: 'top'
+      leaveDelay: 300
     },
     dragConfig: {
       showIcon: true,
@@ -6590,8 +6590,13 @@ function dom_triggerEvent(targetElem, type) {
 function isNodeElement(elem) {
   return elem && elem.nodeType === 1;
 }
+/**
+ * 通用定位计算
+ */
 function updatePanelPlacement(targetElem, panelElem, options) {
   const {
+    defaultTop,
+    defaultLeft,
     placement,
     defaultPlacement,
     teleportTo,
@@ -6605,110 +6610,138 @@ function updatePanelPlacement(targetElem, panelElem, 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 (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(top)) {
+        stys.top = toCssUnit(top);
       }
-      // 如果溢出左边
-      if (left < marginSize) {
-        left = marginSize;
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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 (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(left)) {
+        stys.left = toCssUnit(left);
       }
-      // 是否超出右侧
-      if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
-        left = -(panelRect.left + panelRect.width + marginSize - visibleWidth);
+      if (isMinWidth && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(minWidth)) {
+        stys.minWidth = toCssUnit(minWidth);
+      }
+      // 箭头
+      if (left === targetLeft) {
+        if (targetWidth <= panelWidth) {
+          arrowLeft = targetWidth / 2;
+        }
+      } else if (left < targetLeft) {
+        if (left + panelWidth > targetLeft + targetWidth) {
+          arrowLeft = targetLeft - left + targetWidth / 2;
+        } else {
+          arrowLeft = targetLeft - left + (panelWidth - (targetLeft - left)) / 2;
+        }
       }
-    }
-    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(top)) {
-      stys.top = toCssUnit(top);
-    }
-    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(bottom)) {
-      stys.bottom = toCssUnit(bottom);
-    }
-    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(left)) {
-      stys.left = toCssUnit(left);
-    }
-    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(right)) {
-      stys.right = toCssUnit(right);
-    }
-    if (isMinWidth && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(minWidth)) {
-      stys.minWidth = toCssUnit(minWidth);
     }
   }
   return {
     top: top || 0,
     bottom: bottom || 0,
     left: left || 0,
-    right: right || 0,
+    arrowLeft: arrowLeft || 0,
     style: stys,
     placement: panelPlacement
   };
 }
 function getPopupContainer(appendTo) {
-  return appendTo ? (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(appendTo) ? appendTo({}) : appendTo) || 'body' : 'body';
+  const selectElem = appendTo && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(appendTo) ? appendTo({}) : appendTo;
+  return selectElem || 'body';
+}
+function getPopupAppendElement(appendTo) {
+  const selectElem = getPopupContainer(appendTo);
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(selectElem)) {
+    return document.querySelector(selectElem) || document.body;
+  }
+  return selectElem;
 }
 ;// ./packages/anchor/src/util.ts
 
@@ -7402,6 +7435,10 @@ function createInternalData() {
     leaveDelay: {
       type: Number,
       default: () => getConfig().tooltip.leaveDelay
+    },
+    appendTo: {
+      type: [String, Function],
+      default: () => getConfig().tooltip.appendTo
     }
   },
   emits: ['update:modelValue'],
@@ -7459,101 +7496,10 @@ function createInternalData() {
       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) {
@@ -7562,14 +7508,19 @@ function createInternalData() {
         emit('update:modelValue', value);
       }
     };
-    const updateZindex = () => {
-      if (reactData.tipZindex < getLastZIndex()) {
+    const updateZIndex = () => {
+      const {
+        zIndex
+      } = props;
+      if (zIndex) {
+        reactData.tipZindex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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);
       }
@@ -7587,11 +7538,11 @@ function createInternalData() {
       if (enterable && trigger === 'hover') {
         setTimeout(() => {
           if (!reactData.tipActive) {
-            tooltipMethods.close();
+            $xeTooltip.close();
           }
         }, leaveDelay);
       } else {
-        tooltipMethods.close();
+        $xeTooltip.close();
       }
     };
     const wrapperMouseenterEvent = () => {
@@ -7607,24 +7558,27 @@ function createInternalData() {
       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',
@@ -7700,12 +7654,57 @@ function createInternalData() {
       }
       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);
       },
@@ -7728,23 +7727,8 @@ function createInternalData() {
         return handleVisible(target, content);
       },
       updatePlacement() {
-        const {
-          visible,
-          tipTarget
-        } = reactData;
-        let el = refElem.value;
-        if (visible && tipTarget && el) {
-          updateTipStyle();
-        }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          el = refElem.value;
-          if (tipTarget && el) {
-            updateTipStyle();
-            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-              updateTipStyle();
-            });
-          }
-        });
+        updateTipStyle();
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(updateTipStyle);
       },
       isActived() {
         return reactData.tipActive;
@@ -7843,7 +7827,7 @@ function createInternalData() {
         if (val) {
           handleVisible(reactData.target || getSelectorEl(), props.content);
         } else {
-          tooltipMethods.close();
+          $xeTooltip.close();
         }
       }
       reactData.isUpdate = false;
@@ -7861,21 +7845,21 @@ function createInternalData() {
           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();
-            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(wrapperElem.children, (elem, index) => {
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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;
@@ -7898,7 +7882,7 @@ function createInternalData() {
       const {
         target
       } = reactData;
-      const wrapperElem = refElem.value;
+      const panelElem = refElem.value;
       if (target) {
         target.onmouseenter = null;
         target.onmouseleave = null;
@@ -7908,10 +7892,10 @@ function createInternalData() {
       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);
         }
       }
     });
@@ -54139,6 +54123,7 @@ let crossTreeDragNodeObj = null;
     };
     const renderList = treeList => {
       const {
+        loading,
         transform,
         emptyText
       } = props;
@@ -54147,7 +54132,7 @@ let crossTreeDragNodeObj = null;
       } = internalData;
       const childrenField = computeChildrenField.value;
       const emptySlot = slots.empty;
-      if (!treeList.length) {
+      if (!loading && !treeList.length) {
         return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           class: 'vxe-tree--empty-placeholder'
         }, emptySlot ? emptySlot({}) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {