vxe-table 3.8.0-beta.2 → 3.8.0-beta.4

package/packages/colgroup/index.js

@@ -1,11 +1,13 @@
-import VxeTableColgroup from '../table/src/group'
+import VxeTableColgroupComponent from '../table/src/group'
 
-export const Colgroup = Object.assign(VxeTableColgroup, {
+export const VxeColgroup = Object.assign(VxeTableColgroupComponent, {
   install (Vue) {
-    Vue.component(VxeTableColgroup.name, VxeTableColgroup)
+    Vue.component(VxeTableColgroupComponent.name, VxeTableColgroupComponent)
     // 兼容旧用法
-    Vue.component('VxeTableColgroup', VxeTableColgroup)
+    Vue.component('VxeTableColgroup', VxeTableColgroupComponent)
   }
 })
 
-export default Colgroup
+export const Colgroup = VxeColgroup
+
+export default VxeColgroup

package/packages/column/index.d.ts

@@ -1,4 +1,4 @@
-import { Column } from '../../types/column'
+import { VxeColumn } from '../../types/column'
 
 export * from '../../types/column'
-export default Column
+export default VxeColumn

package/packages/column/index.js

@@ -1,11 +1,13 @@
-import VxeTableColumn from '../table/src/column'
+import VxeTableColumnComponent from '../table/src/column'
 
-export const Column = Object.assign(VxeTableColumn, {
+export const VxeColumn = Object.assign(VxeTableColumnComponent, {
   install (Vue) {
-    Vue.component(VxeTableColumn.name, VxeTableColumn)
+    Vue.component(VxeTableColumnComponent.name, VxeTableColumnComponent)
     // 兼容旧用法
-    Vue.component('VxeTableColumn', VxeTableColumn)
+    Vue.component('VxeTableColumn', VxeTableColumnComponent)
   }
 })
 
-export default Column
+export const Column = VxeColumn
+
+export default VxeColumn

package/packages/custom/index.d.ts

@@ -0,0 +1,4 @@
+import { VxeTableCustomModule } from '../../types/module/custom'
+
+export * from '../../types/module/custom'
+export default VxeTableCustomModule

package/packages/custom/index.js

@@ -0,0 +1,17 @@
+import Table from '../table'
+import mixin from './src/mixin'
+import PanelComponent from './src/panel'
+import VXETable from '../v-x-e-table'
+
+export const VxeTableCustomModule = {
+  Panel: PanelComponent,
+  install (Vue) {
+    VXETable.reg('custom')
+    Table.mixins.push(mixin)
+    Vue.component(PanelComponent.name, PanelComponent)
+  }
+}
+
+export const Custom = VxeTableCustomModule
+
+export default VxeTableCustomModule

package/packages/custom/src/mixin.js

@@ -0,0 +1,74 @@
+export default {
+  methods: {
+    _openCustom () {
+      const { customStore } = this
+      customStore.visible = true
+      this.checkCustomStatus()
+      this.calcMaxHeight()
+      return this.$nextTick().then(() => this.calcMaxHeight())
+    },
+    _closeCustom () {
+      const { customStore, customOpts } = this
+      if (customStore.visible) {
+        customStore.visible = false
+        if (!customOpts.immediate) {
+          this.handleCustom()
+        }
+      }
+      return this.$nextTick()
+    },
+    calcMaxHeight  () {
+      const { $refs, customStore } = this
+      const customWrapperElem = $refs.customWrapper ? $refs.customWrapper.$el : null
+      const headElem = $refs.tableHeader ? $refs.tableHeader.$el : null
+      const bodyElem = $refs.tableBody ? $refs.tableBody.$el : null
+      // 判断面板不能大于表格高度
+      let tableHeight = 0
+      if (headElem) {
+        tableHeight += headElem.clientHeight
+      }
+      if (bodyElem) {
+        tableHeight += bodyElem.clientHeight
+      }
+      customStore.maxHeight = Math.max(0, customWrapperElem ? Math.min(customWrapperElem.clientHeight, tableHeight - 80) : 0)
+    },
+    checkCustomStatus () {
+      const { customStore, collectColumn, customOpts } = this
+      const { checkMethod } = customOpts
+      customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ column }) : false) || column.visible)
+      customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ column })) && (column.visible || column.halfVisible))
+    },
+    emitCustomEvent (type, evnt) {
+      const comp = this.$xegrid || this
+      comp.$emit('custom', { type, $table: this, $grid: this.$xegrid, $event: evnt })
+    },
+    triggerCustomEvent (evnt) {
+      const { customStore } = this
+      if (customStore.visible) {
+        this.closeCustom()
+        this.emitCustomEvent('close', evnt)
+      } else {
+        customStore.btnEl = evnt.target
+        this.openCustom()
+        this.emitCustomEvent('open', evnt)
+      }
+    },
+    customOpenEvent (evnt) {
+      const { customStore } = this
+      if (!customStore.visible) {
+        customStore.activeBtn = true
+        customStore.btnEl = evnt.target
+        this.openCustom()
+        this.emitCustomEvent('open', evnt)
+      }
+    },
+    customColseEvent (evnt) {
+      const { customStore } = this
+      if (customStore.visible) {
+        customStore.activeBtn = false
+        this.closeCustom()
+        this.emitCustomEvent('close', evnt)
+      }
+    }
+  }
+}

