@vxe-ui/core 3.4.30 → 3.4.32

package/es/index.esm.js

@@ -16,6 +16,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 { globalMixins } from './src/mixins';
 import { getSlotVNs } from './src/vm';
@@ -91,6 +93,8 @@ export const VxeUI = Object.assign(VxeCore, {
     permission,
     baseUtils,
     domUtils,
+    scrollbarUtils,
+    popperUtils,
     globalStore,
     component,
     getComponent,
@@ -118,6 +122,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/mixins';
 export * from './src/vm';

package/es/src/core.js

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

package/es/src/log.js

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

@@ -236,6 +236,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;
@@ -347,6 +371,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,
   component,
   getComponent,

package/lib/index.umd.js

@@ -2534,10 +2534,12 @@ __webpack_require__.d(__webpack_exports__, {
   menus: function() { return /* reexport */ menus; },
   permission: function() { return /* reexport */ permission; },
   permissionMixin: function() { return /* reexport */ permissionMixin; },
+  popperUtils: function() { return /* reexport */ popperUtils; },
   renderCustomIcon: function() { return /* reexport */ renderCustomIcon; },
   renderEmptyElement: function() { return /* reexport */ renderEmptyElement; },
   renderGlobalIcon: function() { return /* reexport */ renderGlobalIcon; },
   renderer: function() { return /* reexport */ renderer; },
+  scrollbarUtils: function() { return /* reexport */ scrollbarUtils; },
   setConfig: function() { return /* reexport */ setConfig; },
   setI18n: function() { return /* reexport */ setI18n; },
   setIcon: function() { return /* reexport */ setIcon; },
@@ -2569,7 +2571,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./packages/src/core.ts
-const coreVersion = "3.4.30";
+const coreVersion = "3.4.32";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3222,7 +3224,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "3.4.30";
+const version = "3.4.32";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -3699,6 +3701,255 @@ const domUtils = {
     return parts.join(' ');
   }
 };
+;// ./packages/src/scrollbar-utils.ts
+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;
+  }
+};
+;// ./packages/src/popper-utils.ts
+
+/**
+ * 获取包裹容器的元素
+ */
+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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(appendTo) ? appendTo({}) : appendTo;
+  return selectElem || 'body';
+}
+/**
+ * 获取插入到指定容器的元素
+ */
+function getAppendElement(appendTo) {
+  const selectElem = getAppendSelector(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;
+}
+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 (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(top)) {
+          stys.top = top + 'px';
+        }
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(bottom)) {
+          stys.bottom = bottom + 'px';
+        }
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(left)) {
+          stys.left = left + 'px';
+        }
+        if (isMinWidth && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().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
+};
 ;// ./packages/src/mixins.ts
 
 
@@ -3757,6 +4008,8 @@ const globalMixins = {
 
 
 
+
+
 
 
 
@@ -3833,6 +4086,8 @@ const VxeUI = Object.assign(VxeCore, {
   permission: permission,
   baseUtils: baseUtils,
   domUtils: domUtils,
+  scrollbarUtils: scrollbarUtils,
+  popperUtils: popperUtils,
   globalStore: globalStore,
   component,
   getComponent,
@@ -3861,6 +4116,8 @@ setTheme();
 
 
 
+
+