vxe-table 4.16.0-beta.6 → 4.16.0-beta.8

package/packages/table/src/table.ts

@@ -1,4 +1,4 @@
-import { h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue'
+import { h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, Teleport, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom'
@@ -30,6 +30,7 @@ import '../module/custom/hook'
 import '../render'
 
 import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType } from 'vxe-pc-ui'
+import type { VxeGanttConstructor, VxeGanttPrivateMethods } from 'vxe-gantt'
 import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes, VxeTableCustomPanelConstructor } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
@@ -55,6 +56,9 @@ export default defineVxeComponent({
     const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
     const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
+    const $xeGrid = inject<(VxeGridConstructor & VxeGridPrivateMethods) | null>('$xeGrid', null)
+    const $xeGantt = inject<(VxeGanttConstructor & VxeGanttPrivateMethods) | null>('$xeGantt', null)
+    const $xeGGWrapper = $xeGrid || $xeGantt
 
     const { computeSize } = useFns.useSize(props)
 
@@ -334,6 +338,8 @@ export default defineVxeComponent({
     const refTableRightBody = ref() as Ref<ComponentPublicInstance>
     const refTableRightFooter = ref() as Ref<ComponentPublicInstance>
 
+    const refTeleportWrapper = ref<HTMLDivElement>()
+
     const refLeftContainer = ref() as Ref<HTMLDivElement>
     const refRightContainer = ref() as Ref<HTMLDivElement>
     const refColResizeBar = ref() as Ref<HTMLDivElement>
@@ -360,10 +366,6 @@ export default defineVxeComponent({
     const refScrollXSpaceElem = ref<HTMLDivElement>()
     const refScrollYSpaceElem = ref<HTMLDivElement>()
 
-    const $xeGrid = inject<(VxeGridConstructor & VxeGridPrivateMethods) | null>('$xeGrid', null)
-    const $xeGantt = inject('$xeGantt', null)
-    const $xeGGWrapper = $xeGrid || $xeGantt
-
     let $xeToolbar: VxeToolbarConstructor
 
     const computeTableId = computed(() => {
@@ -498,8 +500,18 @@ export default defineVxeComponent({
 
     const computeHeaderCellOpts = computed(() => {
       const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
+      const defaultRowHeight = computeDefaultRowHeight.value
       const cellOpts = computeCellOpts.value
-      headerCellOpts.height = XEUtils.toNumber(getCalcHeight(headerCellOpts.height || cellOpts.height))
+      let headCellHeight = XEUtils.toNumber(getCalcHeight(headerCellOpts.height || cellOpts.height))
+      if ($xeGantt) {
+        const { computeTaskScaleConfs } = $xeGantt.getComputeMaps()
+        const taskScaleConfs = computeTaskScaleConfs.value
+        if (taskScaleConfs && taskScaleConfs.length > 2) {
+          const ganttMinHeadCellHeight = defaultRowHeight / 2 * taskScaleConfs.length
+          headCellHeight = Math.max(ganttMinHeadCellHeight, headCellHeight)
+        }
+      }
+      headerCellOpts.height = headCellHeight
       return headerCellOpts
     })
 
@@ -7859,17 +7871,24 @@ export default defineVxeComponent({
     }
 
     const showDropTip = (evnt: DragEvent | MouseEvent, trEl: HTMLElement | null, thEl: HTMLElement | null, showLine: boolean, dragPos: string) => {
-      const el = refElem.value
-      if (!el) {
+      let wrapperEl = refElem.value
+      if ($xeGantt && trEl) {
+        const { refGanttContainerElem } = $xeGantt.getRefMaps()
+        const ganttContainerElem = refGanttContainerElem.value
+        if (ganttContainerElem) {
+          wrapperEl = ganttContainerElem
+        }
+      }
+      if (!wrapperEl) {
         return
       }
       const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData
       const { prevDragToChild } = internalData
-      const wrapperRect = el.getBoundingClientRect()
+      const wrapperRect = wrapperEl.getBoundingClientRect()
       const osbWidth = overflowY ? scrollbarWidth : 0
       const osbHeight = overflowX ? scrollbarHeight : 0
-      const tableWrapperWidth = el.clientWidth
-      const tableWrapperHeight = el.clientHeight
+      const tableWrapperWidth = wrapperEl.clientWidth
+      const tableWrapperHeight = wrapperEl.clientHeight
       if (trEl) {
         const rdLineEl = refDragRowLineElem.value
         if (rdLineEl) {
@@ -7933,8 +7952,8 @@ export default defineVxeComponent({
       const rdTipEl = refDragTipElem.value
       if (rdTipEl) {
         rdTipEl.style.display = 'block'
-        rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`
-        rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`
+        rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`
+        rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`
         rdTipEl.setAttribute('drag-status', showLine ? (prevDragToChild ? 'sub' : 'normal') : 'disabled')
       }
     }
@@ -8305,7 +8324,7 @@ export default defineVxeComponent({
         if (!cell) {
           return
         }
-        const cellParams = XEUtils.assign(params, { cell })
+        const cellParams = XEUtils.assign(params, { cell, $table: $xeTable })
         let dragLeft = 0
         const tableRect = tableEl.getBoundingClientRect()
         const rightContainerRect = rightContainerElem ? rightContainerElem.getBoundingClientRect() : null
@@ -8439,7 +8458,7 @@ export default defineVxeComponent({
           const colRest = fullColumnIdData[colid]
           const dragBtnElem = evnt.target as HTMLDivElement
           const cell = dragBtnElem.parentNode as HTMLTableCellElement
-          const cellParams = Object.assign(params, { cell })
+          const cellParams = Object.assign(params, { cell, $table: $xeTable })
           const colMinWidth = getColReMinWidth(cellParams)
 
           el.setAttribute('data-calc-col', 'Y')
@@ -8474,7 +8493,14 @@ export default defineVxeComponent({
         const resizableOpts = computeResizableOpts.value
         const rowOpts = computeRowOpts.value
         const cellOpts = computeCellOpts.value
-        const tableEl = refElem.value
+        let tableEl = refElem.value
+        if ($xeGantt) {
+          const { refGanttContainerElem } = $xeGantt.getRefMaps()
+          const ganttContainerElem = refGanttContainerElem.value
+          if (ganttContainerElem) {
+            tableEl = ganttContainerElem
+          }
+        }
         const resizeBarElem = refRowResizeBar.value
         if (!resizeBarElem) {
           return
@@ -9705,6 +9731,7 @@ export default defineVxeComponent({
         const { treeConfig, dragConfig } = props
         const rowDragOpts = computeRowDragOpts.value
         const { afterFullData, tableFullData, fullAllDataRowIdData } = internalData
+        const $xeGanttView = internalData.xeGanttView
         const { animation, isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = rowDragOpts
         const treeOpts = computeTreeOpts.value
         const cellOpts = computeCellOpts.value
@@ -9903,7 +9930,15 @@ export default defineVxeComponent({
                 const _newRowIndex = dragRowRest._index
                 const firstRow = tableData[0]
                 const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)]
+                let wrapperEl = el
 
+                if ($xeGantt && $xeGanttView) {
+                  const { refGanttContainerElem } = $xeGantt.getRefMaps()
+                  const ganttContainerElem = refGanttContainerElem.value
+                  if (ganttContainerElem) {
+                    wrapperEl = ganttContainerElem
+                  }
+                }
                 if (firstRowRest) {
                   const _firstRowIndex = firstRowRest._index
                   const _lastRowIndex = _firstRowIndex + tableData.length
@@ -9936,15 +9971,27 @@ export default defineVxeComponent({
 
                   const dragRangeList = tableData.slice(rsIndex, reIndex)
                   if (dragRangeList.length) {
-                    const dtTrList = el.querySelectorAll<HTMLElement>(dragRangeList.map(row => `.vxe-body--row[rowid="${getRowid($xeTable, row)}"]`).join(','))
+                    const dtClss: string[] = []
+                    dragRangeList.forEach(row => {
+                      const rowid = getRowid($xeTable, row)
+                      dtClss.push(`.vxe-body--row[rowid="${rowid}"]`)
+                      if ($xeGantt) {
+                        dtClss.push(`.vxe-gantt-view--body-row[rowid="${rowid}"]`, `.vxe-gantt-view--chart-row[rowid="${rowid}"]`)
+                      }
+                    })
+                    const dtTrList = wrapperEl.querySelectorAll<HTMLElement>(dtClss.join(','))
                     moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight)
                   }
                 }
 
-                const newTrList = el.querySelectorAll<HTMLElement>(`.vxe-body--row[rowid="${dragRowid}"]`)
-                const newTrEl = newTrList[0]
+                const drClss = [`.vxe-body--row[rowid="${dragRowid}"]`]
+                if ($xeGantt) {
+                  drClss.push(`.vxe-gantt-view--body-row[rowid="${dragRowid}"]`, `.vxe-gantt-view--chart-row[rowid="${dragRowid}"]`)
+                }
+                const newDtTrList = wrapperEl.querySelectorAll<HTMLElement>(drClss.join(','))
+                const newTrEl = newDtTrList[0]
                 if (dragOffsetTop > -1 && newTrEl) {
-                  moveRowAnimateToTb(newTrList, dragOffsetTop - newTrEl.offsetTop)
+                  moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop)
                 }
               }
 
@@ -9971,7 +10018,7 @@ export default defineVxeComponent({
         const { lazy } = treeOpts
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
         const { prevDragRow, prevDragPos } = internalData
-        const el = refElem.value
+        let wrapperEl = refElem.value
         if (treeConfig && lazy && prevDragToChild) {
           // 懒加载
           const newRowid = getRowid($xeTable, prevDragRow)
@@ -9986,9 +10033,18 @@ export default defineVxeComponent({
         } else {
           $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
         }
+        const dtClss = ['.vxe-body--row']
+        if ($xeGantt) {
+          const { refGanttContainerElem } = $xeGantt.getRefMaps()
+          const ganttContainerElem = refGanttContainerElem.value
+          if (ganttContainerElem) {
+            wrapperEl = ganttContainerElem
+          }
+          dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row')
+        }
         hideDropTip()
         clearRowDropOrigin()
-        clearRowAnimate(el)
+        clearRowAnimate(wrapperEl, dtClss)
         internalData.prevDragToChild = false
         reactData.dragRow = null
         reactData.dragCol = null
@@ -10375,7 +10431,7 @@ export default defineVxeComponent({
         $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild)
         hideDropTip()
         clearColDropOrigin()
-        clearColAnimate(el)
+        clearColAnimate(el, ['.vxe-table--column'])
         internalData.prevDragToChild = false
         reactData.dragRow = null
         reactData.dragCol = null
@@ -11672,6 +11728,7 @@ export default defineVxeComponent({
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
       const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore } = reactData
+      const { teleportToWrapperElem } = internalData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tableTipConfig = computeTableTipConfig.value
@@ -11797,52 +11854,69 @@ export default defineVxeComponent({
               })
             ]
           : []),
-        /**
-         * 行高线
-         */
         h('div', {
-          key: 'trl',
-          ref: refRowResizeBar,
-          class: 'vxe-table--resizable-row-bar'
-        }, resizableOpts.showDragTip
-          ? [
+          key: 'ttw'
+        }, [
+          h(Teleport, {
+            to: teleportToWrapperElem,
+            disabled: !($xeGantt && teleportToWrapperElem)
+          }, [
+            h('div', {
+              ref: refTeleportWrapper
+            }, [
+              /**
+               * 行高线
+               */
               h('div', {
-                class: 'vxe-table--resizable-number-tip'
-              })
-            ]
-          : []),
-        /**
-         * 加载中
-         */
-        VxeUILoadingComponent
-          ? h(VxeUILoadingComponent, {
-            key: 'lg',
-            class: 'vxe-table--loading',
-            modelValue: currLoading,
-            icon: loadingOpts.icon,
-            text: loadingOpts.text
-          }, loadingSlot
-            ? {
-                default: () => callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading })
-              }
-            : {})
-          : loadingSlot
-            ? h('div', {
-              class: ['vxe-loading--custom-wrapper', {
-                'is--visible': currLoading
-              }]
-            }, callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }))
-            : renderEmptyElement($xeTable),
-        /**
-         * 自定义列
-         */
-        initStore.custom
-          ? h(TableCustomPanelComponent, {
-            key: 'cs',
-            ref: refTableCustom,
-            customStore
-          })
-          : renderEmptyElement($xeTable),
+                key: 'trl',
+                ref: refRowResizeBar,
+                class: 'vxe-table--resizable-row-bar'
+              }, resizableOpts.showDragTip
+                ? [
+                    h('div', {
+                      class: 'vxe-table--resizable-number-tip'
+                    })
+                  ]
+                : []),
+              /**
+               * 自定义列
+               */
+              initStore.custom
+                ? h(TableCustomPanelComponent, {
+                  key: 'cs',
+                  ref: refTableCustom,
+                  customStore
+                })
+                : renderEmptyElement($xeTable),
+              /**
+               * 加载中
+               */
+              VxeUILoadingComponent
+                ? h(VxeUILoadingComponent, {
+                  key: 'lg',
+                  class: 'vxe-table--loading',
+                  modelValue: currLoading,
+                  icon: loadingOpts.icon,
+                  text: loadingOpts.text
+                }, loadingSlot
+                  ? {
+                      default: () => callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading })
+                    }
+                  : {})
+                : loadingSlot
+                  ? h('div', {
+                    class: ['vxe-loading--custom-wrapper', {
+                      'is--visible': currLoading
+                    }]
+                  }, callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }))
+                  : renderEmptyElement($xeTable),
+              /**
+               * 拖拽排序提示
+               */
+              renderDragTip()
+            ])
+          ])
+        ]),
         /**
          * 筛选
          */
@@ -11882,10 +11956,6 @@ export default defineVxeComponent({
             ref: refTableMenu
           })
           : renderEmptyElement($xeTable),
-        /**
-         * 拖拽排序提示
-         */
-        renderDragTip(),
         /**
          * 提示相关
          */
@@ -12127,7 +12197,6 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      const $xeGantt = $xeTable.xeGantt
       const columnOpts = computeColumnOpts.value
       const rowOpts = computeRowOpts.value
       const customOpts = computeCustomOpts.value
@@ -12309,6 +12378,15 @@ export default defineVxeComponent({
           warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField'])
         }
 
+        if (treeConfig) {
+          XEUtils.arrayEach(['rowField', 'parentField', 'childrenField', 'hasChildField', 'mapChildrenField'], key => {
+            const val = treeOpts[key as 'rowField']
+            if (val && val.indexOf('.') > -1) {
+              errLog('vxe.error.errProp', [`${key}=${val}`, `${key}=${val.split('.')[0]}`])
+            }
+          })
+        }
+
         if (rowOpts.currentMethod) {
           warnLog('vxe.error.delProp', ['row-config.currentMethod', 'current-row-config.beforeSelectMethod'])
         }