vxe-table 4.7.42 → 4.7.43

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

@@ -5,7 +5,7 @@ import { addClass, removeClass } from '../../../ui/src/dom'
 import { errLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
 
-import type { VxeModalComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeTooltipComponent, VxeInputComponent } from 'vxe-pc-ui'
+import type { VxeModalComponent, VxeDrawerComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeTooltipComponent, VxeInputComponent } from 'vxe-pc-ui'
 import type { VxeTableDefines, VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeColumnPropTypes } from '../../../../types'
 
 const { getI18n, getIcon } = VxeUI
@@ -20,6 +20,7 @@ export default defineComponent({
   },
   setup (props) {
     const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
+    const VxeUIDrawerComponent = VxeUI.getComponent<VxeDrawerComponent>('VxeDrawer')
     const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
     const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
     const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
@@ -493,10 +494,12 @@ export default defineComponent({
       const { customStore } = props
       const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
-      const { modalOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts
+      const { modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts
       const columnOpts = computeColumnOpts.value
       const { maxFixedSize } = columnOpts
+      const { mode } = customOpts
       const modalOpts = Object.assign({}, modalOptions)
+      const drawerOpts = Object.assign({}, drawerOptions)
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
       const trVNs: VNode[] = []
       XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
@@ -621,15 +624,168 @@ export default defineComponent({
       })
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const scopedSlots = {
+        default: () => {
+          return h('div', {
+            ref: bodyElemRef,
+            class: 'vxe-table-custom-popup--body'
+          }, [
+            h('div', {
+              class: 'vxe-table-custom-popup--table-wrapper'
+            }, [
+              h('table', {}, [
+                h('colgroup', {}, [
+                  allowVisible
+                    ? h('col', {
+                      style: {
+                        width: '80px'
+                      }
+                    })
+                    : createCommentVNode(),
+                  allowSort
+                    ? h('col', {
+                      style: {
+                        width: '80px'
+                      }
+                    })
+                    : createCommentVNode(),
+                  h('col', {
+                    style: {
+                      minWidth: '120px'
+                    }
+                  }),
+                  allowResizable
+                    ? h('col', {
+                      style: {
+                        width: '140px'
+                      }
+                    })
+                    : createCommentVNode(),
+                  allowFixed
+                    ? h('col', {
+                      style: {
+                        width: '200px'
+                      }
+                    })
+                    : createCommentVNode()
+                ]),
+                h('thead', {}, [
+                  h('tr', {}, [
+                    allowVisible
+                      ? h('th', {}, [
+                        h('div', {
+                          class: ['vxe-table-custom--checkbox-option', {
+                            'is--checked': isAllChecked,
+                            'is--indeterminate': isAllIndeterminate
+                          }],
+                          title: getI18n('vxe.table.allTitle'),
+                          onClick: allCustomEvent
+                        }, [
+                          h('span', {
+                            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                          }),
+                          h('span', {
+                            class: 'vxe-checkbox--label'
+                          }, getI18n('vxe.toolbar.customAll'))
+                        ])
+                      ])
+                      : createCommentVNode(),
+                    allowSort
+                      ? h('th', {}, [
+                        h('span', {
+                          class: 'vxe-table-custom-popup--table-sort-help-title'
+                        }, getI18n('vxe.custom.setting.colSort')),
+                        VxeUITooltipComponent
+                          ? h(VxeUITooltipComponent, {
+                            enterable: true,
+                            content: getI18n('vxe.custom.setting.sortHelpTip')
+                          }, {
+                            default: () => {
+                              return h('i', {
+                                class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+                              })
+                            }
+                          })
+                          : createCommentVNode()
+                      ])
+                      : createCommentVNode(),
+                    h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                    allowResizable
+                      ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                      : createCommentVNode(),
+                    allowFixed
+                      ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                      : createCommentVNode()
+                  ])
+                ]),
+                h(TransitionGroup, {
+                  class: 'vxe-table-custom--body',
+                  tag: 'tbody',
+                  name: 'vxe-table-custom--list'
+                }, {
+                  default: () => trVNs
+                })
+              ])
+            ]),
+            h('div', {
+              ref: dragHintElemRef,
+              class: 'vxe-table-custom-popup--drag-hint'
+            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+          ])
+        },
+        footer: () => {
+          return h('div', {
+            class: 'vxe-table-custom-popup--footer'
+          }, [
+            VxeUIButtonComponent
+              ? h(VxeUIButtonComponent, {
+                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
+                onClick: resetCustomEvent
+              })
+              : createCommentVNode(),
+            VxeUIButtonComponent
+              ? h(VxeUIButtonComponent, {
+                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
+                onClick: cancelCustomEvent
+              })
+              : createCommentVNode(),
+            VxeUIButtonComponent
+              ? h(VxeUIButtonComponent, {
+                status: 'primary',
+                content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
+                onClick: confirmCustomEvent
+              })
+              : createCommentVNode()
+          ])
+        }
+      }
+      if (mode === 'drawer') {
+        return VxeUIDrawerComponent
+          ? h(VxeUIDrawerComponent, {
+            key: 'drawer',
+            className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
+            modelValue: customStore.visible,
+            title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
+            width: drawerOpts.width || Math.min(880, document.documentElement.clientWidth),
+            position: drawerOpts.position,
+            escClosable: !!drawerOpts.escClosable,
+            destroyOnClose: true,
+            showFooter: true,
+            'onUpdate:modelValue' (value: any) {
+              customStore.visible = value
+            }
+          }, scopedSlots)
+          : createCommentVNode()
+      }
       return VxeUIModalComponent
         ? h(VxeUIModalComponent, {
-          key: 'popup',
-          className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+          key: 'modal',
+          className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
           modelValue: customStore.visible,
           title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
-          width: modalOpts.width || '50vw',
+          width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
           minWidth: modalOpts.minWidth || 700,
-          height: modalOpts.height || '50vh',
+          height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
           minHeight: modalOpts.minHeight || 400,
           showZoom: modalOpts.showZoom,
           showMaximize: modalOpts.showMaximize,
@@ -643,147 +799,13 @@ export default defineComponent({
           'onUpdate:modelValue' (value: any) {
             customStore.visible = value
           }
-        }, {
-          default: () => {
-            return h('div', {
-              ref: bodyElemRef,
-              class: 'vxe-table-custom-popup--body'
-            }, [
-              h('div', {
-                class: 'vxe-table-custom-popup--table-wrapper'
-              }, [
-                h('table', {}, [
-                  h('colgroup', {}, [
-                    allowVisible
-                      ? h('col', {
-                        style: {
-                          width: '80px'
-                        }
-                      })
-                      : createCommentVNode(),
-                    allowSort
-                      ? h('col', {
-                        style: {
-                          width: '80px'
-                        }
-                      })
-                      : createCommentVNode(),
-                    h('col', {
-                      style: {
-                        minWidth: '120px'
-                      }
-                    }),
-                    allowResizable
-                      ? h('col', {
-                        style: {
-                          width: '140px'
-                        }
-                      })
-                      : createCommentVNode(),
-                    allowFixed
-                      ? h('col', {
-                        style: {
-                          width: '200px'
-                        }
-                      })
-                      : createCommentVNode()
-                  ]),
-                  h('thead', {}, [
-                    h('tr', {}, [
-                      allowVisible
-                        ? h('th', {}, [
-                          h('div', {
-                            class: ['vxe-table-custom--checkbox-option', {
-                              'is--checked': isAllChecked,
-                              'is--indeterminate': isAllIndeterminate
-                            }],
-                            title: getI18n('vxe.table.allTitle'),
-                            onClick: allCustomEvent
-                          }, [
-                            h('span', {
-                              class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                            }),
-                            h('span', {
-                              class: 'vxe-checkbox--label'
-                            }, getI18n('vxe.toolbar.customAll'))
-                          ])
-                        ])
-                        : createCommentVNode(),
-                      allowSort
-                        ? h('th', {}, [
-                          h('span', {
-                            class: 'vxe-table-custom-popup--table-sort-help-title'
-                          }, getI18n('vxe.custom.setting.colSort')),
-                          VxeUITooltipComponent
-                            ? h(VxeUITooltipComponent, {
-                              enterable: true,
-                              content: getI18n('vxe.custom.setting.sortHelpTip')
-                            }, {
-                              default: () => {
-                                return h('i', {
-                                  class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-                                })
-                              }
-                            })
-                            : createCommentVNode()
-                        ])
-                        : createCommentVNode(),
-                      h('th', {}, getI18n('vxe.custom.setting.colTitle')),
-                      allowResizable
-                        ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
-                        : createCommentVNode(),
-                      allowFixed
-                        ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
-                        : createCommentVNode()
-                    ])
-                  ]),
-                  h(TransitionGroup, {
-                    class: 'vxe-table-custom--body',
-                    tag: 'tbody',
-                    name: 'vxe-table-custom--list'
-                  }, {
-                    default: () => trVNs
-                  })
-                ])
-              ]),
-              h('div', {
-                ref: dragHintElemRef,
-                class: 'vxe-table-custom-popup--drag-hint'
-              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
-            ])
-          },
-          footer: () => {
-            return h('div', {
-              class: 'vxe-table-custom-popup--footer'
-            }, [
-              VxeUIButtonComponent
-                ? h(VxeUIButtonComponent, {
-                  content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
-                  onClick: resetCustomEvent
-                })
-                : createCommentVNode(),
-              VxeUIButtonComponent
-                ? h(VxeUIButtonComponent, {
-                  content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
-                  onClick: cancelCustomEvent
-                })
-                : createCommentVNode(),
-              VxeUIButtonComponent
-                ? h(VxeUIButtonComponent, {
-                  status: 'primary',
-                  content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
-                  onClick: confirmCustomEvent
-                })
-                : createCommentVNode()
-            ])
-          }
-        })
+        }, scopedSlots)
         : createCommentVNode()
     }
 
     const renderVN = () => {
       const customOpts = computeCustomOpts.value
-      if (customOpts.mode === 'popup') {
+      if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
         return renderPopupPanel()
       }
       return renderSimplePanel()

package/packages/table/render/index.ts

@@ -289,7 +289,7 @@ function nativeEditRender (renderOpts: any, params: any) {
   ]
 }
 
-function defaultCellRender (renderOpts: any, params: any) {
+function buttonCellRender (renderOpts: any, params: any) {
   return [
     h(getDefaultComponent(renderOpts), {
       ...getCellEditProps(renderOpts, params, null),
@@ -298,7 +298,7 @@ function defaultCellRender (renderOpts: any, params: any) {
   ]
 }
 
-function defaultEditRender (renderOpts: VxeGlobalRendererHandles.RenderEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+function defaultEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
   const { row, column } = params
   const cellValue = getCellValue(row, column)
   return [
@@ -309,11 +309,24 @@ function defaultEditRender (renderOpts: VxeGlobalRendererHandles.RenderEditOptio
   ]
 }
 
+function radioAndCheckboxEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+  const { options } = renderOpts
+  const { row, column } = params
+  const cellValue = getCellValue(row, column)
+  return [
+    h(getDefaultComponent(renderOpts), {
+      options,
+      ...getCellEditProps(renderOpts, params, cellValue),
+      ...getEditOns(renderOpts, params)
+    })
+  ]
+}
+
 /**
  * 已废弃
  * @deprecated
  */
-function oldEditRender (renderOpts: VxeGlobalRendererHandles.RenderEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+function oldEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
   const { row, column } = params
   const cellValue = getCellValue(row, column)
   return [
@@ -520,12 +533,12 @@ renderer.mixin({
   select: {
     renderEdit: nativeSelectEditRender,
     renderDefault: nativeSelectEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (renderOpts: any, params: any) {
+    renderFilter (renderOpts, params) {
       const { column } = params
-      return column.filters.map((option: any, oIndex: any) => {
+      return column.filters.map((option, oIndex) => {
         return h('select', {
           key: oIndex,
           class: 'vxe-default-select',
@@ -541,7 +554,7 @@ renderer.mixin({
   VxeInput: {
     autofocus: '.vxe-input--inner',
     renderEdit: defaultEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || getConfig().input?.digits || 2
@@ -569,7 +582,7 @@ renderer.mixin({
   VxeNumberInput: {
     autofocus: '.vxe-number-input--inner',
     renderEdit: defaultEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || getConfig().numberInput?.digits || 2
@@ -590,7 +603,7 @@ renderer.mixin({
   VxeDatePicker: {
     autofocus: '.vxe-date-picker--inner',
     renderEdit: defaultEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       let cellValue = XEUtils.get(row, column.property)
@@ -615,7 +628,7 @@ renderer.mixin({
     autofocus: '.vxe-textarea--inner'
   },
   VxeButton: {
-    renderDefault: defaultCellRender
+    renderDefault: buttonCellRender
   },
   VxeButtonGroup: {
     renderDefault (renderOpts, params) {
@@ -633,13 +646,13 @@ renderer.mixin({
     autofocus: '.vxe-input--inner',
     renderEdit: defaultSelectEditRender,
     renderDefault: defaultSelectEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (renderOpts: any, params: any) {
+    renderFilter (renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
-      return column.filters.map((option: any, oIndex: any) => {
+      return column.filters.map((option, oIndex) => {
         const optionValue = option.data
         return h(getDefaultComponent(renderOpts), {
           key: oIndex,
@@ -651,6 +664,12 @@ renderer.mixin({
     defaultFilterMethod: handleFilterMethod,
     exportMethod: handleExportSelectMethod
   },
+  VxeRadioGroup: {
+    renderDefault: radioAndCheckboxEditRender
+  },
+  VxeCheckboxGroup: {
+    renderDefault: radioAndCheckboxEditRender
+  },
   VxeSwitch: {
     autofocus: '.vxe-switch--button',
     renderEdit: defaultEditRender,
@@ -664,7 +683,7 @@ renderer.mixin({
   $input: {
     autofocus: '.vxe-input--inner',
     renderEdit: oldEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || getConfig().input?.digits || 2
@@ -701,13 +720,13 @@ renderer.mixin({
     autofocus: '.vxe-input--inner',
     renderEdit: oldSelectEditRender,
     renderDefault: oldSelectEditRender,
-    renderCell (renderOpts: any, params: any) {
+    renderCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (renderOpts: any, params: any) {
+    renderFilter (renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
-      return column.filters.map((option: any, oIndex: any) => {
+      return column.filters.map((option, oIndex) => {
         const optionValue = option.data
         return h(getOldComponent(renderOpts), {
           key: oIndex,

package/packages/toolbar/src/toolbar.ts

@@ -97,7 +97,7 @@ export default defineComponent({
           return computeCustomOpts.value
         }
       }
-      return {}
+      return { trigger: '' }
     })
 
     const computeTrigger = computed(() => {

package/styles/components/table-module/custom.scss

@@ -154,9 +154,12 @@
       outline: none;
     }
     &:hover {
-      color: var(--vxe-ui-font-primary-color);
+      color: var(--vxe-ui-font-primary-lighten-color);
     }
   }
+  .btn--confirm {
+    color: var(--vxe-ui-font-primary-color);
+  }
 }
 
 .vxe-table-custom--checkbox-option {