@vxe-ui/core 4.4.30 → 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.30";
+const coreVersion = "4.4.32";
 const VxeCore = {
     coreVersion,
     uiVersion: '',
@@ -402,7 +402,7 @@ function createLog(type, name) {
         return msg;
     };
 }
-const version = "4.4.30";
+const version = "4.4.32";
 const log = {
     create: createLog,
     warn: createLog('warn', `v${version}`),
@@ -863,6 +863,251 @@ const domUtils = {
     }
 };
 
+const scrollbarUtils = {
+    /**
+     * 计算滚动条滑块的长度
+     */
+    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));
+    },
+    /**
+     * 计算滚动条滑块的偏移位置
+     */
+    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;
+    },
+    /**
+     * 根据点击轨道的位置，计算滑块的偏移位置
+     */
+    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 时，根据鼠标位置计算滑块的偏移位置
+     */
+    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;
+    }
+};
+
+/**
+ * 获取包裹容器的元素
+ */
+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) {
@@ -957,6 +1202,8 @@ const VxeUI = Object.assign(VxeCore, {
     permission,
     baseUtils,
     domUtils,
+    scrollbarUtils,
+    popperUtils,
     globalStore,
     hooks,
     component,
@@ -969,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, 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

@@ -17,6 +17,8 @@ import { clipboard } from './src/clipboard';
 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';
@@ -92,6 +94,8 @@ export const VxeUI = Object.assign(VxeCore, {
     permission,
     baseUtils,
     domUtils,
+    scrollbarUtils,
+    popperUtils,
     globalStore,
     hooks,
     component,
@@ -120,6 +124,8 @@ export * from './src/clipboard';
 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.30";
+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.30";
+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/es/src/scrollbar-utils.js

@@ -0,0 +1,56 @@
+export const scrollbarUtils = {
+    /**
+     * 计算滚动条滑块的长度
+     */
+    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));
+    },
+    /**
+     * 计算滚动条滑块的偏移位置
+     */
+    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;
+    },
+    /**
+     * 根据点击轨道的位置，计算滑块的偏移位置
+     */
+    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 时，根据鼠标位置计算滑块的偏移位置
+     */
+    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;
+    }
+};

package/lib/index.common.js

@@ -237,6 +237,30 @@ Object.keys(_domUtils).forEach(function (key) {
     }
   });
 });
+var _scrollbarUtils = require("./src/scrollbar-utils");
+Object.keys(_scrollbarUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _scrollbarUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _scrollbarUtils[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;
@@ -357,6 +381,8 @@ const VxeUI = exports.VxeUI = Object.assign(_core.VxeCore, {
   permission: _permission.permission,
   baseUtils: _baseUtils.baseUtils,
   domUtils: _domUtils.domUtils,
+  scrollbarUtils: _scrollbarUtils.scrollbarUtils,
+  popperUtils: _popperUtils.popperUtils,
   globalStore: _dataStore.globalStore,
   hooks: _hooks.hooks,
   component,