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

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

package/packages/filter/index.js

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

package/packages/filter/src/panel.js

@@ -5,7 +5,7 @@ import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../tools/vn'
 
 export default {
-  name: 'VxeTableFilter',
+  name: 'VxeTableFilterPanel',
   props: {
     filterStore: Object
   },

package/packages/form/index.d.ts

@@ -1,4 +1,4 @@
-import { Form } from '../../types/form'
+import { VxeForm } from '../../types/form'
 
 export * from '../../types/form'
-export default Form
+export default VxeForm

package/packages/form/index.js

@@ -1,9 +1,11 @@
-import VxeForm from './src/form'
+import VxeFormComponent from './src/form'
 
-export const Form = Object.assign(VxeForm, {
+export const VxeForm = Object.assign(VxeFormComponent, {
   install (Vue) {
-    Vue.component(VxeForm.name, VxeForm)
+    Vue.component(VxeFormComponent.name, VxeFormComponent)
   }
 })
 
-export default Form
+export const Form = VxeForm
+
+export default VxeForm

package/packages/form-gather/index.d.ts

@@ -1,4 +1,4 @@
-import { FormGather } from '../../types/form-gather'
+import { VxeFormGather } from '../../types/form-gather'
 
 export * from '../../types/form-gather'
-export default FormGather
+export default VxeFormGather

package/packages/form-gather/index.js

@@ -1,9 +1,11 @@
-import VxeFormGather from '../form/src/form-gather'
+import VxeFormGatherComponent from '../form/src/form-gather'
 
-export const FormGather = Object.assign(VxeFormGather, {
+export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
   install (Vue) {
-    Vue.component(VxeFormGather.name, VxeFormGather)
+    Vue.component(VxeFormGatherComponent.name, VxeFormGatherComponent)
   }
 })
 
-export default FormGather
+export const FormGather = VxeFormGather
+
+export default VxeFormGather

package/packages/form-item/index.d.ts

@@ -1,4 +1,4 @@
-import { FormItem } from '../../types/form-item'
+import { VxeFormItem } from '../../types/form-item'
 
 export * from '../../types/form-item'
-export default FormItem
+export default VxeFormItem

package/packages/form-item/index.js

@@ -1,9 +1,11 @@
-import VxeFormItem from '../form/src/form-item'
+import VxeFormItemComponent from '../form/src/form-item'
 
-export const FormItem = Object.assign(VxeFormItem, {
+export const VxeFormItem = Object.assign(VxeFormItemComponent, {
   install (Vue) {
-    Vue.component(VxeFormItem.name, VxeFormItem)
+    Vue.component(VxeFormItemComponent.name, VxeFormItemComponent)
   }
 })
 
-export default FormItem
+export const FormItem = VxeFormItem
+
+export default VxeFormItem

package/packages/grid/index.d.ts

@@ -1,4 +1,4 @@
-import { Grid } from '../../types/grid'
+import { VxeGrid } from '../../types/grid'
 
 export * from '../../types/grid'
-export default Grid
+export default VxeGrid

package/packages/grid/index.js

@@ -1,12 +1,14 @@
-import VxeGrid from './src/grid'
+import VxeGridComponent from './src/grid'
 import VXETable from '../v-x-e-table'
 
-export const Grid = Object.assign(VxeGrid, {
+export const VxeGrid = Object.assign(VxeGridComponent, {
   install (Vue) {
-    VXETable.Grid = VxeGrid
-    VXETable.GridComponent = VxeGrid
-    Vue.component(VxeGrid.name, VxeGrid)
+    VXETable.Grid = VxeGridComponent
+    VXETable.GridComponent = VxeGridComponent
+    Vue.component(VxeGridComponent.name, VxeGridComponent)
   }
 })
 
-export default Grid
+export const Grid = VxeGrid
+
+export default VxeGrid

package/packages/icon/index.d.ts

@@ -1,4 +1,4 @@
-import { Icon } from '../../types/icon'
+import { VxeIcon } from '../../types/icon'
 
 export * from '../../types/icon'
-export default Icon
+export default VxeIcon