@vxe-ui/core 3.4.35 → 3.4.37

package/packages/src/mixins.ts

@@ -1,9 +1,35 @@
 import XEUtils from 'xe-utils'
 import Vue from 'vue'
 import { handleCheckInfo } from './permission'
+import { scrollbarUtils } from './scrollbar-utils'
 
-import { VxeComponentSizeType, VxeComponentIsVScrollbar } from '../../types'
+import { VxeGlobalUseMixins, VxeComponentSizeType, VxeComponentIsVScrollbar, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '../../types'
 
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+
+function getVmInternalData ($xeVm: {
+  reactData: VxeUseInitVScrollbarReactData
+  internalData: VxeUseInitVScrollbarInternalData
+  getScrollViewElem(): HTMLDivElement | null | undefined
+}) {
+  // 新版本 $xeVm.internalData
+  // 老版本 $xeVm
+  return $xeVm.internalData || $xeVm
+}
+
+function getVmReactData ($xeVm: {
+  reactData: VxeUseInitVScrollbarReactData
+  internalData: VxeUseInitVScrollbarInternalData
+  getScrollViewElem(): HTMLDivElement | null | undefined
+}) {
+  // 新版本 $xeVm.reactData
+  // 老版本 $xeVm
+  return $xeVm.reactData || $xeVm
+}
+
+/**
+ * 组件尺寸上下文
+ */
 export const sizeMixin = Vue.extend({
   inject: {
     $xeSizeInfo: {
@@ -26,15 +52,29 @@ export const sizeMixin = Vue.extend({
   }
 })
 
+/**
+ * 权限码处理
+ */
+export const permissionMixin = Vue.extend({
+  computed: {
+    computePermissionInfo (this: any) {
+      return handleCheckInfo(this.permissionCode, this.permissionMethod)
+    }
+  }
+})
+
+/**
+ * 虚拟滚动条是否启用
+ */
 export const vScrollbarMixin = Vue.extend({
   inject: {
-    $xeScrollbarInfo: {
+    $xeVmInfo: {
       default: null
     }
   },
   provide (this: any) {
     return {
-      $xeScrollbarInfo: {
+      $xeVmInfo: {
         getIsVScrollbar: () => this.computeIsVScrollbar
       }
     }
@@ -42,22 +82,211 @@ export const vScrollbarMixin = Vue.extend({
   computed: {
     computeIsVScrollbar (this: any): VxeComponentIsVScrollbar {
       const { useScrollbar } = this
-      const $xeScrollbarInfo = this.$xeScrollbarInfo
-      return XEUtils.isBoolean(useScrollbar) ? useScrollbar : ($xeScrollbarInfo ? $xeScrollbarInfo.getIsVScrollbar() : null)
+      const $xeVmInfo = this.$xeVmInfo
+      return XEUtils.isBoolean(useScrollbar) ? useScrollbar : ($xeVmInfo ? $xeVmInfo.getIsVScrollbar() : null)
     }
   }
 })
 
-export const permissionMixin = Vue.extend({
-  computed: {
-    computePermissionInfo (this: any) {
-      return handleCheckInfo(this.permissionCode, this.permissionMethod)
+export const initVScrollbarMixin = Vue.extend({
+  ...({} as {
+    data(): {
+      reactData: VxeUseInitVScrollbarReactData
+      internalData: VxeUseInitVScrollbarInternalData
+      getScrollViewElem(): HTMLDivElement | null | undefined
+    }
+  }),
+  methods: {
+    updateThumbSize () {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+
+      const viewEl = $xeVm.getScrollViewElem()
+      if (!viewEl) {
+        return
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
+      const trackXEl = $xeVm.$refs.refTrackXElem as HTMLDivElement
+      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
+      const thumbXElem = $xeVm.$refs.refThumbXElem as HTMLDivElement
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px'
+      }
+      reactData.xThumbWidth = xThumbWidth
+
+      const trackYEl = $xeVm.$refs.refTrackYElem as HTMLDivElement
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
+      const thumbYElem = $xeVm.$refs.refThumbYElem as HTMLDivElement
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px'
+      }
+      reactData.yThumbHeight = yThumbHeight
+    },
+    updateThumbOffset () {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+      const internalData = getVmInternalData($xeVm)
+
+      const viewEl = $xeVm.getScrollViewElem()
+      if (!viewEl) {
+        return
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
+      const { xThumbWidth, yThumbHeight } = reactData
+      const trackXEl = $xeVm.$refs.refTrackXElem as HTMLDivElement
+      const thumbXElem = $xeVm.$refs.refThumbXElem as HTMLDivElement
+      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0
+      internalData.xThumbLeft = xThumbLeft
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px'
+        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`
+      }
+
+      const trackYEl = $xeVm.$refs.refTrackYElem as HTMLDivElement
+      const thumbYElem = $xeVm.$refs.refThumbYElem as HTMLDivElement
+      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0
+      internalData.yThumbTop = yThumbTop
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px'
+        thumbYElem.style.transform = `translateY(${yThumbTop}px)`
+      }
+    },
+    clickTrackXEvent (evnt: MouseEvent) {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+
+      const trackEl = evnt.currentTarget as HTMLDivElement
+      if (trackEl !== evnt.target) {
+        return
+      }
+      const viewEl = $xeVm.getScrollViewElem()
+      if (!viewEl) {
+        return
+      }
+      const { xThumbWidth } = reactData
+      const trackRect = trackEl.getBoundingClientRect()
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      })
+    },
+    clickTrackYEvent (evnt: MouseEvent) {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+
+      const trackEl = evnt.currentTarget as HTMLDivElement
+      if (trackEl !== evnt.target) {
+        return
+      }
+      const viewEl = $xeVm.getScrollViewElem()
+      if (!viewEl) {
+        return
+      }
+      const { yThumbHeight } = reactData
+      const trackRect = trackEl.getBoundingClientRect()
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      })
+    },
+    pointerdownThumbXEvent (evnt: PointerEvent) {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+      const internalData = getVmInternalData($xeVm)
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      internalData.isThumbDrag = true
+      thumbEl.setPointerCapture(evnt.pointerId)
+
+      const viewEl = $xeVm.getScrollViewElem()
+      if (!viewEl) {
+        return
+      }
+      const { xThumbWidth } = reactData
+      const trackEl = thumbEl.parentElement as HTMLDivElement
+      const trackRect = trackEl.getBoundingClientRect()
+      const pointerPosition = evnt.clientX - trackRect.left
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
+      internalData.thumbDragOffset = pointerPosition - thumbOffset
+    },
+    pointermoveThumbXEvent (evnt: PointerEvent) {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+      const internalData = getVmInternalData($xeVm)
+
+      const { isThumbDrag, thumbDragOffset } = internalData
+      if (isThumbDrag) {
+        const viewEl = $xeVm.getScrollViewElem()
+        if (!viewEl) {
+          return
+        }
+        const { xThumbWidth } = reactData
+        const thumbEl = evnt.currentTarget as HTMLDivElement
+        const trackEl = thumbEl.parentElement as HTMLDivElement
+        const trackRect = trackEl.getBoundingClientRect()
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
+      }
+    },
+    cleatPointerThumbEvent (evnt: PointerEvent) {
+      const $xeVm = this
+      const internalData = getVmInternalData($xeVm)
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      thumbEl.releasePointerCapture(evnt.pointerId)
+      internalData.isThumbDrag = false
+    },
+    pointerdownThumbYEvent (evnt: PointerEvent) {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+      const internalData = getVmInternalData($xeVm)
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      internalData.isThumbDrag = true
+      thumbEl.setPointerCapture(evnt.pointerId)
+
+      const viewEl = $xeVm.getScrollViewElem()
+      if (!viewEl) {
+        return
+      }
+      const { yThumbHeight } = reactData
+      const trackEl = thumbEl.parentElement as HTMLDivElement
+      const trackRect = trackEl.getBoundingClientRect()
+      const pointerPosition = evnt.clientY - trackRect.top
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
+      internalData.thumbDragOffset = pointerPosition - thumbOffset
+    },
+    pointermoveThumbYEvent (evnt: PointerEvent) {
+      const $xeVm = this
+      const reactData = getVmReactData($xeVm)
+      const internalData = getVmInternalData($xeVm)
+
+      const { isThumbDrag, thumbDragOffset } = internalData
+      if (isThumbDrag) {
+        const viewEl = $xeVm.getScrollViewElem()
+        if (!viewEl) {
+          return
+        }
+        const { yThumbHeight } = reactData
+        const thumbEl = evnt.currentTarget as HTMLDivElement
+        const trackEl = thumbEl.parentElement as HTMLDivElement
+        const trackRect = trackEl.getBoundingClientRect()
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
+      }
     }
   }
 })
 
-export const globalMixins = {
+export const globalMixins: VxeGlobalUseMixins = {
   sizeMixin,
+  permissionMixin,
   vScrollbarMixin,
-  permissionMixin
+  initVScrollbarMixin
 }

package/packages/src/popper-utils.ts

@@ -41,7 +41,7 @@ export const popperUtils: VxePopperUtils = {
     const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
       appendTo: '',
       teleportTo: false,
-      marginSize: 18,
+      marginSize: 12,
       isMinWidth: true
     }, options)
     let panelPlacement: 'top' | 'bottom' = 'bottom'

package/types/core/mixins.d.ts

@@ -3,17 +3,109 @@ import { VxeComponentSizeType, VxeComponentIsVScrollbar, VxeComponentPermissionI
 
 /* eslint-disable @typescript-eslint/ban-types */
 
+type ToComputed<T> = {
+  [K in keyof T]: T[K] extends (...args: infer A) => infer R
+  ? () => (...args: A) => R
+  : () => T[K]
+}
+
+export interface VxeUseSizeResult {
+  computeSize: VxeComponentSizeType
+}
+export type VxeUseSizeComputed = ToComputed<VxeUseSizeResult>
+
+export interface VxeUsePermissionResult {
+  computePermissionInfo: VxeComponentPermissionInfo
+}
+export type VxeUsePermissionComputed = ToComputed<VxeUsePermissionResult>
+
+export interface VxeUseVScrollbarResult {
+  computeIsVScrollbar: VxeComponentIsVScrollbar
+}
+export type VxeUseVScrollbarComputed = ToComputed<VxeUseVScrollbarResult>
+
+export interface VxeUseInitVScrollbarReactData {
+  yThumbHeight: number
+  xThumbWidth: number
+}
+
+export interface VxeUseInitVScrollbarInternalData {
+  scrollObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
+  lastScrollTop: number
+  lastScrollLeft: number
+}
+
+export interface VxeUseInitVScrollbarResult {
+  /**
+   * 内部方法
+   * @private
+   */
+  updateThumbSize(): void
+  /**
+   * 内部方法
+   * @private
+   */
+  updateThumbOffset(): void
+  /**
+   * 内部方法
+   * @private
+   */
+  clickTrackXEvent(evnt: MouseEvent): void
+  /**
+   * 内部方法
+   * @private
+   */
+  clickTrackYEvent(evnt: MouseEvent): void
+  /**
+   * 内部方法
+   * @private
+   */
+  pointerdownThumbXEvent(evnt: PointerEvent): void
+  /**
+   * 内部方法
+   * @private
+   */
+  pointermoveThumbXEvent(evnt: PointerEvent): void
+  /**
+   * 内部方法
+   * @private
+   */
+  cleatPointerThumbEvent(evnt: PointerEvent): void
+  /**
+   * 内部方法
+   * @private
+   */
+  pointerdownThumbYEvent(evnt: PointerEvent): void
+  /**
+   * 内部方法
+   * @private
+   */
+  pointermoveThumbYEvent(evnt: PointerEvent): void
+}
+export type VxeUseInitVScrollbarComputed = ToComputed<VxeUseInitVScrollbarResult>
+
 /**
  * 通用方法
  */
 export interface VxeGlobalUseMixins {
-  sizeMixin: ExtendedVue<Vue, {}, {}, {
-    computeSize: VxeComponentSizeType
-  }, Record<string, any>>
-  vScrollbarMixin: ExtendedVue<Vue, {}, {}, {
-    computeIsVScrollbar: VxeComponentIsVScrollbar
-  }, Record<string, any>>
-  permissionMixin: ExtendedVue<Vue, {}, {}, {
-    computePermissionInfo: VxeComponentPermissionInfo
-  }, Record<string, any>>
+  /**
+   * 组件尺寸上下文
+   */
+  sizeMixin: ExtendedVue<Vue, {}, {}, VxeUseSizeResult, Record<string, any>>
+  /**
+   * 权限码处理
+   */
+  permissionMixin: ExtendedVue<Vue, {}, {}, VxeUsePermissionResult, Record<string, any>>
+  /**
+   * 虚拟滚动条是否启用
+   */
+  vScrollbarMixin: ExtendedVue<Vue, {}, {}, VxeUseVScrollbarResult, Record<string, any>>
+  /**
+   * 虚拟滚动条是否启用
+   */
+  initVScrollbarMixin: ExtendedVue<Vue, {}, VxeUseInitVScrollbarResult, {}, Record<string, any>>
 }