vxe-table 4.7.77 → 4.7.79

package/packages/grid/src/grid.ts

@@ -10,7 +10,7 @@ import tableComponentEmits from '../../table/src/emits'
 import { getSlotVNs } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
-import type { VxePagerComponent, VxeFormComponent, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance } from 'vxe-pc-ui'
+import type { ValueOf, VxePagerComponent, VxeFormComponent, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance } from 'vxe-pc-ui'
 import type { VxeTableMethods, VxeGridConstructor, VxeGridEmits, GridReactData, VxeGridPropTypes, VxeToolbarPropTypes, GridMethods, GridPrivateMethods, VxeGridPrivateComputed, VxeGridPrivateMethods, VxeToolbarInstance, GridPrivateRef, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableEvents, VxeTableDefines, VxeTableEventProps, VxeGridProps } from '../../../types'
 
 const { getConfig, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS } = VxeUI
@@ -46,7 +46,10 @@ export default defineComponent({
     toolbarConfig: Object as PropType<VxeGridPropTypes.ToolbarConfig>,
     formConfig: Object as PropType<VxeGridPropTypes.FormConfig>,
     zoomConfig: Object as PropType<VxeGridPropTypes.ZoomConfig>,
-    size: { type: String as PropType<VxeGridPropTypes.Size>, default: () => getConfig().grid.size || getConfig().size }
+    size: {
+      type: String as PropType<VxeGridPropTypes.Size>,
+      default: () => getConfig().grid.size || getConfig().size
+    }
   },
   emits: gridComponentEmits,
   setup (props, context) {
@@ -60,7 +63,7 @@ export default defineComponent({
 
     const { computeSize } = useFns.useSize(props)
 
-    const reactData = reactive({
+    const reactData = reactive<GridReactData>({
       tableLoading: false,
       proxyInited: false,
       isZMax: false,
@@ -74,7 +77,7 @@ export default defineComponent({
         pageSize: getConfig().pager?.pageSize || 10,
         currentPage: 1
       }
-    } as GridReactData<any>)
+    })
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refTable = ref() as Ref<ComponentPublicInstance<VxeTableProps, VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods>>
@@ -155,31 +158,6 @@ export default defineComponent({
       return rest
     })
 
-    const refMaps: GridPrivateRef = {
-      refElem,
-      refTable,
-      refForm,
-      refToolbar,
-      refPager
-    }
-
-    const computeMaps: VxeGridPrivateComputed = {
-      computeProxyOpts,
-      computePagerOpts,
-      computeFormOpts,
-      computeToolbarOpts,
-      computeZoomOpts
-    }
-
-    const $xeGrid = {
-      xID,
-      props: props as VxeGridProps,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    } as VxeGridConstructor & VxeGridPrivateMethods
-
     const computeTableProps = computed(() => {
       const { seqConfig, pagerConfig, loading, editConfig, proxyConfig } = props
       const { isZMax, tableLoading, tablePage, tableData } = reactData
@@ -207,6 +185,39 @@ export default defineComponent({
       return tableProps
     })
 
+    const computeCurrLayout = computed(() => {
+      const { layouts } = props
+      if (layouts && layouts.length) {
+        return layouts
+      }
+      return getConfig().grid.layouts || ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager']
+    })
+
+    const refMaps: GridPrivateRef = {
+      refElem,
+      refTable,
+      refForm,
+      refToolbar,
+      refPager
+    }
+
+    const computeMaps: VxeGridPrivateComputed = {
+      computeProxyOpts,
+      computePagerOpts,
+      computeFormOpts,
+      computeToolbarOpts,
+      computeZoomOpts
+    }
+
+    const $xeGrid = {
+      xID,
+      props: props as VxeGridProps,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as VxeGridConstructor & VxeGridPrivateMethods
+
     const initToolbar = () => {
       const toolbarOpts = computeToolbarOpts.value
       if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
@@ -644,12 +655,9 @@ export default defineComponent({
       return createCommentVNode()
     }
 
-    const defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager']
-
     const renderLayout = () => {
-      const { layouts } = props
       const vns: VNode[] = []
-      const currLayouts = (layouts && layouts.length ? layouts : (getConfig().grid.layouts || defaultLayouts))
+      const currLayouts = computeCurrLayout.value
       currLayouts.forEach(name => {
         switch (name) {
           case 'Form':
@@ -731,10 +739,20 @@ export default defineComponent({
       }
     }
 
+    const handleGlobalKeydownEvent = (evnt: any) => {
+      const zoomOpts = computeZoomOpts.value
+      const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
+      if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
+        gridPrivateMethods.triggerZoomEvent(evnt)
+      }
+    }
+
+    const dispatchEvent = (type: ValueOf<VxeGridEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $grid: $xeGrid }, params))
+    }
+
     const gridMethods: GridMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $grid: $xeGrid }, params))
-      },
+      dispatchEvent,
       /**
        * 提交指令，支持 code 或 button
        * @param {String/Object} code 字符串或对象
@@ -1219,14 +1237,6 @@ export default defineComponent({
       initProxy()
     })
 
-    const handleGlobalKeydownEvent = (evnt: any) => {
-      const zoomOpts = computeZoomOpts.value
-      const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
-      if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
-        gridPrivateMethods.triggerZoomEvent(evnt)
-      }
-    }
-
     hooks.forEach((options) => {
       const { setupGrid } = options
       if (setupGrid) {

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

@@ -916,9 +916,14 @@ export default defineComponent({
 
     if (process.env.VUE_APP_VXE_ENV === 'development') {
       nextTick(() => {
+        const customOpts = computeCustomOpts.value
+        const { mode } = customOpts
         if (!VxeUIModalComponent) {
           errLog('vxe.error.reqComp', ['vxe-modal'])
         }
+        if (!VxeUIDrawerComponent && (mode === 'drawer')) {
+          errLog('vxe.error.reqComp', ['vxe-drawer'])
+        }
         if (!VxeUIButtonComponent) {
           errLog('vxe.error.reqComp', ['vxe-button'])
         }

package/packages/table/render/index.ts

@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getCellValue, setCellValue } from '../../table/src/util'
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils'
-import { getOnName } from '../../ui/src/vn'
+import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
 import type { VxeButtonComponent } from 'vxe-pc-ui'
@@ -15,29 +15,6 @@ const componentDefaultModelProp = 'modelValue'
 
 const defaultCompProps = { transfer: true }
 
-function getModelEvent (renderOpts: any) {
-  switch (renderOpts.name) {
-    case 'input':
-    case 'textarea':
-      return 'input'
-  }
-  return 'update:modelValue'
-}
-
-function getChangeEvent (renderOpts: any) {
-  switch (renderOpts.name) {
-    case 'input':
-    case 'textarea':
-    case 'VxeInput':
-    case 'VxeNumberInput':
-    case 'VxeTextarea':
-    case '$input':
-    case '$textarea':
-      return 'input'
-  }
-  return 'change'
-}
-
 function parseDate (value: any, props: any) {
   return value && props.valueFormat ? XEUtils.toStringDate(value, props.valueFormat) : value
 }
@@ -133,7 +110,7 @@ function getCellLabelVNs (renderOpts: any, params: any, cellLabel: any) {
  * @param modelFunc
  * @param changeFunc
  */
-function getElementOns (renderOpts: any, params: any, modelFunc?: any, changeFunc?: any) {
+function getNativeElementOns (renderOpts: any, params: any, modelFunc?: any, changeFunc?: any) {
   const { events } = renderOpts
   const modelEvent = getModelEvent(renderOpts)
   const changeEvent = getChangeEvent(renderOpts)
@@ -246,7 +223,7 @@ function getFilterOns (renderOpts: any, params: any, option: any) {
 function getNativeEditOns (renderOpts: any, params: any) {
   const { $table, row, column } = params
   const { model } = column
-  return getElementOns(renderOpts, params, (evnt: any) => {
+  return getNativeElementOns(renderOpts, params, (evnt: any) => {
     // 处理 model 值双向绑定
     const cellValue = evnt.target.value
     if (isImmediateCell(renderOpts, params)) {
@@ -263,7 +240,7 @@ function getNativeEditOns (renderOpts: any, params: any) {
 }
 
 function getNativeFilterOns (renderOpts: any, params: any, option: any) {
-  return getElementOns(renderOpts, params, (evnt: any) => {
+  return getNativeElementOns(renderOpts, params, (evnt: any) => {
     // 处理 model 值双向绑定
     option.data = evnt.target.value
   }, () => {

package/packages/table/src/body.ts

@@ -24,7 +24,10 @@ export default defineComponent({
     tableData: Array as PropType<any[]>,
     tableColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
     fixedColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
-    fixedType: { type: String as PropType<VxeColumnPropTypes.Fixed>, default: null }
+    fixedType: {
+      type: String as PropType<VxeColumnPropTypes.Fixed>,
+      default: null
+    }
   },
   setup (props) {
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
@@ -162,7 +165,28 @@ export default defineComponent({
       const errorValidItem = validErrorMaps[`${rowid}:${colid}`]
       const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
       const attrs: any = { colid }
-      const params: VxeTableDefines.CellRenderBodyParams = { $table: $xeTable, $grid: $xeTable.xegrid, isEdit: false, seq, rowid, row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items }
+      const params: VxeTableDefines.CellRenderBodyParams = {
+        $table: $xeTable,
+        $grid: $xeTable.xegrid,
+        isEdit: false,
+        seq,
+        rowid,
+        row,
+        rowIndex,
+        $rowIndex,
+        _rowIndex,
+        column,
+        columnIndex,
+        $columnIndex,
+        _columnIndex,
+        fixed: fixedType,
+        type: renderType,
+        isHidden: fixedHiddenColumn,
+        level: rowLevel,
+        visibleData: afterFullData,
+        data: tableData,
+        items
+      }
       // 虚拟滚动不支持动态高度
       if (scrollYLoad && !hasEllipsis) {
         showEllipsis = hasEllipsis = true

package/packages/table/src/cell.ts

@@ -268,14 +268,15 @@ export const Cell = {
     return [
       h('span', {
         class: 'vxe-cell--label'
-      }, editRender && eqEmptyValue(cellValue)
-        ? [
-            // 如果设置占位符
-            h('span', {
-              class: 'vxe-cell--placeholder'
-            }, formatText(getFuncText(cellPlaceholder), 1))
-          ]
-        : formatText(cellValue, 1))
+      }, [
+        // 如果设置占位符
+        editRender && eqEmptyValue(cellValue)
+          ? h('span', {
+            class: 'vxe-cell--placeholder'
+          }, formatText(getFuncText(cellPlaceholder), 1))
+          : h('span', formatText(cellValue, 1))
+      ]
+      )
     ]
   },
   renderTreeCell (params: VxeTableDefines.CellRenderBodyParams) {

package/packages/table/src/column.ts

@@ -1,6 +1,6 @@
-import { defineComponent, h, onUnmounted, inject, ref, Ref, PropType, provide, onMounted } from 'vue'
-import { XEColumnInstance, watchColumn, assembleColumn, destroyColumn } from '../../table/src/util'
-import Cell from '../../table/src/cell'
+import { defineComponent, h, onUnmounted, inject, ref, PropType, provide, onMounted, createCommentVNode } from 'vue'
+import { XEColumnInstance, watchColumn, assembleColumn, destroyColumn } from './util'
+import Cell from './cell'
 
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeColumnPropTypes, VxeColumnProps } from '../../../types'
 
@@ -20,7 +20,10 @@ export const columnProps = {
   // 列最大宽度
   maxWidth: [Number, String] as PropType<VxeColumnPropTypes.MaxWidth>,
   // 是否允许拖动列宽调整大小
-  resizable: { type: Boolean as PropType<VxeColumnPropTypes.Resizable>, default: null },
+  resizable: {
+    type: Boolean as PropType<VxeColumnPropTypes.Resizable>,
+    default: null
+  },
   // 将列固定在左侧或者右侧
   fixed: String as PropType<VxeColumnPropTypes.Fixed>,
   // 列对其方式
@@ -30,11 +33,20 @@ export const columnProps = {
   // 表尾列的对齐方式
   footerAlign: String as PropType<VxeColumnPropTypes.FooterAlign>,
   // 当内容过长时显示为省略号
-  showOverflow: { type: [Boolean, String] as PropType<VxeColumnPropTypes.ShowOverflow>, default: null },
+  showOverflow: {
+    type: [Boolean, String] as PropType<VxeColumnPropTypes.ShowOverflow>,
+    default: null
+  },
   // 当表头内容过长时显示为省略号
-  showHeaderOverflow: { type: [Boolean, String] as PropType<VxeColumnPropTypes.ShowHeaderOverflow>, default: null },
+  showHeaderOverflow: {
+    type: [Boolean, String] as PropType<VxeColumnPropTypes.ShowHeaderOverflow>,
+    default: null
+  },
   // 当表尾内容过长时显示为省略号
-  showFooterOverflow: { type: [Boolean, String] as PropType<VxeColumnPropTypes.ShowFooterOverflow>, default: null },
+  showFooterOverflow: {
+    type: [Boolean, String] as PropType<VxeColumnPropTypes.ShowFooterOverflow>,
+    default: null
+  },
   // 给单元格附加 className
   className: [String, Function] as PropType<VxeColumnPropTypes.ClassName>,
   // 给表头单元格附加 className
@@ -52,9 +64,15 @@ export const columnProps = {
   // 排序的字段类型，比如字符串转数值等
   sortType: String as PropType<VxeColumnPropTypes.SortType>,
   // 配置筛选条件数组
-  filters: { type: Array as PropType<VxeColumnPropTypes.Filters>, default: null },
+  filters: {
+    type: Array as PropType<VxeColumnPropTypes.Filters>,
+    default: null
+  },
   // 筛选是否允许多选
-  filterMultiple: { type: Boolean as PropType<VxeColumnPropTypes.FilterMultiple>, default: true },
+  filterMultiple: {
+    type: Boolean as PropType<VxeColumnPropTypes.FilterMultiple>,
+    default: true
+  },
   // 自定义筛选方法
   filterMethod: Function as PropType<VxeColumnPropTypes.FilterMethod<any>>,
   // 筛选重置方法
@@ -66,7 +84,10 @@ export const columnProps = {
   // 指定为树节点
   treeNode: Boolean as PropType<VxeColumnPropTypes.TreeNode>,
   // 是否可视
-  visible: { type: Boolean as PropType<VxeColumnPropTypes.Visible>, default: null },
+  visible: {
+    type: Boolean as PropType<VxeColumnPropTypes.Visible>,
+    default: null
+  },
   // 表头单元格数据导出方法
   headerExportMethod: Function as PropType<VxeColumnPropTypes.HeaderExportMethod>,
   // 单元格数据导出方法
@@ -95,11 +116,14 @@ export default defineComponent({
   name: 'VxeColumn',
   props: columnProps,
   setup (props, { slots }) {
-    const refElem = ref() as Ref<HTMLDivElement>
-    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
-    const parentColgroup = inject('$xeColgroup', null as XEColumnInstance | null)
-    const column = Cell.createColumn($xeTable, props as VxeColumnProps)
-    column.slots = slots
+    const refElem = ref<HTMLDivElement>()
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeColgroup = inject<XEColumnInstance | null>('$xeColgroup', null)
+    if (!$xeTable) {
+      return () => createCommentVNode()
+    }
+    const columnConfig = Cell.createColumn($xeTable, props as VxeColumnProps)
+    columnConfig.slots = slots
 
     const renderVN = () => {
       return h('div', {
@@ -108,19 +132,22 @@ export default defineComponent({
     }
 
     const $xeColumn = {
-      column,
+      columnConfig,
 
       renderVN
-    }
+    } as XEColumnInstance
 
-    watchColumn($xeTable, props, column)
+    watchColumn($xeTable, props, columnConfig)
 
     onMounted(() => {
-      assembleColumn($xeTable, refElem.value, column, parentColgroup)
+      const elem = refElem.value
+      if (elem) {
+        assembleColumn($xeTable, elem, columnConfig, $xeColgroup)
+      }
     })
 
     onUnmounted(() => {
-      destroyColumn($xeTable, column)
+      destroyColumn($xeTable, columnConfig)
     })
 
     provide('$xeColumn', $xeColumn)

package/packages/table/src/footer.ts

@@ -23,10 +23,22 @@ function mergeFooterMethod (mergeFooterList: VxeTableDefines.MergeItem[], _rowIn
 export default defineComponent({
   name: 'VxeTableFooter',
   props: {
-    footerTableData: { type: Array as PropType<any[][]>, default: () => [] },
-    tableColumn: { type: Array as PropType<VxeTableDefines.ColumnInfo[]>, default: () => [] },
-    fixedColumn: { type: Array as PropType<VxeTableDefines.ColumnInfo[]>, default: () => [] },
-    fixedType: { type: String as PropType<VxeColumnPropTypes.Fixed>, default: null }
+    footerTableData: {
+      type: Array as PropType<any[][]>,
+      default: () => []
+    },
+    tableColumn: {
+      type: Array as PropType<VxeTableDefines.ColumnInfo[]>,
+      default: () => []
+    },
+    fixedColumn: {
+      type: Array as PropType<VxeTableDefines.ColumnInfo[]>,
+      default: () => []
+    },
+    fixedType: {
+      type: String as PropType<VxeColumnPropTypes.Fixed>,
+      default: null
+    }
   },
   setup (props) {
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)

package/packages/table/src/group.ts

@@ -1,7 +1,7 @@
-import { defineComponent, h, onUnmounted, provide, inject, ref, Ref, onMounted, Slot } from 'vue'
+import { defineComponent, h, onUnmounted, provide, inject, ref, onMounted, Slot, createCommentVNode } from 'vue'
 import { columnProps } from './column'
-import { XEColumnInstance, watchColumn, assembleColumn, destroyColumn } from '../../table/src/util'
-import Cell from '../../table/src/cell'
+import { XEColumnInstance, watchColumn, assembleColumn, destroyColumn } from './util'
+import Cell from './cell'
 
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
@@ -9,10 +9,13 @@ export default defineComponent({
   name: 'VxeColgroup',
   props: columnProps,
   setup (props, { slots }) {
-    const refElem = ref() as Ref<HTMLDivElement>
-    const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
-    const parentColgroup = inject('$xeColgroup', null as XEColumnInstance | null)
-    const column = Cell.createColumn($xeTable, props)
+    const refElem = ref<HTMLDivElement>()
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeParentColgroup = inject<XEColumnInstance | null>('$xeColgroup', null)
+    if (!$xeTable) {
+      return () => createCommentVNode()
+    }
+    const columnConfig = Cell.createColumn($xeTable, props)
     const columnSlots: {
       header?: Slot;
     } = {}
@@ -21,17 +24,20 @@ export default defineComponent({
       columnSlots.header = slots.header
     }
 
-    column.slots = columnSlots
-    column.children = []
+    columnConfig.slots = columnSlots
+    columnConfig.children = []
 
-    watchColumn($xeTable, props, column)
+    watchColumn($xeTable, props, columnConfig)
 
     onMounted(() => {
-      assembleColumn($xeTable, refElem.value, column, parentColgroup)
+      const elem = refElem.value
+      if (elem) {
+        assembleColumn($xeTable, elem, columnConfig, $xeParentColgroup)
+      }
     })
 
     onUnmounted(() => {
-      destroyColumn($xeTable, column)
+      destroyColumn($xeTable, columnConfig)
     })
 
     const renderVN = () => {
@@ -40,7 +46,7 @@ export default defineComponent({
       }, slots.default ? slots.default() : [])
     }
 
-    const $xeColgroup = { column }
+    const $xeColgroup = { columnConfig } as XEColumnInstance
 
     provide('$xeColgroup', $xeColgroup)
     provide('$xeGrid', null)

package/packages/table/src/header.ts

@@ -14,7 +14,10 @@ export default defineComponent({
     tableColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
     tableGroupColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
     fixedColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
-    fixedType: { type: String as PropType<VxeColumnPropTypes.Fixed>, default: null }
+    fixedType: {
+      type: String as PropType<VxeColumnPropTypes.Fixed>,
+      default: null
+    }
   },
   setup (props) {
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)