@vxe-ui/core 4.4.31 → 4.4.32

package/dist/all.esm.js

@@ -2,7 +2,7 @@ import { h, reactive, computed, inject, provide, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils';
 import DomZIndex from 'dom-zindex';
 
-const coreVersion = "4.4.31";
+const coreVersion = "4.4.32";
 const VxeCore = {
     coreVersion,
     uiVersion: '',
@@ -402,7 +402,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.31";
+const version = "4.4.32";
 const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),
@@ -920,6 +920,194 @@ const scrollbarUtils = {
     }
 };
 
+/**
+ * 获取包裹容器的元素
+ */
+function getWrapperElement(panelElem) {
+    if (!panelElem) {
+        return null;
+    }
+    const bodyEl = document.body;
+    const parentEl = panelElem.parentElement;
+    return (parentEl === bodyEl ? document.documentElement : parentEl) || null;
+}
+/**
+ * 获取插入到指定容器的元素或字符串
+  */
+function getAppendSelector(appendTo) {
+    const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo;
+    return selectElem || 'body';
+}
+/**
+ * 获取插入到指定容器的元素
+ */
+function getAppendElement(appendTo) {
+    const selectElem = getAppendSelector(appendTo);
+    if (XEUtils.isString(selectElem)) {
+        return document.querySelector(selectElem) || document.body;
+    }
+    return selectElem;
+}
+const popperUtils = {
+    /**
+     * 更新位置
+     */
+    updatePlacement(targetElem, panelElem, options) {
+        const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+            appendTo: '',
+            teleportTo: false,
+            marginSize: 18,
+            isMinWidth: true
+        }, options);
+        let panelPlacement = 'bottom';
+        let top = '';
+        let bottom = '';
+        let left = 0;
+        let minWidth = '';
+        let arrowLeft = '';
+        const stys = {};
+        if (panelElem && targetElem) {
+            const bodyEl = document.body;
+            const parentWrapperEl = getWrapperElement(teleportTo ? getAppendElement(appendTo) : panelElem);
+            if (parentWrapperEl) {
+                const targetWidth = targetElem.offsetWidth;
+                const targetHeight = targetElem.offsetHeight;
+                const panelWidth = panelElem.offsetWidth;
+                const panelHeight = panelElem.offsetHeight;
+                const parentWrapperRect = parentWrapperEl.getBoundingClientRect();
+                const panelRect = panelElem.getBoundingClientRect();
+                const targetRect = targetElem.getBoundingClientRect();
+                const visibleHeight = bodyEl.clientHeight;
+                const visibleWidth = bodyEl.clientWidth;
+                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)) - parentWrapperScrollLeft;
+                    top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop;
+                    if (placement === 'top') {
+                        panelPlacement = 'top';
+                        top = targetTop - panelHeight;
+                    }
+                    else if (!placement) {
+                        if (defaultPlacement === 'top') {
+                            panelPlacement = 'top';
+                            if (!defaultTop) {
+                                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;
+                            }
+                        }
+                    }
+                    // 如果溢出右边
+                    if (left + panelWidth + marginSize > visibleWidth) {
+                        left -= left + panelWidth + marginSize - visibleWidth;
+                    }
+                    // 如果溢出左边
+                    if (left < marginSize) {
+                        left = marginSize;
+                    }
+                    // 偏移
+                    top -= parentWrapperOffsetTop;
+                    left -= parentWrapperOffsetLeft;
+                }
+                else {
+                    if (placement === 'top') {
+                        panelPlacement = 'top';
+                        bottom = targetHeight;
+                    }
+                    else if (!placement) {
+                        // 如果下面不够放，则向上
+                        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 (XEUtils.isNumber(top)) {
+                    stys.top = top + 'px';
+                }
+                if (XEUtils.isNumber(bottom)) {
+                    stys.bottom = bottom + 'px';
+                }
+                if (XEUtils.isNumber(left)) {
+                    stys.left = left + 'px';
+                }
+                if (isMinWidth && XEUtils.isNumber(minWidth)) {
+                    stys.minWidth = minWidth + 'px';
+                }
+                // 箭头
+                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;
+                    }
+                }
+            }
+        }
+        return {
+            top: top || 0,
+            bottom: bottom || 0,
+            left: left || 0,
+            arrowLeft: arrowLeft || 0,
+            style: stys,
+            placement: panelPlacement
+        };
+    },
+    /**
+     * 获取包裹容器的元素
+     */
+    getWrapperElement,
+    /**
+     * 获取插入到指定容器的元素或字符串
+     */
+    getAppendSelector,
+    /**
+     * 获取插入到指定容器的元素
+     */
+    getAppendElement
+};
+
 const hooks = new Store();
 
 function useSize(props) {
@@ -1015,6 +1203,7 @@ const VxeUI = Object.assign(VxeCore, {
     baseUtils,
     domUtils,
     scrollbarUtils,
+    popperUtils,
     globalStore,
     hooks,
     component,
@@ -1027,4 +1216,4 @@ const VxeUI = Object.assign(VxeCore, {
 });
 setTheme();
 
-export { GLOBAL_EVENT_KEYS, VxeCore, VxeUI, baseUtils, checkVersion, clipboard, commands, component, coreVersion, createEvent, VxeUI as default, domUtils, formats, getComponent, getConfig, getI18n, getIcon, getLanguage, getSlotVNs, getTheme, globalEvents, globalResize, globalStore, handleCheckInfo, hasComponent, hasLanguage, hooks, interceptor, log, menus, permission, renderCustomIcon, renderEmptyElement, renderGlobalIcon, renderer, scrollbarUtils, setConfig, setI18n, setIcon, setLanguage, setTheme, use, useFns, usePermission, useSize, validators };
+export { GLOBAL_EVENT_KEYS, VxeCore, VxeUI, baseUtils, checkVersion, clipboard, commands, component, coreVersion, createEvent, VxeUI as default, domUtils, formats, getComponent, getConfig, getI18n, getIcon, getLanguage, getSlotVNs, getTheme, globalEvents, globalResize, globalStore, handleCheckInfo, hasComponent, hasLanguage, hooks, interceptor, log, menus, permission, popperUtils, renderCustomIcon, renderEmptyElement, renderGlobalIcon, renderer, scrollbarUtils, setConfig, setI18n, setIcon, setLanguage, setTheme, use, useFns, usePermission, useSize, validators };

package/es/index.esm.js

@@ -18,6 +18,7 @@ import { permission } from './src/permission';
 import { baseUtils } from './src/base-utils';
 import { domUtils } from './src/dom-utils';
 import { scrollbarUtils } from './src/scrollbar-utils';
+import { popperUtils } from './src/popper-utils';
 import { log } from './src/log';
 import { hooks } from './src/hooks';
 import { useFns } from './src/useFns';
@@ -94,6 +95,7 @@ export const VxeUI = Object.assign(VxeCore, {
     baseUtils,
     domUtils,
     scrollbarUtils,
+    popperUtils,
     globalStore,
     hooks,
     component,
@@ -123,6 +125,7 @@ export * from './src/permission';
 export * from './src/base-utils';
 export * from './src/dom-utils';
 export * from './src/scrollbar-utils';
+export * from './src/popper-utils';
 export * from './src/dataStore';
 export * from './src/useFns';
 export * from './src/vm';

package/es/src/core.js

@@ -1,4 +1,4 @@
-export const coreVersion = "4.4.31";
+export const coreVersion = "4.4.32";
 export const VxeCore = {
     coreVersion,
     uiVersion: '',

package/es/src/log.js

@@ -6,7 +6,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.31";
+const version = "4.4.32";
 export const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),

package/es/src/popper-utils.js

@@ -0,0 +1,188 @@
+import XEUtils from 'xe-utils';
+/**
+ * 获取包裹容器的元素
+ */
+function getWrapperElement(panelElem) {
+    if (!panelElem) {
+        return null;
+    }
+    const bodyEl = document.body;
+    const parentEl = panelElem.parentElement;
+    return (parentEl === bodyEl ? document.documentElement : parentEl) || null;
+}
+/**
+ * 获取插入到指定容器的元素或字符串
+  */
+function getAppendSelector(appendTo) {
+    const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo;
+    return selectElem || 'body';
+}
+/**
+ * 获取插入到指定容器的元素
+ */
+function getAppendElement(appendTo) {
+    const selectElem = getAppendSelector(appendTo);
+    if (XEUtils.isString(selectElem)) {
+        return document.querySelector(selectElem) || document.body;
+    }
+    return selectElem;
+}
+export const popperUtils = {
+    /**
+     * 更新位置
+     */
+    updatePlacement(targetElem, panelElem, options) {
+        const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+            appendTo: '',
+            teleportTo: false,
+            marginSize: 18,
+            isMinWidth: true
+        }, options);
+        let panelPlacement = 'bottom';
+        let top = '';
+        let bottom = '';
+        let left = 0;
+        let minWidth = '';
+        let arrowLeft = '';
+        const stys = {};
+        if (panelElem && targetElem) {
+            const bodyEl = document.body;
+            const parentWrapperEl = getWrapperElement(teleportTo ? getAppendElement(appendTo) : panelElem);
+            if (parentWrapperEl) {
+                const targetWidth = targetElem.offsetWidth;
+                const targetHeight = targetElem.offsetHeight;
+                const panelWidth = panelElem.offsetWidth;
+                const panelHeight = panelElem.offsetHeight;
+                const parentWrapperRect = parentWrapperEl.getBoundingClientRect();
+                const panelRect = panelElem.getBoundingClientRect();
+                const targetRect = targetElem.getBoundingClientRect();
+                const visibleHeight = bodyEl.clientHeight;
+                const visibleWidth = bodyEl.clientWidth;
+                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)) - parentWrapperScrollLeft;
+                    top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop;
+                    if (placement === 'top') {
+                        panelPlacement = 'top';
+                        top = targetTop - panelHeight;
+                    }
+                    else if (!placement) {
+                        if (defaultPlacement === 'top') {
+                            panelPlacement = 'top';
+                            if (!defaultTop) {
+                                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;
+                            }
+                        }
+                    }
+                    // 如果溢出右边
+                    if (left + panelWidth + marginSize > visibleWidth) {
+                        left -= left + panelWidth + marginSize - visibleWidth;
+                    }
+                    // 如果溢出左边
+                    if (left < marginSize) {
+                        left = marginSize;
+                    }
+                    // 偏移
+                    top -= parentWrapperOffsetTop;
+                    left -= parentWrapperOffsetLeft;
+                }
+                else {
+                    if (placement === 'top') {
+                        panelPlacement = 'top';
+                        bottom = targetHeight;
+                    }
+                    else if (!placement) {
+                        // 如果下面不够放，则向上
+                        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 (XEUtils.isNumber(top)) {
+                    stys.top = top + 'px';
+                }
+                if (XEUtils.isNumber(bottom)) {
+                    stys.bottom = bottom + 'px';
+                }
+                if (XEUtils.isNumber(left)) {
+                    stys.left = left + 'px';
+                }
+                if (isMinWidth && XEUtils.isNumber(minWidth)) {
+                    stys.minWidth = minWidth + 'px';
+                }
+                // 箭头
+                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;
+                    }
+                }
+            }
+        }
+        return {
+            top: top || 0,
+            bottom: bottom || 0,
+            left: left || 0,
+            arrowLeft: arrowLeft || 0,
+            style: stys,
+            placement: panelPlacement
+        };
+    },
+    /**
+     * 获取包裹容器的元素
+     */
+    getWrapperElement,
+    /**
+     * 获取插入到指定容器的元素或字符串
+     */
+    getAppendSelector,
+    /**
+     * 获取插入到指定容器的元素
+     */
+    getAppendElement
+};

package/lib/index.common.js

@@ -249,6 +249,18 @@ Object.keys(_scrollbarUtils).forEach(function (key) {
     }
   });
 });
+var _popperUtils = require("./src/popper-utils");
+Object.keys(_popperUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _popperUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _popperUtils[key];
+    }
+  });
+});
 var _log = require("./src/log");
 Object.keys(_log).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -370,6 +382,7 @@ const VxeUI = exports.VxeUI = Object.assign(_core.VxeCore, {
   baseUtils: _baseUtils.baseUtils,
   domUtils: _domUtils.domUtils,
   scrollbarUtils: _scrollbarUtils.scrollbarUtils,
+  popperUtils: _popperUtils.popperUtils,
   globalStore: _dataStore.globalStore,
   hooks: _hooks.hooks,
   component,