vxe-table 4.4.4 → 4.4.6-beta.0

package/packages/toolbar/src/toolbar.ts

@@ -158,18 +158,7 @@ export default defineComponent({
     }
 
     const resetCustomEvent = (evnt: Event) => {
-      const { columns } = reactData
-      const { computeCustomOpts: computeTableCustomOpts } = $xetable.getComputeMaps()
-      const tableCustomOpts = computeTableCustomOpts.value
-      const { checkMethod } = tableCustomOpts
-      XEUtils.eachTree(columns, (column) => {
-        if (!checkMethod || checkMethod({ column })) {
-          column.visible = column.defaultVisible
-          column.halfVisible = false
-        }
-        column.resizeWidth = 0
-      })
-      $xetable.saveCustomResizable(true)
+      $xetable.resetColumn(true)
       closeCustom()
       emitCustomEvent('reset', evnt)
     }
@@ -384,10 +373,12 @@ export default defineComponent({
           if (item.visible !== false) {
             const compConf = buttonRender ? VXETable.renderer.get(buttonRender.name) : null
             if (buttonRender && compConf && compConf.renderToolbarButton) {
+              const toolbarButtonClassName = compConf.toolbarButtonClassName
+              const params = { $grid: $xegrid, $table: $xetable, button: item }
               btnVNs.push(
                 h('span', {
-                  class: 'vxe-button--item'
-                }, getSlotVNs(compConf.renderToolbarButton(buttonRender, { $grid: $xegrid, $table: $xetable, button: item })))
+                  class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
+                }, getSlotVNs(compConf.renderToolbarButton(buttonRender, params)))
               )
             } else {
               btnVNs.push(
@@ -431,10 +422,12 @@ export default defineComponent({
           if (item.visible !== false) {
             const compConf = toolRender ? VXETable.renderer.get(toolRender.name) : null
             if (toolRender && compConf && compConf.renderToolbarTool) {
+              const toolbarToolClassName = compConf.toolbarToolClassName
+              const params = { $grid: $xegrid, $table: $xetable, tool: item }
               btnVNs.push(
                 h('span', {
-                  class: 'vxe-tool--item'
-                }, getSlotVNs(compConf.renderToolbarTool(toolRender, { $grid: $xegrid, $table: $xetable, tool: item })))
+                  class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
+                }, getSlotVNs(compConf.renderToolbarTool(toolRender, params)))
               )
             } else {
               btnVNs.push(

package/packages/validator/src/hook.ts

@@ -44,7 +44,6 @@ const tableValidatorMethodKeys: (keyof TableValidatorMethods)[] = ['fullValidate
 const validatorHook: VxeGlobalHooksHandles.HookOptions = {
   setupTable ($xetable) {
     const { props, reactData, internalData } = $xetable
-    const { refValidTooltip } = $xetable.getRefMaps()
     const { computeValidOpts, computeTreeOpts, computeEditOpts } = $xetable.getComputeMaps()
 
     let validatorMethods = {} as TableValidatorMethods
@@ -221,7 +220,6 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
       },
       clearValidate () {
         const { validStore } = reactData
-        const validTip = refValidTooltip.value
         Object.assign(validStore, {
           visible: false,
           row: null,
@@ -229,9 +227,6 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
           content: '',
           rule: null
         })
-        if (validTip && validTip.reactData.visible) {
-          validTip.close()
-        }
         return nextTick()
       }
     }
@@ -276,13 +271,13 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
        */
       validCellRules (validType, row, column, val) {
         const { editRules } = props
-        const { property } = column
+        const { field } = column
         const errorRules: Rule[] = []
         const syncVailds: Promise<any>[] = []
-        if (property && editRules) {
-          const rules = XEUtils.get(editRules, property)
+        if (field && editRules) {
+          const rules = XEUtils.get(editRules, field)
           if (rules) {
-            const cellValue = XEUtils.isUndefined(val) ? XEUtils.get(row, property) : val
+            const cellValue = XEUtils.isUndefined(val) ? XEUtils.get(row, field) : val
             rules.forEach((rule) => {
               const { type, trigger, required } = rule
               if (validType === 'all' || !trigger || validType === trigger) {
@@ -382,11 +377,8 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
        * 弹出校验错误提示
        */
       showValidTooltip (params) {
-        const { height } = props
-        const { tableData, validStore } = reactData
-        const validOpts = computeValidOpts.value
-        const { rule, row, column, cell } = params
-        const validTip = refValidTooltip.value
+        const { validStore } = reactData
+        const { rule, row, column } = params
         const content = rule.content
         return nextTick().then(() => {
           Object.assign(validStore, {
@@ -397,9 +389,6 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
             visible: true
           })
           $xetable.dispatchEvent('valid-error', params, null)
-          if (validTip && (validOpts.message === 'tooltip' || (validOpts.message === 'default' && !height && tableData.length < 2))) {
-            return validTip.open(cell, content)
-          }
         })
       }
     }

package/styles/cssvar.scss

@@ -135,8 +135,6 @@
 
   /*validate*/
   --vxe-table-validate-error-color: #{$vxe-table-validate-error-color};
-  --vxe-table-validate-tooltip-error-color: #{$vxe-table-validate-tooltip-error-color};
-  --vxe-table-validate-tooltip-error-background-color: #{$vxe-table-validate-tooltip-error-background-color};
 
   /*grid*/
   --vxe-grid-maximize-background-color: #{$vxe-grid-maximize-background-color};

package/styles/table.scss

@@ -1177,8 +1177,9 @@
       .vxe-cell--valid {
         width: 320px;
         position: absolute;
-        bottom: calc(100% + 4px);
         left: 50%;
+        font-size: 12px;
+        line-height: 1.2em;
         transform: translateX(-50%);
         text-align: center;
         pointer-events: none;
@@ -1186,9 +1187,7 @@
         .vxe-cell--valid-msg {
           display: inline-block;
           border-radius: var(--vxe-border-radius);
-          padding: 8px 12px;
-          color: var(--vxe-table-validate-tooltip-error-color);
-          background-color: var(--vxe-table-validate-tooltip-error-background-color);
+          color: var(--vxe-table-validate-error-color);
           pointer-events: auto;
         }
       }
@@ -1206,10 +1205,16 @@
     }
   }
   .vxe-body--row {
-    &:first-child {
+    &:last-child {
       .vxe-cell--valid {
-        bottom: auto;
-        top: calc(100% + 4px);
+        top: -1.3em;
+      }
+    }
+    &:first-child {
+      &:last-child {
+        .vxe-cell--valid {
+          top: calc(100% - 1.3em);
+        }
       }
     }
   }

package/styles/variable.scss

@@ -132,8 +132,6 @@ $vxe-loading-z-index: 999 !default;
 
 /*validate*/
 $vxe-table-validate-error-color: #f56c6c !default;
-$vxe-table-validate-tooltip-error-color: #fff !default;
-$vxe-table-validate-tooltip-error-background-color: $vxe-table-validate-error-color !default;
 
 /*grid*/
 $vxe-grid-maximize-background-color: #fff !default;

package/types/form.d.ts

@@ -1,4 +1,4 @@
-import { RenderFunction, SetupContext, ComponentPublicInstance, Ref, ComputedRef, VNode } from 'vue'
+import { RenderFunction, SetupContext, ComponentPublicInstance, Ref, ComputedRef } from 'vue'
 import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf, SlotVNodeType } from './component'
 import { VxeFormItemProps, VxeFormItemPropTypes } from './form-item'
 import { VxeGridConstructor } from './grid'
@@ -148,17 +148,17 @@ export interface FormMethods {
    * 对表单进行校验，参数为一个回调函数。该回调函数会在校验结束后被调用 callback(errMap)。若不传入回调函数，则会返回一个 promise
    * @param callback 回调函数
    */
-  validate(callback?: (errMap?: VxeFormDefines.ValidateErrorMapParams) => void): Promise<any>
+  validate(callback?: (errMap?: VxeFormDefines.ValidateErrorMapParams) => void): Promise<VxeFormDefines.ValidateErrorMapParams>
   /**
    * 对表单指定项进行校验，参数为一个回调函数。该回调函数会在校验结束后被调用 callback(errMap)。若不传入回调函数，则会返回一个 promise
    * @param callback 回调函数
    */
-  validateField(field: VxeFormItemPropTypes.Field | VxeFormDefines.ItemInfo, callback?: (errMap?: VxeFormDefines.ValidateErrorMapParams) => void): Promise<any>
+  validateField(field: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[], callback?: (errMap?: VxeFormDefines.ValidateErrorMapParams) => void): Promise<VxeFormDefines.ValidateErrorMapParams>
   /**
    * 手动清除校验状态，如果指定 field 则清除指定的项，否则清除整个表单
    * @param field 字段名
    */
-  clearValidate(field?: VxeFormItemPropTypes.Field | VxeFormDefines.ItemInfo): Promise<any>
+  clearValidate(field?: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[]): Promise<any>
   /**
    * 更新项状态
    * 当使用自定义渲染时可能会用到
@@ -262,7 +262,18 @@ export namespace VxeFormDefines {
      * 使用自定义校验函数，接收一个 Promise
      * @param params 参数
      */
-    validator?(params: ValidateErrorParams): void | Error | Promise<any>
+    validator?(params: {
+      $form: VxeFormConstructor,
+      itemValue: any,
+      rule: VxeFormDefines.FormRule
+      rules: VxeFormDefines.FormRule[]
+      data: any
+      field: string,
+      /**
+       * @deprecated
+       */
+      property: string
+    }): void | Error | Promise<any>
     /**
      * 提示消息
      */
@@ -275,11 +286,9 @@ export namespace VxeFormDefines {
     message?: string
   }
 
-  interface ValidateErrorParams {
+  export interface ValidateErrorParams {
     $form: VxeFormConstructor,
-    itemValue: any,
     rule: VxeFormDefines.FormRule
-    rules: VxeFormDefines.FormRule[]
     data: any
     field: string
     /**

package/types/table.d.ts

@@ -40,7 +40,6 @@ export interface VxeTableConstructor<D = any> extends VxeComponentBase, VxeTable
 export interface TablePrivateRef {
   refElem: Ref<HTMLDivElement>
   refTooltip: Ref<VxeTooltipInstance>
-  refValidTooltip: Ref<VxeTooltipInstance>
   refTableFilter: Ref<ComponentPublicInstance>
   refTableMenu: Ref<VxeMenuPanelInstance>
   refTableHeader: Ref<ComponentPublicInstance>
@@ -1322,6 +1321,7 @@ export namespace VxeTablePropTypes {
     keyField?: string
     isCurrent?: boolean
     isHover?: boolean
+    resizable?: boolean
     height?: number
   }
   export interface RowOpts extends RowConfig { }

package/types/v-x-e-table/renderer.d.ts

@@ -17,36 +17,38 @@ export interface DefineRendererOption<T> {
   className?: string
 
   // 筛选渲染
-  filterClassName?: string | ((params: VxeGlobalRendererHandles.RenderFilterParams) => string | VNodeClassName)
+  filterClassName?: string | ((params: VxeGlobalRendererHandles.RenderFilterParams<any>) => string | VNodeClassName)
   showFilterFooter?: boolean
-  renderFilter?(renderOpts: VxeGlobalRendererHandles.RenderFilterOptions, params: VxeGlobalRendererHandles.RenderFilterParams): T
-  filterMethod?(params: VxeGlobalRendererHandles.FilterMethodParams): boolean
-  filterRemoteMethod?(params: VxeGlobalRendererHandles.FilterRemoteMethod): boolean
-  filterResetMethod?(params: VxeGlobalRendererHandles.FilterResetMethodParams): void
-  filterRecoverMethod?(params: VxeGlobalRendererHandles.FilterRecoverMethodParams): void
+  renderFilter?(renderOpts: VxeGlobalRendererHandles.RenderFilterOptions, params: VxeGlobalRendererHandles.RenderFilterParams<any>): T
+  filterMethod?(params: VxeGlobalRendererHandles.FilterMethodParams<any>): boolean
+  filterRemoteMethod?(params: VxeGlobalRendererHandles.FilterRemoteMethod<any>): boolean
+  filterResetMethod?(params: VxeGlobalRendererHandles.FilterResetMethodParams<any>): void
+  filterRecoverMethod?(params: VxeGlobalRendererHandles.FilterRecoverMethodParams<any>): void
   // 默认行为
-  defaultFilterMethod?(params: VxeGlobalRendererHandles.FilterMethodParams): boolean
+  defaultFilterMethod?(params: VxeGlobalRendererHandles.FilterMethodParams<any>): boolean
 
   // 单元格渲染
-  cellClassName?: string | ((params: VxeGlobalRendererHandles.RenderDefaultParams) => string | VNodeClassName)
-  cellStyle?: VNodeStyle | ((params: VxeGlobalRendererHandles.RenderDefaultParams) => VNodeStyle)
-  renderHeader?(renderOpts: VxeGlobalRendererHandles.RenderHeaderOptions, params: VxeGlobalRendererHandles.RenderHeaderParams): T
-  renderDefault?(renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions, params: VxeGlobalRendererHandles.RenderDefaultParams): T
-  renderFooter?(renderOpts: VxeGlobalRendererHandles.RenderFooterOptions, params: VxeGlobalRendererHandles.RenderFooterParams): T
-  exportMethod?(params: VxeGlobalRendererHandles.ExportMethodParams): string
-  footerExportMethod?(params: VxeGlobalRendererHandles.FooterExportMethodParams): string
+  cellClassName?: string | ((params: VxeGlobalRendererHandles.RenderDefaultParams<any>) => string | VNodeClassName)
+  cellStyle?: VNodeStyle | ((params: VxeGlobalRendererHandles.RenderDefaultParams<any>) => VNodeStyle)
+  renderHeader?(renderOpts: VxeGlobalRendererHandles.RenderHeaderOptions, params: VxeGlobalRendererHandles.RenderHeaderParams<any>): T
+  renderDefault?(renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions, params: VxeGlobalRendererHandles.RenderDefaultParams<any>): T
+  renderFooter?(renderOpts: VxeGlobalRendererHandles.RenderFooterOptions, params: VxeGlobalRendererHandles.RenderFooterParams<any>): T
+  exportMethod?(params: VxeGlobalRendererHandles.ExportMethodParams<any>): string
+  footerExportMethod?(params: VxeGlobalRendererHandles.FooterExportMethodParams<any>): string
 
   // 编辑渲染
-  autofocus?: string | ((params: VxeGlobalRendererHandles.RenderEditParams | VxeGlobalRendererHandles.RenderCellParams<any>) => HTMLElement | null)
+  autofocus?: string | ((params: VxeGlobalRendererHandles.RenderEditParams<any> | VxeGlobalRendererHandles.RenderCellParams<any>) => HTMLElement | null)
   autoselect?: boolean
-  renderEdit?(renderOpts: VxeGlobalRendererHandles.RenderEditOptions, params: VxeGlobalRendererHandles.RenderEditParams): T
-  renderCell?(renderOpts: VxeGlobalRendererHandles.RenderCellOptions, params: VxeGlobalRendererHandles.RenderCellParams<any>): T
+  renderEdit?(renderOpts: VxeGlobalRendererHandles.RenderEditOptions<any>, params: VxeGlobalRendererHandles.RenderEditParams<any>): T
+  renderCell?(renderOpts: VxeGlobalRendererHandles.RenderCellOptions<any>, params: VxeGlobalRendererHandles.RenderCellParams<any>): T
 
   // 内容渲染
-  renderExpand?(renderOpts: VxeGlobalRendererHandles.RenderExpandOptions, params: VxeGlobalRendererHandles.RenderExpandParams): T
+  renderExpand?(renderOpts: VxeGlobalRendererHandles.RenderExpandOptions, params: VxeGlobalRendererHandles.RenderExpandParams<any>): T
 
   // 工具栏-按钮渲染
+  toolbarButtonClassName?: string | ((params: VxeGlobalRendererHandles.RenderButtonParams<any>) => string | VNodeClassName)
   renderToolbarButton?(renderOpts: VxeGlobalRendererHandles.RenderButtonOptions, params: VxeGlobalRendererHandles.RenderButtonParams<any>): T
+  toolbarToolClassName?: string | ((params: VxeGlobalRendererHandles.RenderToolParams<any>) => string | VNodeClassName)
   renderToolbarTool?(renderOpts: VxeGlobalRendererHandles.RenderToolOptions, params: VxeGlobalRendererHandles.RenderToolParams<any>): T
 
   // 表单-项渲染
@@ -119,7 +121,7 @@ export namespace VxeGlobalRendererHandles {
   }
 
   export type RenderDefaultOptions<D = VxeTableDataRow> = VxeColumnPropTypes.EditRender<D>
-  export type RenderDefaultParams = RenderEditParams
+  export type RenderDefaultParams<D = VxeTableDataRow> = RenderEditParams<D>
 
   export interface RenderFooterOptions extends VxeGlobalRendererHandles.RenderOptions { }
 
@@ -147,7 +149,7 @@ export namespace VxeGlobalRendererHandles {
     options: VxeTablePropTypes.ExportHandleOptions
   }
 
-  export type RenderEditOptions = VxeColumnPropTypes.EditRender
+  export type RenderEditOptions<D = VxeTableDataRow> = VxeColumnPropTypes.EditRender<D>
 
   export interface RenderEditParams<D = VxeTableDataRow> {
     $table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>