vxe-table 3.16.0-beta.1 → 3.16.0-beta.2

package/packages/grid/src/grid.ts

@@ -11,7 +11,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
 import type { VxeFormComponent, VxePagerComponent, VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, ValueOf } from 'vxe-pc-ui'
-import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods } from '../../../types'
+import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, TableInternalData } from '../../../types'
 
 const { getConfig, getI18n, commands, globalEvents, globalMixins, createEvent, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
 
@@ -232,11 +232,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeGrid
       const reactData = $xeGrid.reactData
 
-      const { seqConfig, pagerConfig, loading, editConfig, proxyConfig } = props
-      const { isZMax, tableLoading, tablePage } = reactData
+      const { seqConfig, pagerConfig, editConfig, proxyConfig } = props
+      const { isZMax, tablePage } = reactData
       const tableExtendProps = $xeGrid.computeTableExtendProps as any
       const proxyOpts = $xeGrid.computeProxyOpts
       const pagerOpts = $xeGrid.computePagerOpts
+      const isLoading = $xeGrid.computeIsLoading
       const tProps = Object.assign({}, tableExtendProps)
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
@@ -246,7 +247,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       }
       if (proxyConfig && isEnableConf(proxyOpts)) {
-        tProps.loading = loading || tableLoading
+        tProps.loading = isLoading
         if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
           tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize })
         }
@@ -307,6 +308,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const pagerOpts = $xeGrid.computePagerOpts as VxeGridPropTypes.PagerConfig
       return pagerOpts.total
+    },
+    computeIsLoading () {
+      const $xeGrid = this
+      const props = $xeGrid
+      const reactData = ($xeGrid as any).reactData as GridReactData
+
+      const { loading, proxyConfig } = props
+      const { tableLoading } = reactData
+      const proxyOpts = $xeGrid.computeProxyOpts as VxeGridPropTypes.ProxyConfig
+      const { showLoading } = proxyOpts
+      return loading || (tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts))
     }
   },
   watch: {
@@ -656,7 +668,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 reactData.formData = formData
               }
               if ($xeTable) {
-                const { internalData: tableInternalData } = $xeTable
+                const tableInternalData = $xeTable as unknown as TableInternalData
                 const { tableFullColumn, fullColumnFieldData } = tableInternalData
                 const sortOpts = $xeTable.computeSortOpts
                 let defaultSort = sortOpts.defaultSort
@@ -1537,6 +1549,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const vSize = $xeGrid.computeSize
       const styles = $xeGrid.computeStyles
+      const isLoading = $xeGrid.computeIsLoading
       return h('div', {
         ref: 'refElem',
         class: ['vxe-grid', {
@@ -1544,7 +1557,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--animat': !!props.animat,
           'is--round': props.round,
           'is--maximize': reactData.isZMax,
-          'is--loading': props.loading || reactData.tableLoading
+          'is--loading': isLoading
         }],
         style: styles
       }, $xeGrid.renderLayout(h))

package/packages/table/module/custom/mixin.ts

@@ -96,10 +96,6 @@ export default {
         }
       })
       reactData.isCustomStatus = true
-      reactData.isDragColMove = true
-      setTimeout(() => {
-        reactData.isDragColMove = false
-      }, 1000)
       return $xeTable.saveCustomStore('confirm').then(() => {
         if (allowGroup && allowValues && ($xeTable as any).handlePivotTableAggregateData) {
           if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {

package/packages/table/module/custom/panel.ts

@@ -1358,7 +1358,6 @@ export default {
               customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn)
             }
 
-            tableReactData.isDragColMove = true
             if (mouseConfig) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected()

package/packages/table/src/anime.ts

@@ -0,0 +1,52 @@
+
+import XEUtils from 'xe-utils'
+import { addClass, removeClass } from '../../ui/src/dom'
+
+const rowMoveCls = 'row--drag-move'
+const colMoveClass = 'col--drag-move'
+
+/**
+ * 上下拖拽
+ */
+export function moveRowAnimateToTb (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetTop: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateY(${offsetTop}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, rowMoveCls)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearRowAnimate (elem: HTMLElement | undefined) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls))
+    }
+  }, 500)
+}
+
+/**
+ * 左右拖拽
+ */
+export function moveColAnimateToLr (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetLeft: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateX(${offsetLeft}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, colMoveClass)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearColAnimate (elem: HTMLElement | undefined) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass))
+    }
+  }, 500)
+}

package/packages/table/src/body.ts

