@vxe-ui/core 3.4.30 → 3.4.32

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

@@ -17,6 +17,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 { VxeGlobalUseMixins } from './mixins'
 import { VxeGlobalLog } from './log'
@@ -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
 
@@ -215,6 +219,10 @@ export interface VxeUIExport {
    * Document 工具函数
    */
   domUtils: VxeDomUtils
+  /**
+   * 滚动条工具函数
+   */
+  scrollbarUtils: VxeScrollbarUtils
 
   /**
    * 全局事件管理
@@ -295,6 +303,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
+}