vxe-table 3.19.39 → 3.20.0-beta.1

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

@@ -1,25 +1,29 @@
-import { CreateElement } from 'vue'
+import { CreateElement, PropType } from 'vue'
+import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import XEUtils from 'xe-utils'
 import { parseFile } from '../../../ui/src/utils'
 import { errLog } from '../../../ui/src/log'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
+import type { VxeComponentSizeType } from 'vxe-pc-ui'
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../../types'
 
 const { getI18n, getIcon, globalMixins, renderEmptyElement } = VxeUI
 
-export default {
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTableImportPanel',
   mixins: [
     globalMixins.sizeMixin
   ],
   props: {
-    defaultOptions: Object,
-    storeData: Object
-  },
-  components: {
-    // VxeModal,
-    // VxeRadio
+    defaultOptions: {
+      type: Object as PropType<VxeTableDefines.ImportParamsObj>,
+      default: () => ({} as VxeTableDefines.ImportParamsObj)
+    },
+    storeData: {
+      type: Object as PropType<VxeTableDefines.ImportStoreObj>,
+      default: () => ({} as VxeTableDefines.ImportStoreObj)
+    }
   },
   inject: {
     $xeTable: {
@@ -27,28 +31,47 @@ export default {
     }
   },
   data () {
-    return {
+    const reactData = {
       loading: false
     }
+
+    return {
+      reactData
+    }
   },
   computed: {
-    selectName () {
-      return `${this.storeData.filename}.${this.storeData.type}`
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeTable(): VxeTableConstructor & VxeTablePrivateMethods
+    }),
+    computeSelectName () {
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+
+      const { storeData } = props
+      return `${storeData.filename}.${storeData.type}`
     },
-    hasFile () {
-      return this.storeData.file && this.storeData.type
+    computeHasFile () {
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+
+      const { storeData } = props
+      return storeData.file && storeData.type
     },
-    parseTypeLabel () {
-      const { storeData } = this
+    computeParseTypeLabel () {
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+
+      const { storeData } = props
       const { type, typeList } = storeData
       if (type) {
         const selectItem = XEUtils.find(typeList, item => type === item.value)
-        return selectItem ? selectItem.label : '*.*'
+        return `${selectItem ? selectItem.label : '*.*'}`
       }
-      return `*.${typeList.map((item: any) => item.value).join(', *.')}`
+      return `*.${typeList.map((item) => item.value).join(', *.')}`
     }
-  } as any,
-  created (this: any) {
+  },
+  created () {
     const $xeTableImportPanel = this
 
     const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
@@ -67,172 +90,6 @@ export default {
       }
     })
   },
-  render (this: any, h: CreateElement) {
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
-    const $xeGrid = $xeTable.$xeGrid
-    const $xeGantt = $xeTable.$xeGantt
-
-    const { hasFile, loading, parseTypeLabel, defaultOptions, storeData, selectName } = this
-    const slots = defaultOptions.slots || {}
-    const topSlot = slots.top
-    const bottomSlot = slots.bottom
-    const defaultSlot = slots.default
-    const footerSlot = slots.footer
-
-    return h('vxe-modal', {
-      ref: 'modal',
-      props: {
-        id: 'VXE_IMPORT_MODAL',
-        value: storeData.visible,
-        title: getI18n('vxe.import.impTitle'),
-        width: 540,
-        minWidth: 360,
-        minHeight: 240,
-        mask: true,
-        lockView: true,
-        showFooter: true,
-        escClosable: true,
-        maskClosable: true,
-        showMaximize: true,
-        resize: true,
-        loading
-      },
-      on: {
-        input (value: any) {
-          storeData.visible = value
-        },
-        show: this.showEvent
-      },
-      scopedSlots: {
-        default: () => {
-          const params = {
-            $table: $xeTable,
-            $grid: $xeGrid,
-            $gantt: $xeGantt,
-            options: defaultOptions,
-            params: defaultOptions.params as any
-          }
-
-          return h('div', {
-            class: 'vxe-table-export--panel'
-          }, [
-            topSlot
-              ? h('div', {
-                class: 'vxe-table-export--panel-top'
-              }, $xeTable.callSlot(topSlot, params, h))
-              : renderEmptyElement(this),
-            h('div', {
-              class: 'vxe-table-export--panel-body'
-            }, defaultSlot
-              ? $xeTable.callSlot(defaultSlot, params, h)
-              : [
-                  h('table', {
-                    class: 'vxe-table-export--panel-table',
-                    attrs: {
-                      cellspacing: 0,
-                      cellpadding: 0,
-                      border: 0
-                    }
-                  }, [
-                    h('tbody', [
-                      h('tr', [
-                        h('td', getI18n('vxe.import.impFile')),
-                        h('td', [
-                          hasFile
-                            ? h('div', {
-                              class: 'vxe-table-export--selected--file',
-                              attrs: {
-                                title: selectName
-                              }
-                            }, [
-                              h('span', selectName),
-                              h('i', {
-                                class: getIcon().INPUT_CLEAR,
-                                on: {
-                                  click: this.clearFileEvent
-                                }
-                              })
-                            ])
-                            : h('button', {
-                              ref: 'fileBtn',
-                              class: 'vxe-table-export--select--file',
-                              attrs: {
-                                type: 'button'
-                              },
-                              on: {
-                                click: this.selectFileEvent
-                              }
-                            }, getI18n('vxe.import.impSelect'))
-                        ])
-                      ]),
-                      h('tr', [
-                        h('td', getI18n('vxe.import.impType')),
-                        h('td', parseTypeLabel)
-                      ]),
-                      h('tr', [
-                        h('td', getI18n('vxe.import.impMode')),
-                        h('td', [
-                          h('vxe-select', {
-                            props: {
-                              value: defaultOptions.mode,
-                              options: storeData.modeList
-                            },
-                            on: {
-                              modelValue (value: any) {
-                                defaultOptions.mode = value
-                              }
-                            }
-                          })
-                        ])
-                      ])
-                    ])
-                  ])
-                ]
-            ),
-            bottomSlot
-              ? h('div', {
-                class: 'vxe-table-export--panel-bottom'
-              }, $xeTable.callSlot(bottomSlot, params, h))
-              : renderEmptyElement(this)
-          ])
-        },
-        footer: () => {
-          const params = {
-            $table: $xeTable,
-            $grid: $xeGrid,
-            $gantt: $xeGantt,
-            options: defaultOptions,
-            params: defaultOptions.params as any
-          }
-          return h('div', {
-            class: 'vxe-table-export--panel-footer'
-          }, footerSlot
-            ? $xeTable.callSlot(footerSlot, params, h)
-            : [
-                h('div', {
-                  class: 'vxe-table-export--panel-btns'
-                }, [
-                  h('vxe-button', {
-                    on: {
-                      click: this.cancelEvent
-                    }
-                  }, getI18n('vxe.import.impCancel')),
-                  h('vxe-button', {
-                    props: {
-                      status: 'primary',
-                      disabled: !hasFile || loading
-                    },
-                    on: {
-                      click: this.importEvent
-                    }
-                  }, getI18n('vxe.import.impConfirm'))
-                ])
-              ]
-          )
-        }
-      }
-    })
-  },
   methods: {
     clearFileEvent () {
       Object.assign(this.storeData, {
@@ -242,35 +99,221 @@ export default {
       })
     },
     selectFileEvent () {
-      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+      const $xeTable = $xeImportPanel.$xeTable
 
-      $xeTable.readFile(this.defaultOptions).then((params: any) => {
+      const { storeData, defaultOptions } = props
+      $xeTable.readFile(defaultOptions).then((params) => {
         const { file } = params
-        Object.assign(this.storeData, parseFile(file), { file })
-      }).catch((e: any) => e)
+        Object.assign(storeData, parseFile(file), { file })
+      }).catch(() => {})
     },
     showEvent () {
-      this.$nextTick(() => {
-        const { $refs } = this
-        const targetElem = $refs.fileBtn
+      const $xeImportPanel = this
+      $xeImportPanel.$nextTick(() => {
+        const targetElem = $xeImportPanel.$refs.fileBtn as HTMLButtonElement
         if (targetElem) {
           targetElem.focus()
         }
       })
     },
     cancelEvent () {
-      this.storeData.visible = false
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+
+      const { storeData } = props
+      storeData.visible = false
     },
     importEvent () {
-      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+      const reactData = $xeImportPanel.reactData
+      const $xeTable = $xeImportPanel.$xeTable
 
-      this.loading = true
-      $xeTable.importByFile(this.storeData.file, Object.assign({}, $xeTable.importOpts, this.defaultOptions)).then(() => {
-        this.loading = false
-        this.storeData.visible = false
+      const { storeData, defaultOptions } = props
+      const importOpts = $xeTable.computeImportOpts
+      reactData.loading = true
+      $xeTable.importByFile(storeData.file, Object.assign({}, importOpts, defaultOptions)).then(() => {
+        reactData.loading = false
+        storeData.visible = false
       }).catch(() => {
-        this.loading = false
+        reactData.loading = false
+      })
+    },
+    renderVN (h: CreateElement) {
+      const $xeImportPanel = this
+      const props = $xeImportPanel
+      const reactData = $xeImportPanel.reactData
+      const $xeTable = $xeImportPanel.$xeTable
+      const $xeGrid = $xeTable.$xeGrid
+      const $xeGantt = $xeTable.$xeGantt
+
+      const { defaultOptions, storeData } = props
+      const selectName = $xeImportPanel.computeSelectName as string
+      const hasFile = $xeImportPanel.computeHasFile
+      const parseTypeLabel = $xeImportPanel.computeParseTypeLabel as string
+      const slots = defaultOptions.slots || {}
+      const topSlot = slots.top
+      const bottomSlot = slots.bottom
+      const defaultSlot = slots.default
+      const footerSlot = slots.footer
+      return h('vxe-modal', {
+        ref: 'modal',
+        props: {
+          id: 'VXE_IMPORT_MODAL',
+          value: storeData.visible,
+          title: getI18n('vxe.import.impTitle'),
+          width: 540,
+          minWidth: 360,
+          minHeight: 240,
+          mask: true,
+          lockView: true,
+          showFooter: true,
+          escClosable: true,
+          maskClosable: true,
+          showMaximize: true,
+          resize: true,
+          loading: reactData.loading
+        },
+        on: {
+          input (value: any) {
+            storeData.visible = value
+          },
+          show: $xeImportPanel.showEvent
+        },
+        scopedSlots: {
+          default: () => {
+            const params = {
+              $table: $xeTable,
+              $grid: $xeGrid,
+              $gantt: $xeGantt,
+              options: defaultOptions,
+              params: defaultOptions.params as any
+            }
+
+            return h('div', {
+              class: 'vxe-table-export--panel'
+            }, [
+              topSlot
+                ? h('div', {
+                  class: 'vxe-table-export--panel-top'
+                }, $xeTable.callSlot(topSlot, params, h))
+                : renderEmptyElement($xeTable),
+              h('div', {
+                class: 'vxe-table-export--panel-body'
+              }, defaultSlot
+                ? $xeTable.callSlot(defaultSlot, params, h)
+                : [
+                    h('table', {
+                      class: 'vxe-table-export--panel-table',
+                      attrs: {
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                      }
+                    }, [
+                      h('tbody', [
+                        h('tr', [
+                          h('td', getI18n('vxe.import.impFile')),
+                          h('td', [
+                            hasFile
+                              ? h('div', {
+                                class: 'vxe-table-export--selected--file',
+                                attrs: {
+                                  title: selectName
+                                }
+                              }, [
+                                h('span', selectName),
+                                h('i', {
+                                  class: getIcon().INPUT_CLEAR,
+                                  on: {
+                                    click: $xeImportPanel.clearFileEvent
+                                  }
+                                })
+                              ])
+                              : h('button', {
+                                ref: 'fileBtn',
+                                class: 'vxe-table-export--select--file',
+                                attrs: {
+                                  type: 'button'
+                                },
+                                on: {
+                                  click: $xeImportPanel.selectFileEvent
+                                }
+                              }, getI18n('vxe.import.impSelect'))
+                          ])
+                        ]),
+                        h('tr', [
+                          h('td', getI18n('vxe.import.impType')),
+                          h('td', parseTypeLabel)
+                        ]),
+                        h('tr', [
+                          h('td', getI18n('vxe.import.impMode')),
+                          h('td', [
+                            h('vxe-select', {
+                              props: {
+                                value: defaultOptions.mode,
+                                options: storeData.modeList
+                              },
+                              on: {
+                                modelValue (value: any) {
+                                  defaultOptions.mode = value
+                                }
+                              }
+                            })
+                          ])
+                        ])
+                      ])
+                    ])
+                  ]
+              ),
+              bottomSlot
+                ? h('div', {
+                  class: 'vxe-table-export--panel-bottom'
+                }, $xeTable.callSlot(bottomSlot, params, h))
+                : renderEmptyElement($xeTable)
+            ])
+          },
+          footer: () => {
+            const params = {
+              $table: $xeTable,
+              $grid: $xeGrid,
+              $gantt: $xeGantt,
+              options: defaultOptions,
+              params: defaultOptions.params as any
+            }
+            return h('div', {
+              class: 'vxe-table-export--panel-footer'
+            }, footerSlot
+              ? $xeTable.callSlot(footerSlot, params, h)
+              : [
+                  h('div', {
+                    class: 'vxe-table-export--panel-btns'
+                  }, [
+                    h('vxe-button', {
+                      on: {
+                        click: $xeImportPanel.cancelEvent
+                      }
+                    }, getI18n('vxe.import.impCancel')),
+                    h('vxe-button', {
+                      props: {
+                        status: 'primary',
+                        disabled: !hasFile || reactData.loading
+                      },
+                      on: {
+                        click: $xeImportPanel.importEvent
+                      }
+                    }, getI18n('vxe.import.impConfirm'))
+                  ])
+                ]
+            )
+          }
+        }
       })
     }
-  } as any
-}
+  },
+  render (h: CreateElement) {
+    return (this as any).renderVN(h)
+  }
+}) /* define-vxe-component end */

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

@@ -34,22 +34,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
   ],
   props: {
     filterStore: {
-      type: Object as PropType<{
-        isAllSelected: boolean
-        isIndeterminate: boolean
-        style: any
-        column: VxeTableDefines.ColumnInfo | null | undefined
-        visible: boolean
-        maxHeight: number | string | null
-      }>,
-      default: () => ({} as {
-        isAllSelected: boolean
-        isIndeterminate: boolean
-        style: any
-        column: VxeTableDefines.ColumnInfo | null | undefined
-        visible: boolean
-        maxHeight: number | string | null
-      })
+      type: Object as PropType<VxeTableDefines.FilterStoreObj>,
+      default: () => ({} as VxeTableDefines.FilterStoreObj)
     }
   },
   inject: {
@@ -337,7 +323,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }, filterStore.visible && (destroyOnClose ? visible : true) && column ? ($xeFilterPanel as any).renderOptions(h, filterRender, compConf).concat(($xeFilterPanel as any).renderFooter(h)) : [])
     }
   },
-  render (this: any, h: CreateElement) {
-    return this.renderVN(h)
+  render (h: CreateElement) {
+    return (this as any).renderVN(h)
   }
 }) /* define-vxe-component end */

package/packages/table/module/keyboard/mixin.ts

@@ -487,8 +487,8 @@ export default {
       const checkboxOpts = $xeTable.computeCheckboxOpts
       const mouseOpts = $xeTable.computeMouseOpts
       const editOpts = $xeTable.computeEditOpts
-      if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaModnEvent) {
-        return $xeTable.triggerCellAreaModnEvent(evnt, params)
+      if (mouseConfig && mouseOpts.area && $xeTable.triggerClAreaModnEvent) {
+        return $xeTable.triggerClAreaModnEvent(evnt, params)
       } else {
         if (checkboxConfig && checkboxOpts.range) {
           handleCheckboxRangeEvent($xeTable, evnt, params)