@vxe-ui/core 4.4.30 → 4.4.32

package/lib/src/popper-utils.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.popperUtils = void 0;
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 获取包裹容器的元素
+ */
+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.default.isFunction(appendTo) ? appendTo({}) : appendTo;
+  return selectElem || 'body';
+}
+/**
+ * 获取插入到指定容器的元素
+ */
+function getAppendElement(appendTo) {
+  const selectElem = getAppendSelector(appendTo);
+  if (_xeUtils.default.isString(selectElem)) {
+    return document.querySelector(selectElem) || document.body;
+  }
+  return selectElem;
+}
+const popperUtils = exports.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.default.isNumber(top)) {
+          stys.top = top + 'px';
+        }
+        if (_xeUtils.default.isNumber(bottom)) {
+          stys.bottom = bottom + 'px';
+        }
+        if (_xeUtils.default.isNumber(left)) {
+          stys.left = left + 'px';
+        }
+        if (isMinWidth && _xeUtils.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
+};

package/lib/src/popper-utils.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.popperUtils=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getWrapperElement(e){var t;return e&&(t=document.body,(e=e.parentElement)===t?document.documentElement:e)||null}function getAppendSelector(e){return(e&&_xeUtils.default.isFunction(e)?e({}):e)||"body"}function getAppendElement(e){e=getAppendSelector(e);return _xeUtils.default.isString(e)?document.querySelector(e)||document.body:e}let popperUtils=exports.popperUtils={updatePlacement(e,t,o){var{defaultTop:o,defaultLeft:l,placement:n,defaultPlacement:p,appendTo:i,teleportTo:r,marginSize:d,isMinWidth:u}=Object.assign({appendTo:"",teleportTo:!1,marginSize:18,isMinWidth:!0},o);let f="bottom",a="",s="",m=0;var c="";let g="";var b,x,_,h,W,E,U,A,S,v,y,T={};return t&&e&&(E=document.body,i=getWrapperElement(r?getAppendElement(i):t))&&(b=e.offsetWidth,x=e.offsetHeight,_=t.offsetWidth,h=t.offsetHeight,S=i.getBoundingClientRect(),t=t.getBoundingClientRect(),y=e.getBoundingClientRect(),W=E.clientHeight,E=E.clientWidth,U=i.scrollLeft,i=i.scrollTop,A=S.left,S=S.top,v=y.left,y=y.top,c=e.offsetWidth,r?(m=(l||v-(_-b)/2)-U,a=(o||y+x)-i,"top"===n?(f="top",a=y-h):n||("top"===p?(f="top",(a=o?a:y-h)<d&&(f="bottom",a=y+x),a+h+d>W&&(f="top",a=y-h)):(a+h+d>W&&(f="top",a=y-h),a<d&&(f="bottom",a=y+x))),m+_+d>E&&(m-=m+_+d-E),m<d&&(m=d),a-=S,m-=A):("top"===n?(f="top",s=x):n||W<y+(a=x)+h+d&&d<y-x-h&&(f="top",a="",s=x),t.left+t.width+d>E&&(m=-(t.left+t.width+d-E))),_xeUtils.default.isNumber(a)&&(T.top=a+"px"),_xeUtils.default.isNumber(s)&&(T.bottom=s+"px"),_xeUtils.default.isNumber(m)&&(T.left=m+"px"),u&&_xeUtils.default.isNumber(c)&&(T.minWidth=c+"px"),m===v?b<=_&&(g=b/2):m<v&&(g=m+_>v+b?v-m+b/2:v-m+(_-(v-m))/2)),{top:a||0,bottom:s||0,left:m||0,arrowLeft:g||0,style:T,placement:f}},getWrapperElement:getWrapperElement,getAppendSelector:getAppendSelector,getAppendElement:getAppendElement};