@@ -425,7 +425,7 @@ function renderTdColumn (
 
   return h('td', {
     class: [
-      'vxe-body--column',
+      'vxe-table--column vxe-body--column',
       colid,
       cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
       cellAlign ? `col--${cellAlign}` : '',
@@ -469,7 +469,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   const $xeGrid = $xeTable.$xeGrid
 
   const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
-  const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
+  const { hasFixedColumn, treeExpandedFlag, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
   const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
   const checkboxOpts = $xeTable.computeCheckboxOpts
   const radioOpts = $xeTable.computeRadioOpts
@@ -477,7 +477,6 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   const editOpts = $xeTable.computeEditOpts
   const rowOpts = $xeTable.computeRowOpts
   const columnOpts = $xeTable.computeColumnOpts
-  const columnDragOpts = $xeTable.computeColumnDragOpts
   const { transform, seqMode } = treeOpts
   const childrenField = treeOpts.children || treeOpts.childrenField
   const rows: any[] = []
@@ -558,29 +557,15 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
       return renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
     })
     rows.push(
-      !isColLoading && (columnOpts.drag && columnDragOpts.animation)
-        ? h('transition-group', {
-          props: {
-            tag: 'tr',
-            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`
-          },
-          class: trClass,
-          attrs: {
-            rowid
-          },
-          style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
-          key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-          nativeOn: trOn
-        }, tdVNs)
-        : h('tr', {
-          class: trClass,
-          attrs: {
-            rowid
-          },
-          style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
-          key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-          on: trOn
-        }, tdVNs)
+      h('tr', {
+        class: trClass,
+        attrs: {
+          rowid
+        },
+        style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
+        key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+        on: trOn
+      }, tdVNs)
     )
     // 如果行被展开了
     if (isExpandRow) {
@@ -744,12 +729,10 @@ export default {
     const { fixedColumn, fixedType, tableColumn } = props
 
     const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
-    const { isGroup, tableData, isRowLoading, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
+    const { isGroup, tableData, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, expandColumn, dragRow, dragCol } = tableReactData
     const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData
-    const rowOpts = $xeTable.computeRowOpts
     const emptyOpts = $xeTable.computeEmptyOpts
     const mouseOpts = $xeTable.computeMouseOpts
-    const rowDragOpts = $xeTable.computeRowDragOpts
     const expandOpts = $xeTable.computeExpandOpts
 
     let renderDataList = tableData
@@ -895,17 +878,9 @@ export default {
           /**
            * 内容
            */
-          !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
-            ? h('transition-group', {
-              ref: 'refBodyTBody',
-              props: {
-                tag: 'tbody',
-                name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
-              }
-            }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
-            : h('tbody', {
-              ref: 'refBodyTBody'
-            }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
+          h('tbody', {
+            ref: 'refBodyTBody'
+          }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
         ]),
         h('div', {
           class: 'vxe-table--checkbox-range'

package/packages/table/src/columnInfo.ts

@@ -53,6 +53,11 @@ export class ColumnInfo {
         }
       }
     }
+    if (_vm.aggFunc) {
+      if (!$xeTable.handlePivotTableAggregateData && _vm.aggFunc !== true) {
+        errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true'])
+      }
+    }
 
     Object.assign(this, {
       // 基本属性

package/packages/table/src/footer.ts

@@ -145,7 +145,7 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
     }
 
     return h('td', {
-      class: ['vxe-footer--column', column.id, {
+      class: ['vxe-table--column vxe-footer--column', column.id, {
         [`col--${footAlign}`]: footAlign,
         [`col--${type}`]: type,
         'col--last': isLastColumn,
@@ -199,33 +199,15 @@ function renderHeads (h: CreateElement, _vm: any, isOptimizeMode: boolean, rende
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
-  const tableReactData = $xeTable as unknown as TableReactData
 
   const { fixedType, footerTableData } = props
 
   const { footerRowClassName, footerRowStyle } = tableProps
-  const { isColLoading, isDragColMove } = tableReactData
-  const columnOpts = $xeTable.computeColumnOpts
-  const columnDragOpts = $xeTable.computeColumnDragOpts
 
   return (footerTableData as any[][]).map((row, $rowIndex) => {
     const _rowIndex = $rowIndex
     const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
-    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-      return h('transition-group', {
-        key: $rowIndex,
-        props: {
-          tag: 'tr',
-          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-          class: [
-            'vxe-footer--row',
-            footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
-          ],
-          style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) as VxeComponentStyleType : undefined
-        }
-      }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
-    }
     return h('tr', {
       key: $rowIndex,
       class: [

package/packages/table/src/header.ts

@@ -116,7 +116,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     }
 
     return h('th', {
-      class: ['vxe-header--column', colid, {
+      class: ['vxe-table--column vxe-header--column', colid, {
         [`col--${headAlign}`]: headAlign,
         [`col--${type}`]: type,
         'col--last': isLastColumn,
@@ -175,33 +175,14 @@ function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMo
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
-  const tableReactData = $xeTable as unknown as TableReactData
 
   const { fixedType } = props
 
-  const columnOpts = $xeTable.computeColumnOpts
-  const columnDragOpts = $xeTable.computeColumnDragOpts
-
   const { headerRowClassName, headerRowStyle } = tableProps
-  const { isColLoading, isDragColMove } = tableReactData
 
   return headerGroups.map((cols: any, $rowIndex: any) => {
     const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType }
 
-    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-      return h('transition-group', {
-        key: $rowIndex,
-        props: {
-          tag: 'tr',
-          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-          class: [
-            'vxe-header--row',
-            headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
-          ],
-          style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-        }
-      }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex))
-    }
     return h('tr', {
       key: $rowIndex,
       class: [