vxe-pc-ui 4.6.35 → 4.6.36

package/lib/tabs/src/tabs.js

@@ -18,11 +18,19 @@ var _default = exports.default = (0, _comp.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: () => (0, _ui.getConfig)().tabs.type
+    },
+    position: {
+      type: String,
+      default: () => (0, _ui.getConfig)().tabs.position
+    },
     showClose: Boolean,
     padding: {
       type: Boolean,
@@ -45,12 +53,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const $xeParentTabs = (0, _vue.inject)('$xeTabs', null);
     const refElem = (0, _vue.ref)();
     const refHeadWrapperElem = (0, _vue.ref)();
+    const refHeadPrevElem = (0, _vue.ref)();
+    const refHeadNextElem = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
       staticTabs: [],
       activeName: null,
       initNames: [],
       lintLeft: 0,
+      lintTop: 0,
       lintWidth: 0,
+      lintHeight: 0,
+      scrollbarWidth: 0,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -61,6 +74,52 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refMaps = {
       refElem
     };
+    const computeTabType = (0, _vue.computed)(() => {
+      const {
+        type
+      } = props;
+      return type || 'default';
+    });
+    const computeTabPosition = (0, _vue.computed)(() => {
+      const {
+        position
+      } = props;
+      return position || 'top';
+    });
+    const computeLrPosition = (0, _vue.computed)(() => {
+      const tabPosition = computeTabPosition.value;
+      return tabPosition === 'left' || tabPosition === 'right';
+    });
+    const computeLineStyle = (0, _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, _vue.computed)(() => {
+      const {
+        width,
+        height
+      } = props;
+      const stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (width) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    });
     const computeCloseOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().tabs.closeConfig, props.closeConfig);
     });
@@ -110,49 +169,114 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return [];
     };
