@vxe-ui/core 4.4.31 → 4.4.33

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.33";
 const VxeCore = {
     coreVersion,
     uiVersion: '',
@@ -402,7 +402,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.31";
+const version = "4.4.33";
 const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),
@@ -837,10 +837,81 @@ const baseUtils = {
      */
     getDefVal(value, defVal) {
         return XEUtils.eqNull(value) ? defVal : value;
+    },
+    /**
+     * 判断是否启用
+     */
+    isEnabled(conf) {
+        return !!(conf && conf.enabled !== false);
+    },
+    /**
+     * 用于开关类型的配置项
+     * 局部启用规则：conf={}
+     * 局部禁用规则：conf={enabled:false}
+     * 全局默认启用规则：conf.enabled=true
+     */
+    hasEnableConf(conf, opts) {
+        return !!(opts && (conf ? opts.enabled !== false : opts.enabled));
     }
 };
 
+const reClsMap = {};
+function getClsRE(cls) {
+    if (!reClsMap[cls]) {
+        reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
+    }
+    return reClsMap[cls];
+}
+/**
+ * 判断元素是否包含 class
+ */
+function hasClass(elem, cls) {
+    if (elem) {
+        if (elem.classList) {
+            return elem.classList.contains(cls);
+        }
+        return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
+    }
+    return false;
+}
+/**
+ * 给元素删除 class
+ */
+function removeClass(elem, cls) {
+    if (elem && hasClass(elem, cls)) {
+        elem.className = elem.className.replace(getClsRE(cls), '');
+    }
+}
 const domUtils = {
+    /**
+     * 判断是否像素px单位 '100px' | 100
+     */
+    isPx(val) {
+        return val && /^\d+(\.\d+)?(px)?$/.test(val);
+    },
+    /**
+     * 判断是否百分比%单位 '100%'
+     */
+    isScale(val) {
+        return val && /^\d+(\.\d+)?%$/.test(val);
+    },
+    /**
+     * 判断元素是否包含 class
+     */
+    hasClass,
+    /**
+     * 给元素删除 class
+     */
+    removeClass,
+    /**
+     * 给元素增加 class
+     */
+    addClass(elem, cls) {
+        if (elem && !hasClass(elem, cls)) {
+            removeClass(elem, cls);
+            elem.className = elem.className + ' ' + cls;
+        }
+    },
     /**
      * 生成 className
      */
@@ -920,6 +991,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 +1274,7 @@ const VxeUI = Object.assign(VxeCore, {
     baseUtils,
     domUtils,
     scrollbarUtils,
+    popperUtils,
     globalStore,
     hooks,
     component,
@@ -1027,4 +1287,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/base-utils.js

@@ -20,5 +20,20 @@ export const baseUtils = {
      */
     getDefVal(value, defVal) {
         return XEUtils.eqNull(value) ? defVal : value;
+    },
+    /**
+     * 判断是否启用
+     */
+    isEnabled(conf) {
+        return !!(conf && conf.enabled !== false);
+    },
+    /**
+     * 用于开关类型的配置项
+     * 局部启用规则：conf={}
+     * 局部禁用规则：conf={enabled:false}
+     * 全局默认启用规则：conf.enabled=true
+     */
+    hasEnableConf(conf, opts) {
+        return !!(opts && (conf ? opts.enabled !== false : opts.enabled));
     }
 };

package/es/src/core.js

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

package/es/src/dom-utils.js

@@ -1,5 +1,61 @@
 import XEUtils from 'xe-utils';
+const reClsMap = {};
+function getClsRE(cls) {
+    if (!reClsMap[cls]) {
+        reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
+    }
+    return reClsMap[cls];
+}
+/**
+ * 判断元素是否包含 class
+ */
+function hasClass(elem, cls) {
+    if (elem) {
+        if (elem.classList) {
+            return elem.classList.contains(cls);
+        }
+        return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
+    }
+    return false;
+}
+/**
+ * 给元素删除 class
+ */
+function removeClass(elem, cls) {
+    if (elem && hasClass(elem, cls)) {
+        elem.className = elem.className.replace(getClsRE(cls), '');
+    }
+}
 export const domUtils = {
+    /**
+     * 判断是否像素px单位 '100px' | 100
+     */
+    isPx(val) {
+        return val && /^\d+(\.\d+)?(px)?$/.test(val);
+    },
+    /**
+     * 判断是否百分比%单位 '100%'
+     */
+    isScale(val) {
+        return val && /^\d+(\.\d+)?%$/.test(val);
+    },
+    /**
+     * 判断元素是否包含 class
+     */
+    hasClass,
+    /**
+     * 给元素删除 class
+     */
+    removeClass,
+    /**
+     * 给元素增加 class
+     */
+    addClass(elem, cls) {
+        if (elem && !hasClass(elem, cls)) {
+            removeClass(elem, cls);
+            elem.className = elem.className + ' ' + cls;
+        }
+    },
     /**
      * 生成 className
      */

package/es/src/log.js

@@ -6,7 +6,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.31";
+const version = "4.4.33";
 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,