vxe-table 3.8.22 → 3.8.23

package/packages/custom/src/panel.js

@@ -3,6 +3,7 @@ import UtilTools from '../../tools/utils'
 import DomTools from '../../tools/dom'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import XEUtils from 'xe-utils'
+import VxeButtonComponent from '../../button/src/button'
 
 const { formatText } = UtilTools
 const { addClass, removeClass } = DomTools
@@ -24,7 +25,7 @@ function updateDropHint (_vm, evnt) {
 }
 
 const renderSimplePanel = (h, _vm) => {
-  const { _e, $xetable, customStore } = _vm
+  const { _e, $xetable, customStore, dragColumn } = _vm
   const { customColumnList, customOpts, isMaxFixedColumn } = $xetable
   const { maxHeight } = customStore
   const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts
@@ -43,6 +44,7 @@ const renderSimplePanel = (h, _vm) => {
       const isColGroup = column.children && column.children.length
       const colTitle = formatText(column.getTitle(), 1)
       const isDisabled = checkMethod ? !checkMethod({ column }) : false
+      const isHidden = !isChecked
       colVNs.push(
         h('li', {
           key: column.id,
@@ -50,6 +52,7 @@ const renderSimplePanel = (h, _vm) => {
             colid: column.id
           },
           class: ['vxe-table-custom--option', `level--${column.level}`, {
+            'is--hidden': isHidden,
             'is--group': isColGroup
           }],
           on: {
@@ -84,11 +87,13 @@ const renderSimplePanel = (h, _vm) => {
               class: 'vxe-table-custom--sort-option'
             }, [
               h('span', {
-                class: 'vxe-table-custom--sort-btn',
+                class: ['vxe-table-custom--sort-btn', {
+                  'is--disabled': isHidden
+                }],
                 attrs: {
                   title: GlobalConfig.i18n('vxe.custom.setting.sortHelpTip')
                 },
-                on: {
+                on: isHidden ? {} : {
                   mousedown: _vm.sortMousedownEvent,
                   mouseup: _vm.sortMouseupEvent
                 }
@@ -99,22 +104,30 @@ const renderSimplePanel = (h, _vm) => {
               ])
             ])
             : _e(),
-          h('div', {
-            class: 'vxe-table-custom--checkbox-label',
-            attrs: {
-              title: colTitle
-            }
-          }, colTitle),
+          column.type === 'html'
+            ? h('div', {
+              key: '1',
+              class: 'vxe-table-custom--checkbox-label',
+              domProps: {
+                innerHTML: colTitle
+              }
+            }) : h('div', {
+              key: '0',
+              class: 'vxe-table-custom--checkbox-label',
+              attrs: {
+                title: colTitle
+              }
+            }, colTitle),
           !parent && allowFixed
             ? h('div', {
               class: 'vxe-table-custom--fixed-option'
             }, [
-              h('span', {
-                class: ['vxe-table-custom--fixed-left-option', column.renderFixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
-                  'is--checked': column.renderFixed === 'left',
-                  'is--disabled': isMaxFixedColumn && !column.renderFixed
-                }],
-                attrs: {
+              h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  icon: column.renderFixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT,
+                  status: column.renderFixed === 'left' ? 'primary' : '',
+                  disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
                   title: GlobalConfig.i18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
                 },
                 on: {
@@ -123,16 +136,15 @@ const renderSimplePanel = (h, _vm) => {
                   }
                 }
               }),
-              h('span', {
-                class: ['vxe-table-custom--fixed-right-option', column.renderFixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
-                  'is--checked': column.renderFixed === 'right',
-                  'is--disabled': isMaxFixedColumn && !column.renderFixed
-                }],
-                attrs: {
+              h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  icon: column.renderFixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT,
+                  status: column.renderFixed === 'right' ? 'primary' : '',
+                  disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
                   title: GlobalConfig.i18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
                 },
                 on: {
-
                   click: () => {
                     _vm.changeFixedOption(column, 'right')
                   }
@@ -174,7 +186,7 @@ const renderSimplePanel = (h, _vm) => {
                   title: GlobalConfig.i18n('vxe.table.allTitle')
                 },
                 on: {
-                  click: _vm.allCustomEvent
+                  click: _vm.allOptionEvent
                 }
               }, [
                 h('span', {
@@ -203,32 +215,52 @@ const renderSimplePanel = (h, _vm) => {
           h('div', {
             ref: 'dragHintElemRef',
             class: 'vxe-table-custom-popup--drag-hint'
-          }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
+          }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))
         ]),
         customOpts.showFooter
           ? h('div', {
             class: 'vxe-table-custom--footer'
           }, [
-            h('button', {
-              class: 'btn--reset',
+            h(VxeButtonComponent, {
+              props: {
+                mode: 'text',
+                content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customRestore')
+              },
               on: {
                 click: _vm.resetCustomEvent
               }
-            }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customRestore')),
+            }),
             customOpts.immediate
-              ? _e()
-              : h('button', {
-                class: 'btn--cancel',
+              ? h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  content: customOpts.closeButtonText || GlobalConfig.i18n('vxe.table.customClose')
+                },
+                on: {
+                  click: _vm.cancelCloseEvent
+                }
+              })
+              : h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customCancel')
+                },
                 on: {
                   click: _vm.cancelCustomEvent
                 }
-              }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.table.customCancel')),
-            h('button', {
-              class: 'btn--confirm',
-              on: {
-                click: _vm.confirmCustomEvent
-              }
-            }, customOpts.confirmButtonText || GlobalConfig.i18n('vxe.table.customConfirm'))
+              }),
+            customOpts.immediate
+              ? _e()
+              : h(VxeButtonComponent, {
+                props: {
+                  mode: 'text',
+                  status: 'primary',
+                  content: customOpts.confirmButtonText || GlobalConfig.i18n('vxe.table.customConfirm')
+                },
+                on: {
+                  click: _vm.confirmCustomEvent
+                }
+              })
           ])
           : null
       ]
@@ -250,6 +282,7 @@ const renderPopupPanel = (h, _vm) => {
       const colTitle = formatText(column.getTitle(), 1)
       const isColGroup = column.children && column.children.length
       const isDisabled = checkMethod ? !checkMethod({ column }) : false
+      const isHidden = !isChecked
       trVNs.push(
         h('tr', {
           key: column.id,
@@ -296,11 +329,13 @@ const renderPopupPanel = (h, _vm) => {
             }, [
               column.level === 1
                 ? h('span', {
-                  class: 'vxe-table-custom-popup--column-sort-btn',
+                  class: ['vxe-table-custom-popup--column-sort-btn', {
+                    'is--disabled': isHidden
+                  }],
                   attrs: {
                     title: GlobalConfig.i18n('vxe.custom.setting.sortHelpTip')
                   },
-                  on: {
+                  on: isHidden ? {} : {
                     mousedown: _vm.sortMousedownEvent,
                     mouseup: _vm.sortMouseupEvent
                   }
@@ -315,22 +350,31 @@ const renderPopupPanel = (h, _vm) => {
           h('td', {
             class: 'vxe-table-custom-popup--column-item col--name'
           }, [
-            h('div', {
-              class: 'vxe-table-custom-popup--name',
-              attrs: {
-                title: colTitle
-              }
-            }, colTitle)
+            column.type === 'html'
+              ? h('div', {
+                key: '1',
+                class: 'vxe-table-custom-popup--name',
+                domProps: {
+                  innerHTML: colTitle
+                }
+              }) : h('div', {
+                key: '0',
+                class: 'vxe-table-custom-popup--name',
+                attrs: {
+                  title: colTitle
+                }
+              }, colTitle)
           ]),
           allowResizable
             ? h('td', {
               class: 'vxe-table-custom-popup--column-item col--resizable'
             }, [
-              !isChecked || (column.children && column.children.length)
+              column.children && column.children.length
                 ? h('span', '-')
                 : h('vxe-input', {
                   props: {
                     type: 'integer',
+                    disabled: isHidden,
                     value: column.renderResizeWidth
                   },
                   on: {
@@ -352,19 +396,17 @@ const renderPopupPanel = (h, _vm) => {
                     value: column.renderFixed || '',
                     type: 'button',
                     size: 'mini',
+                    disabled: isHidden,
                     options: [
-                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
-                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '' },
-                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
+                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isHidden || isMaxFixedColumn },
+                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isHidden },
+                      { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isHidden || isMaxFixedColumn }
                     ]
                   },
                   on: {
                     input (value) {
                       column.renderFixed = value
                     }
-                  // onChange () {
-                  //   changePopupFixedOption(column)
-                  // }
                   }
                 })
             ])
@@ -453,7 +495,7 @@ const renderPopupPanel = (h, _vm) => {
                         title: GlobalConfig.i18n('vxe.table.allTitle')
                       },
                       on: {
-                        click: _vm.allCustomEvent
+                        click: _vm.allOptionEvent
                       }
 
                     }, [
@@ -514,7 +556,7 @@ const renderPopupPanel = (h, _vm) => {
         return h('div', {
           class: 'vxe-table-custom-popup--footer'
         }, [
-          h('vxe-button', {
+          h(VxeButtonComponent, {
             props: {
               content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.custom.cstmRestore')
             },
@@ -522,7 +564,7 @@ const renderPopupPanel = (h, _vm) => {
               click: _vm.resetCustomEvent
             }
           }),
-          h('vxe-button', {
+          h(VxeButtonComponent, {
             props: {
               content: customOpts.resetButtonText || GlobalConfig.i18n('vxe.custom.cstmCancel')
             },
@@ -530,7 +572,7 @@ const renderPopupPanel = (h, _vm) => {
               click: _vm.cancelCustomEvent
             }
           }),
-          h('vxe-button', {
+          h(VxeButtonComponent, {
             props: {
               status: 'primary',
               content: customOpts.confirmButtonText || GlobalConfig.i18n('vxe.custom.cstmConfirm')
@@ -621,6 +663,11 @@ export default {
       $xetable.emitCustomEvent('confirm', evnt)
       $xetable.saveCustomStore('confirm')
     },
+    cancelCloseEvent ({ $event }) {
+      const { $xetable } = this
+      $xetable.closeCustom()
+      $xetable.emitCustomEvent('cancel', $event)
+    },
     cancelCustomEvent  (evnt) {
       const { $xetable } = this
       const { customStore, customOpts, customColumnList } = $xetable
@@ -701,49 +748,73 @@ export default {
       const { $xetable } = this
       const { customOpts } = $xetable
       const isChecked = !column.renderVisible
-      XEUtils.eachTree([column], (item) => {
-        item.renderVisible = isChecked
-        item.halfVisible = false
-      })
-      this.handleOptionCheck(column)
       if (customOpts.immediate) {
+        XEUtils.eachTree([column], (item) => {
+          item.visible = isChecked
+          item.renderVisible = isChecked
+          item.halfVisible = false
+        })
         $xetable.handleCustom()
         $xetable.saveCustomStore('update:visible')
+      } else {
+        XEUtils.eachTree([column], (item) => {
+          item.renderVisible = isChecked
+          item.halfVisible = false
+        })
       }
+      this.handleOptionCheck(column)
       $xetable.checkCustomStatus()
     },
     changeFixedOption  (column, colFixed) {
       const { $xetable } = this
-      const { isMaxFixedColumn } = $xetable
-      if (column.renderFixed === colFixed) {
-        column.renderFixed = ''
-        // $xeTable.clearColumnFixed(column)
+      const { isMaxFixedColumn, customOpts } = $xetable
+      if (customOpts.immediate) {
+        if (column.renderFixed === colFixed) {
+          column.fixed = ''
+          column.renderFixed = ''
+        } else {
+          if (!isMaxFixedColumn || column.renderFixed) {
+            column.fixed = colFixed
+            column.renderFixed = colFixed
+          }
+        }
+        $xetable.handleCustom()
+        $xetable.saveCustomStore('update:fixed')
       } else {
-        if (!isMaxFixedColumn || column.renderFixed) {
-          column.renderFixed = colFixed
-          // $xeTable.setColumnFixed(column, colFixed)
+        if (column.renderFixed === colFixed) {
+          column.renderFixed = ''
+        } else {
+          if (!isMaxFixedColumn || column.renderFixed) {
+            column.renderFixed = colFixed
+          }
         }
       }
     },
-    // changePopupFixedOption  (column) {
-    //   const { $xetable } = this
-    //   const { isMaxFixedColumn } = $xetable
-    //   if (!isMaxFixedColumn) {
-    //     $xetable.setColumnFixed(column, column.fixed)
-    //   }
-    // },
-    allCustomEvent () {
+    allOptionEvent () {
       const { $xetable, customStore } = this
-      const { customOpts, customColumnList } = $xetable
+      const { customColumnList, customOpts } = $xetable
       const { checkMethod } = customOpts
       const isAll = !customStore.isAll
-      XEUtils.eachTree(customColumnList, (column) => {
-        if (!checkMethod || checkMethod({ column })) {
-          column.renderVisible = isAll
-          column.halfVisible = false
-        }
-      })
-      customStore.isAll = isAll
+      if (customOpts.immediate) {
+        XEUtils.eachTree(customColumnList, (column) => {
+          if (!checkMethod || checkMethod({ column })) {
+            column.visible = isAll
+            column.renderVisible = isAll
+            column.halfVisible = false
+          }
+        })
+        customStore.isAll = isAll
+        $xetable.handleCustom()
+        $xetable.saveCustomStore('update:visible')
+      } else {
+        XEUtils.eachTree(customColumnList, (column) => {
+          if (!checkMethod || checkMethod({ column })) {
+            column.renderVisible = isAll
+            column.halfVisible = false
+          }
+        })
+        customStore.isAll = isAll
+      }
       $xetable.checkCustomStatus()
     },
     sortMousedownEvent (evnt) {
@@ -777,7 +848,7 @@ export default {
     },
     sortDragendEvent (evnt) {
       const { $xetable, prevDropTrEl } = this
-      const { customColumnList } = $xetable
+      const { customColumnList, customOpts } = $xetable
       const trEl = evnt.currentTarget
       const dragHintEl = this.$refs.dragHintElemRef
       if (prevDropTrEl) {
@@ -813,6 +884,17 @@ export default {
       }
       removeClass(trEl, 'active--drag-target')
       removeClass(trEl, 'active--drag-origin')
+
+      if (customOpts.immediate) {
+        XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
+          if (!parent) {
+            const sortIndex = index + 1
+            column.renderSortNumber = sortIndex
+          }
+        })
+        $xetable.handleCustom()
+        $xetable.saveCustomStore('update:sort')
+      }
     },
     sortDragoverEvent  (evnt) {
       const { $xetable, prevDropTrEl } = this

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

@@ -56,6 +56,7 @@ export default {
       const isColGroup = column.children && column.children.length
       const isChecked = column.checked
       const indeterminate = column.halfChecked
+      const isHtml = column.type === 'html'
       cols.push(
         h('li', {
           class: ['vxe-export--panel-column-option', `level--${column.level}`, {
@@ -78,9 +79,16 @@ export default {
           h('span', {
             class: ['vxe-checkbox--icon', indeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
           }),
-          h('span', {
-            class: 'vxe-checkbox--label'
-          }, colTitle)
+          isHtml
+            ? h('span', {
+              key: '1',
+              class: 'vxe-checkbox--label',
+              innerHTML: colTitle
+            })
+            : h('span', {
+              key: '0',
+              class: 'vxe-checkbox--label'
+            }, colTitle)
         ])
       )
     })

package/packages/form/src/form.js

@@ -159,9 +159,6 @@ export default {
         [`size--${vSize}`]: vSize,
         'is--loading': loading
       }],
-      attrs: {
-        spellcheck: false
-      },
       on: {
         submit: this.submitEvent,
         reset: this.resetEvent

package/packages/input/src/input.js

@@ -1297,11 +1297,18 @@ export default {
         const isShiftKey = evnt.shiftKey
         const isAltKey = evnt.altKey
         const keyCode = evnt.keyCode
+        const isEsc = keyCode === 27
+        const isUpArrow = keyCode === 38
+        const isDwArrow = keyCode === 40
         if (!isCtrlKey && !isShiftKey && !isAltKey && (keyCode === 32 || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) {
           evnt.preventDefault()
         }
-        if (controls) {
-          this.numberKeydownEvent(evnt)
+        if (isEsc) {
+          this.afterCheckValue()
+        } else if (isUpArrow || isDwArrow) {
+          if (controls) {
+            this.numberKeydownEvent(evnt)
+          }
         }
       }
       this.triggerEvent(evnt)