vxe-table 4.5.0-beta.11 → 4.5.0-beta.13

package/packages/locale/lang/en-US.ts

@@ -1,5 +1,9 @@
 export default {
   vxe: {
+    base: {
+      pleaseInput: 'Please input',
+      pleaseSelect: 'Select'
+    },
     loading: {
       text: 'Loading...'
     },

package/packages/locale/lang/es-ES.ts

@@ -1,5 +1,9 @@
 export default {
   vxe: {
+    base: {
+      pleaseInput: 'Please input',
+      pleaseSelect: 'Select'
+    },
     loading: {
       text: 'Cargando...'
     },
@@ -19,6 +23,7 @@ export default {
       errProp: 'Parámetro no compatible "{0}", posiblemente "{1}".',
       colRepet: 'columna.{0}="{0}" está duplicado, lo que puede hacer que algunas funciones sean inutilizables',
       notFunc: 'El método "{0}" no existe.',
+      notValidators: 'Global validators "{0}" no existe.',
       notSlot: 'La ranura "{0}" no existe.',
       noTree: 'La estructura de árbol no soporta "{0}".',
       notProp: 'Parámetros no compatibles "{0}"',

package/packages/locale/lang/ja-JP.ts

@@ -1,5 +1,9 @@
 export default {
   vxe: {
+    base: {
+      pleaseInput: 'Please input',
+      pleaseSelect: 'Select'
+    },
     loading: {
       text: 'Loading...'
     },
@@ -19,6 +23,7 @@ export default {
       errProp: 'サポートされていないパラメーター "{0}"，"{1}" の可能性があります',
       colRepet: 'column.{0}="{0}" が重複しているため、機能が使えなくなることがあります。',
       notFunc: 'method "{0}" はありません',
+      notValidators: 'Global validators "{0}" no existe.',
       notSlot: 'slot "{0}" はありません',
       noTree: 'Tree structureは "{0}" をサポートしていません',
       notProp: 'サポートされていないパラメータ "{0}"',

package/packages/locale/lang/zh-CN.ts

@@ -1,5 +1,9 @@
 export default {
   vxe: {
+    base: {
+      pleaseInput: '请输入',
+      pleaseSelect: '请选择'
+    },
     loading: {
       text: '加载中...'
     },
@@ -19,6 +23,7 @@ export default {
       errProp: '不支持的参数 "{0}"，可能为 "{1}"',
       colRepet: 'column.{0}="{1}" 重复了，这可能会导致某些功能无法使用',
       notFunc: '方法 "{0}" 不存在',
+      notValidators: '全局校验 "{0}" 不存在',
       notSlot: '插槽 "{0}" 不存在',
       noTree: '树结构不支持 "{0}"',
       notProp: '不支持的参数 "{0}"',

package/packages/locale/lang/zh-TC.ts

@@ -1,5 +1,9 @@
 export default {
   vxe: {
+    base: {
+      pleaseInput: '请输入',
+      pleaseSelect: '请选择'
+    },
     loading: {
       text: '加載中...'
     },
@@ -19,6 +23,7 @@ export default {
       errProp: '不支持的參數 "{0}"，可能為 "{1}"',
       colRepet: 'column.{0}="{1}" 重複了，這可能會導致某些功能無法使用',
       notFunc: '方法 "{0}" 不存在',
+      notValidators: '全局校验 "{0}" 不存在',
       notSlot: '插槽 "{0}" 不存在',
       noTree: '樹狀結構不支援 {0}',
       notProp: '不支持的參數 "{0}"',

package/packages/menu/src/hooks.ts

@@ -279,10 +279,10 @@ const tableMenuHook: VxeGlobalHooksHandles.HookOptions = {
       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({}, internalData._currMenuParams, { menu, $table: $xetable, $grid: $xetable.xegrid, $event: evnt })
-          if (ctxMenuMethod) {
-            ctxMenuMethod(params, evnt)
+          if (gMenuOpts && gMenuOpts.menuMethod) {
+            gMenuOpts.menuMethod(params, evnt)
           }
           $xetable.dispatchEvent('menu-click', params, evnt)
           menuMethods.closeMenu()

package/packages/select/src/select.ts

@@ -23,7 +23,10 @@ export default defineComponent({
   props: {
     modelValue: null,
     clearable: Boolean as PropType<VxeSelectPropTypes.Clearable>,
-    placeholder: String as PropType<VxeSelectPropTypes.Placeholder>,
+    placeholder: {
+      type: String as PropType<VxeSelectPropTypes.Placeholder>,
+      default: () => XEUtils.eqNull(GlobalConfig.select.placeholder) ? GlobalConfig.i18n('vxe.base.pleaseSelect') : GlobalConfig.select.placeholder
+    },
     loading: Boolean as PropType<VxeSelectPropTypes.Loading>,
     disabled: Boolean as PropType<VxeSelectPropTypes.Disabled>,
     multiple: Boolean as PropType<VxeSelectPropTypes.Multiple>,

package/packages/table/src/body.ts

@@ -31,7 +31,7 @@ export default defineComponent({
     const xesize = inject('xesize', null as ComputedRef<SizeType> | null)
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xetable
-    const { refTableHeader, refTableBody, refTableFooter, refTableLeftBody, refTableRightBody } = $xetable.getRefMaps()
+    const { refTableHeader, refTableBody, refTableFooter, refTableLeftBody, refTableRightBody, refValidTooltip } = $xetable.getRefMaps()
     const { computeEditOpts, computeMouseOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeValidOpts, computeRowOpts, computeColumnOpts } = $xetable.getComputeMaps()
 
     const refElem = ref() as Ref<XEBodyScrollElement>
@@ -123,7 +123,7 @@ export default defineComponent({
      * 渲染列
      */
     const renderColumn = (seq: number | string, rowid: string, fixedType: any, rowLevel: number, row: any, rowIndex: number, $rowIndex: number, _rowIndex: number, column: any, $columnIndex: number, columns: any, items: any[]) => {
-      const { columnKey, showOverflow: allColumnOverflow, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig } = tableProps
+      const { columnKey, height, showOverflow: allColumnOverflow, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig } = tableProps
       const { tableData, overflowX, scrollYLoad, currentColumn, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
       const { afterFullData } = tableInternalData
       const validOpts = computeValidOpts.value
@@ -155,7 +155,7 @@ export default defineComponent({
       const tdOns: any = {}
       const cellAlign = align || allAlign
       const errorValidItem = validErrorMaps[`${rowid}:${column.id}`]
-      const showValidTip = editRules && validOpts.showMessage
+      const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
       const attrs: any = { colid: column.id }
       const params: VxeTableDefines.CellRenderBodyParams = { $table: $xetable, $grid: $xetable.xegrid, seq, rowid, row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items }
       // 虚拟滚动不支持动态高度
@@ -508,6 +508,7 @@ export default defineComponent({
       const tableFooter = refTableFooter.value
       const leftBody = refTableLeftBody.value
       const rightBody = refTableRightBody.value
+      const validTip = refValidTooltip.value
       const scrollBodyElem = refElem.value
       const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
       const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
@@ -558,6 +559,9 @@ export default defineComponent({
       if (scrollYLoad && isRollY) {
         $xetable.triggerScrollYEvent(evnt)
       }
+      if (isRollX && validTip && validTip.reactData.visible) {
+        validTip.updatePlacement()
+      }
       $xetable.dispatchEvent('scroll', {
         type: renderType,
         fixed: fixedType,

package/packages/table/src/table.ts

@@ -309,6 +309,7 @@ export default defineComponent({
     const refElem = ref() as Ref<HTMLDivElement>
     const refTooltip = ref() as Ref<VxeTooltipInstance>
     const refCommTooltip = ref() as Ref<VxeTooltipInstance>
+    const refValidTooltip = ref() as Ref<VxeTooltipInstance>
     const refTableFilter = ref() as Ref<ComponentPublicInstance>
     const refTableMenu = ref() as Ref<VxeMenuPanelInstance>
 
@@ -394,6 +395,11 @@ export default defineComponent({
       }
     })
 
+    const computeValidTipOpts = computed(() => {
+      const tooltipOpts = computeTooltipOpts.value
+      return Object.assign({ isArrow: false }, tooltipOpts)
+    })
+
     const computeEditOpts = computed(() => {
       return Object.assign({}, GlobalConfig.table.editConfig, props.editConfig) as VxeTablePropTypes.EditOpts
     })
@@ -560,6 +566,7 @@ export default defineComponent({
     const refMaps: VxeTablePrivateRef = {
       refElem,
       refTooltip,
+      refValidTooltip,
       refTableFilter,
       refTableMenu,
       refTableHeader,
@@ -4162,14 +4169,14 @@ export default defineComponent({
        * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一列编辑状态
        * 如果单元格配置了校验规则，则会进行校验
        */
-      updateStatus (scope, cellValue) {
+      updateStatus (slotParams, cellValue) {
         const customVal = !XEUtils.isUndefined(cellValue)
         return nextTick().then(() => {
           const { editRules } = props
           const { validStore } = reactData
           const tableBody = refTableBody.value
-          if (scope && tableBody && editRules) {
-            const { row, column } = scope
+          if (slotParams && tableBody && editRules) {
+            const { row, column } = slotParams
             const type = 'change'
             if ($xetable.hasCellRules) {
               if ($xetable.hasCellRules(type, row, column)) {
@@ -4298,10 +4305,12 @@ export default defineComponent({
      */
     const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
       const { editStore, ctxMenuStore, filterStore } = reactData
-      const { mouseConfig } = props
+      const { mouseConfig, editRules } = props
       const el = refElem.value
       const editOpts = computeEditOpts.value
+      const validOpts = computeValidOpts.value
       const { actived } = editStore
+      const $validTooltip = refValidTooltip.value
       const tableFilter = refTableFilter.value
       const tableMenu = refTableMenu.value
       if (tableFilter) {
@@ -4321,7 +4330,9 @@ export default defineComponent({
           // 如果是激活状态，点击了单元格之外
           const cell = actived.args.cell
           if ((!cell || !getEventTargetNode(evnt, cell).flag)) {
-            if (!internalData._lastCallTime || internalData._lastCallTime + 50 < Date.now()) {
+            if ($validTooltip && getEventTargetNode(evnt, $validTooltip.$el as HTMLDivElement).flag) {
+              // 如果是激活状态，且点击了校验提示框
+            } else if (!internalData._lastCallTime || internalData._lastCallTime + 50 < Date.now()) {
               // 如果是激活状态，点击了单元格之外
               if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
                 // 如果手动调用了激活单元格，避免触发源被移除后导致重复关闭
@@ -4382,8 +4393,13 @@ export default defineComponent({
           $xetable.closeMenu()
         }
       }
+      const isActivated = getEventTargetNode(evnt, $xegrid ? $xegrid.getRefMaps().refElem.value : el).flag
+      // 如果存在校验，点击了表格之外则清除
+      if (!isActivated && editRules && validOpts.autoClear) {
+        reactData.validErrorMaps = {}
+      }
       // 最后激活的表格
-      internalData.isActivated = getEventTargetNode(evnt, $xegrid ? $xegrid.getRefMaps().refElem.value : el).flag
+      internalData.isActivated = isActivated
     }
 
     /**
@@ -6310,23 +6326,26 @@ export default defineComponent({
     })
 
     const renderVN = () => {
-      const { loading, stripe, showHeader, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig } = props
+      const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
       const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore } = reactData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tipConfig = computeTipConfig.value
+      const validOpts = computeValidOpts.value
       const treeOpts = computeTreeOpts.value
       const rowOpts = computeRowOpts.value
       const columnOpts = computeColumnOpts.value
       const vSize = computeSize.value
       const tableBorder = computeTableBorder.value
       const mouseOpts = computeMouseOpts.value
+      const validTipOpts = computeValidTipOpts.value
       const loadingOpts = computeLoadingOpts.value
       const isMenu = computeIsMenu.value
       return h('div', {
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
           [`size--${vSize}`]: vSize,
+          [`vaild-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
           'cell--highlight': highlightCell,
           'cell--selected': mouseConfig && mouseOpts.selected,
@@ -6475,6 +6494,14 @@ export default defineComponent({
           isArrow: false,
           enterable: false
         }) : createCommentVNode(),
+        /**
+         * 校验提示
+         */
+        hasUseTooltip && props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
+          ref: refValidTooltip,
+          class: 'vxe-table--valid-error',
+          ...(validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : {})
+        }) : createCommentVNode(),
         /**
          * 工具提示
          */

package/packages/textarea/src/textarea.ts

@@ -17,7 +17,10 @@ export default defineComponent({
     name: String as PropType<VxeTextareaPropTypes.Name>,
     readonly: Boolean as PropType<VxeTextareaPropTypes.Readonly>,
     disabled: Boolean as PropType<VxeTextareaPropTypes.Disabled>,
-    placeholder: String as PropType<VxeTextareaPropTypes.Placeholder>,
+    placeholder: {
+      type: String as PropType<VxeTextareaPropTypes.Placeholder>,
+      default: () => XEUtils.eqNull(GlobalConfig.textarea.placeholder) ? GlobalConfig.i18n('vxe.base.pleaseInput') : GlobalConfig.textarea.placeholder
+    },
     maxlength: [String, Number] as PropType<VxeTextareaPropTypes.Maxlength>,
     rows: { type: [String, Number] as PropType<VxeTextareaPropTypes.Rows>, default: 2 },
     cols: { type: [String, Number] as PropType<VxeTextareaPropTypes.Cols>, default: null },

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

@@ -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 { hooks } from './src/hooks'
 import { setup } from './src/setup'
 import { getLastZIndex, nextZIndex } from '../tools/utils'
@@ -83,6 +84,7 @@ export const VXETable = {
   renderer,
   commands,
   formats,
+  validators,
   menus,
   hooks,
   config,
@@ -96,6 +98,7 @@ export * from './src/renderer'
 export * from './src/commands'
 export * from './src/menus'
 export * from './src/formats'
+export * from './src/validators'
 export * from './src/hooks'
 export * from './src/setup'
 

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

@@ -47,7 +47,10 @@ const GlobalConfig: VXETableGlobalConfig = {
       enterable: true
     },
     validConfig: {
-      showMessage: true
+      showMessage: true,
+      autoClear: true,
+      message: 'default',
+      msgMode: 'single'
     },
     columnConfig: {
       maxFixedSize: 4

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

@@ -1,8 +1,58 @@
-import VXEStore from './store'
+import XEUtils from 'xe-utils'
+import { warnLog } from '../../tools/log'
 
 import { VxeGlobalMenus } from '../../../types/v-x-e-table'
 
-export const menus = new VXEStore() as VxeGlobalMenus
+class VXEMenusStore {
+  private store: any = {}
+
+  mixin (options: any): VXEMenusStore {
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
+    return this
+  }
+
+  has (name: string): boolean {
+    return !!this.get(name)
+  }
+
+  get (name: string): any {
+    return this.store[name]
+  }
+
+  add (name: string, render: any): VXEMenusStore {
+    const conf = this.store[name]
+    // 兼容
+    if (XEUtils.isFunction(render)) {
+      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 this
+  }
+
+  delete (name: string): void {
+    delete this.store[name]
+  }
+
+  forEach (callback: any): void {
+    XEUtils.objectEach(this.store, callback)
+  }
+}
+
+export const menus = new VXEMenusStore() as VxeGlobalMenus
 
 if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
   Object.assign(menus, { _name: 'Menus' })

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

@@ -8,7 +8,9 @@ export class Store {
   private store: any = {}
 
   mixin (options: any): Store {
-    Object.assign(this.store, options)
+    XEUtils.each(options, (item, key) => {
+      this.add(key, item)
+    })
     return this
   }
 

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

@@ -0,0 +1,9 @@
+import VXEStore from './store'
+
+import { VxeGlobalValidators } from '../../../types/v-x-e-table'
+
+export const validators = new VXEStore() as VxeGlobalValidators
+
+if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+  Object.assign(validators, { _name: 'Validators' })
+}