vxe-table 4.7.71 → 4.7.73

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

@@ -35,7 +35,7 @@ export default defineComponent({
     const bodyElemRef = ref() as Ref<HTMLDivElement>
     const dragHintElemRef = ref() as Ref<HTMLDivElement>
 
-    const dragColumn = ref<VxeTableDefines.ColumnInfo | null>()
+    const dragColumnRef = ref<VxeTableDefines.ColumnInfo | null>()
 
     let prevDropTrEl: any
 
@@ -86,6 +86,11 @@ export default defineComponent({
       $xeTable.saveCustomStore('confirm')
     }
 
+    const cancelCloseEvent: VxeButtonEvents.Click = ({ $event }) => {
+      $xeTable.closeCustom()
+      $xeTable.emitCustomEvent('close', $event)
+    }
+
     const cancelCustomEvent: VxeButtonEvents.Click = ({ $event }) => {
       const { customStore } = props
       const { customColumnList } = reactData
@@ -153,51 +158,76 @@ export default defineComponent({
     const changeCheckboxOption = (column: VxeTableDefines.ColumnInfo) => {
       const isChecked = !column.renderVisible
       const customOpts = computeCustomOpts.value
-      XEUtils.eachTree([column], (item) => {
-        item.renderVisible = isChecked
-        item.halfVisible = false
-      })
-      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
+        })
       }
+      handleOptionCheck(column)
       $xeTable.checkCustomStatus()
     }
 
     const changeFixedOption = (column: VxeTableDefines.ColumnInfo, colFixed: VxeColumnPropTypes.Fixed) => {
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
-      if (column.renderFixed === colFixed) {
-        column.renderFixed = ''
-        // $xeTable.clearColumnFixed(column)
+      const customOpts = computeCustomOpts.value
+      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
+          }
         }
       }
     }
 
-    // const changePopupFixedOption = () => {
-    //   const isMaxFixedColumn = computeIsMaxFixedColumn.value
-    //   if (!isMaxFixedColumn) {
-    //     // $xeTable.setColumnFixed(column, column.fixed)
-    //   }
-    // }
-
     const allOptionEvent = () => {
       const { customStore } = props
       const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
       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()
     }
 
@@ -208,7 +238,7 @@ export default defineComponent({
       const colid = trEl.getAttribute('colid')
       const column = $xeTable.getColumnById(colid)
       trEl.draggable = true
-      dragColumn.value = column
+      dragColumnRef.value = column
       addClass(trEl, 'active--drag-origin')
     }
 
@@ -218,7 +248,7 @@ export default defineComponent({
       const trEl = tdEl.parentNode as HTMLElement
       const dragHintEl = dragHintElemRef.value
       trEl.draggable = false
-      dragColumn.value = null
+      dragColumnRef.value = null
       removeClass(trEl, 'active--drag-origin')
       if (dragHintEl) {
         dragHintEl.style.display = ''
@@ -234,6 +264,7 @@ export default defineComponent({
 
     const sortDragendEvent = (evnt: DragEvent) => {
       const { customColumnList } = reactData
+      const customOpts = computeCustomOpts.value
       const trEl = evnt.currentTarget as HTMLElement
       const dragHintEl = dragHintElemRef.value
       if (prevDropTrEl) {
@@ -261,7 +292,7 @@ export default defineComponent({
         prevDropTrEl.removeAttribute('drag-pos')
         removeClass(prevDropTrEl, 'active--drag-target')
       }
-      dragColumn.value = null
+      dragColumnRef.value = null
       trEl.draggable = false
       trEl.removeAttribute('drag-pos')
       if (dragHintEl) {
@@ -269,6 +300,17 @@ export default defineComponent({
       }
       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')
+      }
     }
 
     const sortDragoverEvent = (evnt: DragEvent) => {
@@ -327,6 +369,7 @@ export default defineComponent({
           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,
@@ -362,10 +405,16 @@ export default defineComponent({
                   class: 'vxe-table-custom--sort-option'
                 }, [
                   h('span', {
-                    class: 'vxe-table-custom--sort-btn',
+                    class: ['vxe-table-custom--sort-btn', {
+                      'is--disabled': isHidden
+                    }],
                     title: getI18n('vxe.custom.setting.sortHelpTip'),
-                    onMousedown: sortMousedownEvent,
-                    onMouseup: sortMouseupEvent
+                    ...(isHidden
+                      ? {}
+                      : {
+                          onMousedown: sortMousedownEvent,
+                          onMouseup: sortMouseupEvent
+                        })
                   }, [
                     h('i', {
                       class: getIcon().TABLE_CUSTOM_SORT
@@ -373,34 +422,44 @@ export default defineComponent({
                   ])
                 ])
                 : createCommentVNode(),
-              h('div', {
-                class: 'vxe-table-custom--checkbox-label',
-                title: colTitle
-              }, colTitle),
+              column.type === 'html'
+                ? h('div', {
+                  key: '1',
+                  class: 'vxe-table-custom--checkbox-label',
+                  innerHTML: colTitle
+                })
+                : h('div', {
+                  key: '0',
+                  class: 'vxe-table-custom--checkbox-label'
+                }, colTitle),
               !parent && allowFixed
                 ? h('div', {
                   class: 'vxe-table-custom--fixed-option'
                 }, [
-                  h('span', {
-                    class: ['vxe-table-custom--fixed-left-option', column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT, {
-                      'is--checked': column.renderFixed === 'left',
-                      'is--disabled': isMaxFixedColumn && !column.renderFixed
-                    }],
-                    title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
-                    onClick: () => {
-                      changeFixedOption(column, 'left')
-                    }
-                  }),
-                  h('span', {
-                    class: ['vxe-table-custom--fixed-right-option', column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT, {
-                      'is--checked': column.renderFixed === 'right',
-                      'is--disabled': isMaxFixedColumn && !column.renderFixed
-                    }],
-                    title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
-                    onClick: () => {
-                      changeFixedOption(column, 'right')
-                    }
-                  })
+                  VxeUIButtonComponent
+                    ? h(VxeUIButtonComponent, {
+                      mode: 'text',
+                      icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
+                      status: column.renderFixed === 'left' ? 'primary' : '',
+                      disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                      title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
+                      onClick: () => {
+                        changeFixedOption(column, 'left')
+                      }
+                    })
+                    : createCommentVNode(),
+                  VxeUIButtonComponent
+                    ? h(VxeUIButtonComponent, {
+                      mode: 'text',
+                      icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
+                      status: column.renderFixed === 'right' ? 'primary' : '',
+                      disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                      title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
+                      onClick: () => {
+                        changeFixedOption(column, 'right')
+                      }
+                    })
+                    : createCommentVNode()
                 ])
                 : createCommentVNode()
             ])
@@ -409,6 +468,7 @@ export default defineComponent({
       })
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const dragColumn = dragColumnRef.value
       return h('div', {
         ref: refElem,
         key: 'simple',
@@ -464,26 +524,44 @@ export default defineComponent({
               h('div', {
                 ref: dragHintElemRef,
                 class: 'vxe-table-custom-popup--drag-hint'
-              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))
             ]),
             customOpts.showFooter
               ? h('div', {
                 class: 'vxe-table-custom--footer'
               }, [
-                h('button', {
-                  class: 'btn--reset',
-                  onClick: resetCustomEvent
-                }, customOpts.resetButtonText || getI18n('vxe.table.customRestore')),
+                VxeUIButtonComponent
+                  ? h(VxeUIButtonComponent, {
+                    mode: 'text',
+                    content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+                    onClick: resetCustomEvent
+                  })
+                  : createCommentVNode(),
+                customOpts.immediate
+                  ? (VxeUIButtonComponent
+                      ? h(VxeUIButtonComponent, {
+                        mode: 'text',
+                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                        onClick: cancelCloseEvent
+                      })
+                      : createCommentVNode())
+                  : (VxeUIButtonComponent
+                      ? h(VxeUIButtonComponent, {
+                        mode: 'text',
+                        content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                        onClick: cancelCustomEvent
+                      })
+                      : createCommentVNode()),
                 customOpts.immediate
                   ? createCommentVNode()
-                  : h('button', {
-                    class: 'btn--cancel',
-                    onClick: cancelCustomEvent
-                  }, customOpts.resetButtonText || getI18n('vxe.table.customCancel')),
-                h('button', {
-                  class: 'btn--confirm',
-                  onClick: confirmCustomEvent
-                }, customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'))
+                  : (VxeUIButtonComponent
+                      ? h(VxeUIButtonComponent, {
+                        mode: 'text',
+                        status: 'primary',
+                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                        onClick: confirmCustomEvent
+                      })
+                      : createCommentVNode())
               ])
               : null
           ]
@@ -510,6 +588,7 @@ export default defineComponent({
           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,
@@ -550,10 +629,16 @@ export default defineComponent({
                 }, [
                   column.level === 1
                     ? h('span', {
-                      class: 'vxe-table-custom-popup--column-sort-btn',
+                      class: ['vxe-table-custom-popup--column-sort-btn', {
+                        'is--disabled': isHidden
+                      }],
                       title: getI18n('vxe.custom.setting.sortHelpTip'),
-                      onMousedown: sortMousedownEvent,
-                      onMouseup: sortMouseupEvent
+                      ...(isHidden
+                        ? {}
+                        : {
+                            onMousedown: sortMousedownEvent,
+                            onMouseup: sortMouseupEvent
+                          })
                     }, [
                       h('i', {
                         class: getIcon().TABLE_CUSTOM_SORT
@@ -565,21 +650,29 @@ export default defineComponent({
               h('td', {
                 class: 'vxe-table-custom-popup--column-item col--name'
               }, [
-                h('div', {
-                  class: 'vxe-table-custom-popup--name',
-                  title: colTitle
-                }, colTitle)
+                column.type === 'html'
+                  ? h('div', {
+                    key: '1',
+                    class: 'vxe-table-custom-popup--name',
+                    innerHTML: colTitle
+                  })
+                  : h('div', {
+                    key: '0',
+                    class: 'vxe-table-custom-popup--name',
+                    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', '-')
                     : (
                         VxeUIInputComponent
                           ? h(VxeUIInputComponent, {
                             type: 'integer',
+                            disabled: isHidden,
                             modelValue: column.renderResizeWidth,
                             'onUpdate:modelValue' (value: any) {
                               column.renderResizeWidth = Math.max(0, Number(value))
@@ -601,17 +694,15 @@ export default defineComponent({
                             modelValue: column.renderFixed || '',
                             type: 'button',
                             size: 'mini',
+                            disabled: isHidden,
                             options: [
-                              { label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
-                              { label: getI18n('vxe.custom.setting.fixedUnset'), value: '' },
-                              { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
+                              { label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isHidden || isMaxFixedColumn },
+                              { label: getI18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isHidden },
+                              { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isHidden || isMaxFixedColumn }
                             ],
                             'onUpdate:modelValue' (value: any) {
                               column.renderFixed = value
                             }
-                          // onChange () {
-                          //   changePopupFixedOption(column)
-                          // }
                           })
                           : createCommentVNode()
                       )
@@ -623,6 +714,7 @@ export default defineComponent({
       })
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const dragColumn = dragColumnRef.value
       const scopedSlots = {
         default: () => {
           return h('div', {
@@ -730,7 +822,7 @@ export default defineComponent({
             h('div', {
               ref: dragHintElemRef,
               class: 'vxe-table-custom-popup--drag-hint'
-            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))
           ])
         },
         footer: () => {

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

@@ -171,15 +171,17 @@ export default defineComponent({
         const isColGroup = column.children && column.children.length
         const isChecked = column.checked
         const indeterminate = column.halfChecked
+        const isHtml = column.type === 'html'
         cols.push(
           h('li', {
+            key: column.id,
             class: ['vxe-export--panel-column-option', `level--${column.level}`, {
               'is--group': isColGroup,
               'is--checked': isChecked,
               'is--indeterminate': indeterminate,
               'is--disabled': column.disabled
             }],
-            title: colTitle,
+            title: isHtml ? '' : colTitle,
             onClick: () => {
               if (!column.disabled) {
                 changeOption(column)
@@ -189,9 +191,16 @@ export default defineComponent({
             h('span', {
               class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().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/styles/components/table-module/custom.scss

@@ -141,24 +141,9 @@
   flex-direction: row;
   flex-shrink: 0;
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);
-  text-align: right;
   button {
-    background-color: transparent;
-    width: 50%;
+    flex-grow: 1;
     height: 2.8em;
-    border: 0;
-    color: var(--vxe-ui-font-color);
-    text-align: center;
-    cursor: pointer;
-    &:focus {
-      outline: none;
-    }
-    &:hover {
-      color: var(--vxe-ui-font-primary-lighten-color);
-    }
-  }
-  .btn--confirm {
-    color: var(--vxe-ui-font-primary-color);
   }
 }
 
@@ -180,9 +165,15 @@
 .vxe-table-custom--sort-btn {
   padding-left: 0.2em;
   padding-right: 0.4em;
-  cursor: grabbing;
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
+  &:not(.is--disabled) {
+    cursor: grabbing;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
   }
 }
 .vxe-table-custom--checkbox-label  {
@@ -201,22 +192,6 @@
   user-select: none;
 }
 
-.vxe-table-custom--fixed-left-option,
-.vxe-table-custom--fixed-right-option {
-  line-height: 1.34em;
-  font-size: 1.1em;
-  padding: 0 0.2em;
-  cursor: pointer;
-  &.is--checked,
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
-  }
-  &.is--disabled {
-    cursor: no-drop;
-    color: var(--vxe-ui-input-disabled-color);
-  }
-}
-
 .vxe-table-custom-popup--body {
   overflow: auto;
   height: 100%;
@@ -381,12 +356,18 @@
 .vxe-table-custom-popup--column-sort-btn {
   font-size: 1.2em;
   padding: 0.2em 0.5em;
-  cursor: grab;
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
+  &:not(.is--disabled) {
+    cursor: grab;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+    &:active {
+      cursor: grabbing;
+    }
   }
-  &:active {
-    cursor: grabbing;
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
   }
 }