vxe-table 4.16.0-beta.6 → 4.16.0-beta.8

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

@@ -1,4 +1,4 @@
-import { h, inject, ref, provide, nextTick, TransitionGroup, createCommentVNode, reactive, Teleport, onUnmounted } from 'vue';
+import { h, inject, ref, provide, nextTick, TransitionGroup, createCommentVNode, reactive, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText } from '../../../ui/src/utils';
@@ -565,7 +565,6 @@ export default defineVxeComponent({
             const { customStore } = props;
             const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps;
             const { isCustomStatus, customColumnList } = tableReactData;
-            const { teleportToWrapperElem } = tableInternalData;
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
             const columnDragOpts = computeColumnDragOpts.value;
@@ -701,141 +700,136 @@ export default defineVxeComponent({
                     ]));
                 }
             });
-            return h(Teleport, {
-                to: teleportToWrapperElem,
-                disabled: !($xeGantt && teleportToWrapperElem)
-            }, [
-                h('div', {
-                    ref: refElem,
-                    key: 'simple',
-                    class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
-                            'is--active': customStore.visible
-                        }],
-                    style: maxHeight && !['left', 'right'].includes(placement || '')
-                        ? {
-                            maxHeight: `${maxHeight}px`
-                        }
-                        : {}
-                }, customStore.visible
-                    ? [
+            return h('div', {
+                ref: refElem,
+                key: 'simple',
+                class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
+                        'is--active': customStore.visible
+                    }],
+                style: maxHeight && !['left', 'right'].includes(placement || '')
+                    ? {
+                        maxHeight: `${maxHeight}px`
+                    }
+                    : {}
+            }, customStore.visible
+                ? [
+                    h('div', {
+                        ref: refBodyWrapperElem,
+                        class: 'vxe-table-custom-simple--body-wrapper'
+                    }, [
+                        !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
+                            ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+                                customStore
+                            })
+                            : renderEmptyElement($xeTable),
                         h('div', {
-                            ref: refBodyWrapperElem,
-                            class: 'vxe-table-custom-simple--body-wrapper'
+                            ref: refCustomBodyElem,
+                            class: 'vxe-table-custom--handle-wrapper'
                         }, [
-                            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
-                                ? h($xeTable.getPivotTableAggregateSimplePanel(), {
-                                    customStore
-                                })
-                                : renderEmptyElement($xeTable),
                             h('div', {
-                                ref: refCustomBodyElem,
-                                class: 'vxe-table-custom--handle-wrapper'
-                            }, [
-                                h('div', {
-                                    class: 'vxe-table-custom--header'
-                                }, headerSlot
-                                    ? $xeTable.callSlot(headerSlot, params)
-                                    : [
-                                        h('ul', {
-                                            class: 'vxe-table-custom--panel-list'
+                                class: 'vxe-table-custom--header'
+                            }, headerSlot
+                                ? $xeTable.callSlot(headerSlot, params)
+                                : [
+                                    h('ul', {
+                                        class: 'vxe-table-custom--panel-list'
+                                    }, [
+                                        h('li', {
+                                            class: 'vxe-table-custom--option'
                                         }, [
-                                            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
-                                                    }, [
-                                                        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', {
+                                            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.table.customTitle'))
-                                            ])
+                                                    }, getI18n('vxe.toolbar.customAll'))
+                                                ])
+                                                : h('span', {
+                                                    class: 'vxe-checkbox--label'
+                                                }, getI18n('vxe.table.customTitle'))
                                         ])
-                                    ]),
-                                h('div', {
-                                    class: 'vxe-table-custom--body'
-                                }, [
-                                    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)
+                                    ])
                                 ]),
-                                customOpts.showFooter
+                            h('div', {
+                                class: 'vxe-table-custom--body'
+                            }, [
+                                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--footer'
-                                    }, footerSlot
-                                        ? $xeTable.callSlot(footerSlot, params)
-                                        : [
-                                            h('div', {
-                                                class: 'vxe-table-custom--footer-buttons'
-                                            }, [
-                                                VxeUIButtonComponent
+                                        class: 'vxe-table-custom--panel-bottom'
+                                    }, $xeTable.callSlot(bottomSlot, params))
+                                    : renderEmptyElement($xeTable)
+                            ]),
+                            customOpts.showFooter
+                                ? h('div', {
+                                    class: 'vxe-table-custom--footer'
+                                }, 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'),
+                                                    disabled: !isCustomStatus,
+                                                    onClick: resetCustomEvent
+                                                })
+                                                : createCommentVNode(),
+                                            immediate
+                                                ? (VxeUIButtonComponent
                                                     ? h(VxeUIButtonComponent, {
                                                         mode: 'text',
-                                                        content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
-                                                        disabled: !isCustomStatus,
-                                                        onClick: resetCustomEvent
+                                                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                                                        onClick: cancelCloseEvent
                                                     })
-                                                    : createCommentVNode(),
-                                                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()),
-                                                immediate
-                                                    ? createCommentVNode()
-                                                    : (VxeUIButtonComponent
-                                                        ? h(VxeUIButtonComponent, {
-                                                            mode: 'text',
-                                                            status: 'primary',
-                                                            content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
-                                                            onClick: confirmCustomEvent
-                                                        })
-                                                        : createCommentVNode())
-                                            ])
+                                                    : createCommentVNode())
+                                                : (VxeUIButtonComponent
+                                                    ? h(VxeUIButtonComponent, {
+                                                        mode: 'text',
+                                                        content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                                                        onClick: cancelCustomEvent
+                                                    })
+                                                    : createCommentVNode()),
+                                            immediate
+                                                ? createCommentVNode()
+                                                : (VxeUIButtonComponent
+                                                    ? h(VxeUIButtonComponent, {
+                                                        mode: 'text',
+                                                        status: 'primary',
+                                                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                                                        onClick: confirmCustomEvent
+                                                    })
+                                                    : createCommentVNode())
                                         ])
-                                    : null
-                            ]),
-                            renderDragTip()
-                        ])
-                    ]
-                    : [])
-            ]);
+                                    ])
+                                : null
+                        ]),
+                        renderDragTip()
+                    ])
+                ]
+                : []);
         };
         const renderPopupPanel = () => {
             const $xeGrid = $xeTable.xeGrid;

package/es/table/src/anime.js

@@ -16,10 +16,10 @@ export function moveRowAnimateToTb(elemList, offsetTop) {
         });
     });
 }
-export function clearRowAnimate(elem) {
+export function clearRowAnimate(elem, clss) {
     setTimeout(() => {
         if (elem) {
-            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls));
+            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
         }
     }, 500);
 }
@@ -37,10 +37,10 @@ export function moveColAnimateToLr(elemList, offsetLeft) {
         });
     });
 }
-export function clearColAnimate(elem) {
+export function clearColAnimate(elem, clss) {
     setTimeout(() => {
         if (elem) {
-            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass));
+            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, colMoveClass));
         }
     }, 500);
 }