vxe-table 4.8.4 → 4.8.6

package/es/table/module/custom/panel.js

@@ -4,7 +4,7 @@ import { formatText } from '../../../ui/src/utils';
 import { addClass, removeClass } from '../../../ui/src/dom';
 import { errLog } from '../../../ui/src/log';
 import XEUtils from 'xe-utils';
-const { getI18n, getIcon } = VxeUI;
+const { getI18n, getIcon, renderEmptyElement } = VxeUI;
 export default defineComponent({
     name: 'TableCustomPanel',
     props: {
@@ -17,12 +17,12 @@ export default defineComponent({
         const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
         const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
         const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
-        const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
+        const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup');
         const $xeTable = inject('$xeTable', {});
         const { reactData } = $xeTable;
-        const { computeCustomOpts, computeColumnOpts, computeIsMaxFixedColumn } = $xeTable.getComputeMaps();
+        const { computeCustomOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const bodyElemRef = ref();
         const dragHintElemRef = ref();
@@ -43,73 +43,21 @@ export default defineComponent({
             }, 300);
         };
         const confirmCustomEvent = ({ $event }) => {
-            const { customColumnList } = reactData;
-            const customOpts = computeCustomOpts.value;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
-            XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
-                if (parent) {
-                    // 更新子列信息
-                    column.fixed = parent.fixed;
-                }
-                else {
-                    if (allowSort) {
-                        const sortIndex = index + 1;
-                        column.renderSortNumber = sortIndex;
-                    }
-                    if (allowFixed) {
-                        column.fixed = column.renderFixed;
-                    }
-                }
-                if (allowResizable) {
-                    if (column.renderVisible && (!column.children || column.children.length)) {
-                        if (column.renderResizeWidth !== column.renderWidth) {
-                            column.resizeWidth = column.renderResizeWidth;
-                            column.renderWidth = column.renderResizeWidth;
-                        }
-                    }
-                }
-                if (allowVisible) {
-                    column.visible = column.renderVisible;
-                }
-            });
+            $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
-            $xeTable.saveCustomStore('confirm');
         };
         const cancelCloseEvent = ({ $event }) => {
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('close', $event);
         };
         const cancelCustomEvent = ({ $event }) => {
-            const { customStore } = props;
-            const { customColumnList } = reactData;
-            const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
-            const customOpts = computeCustomOpts.value;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
-            XEUtils.eachTree(customColumnList, column => {
-                const colid = column.getKey();
-                const visible = !!oldVisibleMaps[colid];
-                const fixed = oldFixedMaps[colid] || '';
-                if (allowVisible) {
-                    column.renderVisible = visible;
-                    column.visible = visible;
-                }
-                if (allowFixed) {
-                    column.renderFixed = fixed;
-                    column.fixed = fixed;
-                }
-                if (allowSort) {
-                    column.renderSortNumber = oldSortMaps[colid] || 0;
-                }
-                if (allowResizable) {
-                    column.renderResizeWidth = column.renderWidth;
-                }
-            }, { children: 'children' });
+            $xeTable.cancelCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('cancel', $event);
         };
         const handleResetCustomEvent = (evnt) => {
-            $xeTable.resetColumn(true);
+            $xeTable.resetCustom(true);
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('reset', evnt);
         };
@@ -199,41 +147,7 @@ export default defineComponent({
             }
         };
         const allOptionEvent = () => {
-            const { customStore } = props;
-            const { customColumnList } = reactData;
-            const customOpts = computeCustomOpts.value;
-            const { checkMethod, visibleMethod } = customOpts;
-            const isAll = !customStore.isAll;
-            if (customOpts.immediate) {
-                XEUtils.eachTree(customColumnList, (column) => {
-                    if (visibleMethod && !visibleMethod({ column })) {
-                        return;
-                    }
-                    if (checkMethod && !checkMethod({ column })) {
-                        return;
-                    }
-                    column.visible = isAll;
-                    column.renderVisible = isAll;
-                    column.halfVisible = false;
-                });
-                customStore.isAll = isAll;
-                $xeTable.handleCustom();
-                $xeTable.saveCustomStore('update:visible');
-            }
-            else {
-                XEUtils.eachTree(customColumnList, (column) => {
-                    if (visibleMethod && !visibleMethod({ column })) {
-                        return;
-                    }
-                    if (checkMethod && !checkMethod({ column })) {
-                        return;
-                    }
-                    column.renderVisible = isAll;
-                    column.halfVisible = false;
-                });
-                customStore.isAll = isAll;
-            }
-            $xeTable.checkCustomStatus();
+            $xeTable.toggleCustomAllCheckbox();
         };
         const sortMousedownEvent = (evnt) => {
             const btnEl = evnt.currentTarget;
@@ -244,6 +158,7 @@ export default defineComponent({
             trEl.draggable = true;
             dragColumnRef.value = column;
             addClass(trEl, 'active--drag-origin');
+            updateDropHint(evnt);
         };
         const sortMouseupEvent = (evnt) => {
             const btnEl = evnt.currentTarget;
@@ -351,13 +266,29 @@ export default defineComponent({
             const { maxHeight } = customStore;
             const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+            const slots = customOpts.slots || {};
+            const headerSlot = slots.header;
+            const topSlot = slots.top;
+            const bottomSlot = slots.bottom;
+            const defaultSlot = slots.default;
+            const footerSlot = slots.footer;
             const colVNs = [];
             const customWrapperOns = {};
+            const isAllChecked = customStore.isAll;
+            const isAllIndeterminate = customStore.isIndeterminate;
+            const dragColumn = dragColumnRef.value;
             // hover 触发
             if (trigger === 'hover') {
                 customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
                 customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
             }
+            const params = {
+                $table: $xeTable,
+                $grid: $xeTable.xegrid,
+                columns: customColumnList,
+                isAllChecked,
+                isAllIndeterminate
+            };
             XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
                 const isVisible = visibleMethod ? visibleMethod({ column }) : true;
                 if (isVisible) {
@@ -458,9 +389,6 @@ export default defineComponent({
                     ]));
                 }
             });
-            const isAllChecked = customStore.isAll;
-            const isAllIndeterminate = customStore.isIndeterminate;
-            const dragColumn = dragColumnRef.value;
             return h('div', {
                 ref: refElem,
                 key: 'simple',
@@ -474,40 +402,60 @@ export default defineComponent({
                     : {}
             }, customStore.visible
                 ? [
-                    h('ul', {
+                    h('div', {
                         class: 'vxe-table-custom--header'
-                    }, [
-                        h('li', {
-                            class: 'vxe-table-custom--option'
-                        }, [
-                            allowVisible
-                                ? h('div', {
-                                    class: ['vxe-table-custom--checkbox-option', {
-                                            'is--checked': isAllChecked,
-                                            'is--indeterminate': isAllIndeterminate
-                                        }],
-                                    title: getI18n('vxe.table.allTitle'),
-                                    onClick: allOptionEvent
+                    }, headerSlot
+                        ? $xeTable.callSlot(headerSlot, params)
+                        : [
+                            h('ul', {
+                                class: 'vxe-table-custom--panel-list'
+                            }, [
+                                h('li', {
+                                    class: 'vxe-table-custom--option'
                                 }, [
-                                    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'))
+                                    allowVisible
+                                        ? h('div', {
+                                            class: ['vxe-table-custom--checkbox-option', {
+                                                    'is--checked': isAllChecked,
+                                                    'is--indeterminate': isAllIndeterminate
+                                                }],
+                                            title: getI18n('vxe.table.allTitle'),
+                                            onClick: allOptionEvent
+                                        }, [
+                                            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'))
+                                        ])
+                                        : h('span', {
+                                            class: 'vxe-checkbox--label'
+                                        }, getI18n('vxe.table.customTitle'))
                                 ])
-                                : h('span', {
-                                    class: 'vxe-checkbox--label'
-                                }, getI18n('vxe.table.customTitle'))
-                        ])
-                    ]),
+                            ])
+                        ]),
                     h('div', {
                         ref: bodyElemRef,
-                        class: 'vxe-table-custom--list-wrapper'
+                        class: 'vxe-table-custom--body'
                     }, [
-                        h(TransitionGroup, Object.assign({ class: 'vxe-table-custom--body', name: 'vxe-table-custom--list', tag: 'ul' }, customWrapperOns), {
-                            default: () => colVNs
-                        }),
+                        topSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom--panel-top'
+                            }, $xeTable.callSlot(topSlot, params))
+                            : renderEmptyElement($xeTable),
+                        defaultSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom--panel-body'
+                            }, $xeTable.callSlot(defaultSlot, params))
+                            : h(TransitionGroup, Object.assign({ class: 'vxe-table-custom--panel-list', name: 'vxe-table-custom--list', tag: 'ul' }, customWrapperOns), {
+                                default: () => colVNs
+                            }),
+                        bottomSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom--panel-bottom'
+                            }, $xeTable.callSlot(bottomSlot, params))
+                            : renderEmptyElement($xeTable),
                         h('div', {
                             ref: dragHintElemRef,
                             class: 'vxe-table-custom-popup--drag-hint'
@@ -516,40 +464,46 @@ export default defineComponent({
                     customOpts.showFooter
                         ? h('div', {
                             class: 'vxe-table-custom--footer'
-                        }, [
-                            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()
-                                : (VxeUIButtonComponent
-                                    ? h(VxeUIButtonComponent, {
-                                        mode: 'text',
-                                        status: 'primary',
-                                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
-                                        onClick: confirmCustomEvent
-                                    })
-                                    : createCommentVNode())
-                        ])
+                        }, footerSlot
+                            ? $xeTable.callSlot(footerSlot, params)
+                            : [
+                                h('div', {
+                                    class: 'vxe-table-custom--footer-buttons'
+                                }, [
+                                    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()
+                                        : (VxeUIButtonComponent
+                                            ? h(VxeUIButtonComponent, {
+                                                mode: 'text',
+                                                status: 'primary',
+                                                content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                                                onClick: confirmCustomEvent
+                                            })
+                                            : createCommentVNode())
+                                ])
+                            ])
                         : null
                 ]
                 : []);
@@ -561,14 +515,50 @@ export default defineComponent({
             const { modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
             const columnOpts = computeColumnOpts.value;
             const { maxFixedSize } = columnOpts;
+            const resizableOpts = computeResizableOpts.value;
+            const { minWidth: reMinWidth, maxWidth: reMaxWidth } = resizableOpts;
             const { mode } = customOpts;
             const modalOpts = Object.assign({}, modalOptions);
             const drawerOpts = Object.assign({}, drawerOptions);
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+            const slots = customOpts.slots || {};
+            const headerSlot = slots.header;
+            const topSlot = slots.top;
+            const bottomSlot = slots.bottom;
+            const defaultSlot = slots.default;
+            const footerSlot = slots.footer;
             const trVNs = [];
+            const isAllChecked = customStore.isAll;
+            const isAllIndeterminate = customStore.isIndeterminate;
+            const dragColumn = dragColumnRef.value;
+            const params = {
+                $table: $xeTable,
+                $grid: $xeTable.xegrid,
+                columns: customColumnList,
+                isAllChecked,
+                isAllIndeterminate
+            };
             XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
                 const isVisible = visibleMethod ? visibleMethod({ column }) : true;
                 if (isVisible) {
+                    // 默认继承调整宽度
+                    let customMinWidth = 0;
+                    let customMaxWidth = 0;
+                    if (allowResizable) {
+                        const resizeParams = {
+                            $table: $xeTable,
+                            column,
+                            columnIndex: index,
+                            $columnIndex: index,
+                            $rowIndex: -1
+                        };
+                        if (reMinWidth) {
+                            customMinWidth = XEUtils.toNumber(XEUtils.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth);
+                        }
+                        if (reMaxWidth) {
+                            customMaxWidth = XEUtils.toNumber(XEUtils.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth);
+                        }
+                    }
                     const isChecked = column.renderVisible;
                     const isIndeterminate = column.halfVisible;
                     const colTitle = formatText(column.getTitle(), 1);
@@ -649,11 +639,13 @@ export default defineComponent({
                             }, [
                                 column.children && column.children.length
                                     ? h('span', '-')
-                                    : (VxeUIInputComponent
-                                        ? h(VxeUIInputComponent, {
+                                    : (VxeUINumberInputComponent
+                                        ? h(VxeUINumberInputComponent, {
                                             type: 'integer',
                                             disabled: isDisabled || isHidden,
                                             modelValue: column.renderResizeWidth,
+                                            min: customMinWidth || undefined,
+                                            max: customMaxWidth || undefined,
                                             'onUpdate:modelValue'(value) {
                                                 column.renderResizeWidth = Math.max(0, Number(value));
                                             }
@@ -688,15 +680,20 @@ export default defineComponent({
                     ]));
                 }
             });
-            const isAllChecked = customStore.isAll;
-            const isAllIndeterminate = customStore.isIndeterminate;
-            const dragColumn = dragColumnRef.value;
             const scopedSlots = {
                 default: () => {
+                    if (defaultSlot) {
+                        return $xeTable.callSlot(defaultSlot, params);
+                    }
                     return h('div', {
                         ref: bodyElemRef,
                         class: 'vxe-table-custom-popup--body'
                     }, [
+                        topSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom-popup--table-top'
+                            }, $xeTable.callSlot(topSlot, params))
+                            : renderEmptyElement($xeTable),
                         h('div', {
                             class: 'vxe-table-custom-popup--table-wrapper'
                         }, [
@@ -704,35 +701,25 @@ export default defineComponent({
                                 h('colgroup', {}, [
                                     allowVisible
                                         ? h('col', {
-                                            style: {
-                                                width: '80px'
-                                            }
+                                            class: 'vxe-table-custom-popup--table-col-seq'
                                         })
                                         : createCommentVNode(),
                                     allowSort
                                         ? h('col', {
-                                            style: {
-                                                width: '80px'
-                                            }
+                                            class: 'vxe-table-custom-popup--table-col-sort'
                                         })
                                         : createCommentVNode(),
                                     h('col', {
-                                        style: {
-                                            minWidth: '120px'
-                                        }
+                                        class: 'vxe-table-custom-popup--table-col-title'
                                     }),
                                     allowResizable
                                         ? h('col', {
-                                            style: {
-                                                width: '140px'
-                                            }
+                                            class: 'vxe-table-custom-popup--table-col-width'
                                         })
                                         : createCommentVNode(),
                                     allowFixed
                                         ? h('col', {
-                                            style: {
-                                                width: '200px'
-                                            }
+                                            class: 'vxe-table-custom-popup--table-col-fixed'
                                         })
                                         : createCommentVNode()
                                 ]),
@@ -787,7 +774,7 @@ export default defineComponent({
                                     ])
                                 ]),
                                 h(TransitionGroup, {
-                                    class: 'vxe-table-custom--body',
+                                    class: 'vxe-table-custom--panel-list',
                                     tag: 'tbody',
                                     name: 'vxe-table-custom--list'
                                 }, {
@@ -795,6 +782,11 @@ export default defineComponent({
                                 })
                             ])
                         ]),
+                        bottomSlot
+                            ? h('div', {
+                                class: 'vxe-table-custom-popup--table-bottom'
+                            }, $xeTable.callSlot(bottomSlot, params))
+                            : renderEmptyElement($xeTable),
                         h('div', {
                             ref: dragHintElemRef,
                             class: 'vxe-table-custom-popup--drag-hint'
@@ -802,6 +794,9 @@ export default defineComponent({
                     ]);
                 },
                 footer: () => {
+                    if (footerSlot) {
+                        return $xeTable.callSlot(footerSlot, params);
+                    }
                     return h('div', {
                         class: 'vxe-table-custom-popup--footer'
                     }, [
@@ -827,6 +822,9 @@ export default defineComponent({
                     ]);
                 }
             };
+            if (headerSlot) {
+                scopedSlots.header = () => $xeTable.callSlot(headerSlot, params);
+            }
             if (mode === 'drawer') {
                 return VxeUIDrawerComponent
                     ? h(VxeUIDrawerComponent, {
@@ -890,8 +888,8 @@ export default defineComponent({
                 if (!VxeUIButtonComponent) {
                     errLog('vxe.error.reqComp', ['vxe-button']);
                 }
-                if (!VxeUIInputComponent) {
-                    errLog('vxe.error.reqComp', ['vxe-input']);
+                if (!VxeUINumberInputComponent) {
+                    errLog('vxe.error.reqComp', ['vxe-number-input']);
                 }
                 if (!VxeUITooltipComponent) {
                     errLog('vxe.error.reqComp', ['vxe-tooltip']);

package/es/table/module/validator/hook.js

@@ -64,7 +64,7 @@ hooks.add('tableValidatorModule', {
             const validOpts = computeValidOpts.value;
             if (validOpts.msgMode === 'single') {
                 const keys = Object.keys(validErrMaps);
-                const resMaps = validErrMaps;
+                const resMaps = {};
                 if (keys.length) {
                     const firstKey = keys[0];
                     resMaps[firstKey] = validErrMaps[firstKey];

package/es/table/src/body.js

@@ -288,19 +288,25 @@ export default defineComponent({
                     const validSlot = slots ? slots.valid : null;
                     const validParams = Object.assign(Object.assign({}, params), errorValidItem);
                     tdVNs.push(h('div', {
-                        class: ['vxe-cell--valid-error-hint', getPropClass(validOpts.className, validParams)],
+                        class: ['vxe-cell--valid-error-tip', getPropClass(validOpts.className, validParams)],
                         style: errRule && errRule.maxWidth
                             ? {
                                 width: `${errRule.maxWidth}px`
                             }
                             : null
-                    }, validSlot
-                        ? $xeTable.callSlot(validSlot, validParams)
-                        : [
-                            h('span', {
-                                class: 'vxe-cell--valid-error-msg'
-                            }, errorValidItem.content)
-                        ]));
+                    }, [
+                        h('div', {
+                            class: `vxe-cell--valid-error-wrapper vxe-cell--valid-error-theme-${validOpts.theme || 'normal'}`
+                        }, [
+                            validSlot
+                                ? $xeTable.callSlot(validSlot, validParams)
+                                : [
+                                    h('span', {
+                                        class: 'vxe-cell--valid-error-msg'
+                                    }, errorValidItem.content)
+                                ]
+                        ])
+                    ]));
                 }
             }
             let cellHeight = '';