vxe-table 3.7.0-beta.6 → 3.7.0-beta.7

package/packages/menu/src/mixin.js

@@ -249,10 +249,10 @@ export default {
     ctxMenuLinkEvent (evnt, menu) {
       // 如果一级菜单有配置 code 则允许点击，否则不能点击
       if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
-        const ctxMenuMethod = VXETable.menus.get(menu.code)
+        const gMenuOpts = VXETable.menus.get(menu.code)
         const params = Object.assign({ menu, $grid: this.$xegrid, $table: this, $event: evnt }, this.ctxMenuStore.args)
-        if (ctxMenuMethod) {
-          ctxMenuMethod.call(this, params, evnt)
+        if (gMenuOpts && gMenuOpts.menuMethod) {
+          gMenuOpts.menuMethod(params, evnt)
         }
         // 在 v4 中废弃事件 context-menu-click
         if (this.$listeners['context-menu-click']) {

package/packages/select/src/select.js

@@ -241,7 +241,10 @@ export default {
   props: {
     value: null,
     clearable: Boolean,
-    placeholder: String,
+    placeholder: {
+      type: String,
+      default: () => XEUtils.eqNull(GlobalConfig.select.placeholder) ? GlobalConfig.i18n('vxe.base.pleaseSelect') : GlobalConfig.select.placeholder
+    },
     loading: Boolean,
     disabled: Boolean,
     multiple: Boolean,

package/packages/table/src/cell.js

@@ -639,6 +639,7 @@ export const Cell = {
           },
           on: {
             click (evnt) {
+              evnt.stopPropagation()
               $table.triggerSortEvent(evnt, column, 'asc')
             }
           }
@@ -652,6 +653,7 @@ export const Cell = {
           },
           on: {
             click (evnt) {
+              evnt.stopPropagation()
               $table.triggerSortEvent(evnt, column, 'desc')
             }
           }

package/packages/table/src/columnInfo.js

@@ -40,14 +40,14 @@ export class ColumnInfo {
       }
       if (formatter) {
         if (XEUtils.isString(formatter)) {
-          const globalFunc = formats.get(formatter) || XEUtils[formatter]
-          if (!XEUtils.isFunction(globalFunc)) {
-            errLog('vxe.error.notFunc', [formatter])
+          const gFormatOpts = formats.get(formatter) || XEUtils[formatter]
+          if (!gFormatOpts || !XEUtils.isFunction(gFormatOpts.formatMethod)) {
+            errLog('vxe.error.notFormats', [formatter])
           }
         } else if (XEUtils.isArray(formatter)) {
-          const globalFunc = formats.get(formatter[0]) || XEUtils[formatter[0]]
-          if (!XEUtils.isFunction(globalFunc)) {
-            errLog('vxe.error.notFunc', [formatter[0]])
+          const gFormatOpts = formats.get(formatter[0]) || XEUtils[formatter[0]]
+          if (!gFormatOpts || !XEUtils.isFunction(gFormatOpts.formatMethod)) {
+            errLog('vxe.error.notFormats', [formatter[0]])
           }
         }
       }

package/packages/table/src/methods.js

@@ -2049,6 +2049,7 @@ const Methods = {
   },
   updateHeight () {
     this.customHeight = calcHeight(this, 'height')
+    this.customMinHeight = calcHeight(this, 'minHeight')
     this.customMaxHeight = calcHeight(this, 'maxHeight')
   },
   updateStyle () {
@@ -2058,6 +2059,7 @@ const Methods = {
       fullColumnIdData,
       tableColumn,
       customHeight,
+      customMinHeight,
       customMaxHeight,
       border,
       headerHeight,
@@ -2170,15 +2172,22 @@ const Methods = {
         } else if (layout === 'body') {
           const emptyBlockElem = elemStore[`${name}-${layout}-emptyBlock`]
           if (isNodeElement(wrapperElem)) {
+            const bodyMinHeight = fixedType ? ((customMinHeight - headerHeight - footerHeight) - (showFooter ? 0 : scrollbarHeight)) : (customMinHeight - headerHeight - footerHeight)
+            let bodyMaxHeight = 0
             if (customMaxHeight) {
-              wrapperElem.style.maxHeight = `${fixedType ? customMaxHeight - headerHeight - (showFooter ? 0 : scrollbarHeight) : customMaxHeight - headerHeight - footerHeight}px`
-            } else {
-              if (customHeight > 0) {
-                wrapperElem.style.height = `${fixedType ? (customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight) - (showFooter ? 0 : scrollbarHeight) : customHeight - headerHeight - footerHeight}px`
-              } else {
-                wrapperElem.style.height = ''
+              bodyMaxHeight = Math.max(bodyMinHeight, fixedType ? (customMaxHeight - headerHeight - (showFooter ? 0 : scrollbarHeight)) : (customMaxHeight - headerHeight - footerHeight))
+              wrapperElem.style.maxHeight = `${bodyMaxHeight}px`
+            }
+            if (customHeight > 0) {
+              let bodyHeight = fixedType ? ((customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight) - (showFooter ? 0 : scrollbarHeight)) : (customHeight - headerHeight - footerHeight)
+              if (bodyMaxHeight) {
+                bodyHeight = Math.min(bodyMaxHeight, bodyHeight)
               }
+              wrapperElem.style.height = `${Math.max(bodyMinHeight, bodyHeight)}px`
+            } else {
+              wrapperElem.style.height = ''
             }
+            wrapperElem.style.minHeight = `${bodyMinHeight}px`
           }
 
           // 如果是固定列
@@ -3757,7 +3766,10 @@ const Methods = {
       } else {
         this.sort({ field, order })
       }
-      const params = { column, field, property: field, order: column.order, sortList: this.getSortColumns() }
+      const params = { $table: this, $event: evnt, column, field, property: field, order: column.order, sortList: this.getSortColumns(), sortTime: column.sortTime }
+      if (this.mouseConfig && this.mouseOpts.area && this.handleSortEvent) {
+        return this.handleSortEvent(evnt, params)
+      }
       this.emitEvent('sort-change', params, evnt)
     }
   },
@@ -3972,7 +3984,16 @@ const Methods = {
    * @param {Boolean} expanded 是否展开
    */
   setAllRowExpand (expanded) {
-    return this.setRowExpand(this.expandOpts.lazy ? this.tableData : this.tableFullData, expanded)
+    const { treeConfig, treeOpts, tableFullData, tableFullTreeData } = this
+    let expandedRows = []
+    if (treeConfig) {
+      XEUtils.eachTree(tableFullTreeData, (row) => {
+        expandedRows.push(row)
+      }, treeOpts)
+    } else {
+      expandedRows = tableFullData
+    }
+    return this.setRowExpand(expandedRows, expanded)
   },
   handleAsyncRowExpand (row) {
     const rest = this.fullAllDataRowMap.get(row)
@@ -4671,12 +4692,12 @@ const Methods = {
    * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一列编辑状态
    * 如果单元格配置了校验规则，则会进行校验
    */
-  updateStatus (scope, cellValue) {
+  updateStatus (slotParams, cellValue) {
     const customVal = !XEUtils.isUndefined(cellValue)
     return this.$nextTick().then(() => {
       const { $refs, editRules, validStore } = this
-      if (scope && $refs.tableBody && editRules) {
-        const { row, column } = scope
+      if (slotParams && $refs.tableBody && editRules) {
+        const { row, column } = slotParams
         const type = 'change'
         if (this.hasCellRules(type, row, column)) {
           const cell = this.getCell(row, column)
@@ -4843,11 +4864,11 @@ const Methods = {
       }
       const formatParams = { cellValue, row, rowIndex: this.getRowIndex(row), column, columnIndex: this.getColumnIndex(column) }
       if (XEUtils.isString(formatter)) {
-        const globalFunc = formats.get(formatter)
-        cellLabel = globalFunc ? globalFunc(formatParams) : ''
+        const gFormatOpts = formats.get(formatter)
+        cellLabel = gFormatOpts && gFormatOpts.formatMethod ? gFormatOpts.formatMethod(formatParams) : ''
       } else if (XEUtils.isArray(formatter)) {
-        const globalFunc = formats.get(formatter[0])
-        cellLabel = globalFunc ? globalFunc(formatParams, ...formatter.slice(1)) : ''
+        const gFormatOpts = formats.get(formatter[0])
+        cellLabel = gFormatOpts && gFormatOpts.formatMethod ? gFormatOpts.formatMethod(formatParams, ...formatter.slice(1)) : ''
       } else {
         cellLabel = formatter(formatParams)
       }

package/packages/table/src/table.js

@@ -96,6 +96,8 @@ export default {
     data: Array,
     // 表格的高度
     height: [Number, String],
+    // 表格的最小高度
+    minHeight: { type: [Number, String], default: () => GlobalConfig.table.minHeight },
     // 表格的最大高度
     maxHeight: [Number, String],
     // 已废弃，被 column-config.resizable 替换
@@ -1015,11 +1017,13 @@ export default {
       hasTip,
       columnOpts,
       rowOpts,
-      loadingOpts
+      loadingOpts,
+      editRules
     } = this
     const { leftList, rightList } = columnStore
     return h('div', {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
+        [`vaild-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
         'cell--highlight': highlightCell,
         'cell--selected': mouseConfig && mouseOpts.selected,

package/packages/textarea/src/textarea.js

@@ -18,7 +18,10 @@ export default {
     name: String,
     readonly: Boolean,
     disabled: Boolean,
-    placeholder: String,
+    placeholder: {
+      type: String,
+      default: () => XEUtils.eqNull(GlobalConfig.textarea.placeholder) ? GlobalConfig.i18n('vxe.base.pleaseInput') : GlobalConfig.textarea.placeholder
+    },
     maxlength: [String, Number],
     rows: { type: [String, Number], default: 2 },
     cols: { type: [String, Number], default: null },

package/packages/toolbar/src/toolbar.js

@@ -649,10 +649,16 @@ export default {
         if ($xegrid) {
           $xegrid.triggerToolbarBtnEvent(item, evnt)
         } else {
-          const commandMethod = VXETable.commands.get(code)
+          const gCommandOpts = VXETable.commands.get(code)
           const params = { code, button: item, $table: $xetable, $grid: $xegrid, $event: evnt }
-          if (commandMethod) {
-            commandMethod.call(this, params, evnt)
+          if (gCommandOpts) {
+            if (gCommandOpts.commandMethod) {
+              gCommandOpts.commandMethod(params)
+            } else {
+              if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                errLog('vxe.error.notCommands', [code])
+              }
+            }
           }
           this.$emit('button-click', params)
         }
@@ -665,10 +671,16 @@ export default {
         if ($xegrid) {
           $xegrid.triggerToolbarTolEvent(item, evnt)
         } else {
-          const commandMethod = VXETable.commands.get(code)
+          const gCommandOpts = VXETable.commands.get(code)
           const params = { code, tool: item, $xegrid, $table: $xetable, $event: evnt }
-          if (commandMethod) {
-            commandMethod.call(this, params, evnt)
+          if (gCommandOpts) {
+            if (gCommandOpts.commandMethod) {
+              gCommandOpts.commandMethod(params)
+            } else {
+              if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                errLog('vxe.error.notCommands', [code])
+              }
+            }
           }
           this.$emit('tool-click', params)
         }

package/packages/v-x-e-table/index.js

@@ -5,6 +5,7 @@ import { renderer } from './src/renderer'
 import { commands } from './src/commands'
 import { menus } from './src/menus'
 import { formats } from './src/formats'
+import { validators } from './src/validators'
 import { setup } from './src/setup'
 import { UtilTools } from '../tools/utils'
 import { errLog } from '../tools/log'
@@ -98,6 +99,7 @@ export const VXETable = {
   commands,
   formats,
   menus,
+  validators,
   config,
   t,
   _t

package/packages/v-x-e-table/src/commands.js

@@ -1,6 +1,52 @@
-import VXEStore from './store'
+import XEUtils from 'xe-utils'
+import { warnLog } from '../../tools/log'
 
-export const commands = new VXEStore()
+class VXECommandsStore {
+  constructor () {
+    this.store = {}
+  }
+
+  mixin (options) {
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
+    return VXECommandsStore
+  }
+
+  get (name) {
+    return this.store[name]
+  }
+
+  add (name, render) {
+    const conf = this.store[name]
+    // 兼容
+    if (XEUtils.isFunction(render)) {
+      // warnLog('vxe.error.delProp', ['callback', 'commandMethod'])
+      render = {
+        commandMethod: render
+      }
+    }
+
+    // 检测是否覆盖
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      const confKeys = XEUtils.keys(conf)
+      XEUtils.each(render, (item, key) => {
+        if (confKeys.includes(key)) {
+          warnLog('vxe.error.coverProp', [name, key])
+        }
+      })
+    }
+    this.store[name] = conf ? XEUtils.merge(conf, render) : render
+    return VXECommandsStore
+  }
+
+  delete (name) {
+    delete this.store[name]
+    return VXECommandsStore
+  }
+}
+
+export const commands = new VXECommandsStore()
 
 if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
   Object.assign(commands, { _name: 'Commands' })

package/packages/v-x-e-table/src/conf.js

@@ -13,6 +13,7 @@ export default {
     animat: true,
     delayHover: 250,
     autoResize: true,
+    minHeight: 144,
     // keepSource: false,
     // showOverflow: null,
     // showHeaderOverflow: null,
@@ -46,7 +47,9 @@ export default {
     },
     validConfig: {
       showMessage: true,
-      message: 'default'
+      autoClear: true,
+      message: 'inline',
+      msgMode: 'single'
     },
     columnConfig: {
       maxFixedSize: 4

package/packages/v-x-e-table/src/formats.js

@@ -1,6 +1,52 @@
-import VXEStore from './store'
+import XEUtils from 'xe-utils'
+import { warnLog } from '../../tools/log'
 
-export const formats = new VXEStore()
+class VXEFormatsStore {
+  constructor () {
+    this.store = {}
+  }
+
+  mixin (options) {
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
+    return VXEFormatsStore
+  }
+
+  get (name) {
+    return this.store[name]
+  }
+
+  add (name, render) {
+    const conf = this.store[name]
+    // 兼容
+    if (XEUtils.isFunction(render)) {
+      // warnLog('vxe.error.delProp', ['callback', 'formatMethod'])
+      render = {
+        formatMethod: render
+      }
+    }
+
+    // 检测是否覆盖
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      const confKeys = XEUtils.keys(conf)
+      XEUtils.each(render, (item, key) => {
+        if (confKeys.includes(key)) {
+          warnLog('vxe.error.coverProp', [name, key])
+        }
+      })
+    }
+    this.store[name] = conf ? XEUtils.merge(conf, render) : render
+    return VXEFormatsStore
+  }
+
+  delete (name) {
+    delete this.store[name]
+    return VXEFormatsStore
+  }
+}
+
+export const formats = new VXEFormatsStore()
 
 if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
   Object.assign(formats, { _name: 'Formats' })

package/packages/v-x-e-table/src/menus.js

@@ -1,6 +1,52 @@
-import VXEStore from './store'
+import XEUtils from 'xe-utils'
+import { warnLog } from '../../tools/log'
 
-export const menus = new VXEStore()
+class VXEMenusStore {
+  constructor () {
+    this.store = {}
+  }
+
+  mixin (options) {
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
+    return VXEMenusStore
+  }
+
+  get (name) {
+    return this.store[name]
+  }
+
+  add (name, render) {
+    const conf = this.store[name]
+    // 兼容
+    if (XEUtils.isFunction(render)) {
+      // warnLog('vxe.error.delProp', ['callback', 'menuMethod'])
+      render = {
+        menuMethod: render
+      }
+    }
+
+    // 检测是否覆盖
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      const confKeys = XEUtils.keys(conf)
+      XEUtils.each(render, (item, key) => {
+        if (confKeys.includes(key)) {
+          warnLog('vxe.error.coverProp', [name, key])
+        }
+      })
+    }
+    this.store[name] = conf ? XEUtils.merge(conf, render) : render
+    return VXEMenusStore
+  }
+
+  delete (name) {
+    delete this.store[name]
+    return VXEMenusStore
+  }
+}
+
+export const menus = new VXEMenusStore()
 
 if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
   Object.assign(menus, { _name: 'Menus' })

package/packages/v-x-e-table/src/store.js

@@ -9,8 +9,10 @@ class Store {
     this.store = {}
   }
 
-  mixin (map) {
-    Object.assign(this.store, map)
+  mixin (options) {
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
     return Store
   }
 

package/packages/v-x-e-table/src/validators.js

@@ -0,0 +1,7 @@
+import VXEStore from './store'
+
+export const validators = new VXEStore()
+
+if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+  Object.assign(validators, { _name: 'Validators' })
+}

package/packages/validator/src/mixin.js

@@ -1,6 +1,8 @@
 import XEUtils from 'xe-utils'
+import VXETable from '../../v-x-e-table'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { eqEmptyValue, getFuncText } from '../../tools/utils'
+import { warnLog, errLog } from '../../tools/log'
 import DomTools from '../../tools/dom'
 
 /**
@@ -248,10 +250,10 @@ export default {
         if (rules) {
           const cellValue = XEUtils.isUndefined(val) ? XEUtils.get(row, property) : val
           rules.forEach(rule => {
-            const { type, trigger, required } = rule
+            const { type, trigger, required, validator } = rule
             if (validType === 'all' || !trigger || validType === trigger) {
-              if (XEUtils.isFunction(rule.validator)) {
-                const customValid = rule.validator({
+              if (validator) {
+                const validParams = {
                   cellValue,
                   rule,
                   rules,
@@ -261,7 +263,26 @@ export default {
                   columnIndex: this.getColumnIndex(column),
                   field: column.property,
                   $table: this
-                })
+                }
+                let customValid
+                if (XEUtils.isString(validator)) {
+                  const gvItem = VXETable.validators.get(validator)
+                  if (gvItem) {
+                    if (gvItem.cellValidatorMethod) {
+                      customValid = gvItem.cellValidatorMethod(validParams)
+                    } else {
+                      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                        warnLog('vxe.error.notValidators', [validator])
+                      }
+                    }
+                  } else {
+                    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                      errLog('vxe.error.notValidators', [validator])
+                    }
+                  }
+                } else {
+                  customValid = validator(validParams)
+                }
                 if (customValid) {
                   if (XEUtils.isError(customValid)) {
                     this.validRuleErr = true

package/styles/table.scss

@@ -1230,8 +1230,8 @@
         position: relative;
         &:before {
           content: "";
-          top: $vxe-table-cell-dirty-width;
-          left: $vxe-table-cell-dirty-width;
+          top: calc($vxe-table-cell-dirty-width * -1);
+          left: calc($vxe-table-cell-dirty-width * -1);
           position: absolute;
           border-width: $vxe-table-cell-dirty-width;
           border-style: solid;

package/types/form.d.ts

@@ -83,18 +83,7 @@ export interface FormRule {
    * 使用自定义校验函数，接收一个 Promise
    * @param params 参数
    */
-  validator?(params: {
-    $form: Form,
-    itemValue: any,
-    rule: FormRule;
-    rules: FormRule[];
-    data: any;
-    field: string
-    /**
-     * @deprecated
-     */
-    property: string
-  }): void | Error | Promise<any>
+  validator?(params: FormRuleValidatorParams): void | Error | Promise<any>
   /**
    * 提示消息
    */
@@ -103,6 +92,19 @@ export interface FormRule {
   maxWidth?: number;
 }
 
+export interface FormRuleValidatorParams {
+  $form: Form,
+  itemValue: any,
+  rule: FormRule;
+  rules: FormRule[];
+  data: any;
+  field: string
+  /**
+   * @deprecated
+   */
+  property: string
+}
+
 /**
  * 校验规则配置项
  */

package/types/table.d.ts

@@ -25,6 +25,10 @@ export declare class Table extends VXETableComponent {
    * 表格的高度
    */
   height?: number | string;
+  /**
+   * 表格的最小高度
+   */
+  minHeight?: number | string;
   /**
    * 表格的最大高度
    */

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

@@ -1,21 +1,29 @@
 import { ToolbarButtonConfig } from '../toolbar'
-import { GridRenderParams } from './renderer'
+import { Table } from '../table'
 
 /* eslint-disable no-use-before-define */
 
-declare function commandsFunc(params: CommandsParams, ...args: any[]): any;
+export namespace VxeGlobalCommandsHandles {
+  export interface CommandsOptions {
+    commandMethod?: (params: CommandMethodParams, ...args: any[]) => void
+  }
+  export interface CommandMethodParams {
+    $table: Table;
+    code: string;
+    button?: ToolbarButtonConfig;
+  }
+}
 
 /**
- * 全局指令
+ * 全局格式化
  */
-export class VxeGlobalCommands {
-  mixin(map: { [type: string]: typeof commandsFunc }): VxeGlobalCommands;
-  get(type: string): typeof commandsFunc;
-  add(type: string, callback: typeof commandsFunc): VxeGlobalCommands;
-  delete(type: string): VxeGlobalCommands;
-}
-
-export interface CommandsParams extends GridRenderParams {
-  code: string;
-  button?: ToolbarButtonConfig;
+export interface VxeGlobalCommands {
+  mixin(opts: {
+    [name: string]: VxeGlobalCommandsHandles.CommandsOptions | ((params: VxeGlobalCommandsHandles.CommandMethodParams, ...args: any[]) => void)
+  }): VxeGlobalCommands
+  has(name: string): boolean
+  get(name: string): VxeGlobalCommandsHandles.CommandsOptions
+  add(name: string, options: VxeGlobalCommandsHandles.CommandsOptions | ((params: VxeGlobalCommandsHandles.CommandMethodParams, ...args: any[]) => void)): VxeGlobalCommands
+  delete(name: string): void
+  forEach(callback: (options: VxeGlobalCommandsHandles.CommandsOptions, name: string) => void): void
 }