vxe-pc-ui 4.6.36 → 4.6.38

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.36"}`;
+const log_version = `ui v${"4.6.38"}`;
 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.36";
+const ui_version = "4.6.38";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -22546,6 +22546,8 @@ const ViewItemComponent = defineVxeComponent({
 
 
 
+
+const scrollbarOffsetSize = 20;
 /* harmony default export */ var tabs = (defineVxeComponent({
   name: 'VxeTabs',
   props: {
@@ -22565,6 +22567,10 @@ const ViewItemComponent = defineVxeComponent({
       default: () => getConfig().tabs.position
     },
     showClose: Boolean,
+    showBody: {
+      type: Boolean,
+      default: true
+    },
     padding: {
       type: Boolean,
       default: () => getConfig().tabs.padding
@@ -22597,6 +22603,7 @@ const ViewItemComponent = defineVxeComponent({
       lintWidth: 0,
       lintHeight: 0,
       scrollbarWidth: 0,
+      scrollbarHeight: 0,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -22671,6 +22678,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,
@@ -22746,7 +22756,8 @@ const ViewItemComponent = defineVxeComponent({
         let lintHeight = 0;
         let lintLeft = 0;
         let lintTop = 0;
-        let scrollbarWidth = 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);
@@ -22754,11 +22765,13 @@ const ViewItemComponent = defineVxeComponent({
             children,
             offsetWidth,
             scrollWidth,
+            offsetHeight,
             scrollHeight,
             clientWidth,
             clientHeight
           } = headerWrapperEl;
-          scrollbarWidth = offsetWidth - clientWidth;
+          sBarWidth = offsetWidth - clientWidth;
+          sBarHeight = offsetHeight - clientHeight;
           if (lrPosition) {
             isOver = scrollHeight !== clientHeight;
             if (index > -1) {
@@ -22787,7 +22800,7 @@ const ViewItemComponent = defineVxeComponent({
               if (tabEl) {
                 const tabWidth = tabEl.clientWidth;
                 if (tabType === 'card') {
-                  lintWidth = tabWidth;
+                  lintWidth = tabWidth + 1;
                   lintLeft = tabEl.offsetLeft;
                 } else if (tabType === 'border-card') {
                   lintWidth = tabWidth;
@@ -22800,7 +22813,8 @@ const ViewItemComponent = defineVxeComponent({
             }
           }
         }
-        reactData.scrollbarWidth = scrollbarWidth;
+        reactData.scrollbarWidth = sBarWidth;
+        reactData.scrollbarHeight = sBarHeight;
         reactData.lintLeft = lintLeft;
         reactData.lintTop = lintTop;
         reactData.lintWidth = lintWidth;
@@ -22941,6 +22955,9 @@ const ViewItemComponent = defineVxeComponent({
       const cacheItem = name ? cacheTabMaps[`${name}`] : null;
       if (cacheItem) {
         if (queryMethod) {
+          if (cacheItem.loading) {
+            return;
+          }
           cacheItem.loading = true;
           Promise.resolve(queryMethod({
             $tabs: $xeTabs,
@@ -23189,6 +23206,7 @@ const ViewItemComponent = defineVxeComponent({
       const {
         activeName,
         scrollbarWidth,
+        scrollbarHeight,
         isTabOver,
         cacheTabMaps
       } = reactData;
@@ -23220,9 +23238,13 @@ const ViewItemComponent = defineVxeComponent({
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refHeadWrapperElem,
         class: 'vxe-tabs-header--item-wrapper',
-        style: lrPosition && scrollbarWidth ? {
-          marginRight: `-${scrollbarWidth}px`
-        } : undefined,
+        style: lrPosition ? {
+          marginRight: `-${scrollbarWidth + scrollbarOffsetSize}px`,
+          paddingRight: `${scrollbarOffsetSize}px`
+        } : {
+          marginBottom: `-${scrollbarHeight + scrollbarOffsetSize}px`,
+          paddingBottom: `${scrollbarOffsetSize}px`
+        },
         onScroll: checkScrolling
       }, tabList.map((item, index) => {
         const {
@@ -23271,7 +23293,9 @@ const ViewItemComponent = defineVxeComponent({
           title
         }) : `${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
+            'is--active': isActive,
+            'is--loading': isLoading,
+            'is--disabled': isLoading
           }],
           onClick(evnt) {
             handleRefreshTabEvent(evnt, item);
@@ -23317,8 +23341,7 @@ 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
@@ -23331,40 +23354,56 @@ const ViewItemComponent = defineVxeComponent({
       const {
         activeName
       } = reactData;
-      const activeDefaultTab = tabList.find(item => item.name === activeName);
       if (destroyOnClose) {
-        return [activeDefaultTab ? renderTabPane(activeDefaultTab) : renderEmptyElement($xeTabs)];
+        const activeTab = tabList.find(item => item.name === activeName);
+        return [activeTab ? renderTabPane(activeTab) : renderEmptyElement($xeTabs)];
       }
       return tabList.map(item => renderTabPane(item));
     };
     const rendetTabBody = tabList => {
       const {
         height,
-        padding
+        padding,
+        showBody
       } = props;
       const {
-        activeName
+        activeName,
+        cacheTabMaps
       } = reactData;
       const tabType = computeTabType.value;
       const tabPosition = computeTabPosition.value;
-      const topSlot = slots.top;
+      const refreshOpts = computeRefreshOpts.value;
+      const {
+        showLoading
+      } = refreshOpts;
+      const headerpSlot = slots.header;
       const footerSlot = slots.footer;
+      if (!showBody) {
+        return renderEmptyElement($xeTabs);
+      }
+      const cacheItem = activeName ? cacheTabMaps[`${activeName}`] : null;
+      const isLoading = cacheItem ? cacheItem.loading : false;
       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--wrapper', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--content': showBody
+        }]
+      }, [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)), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tabs-pane--footer'
-      }, callSlot(footerSlot, defParams)) : renderEmptyElement($xeTabs)]);
+      }, callSlot(footerSlot, defParams)) : renderEmptyElement($xeTabs), showLoading && isLoading ? renderEmptyElement($xeTabs) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_loading, {
+        class: 'vxe-tabs--loading',
+        modelValue: isLoading
+      })]);
     };
     const renderVN = () => {
       const {
@@ -23403,7 +23442,7 @@ const ViewItemComponent = defineVxeComponent({
       }, vns);
     };
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.position, () => {
-      updateTabStyle();
+      reactData.resizeFlag++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
       addInitName(val, null);
@@ -23411,9 +23450,6 @@ const ViewItemComponent = defineVxeComponent({
     });
     (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, () => {
@@ -23424,7 +23460,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, () => {
@@ -23435,21 +23471,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');
@@ -45263,6 +45297,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
@@ -45281,6 +45316,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,
@@ -45350,7 +45388,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();
@@ -45358,6 +45398,7 @@ const Modal = VxeModal;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       globalEvents.off($xeNoticeBar, 'resize');
     });
+    $xeNoticeBar.renderVN = renderVN;
     return $xeNoticeBar;
   },
   render() {