package/lib/src/scrollbar-utils.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollbarUtils = void 0;
+const scrollbarUtils = exports.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/src/scrollbar-utils.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.scrollbarUtils=void 0;let scrollbarUtils=exports.scrollbarUtils={getThumbSize(t,r,e){return r<=t?0:Math.max(20,Math.min(e*(t/r),e))},getThumbOffsetSize(t,r,e,a,l){e-=r;return e<=0||(r=a-l)<=0?0:Math.min(Math.max(t,0),e)/e*r},getScrollFromClick(t,r,e,a,l){a-=l,e-=r;return e<=0||a<=0?0:(r=t-l/2,(r=Math.min(Math.max(r,0),a))/a*e)},getScrollFromDrag(t,r,e,a,l,o){a-=e,e=l-o;return a<=0||e<=0?0:(l=t-r,(l=Math.min(Math.max(l,0),e))/e*a)}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxe-ui/core",
-  "version": "4.4.30",
+  "version": "4.4.32",
   "description": "Vxe UI core library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/index.ts

@@ -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'
@@ -109,6 +111,8 @@ export const VxeUI = Object.assign(VxeCore, {
 
   baseUtils,
   domUtils,
+  scrollbarUtils,
+  popperUtils,
 
   globalStore,
 
@@ -146,6 +150,8 @@ 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'
 

package/packages/src/popper-utils.ts

@@ -0,0 +1,194 @@
+import XEUtils from 'xe-utils'
+
+import type { VxePopperUtils, VxePopperOptions } from '../../types'
+
+/**
+ * 获取包裹容器的元素
+ */
+function getWrapperElement (panelElem: HTMLElement | null | undefined) {
+  if (!panelElem) {
+    return null
+  }
+  const bodyEl = document.body
+  const parentEl = panelElem.parentElement
+  return (parentEl === bodyEl ? document.documentElement : parentEl) || null
+}
+
+/**
+ * 获取插入到指定容器的元素或字符串
+  */
+function getAppendSelector (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
+  const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
+  return selectElem || 'body'
+}
+
+/**
+ * 获取插入到指定容器的元素
+ */
+function getAppendElement (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
+  const selectElem = getAppendSelector(appendTo)
+  if (XEUtils.isString(selectElem)) {
+    return document.querySelector<HTMLElement>(selectElem) || document.body
+  }
+  return selectElem
+}
+
+export const popperUtils: VxePopperUtils = {
+  /**
+   * 更新位置
+   */
+  updatePlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: VxePopperOptions) {
+    const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+      appendTo: '',
+      teleportTo: false,
+      marginSize: 18,
+      isMinWidth: true
+    }, options)
+    let panelPlacement: 'top' | 'bottom' = 'bottom'
+    let top: number | '' = ''
+    let bottom: number | '' = ''
+    let left = 0
+    let minWidth: number | '' = ''
+    let arrowLeft: number | '' = ''
+    const stys: Record<string, string> = {}
+    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/packages/src/scrollbar-utils.ts

@@ -0,0 +1,58 @@
+import { VxeScrollbarUtils } from '../../types'
+
+export const scrollbarUtils: VxeScrollbarUtils = {
+  /**
+   * 计算滚动条滑块的长度
+   */
+  getThumbSize (viewportSize: number, contentSize: number, trackSize: number) {
+    if (contentSize <= viewportSize) {
+      return 0
+    }
+    const ratio = viewportSize / contentSize
+    const ideal = trackSize * ratio
+    return Math.max(20, Math.min(ideal, trackSize))
+  },
+  /**
+   * 计算滚动条滑块的偏移位置
+   */
+  getThumbOffsetSize (offsetSize: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
+    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: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
+    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: number, dragOffset: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
+    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/types/core/index.d.ts

@@ -16,6 +16,8 @@ import { VxeGlobalClipboard } from './clipboard'
 import { VxeGlobalPermission } from './permission'
 import { VxeBaseUtils } from './base-utils'
 import { VxeDomUtils } from './dom-utils'
+import { VxeScrollbarUtils } from './scrollbar-utils'
+import { VxePopperUtils } from './popper-utils'
 import { VxeGlobalComponentMethod, VxeGlobalGetComponentMethod, VxeGlobalHasComponentMethod } from './components'
 import { VxeGlobalUseFns } from './useFn'
 import { VxeGlobalHooks } from './hooks'
@@ -74,6 +76,8 @@ export const permission: VxeGlobalPermission
 
 export const baseUtils: VxeBaseUtils
 export const domUtils: VxeDomUtils
+export const scrollbarUtils: VxeScrollbarUtils
+export const popperUtils: VxePopperUtils
 
 export const globalEvents: VxeGlobalEvents
 
@@ -217,6 +221,14 @@ export interface VxeUIExport {
    * Document 工具函数
    */
   domUtils: VxeDomUtils
+  /**
+   * 滚动条工具函数
+   */
+  scrollbarUtils: VxeScrollbarUtils
+  /**
+   * 弹出元素定位工具函数
+   */
+  popperUtils: VxePopperUtils
 
   /**
    * 全局事件管理
@@ -302,6 +314,8 @@ export * from './permission'
 
 export * from './base-utils'
 export * from './dom-utils'
+export * from './scrollbar-utils'
+export * from './popper-utils'
 
 export * from './log'
 

package/types/core/popper-utils.d.ts

@@ -0,0 +1,44 @@
+export interface VxePopperOptions {
+  defaultTop?: number
+  defaultLeft?: number
+  placement?: '' | 'top' | 'bottom' | null
+  defaultPlacement?: '' | 'top' | 'bottom' | null
+  appendTo?: string | HTMLElement | ((params: any) => string | HTMLElement)
+  teleportTo?: boolean
+  marginSize?: number
+  isMinWidth?: boolean
+}
+
+export interface VxePopperPlacementResult {
+  top: number
+  bottom: number
+  left: number
+  arrowLeft: number
+  style: Record<string, string>
+  placement: 'top' | 'bottom'
+}
+
+export interface VxePopperUtils {
+  /**
+   * 更新位置
+   * @param targetElem
+   * @param panelElem
+   * @param options
+   */
+  updatePlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: VxePopperOptions): VxePopperPlacementResult
+  /**
+   * 获取包裹容器的元素
+   * @param panelElem
+   */
+  getWrapperElement (panelElem: HTMLElement | null | undefined): HTMLElement | null
+  /**
+   * 获取插入到指定容器的元素或字符串
+   * @param appendTo
+   */
+  getAppendSelector (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined): HTMLElement | string
+  /**
+   * 获取插入到指定容器的元素
+   * @param appendTo
+   */
+  getAppendElement (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined): HTMLElement | null
+}

package/types/core/scrollbar-utils.d.ts

@@ -0,0 +1,38 @@
+
+export interface VxeScrollbarUtils {
+  /**
+   * 计算滚动条滑块的长度
+   * @param viewportSize
+   * @param contentSize
+   * @param trackSize
+   */
+  getThumbSize (viewportSize: number, contentSize: number, trackSize: number): number
+  /**
+   * 计算滚动条滑块的偏移位置
+   * @param offsetSize
+   * @param viewportSize
+   * @param contentSize
+   * @param trackSize
+   * @param thumbSize
+   */
+  getThumbOffsetSize (offsetSize: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number): number
+  /**
+   * 根据点击轨道的位置，计算滑块的偏移位置
+   * @param clickPosition
+   * @param viewportSize
+   * @param contentSize
+   * @param trackSize
+   * @param thumbSize
+   */
+  getScrollFromClick (clickPosition: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number): number
+  /**
+   * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+   * @param pointerPosition
+   * @param dragOffset
+   * @param viewportSize
+   * @param contentSize
+   * @param trackSize
+   * @param thumbSize
+   */
+  getScrollFromDrag (pointerPosition: number, dragOffset: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number): number
+}