vxe-pc-ui 4.6.34 → 4.6.36

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.34"}`;
+const log_version = `ui v${"4.6.36"}`;
 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.34";
+const ui_version = "4.6.36";
 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',
@@ -22549,11 +22551,19 @@ const ViewItemComponent = defineVxeComponent({
   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,
     padding: {
       type: Boolean,
@@ -22576,12 +22586,17 @@ 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,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -22592,6 +22607,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);
     });
@@ -22641,49 +22702,114 @@ 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 scrollbarWidth = 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
+            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;
+          scrollbarWidth = offsetWidth - clientWidth;
+          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;
+                  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 = scrollbarWidth;
         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 +23003,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 +23019,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 +23063,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 +23083,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 +23091,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 +23180,6 @@ const ViewItemComponent = defineVxeComponent({
     Object.assign($xeTabs, tabsMethods, tabsPrivateMethods);
     const renderTabHeader = tabList => {
       const {
-        type,
         titleWidth: allTitleWidth,
         titleAlign: allTitleAlign,
         showClose,
@@ -23019,28 +23188,42 @@ const ViewItemComponent = defineVxeComponent({
       } = props;
       const {
         activeName,
-        lintLeft,
-        lintWidth,
+        scrollbarWidth,
         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 && scrollbarWidth ? {
+          marginRight: `-${scrollbarWidth}px`
+        } : undefined,
+        onScroll: checkScrolling
       }, tabList.map((item, index) => {
         const {
           title,
@@ -23064,12 +23247,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 +23269,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 +23290,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 {
@@ -23150,35 +23337,74 @@ const ViewItemComponent = defineVxeComponent({
       }
       return tabList.map(item => renderTabPane(item));
     };
+    const rendetTabBody = tabList => {
+      const {
+        height,
+        padding
+      } = props;
+      const {
+        activeName
+      } = reactData;
+      const tabType = computeTabType.value;
+      const tabPosition = computeTabPosition.value;
+      const topSlot = slots.top;
+      const footerSlot = slots.footer;
+      const defParams = {
+        name: activeName
+      };
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'tb',
+        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
+      }, [topSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-tabs-pane--top'
+      }, callSlot(topSlot, 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)), 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, () => {
+      updateTabStyle();
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
       addInitName(val, null);
       reactData.activeName = val;