vxe-table 3.7.10 → 3.8.0-beta.0

package/packages/button/src/button.js

@@ -27,6 +27,11 @@ export default {
     popupClassName: [String, Function],
     transfer: { type: Boolean, default: () => GlobalConfig.button.transfer }
   },
+  inject: {
+    $xebuttonggroup: {
+      default: null
+    }
+  },
   data () {
     return {
       inited: false,
@@ -47,8 +52,8 @@ export default {
   },
   created () {
     // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-    //   if (props.type === 'text') {
-    //     warnLog('vxe.error.delFunc', ['type=text', 'mode=text'])
+    //   if (this.type === 'text') {
+    //     warnLog('vxe.error.delProp', ['type=text', 'mode=text'])
     //   }
     // }
 
@@ -64,7 +69,7 @@ export default {
     GlobalEvent.off(this, 'mousewheel')
   },
   render (h) {
-    const { $scopedSlots, $listeners, className, popupClassName, inited, type, destroyOnClose, isFormBtn, status, btnType, vSize, name, disabled, loading, showPanel, animatVisible, panelPlacement } = this
+    const { $scopedSlots, className, popupClassName, inited, type, destroyOnClose, isFormBtn, status, btnType, vSize, name, disabled, loading, showPanel, animatVisible, panelPlacement } = this
     const downsSlot = $scopedSlots.dropdowns
     return downsSlot ? h('div', {
       class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: this }) : className) : '', {
@@ -87,10 +92,11 @@ export default {
           type: isFormBtn ? type : 'button',
           disabled: disabled || loading
         },
-        on: Object.assign({
+        on: {
           mouseenter: this.mouseenterTargetEvent,
-          mouseleave: this.mouseleaveEvent
-        }, XEUtils.objectMap($listeners, (cb, type) => evnt => this.$emit(type, { $event: evnt })))
+          mouseleave: this.mouseleaveEvent,
+          click: this.clickEvent
+        }
       }, this.renderContent(h).concat([
         h('i', {
           class: `vxe-button--dropdown-arrow ${GlobalConfig.icon.BUTTON_DROPDOWN}`
@@ -133,7 +139,9 @@ export default {
         type: isFormBtn ? type : 'button',
         disabled: disabled || loading
       },
-      on: XEUtils.objectMap($listeners, (cb, type) => evnt => this.$emit(type, { $event: evnt }))
+      on: {
+        click: this.clickEvent
+      }
     }, this.renderContent(h))
   },
   methods: {
@@ -190,6 +198,14 @@ export default {
         evnt.stopPropagation()
       }
     },
+    clickEvent (evnt) {
+      const { $xebuttonggroup } = this
+      if ($xebuttonggroup) {
+        $xebuttonggroup.handleClick({ name: this.name }, evnt)
+      } else {
+        this.$emit('click', { $event: evnt })
+      }
+    },
     clickDropdownEvent (evnt) {
       const dropdownElem = evnt.currentTarget
       const panelElem = this.$refs.panel

package/packages/button/src/group.js

@@ -0,0 +1,35 @@
+import GlobalConfig from '../../v-x-e-table/src/conf'
+
+export default {
+  name: 'VxeButtonGroup',
+  props: {
+    options: Array,
+    disabled: Boolean,
+    size: { type: String, default: () => GlobalConfig.buttonGroup.size || GlobalConfig.size }
+  },
+  provide () {
+    return {
+      $xebuttongroup: this
+    }
+  },
+  computed: {
+    vSize () {
+      return this.size || this.$parent.size || this.$parent.vSize
+    }
+  },
+  render (h) {
+    const { $scopedSlots, options } = this
+    const defaultSlot = $scopedSlots.default
+    return h('div', {
+      class: 'vxe-button-group'
+    }, defaultSlot ? defaultSlot.cell(this, {}) : (options ? options.map(item => h('vxe-button', { props: item })) : []))
+  },
+  methods: {
+    handleClick (params, evnt) {
+      const { options } = this
+      const { name } = params
+      const option = options ? options.find(item => item.name === name) : null
+      this.$emit('click', { ...params, option, $event: evnt })
+    }
+  }
+}

package/packages/button-group/index.d.ts

@@ -0,0 +1,4 @@
+import { ButtonGroup } from '../../types/button-group'
+
+export * from '../../types/button-group'
+export default ButtonGroup

package/packages/button-group/index.js

@@ -0,0 +1,9 @@
+import VxeButtonGroup from '../button/src/group'
+
+export const ButtonGroup = Object.assign(VxeButtonGroup, {
+  install (Vue) {
+    Vue.component(VxeButtonGroup.name, VxeButtonGroup)
+  }
+})
+
+export default ButtonGroup

package/packages/checkbox/src/group.js

@@ -5,9 +5,11 @@ export default {
   name: 'VxeCheckboxGroup',
   props: {
     value: Array,
+    options: Array,
+    optionProps: Object,
     disabled: Boolean,
     max: [String, Number],
-    size: { type: String, default: () => GlobalConfig.checkbox.size || GlobalConfig.size }
+    size: { type: String, default: () => GlobalConfig.checkboxGroup.size || GlobalConfig.size }
   },
   inject: {
     $xeform: {
@@ -32,13 +34,30 @@ export default {
         return value.length >= XEUtils.toNumber(max)
       }
       return false
+    },
+    propsOpts () {
+      return this.optionProps || {}
+    },
+    labelField () {
+      return this.propsOpts.label || 'label'
+    },
+    valueField () {
+      return this.propsOpts.value || 'value'
     }
   },
   render (h) {
-    const { $scopedSlots } = this
+    const { $scopedSlots, options, valueField, labelField } = this
+    const defaultSlot = $scopedSlots.default
     return h('div', {
       class: 'vxe-checkbox-group'
-    }, $scopedSlots.default ? $scopedSlots.default.call(this, {}) : [])
+    }, defaultSlot ? defaultSlot.call(this, {}) : (options ? options.map(item => {
+      return h('vxe-checkbox', {
+        props: {
+          label: item[valueField],
+          content: item[labelField]
+        }
+      })
+    }) : []))
   },
   methods: {
     handleChecked (params, evnt) {

package/packages/export/src/mixin.js

@@ -336,6 +336,7 @@ function createHtmlPage (opts, content) {
     '<head>',
     '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">',
     `<title>${opts.sheetName}</title>`,
+    '<style media="print">.vxe-page-break-before{page-break-before:always;}.vxe-page-break-after{page-break-after:always;}</style>',
     `<style>${defaultHtmlStyle}</style>`,
     style ? `<style>${style}</style>` : '',
     '</head>',

package/packages/footer/index.js

@@ -1,4 +1,4 @@
-import VxeTableFooter from './src/footer'
+import VxeTableFooter from '../table/src/footer'
 
 export const Footer = Object.assign(VxeTableFooter, {
   install (Vue) {

package/packages/header/index.js

@@ -1,4 +1,4 @@
-import VxeTableHeader from './src/header'
+import VxeTableHeader from '../table/src/header'
 
 export const Header = Object.assign(VxeTableHeader, {
   install (Vue) {

package/packages/radio/src/group.js

@@ -5,6 +5,8 @@ export default {
   name: 'VxeRadioGroup',
   props: {
     value: [String, Number, Boolean],
+    options: Array,
+    optionProps: Object,
     disabled: Boolean,
     strict: { type: Boolean, default: () => GlobalConfig.radioGroup.strict },
     size: { type: String, default: () => GlobalConfig.radioGroup.size || GlobalConfig.size }
@@ -25,6 +27,15 @@ export default {
   computed: {
     vSize () {
       return this.size || this.$parent.size || this.$parent.vSize
+    },
+    propsOpts () {
+      return this.optionProps || {}
+    },
+    labelField () {
+      return this.propsOpts.label || 'label'
+    },
+    valueField () {
+      return this.propsOpts.value || 'value'
     }
   },
   data () {
@@ -33,10 +44,18 @@ export default {
     }
   },
   render (h) {
-    const { $scopedSlots } = this
+    const { $scopedSlots, options, valueField, labelField } = this
+    const defaultSlot = $scopedSlots.default
     return h('div', {
       class: 'vxe-radio-group'
-    }, $scopedSlots.default ? $scopedSlots.default.call(this, {}) : [])
+    }, defaultSlot ? defaultSlot.call(this, {}) : (options ? options.map(item => {
+      return h('vxe-radio', {
+        props: {
+          label: item[valueField],
+          content: item[labelField]
+        }
+      })
+    }) : []))
   },
   methods: {
     handleChecked (params, evnt) {

package/packages/{header → table}/src/header.js

@@ -1,8 +1,7 @@
 import XEUtils from 'xe-utils'
 import UtilTools from '../../tools/utils'
 import DomTools from '../../tools/dom'
-import { convertToRows } from './util'
-import { getColReMinWidth } from '../../table/src/util'
+import { convertHeaderColumnToRows, getColReMinWidth } from './util'
 
 const cellType = 'header'
 
@@ -206,7 +205,7 @@ export default {
   methods: {
     uploadColumn () {
       const { $parent: $xetable } = this
-      this.headerColumn = $xetable.isGroup ? convertToRows(this.tableGroupColumn) : []
+      this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
     },
     resizeMousedown (evnt, params) {
       const { column } = params

package/packages/table/src/table.js

@@ -3,6 +3,7 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import VXETable from '../../v-x-e-table'
 import VxeTableBody from './body'
 import VxeTableHeader from '../../header'
+import VxeTableFooter from '../../footer'
 import vSize from '../../mixins/size'
 import { isEnableConf, getFuncText } from '../../tools/utils'
 import { createResizeEvent } from '../../tools/resize'
@@ -38,7 +39,7 @@ function renderFixed (h, $xetable, fixedType) {
       },
       ref: `${fixedType}Header`
     }) : _e(),
-    h('vxe-table-body', {
+    h(VxeTableBody, {
       props: {
         fixedType,
         tableData,
@@ -48,7 +49,7 @@ function renderFixed (h, $xetable, fixedType) {
       },
       ref: `${fixedType}Body`
     }),
-    showFooter ? h('vxe-table-footer', {
+    showFooter ? h(VxeTableFooter, {
       props: {
         footerTableData,
         tableColumn,
@@ -258,9 +259,6 @@ export default {
     // 额外的参数
     params: Object
   },
-  components: {
-    VxeTableBody
-  },
   provide () {
     return {
       $xetable: this,

package/packages/table/src/util.js

@@ -3,6 +3,69 @@ import XEUtils from 'xe-utils'
 import { ColumnInfo } from './columnInfo'
 import DomTools from '../../tools/dom'
 
+const getAllConvertColumns = (columns, parentColumn) => {
+  const result = []
+  columns.forEach((column) => {
+    column.parentId = parentColumn ? parentColumn.id : null
+    if (column.visible) {
+      if (column.children && column.children.length && column.children.some(column => column.visible)) {
+        result.push(column)
+        result.push(...getAllConvertColumns(column.children, column))
+      } else {
+        result.push(column)
+      }
+    }
+  })
+  return result
+}
+
+export const convertHeaderColumnToRows = (originColumns) => {
+  let maxLevel = 1
+  const traverse = (column, parent) => {
+    if (parent) {
+      column.level = parent.level + 1
+      if (maxLevel < column.level) {
+        maxLevel = column.level
+      }
+    }
+    if (column.children && column.children.length && column.children.some(column => column.visible)) {
+      let colSpan = 0
+      column.children.forEach((subColumn) => {
+        if (subColumn.visible) {
+          traverse(subColumn, column)
+          colSpan += subColumn.colSpan
+        }
+      })
+      column.colSpan = colSpan
+    } else {
+      column.colSpan = 1
+    }
+  }
+
+  originColumns.forEach((column) => {
+    column.level = 1
+    traverse(column)
+  })
+
+  const rows = []
+  for (let i = 0; i < maxLevel; i++) {
+    rows.push([])
+  }
+
+  const allColumns = getAllConvertColumns(originColumns)
+
+  allColumns.forEach((column) => {
+    if (column.children && column.children.length && column.children.some(column => column.visible)) {
+      column.rowSpan = 1
+    } else {
+      column.rowSpan = maxLevel - column.level + 1
+    }
+    rows[column.level - 1].push(column)
+  })
+
+  return rows
+}
+
 const lineOffsetSizes = {
   mini: 3,
   small: 2,

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

@@ -327,6 +327,9 @@ export default {
     // size: null,
     // transfer: false
   },
+  buttonGroup: {
+    // size: null
+  },
   radio: {
     // size: null,
     strict: true
@@ -342,6 +345,9 @@ export default {
   checkbox: {
     // size: null
   },
+  checkboxGroup: {
+    // size: null
+  },
   switch: {
     // size: null
   },