package/packages/custom/src/panel.js

@@ -0,0 +1,430 @@
+import UtilTools from '../../tools/utils'
+import GlobalConfig from '../../v-x-e-table/src/conf'
+import XEUtils from 'xe-utils'
+
+function renderSimplePanel (h, _vm) {
+  const { $xetable, customStore } = _vm
+  const { customOpts, collectColumn, isMaxFixedColumn } = $xetable
+  const { maxHeight } = customStore
+  const { checkMethod, trigger } = customOpts
+  const colVNs = []
+  const customWrapperOns = {}
+  // hover 触发
+  if (trigger === 'hover') {
+    customWrapperOns.onMouseenter = _vm.handleWrapperMouseenterEvent
+    customWrapperOns.onMouseleave = _vm.handleWrapperMouseleaveEvent
+  }
+  XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+    const colTitle = UtilTools.formatText(column.getTitle(), 1)
+    const colKey = column.getKey()
+    const isColGroup = column.children && column.children.length
+    const isDisabled = checkMethod ? !checkMethod({ column }) : false
+    if (isColGroup || colKey) {
+      const isChecked = column.visible
+      const isIndeterminate = column.halfVisible
+      colVNs.push(
+        h('li', {
+          class: ['vxe-table-custom--option', `level--${column.level}`, {
+            'is--group': isColGroup
+          }]
+        }, [
+          h('div', {
+            class: ['vxe-table-custom--checkbox-option', {
+              'is--checked': isChecked,
+              'is--indeterminate': isIndeterminate,
+              'is--disabled': isDisabled
+            }],
+            attrs: {
+              title: colTitle
+            },
+            on: {
+              click: () => {
+                if (!isDisabled) {
+                  _vm.changeCheckboxOption(column)
+                }
+              }
+            }
+          }, [
+            h('span', {
+              class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
+            }),
+            h('span', {
+              class: 'vxe-checkbox--label'
+            }, colTitle)
+          ]),
+          !parent && customOpts.allowFixed ? h('div', {
+            class: 'vxe-table-custom--fixed-option'
+          }, [
+            h('span', {
+              class: ['vxe-table-custom--fixed-left-option', column.fixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
+                'is--checked': column.fixed === 'left',
+                'is--disabled': isMaxFixedColumn && !column.fixed
+              }],
+              attrs: {
+                title: GlobalConfig.i18n(column.fixed === 'left' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedLeft')
+              },
+              on: {
+                click: () => {
+                  _vm.changeFixedOption(column, 'left')
+                }
+              }
+            }),
+            h('span', {
+              class: ['vxe-table-custom--fixed-right-option', column.fixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
+                'is--checked': column.fixed === 'right',
+                'is--disabled': isMaxFixedColumn && !column.fixed
+              }],
+              attrs: {
+                title: GlobalConfig.i18n(column.fixed === 'right' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedRight')
+              },
+              on: {
+                click: () => {
+                  _vm.changeFixedOption(column, 'right')
+                }
+              }
+            })
+          ]) : null
+        ])
+      )
+    }
+  })
+  const isAllChecked = customStore.isAll
+  const isAllIndeterminate = customStore.isIndeterminate
+  return h('div', {
+    key: 'simple',
+    class: ['vxe-table-custom-wrapper', {
+      'is--active': customStore.visible
+    }]
+  }, [
+    h('ul', {
+      class: 'vxe-table-custom--header'
+    }, [
+      h('li', {
+        class: 'vxe-table-custom--option'
+      }, [
+        h('div', {
+          class: ['vxe-table-custom--checkbox-option', {
+            'is--checked': isAllChecked,
+            'is--indeterminate': isAllIndeterminate
+          }],
+          attrs: {
+            title: GlobalConfig.i18n('vxe.table.allTitle')
+          },
+          on: {
+            click: _vm.allCustomEvent
+          }
+        }, [
+          h('span', {
+            class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
+          }),
+          h('span', {
+            class: 'vxe-checkbox--label'
+          }, GlobalConfig.i18n('vxe.toolbar.customAll'))
+        ])
+      ])
+    ]),
+    h('ul', {
+      class: 'vxe-table-custom--body',
+      style: maxHeight ? {
+        maxHeight: `${maxHeight}px`
+      } : {},
+      ...customWrapperOns
+    }, colVNs),
+    customOpts.showFooter ? h('div', {
+      class: 'vxe-table-custom--footer'
+    }, [
+      h('button', {
+        class: 'btn--reset',
+        on: {
+          click: _vm.resetCustomEvent
+        }
+      }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.toolbar.customRestore')),
+      h('button', {
+        class: 'btn--confirm',
+        on: {
+          click: _vm.confirmCustomEvent
+        }
+      }, customOpts.confirmButtonText || GlobalConfig.i18n('vxe.toolbar.customConfirm'))
+    ]) : null
+  ])
+}
+
+const renderPopupPanel = (h, _vm) => {
+  const { $xetable, customStore } = _vm
+  const { customOpts, collectColumn, isMaxFixedColumn } = $xetable
+  const { checkMethod } = customOpts
+  const trVNs = []
+  XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+    const colTitle = UtilTools.formatText(column.getTitle(), 1)
+    const colKey = column.getKey()
+    const isColGroup = column.children && column.children.length
+    const isDisabled = checkMethod ? !checkMethod({ column }) : false
+    if (isColGroup || colKey) {
+      const isChecked = column.visible
+      const isIndeterminate = column.halfVisible
+      trVNs.push(
+        h('tr', {
+          class: [`vxe-table-custom-popup--row-level${column.level}`]
+        }, [
+          h('td', {
+            class: 'vxe-table-custom-popup--column-name'
+          }, [
+            h('div', {
+              class: 'vxe-table-custom-popup--name',
+              attrs: {
+                title: colTitle
+              }
+            }, colTitle)
+          ]),
+          h('td', {
+            class: 'vxe-table-custom-popup--column-visiblw'
+          }, [
+            h('div', {
+              class: ['vxe-table-custom--checkbox-option', {
+                'is--checked': isChecked,
+                'is--indeterminate': isIndeterminate,
+                'is--disabled': isDisabled
+              }],
+              on: {
+                click: () => {
+                  if (!isDisabled) {
+                    _vm.changeCheckboxOption(column)
+                  }
+                }
+              }
+            }, [
+              h('span', {
+                class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
+              })
+            ])
+          ]),
+          h('td', {
+            class: 'vxe-table-custom-popup--column-fixed'
+          }, [
+            !parent && customOpts.allowFixed ? h('vxe-radio-group', {
+              props: {
+                value: column.fixed || '',
+                disabled: isMaxFixedColumn,
+                type: 'button',
+                size: 'mini',
+                options: [
+                  { label: '左侧', value: 'left' },
+                  { label: '不固定', value: '' },
+                  { label: '右侧', value: 'right' }
+                ]
+              },
+              on: {
+                input (value) {
+                  column.fixed = value
+                },
+                change () {
+                  _vm.changePopupFixedOption(column)
+                }
+              }
+            }) : null
+          ])
+        ])
+      )
+    }
+  })
+  return h('vxe-modal', {
+    key: 'popup',
+    props: {
+      className: 'vxe-table-custom-popup-warpper vxe-table--ignore-clear',
+      value: customStore.visible,
+      title: GlobalConfig.i18n('vxe.custom.cstmTitle'),
+      width: 700,
+      maxHeight: 500,
+      mask: true,
+      lockView: true,
+      showFooter: true,
+      escClosable: true
+    },
+    on: {
+      input (value) {
+        customStore.visible = value
+      }
+    },
+    scopedSlots: {
+      default: () => {
+        return h('div', {
+          class: 'vxe-table-custom-popup--body'
+        }, [
+          h('table', {
+          }, [
+            h('colgroup', {}, [
+              h('col'),
+              h('col', {
+                style: {
+                  width: '80px'
+                }
+              }),
+              h('col', {
+                style: {
+                  width: '200px'
+                }
+              })
+            ]),
+            h('thead', {}, [
+              h('tr', {}, [
+                h('th', {}, '标题'),
+                h('th', {}, '是否显示'),
+                h('th', {}, '是否固定')
+              ])
+            ]),
+            h('tbody', {}, trVNs)
+          ])
+        ])
+      },
+      footer: () => {
+        return h('div', {
+          class: 'vxe-table-custom-popup--footer'
+        }, [
+          h('vxe-button', {
+            props: {
+              content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.custom.cstmRestore')
+            },
+            on: {
+              click: _vm.resetPopupCustomEvent
+            }
+          }),
+          h('vxe-button', {
+            props: {
+              content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.custom.cstmCancel')
+            },
+            on: {
+              click: _vm.cancelCustomEvent
+            }
+          }),
+          h('vxe-button', {
+            props: {
+              status: 'primary',
+              content: customOpts.confirmButtonText || GlobalConfig.i18n('vxe.custom.cstmConfirm')
+            },
+            on: {
+              click: _vm.confirmCustomEvent
+            }
+          })
+        ])
+      }
+    }
+  })
+}
+
+export default {
+  name: 'VxeTableCustomPanel',
+  props: {
+    customStore: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  inject: {
+    $xetable: {
+      default: null
+    }
+  },
+  computed: {
+  },
+  render (h) {
+    const { $xetable } = this
+    const { customOpts } = $xetable
+    if (customOpts.mode === 'popup') {
+      return renderPopupPanel(h, this)
+    }
+    return renderSimplePanel(h, this)
+  },
+  methods: {
+    handleWrapperMouseenterEvent (evnt) {
+      const { $xetable, customStore } = this
+      customStore.activeWrapper = true
+      $xetable.customOpenEvent(evnt)
+    },
+    handleWrapperMouseleaveEvent  (evnt) {
+      const { $xetable, customStore } = this
+      customStore.activeWrapper = false
+      setTimeout(() => {
+        if (!customStore.activeBtn && !customStore.activeWrapper) {
+          $xetable.customColseEvent(evnt)
+        }
+      }, 300)
+    },
+    confirmCustomEvent  (evnt) {
+      const { $xetable } = this
+      $xetable.closeCustom()
+      $xetable.emitCustomEvent('confirm', evnt)
+    },
+    cancelCustomEvent  (evnt) {
+      const { $xetable } = this
+      $xetable.closeCustom()
+      $xetable.emitCustomEvent('cancel', evnt)
+    },
+    resetCustomEvent  (evnt) {
+      const { $xetable } = this
+      $xetable.resetColumn(true)
+      $xetable.closeCustom()
+      $xetable.emitCustomEvent('reset', evnt)
+    },
+    resetPopupCustomEvent  (evnt) {
+      this.resetCustomEvent(evnt)
+    },
+    handleOptionCheck (column) {
+      const { $xetable } = this
+      const { collectColumn } = $xetable
+      const matchObj = XEUtils.findTree(collectColumn, item => item === column)
+      if (matchObj && matchObj.parent) {
+        const { parent } = matchObj
+        if (parent.children && parent.children.length) {
+          parent.visible = parent.children.every((column) => column.visible)
+          parent.halfVisible = !parent.visible && parent.children.some((column) => column.visible || column.halfVisible)
+          this.handleOptionCheck(parent)
+        }
+      }
+    },
+    changeCheckboxOption (column) {
+      const { $xetable } = this
+      const { customOpts } = $xetable
+      const isChecked = !column.visible
+      XEUtils.eachTree([column], (item) => {
+        item.visible = isChecked
+        item.halfVisible = false
+      })
+      this.handleOptionCheck(column)
+      if (customOpts.immediate) {
+        $xetable.handleCustom()
+      }
+      $xetable.checkCustomStatus()
+    },
+    changeFixedOption  (column, colFixed) {
+      const { $xetable } = this
+      const { isMaxFixedColumn } = $xetable
+      if (column.fixed === colFixed) {
+        $xetable.clearColumnFixed(column)
+      } else {
+        if (!isMaxFixedColumn || column.fixed) {
+          $xetable.setColumnFixed(column, colFixed)
+        }
+      }
+    },
+    changePopupFixedOption  (column) {
+      const { $xetable } = this
+      const { isMaxFixedColumn } = $xetable
+      if (!isMaxFixedColumn) {
+        $xetable.setColumnFixed(column, column.fixed)
+      }
+    },
+    allCustomEvent () {
+      const { $xetable, customStore, collectColumn, customOpts } = this
+      const { checkMethod } = customOpts
+      const isAll = !customStore.isAll
+      XEUtils.eachTree(collectColumn, (column) => {
+        if (!checkMethod || checkMethod({ column })) {
+          column.visible = isAll
+          column.halfVisible = false
+        }
+      })
+      customStore.isAll = isAll
+      $xetable.checkCustomStatus()
+    }
+  }
+}

package/packages/edit/index.d.ts

@@ -1,4 +1,4 @@
-import { Edit } from '../../types/edit'
+import { VxeTableEditModule } from '../../types/module/edit'
 
-export * from '../../types/edit'
-export default Edit
+export * from '../../types/module/edit'
+export default VxeTableEditModule

package/packages/edit/index.js

@@ -2,11 +2,13 @@ import Table from '../table'
 import mixin from './src/mixin'
 import VXETable from '../v-x-e-table'
 
-export const Edit = {
+export const VxeTableEditModule = {
   install () {
     VXETable.reg('edit')
     Table.mixins.push(mixin)
   }
 }
 
-export default Edit
+export const Edit = VxeTableEditModule
+
+export default VxeTableEditModule

package/packages/edit/src/mixin.js

@@ -451,8 +451,12 @@ export default {
             } else {
               this._getColumnModel(row, column)
             }
+            const afterEditMethod = editOpts.afterEditMethod
             this.$nextTick(() => {
               this.handleFocus(params, evnt)
+              if (afterEditMethod) {
+                afterEditMethod({ ...params, $table: this, $grid: this.$xegrid })
+              }
             })
           }
           this.emitEvent(type, {

package/packages/export/index.d.ts

@@ -1,4 +1,4 @@
-import { Export } from '../../types/export'
+import { VxeTableExportModule } from '../../types/module/export'
 
-export * from '../../types/export'
-export default Export
+export * from '../../types/module/export'
+export default VxeTableExportModule

package/packages/export/index.js

@@ -13,7 +13,7 @@ export function print (options) {
   handlePrint(null, opts, opts.content)
 }
 
-export const Export = {
+export const VxeTableExportModule = {
   ExportPanel,
   ImportPanel,
   install (Vue) {
@@ -37,4 +37,6 @@ export const Export = {
   }
 }
 
-export default Export
+export const Export = VxeTableExportModule
+
+export default VxeTableExportModule

package/packages/export/src/export-panel.js

@@ -8,7 +8,7 @@ import VxeOption from '../../select/src/option'
 import UtilTools from '../../tools/utils'
 
 export default {
-  name: 'VxeExportPanel',
+  name: 'VxeTableExportPanel',
   props: {
     defaultOptions: Object,
     storeData: Object

package/packages/export/src/import-panel.js

@@ -5,7 +5,7 @@ import VxeRadio from '../../radio/src/radio'
 import UtilTools from '../../tools/utils'
 
 export default {
-  name: 'VxeImportPanel',
+  name: 'VxeTableImportPanel',
   props: {
     defaultOptions: Object,
     storeData: Object

package/packages/filter/index.d.ts

@@ -1,4 +1,4 @@
-import { Filter } from '../../types/filter'
+import { VxeTableFilterModule } from '../../types/module/filter'
 
-export * from '../../types/filter'
-export default Filter
+export * from '../../types/module/filter'
+export default VxeTableFilterModule