vxe-pc-ui 4.6.35 → 4.6.37

package/lib/index.umd.js

@@ -4241,14 +4241,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.6.35"}`;
+const log_version = `ui v${"4.6.37"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.6.35";
+const ui_version = "4.6.37";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -4771,6 +4771,8 @@ setIcon({
   TABLE_SELECT_OPEN: iconPrefix + 'caret-down rotate180',
   TABLE_SELECT_CLOSE: iconPrefix + 'caret-down',
   // tabs
+  TABS_TAB_BUTTON_TOP: iconPrefix + 'arrow-up',
+  TABS_TAB_BUTTON_BOTTOM: iconPrefix + 'arrow-down',
   TABS_TAB_BUTTON_LEFT: iconPrefix + 'arrow-left',
   TABS_TAB_BUTTON_RIGHT: iconPrefix + 'arrow-right',
   TABS_TAB_CLOSE: iconPrefix + 'close',
@@ -22544,17 +22546,30 @@ const ViewItemComponent = defineVxeComponent({
 
 
 
+const scrollbarOffsetSize = 20;
 /* harmony default export */ var tabs = (defineVxeComponent({
   name: 'VxeTabs',
   props: {
     modelValue: [String, Number, Boolean],
     options: Array,
+    width: [String, Number],
     height: [String, Number],
     destroyOnClose: Boolean,
     titleWidth: [String, Number],
     titleAlign: [String, Number],
-    type: String,
+    type: {
+      type: String,
+      default: () => getConfig().tabs.type
+    },
+    position: {
+      type: String,
+      default: () => getConfig().tabs.position
+    },
     showClose: Boolean,
+    showBody: {
+      type: Boolean,
+      default: true
+    },
     padding: {
       type: Boolean,
       default: () => getConfig().tabs.padding
@@ -22576,12 +22591,18 @@ const ViewItemComponent = defineVxeComponent({
     const $xeParentTabs = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTabs', null);
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refHeadWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refHeadPrevElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refHeadNextElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
       staticTabs: [],
       activeName: null,
       initNames: [],
       lintLeft: 0,
+      lintTop: 0,
       lintWidth: 0,
+      lintHeight: 0,
+      scrollbarWidth: 0,
+      scrollbarHeight: 0,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -22592,6 +22613,52 @@ const ViewItemComponent = defineVxeComponent({
     const refMaps = {
       refElem
     };
+    const computeTabType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type
+      } = props;
+      return type || 'default';
+    });
+    const computeTabPosition = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        position
+      } = props;
+      return position || 'top';
+    });
+    const computeLrPosition = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const tabPosition = computeTabPosition.value;
+      return tabPosition === 'left' || tabPosition === 'right';
+    });
+    const computeLineStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        lintLeft,
+        lintTop,
+        lintWidth,
+        lintHeight
+      } = reactData;
+      const lrPosition = computeLrPosition.value;
+      return lrPosition ? {
+        top: `${lintTop}px`,
+        height: `${lintHeight}px`
+      } : {
+        left: `${lintLeft}px`,
+        width: `${lintWidth}px`
+      };
+    });
+    const computeWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        width,
+        height
+      } = props;
+      const stys = {};
+      if (width) {
+        stys.width = toCssUnit(width);
+      }
+      if (width) {
+        stys.height = toCssUnit(height);
+      }
+      return stys;
+    });
     const computeCloseOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().tabs.closeConfig, props.closeConfig);
     });
@@ -22610,6 +22677,9 @@ const ViewItemComponent = defineVxeComponent({
       } = reactData;
       return staticTabs.filter(item => handleFilterTab(item));
     });
+    const computeParentTabsResizeFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null;
+    });
     const computeMaps = {};
     const $xeTabs = {
       xID,
@@ -22641,49 +22711,118 @@ const ViewItemComponent = defineVxeComponent({
       }
       return [];
     };
-    const updateTabStyle = () => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+    const checkScrolling = () => {
+      const lrPosition = computeLrPosition.value;
+      const headerWrapperEl = refHeadWrapperElem.value;
+      const headPrevEl = refHeadPrevElem.value;
+      const headNextEl = refHeadNextElem.value;
+      if (headerWrapperEl) {
         const {
-          type
-        } = props;
+          scrollLeft,
+          scrollTop,
+          clientWidth,
+          clientHeight,
+          scrollWidth,
+          scrollHeight
+        } = headerWrapperEl;
+        if (headPrevEl) {
+          if ((lrPosition ? scrollTop : scrollLeft) > 0) {
+            addClass(headPrevEl, 'scrolling--middle');
+          } else {
+            removeClass(headPrevEl, 'scrolling--middle');
+          }
+        }
+        if (headNextEl) {
+          if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
+            addClass(headNextEl, 'scrolling--middle');
+          } else {
+            removeClass(headNextEl, 'scrolling--middle');
+          }
+        }
+      }
+    };
+    const updateTabStyle = () => {
+      const handleStyle = () => {
         const {
           activeName
         } = reactData;
+        const tabType = computeTabType.value;
         const tabOptions = computeTabOptions.value;
         const tabStaticOptions = computeTabStaticOptions.value;
         const headerWrapperEl = refHeadWrapperElem.value;
+        const lrPosition = computeLrPosition.value;
         let lintWidth = 0;
+        let lintHeight = 0;
         let lintLeft = 0;
+        let lintTop = 0;
+        let sBarWidth = 0;
+        let sBarHeight = 0;
         let isOver = false;
         if (headerWrapperEl) {
           const index = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, item => item.name === activeName);
           const {
             children,
+            offsetWidth,
             scrollWidth,
-            clientWidth
+            offsetHeight,
+            scrollHeight,
+            clientWidth,
+            clientHeight
           } = headerWrapperEl;
-          isOver = scrollWidth !== clientWidth;
-          if (index > -1) {
-            const tabEl = children[index];
-            const tabWidth = tabEl.clientWidth;
-            if (type) {
-              if (type === 'card') {
-                lintWidth = tabWidth + 2;
-                lintLeft = tabEl.offsetLeft;
-              } else if (type === 'border-card') {
-                lintWidth = tabWidth + 2;
-                lintLeft = tabEl.offsetLeft - 1;
+          sBarWidth = offsetWidth - clientWidth;
+          sBarHeight = offsetHeight - clientHeight;
+          if (lrPosition) {
+            isOver = scrollHeight !== clientHeight;
+            if (index > -1) {
+              const tabEl = children[index];
+              if (tabEl) {
+                const tabHeight = tabEl.clientHeight;
+                const tabWidth = tabEl.clientWidth;
+                if (tabType === 'card') {
+                  lintWidth = tabWidth;
+                  lintHeight = tabHeight;
+                  lintTop = tabEl.offsetTop;
+                } else if (tabType === 'border-card') {
+                  lintWidth = tabWidth;
+                  lintHeight = tabHeight;
+                  lintTop = tabEl.offsetTop - 1;
+                } else {
+                  lintHeight = Math.max(4, Math.floor(tabHeight * 0.6));
+                  lintTop = tabEl.offsetTop + Math.floor((tabHeight - lintHeight) / 2);
+                }
+              }
+            }
+          } else {
+            isOver = scrollWidth !== clientWidth;
+            if (index > -1) {
+              const tabEl = children[index];
+              if (tabEl) {
+                const tabWidth = tabEl.clientWidth;
+                if (tabType === 'card') {
+                  lintWidth = tabWidth + 1;
+                  lintLeft = tabEl.offsetLeft;
+                } else if (tabType === 'border-card') {
+                  lintWidth = tabWidth;
+                  lintLeft = tabEl.offsetLeft - 1;
+                } else {
+                  lintWidth = Math.max(4, Math.floor(tabWidth * 0.6));
+                  lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2);
+                }
               }
-            } else {
-              lintWidth = Math.max(4, Math.floor(tabWidth * 0.6));
-              lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2);
             }
           }
         }
+        reactData.scrollbarWidth = sBarWidth;
+        reactData.scrollbarHeight = sBarHeight;
         reactData.lintLeft = lintLeft;
+        reactData.lintTop = lintTop;
         reactData.lintWidth = lintWidth;
+        reactData.lintHeight = lintHeight;
         reactData.isTabOver = isOver;
-      });
+        checkScrolling();
+      };
+      handleStyle();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(handleStyle);
     };
     const dispatchEvent = (type, params, evnt) => {
       emit(type, createEvent(evnt, {
@@ -22877,7 +23016,9 @@ const ViewItemComponent = defineVxeComponent({
       const {
         slTimeout
       } = internalData;
-      let offsetLeft = offsetSize;
+      const lrPosition = computeLrPosition.value;
+      let offsetLeft = lrPosition ? 0 : offsetSize;
+      let offsetTop = lrPosition ? offsetSize : 0;
       let scrollCount = 6;
       let delayNum = 35;
       if (slTimeout) {
@@ -22891,21 +23032,41 @@ const ViewItemComponent = defineVxeComponent({
           if (headerWrapperEl) {
             const {
               clientWidth,
+              clientHeight,
               scrollWidth,
-              scrollLeft
+              scrollHeight,
+              scrollLeft,
+              scrollTop
             } = headerWrapperEl;
-            offsetLeft = Math.floor(offsetLeft / 2);
-            if (offsetPos > 0) {
-              if (clientWidth + scrollLeft < scrollWidth) {
-                headerWrapperEl.scrollLeft += offsetLeft;
-                delayNum -= 4;
-                internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+            if (lrPosition) {
+              offsetTop = Math.floor(offsetTop / 2);
+              if (offsetPos > 0) {
+                if (clientHeight + scrollTop < scrollHeight) {
+                  headerWrapperEl.scrollTop += offsetTop;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
+              } else {
+                if (scrollTop > 0) {
+                  headerWrapperEl.scrollTop -= offsetTop;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
               }
             } else {
-              if (scrollLeft > 0) {
-                headerWrapperEl.scrollLeft -= offsetLeft;
-                delayNum -= 4;
-                internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+              offsetLeft = Math.floor(offsetLeft / 2);
+              if (offsetPos > 0) {
+                if (clientWidth + scrollLeft < scrollWidth) {
+                  headerWrapperEl.scrollLeft += offsetLeft;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
+              } else {
+                if (scrollLeft > 0) {
+                  headerWrapperEl.scrollLeft -= offsetLeft;
+                  delayNum -= 4;
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
+                }
               }
             }
             updateTabStyle();
@@ -22915,9 +23076,14 @@ const ViewItemComponent = defineVxeComponent({
       scrollAnimate();
     };
     const handleScrollToLeft = offsetPos => {
+      const lrPosition = computeLrPosition.value;
       const headerWrapperEl = refHeadWrapperElem.value;
       if (headerWrapperEl) {
-        const offsetSize = Math.floor(headerWrapperEl.clientWidth * 0.75);
+        const {
+          clientWidth,
+          clientHeight
+        } = headerWrapperEl;
+        const offsetSize = Math.floor((lrPosition ? clientHeight : clientWidth) * 0.75);
         startScrollAnimation(offsetPos, offsetSize);
       }
     };
@@ -22930,6 +23096,7 @@ const ViewItemComponent = defineVxeComponent({
     const scrollToTab = name => {
       const tabOptions = computeTabOptions.value;
       const tabStaticOptions = computeTabStaticOptions.value;
+      const lrPosition = computeLrPosition.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
         const headerWrapperEl = refHeadWrapperElem.value;
         if (headerWrapperEl) {
@@ -22937,21 +23104,37 @@ const ViewItemComponent = defineVxeComponent({
           if (index > -1) {
             const {
               scrollLeft,
+              scrollTop,
               clientWidth,
+              clientHeight,
               children
             } = headerWrapperEl;
             const tabEl = children[index];
             if (tabEl) {
-              const tabOffsetLeft = tabEl.offsetLeft;
-              const tabClientWidth = tabEl.clientWidth;
-              // 如果右侧被挡
-              const overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
-              if (overSize > 0) {
-                headerWrapperEl.scrollLeft += overSize;
-              }
-              // 如果左侧被挡，优先
-              if (tabOffsetLeft < scrollLeft) {
-                headerWrapperEl.scrollLeft = tabOffsetLeft;
+              if (lrPosition) {
+                const tabOffsetTop = tabEl.offsetTop;
+                const tabClientHeight = tabEl.clientHeight;
+                // 如果顶部被挡
+                const overSize = tabOffsetTop + tabClientHeight - (scrollTop + clientHeight);
+                if (overSize > 0) {
+                  headerWrapperEl.scrollTop += overSize;
+                }
+                // 如果底部被挡，优先
+                if (tabOffsetTop < scrollTop) {
+                  headerWrapperEl.scrollTop = tabOffsetTop;
+                }
+              } else {
+                const tabOffsetLeft = tabEl.offsetLeft;
+                const tabClientWidth = tabEl.clientWidth;
+                // 如果右侧被挡
+                const overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
+                if (overSize > 0) {
+                  headerWrapperEl.scrollLeft += overSize;
+                }
+                // 如果左侧被挡，优先
+                if (tabOffsetLeft < scrollLeft) {
+                  headerWrapperEl.scrollLeft = tabOffsetLeft;
+                }
               }
             }
           }
@@ -23010,7 +23193,6 @@ const ViewItemComponent = defineVxeComponent({
     Object.assign($xeTabs, tabsMethods, tabsPrivateMethods);
     const renderTabHeader = tabList => {
       const {
-        type,
         titleWidth: allTitleWidth,
         titleAlign: allTitleAlign,
         showClose,
@@ -23019,28 +23201,47 @@ const ViewItemComponent = defineVxeComponent({
       } = props;
       const {
         activeName,
-        lintLeft,
-        lintWidth,
+        scrollbarWidth,
+        scrollbarHeight,
         isTabOver,
         cacheTabMaps
       } = reactData;
-      const extraSlot = slots.extra;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const lrPosition = computeLrPosition.value;
+      const lineStyle = computeLineStyle.value;
+      const prefixSlot = slots.prefix;
+      const suffixSlot = slots.suffix || slots.extra;
       const closeOpts = computeCloseOpts.value;
       const closeVisibleMethod = closeOpts.visibleMethod;
       const refreshOpts = computeRefreshOpts.value;
       const refreshVisibleMethod = refreshOpts.visibleMethod;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-header'
-      }, [isTabOver ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-header--bar vxe-tabs-header--left-bar',
+        key: 'th',
+        class: ['vxe-tabs-header', `type--${tabType}`, `pos--${tabPosition}`]
+      }, [prefixSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-tabs-header--prefix', `type--${tabType}`, `pos--${tabPosition}`]
+      }, getSlotVNs(prefixSlot({
+        name: activeName
+      }))) : renderEmptyElement($xeTabs), isTabOver ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refHeadPrevElem,
+        class: ['vxe-tabs-header--bar vxe-tabs-header--prev-bar', `type--${tabType}`, `pos--${tabPosition}`],
         onClick: scrollLeftEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: getIcon().TABS_TAB_BUTTON_LEFT
+        class: lrPosition ? getIcon().TABS_TAB_BUTTON_TOP : getIcon().TABS_TAB_BUTTON_LEFT
       })]) : renderEmptyElement($xeTabs), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-header--wrapper'
+        class: ['vxe-tabs-header--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refHeadWrapperElem,
-        class: 'vxe-tabs-header--item-wrapper'
+        class: 'vxe-tabs-header--item-wrapper',
+        style: lrPosition ? {
+          marginRight: `-${scrollbarWidth + scrollbarOffsetSize}px`,
+          paddingRight: `${scrollbarOffsetSize}px`
+        } : {
+          marginBottom: `-${scrollbarHeight + scrollbarOffsetSize}px`,
+          paddingBottom: `${scrollbarOffsetSize}px`
+        },
+        onScroll: checkScrolling
       }, tabList.map((item, index) => {
         const {
           title,
@@ -23064,12 +23265,12 @@ const ViewItemComponent = defineVxeComponent({
         const isLoading = cacheItem ? cacheItem.loading : false;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           key: `${name}`,
-          class: ['vxe-tabs-header--item', itemAlign ? `align--${itemAlign}` : '', {
+          class: ['vxe-tabs-header--item', `type--${tabType}`, `pos--${tabPosition}`, itemAlign ? `align--${itemAlign}` : '', {
             'is--active': isActive
           }],
           style: itemWidth ? {
             width: toCssUnit(itemWidth)
-          } : null,
+          } : undefined,
           onClick(evnt) {
             clickEvent(evnt, item);
           }
@@ -23086,15 +23287,19 @@ const ViewItemComponent = defineVxeComponent({
         }, titleSlot ? callSlot(titleSlot, {
           name,
           title
-        }) : `${title}`)]), (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-tabs-header--refresh-btn',
+        }) : `${title}`)]), (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: ['vxe-tabs-header--refresh-btn', {
+            'is--active': isActive
+          }],
           onClick(evnt) {
             handleRefreshTabEvent(evnt, item);
           }
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
           class: isLoading ? getIcon().TABS_TAB_REFRESH_LOADING : getIcon().TABS_TAB_REFRESH
         })]) : renderEmptyElement($xeTabs), (showClose || isEnableConf(closeConfig) || closeOpts.enabled) && (!closeVisibleMethod || closeVisibleMethod(params)) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-tabs-header--close-btn',
+          class: ['vxe-tabs-header--close-btn', {
+            'is--active': isActive
+          }],
           onClick(evnt) {
             handleCloseTabEvent(evnt, item, index, tabList);
           }
@@ -23103,19 +23308,19 @@ const ViewItemComponent = defineVxeComponent({
         })]) : renderEmptyElement($xeTabs)])]);
       }).concat([(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
         key: 'line',
-        class: `vxe-tabs-header--active-line type--${type || 'default'}`,
-        style: {
-          left: `${lintLeft}px`,
-          width: `${lintWidth}px`
-        }
+        class: ['vxe-tabs-header--active-line', `type--${tabType}`, `pos--${tabPosition}`],
+        style: lineStyle
       })]))]), isTabOver ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-header--bar vxe-tabs-header--right-bar',
+        ref: refHeadNextElem,
+        class: ['vxe-tabs-header--bar vxe-tabs-header--next-bar', `type--${tabType}`, `pos--${tabPosition}`],
         onClick: scrollRightEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: getIcon().TABS_TAB_BUTTON_RIGHT
-      })]) : renderEmptyElement($xeTabs), extraSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-header--extra'
-      }, getSlotVNs(extraSlot({}))) : renderEmptyElement($xeTabs)]);
+        class: lrPosition ? getIcon().TABS_TAB_BUTTON_BOTTOM : getIcon().TABS_TAB_BUTTON_RIGHT
+      })]) : renderEmptyElement($xeTabs), suffixSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-tabs-header--suffix', `type--${tabType}`, `pos--${tabPosition}`]
+      }, getSlotVNs(suffixSlot({
+        name: activeName
+      }))) : renderEmptyElement($xeTabs)]);
     };
     const renderTabPane = item => {
       const {
@@ -23130,64 +23335,106 @@ const ViewItemComponent = defineVxeComponent({
       return name && initNames.includes(name) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: `${name}`,
         class: ['vxe-tabs-pane--item', {
-          'is--visible': activeName === name,
-          'has--content': !!defaultSlot
+          'is--visible': activeName === name
         }]
       }, defaultSlot ? callSlot(defaultSlot, {
         name
       }) : []) : renderEmptyElement($xeTabs);
     };
-    const renderTabContent = tabList => {
+    const renderTabContent = (tabList, activeTab) => {
       const {
         destroyOnClose
       } = props;
+      if (destroyOnClose) {
+        return [activeTab ? renderTabPane(activeTab) : renderEmptyElement($xeTabs)];
+      }
+      return tabList.map(item => renderTabPane(item));
+    };
+    const rendetTabBody = tabList => {
+      const {
+        height,
+        padding,
+        showBody
+      } = props;
       const {
         activeName
       } = reactData;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const headerpSlot = slots.header;
+      const footerSlot = slots.footer;
+      const defParams = {
+        name: activeName
+      };
       const activeDefaultTab = tabList.find(item => item.name === activeName);
-      if (destroyOnClose) {
-        return [activeDefaultTab ? renderTabPane(activeDefaultTab) : renderEmptyElement($xeTabs)];
+      let hasContent = false;
+      if (activeDefaultTab) {
+        const {
+          slots
+        } = activeDefaultTab;
+        hasContent = !!(slots && slots.default);
       }
-      return tabList.map(item => renderTabPane(item));
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'tb',
+        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--content': showBody === false ? showBody : hasContent
+        }]
+      }, [headerpSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-tabs-pane--header'
+      }, callSlot(headerpSlot, defParams)) : renderEmptyElement($xeTabs), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-tabs-pane--body', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--padding': padding,
+          'is--height': height
+        }]
+      }, renderTabContent(tabList, activeDefaultTab)), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-tabs-pane--footer'
+      }, callSlot(footerSlot, defParams)) : renderEmptyElement($xeTabs)]);
     };
     const renderVN = () => {
       const {
-        type,
         height,
         padding,
         trigger
       } = props;
+      const {
+        activeName
+      } = reactData;
       const tabOptions = computeTabOptions.value;
       const tabStaticOptions = computeTabStaticOptions.value;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const wrapperStyle = computeWrapperStyle.value;
       const defaultSlot = slots.default;
-      const footerSlot = slots.footer;
       const tabList = defaultSlot ? tabStaticOptions : tabOptions;
+      const vns = [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'ts',
+        class: 'vxe-tabs-slots'
+      }, defaultSlot ? defaultSlot({
+        name: activeName
+      }) : [])];
+      if (tabPosition === 'right' || tabPosition === 'bottom') {
+        vns.push(rendetTabBody(tabList), renderTabHeader(tabList));
+      } else {
+        vns.push(renderTabHeader(tabList), rendetTabBody(tabList));
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-tabs', `vxe-tabs--${type || 'default'}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
+        class: ['vxe-tabs', `pos--${tabPosition}`, `vxe-tabs--${tabType}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
           'is--padding': padding,
           'is--height': height
         }],
-        style: height ? {
-          height: toCssUnit(height)
-        } : null
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-slots'
-      }, defaultSlot ? defaultSlot({}) : []), renderTabHeader(tabList), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-pane'
-      }, renderTabContent(tabList)), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tabs-footer'
-      }, callSlot(footerSlot, {})) : renderEmptyElement($xeTabs)]);
+        style: wrapperStyle
+      }, vns);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.position, () => {
+      reactData.resizeFlag++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
       addInitName(val, null);
       reactData.activeName = val;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => reactData.activeName, val => {
       scrollToTab(val);
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        reactData.resizeFlag++;
-      });
     });
     const optsFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.options ? props.options.length : -1, () => {
@@ -23198,7 +23445,7 @@ const ViewItemComponent = defineVxeComponent({
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(optsFlag, () => {
       initDefaultName(props.options);
-      updateTabStyle();
+      reactData.resizeFlag++;
     });
     const stFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => reactData.staticTabs ? reactData.staticTabs.length : -1, () => {
@@ -23209,21 +23456,19 @@ const ViewItemComponent = defineVxeComponent({
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(stFlag, () => {
       initDefaultName(reactData.staticTabs);
-      updateTabStyle();
+      reactData.resizeFlag++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeParentTabsResizeFlag, () => {
+      reactData.resizeFlag++;
     });
-    if ($xeParentTabs) {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null, () => {
-        reactData.resizeFlag++;
-      });
-    }
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => reactData.resizeFlag, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
         updateTabStyle();
       });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      globalEvents.on($xeTabs, 'resize', updateTabStyle);
       updateTabStyle();
+      globalEvents.on($xeTabs, 'resize', updateTabStyle);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
       globalEvents.off($xeTabs, 'resize');
@@ -45037,6 +45282,7 @@ const Modal = VxeModal;
       slots,
       emit
     } = context;
+    const $xeTabs = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTabs', null);
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     const {
       computeSize
@@ -45055,6 +45301,9 @@ const Modal = VxeModal;
       } = props;
       return `${content || ''}`;
     });
+    const computeTabsResizeFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return $xeTabs ? $xeTabs.reactData.resizeFlag : null;
+    });
     const computeMaps = {};
     const $xeNoticeBar = {
       xID,
@@ -45124,7 +45373,9 @@ const Modal = VxeModal;
         class: 'vxe-notice-bar--suffix'
       }, suffixSlot({})) : renderEmptyElement($xeNoticeBar)]);
     };
-    $xeNoticeBar.renderVN = renderVN;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTabsResizeFlag, () => {
+      updateAnimationStyle();
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       globalEvents.on($xeNoticeBar, 'resize', updateAnimationStyle);
       updateAnimationStyle();
@@ -45132,6 +45383,7 @@ const Modal = VxeModal;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       globalEvents.off($xeNoticeBar, 'resize');
     });
+    $xeNoticeBar.renderVN = renderVN;
     return $xeNoticeBar;
   },
   render() {