-    const updateTabStyle = () => {
-      (0, _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) {
+            (0, _dom.addClass)(headPrevEl, 'scrolling--middle');
+          } else {
+            (0, _dom.removeClass)(headPrevEl, 'scrolling--middle');
+          }
+        }
+        if (headNextEl) {
+          if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
+            (0, _dom.addClass)(headNextEl, 'scrolling--middle');
+          } else {
+            (0, _dom.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 = _xeUtils.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, _vue.nextTick)(handleStyle);
     };
     const dispatchEvent = (type, params, evnt) => {
       emit(type, (0, _ui.createEvent)(evnt, {
@@ -346,7 +470,9 @@ var _default = exports.default = (0, _comp.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) {
@@ -360,21 +486,41 @@ var _default = exports.default = (0, _comp.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();
@@ -384,9 +530,14 @@ var _default = exports.default = (0, _comp.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);
       }
     };
@@ -399,6 +550,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const scrollToTab = name => {
       const tabOptions = computeTabOptions.value;
       const tabStaticOptions = computeTabStaticOptions.value;
+      const lrPosition = computeLrPosition.value;
       return (0, _vue.nextTick)().then(() => {
         const headerWrapperEl = refHeadWrapperElem.value;
         if (headerWrapperEl) {
@@ -406,21 +558,37 @@ var _default = exports.default = (0, _comp.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;
+                }
               }
             }
           }
@@ -479,7 +647,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     Object.assign($xeTabs, tabsMethods, tabsPrivateMethods);
     const renderTabHeader = tabList => {
       const {
-        type,
         titleWidth: allTitleWidth,
         titleAlign: allTitleAlign,
         showClose,
@@ -488,28 +655,42 @@ var _default = exports.default = (0, _comp.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, _vue.h)('div', {
-        class: 'vxe-tabs-header'
-      }, [isTabOver ? (0, _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, _vue.h)('div', {
+        class: ['vxe-tabs-header--prefix', `type--${tabType}`, `pos--${tabPosition}`]
+      }, (0, _vn.getSlotVNs)(prefixSlot({
+        name: activeName
+      }))) : (0, _ui.renderEmptyElement)($xeTabs), isTabOver ? (0, _vue.h)('div', {
+        ref: refHeadPrevElem,
+        class: ['vxe-tabs-header--bar vxe-tabs-header--prev-bar', `type--${tabType}`, `pos--${tabPosition}`],
         onClick: scrollLeftEvent
       }, [(0, _vue.h)('span', {
-        class: (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
+        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_TOP : (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
       })]) : (0, _ui.renderEmptyElement)($xeTabs), (0, _vue.h)('div', {
-        class: 'vxe-tabs-header--wrapper'
+        class: ['vxe-tabs-header--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
       }, [(0, _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,
@@ -533,12 +714,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const isLoading = cacheItem ? cacheItem.loading : false;
         return (0, _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: (0, _dom.toCssUnit)(itemWidth)
-          } : null,
+          } : undefined,
           onClick(evnt) {
             clickEvent(evnt, item);
           }
@@ -555,15 +736,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, titleSlot ? callSlot(titleSlot, {
           name,
           title
-        }) : `${title}`)]), ((0, _utils.isEnableConf)(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive) ? (0, _vue.h)('div', {
-          class: 'vxe-tabs-header--refresh-btn',
+        }) : `${title}`)]), ((0, _utils.isEnableConf)(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? (0, _vue.h)('div', {
+          class: ['vxe-tabs-header--refresh-btn', {
+            'is--active': isActive
+          }],
           onClick(evnt) {
             handleRefreshTabEvent(evnt, item);
           }
         }, [(0, _vue.h)('i', {
           class: isLoading ? (0, _ui.getIcon)().TABS_TAB_REFRESH_LOADING : (0, _ui.getIcon)().TABS_TAB_REFRESH
         })]) : (0, _ui.renderEmptyElement)($xeTabs), (showClose || (0, _utils.isEnableConf)(closeConfig) || closeOpts.enabled) && (!closeVisibleMethod || closeVisibleMethod(params)) ? (0, _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);
           }
@@ -572,19 +757,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         })]) : (0, _ui.renderEmptyElement)($xeTabs)])]);
       }).concat([(0, _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, _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, _vue.h)('span', {
-        class: (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
-      })]) : (0, _ui.renderEmptyElement)($xeTabs), extraSlot ? (0, _vue.h)('div', {
-        class: 'vxe-tabs-header--extra'
-      }, (0, _vn.getSlotVNs)(extraSlot({}))) : (0, _ui.renderEmptyElement)($xeTabs)]);
+        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_BOTTOM : (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
+      })]) : (0, _ui.renderEmptyElement)($xeTabs), suffixSlot ? (0, _vue.h)('div', {
+        class: ['vxe-tabs-header--suffix', `type--${tabType}`, `pos--${tabPosition}`]
+      }, (0, _vn.getSlotVNs)(suffixSlot({
+        name: activeName
+      }))) : (0, _ui.renderEmptyElement)($xeTabs)]);
     };
     const renderTabPane = item => {
       const {
@@ -619,35 +804,74 @@ var _default = exports.default = (0, _comp.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, _vue.h)('div', {
+        key: 'tb',
+        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
+      }, [topSlot ? (0, _vue.h)('div', {
+        class: 'vxe-tabs-pane--top'
+      }, callSlot(topSlot, defParams)) : (0, _ui.renderEmptyElement)($xeTabs), (0, _vue.h)('div', {
+        class: ['vxe-tabs-pane--body', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--padding': padding,
+          'is--height': height
+        }]
+      }, renderTabContent(tabList)), footerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-tabs-pane--footer'
+      }, callSlot(footerSlot, defParams)) : (0, _ui.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, _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, _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: (0, _dom.toCssUnit)(height)
-        } : null
-      }, [(0, _vue.h)('div', {
-        class: 'vxe-tabs-slots'
-      }, defaultSlot ? defaultSlot({}) : []), renderTabHeader(tabList), (0, _vue.h)('div', {
-        class: 'vxe-tabs-pane'
-      }, renderTabContent(tabList)), footerSlot ? (0, _vue.h)('div', {
-        class: 'vxe-tabs-footer'
-      }, callSlot(footerSlot, {})) : (0, _ui.renderEmptyElement)($xeTabs)]);
+        style: wrapperStyle
+      }, vns);
     };
