@vxe-ui/core 4.4.31 → 4.4.32

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/package.json

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

package/packages/index.ts

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

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/types/core/index.d.ts

@@ -17,6 +17,7 @@ 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'
@@ -76,6 +77,7 @@ export const permission: VxeGlobalPermission
 export const baseUtils: VxeBaseUtils
 export const domUtils: VxeDomUtils
 export const scrollbarUtils: VxeScrollbarUtils
+export const popperUtils: VxePopperUtils
 
 export const globalEvents: VxeGlobalEvents
 
@@ -223,6 +225,10 @@ export interface VxeUIExport {
    * 滚动条工具函数
    */
   scrollbarUtils: VxeScrollbarUtils
+  /**
+   * 弹出元素定位工具函数
+   */
+  popperUtils: VxePopperUtils
 
   /**
    * 全局事件管理
@@ -309,6 +315,7 @@ 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
+}