vxe-table 3.17.10 → 3.18.0-beta.1

package/packages/table/src/methods.ts

@@ -8,7 +8,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, VxeToolbarInstance, TableInternalData, VxeGridConstructor, GridPrivateMethods, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes } from '../../../types'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, VxeToolbarInstance, TableInternalData, VxeGridConstructor, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes, VxeGridPrivateMethods } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
@@ -304,8 +304,11 @@ function cacheColumnMap ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
       }
       fullColFieldData[field] = rest
     } else {
-      if ((storage && !type) || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
-        errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field=?`])
+      if (storage && !type) {
+        errLog('vxe.error.reqSupportProp', ['storage', `${column.getTitle() || type || ''} -> field=?`])
+      }
+      if (columnOpts.drag && (isCrossDrag || isSelfToChildDrag)) {
+        errLog('vxe.error.reqSupportProp', ['column-drag-config.isCrossDrag | column-drag-config.isSelfToChildDrag', `${column.getTitle() || type || ''} -> field=?`])
       }
     }
     if (!hasFixed && fixed) {
@@ -3907,11 +3910,13 @@ const Methods = {
   callSlot (slotFunc: any, params: any, h: any, vNodes: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     // const slots = $xeTable.$scopedSlots
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & VxeGridPrivateMethods
+    const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
 
     if (slotFunc) {
-      if ($xeGrid) {
-        return $xeGrid.callSlot(slotFunc, params, h, vNodes)
+      if ($xeGGWrapper) {
+        return $xeGGWrapper.callSlot(slotFunc, params, h, vNodes)
       }
       // if (XEUtils.isString(slotFunc)) {
       //   slotFunc = slots[slotFunc] || null
@@ -3932,17 +3937,21 @@ const Methods = {
    */
   getParentElem () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
 
     const { $el } = this
-    return $xeGrid ? $xeGrid.$el.parentNode : $el.parentNode
+    return $xeGGWrapper ? $xeGGWrapper.$el.parentNode : $el.parentNode
   },
   /**
    * 获取父容器的高度
    */
   getParentHeight () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & VxeGridPrivateMethods
+    const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
     const props = $xeTable
 
     const { height } = props
@@ -3952,8 +3961,8 @@ const Methods = {
       const parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0
       let parentWrapperHeight = 0
       if (parentElem) {
-        if ($xeGrid && hasClass(parentElem, 'vxe-grid--table-wrapper')) {
-          parentWrapperHeight = $xeGrid.getParentHeight()
+        if ($xeGGWrapper && hasClass(parentElem, 'vxe-grid--table-wrapper')) {
+          parentWrapperHeight = $xeGGWrapper.getParentHeight()
         } else {
           parentWrapperHeight = parentElem.clientHeight
         }
@@ -3969,9 +3978,11 @@ const Methods = {
    */
   getExcludeHeight () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & VxeGridPrivateMethods
+    const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
 
-    return $xeGrid ? $xeGrid.getExcludeHeight() : 0
+    return $xeGGWrapper ? $xeGGWrapper.getExcludeHeight() : 0
   },
   /**
    * 重置表格的一切数据状态
@@ -6218,7 +6229,8 @@ const Methods = {
   },
   preventEvent (evnt: any, type: any, args: any, next: any, end: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
 
     let evntList = interceptor.get(type)
 
@@ -6235,7 +6247,7 @@ const Methods = {
     let isStop = false
     for (let i = 0; i < evntList.length; i++) {
       const func = evntList[i]
-      const fnRest = func(Object.assign({ $grid: $xeGrid, $table: $xeTable, $event: evnt }, args))
+      const fnRest = func(Object.assign({ $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt }, args))
       if (fnRest === false) {
         isStop = true
         break
@@ -6260,7 +6272,9 @@ const Methods = {
    */
   handleGlobalMousedownEvent (evnt: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
 
     const { $el, $refs, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, areaOpts, filterStore, customStore, getRowNode } = this
     const { actived } = editStore
@@ -6349,7 +6363,7 @@ const Methods = {
         }
       }
     } else if (mouseConfig) {
-      if (!getEventTargetNode(evnt, $el).flag && !($xeGrid && getEventTargetNode(evnt, $xeGrid.$el).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
+      if (!getEventTargetNode(evnt, $el).flag && !($xeGGWrapper && getEventTargetNode(evnt, $xeGGWrapper.$el).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
         if (this.clearSelected) {
           this.clearSelected()
         }
@@ -6371,7 +6385,7 @@ const Methods = {
     if (ctxMenuStore.visible && tableMenu && !getEventTargetNode(evnt, tableMenu.$el).flag) {
       this.closeMenu()
     }
-    const isActivated = getEventTargetNode(evnt, ($xeGrid || this).$el).flag
+    const isActivated = getEventTargetNode(evnt, ($xeGGWrapper || $xeTable).$el).flag
     // 如果存在校验，点击了表格之外则清除
     if (!isActivated && editRules && validOpts.autoClear) {
       this.validErrorMaps = {}
@@ -6436,7 +6450,8 @@ const Methods = {
     const props = $xeTable
     const internalData = $xeTable as unknown as TableInternalData
     const reactData = $xeTable as unknown as TableReactData
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
 
     // 该行为只对当前激活的表格有效
     if (internalData.isActivated) {
@@ -6637,7 +6652,8 @@ const Methods = {
               column: selected.column,
               columnIndex: $xeTable.getColumnIndex(selected.column),
               $table: $xeTable,
-              $grid: $xeGrid
+              $grid: $xeGrid,
+              $gantt: $xeGantt
             }
             // 是否被禁用
             if (!beforeEditMethod || beforeEditMethod(params)) {
@@ -6662,7 +6678,8 @@ const Methods = {
                 column: selected.column,
                 columnIndex: $xeTable.getColumnIndex(selected.column),
                 $table: $xeTable,
-                $grid: $xeGrid
+                $grid: $xeGrid,
+                $gantt: $xeGantt
               }
               // 是否被禁用
               if (!beforeEditMethod || beforeEditMethod(params)) {
@@ -6689,7 +6706,8 @@ const Methods = {
               rowIndex: $xeTable.getRowIndex(parentRow),
               $rowIndex: $xeTable.getVMRowIndex(parentRow),
               $table: $xeTable,
-              $grid: $xeGrid
+              $grid: $xeGrid,
+              $gantt: $xeGantt
             }
             $xeTable.setTreeExpand(parentRow, false)
               .then(() => $xeTable.scrollToRow(parentRow))
@@ -6710,7 +6728,8 @@ const Methods = {
               column: selected.column,
               columnIndex: $xeTable.getColumnIndex(selected.column),
               $table: $xeTable,
-              $grid: $xeGrid
+              $grid: $xeGrid,
+              $gantt: $xeGantt
             }
             if (!beforeEditMethod || beforeEditMethod(params)) {
               if (editMethod) {
@@ -7765,15 +7784,23 @@ const Methods = {
    * @param {Row} row 行对象
    */
   setCurrentRow (row: any) {
-    const { $el, rowOpts } = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const $xeGanttView = internalData.xeGanttView
+    const el = $xeTable.$refs.refElem as HTMLDivElement
+    const rowOpts = $xeTable.computeRowOpts
     this.clearCurrentRow()
     // this.clearCurrentColumn()
     this.currentRow = row
     if (rowOpts.isCurrent || this.highlightCurrentRow) {
-      if ($el) {
-        XEUtils.arrayEach($el.querySelectorAll(`[rowid="${getRowid(this, row)}"]`), elem => addClass(elem, 'row--current'))
+      if (el) {
+        XEUtils.arrayEach(el.querySelectorAll(`[rowid="${getRowid($xeTable, row)}"]`), elem => addClass(elem, 'row--current'))
       }
     }
+    if ($xeGanttView) {
+      $xeGanttView.handleUpdateCurrentRow(row)
+    }
     return this.$nextTick()
   },
   isCheckedByRadioRow (row: any) {
@@ -7824,13 +7851,21 @@ const Methods = {
    * 用于当前行，手动清空当前高亮的状态
    */
   clearCurrentRow () {
-    const { $el } = this
-    this.currentRow = null
-    this.hoverRow = null
-    if ($el) {
-      XEUtils.arrayEach($el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const $xeGanttView = internalData.xeGanttView
+    const el = $xeTable.$refs.refElem as HTMLDivElement
+    reactData.currentRow = null
+    internalData.hoverRow = null
+    if (el) {
+      XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'))
     }
-    return this.$nextTick()
+    if ($xeGanttView) {
+      $xeGanttView.handleUpdateCurrentRow()
+    }
+    return $xeTable.$nextTick()
   },
   /**
    * 用于单选行，手动清空用户的选择
@@ -7891,20 +7926,33 @@ const Methods = {
     this.setHoverRow(row)
   },
   setHoverRow (row: any) {
-    const { $el } = this
-    const rowid = getRowid(this, row)
-    this.clearHoverRow()
-    if ($el) {
-      XEUtils.arrayEach($el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'))
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const $xeGanttView = internalData.xeGanttView
+    const el = $xeTable.$refs.refElem as HTMLDivElement
+    $xeTable.clearHoverRow()
+    if (el) {
+      XEUtils.arrayEach(el.querySelectorAll(`.vxe-body--row[rowid="${getRowid($xeTable, row)}"]`), elem => addClass(elem, 'row--hover'))
+    }
+    internalData.hoverRow = row
+    if ($xeGanttView) {
+      $xeGanttView.handleUpdateHoverRow(row)
     }
-    this.hoverRow = row
   },
   clearHoverRow () {
-    const { $el } = this
-    if ($el) {
-      XEUtils.arrayEach($el.querySelectorAll('.vxe-body--row.row--hover'), elem => removeClass(elem, 'row--hover'))
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const $xeGanttView = internalData.xeGanttView
+    const el = $xeTable.$refs.refElem as HTMLDivElement
+    if (el) {
+      XEUtils.arrayEach(el.querySelectorAll('.vxe-body--row.row--hover'), elem => removeClass(elem, 'row--hover'))
+    }
+    internalData.hoverRow = null
+    if ($xeGanttView) {
+      $xeGanttView.handleUpdateHoverRow()
     }
-    this.hoverRow = null
   },
   triggerHeaderCellClickEvent (evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -11065,7 +11113,8 @@ const Methods = {
     const props = $xeTable
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
 
     const { showFooter, footerData, footerMethod } = props
     const { visibleColumn, afterFullData } = internalData
@@ -11073,7 +11122,7 @@ const Methods = {
     if (showFooter && footerData && footerData.length) {
       footData = footerData.slice(0)
     } else if (showFooter && footerMethod) {
-      footData = visibleColumn.length ? footerMethod({ columns: visibleColumn, data: afterFullData, $table: $xeTable, $grid: $xeGrid }) : []
+      footData = visibleColumn.length ? footerMethod({ columns: visibleColumn, data: afterFullData, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }) : []
     }
     reactData.footerTableData = footData
     $xeTable.handleUpdateFooterMerge()
@@ -11242,16 +11291,18 @@ const Methods = {
   },
   dispatchEvent (type: ValueOf<VxeTableEmits>, params: Record<string, any>, evnt: Event | null) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
 
-    $xeTable.$emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params))
+    $xeTable.$emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }, params))
   },
   // 已废弃，使用 dispatchEvent
   emitEvent (type: any, params: any, evnt: any) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
 
-    this.$emit(type, Object.assign({ $table: $xeTable, $grid: $xeGrid, $event: evnt }, params))
+    $xeTable.$emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt }))
   },
   focus () {
     this.isActivated = true

package/packages/table/src/table.ts

@@ -111,11 +111,12 @@ function renderFixed (h: CreateElement, $xeTable: VxeTableConstructor & VxeTable
 function renderEmptyBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const slots = $xeTable.$scopedSlots
   const $xeGrid = $xeTable.$xeGrid
+  const $xeGantt = $xeTable.$xeGantt
 
   const emptyOpts = $xeTable.computeEmptyOpts
   const emptySlot = slots.empty
   let emptyContent: any = ''
-  const emptyParams = { $table: $xeTable, $grid: $xeGrid }
+  const emptyParams = { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }
   if (emptySlot) {
     emptyContent = emptySlot.call($xeTable, emptyParams)
   } else {
@@ -221,6 +222,7 @@ function renderRowExpandedVNs (h: CreateElement, $xeTable: VxeTableConstructor &
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
   const $xeGrid = $xeTable.$xeGrid
+  const $xeGantt = $xeTable.$xeGantt
 
   const { treeConfig } = props
   const { expandColumn, isRowGroupStatus } = reactData
@@ -282,8 +284,9 @@ function renderRowExpandedVNs (h: CreateElement, $xeTable: VxeTableConstructor &
         _columnIndex = colRest._index
       }
       const expandParams: VxeTableDefines.CellRenderDataParams = {
-        $grid: $xeGrid,
         $table: $xeTable,
+        $grid: $xeGrid,
+        $gantt: $xeGantt,
         seq,
         column: expandColumn,
         columnIndex,
@@ -760,11 +763,12 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
       const $xeGrid = $xeTable.$xeGrid
+      const $xeGantt = $xeTable.$xeGantt
 
       const { id } = props
       if (id) {
         if (XEUtils.isFunction(id)) {
-          return `${id({ $table: $xeTable, $grid: $xeGrid }) || ''}`
+          return `${id({ $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }) || ''}`
         }
         return `${id}`
       }
@@ -1900,6 +1904,7 @@ export default {
 
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
     const props = $xeTable
     const slots = $xeTable.$scopedSlots
     const reactData = $xeTable as unknown as TableReactData
@@ -2067,7 +2072,7 @@ export default {
           },
           scopedSlots: loadingSlot
             ? {
-                default: () => $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, loading: currLoading }, h)
+                default: () => $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }, h)
               }
             : {}
         })
@@ -2076,7 +2081,7 @@ export default {
             class: ['vxe-loading--custom-wrapper', {
               'is--visible': currLoading
             }]
-          }, $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, loading: currLoading }, h))
+          }, $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }, h))
           : renderEmptyElement($xeTable),
       /**
        * 自定义列

package/styles/components/table.scss

@@ -1223,9 +1223,6 @@ $btnThemeList: (
   // }
   
   /*边框*/
-  .vxe-table--footer-wrapper {
-    border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-  }
   &.border--default,
   &.border--full,
   &.border--outer,
@@ -1323,6 +1320,13 @@ $btnThemeList: (
     }
   }
   &.border--default,
+  &.border--full,
+  &.border--inner {
+    .vxe-table--footer-wrapper {
+      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    }
+  }
+  &.border--default,
   &.border--full {
     .vxe-table--scroll-y-top-corner {
       &::before {