+    (0, _vue.watch)(() => props.position, () => {
+      updateTabStyle();
+    });
     (0, _vue.watch)(() => props.modelValue, val => {
       addInitName(val, null);
       reactData.activeName = val;

package/lib/tabs/src/tabs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTabs",props:{modelValue:[String,Number,Boolean],options:Array,height:[String,Number],destroyOnClose:Boolean,titleWidth:[String,Number],titleAlign:[String,Number],type:String,showClose:Boolean,padding:{type:Boolean,default:()=>(0,_ui.getConfig)().tabs.padding},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,beforeCloseMethod:Function},emits:["update:modelValue","change","tab-change","tab-change-fail","tab-close","tab-close-fail","tab-click","tab-load"],setup(u,e){const{slots:o,emit:r}=e;var t=_xeUtils.default.uniqueId();const a=(0,_vue.inject)("$xeTabs",null),v=(0,_vue.ref)(),C=(0,_vue.ref)(),E=(0,_vue.reactive)({staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintWidth:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}}),c={slTimeout:void 0},l={refElem:v},y=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.closeConfig,u.closeConfig)),M=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.refreshConfig,u.refreshConfig)),d=(0,_vue.computed)(()=>{var e=u["options"];return(e||[]).filter(e=>n(e))}),h=(0,_vue.computed)(()=>{var e=E["staticTabs"];return e.filter(e=>n(e))}),i={},w={xID:t,props:u,context:e,reactData:E,getRefMaps:()=>l,getComputeMaps:()=>i},n=e=>{e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},L=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=o[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],m=()=>{(0,_vue.nextTick)(()=>{var e=u["type"];const t=E["activeName"];var a,l=d.value,i=h.value,n=C.value;let s=0,r=0,o=!1;n&&(i=_xeUtils.default.findIndexOf(i.length?i:l,e=>e.name===t),{children:l,scrollWidth:n,clientWidth:a}=n,o=n!==a,-1<i)&&(a=(n=l[i]).clientWidth,e?"card"===e?(s=a+2,r=n.offsetLeft):"border-card"===e&&(s=a+2,r=n.offsetLeft-1):(s=Math.max(4,Math.floor(.6*a)),r=n.offsetLeft+Math.floor((a-s)/2))),E.lintLeft=r,E.lintWidth=s,E.isTabOver=o})},_=(e,t,a)=>{r(e,(0,_ui.createEvent)(a,{$tabs:w},t))},f=(e,t)=>{var a=E["initNames"];return!(!e||a.includes(e)||(_("tab-load",{name:e},t),a.push(e),0))},s=e=>{let l=null;const i={};if(e&&e.length){let a=!1;l=u.modelValue,e.forEach(e=>{var{name:e,preload:t}=e||{};e&&(i[""+e]={loading:!1},l===e&&(a=!0),t)&&f(e,null)}),a||(l=e[0].name,f(l,null),r("update:modelValue",l))}E.activeName=l,E.cacheTabMaps=i},O=(t,a)=>{var e=u["trigger"],l=u.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod;const i=E["activeName"],n=a["name"],s=n;_("tab-click",{name:n},t),"manual"!==e&&n!==i&&Promise.resolve(!l||l({$tabs:w,name:n,oldName:i,newName:n,option:a})).then(e=>{e?(E.activeName=n,r("update:modelValue",s),f(n,t),_("change",{value:s,name:n,oldName:i,newName:n,option:a},t),_("tab-change",{value:s,name:n,oldName:i,newName:n,option:a},t)):_("tab-change-fail",{value:s,name:n,oldName:i,newName:n,option:a},t)}).catch(()=>{_("tab-change-fail",{value:s,name:n,oldName:i,newName:n,option:a},t)})},S=(e,t)=>{e.stopPropagation();var{activeName:e,cacheTabMaps:a}=E,l=t["name"],i=M.value["queryMethod"];const n=l?a[""+l]:null;n&&(i?(n.loading=!0,Promise.resolve(i({$tabs:w,value:e,name:l,option:t})).finally(()=>{n.loading=!1})):(0,_log.errLog)("vxe.error.notFunc",["refresh-config.queryMethod"]))},k=(t,e,a,l)=>{t.stopPropagation();var i=E["activeName"],n=y.value.beforeMethod||u.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod;const s=e["name"],r=i;let o=r;i===s&&(i=a<l.length-1?l[a+1]:l[a-1],o=i?i.name:null),Promise.resolve(!n||n({$tabs:w,value:r,name:s,nextName:o,option:e})).then(e=>{e?_("tab-close",{value:r,name:s,nextName:o},t):_("tab-close-fail",{value:r,name:s,nextName:o},t)}).catch(()=>{_("tab-close-fail",{value:r,name:s,nextName:o},t)})},b=e=>{var t=C.value;if(t){t=Math.floor(.75*t.clientWidth);{var r=e,e=t,t=c["slTimeout"];let i=e,n=6,s=35;t&&(clearTimeout(t),c.slTimeout=void 0);const o=()=>{var e,t,a,l=C.value;0<n&&(n--,l)&&({clientWidth:e,scrollWidth:t,scrollLeft:a}=l,i=Math.floor(i/2),0<r?e+a<t&&(l.scrollLeft+=i,s-=4,c.slTimeout=setTimeout(o,s)):0<a&&(l.scrollLeft-=i,s-=4,c.slTimeout=setTimeout(o,s)),m())};o()}}},B=()=>{b(-1)},A=()=>{b(1)},g=n=>{const s=d.value,r=h.value;return(0,_vue.nextTick)().then(()=>{var e,t,a,l,i=C.value;i&&(-1<(a=_xeUtils.default.findIndexOf(r.length?r:s,e=>e.name===n))&&({scrollLeft:e,clientWidth:t,children:l}=i,l=l[a])&&(0<(l=(a=l.offsetLeft)+l.clientWidth-(e+t))&&(i.scrollLeft+=l),a<e)&&(i.scrollLeft=a),m())})},p=t=>{const a=E["activeName"];var l=d.value,i=h.value,i=i.length?i:l,l=_xeUtils.default.findIndexOf(i,e=>e.name===a);if(-1<l){let e=null;t?l<i.length-1&&(e=i[l+1]):0<l&&(e=i[l-1]),e&&(i=t=e.name,E.activeName=t,r("update:modelValue",i),f(t,null))}return(0,_vue.nextTick)()},x={dispatchEvent:_,scrollToTab:g,prev(){return p(!1)},next(){return p(!0)},prevTab(){return(0,_log.warnLog)("vxe.error.delFunc",["prevTab","prev"]),x.prev()},nextTab(){return(0,_log.warnLog)("vxe.error.delFunc",["nextTab","next"]),x.next()}};Object.assign(w,x,{});const T=e=>{var{initNames:t,activeName:a}=E,{name:e,slots:l}=e,l=l?l.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{key:""+e,class:["vxe-tabs-pane--item",{"is--visible":a===e,"has--content":!!l}]},l?L(l,{name:e}):[]):(0,_ui.renderEmptyElement)(w)};(0,_vue.watch)(()=>u.modelValue,e=>{f(e,null),E.activeName=e}),(0,_vue.watch)(()=>E.activeName,e=>{g(e),(0,_vue.nextTick)(()=>{E.resizeFlag++})});const N=(0,_vue.ref)(0),V=((0,_vue.watch)(()=>u.options?u.options.length:-1,()=>{N.value++}),(0,_vue.watch)(()=>u.options,()=>{N.value++}),(0,_vue.watch)(N,()=>{s(u.options),m()}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>E.staticTabs?E.staticTabs.length:-1,()=>{V.value++}),(0,_vue.watch)(()=>E.staticTabs,()=>{V.value++}),(0,_vue.watch)(V,()=>{s(E.staticTabs),m()}),a&&(0,_vue.watch)(()=>a?a.reactData.resizeFlag:null,()=>{E.resizeFlag++}),(0,_vue.watch)(()=>E.resizeFlag,()=>{(0,_vue.nextTick)(()=>{m()})}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(w,"resize",m),m()}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(w,"resize")}),(0,_vue.provide)("$xeTabs",w),f(u.modelValue,null),s(E.staticTabs.length?E.staticTabs:u.options),w.renderVN=()=>{var{type:e,height:t,padding:a,trigger:l}=u,i=d.value,n=h.value,s=o.default,r=o.footer,n=s?n:i;return(0,_vue.h)("div",{ref:v,class:["vxe-tabs","vxe-tabs--"+(e||"default"),"trigger--"+("manual"===l?"trigger":"default"),{"is--padding":a,"is--height":t}],style:t?{height:(0,_dom.toCssUnit)(t)}:null},[(0,_vue.h)("div",{class:"vxe-tabs-slots"},s?s({}):[]),(c=>{const{type:e,titleWidth:d,titleAlign:h,showClose:m,closeConfig:_,refreshConfig:f}=u,{activeName:b,lintLeft:t,lintWidth:a,isTabOver:l,cacheTabMaps:g}=E;var i=o.extra;const p=y.value,x=p.visibleMethod,T=M.value,N=T.visibleMethod;return(0,_vue.h)("div",{class:"vxe-tabs-header"},[l?(0,_vue.h)("div",{class:"vxe-tabs-header--bar vxe-tabs-header--left-bar",onClick:B},[(0,_vue.h)("span",{class:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_ui.renderEmptyElement)(w),(0,_vue.h)("div",{class:"vxe-tabs-header--wrapper"},[(0,_vue.h)("div",{ref:C,class:"vxe-tabs-header--item-wrapper"},c.map((t,a)=>{var{title:e,titleWidth:l,titleAlign:i,icon:n,name:s,slots:r}=t,r=r?r.title||r.tab:null,l=l||d,i=i||h,o={$tabs:w,value:b,name:s,option:t},u=b===s,v=s?g[""+s]:null,v=!!v&&v.loading;return(0,_vue.h)("div",{key:""+s,class:["vxe-tabs-header--item",i?"align--"+i:"",{"is--active":u}],style:l?{width:(0,_dom.toCssUnit)(l)}:null,onClick(e){O(e,t)}},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-inner"},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-content"},[n?(0,_vue.h)("span",{class:"vxe-tabs-header--item-icon"},[(0,_vue.h)("i",{class:n})]):(0,_ui.renderEmptyElement)(w),(0,_vue.h)("span",{class:"vxe-tabs-header--item-name"},r?L(r,{name:s,title:e}):""+e)]),((0,_utils.isEnableConf)(f)||T.enabled)&&(N?N(o):u)?(0,_vue.h)("div",{class:"vxe-tabs-header--refresh-btn",onClick(e){S(e,t)}},[(0,_vue.h)("i",{class:v?(0,_ui.getIcon)().TABS_TAB_REFRESH_LOADING:(0,_ui.getIcon)().TABS_TAB_REFRESH})]):(0,_ui.renderEmptyElement)(w),!(m||(0,_utils.isEnableConf)(_)||p.enabled)||x&&!x(o)?(0,_ui.renderEmptyElement)(w):(0,_vue.h)("div",{class:"vxe-tabs-header--close-btn",onClick(e){k(e,t,a,c)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().TABS_TAB_CLOSE})])])])}).concat([(0,_vue.h)("span",{key:"line",class:"vxe-tabs-header--active-line type--"+(e||"default"),style:{left:t+"px",width:a+"px"}})]))]),l?(0,_vue.h)("div",{class:"vxe-tabs-header--bar vxe-tabs-header--right-bar",onClick:A},[(0,_vue.h)("span",{class:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_ui.renderEmptyElement)(w),i?(0,_vue.h)("div",{class:"vxe-tabs-header--extra"},(0,_vn.getSlotVNs)(i({}))):(0,_ui.renderEmptyElement)(w)])})(n),(0,_vue.h)("div",{class:"vxe-tabs-pane"},(e=>{var t=u["destroyOnClose"];const a=E["activeName"];var l=e.find(e=>e.name===a);return t?[l?T(l):(0,_ui.renderEmptyElement)(w)]:e.map(e=>T(e))})(n)),r?(0,_vue.h)("div",{class:"vxe-tabs-footer"},L(r,{})):(0,_ui.renderEmptyElement)(w)])},w},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.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:{type:String,default:()=>(0,_ui.getConfig)().tabs.type},position:{type:String,default:()=>(0,_ui.getConfig)().tabs.position},showClose:Boolean,padding:{type:Boolean,default:()=>(0,_ui.getConfig)().tabs.padding},trigger:String,beforeChangeMethod:Function,closeConfig:Object,refreshConfig:Object,beforeCloseMethod:Function},emits:["update:modelValue","change","tab-change","tab-change-fail","tab-close","tab-close-fail","tab-click","tab-load"],setup(v,e){const{slots:E,emit:s}=e;var t=_xeUtils.default.uniqueId();const a=(0,_vue.inject)("$xeTabs",null),c=(0,_vue.ref)(),M=(0,_vue.ref)(),u=(0,_vue.ref)(),w=(0,_vue.ref)(),B=(0,_vue.reactive)({staticTabs:[],activeName:null,initNames:[],lintLeft:0,lintTop:0,lintWidth:0,lintHeight:0,scrollbarWidth:0,isTabOver:!1,resizeFlag:1,cacheTabMaps:{}}),m={slTimeout:void 0},V={refElem:c},O=(0,_vue.computed)(()=>{var e=v["type"];return e||"default"}),S=(0,_vue.computed)(()=>{var e=v["position"];return e||"top"}),W=(0,_vue.computed)(()=>{var e=S.value;return"left"===e||"right"===e}),U=(0,_vue.computed)(()=>{var{lintLeft:e,lintTop:t,lintWidth:a,lintHeight:i}=B;return W.value?{top:t+"px",height:i+"px"}:{left:e+"px",width:a+"px"}}),F=(0,_vue.computed)(()=>{var{width:e,height:t}=v,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),e&&(a.height=(0,_dom.toCssUnit)(t)),a}),L=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.closeConfig,v.closeConfig)),o=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tabs.refreshConfig,v.refreshConfig)),_=(0,_vue.computed)(()=>{var e=v["options"];return(e||[]).filter(e=>i(e))}),f=(0,_vue.computed)(()=>{var e=B["staticTabs"];return e.filter(e=>i(e))}),I={},k={xID:t,props:v,context:e,reactData:B,getRefMaps:()=>V,getComputeMaps:()=>I},i=e=>{e=e.permissionCode;return!(e&&!_ui.permission.checkVisible(e))},A=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=E[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],H=()=>{var e,t,a,i,l,n=W.value,o=M.value,s=u.value,r=w.value;o&&({scrollLeft:o,scrollTop:e,clientWidth:t,clientHeight:a,scrollWidth:i,scrollHeight:l}=o,s&&(0<(n?e:o)?(0,_dom.addClass):(0,_dom.removeClass))(s,"scrolling--middle"),r)&&((n?a<l-Math.ceil(e):t<i-Math.ceil(o))?(0,_dom.addClass):(0,_dom.removeClass))(r,"scrolling--middle")},p=()=>{var e=()=>{const t=B["activeName"];var e,a,i,l,n=O.value,o=_.value,s=f.value,r=M.value,u=W.value;let v=0,c=0,d=0,h=0,m=0,p=!1;r&&(s=_xeUtils.default.findIndexOf(s.length?s:o,e=>e.name===t),{children:o,offsetWidth:r,scrollWidth:e,scrollHeight:l,clientWidth:a,clientHeight:i}=r,m=r-a,u?(p=l!==i,-1<s&&(r=o[s])&&(u=r.clientHeight,l=r.clientWidth,h="card"===n?(v=l,c=u,r.offsetTop):"border-card"===n?(v=l,c=u,r.offsetTop-1):(c=Math.max(4,Math.floor(.6*u)),r.offsetTop+Math.floor((u-c)/2)))):(p=e!==a,-1<s&&(i=o[s])&&(l=i.clientWidth,d="card"===n?(v=l,i.offsetLeft):"border-card"===n?(v=l,i.offsetLeft-1):(v=Math.max(4,Math.floor(.6*l)),i.offsetLeft+Math.floor((l-v)/2))))),B.scrollbarWidth=m,B.lintLeft=d,B.lintTop=h,B.lintWidth=v,B.lintHeight=c,B.isTabOver=p,H()};e(),(0,_vue.nextTick)(e)},d=(e,t,a)=>{s(e,(0,_ui.createEvent)(a,{$tabs:k},t))},r=(e,t)=>{var a=B["initNames"];return!(!e||a.includes(e)||(d("tab-load",{name:e},t),a.push(e),0))},l=e=>{let i=null;const l={};if(e&&e.length){let a=!1;i=v.modelValue,e.forEach(e=>{var{name:e,preload:t}=e||{};e&&(l[""+e]={loading:!1},i===e&&(a=!0),t)&&r(e,null)}),a||(i=e[0].name,r(i,null),s("update:modelValue",i))}B.activeName=i,B.cacheTabMaps=l},q=(t,a)=>{var e=v["trigger"],i=v.beforeChangeMethod||(0,_ui.getConfig)().tabs.beforeChangeMethod;const l=B["activeName"],n=a["name"],o=n;d("tab-click",{name:n},t),"manual"!==e&&n!==l&&Promise.resolve(!i||i({$tabs:k,name:n,oldName:l,newName:n,option:a})).then(e=>{e?(B.activeName=n,s("update:modelValue",o),r(n,t),d("change",{value:o,name:n,oldName:l,newName:n,option:a},t),d("tab-change",{value:o,name:n,oldName:l,newName:n,option:a},t)):d("tab-change-fail",{value:o,name:n,oldName:l,newName:n,option:a},t)}).catch(()=>{d("tab-change-fail",{value:o,name:n,oldName:l,newName:n,option:a},t)})},R=(e,t)=>{e.stopPropagation();var{activeName:e,cacheTabMaps:a}=B,i=t["name"],l=o.value["queryMethod"];const n=i?a[""+i]:null;n&&(l?(n.loading=!0,Promise.resolve(l({$tabs:k,value:e,name:i,option:t})).finally(()=>{n.loading=!1})):(0,_log.errLog)("vxe.error.notFunc",["refresh-config.queryMethod"]))},$=(t,e,a,i)=>{t.stopPropagation();var l=B["activeName"],n=L.value.beforeMethod||v.beforeCloseMethod||(0,_ui.getConfig)().tabs.beforeCloseMethod;const o=e["name"],s=l;let r=s;l===o&&(l=a<i.length-1?i[a+1]:i[a-1],r=l?l.name:null),Promise.resolve(!n||n({$tabs:k,value:s,name:o,nextName:r,option:e})).then(e=>{e?d("tab-close",{value:s,name:o,nextName:r},t):d("tab-close-fail",{value:s,name:o,nextName:r},t)}).catch(()=>{d("tab-close-fail",{value:s,name:o,nextName:r},t)})},n=e=>{var t=W.value,a=M.value;if(a){var{clientWidth:a,clientHeight:i}=a,t=Math.floor(.75*(t?i:a));{var c=e,i=t,a=m["slTimeout"];const d=W.value;let s=d?0:i,r=d?i:0,u=6,v=35;a&&(clearTimeout(a),m.slTimeout=void 0);const h=()=>{var e,t,a,i,l,n,o=M.value;0<u&&(u--,o)&&({clientWidth:e,clientHeight:t,scrollWidth:a,scrollHeight:i,scrollLeft:l,scrollTop:n}=o,d?(r=Math.floor(r/2),0<c?t+n<i&&(o.scrollTop+=r,v-=4,m.slTimeout=setTimeout(h,v)):0<n&&(o.scrollTop-=r,v-=4,m.slTimeout=setTimeout(h,v))):(s=Math.floor(s/2),0<c?e+l<a&&(o.scrollLeft+=s,v-=4,m.slTimeout=setTimeout(h,v)):0<l&&(o.scrollLeft-=s,v-=4,m.slTimeout=setTimeout(h,v))),p())};h()}}},j=()=>{n(-1)},z=()=>{n(1)},h=s=>{const r=_.value,u=f.value,v=W.value;return(0,_vue.nextTick)().then(()=>{var e,t,a,i,l,n,o=M.value;o&&(-1<(i=_xeUtils.default.findIndexOf(u.length?u:r,e=>e.name===s))&&({scrollLeft:e,scrollTop:n,clientWidth:t,clientHeight:l,children:a}=o,a=a[i])&&(v?(0<(l=(i=a.offsetTop)+a.clientHeight-(n+l))&&(o.scrollTop+=l),i<n&&(o.scrollTop=i)):(0<(n=(l=a.offsetLeft)+a.clientWidth-(e+t))&&(o.scrollLeft+=n),l<e&&(o.scrollLeft=l))),p())})},g=t=>{const a=B["activeName"];var i=_.value,l=f.value,l=l.length?l:i,i=_xeUtils.default.findIndexOf(l,e=>e.name===a);if(-1<i){let e=null;t?i<l.length-1&&(e=l[i+1]):0<i&&(e=l[i-1]),e&&(l=t=e.name,B.activeName=t,s("update:modelValue",l),r(t,null))}return(0,_vue.nextTick)()},b={dispatchEvent:d,scrollToTab:h,prev(){return g(!1)},next(){return g(!0)},prevTab(){return(0,_log.warnLog)("vxe.error.delFunc",["prevTab","prev"]),b.prev()},nextTab(){return(0,_log.warnLog)("vxe.error.delFunc",["nextTab","next"]),b.next()}};Object.assign(k,b,{});const T=c=>{const{titleWidth:d,titleAlign:h,showClose:m,closeConfig:p,refreshConfig:_}=v,{activeName:f,scrollbarWidth:e,isTabOver:t,cacheTabMaps:g}=B,b=O.value,T=S.value;var a=W.value,i=U.value,l=E.prefix,n=E.suffix||E.extra;const x=L.value,N=x.visibleMethod,y=o.value,C=y.visibleMethod;return(0,_vue.h)("div",{key:"th",class:["vxe-tabs-header","type--"+b,"pos--"+T]},[l?(0,_vue.h)("div",{class:["vxe-tabs-header--prefix","type--"+b,"pos--"+T]},(0,_vn.getSlotVNs)(l({name:f}))):(0,_ui.renderEmptyElement)(k),t?(0,_vue.h)("div",{ref:u,class:["vxe-tabs-header--bar vxe-tabs-header--prev-bar","type--"+b,"pos--"+T],onClick:j},[(0,_vue.h)("span",{class:a?(0,_ui.getIcon)().TABS_TAB_BUTTON_TOP:(0,_ui.getIcon)().TABS_TAB_BUTTON_LEFT})]):(0,_ui.renderEmptyElement)(k),(0,_vue.h)("div",{class:["vxe-tabs-header--wrapper","type--"+b,"pos--"+T]},[(0,_vue.h)("div",{ref:M,class:"vxe-tabs-header--item-wrapper",style:a&&e?{marginRight:`-${e}px`}:void 0,onScroll:H},c.map((t,a)=>{var{title:e,titleWidth:i,titleAlign:l,icon:n,name:o,slots:s}=t,s=s?s.title||s.tab:null,i=i||d,l=l||h,r={$tabs:k,value:f,name:o,option:t},u=f===o,v=o?g[""+o]:null,v=!!v&&v.loading;return(0,_vue.h)("div",{key:""+o,class:["vxe-tabs-header--item","type--"+b,"pos--"+T,l?"align--"+l:"",{"is--active":u}],style:i?{width:(0,_dom.toCssUnit)(i)}:void 0,onClick(e){q(e,t)}},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-inner"},[(0,_vue.h)("div",{class:"vxe-tabs-header--item-content"},[n?(0,_vue.h)("span",{class:"vxe-tabs-header--item-icon"},[(0,_vue.h)("i",{class:n})]):(0,_ui.renderEmptyElement)(k),(0,_vue.h)("span",{class:"vxe-tabs-header--item-name"},s?A(s,{name:o,title:e}):""+e)]),!(0,_utils.isEnableConf)(_)&&!y.enabled||C&&!C(r)?(0,_ui.renderEmptyElement)(k):(0,_vue.h)("div",{class:["vxe-tabs-header--refresh-btn",{"is--active":u}],onClick(e){R(e,t)}},[(0,_vue.h)("i",{class:v?(0,_ui.getIcon)().TABS_TAB_REFRESH_LOADING:(0,_ui.getIcon)().TABS_TAB_REFRESH})]),!(m||(0,_utils.isEnableConf)(p)||x.enabled)||N&&!N(r)?(0,_ui.renderEmptyElement)(k):(0,_vue.h)("div",{class:["vxe-tabs-header--close-btn",{"is--active":u}],onClick(e){$(e,t,a,c)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().TABS_TAB_CLOSE})])])])}).concat([(0,_vue.h)("span",{key:"line",class:["vxe-tabs-header--active-line","type--"+b,"pos--"+T],style:i})]))]),t?(0,_vue.h)("div",{ref:w,class:["vxe-tabs-header--bar vxe-tabs-header--next-bar","type--"+b,"pos--"+T],onClick:z},[(0,_vue.h)("span",{class:a?(0,_ui.getIcon)().TABS_TAB_BUTTON_BOTTOM:(0,_ui.getIcon)().TABS_TAB_BUTTON_RIGHT})]):(0,_ui.renderEmptyElement)(k),n?(0,_vue.h)("div",{class:["vxe-tabs-header--suffix","type--"+b,"pos--"+T]},(0,_vn.getSlotVNs)(n({name:f}))):(0,_ui.renderEmptyElement)(k)])},x=e=>{var{initNames:t,activeName:a}=B,{name:e,slots:i}=e,i=i?i.default:null;return e&&t.includes(e)?(0,_vue.h)("div",{key:""+e,class:["vxe-tabs-pane--item",{"is--visible":a===e,"has--content":!!i}]},i?A(i,{name:e}):[]):(0,_ui.renderEmptyElement)(k)},P=e=>{var t=v["destroyOnClose"];const a=B["activeName"];var i=e.find(e=>e.name===a);return t?[i?x(i):(0,_ui.renderEmptyElement)(k)]:e.map(e=>x(e))},N=e=>{var{height:t,padding:a}=v,i=B["activeName"],l=O.value,n=S.value,o=E.top,s=E.footer,i={name:i};return(0,_vue.h)("div",{key:"tb",class:["vxe-tabs-pane--wrapper","type--"+l,"pos--"+n]},[o?(0,_vue.h)("div",{class:"vxe-tabs-pane--top"},A(o,i)):(0,_ui.renderEmptyElement)(k),(0,_vue.h)("div",{class:["vxe-tabs-pane--body","type--"+l,"pos--"+n,{"is--padding":a,"is--height":t}]},P(e)),s?(0,_vue.h)("div",{class:"vxe-tabs-pane--footer"},A(s,i)):(0,_ui.renderEmptyElement)(k)])};(0,_vue.watch)(()=>v.position,()=>{p()}),(0,_vue.watch)(()=>v.modelValue,e=>{r(e,null),B.activeName=e}),(0,_vue.watch)(()=>B.activeName,e=>{h(e),(0,_vue.nextTick)(()=>{B.resizeFlag++})});const y=(0,_vue.ref)(0),C=((0,_vue.watch)(()=>v.options?v.options.length:-1,()=>{y.value++}),(0,_vue.watch)(()=>v.options,()=>{y.value++}),(0,_vue.watch)(y,()=>{l(v.options),p()}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>B.staticTabs?B.staticTabs.length:-1,()=>{C.value++}),(0,_vue.watch)(()=>B.staticTabs,()=>{C.value++}),(0,_vue.watch)(C,()=>{l(B.staticTabs),p()}),a&&(0,_vue.watch)(()=>a?a.reactData.resizeFlag:null,()=>{B.resizeFlag++}),(0,_vue.watch)(()=>B.resizeFlag,()=>{(0,_vue.nextTick)(()=>{p()})}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(k,"resize",p),p()}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(k,"resize")}),(0,_vue.provide)("$xeTabs",k),r(v.modelValue,null),l(B.staticTabs.length?B.staticTabs:v.options),k.renderVN=()=>{var{height:e,padding:t,trigger:a}=v,i=B["activeName"],l=_.value,n=f.value,o=O.value,s=S.value,r=F.value,u=E.default,n=u?n:l,l=[(0,_vue.h)("div",{key:"ts",class:"vxe-tabs-slots"},u?u({name:i}):[])];return"right"===s||"bottom"===s?l.push(N(n),T(n)):l.push(T(n),N(n)),(0,_vue.h)("div",{ref:c,class:["vxe-tabs","pos--"+s,"vxe-tabs--"+o,"trigger--"+("manual"===a?"trigger":"default"),{"is--padding":t,"is--height":e}],style:r},l)},k},render(){return this.renderVN()}});