vxe-table 3.25.0-beta.4 → 3.25.0-beta.6

package/packages/table/src/methods.ts

@@ -14,9 +14,7 @@ import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, TableReactData
 
 const { warnLog, errLog } = createComponentLog('table')
 
-const { getConfig, getI18n, renderer, scrollbarUtils, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
-
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {}
+const { getConfig, getI18n, renderer, formats, interceptor, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
 
 const supportMaxRow = 5e6
 const customStorageKey = 'VXE_CUSTOM_STORE'
@@ -4241,9 +4239,16 @@ function handleSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   internalData.inHeaderScroll = false
   internalData.inBodyScroll = false
   internalData.inFooterScroll = false
+  internalData.isSyncGanttScrollTop = false
   reactData.lazScrollLoading = false
   internalData.scrollRenderType = ''
 
+  const $xeGanttView = internalData.xeGanttView
+  if ($xeGanttView) {
+    const ganttInternalData = $xeGanttView.internalData
+    ganttInternalData.isSyncTableScrollTop = false
+  }
+
   let xRest = null
   let yRest = null
   if (!isAllOverflow) {
@@ -4322,14 +4327,15 @@ const getWheelSpeed = (lastScrollTime: number) => {
 const syncGanttScrollTop = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, scrollTop: number) => {
   const internalData = $xeTable as unknown as TableInternalData
 
+  const { isSyncGanttScrollTop } = internalData
+  if (isSyncGanttScrollTop) {
+    return
+  }
   const $xeGanttView = internalData.xeGanttView
   if ($xeGanttView) {
     const ganttInternalData = $xeGanttView.internalData
-    const { elemStore: ganttElemStore } = ganttInternalData
-    const ganttBodyScrollElem = getRefElem(ganttElemStore['main-body-scroll'])
-    if (ganttBodyScrollElem) {
-      ganttBodyScrollElem.scrollTop = scrollTop
-    }
+    ganttInternalData.isSyncTableScrollTop = true
+    $xeGanttView.handleSyncScrollTop({ scrollTop })
   }
 }
 
@@ -4885,6 +4891,14 @@ const tableMethods: any = {
 
     return $xeTable.$refs.refElem as HTMLDivElement
   },
+  getScrollViewElem () {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { elemStore } = internalData
+    const viewEl = getRefElem(elemStore['main-body-scroll'])
+    return viewEl
+  },
   /**
    * 获取父容器元素
    */
@@ -10275,7 +10289,7 @@ const tableMethods: any = {
    * @private
    */
   updateScrollbar () {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     const isVScrollbar = $xeTable.computeIsVScrollbar
     if (isVScrollbar) {
@@ -12780,7 +12794,10 @@ const tableMethods: any = {
       direction,
       ...params
     }
-    $xeTable.updateThumbOffset()
+    const isVScrollbar = $xeTable.computeIsVScrollbar
+    if (isVScrollbar) {
+      $xeTable.updateThumbOffset()
+    }
     updateRowExpandStyle($xeTable)
     checkLastSyncScroll($xeTable, isRollX, isRollY)
     if (isRollX) {
@@ -13334,6 +13351,19 @@ const tableMethods: any = {
       $xeTable.updateScrollYSpace()
     })
   },
+  handleSyncScrollTop (params: {
+    scrollTop: number
+  }) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { scrollTop } = params
+    const { elemStore } = internalData
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    if (bodyScrollElem) {
+      bodyScrollElem.scrollTop = scrollTop
+    }
+  },
   // 更新纵向 Y 可视渲染上下剩余空间大小
   updateScrollYSpace () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -14058,210 +14088,6 @@ const tableMethods: any = {
 
     return $xeTable.handleClearStack()
   },
-
-  // 滚动条
-  updateThumbSize () {
-    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const { elemStore } = internalData
-    const viewEl = getRefElem(elemStore['main-body-scroll'])
-    if (!viewEl) {
-      return
-    }
-    if (!viewEl.clientHeight || !viewEl.clientHeight) {
-      return
-    }
-    const trackXEl = $xeTable.$refs.refTrackXElem as HTMLDivElement
-    const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
-    const thumbXElem = $xeTable.$refs.refThumbXElem as HTMLDivElement
-    if (thumbXElem) {
-      thumbXElem.style.width = xThumbWidth + 'px'
-    }
-    reactData.xThumbWidth = xThumbWidth
-
-    const trackYEl = $xeTable.$refs.refTrackYElem as HTMLDivElement
-
-    const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
-    const thumbYElem = $xeTable.$refs.refThumbYElem as HTMLDivElement
-    if (thumbYElem) {
-      thumbYElem.style.height = yThumbHeight + 'px'
-    }
-    reactData.yThumbHeight = yThumbHeight
-  },
-  updateThumbOffset () {
-    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const { elemStore } = internalData
-    const viewEl = getRefElem(elemStore['main-body-scroll'])
-    if (!viewEl) {
-      return
-    }
-    if (!viewEl.clientHeight || !viewEl.clientHeight) {
-      return
-    }
-    const { xThumbWidth, yThumbHeight } = reactData
-    const trackXEl = $xeTable.$refs.refTrackXElem as HTMLDivElement
-    const thumbXElem = $xeTable.$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 = $xeTable.$refs.refTrackYElem as HTMLDivElement
-    const thumbYElem = $xeTable.$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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const { elemStore } = internalData
-    const trackEl = evnt.currentTarget as HTMLDivElement
-    if (trackEl !== evnt.target) {
-      return
-    }
-    const viewEl = getRefElem(elemStore['main-body-scroll'])
-    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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const trackEl = evnt.currentTarget as HTMLDivElement
-    if (trackEl !== evnt.target) {
-      return
-    }
-    const { elemStore } = internalData
-    const viewEl = getRefElem(elemStore['main-body-scroll'])
-    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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const { elemStore } = internalData
-    const thumbEl = evnt.currentTarget as HTMLDivElement
-    internalData.isThumbDrag = true
-    thumbEl.setPointerCapture(evnt.pointerId)
-
-    const viewEl = getRefElem(elemStore['main-body-scroll'])
-    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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const thumbEl = evnt.currentTarget as HTMLDivElement
-    if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-      return
-    }
-    const { elemStore, isThumbDrag, thumbDragOffset } = internalData
-    if (isThumbDrag) {
-      const viewEl = getRefElem(elemStore['main-body-scroll'])
-      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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const thumbEl = evnt.currentTarget as HTMLDivElement
-    thumbEl.releasePointerCapture(evnt.pointerId)
-    internalData.isThumbDrag = false
-  },
-  pointerdownThumbYEvent (evnt: PointerEvent) {
-    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const { elemStore } = internalData
-    const thumbEl = evnt.currentTarget as HTMLDivElement
-    internalData.isThumbDrag = true
-    thumbEl.setPointerCapture(evnt.pointerId)
-    const viewEl = getRefElem(elemStore['main-body-scroll'])
-    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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const reactData = $xeTable as unknown as TableReactData
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const thumbEl = evnt.currentTarget as HTMLDivElement
-    if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-      return
-    }
-    const { elemStore, isThumbDrag, thumbDragOffset } = internalData
-    if (isThumbDrag) {
-      const viewEl = getRefElem(elemStore['main-body-scroll'])
-      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)
-    }
-  },
-  // 滚动条
   dispatchEvent (type: ValueOf<VxeTableEmits>, params: Record<string, any>, evnt: Event | null) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const $xeGrid = $xeTable.$xeGrid
@@ -14324,6 +14150,16 @@ const tableMethods: any = {
     }
     return $xeTable.$nextTick()
   },
+  getInternalData () {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+    return internalData
+  },
+  getReactData () {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    return reactData
+  },
 
   /*************************
    * Publish methods

package/packages/table/src/table.ts

@@ -26,7 +26,7 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
-import type { VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType, VxeModalConstructor, VxeModalMethods } from 'vxe-pc-ui'
+import type { VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType, VxeModalConstructor, VxeModalMethods, VxeUseSizeComputed, VxeUseVScrollbarComputed, VxeUseInitVScrollbarComputed } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes, TableInternalData, TableReactData, VxeTableDefines } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('table')
@@ -624,18 +624,18 @@ function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & Vx
           ref: 'refTrackXElem',
           class: 'vxe-scrollbar--track-x',
           on: {
-            click: ($xeTable as any).clickTrackXEvent
+            click: $xeTable.clickTrackXEvent
           }
         }, [
           h('div', {
             ref: 'refThumbXElem',
             class: 'vxe-scrollbar--thumb-x',
             on: {
-              pointerdown: ($xeTable as any).pointerdownThumbXEvent,
-              pointermove: ($xeTable as any).pointermoveThumbXEvent,
-              pointerup: ($xeTable as any).cleatPointerThumbEvent,
-              pointercancel: ($xeTable as any).cleatPointerThumbEvent,
-              lostpointercapture: ($xeTable as any).cleatPointerThumbEvent
+              pointerdown: $xeTable.pointerdownThumbXEvent,
+              pointermove: $xeTable.pointermoveThumbXEvent,
+              pointerup: $xeTable.cleatPointerThumbEvent,
+              pointercancel: $xeTable.cleatPointerThumbEvent,
+              lostpointercapture: $xeTable.cleatPointerThumbEvent
             }
           })
         ]),
@@ -645,18 +645,18 @@ function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & Vx
           ref: 'refTrackYElem',
           class: 'vxe-scrollbar--track-y',
           on: {
-            click: ($xeTable as any).clickTrackYEvent
+            click: $xeTable.clickTrackYEvent
           }
         }, [
           h('div', {
             ref: 'refThumbYElem',
             class: 'vxe-scrollbar--thumb-y',
             on: {
-              pointerdown: ($xeTable as any).pointerdownThumbYEvent,
-              pointermove: ($xeTable as any).pointermoveThumbYEvent,
-              pointerup: ($xeTable as any).cleatPointerThumbEvent,
-              pointercancel: ($xeTable as any).cleatPointerThumbEvent,
-              lostpointercapture: ($xeTable as any).cleatPointerThumbEvent
+              pointerdown: $xeTable.pointerdownThumbYEvent,
+              pointermove: $xeTable.pointermoveThumbYEvent,
+              pointerup: $xeTable.cleatPointerThumbEvent,
+              pointercancel: $xeTable.cleatPointerThumbEvent,
+              lostpointercapture: $xeTable.cleatPointerThumbEvent
             }
           })
         ])
@@ -668,6 +668,8 @@ export default {
   name: 'VxeTable',
   mixins: [
     globalMixins.sizeMixin,
+    globalMixins.vScrollbarMixin,
+    globalMixins.initVScrollbarMixin,
     filterMixin,
     menuMixin,
     editMixin,
@@ -723,7 +725,7 @@ export default {
     }
   },
   computed: {
-    ...({} as {
+    ...({} as VxeUseSizeComputed & VxeUseVScrollbarComputed & VxeUseInitVScrollbarComputed & {
       $xeModal(): (VxeModalConstructor & VxeModalMethods)| null
       $xeTabs(): (VxeTabsConstructor & VxeTabsPrivateMethods) | null
     }),
@@ -2532,7 +2534,7 @@ export default {
       footer: slots.footerTooltip || slots['footer-tooltip']
     }
     const currTooltipSlot = tooltipStore.visible && tooltipStore.type ? tipSlots[tooltipStore.type] : null
-    const tableStyle = ($xeTable as any).computeTableStyle as VxeComponentStyleType
+    const tableStyle = $xeTable.computeTableStyle
     const rowDragOpts = $xeTable.computeRowDragOpts
     const tableTipConfig = $xeTable.computeTableTipConfig
     const validTipConfig = $xeTable.computeValidTipConfig

package/packages/table/src/util.ts

@@ -176,10 +176,44 @@ export function createInternalData (): TableInternalData {
     initStatus: false,
     isActivated: false,
 
+    // keyCtxTimeout: undefined,
+
+    // 刷新布局
     // rceTimeout: undefined,
     // rceRunTime: undefined,
     rceDelay: 0
 
+    // rsePending: false,
+
+    // 滚动属性
+    // intoRunScroll: false,
+    // inVirtualScroll: false,
+    // inWheelScroll: false,
+
+    // inHeaderScroll: false,
+    // inBodyScroll: false,
+    // inFooterScroll: false,
+    // scrollRenderType?: '',
+
+    // isSyncGanttScrollTop: false,
+
+    // 同步滚动
+    // lcsTimeout: undefined,
+    // lcsRunTime: undefined,
+
+    // 横向虚拟
+    // lxRunTime: undefined,
+    // lxTimeout: undefined,
+    // 纵向虚拟
+    // lyRunTime: undefined,
+    // lyTimeout: undefined,
+
+    // 动态高度
+    // chRunTime: undefined,
+    // chTimeout: undefined,
+
+    // isResizeCellHeight: false,
+
     // _sToTime: null
   }
 }