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

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

@@ -1,4 +1,4 @@
-import { h, inject, ref, Ref, provide, VNode, PropType, nextTick, TransitionGroup, createCommentVNode, reactive, Teleport, onUnmounted } from 'vue'
+import { h, inject, ref, Ref, provide, VNode, PropType, nextTick, TransitionGroup, createCommentVNode, reactive, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText } from '../../../ui/src/utils'
@@ -609,7 +609,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
@@ -751,146 +750,141 @@ 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, {
-                        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--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.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())
-                          ])
-                        ])
-                    : null
+                      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, {
+                      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)
                 ]),
-                renderDragTip()
-              ])
-            ]
-          : [])
-      ])
+                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.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())
+                        ])
+                      ])
+                  : null
+              ]),
+              renderDragTip()
+            ])
+          ]
+        : [])
     }
 
     const renderPopupPanel = () => {

package/packages/table/src/anime.ts

@@ -20,10 +20,10 @@ export function moveRowAnimateToTb (elemList: NodeListOf<HTMLElement> | HTMLDivE
   })
 }
 
-export function clearRowAnimate (elem: HTMLElement | undefined) {
+export function clearRowAnimate (elem: HTMLElement | undefined, clss: string[]) {
   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)
 }
@@ -43,10 +43,10 @@ export function moveColAnimateToLr (elemList: NodeListOf<HTMLElement> | HTMLDivE
   })
 }
 
-export function clearColAnimate (elem: HTMLElement | undefined) {
+export function clearColAnimate (elem: HTMLElement | undefined, clss: string[]) {
   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)
 }