vxe-table 3.16.3 → 3.17.0-beta.0

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

@@ -6,7 +6,7 @@ import { errLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
 
 import type { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, TableReactData, TableInternalData, VxeColumnPropTypes, VxeTableCustomPanelConstructor, TableCustomPanelReactData, TableCustomPanelInternalData } from '../../../../types'
-import type { VxeModalComponent, VxeDrawerComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeInputComponent, VxeButtonDefines, VxeRadioGroupDefines } from 'vxe-pc-ui'
+import type { VxeButtonDefines, VxeRadioGroupDefines } from 'vxe-pc-ui'
 
 const { getI18n, getIcon, renderEmptyElement } = VxeUI
 
@@ -113,7 +113,7 @@ const renderDragTip = (h: CreateElement, $xeTableCustomPanel: VxeTableCustomPane
 }
 
 const renderSimplePanel = (h: CreateElement, _vm: any) => {
-  const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+  const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
   const props = _vm
 
@@ -435,10 +435,10 @@ const renderSimplePanel = (h: CreateElement, _vm: any) => {
 }
 
 const renderPopupPanel = (h: CreateElement, $xeTableCustomPanel: VxeTableCustomPanelConstructor) => {
-  const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
-  const VxeUIDrawerComponent = VxeUI.getComponent<VxeDrawerComponent>('VxeDrawer')
-  const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
-  const VxeUINumberInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
+  const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
+  const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer')
+  const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
+  const VxeUINumberInputComponent = VxeUI.getComponent('VxeInput')
 
   const _vm = $xeTableCustomPanel as any
   const props = $xeTableCustomPanel
@@ -913,11 +913,11 @@ export default {
   created () {
     const $xeTableCustomPanel = this as any
 
-    const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
-    const VxeUIDrawerComponent = VxeUI.getComponent<VxeDrawerComponent>('VxeDrawer')
-    const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
-    const VxeUINumberInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeNumberInput')
-    const VxeUIRadioGroupComponent = VxeUI.getComponent<VxeRadioGroupComponent>('VxeRadioGroup')
+    const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
+    const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer')
+    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
+    const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput')
+    const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup')
 
     $xeTableCustomPanel.$nextTick(() => {
       const $xeTable = $xeTableCustomPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods

package/packages/table/module/export/export-panel.ts

@@ -4,7 +4,6 @@ import XEUtils from 'xe-utils'
 import { formatText } from '../../../ui/src/utils'
 import { errLog } from '../../../ui/src/log'
 
-import type { VxeModalComponent, VxeInputComponent, VxeCheckboxComponent, VxeSelectComponent, VxeButtonComponent } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
 
 const { getI18n, getIcon, globalMixins, renderEmptyElement } = VxeUI
@@ -60,11 +59,11 @@ export default {
   created (this: any) {
     const $xeTableExportPanel = this
 
-    const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
-    const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
-    const VxeUISelectComponent = VxeUI.getComponent<VxeSelectComponent>('VxeSelect')
-    const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
-    const VxeUICheckboxComponent = VxeUI.getComponent<VxeCheckboxComponent>('VxeCheckbox')
+    const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
+    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
+    const VxeUISelectComponent = VxeUI.getComponent('VxeSelect')
+    const VxeUIInputComponent = VxeUI.getComponent('VxeInput')
+    const VxeUICheckboxComponent = VxeUI.getComponent('VxeCheckbox')
 
     $xeTableExportPanel.$nextTick(() => {
       if (!VxeUIModalComponent) {

package/packages/table/module/export/import-panel.ts

@@ -4,7 +4,6 @@ import XEUtils from 'xe-utils'
 import { parseFile } from '../../../ui/src/utils'
 import { errLog } from '../../../ui/src/log'
 
-import type { VxeModalComponent, VxeSelectComponent, VxeButtonComponent } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
 
 const { getI18n, getIcon, globalMixins, renderEmptyElement } = VxeUI
@@ -52,9 +51,9 @@ export default {
   created (this: any) {
     const $xeTableImportPanel = this
 
-    const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
-    const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
-    const VxeUISelectComponent = VxeUI.getComponent<VxeSelectComponent>('VxeSelect')
+    const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
+    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
+    const VxeUISelectComponent = VxeUI.getComponent('VxeSelect')
 
     $xeTableImportPanel.$nextTick(() => {
       if (!VxeUIModalComponent) {

package/packages/table/src/body.ts

@@ -901,7 +901,7 @@ export default {
                 ]
               : null),
             h('span', {
-              class: 'vxe-table--cell-copy-area'
+              class: 'vxe-table--cell-clip-area'
             }),
             h('span', {
               class: 'vxe-table--cell-extend-area'

package/packages/table/src/header.ts

@@ -387,7 +387,7 @@ export default {
                 class: 'vxe-table--cell-main-area'
               }),
               h('span', {
-                class: 'vxe-table--cell-copy-area'
+                class: 'vxe-table--cell-clip-area'
               }),
               h('span', {
                 class: 'vxe-table--cell-extend-area'

package/packages/table/src/methods.ts

@@ -3868,7 +3868,7 @@ const Methods = {
       setTimeout(() => handleLazyRecalculate($xeTable, false, true, true), 50)
     })
   },
-  handleTableData (force: any) {
+  handleTableData (force?: boolean) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
@@ -7048,7 +7048,7 @@ const Methods = {
     const treeOpts = $xeTable.computeTreeOpts
     const childrenField = treeOpts.children || treeOpts.childrenField
     const checkboxOpts = $xeTable.computeCheckboxOpts
-    const { checkField, checkStrictly, checkMethod } = checkboxOpts
+    const { checkField, indeterminateField, checkStrictly, checkMethod } = checkboxOpts
     if (checkStrictly) {
       return
     }
@@ -7079,6 +7079,10 @@ const Methods = {
           if (childList && childList.length && !childRowMaps[rowid]) {
             childRowMaps[rowid] = 1
             childRowList.unshift([row, rowid, childList])
+          } else {
+            if (indeterminateField) {
+              XEUtils.set(row, indeterminateField, false)
+            }
           }
         }, { children: transform ? mapChildrenField : childrenField })
       }
@@ -7090,7 +7094,7 @@ const Methods = {
         let sLen = 0 // 已选
         let hLen = 0 // 半选
         let vLen = 0 // 有效子行
-        const cLen = childList.length // 有效子行
+        const cLen = childList.length // 子行
         childList.forEach(
           checkMethod
             ? (item) => {
@@ -7146,6 +7150,9 @@ const Methods = {
         if (checkField) {
           XEUtils.set(row, checkField, isSelected)
         }
+        if (indeterminateField) {
+          XEUtils.set(row, indeterminateField, halfSelect)
+        }
         if (isSelected) {
           if (!checkField) {
             selectCheckboxMaps[rowid] = row
@@ -9334,15 +9341,17 @@ const Methods = {
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { tableFullData } = internalData
+    const { tableFullData, scrollYStore } = internalData
     const expandOpts = $xeTable.computeExpandOpts
     const { reserve } = expandOpts
     const expList = $xeTable.getRowExpandRecords()
     internalData.rowExpandedMaps = {}
-    reactData.rowExpandedFlag++
     if (reserve) {
       tableFullData.forEach((row) => handleRowExpandReserve($xeTable, row, false))
     }
+    reactData.rowExpandedFlag++
+    scrollYStore.startIndex = 0
+    scrollYStore.endIndex = 1
     return $xeTable.$nextTick().then(() => {
       if (expList.length) {
         return handleLazyRecalculate($xeTable, true, true, true)

package/packages/table/src/table.ts

@@ -25,7 +25,7 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
-import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
+import type { VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData, TableReactData, VxeTableDefines } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
@@ -1059,9 +1059,12 @@ export default {
       return Object.assign({}, getConfig().table.clipConfig, this.clipConfig)
     },
     fnrOpts () {
-      return this.computeFNROpts
+      return this.computeFnrOpts
     },
     computeFNROpts () {
+      return this.computeFnrOpts
+    },
+    computeFnrOpts () {
       return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig)
     },
     headerCtxMenu () {
@@ -1878,8 +1881,8 @@ export default {
     }
 
     // 使用已安装的组件，如果未安装则不渲染
-    const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading')
-    const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
+    const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
+    const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
     $xeTable.$nextTick(() => {
       if (props.loading) {
@@ -1977,8 +1980,8 @@ export default {
   },
   render (h: CreateElement) {
     // 使用已安装的组件，如果未安装则不渲染
-    const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading')
-    const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
+    const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
+    const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const $xeGrid = $xeTable.$xeGrid

package/packages/toolbar/src/toolbar.ts

@@ -5,7 +5,7 @@ import { VxeUI } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { ValueOf, VxeButtonComponent, VxeComponentSizeType, VxeComponentSlotType, VxeButtonDefines } from 'vxe-pc-ui'
+import type { ValueOf, VxeComponentSizeType, VxeComponentSlotType, VxeButtonDefines } from 'vxe-pc-ui'
 import type { VxeGridConstructor, GridPrivateMethods, ToolbarInternalData, VxeTableDefines, VxeToolbarEmits, VxeToolbarPropTypes, VxeTablePropTypes, ToolbarReactData, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, commands, createEvent, globalMixins, renderEmptyElement } = VxeUI
@@ -412,7 +412,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     //
     renderDropdowns (h: CreateElement, item: VxeToolbarPropTypes.ButtonConfig, isBtn: boolean) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
 
@@ -456,7 +456,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
      */
     renderLeftBtns  (h: CreateElement): VxeComponentSlotType[] {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
       const props = $xeToolbar
@@ -534,7 +534,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
      */
     renderRightTools (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
       const props = $xeToolbar
@@ -612,7 +612,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderToolImport  (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
 
@@ -633,7 +633,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderToolExport  (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
 
@@ -654,7 +654,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderToolPrint (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
 
@@ -675,7 +675,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderToolRefresh  (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
       const reactData = $xeToolbar.reactData
@@ -697,7 +697,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderToolZoom  (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
       const $xeGrid = $xeToolbar.$xeGrid
@@ -719,7 +719,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderToolCustom (h: CreateElement) {
       // 使用已安装的组件，如果未安装则不渲染
-      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
       const $xeToolbar = this
 
@@ -844,7 +844,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     })
 
     // 使用已安装的组件，如果未安装则不渲染
-    const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
 
     if (props.refresh || props.import || props.export || props.print || props.zoom) {
       if (!VxeUIButtonComponent) {

package/packages/ui/index.ts

@@ -260,7 +260,7 @@ VxeUI.setConfig({
       autoLoad: true,
       showLoading: true,
       showResponseMsg: true,
-      showActiveMsg: true,
+      showActionMsg: true,
       response: {
         list: null,
         result: 'result',

package/styles/components/table.scss

@@ -307,6 +307,7 @@ $btnThemeList: (
 
 .vxe-table--checkbox-range,
 .vxe-table--cell-main-area,
+.vxe-table--cell-item-area,
 .vxe-table--cell-extend-area,
 .vxe-table--cell-active-area,
 .vxe-table--cell-copy-area,
@@ -329,6 +330,7 @@ $btnThemeList: (
 .vxe-table--fixed-right-wrapper {
   .vxe-table--checkbox-range,
   .vxe-table--cell-main-area,
+  .vxe-table--cell-item-area,
   .vxe-table--cell-extend-area,
   .vxe-table--cell-active-area,
   .vxe-table--cell-copy-area,
@@ -340,6 +342,7 @@ $btnThemeList: (
 
 .vxe-table--fixed-left-wrapper {
   .vxe-table--cell-main-area,
+  .vxe-table--cell-item-area,
   .vxe-table--cell-extend-area,
   .vxe-table--cell-active-area {
     &[half="1"] {
@@ -348,13 +351,14 @@ $btnThemeList: (
   }
   .vxe-table--cell-copy-area {
     &[half="1"] {
-      background-size: var(--vxe-ui-table-cell-copy-area-border-width) 12px, 0 12px, 12px var(--vxe-ui-table-cell-copy-area-border-width), 12px var(--vxe-ui-table-cell-copy-area-border-width);
+      background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, 0 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
     }
   }
 }
 
 .vxe-table--fixed-right-wrapper {
   .vxe-table--cell-main-area,
+  .vxe-table--cell-item-area,
   .vxe-table--cell-extend-area,
   .vxe-table--cell-active-area {
     &[half="1"] {
@@ -363,7 +367,7 @@ $btnThemeList: (
   }
   .vxe-table--cell-copy-area {
     &[half="1"] {
-      background-size: 0 12px, var(--vxe-ui-table-cell-copy-area-border-width) 12px, 12px var(--vxe-ui-table-cell-copy-area-border-width), 12px var(--vxe-ui-table-cell-copy-area-border-width);
+      background-size: 0 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
     }
   }
 }
@@ -420,11 +424,11 @@ $btnThemeList: (
 }
 
 .vxe-table--cell-copy-area {
-  background: linear-gradient(0deg, transparent 6px, var(--vxe-ui-table-cell-copy-area-border-color) 6px) repeat-y,
-              linear-gradient(0deg, transparent 50%, var(--vxe-ui-table-cell-copy-area-border-color) 0) repeat-y,
-              linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-copy-area-border-color) 0) repeat-x,
-              linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-copy-area-border-color) 0) repeat-x;
-  background-size: var(--vxe-ui-table-cell-copy-area-border-width) 12px, var(--vxe-ui-table-cell-copy-area-border-width) 12px, 12px var(--vxe-ui-table-cell-copy-area-border-width), 12px var(--vxe-ui-table-cell-copy-area-border-width);
+  background: linear-gradient(0deg, transparent 6px, var(--vxe-ui-table-cell-clip-area-border-color) 6px) repeat-y,
+              linear-gradient(0deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-y,
+              linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x,
+              linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x;
+  background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
   background-position: 0 0, 100% 0, 0 0, 0 100%;
   animation: moveCopyCellBorder .5s infinite linear;
 }
@@ -437,7 +441,7 @@ $btnThemeList: (
 }
 
 .vxe-table--cell-multi-area {
-  & > .vxe-table--cell-main-area {
+  & > .vxe-table--cell-item-area {
     background-color: var(--vxe-ui-table-cell-area-background-color);
   }
 }
@@ -2155,6 +2159,7 @@ $btnThemeList: (
       text-align: left;
       z-index: 4;
       padding: 0 var(--vxe-ui-table-cell-padding-default);
+      pointer-events: none;
     }
     .vxe-cell--valid-error-wrapper {
       display: inline-block;

package/styles/theme/base.scss

@@ -58,10 +58,10 @@
   --vxe-ui-table-cell-main-area-extension-border-color: #fff;
   --vxe-ui-table-cell-main-area-extension-background-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-table-cell-extend-area-border-width: 2px;
-  --vxe-ui-table-cell-copy-area-border-width: 3px;
+  --vxe-ui-table-cell-clip-area-border-width: 3px;
   --vxe-ui-table-cell-active-area-border-width: 2px;
   --vxe-ui-table-cell-active-area-background-color: transparent;
-  --vxe-ui-table-cell-copy-area-border-color: var(--vxe-ui-table-cell-area-border-color);
+  --vxe-ui-table-cell-clip-area-border-color: var(--vxe-ui-table-cell-area-border-color);
   --vxe-ui-table-cell-extend-area-border-color: var(--vxe-ui-table-cell-area-border-color);
   --vxe-ui-table-cell-active-area-border-color: var(--vxe-ui-table-cell-area-border-color);
   --vxe-ui-table-cell-area-background-color: rgba(64,158,255,0.2);