vxe-pc-ui 4.6.36 → 4.6.38

package/lib/vxe-tabs/style/style.css

@@ -371,45 +371,53 @@
 .vxe-tabs-header--refresh-btn {
   visibility: hidden;
 }
-.vxe-tabs-header--refresh-btn.is--active {
+.vxe-tabs-header--refresh-btn.is--active, .vxe-tabs-header--refresh-btn.is--loading {
   visibility: visible;
 }
+.vxe-tabs-header--refresh-btn.is--disabled {
+  cursor: no-drop;
+  color: var(--vxe-ui-font-disabled-color);
+}
 
 .vxe-tabs-header--item-inner {
   transition: color 0.1s ease-in-out;
 }
 
 .vxe-tabs-pane--wrapper {
-  display: flex;
+  display: none;
+  position: relative;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
 }
-
-.vxe-tabs-pane--body {
-  flex-grow: 1;
-  overflow: hidden;
-}
-.vxe-tabs-pane--body.is--padding {
-  padding: var(--vxe-ui-layout-padding-default);
+.vxe-tabs-pane--wrapper.is--content {
+  display: flex;
 }
-.vxe-tabs-pane--body.type--border-card, .vxe-tabs-pane--body.type--round-card {
+.vxe-tabs-pane--wrapper.type--border-card, .vxe-tabs-pane--wrapper.type--round-card {
   border: 1px solid var(--vxe-ui-input-border-color);
 }
-.vxe-tabs-pane--body.type--border-card.pos--top, .vxe-tabs-pane--body.type--round-card.pos--top {
+.vxe-tabs-pane--wrapper.type--border-card.pos--top, .vxe-tabs-pane--wrapper.type--round-card.pos--top {
   border-top: 0;
 }
-.vxe-tabs-pane--body.type--border-card.pos--bottom, .vxe-tabs-pane--body.type--round-card.pos--bottom {
+.vxe-tabs-pane--wrapper.type--border-card.pos--bottom, .vxe-tabs-pane--wrapper.type--round-card.pos--bottom {
   border-bottom: 0;
 }
-.vxe-tabs-pane--body.type--border-card.pos--left, .vxe-tabs-pane--body.type--round-card.pos--left {
+.vxe-tabs-pane--wrapper.type--border-card.pos--left, .vxe-tabs-pane--wrapper.type--round-card.pos--left {
   border-left: 0;
 }
-.vxe-tabs-pane--body.type--border-card.pos--right, .vxe-tabs-pane--body.type--round-card.pos--right {
+.vxe-tabs-pane--wrapper.type--border-card.pos--right, .vxe-tabs-pane--wrapper.type--round-card.pos--right {
   border-right: 0;
 }
 
-.vxe-tabs-pane--top,
+.vxe-tabs-pane--body {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.vxe-tabs-pane--body.is--padding {
+  padding: var(--vxe-ui-layout-padding-default);
+}
+
+.vxe-tabs-pane--header,
 .vxe-tabs-pane--footer {
   flex-shrink: 0;
   overflow: auto;
@@ -535,7 +543,7 @@
   transition: all 0.3s ease-in-out;
 }
 .vxe-tabs-header--active-line.type--default.pos--top {
-  bottom: 0;
+  bottom: 20px;
 }
 .vxe-tabs-header--active-line.type--default.pos--bottom {
   top: 0;
@@ -546,7 +554,7 @@
   width: 4px;
 }
 .vxe-tabs-header--active-line.type--default.pos--left {
-  right: 0;
+  right: 20px;
 }
 .vxe-tabs-header--active-line.type--default.pos--right {
   left: 0;
@@ -571,7 +579,7 @@
   transition: color, left 0.3s ease-in-out;
 }
 .vxe-tabs-header--active-line.type--card.pos--left, .vxe-tabs-header--active-line.type--card.pos--right {
-  width: 100%;
+  width: calc(100% - 20px);
   transition: color, top 0.3s ease-in-out;
 }
 .vxe-tabs-header--active-line.type--border-card {

package/lib/vxe-tabs/style/style.min.css

@@ -1 +1 @@
-.vxe-tabs{display:flex;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.pos--bottom,.vxe-tabs.pos--top{flex-direction:column}.vxe-tabs.pos--left,.vxe-tabs.pos--right{flex-direction:row}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--bar.type--border-card,.vxe-tabs-header--bar.type--card,.vxe-tabs-header--bar.type--default,.vxe-tabs-header--bar.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--bar.type--round-card{background-color:rgba(0,0,0,.02)}.vxe-tabs-header--bar.pos--bottom,.vxe-tabs-header--bar.pos--top{width:1.6em}.vxe-tabs-header--bar.pos--bottom::after,.vxe-tabs-header--bar.pos--top::after{top:0;width:1px;height:100%}.vxe-tabs-header--bar.pos--left,.vxe-tabs-header--bar.pos--right{width:100%;height:1.6em}.vxe-tabs-header--bar.pos--left::after,.vxe-tabs-header--bar.pos--right::after{left:0;width:100%;height:1px}.vxe-tabs-header--prev-bar.type--default.pos--bottom,.vxe-tabs-header--prev-bar.type--default.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--default.pos--left,.vxe-tabs-header--prev-bar.type--default.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--top{border-bottom:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--bottom{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--top{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--border-card.pos--bottom{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--bottom{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--left{border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.pos--bottom::after,.vxe-tabs-header--prev-bar.pos--top::after{right:0}.vxe-tabs-header--prev-bar.pos--left::after,.vxe-tabs-header--prev-bar.pos--right::after{bottom:0}.vxe-tabs-header--prev-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--prev-bar.scrolling--middle.pos--top{box-shadow:4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prev-bar.scrolling--middle.pos--left,.vxe-tabs-header--prev-bar.scrolling--middle.pos--right{box-shadow:0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.type--default.pos--bottom,.vxe-tabs-header--next-bar.type--default.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--default.pos--left,.vxe-tabs-header--next-bar.type--default.pos--right{border-top:0}.vxe-tabs-header--next-bar.type--card.pos--top{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--bottom{border-bottom:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--left{border-top:0;border-right:0}.vxe-tabs-header--next-bar.type--card.pos--right{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--border-card.pos--top{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--border-card.pos--left{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--right{border-right:0;border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--round-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--round-card.pos--left{border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--right{border-top:0}.vxe-tabs-header--next-bar.pos--bottom::after,.vxe-tabs-header--next-bar.pos--top::after{left:0}.vxe-tabs-header--next-bar.pos--left::after,.vxe-tabs-header--next-bar.pos--right::after{top:0}.vxe-tabs-header--next-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--next-bar.scrolling--middle.pos--top{box-shadow:-4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.scrolling--middle.pos--left,.vxe-tabs-header--next-bar.scrolling--middle.pos--right{box-shadow:0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prefix,.vxe-tabs-header--suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0}.vxe-tabs-header--prefix.type--border-card.pos--top,.vxe-tabs-header--prefix.type--default.pos--top,.vxe-tabs-header--prefix.type--round-card.pos--top,.vxe-tabs-header--suffix.type--border-card.pos--top,.vxe-tabs-header--suffix.type--default.pos--top,.vxe-tabs-header--suffix.type--round-card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--bottom,.vxe-tabs-header--prefix.type--default.pos--bottom,.vxe-tabs-header--prefix.type--round-card.pos--bottom,.vxe-tabs-header--suffix.type--border-card.pos--bottom,.vxe-tabs-header--suffix.type--default.pos--bottom,.vxe-tabs-header--suffix.type--round-card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--left,.vxe-tabs-header--prefix.type--default.pos--left,.vxe-tabs-header--prefix.type--round-card.pos--left,.vxe-tabs-header--suffix.type--border-card.pos--left,.vxe-tabs-header--suffix.type--default.pos--left,.vxe-tabs-header--suffix.type--round-card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--right,.vxe-tabs-header--prefix.type--default.pos--right,.vxe-tabs-header--prefix.type--round-card.pos--right,.vxe-tabs-header--suffix.type--border-card.pos--right,.vxe-tabs-header--suffix.type--default.pos--right,.vxe-tabs-header--suffix.type--round-card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item-wrapper{position:relative;display:flex;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item.type--card.pos--top{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom,.vxe-tabs-header--item.type--card.pos--top{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom:first-child,.vxe-tabs-header--item.type--card.pos--top:first-child{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--right{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left,.vxe-tabs-header--item.type--card.pos--right{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left:first-child,.vxe-tabs-header--item.type--card.pos--right:first-child{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--border-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card{z-index:2;border:1px solid var(--vxe-ui-input-border-color);background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs-header--item.type--round-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card.pos--top{border-bottom:0;border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--item.type--round-card.pos--bottom{border-top:0;border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--bottom,.vxe-tabs-header--item.type--round-card.pos--top{margin:0 2px}.vxe-tabs-header--item.type--round-card.pos--bottom:first-child,.vxe-tabs-header--item.type--round-card.pos--top:first-child{margin-left:0}.vxe-tabs-header--item.type--round-card.pos--bottom:last-child,.vxe-tabs-header--item.type--round-card.pos--top:last-child{margin-right:0}.vxe-tabs-header--item.type--round-card.pos--left{border-right:0;border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--right{border-left:0;border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-tabs-header--item.type--round-card.pos--left,.vxe-tabs-header--item.type--round-card.pos--right{margin:2px 0}.vxe-tabs-header--item.type--round-card.pos--left:first-child,.vxe-tabs-header--item.type--round-card.pos--right:first-child{margin-top:0}.vxe-tabs-header--item.type--round-card.pos--left:last-child,.vxe-tabs-header--item.type--round-card.pos--right:last-child{margin-bottom:0}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1;max-width:30em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-tabs-header--item-icon{padding:0 .6em}.vxe-tabs-header--item-icon+.vxe-tabs-header--item-name{padding-left:0}.vxe-tabs-header--item-name{padding:0 .6em}.vxe-tabs-header--close-btn,.vxe-tabs-header--refresh-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;margin:0 .2em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover,.vxe-tabs-header--refresh-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active,.vxe-tabs-header--refresh-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i,.vxe-tabs-header--refresh-btn>i{font-size:1em}.vxe-tabs-header--refresh-btn{visibility:hidden}.vxe-tabs-header--refresh-btn.is--active{visibility:visible}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane--wrapper{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-tabs-pane--body{flex-grow:1;overflow:hidden}.vxe-tabs-pane--body.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs-pane--body.type--border-card,.vxe-tabs-pane--body.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-pane--body.type--border-card.pos--top,.vxe-tabs-pane--body.type--round-card.pos--top{border-top:0}.vxe-tabs-pane--body.type--border-card.pos--bottom,.vxe-tabs-pane--body.type--round-card.pos--bottom{border-bottom:0}.vxe-tabs-pane--body.type--border-card.pos--left,.vxe-tabs-pane--body.type--round-card.pos--left{border-left:0}.vxe-tabs-pane--body.type--border-card.pos--right,.vxe-tabs-pane--body.type--round-card.pos--right{border-right:0}.vxe-tabs-pane--footer,.vxe-tabs-pane--top{flex-shrink:0;overflow:auto}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header{display:flex}.vxe-tabs-header.pos--bottom,.vxe-tabs-header.pos--top{flex-direction:row}.vxe-tabs-header.pos--left,.vxe-tabs-header.pos--right{flex-direction:column}.vxe-tabs-header.type--card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card{background-color:var(--vxe-ui-tabs-card-header-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card.pos--top{border-bottom:0}.vxe-tabs-header.type--border-card.pos--bottom{border-top:0}.vxe-tabs-header.type--border-card.pos--left{border-right:0}.vxe-tabs-header.type--border-card.pos--right{border-left:0}.vxe-tabs-header--wrapper{position:relative;flex-grow:1;overflow:hidden}.vxe-tabs-header--wrapper.type--border-card,.vxe-tabs-header--wrapper.type--default,.vxe-tabs-header--wrapper.type--round-card{position:relative}.vxe-tabs-header--wrapper.type--border-card::after,.vxe-tabs-header--wrapper.type--default::after,.vxe-tabs-header--wrapper.type--round-card::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{bottom:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after{top:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{left:0;width:100%;height:1px}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after{right:0}.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{left:0}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{top:0;width:1px;height:100%}.vxe-tabs-header--wrapper.type--border-card.pos--top{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom{border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--wrapper.type--border-card>.vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.type--round-card>.vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs-header--wrapper.pos--bottom .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--top .vxe-tabs-header--item-wrapper{flex-direction:row;width:100%;overflow-y:hidden;overflow-x:auto}.vxe-tabs-header--wrapper.pos--left .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--right .vxe-tabs-header--item-wrapper{flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--default.pos--top{bottom:0}.vxe-tabs-header--active-line.type--default.pos--bottom{top:0}.vxe-tabs-header--active-line.type--default.pos--bottom,.vxe-tabs-header--active-line.type--default.pos--top{left:0;height:2px;width:4px}.vxe-tabs-header--active-line.type--default.pos--left{right:0}.vxe-tabs-header--active-line.type--default.pos--right{left:0}.vxe-tabs-header--active-line.type--default.pos--left,.vxe-tabs-header--active-line.type--default.pos--right{top:0;height:4px;width:2px}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1)}.vxe-tabs-header--active-line.type--card.pos--bottom,.vxe-tabs-header--active-line.type--card.pos--top{width:4px;transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--card.pos--left,.vxe-tabs-header--active-line.type--card.pos--right{width:100%;transition:color,top .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;pointer-events:none;z-index:1}.vxe-tabs-header--active-line.type--border-card.pos--bottom,.vxe-tabs-header--active-line.type--border-card.pos--top{width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--active-line.type--border-card.pos--left,.vxe-tabs-header--active-line.type--border-card.pos--right{width:100%;border-top:1px solid var(--vxe-ui-input-border-color);border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}
+.vxe-tabs{display:flex;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.pos--bottom,.vxe-tabs.pos--top{flex-direction:column}.vxe-tabs.pos--left,.vxe-tabs.pos--right{flex-direction:row}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--bar.type--border-card,.vxe-tabs-header--bar.type--card,.vxe-tabs-header--bar.type--default,.vxe-tabs-header--bar.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--bar.type--round-card{background-color:rgba(0,0,0,.02)}.vxe-tabs-header--bar.pos--bottom,.vxe-tabs-header--bar.pos--top{width:1.6em}.vxe-tabs-header--bar.pos--bottom::after,.vxe-tabs-header--bar.pos--top::after{top:0;width:1px;height:100%}.vxe-tabs-header--bar.pos--left,.vxe-tabs-header--bar.pos--right{width:100%;height:1.6em}.vxe-tabs-header--bar.pos--left::after,.vxe-tabs-header--bar.pos--right::after{left:0;width:100%;height:1px}.vxe-tabs-header--prev-bar.type--default.pos--bottom,.vxe-tabs-header--prev-bar.type--default.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--default.pos--left,.vxe-tabs-header--prev-bar.type--default.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--top{border-bottom:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--bottom{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--top{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--border-card.pos--bottom{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--bottom{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--left{border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.pos--bottom::after,.vxe-tabs-header--prev-bar.pos--top::after{right:0}.vxe-tabs-header--prev-bar.pos--left::after,.vxe-tabs-header--prev-bar.pos--right::after{bottom:0}.vxe-tabs-header--prev-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--prev-bar.scrolling--middle.pos--top{box-shadow:4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prev-bar.scrolling--middle.pos--left,.vxe-tabs-header--prev-bar.scrolling--middle.pos--right{box-shadow:0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.type--default.pos--bottom,.vxe-tabs-header--next-bar.type--default.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--default.pos--left,.vxe-tabs-header--next-bar.type--default.pos--right{border-top:0}.vxe-tabs-header--next-bar.type--card.pos--top{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--bottom{border-bottom:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--left{border-top:0;border-right:0}.vxe-tabs-header--next-bar.type--card.pos--right{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--border-card.pos--top{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--border-card.pos--left{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--right{border-right:0;border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--round-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--round-card.pos--left{border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--right{border-top:0}.vxe-tabs-header--next-bar.pos--bottom::after,.vxe-tabs-header--next-bar.pos--top::after{left:0}.vxe-tabs-header--next-bar.pos--left::after,.vxe-tabs-header--next-bar.pos--right::after{top:0}.vxe-tabs-header--next-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--next-bar.scrolling--middle.pos--top{box-shadow:-4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.scrolling--middle.pos--left,.vxe-tabs-header--next-bar.scrolling--middle.pos--right{box-shadow:0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prefix,.vxe-tabs-header--suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0}.vxe-tabs-header--prefix.type--border-card.pos--top,.vxe-tabs-header--prefix.type--default.pos--top,.vxe-tabs-header--prefix.type--round-card.pos--top,.vxe-tabs-header--suffix.type--border-card.pos--top,.vxe-tabs-header--suffix.type--default.pos--top,.vxe-tabs-header--suffix.type--round-card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--bottom,.vxe-tabs-header--prefix.type--default.pos--bottom,.vxe-tabs-header--prefix.type--round-card.pos--bottom,.vxe-tabs-header--suffix.type--border-card.pos--bottom,.vxe-tabs-header--suffix.type--default.pos--bottom,.vxe-tabs-header--suffix.type--round-card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--left,.vxe-tabs-header--prefix.type--default.pos--left,.vxe-tabs-header--prefix.type--round-card.pos--left,.vxe-tabs-header--suffix.type--border-card.pos--left,.vxe-tabs-header--suffix.type--default.pos--left,.vxe-tabs-header--suffix.type--round-card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--right,.vxe-tabs-header--prefix.type--default.pos--right,.vxe-tabs-header--prefix.type--round-card.pos--right,.vxe-tabs-header--suffix.type--border-card.pos--right,.vxe-tabs-header--suffix.type--default.pos--right,.vxe-tabs-header--suffix.type--round-card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item-wrapper{position:relative;display:flex;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item.type--card.pos--top{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom,.vxe-tabs-header--item.type--card.pos--top{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom:first-child,.vxe-tabs-header--item.type--card.pos--top:first-child{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--right{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left,.vxe-tabs-header--item.type--card.pos--right{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left:first-child,.vxe-tabs-header--item.type--card.pos--right:first-child{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--border-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card{z-index:2;border:1px solid var(--vxe-ui-input-border-color);background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs-header--item.type--round-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card.pos--top{border-bottom:0;border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--item.type--round-card.pos--bottom{border-top:0;border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--bottom,.vxe-tabs-header--item.type--round-card.pos--top{margin:0 2px}.vxe-tabs-header--item.type--round-card.pos--bottom:first-child,.vxe-tabs-header--item.type--round-card.pos--top:first-child{margin-left:0}.vxe-tabs-header--item.type--round-card.pos--bottom:last-child,.vxe-tabs-header--item.type--round-card.pos--top:last-child{margin-right:0}.vxe-tabs-header--item.type--round-card.pos--left{border-right:0;border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--right{border-left:0;border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-tabs-header--item.type--round-card.pos--left,.vxe-tabs-header--item.type--round-card.pos--right{margin:2px 0}.vxe-tabs-header--item.type--round-card.pos--left:first-child,.vxe-tabs-header--item.type--round-card.pos--right:first-child{margin-top:0}.vxe-tabs-header--item.type--round-card.pos--left:last-child,.vxe-tabs-header--item.type--round-card.pos--right:last-child{margin-bottom:0}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1;max-width:30em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-tabs-header--item-icon{padding:0 .6em}.vxe-tabs-header--item-icon+.vxe-tabs-header--item-name{padding-left:0}.vxe-tabs-header--item-name{padding:0 .6em}.vxe-tabs-header--close-btn,.vxe-tabs-header--refresh-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;margin:0 .2em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover,.vxe-tabs-header--refresh-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active,.vxe-tabs-header--refresh-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i,.vxe-tabs-header--refresh-btn>i{font-size:1em}.vxe-tabs-header--refresh-btn{visibility:hidden}.vxe-tabs-header--refresh-btn.is--active,.vxe-tabs-header--refresh-btn.is--loading{visibility:visible}.vxe-tabs-header--refresh-btn.is--disabled{cursor:no-drop;color:var(--vxe-ui-font-disabled-color)}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane--wrapper{display:none;position:relative;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-tabs-pane--wrapper.is--content{display:flex}.vxe-tabs-pane--wrapper.type--border-card,.vxe-tabs-pane--wrapper.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-pane--wrapper.type--border-card.pos--top,.vxe-tabs-pane--wrapper.type--round-card.pos--top{border-top:0}.vxe-tabs-pane--wrapper.type--border-card.pos--bottom,.vxe-tabs-pane--wrapper.type--round-card.pos--bottom{border-bottom:0}.vxe-tabs-pane--wrapper.type--border-card.pos--left,.vxe-tabs-pane--wrapper.type--round-card.pos--left{border-left:0}.vxe-tabs-pane--wrapper.type--border-card.pos--right,.vxe-tabs-pane--wrapper.type--round-card.pos--right{border-right:0}.vxe-tabs-pane--body{flex-grow:1;overflow:hidden}.vxe-tabs-pane--body.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs-pane--footer,.vxe-tabs-pane--header{flex-shrink:0;overflow:auto}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header{display:flex}.vxe-tabs-header.pos--bottom,.vxe-tabs-header.pos--top{flex-direction:row}.vxe-tabs-header.pos--left,.vxe-tabs-header.pos--right{flex-direction:column}.vxe-tabs-header.type--card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card{background-color:var(--vxe-ui-tabs-card-header-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card.pos--top{border-bottom:0}.vxe-tabs-header.type--border-card.pos--bottom{border-top:0}.vxe-tabs-header.type--border-card.pos--left{border-right:0}.vxe-tabs-header.type--border-card.pos--right{border-left:0}.vxe-tabs-header--wrapper{position:relative;flex-grow:1;overflow:hidden}.vxe-tabs-header--wrapper.type--border-card,.vxe-tabs-header--wrapper.type--default,.vxe-tabs-header--wrapper.type--round-card{position:relative}.vxe-tabs-header--wrapper.type--border-card::after,.vxe-tabs-header--wrapper.type--default::after,.vxe-tabs-header--wrapper.type--round-card::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{bottom:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after{top:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{left:0;width:100%;height:1px}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after{right:0}.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{left:0}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{top:0;width:1px;height:100%}.vxe-tabs-header--wrapper.type--border-card.pos--top{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom{border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--wrapper.type--border-card>.vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.type--round-card>.vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs-header--wrapper.pos--bottom .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--top .vxe-tabs-header--item-wrapper{flex-direction:row;width:100%;overflow-y:hidden;overflow-x:auto}.vxe-tabs-header--wrapper.pos--left .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--right .vxe-tabs-header--item-wrapper{flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--default.pos--top{bottom:20px}.vxe-tabs-header--active-line.type--default.pos--bottom{top:0}.vxe-tabs-header--active-line.type--default.pos--bottom,.vxe-tabs-header--active-line.type--default.pos--top{left:0;height:2px;width:4px}.vxe-tabs-header--active-line.type--default.pos--left{right:20px}.vxe-tabs-header--active-line.type--default.pos--right{left:0}.vxe-tabs-header--active-line.type--default.pos--left,.vxe-tabs-header--active-line.type--default.pos--right{top:0;height:4px;width:2px}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1)}.vxe-tabs-header--active-line.type--card.pos--bottom,.vxe-tabs-header--active-line.type--card.pos--top{width:4px;transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--card.pos--left,.vxe-tabs-header--active-line.type--card.pos--right{width:calc(100% - 20px);transition:color,top .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;pointer-events:none;z-index:1}.vxe-tabs-header--active-line.type--border-card.pos--bottom,.vxe-tabs-header--active-line.type--border-card.pos--top{width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--active-line.type--border-card.pos--left,.vxe-tabs-header--active-line.type--border-card.pos--right{width:100%;border-top:1px solid var(--vxe-ui-input-border-color);border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.6.36",
+  "version": "4.6.38",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/notice-bar/src/notice-bar.ts

@@ -1,10 +1,10 @@
-import { ref, h, reactive, PropType, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, h, reactive, PropType, computed, onMounted, watch, onBeforeUnmount, inject } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, useSize, createEvent, globalEvents, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 
-import type { VxeNoticeBarPropTypes, NoticeBarReactData, NoticeBarPrivateRef, NoticeBarMethods, NoticeBarPrivateMethods, VxeNoticeBarEmits, VxeNoticeBarPrivateComputed, VxeNoticeBarConstructor, VxeNoticeBarPrivateMethods, ValueOf } from '../../../types'
+import type { VxeNoticeBarPropTypes, NoticeBarReactData, NoticeBarPrivateRef, NoticeBarMethods, NoticeBarPrivateMethods, VxeNoticeBarEmits, VxeNoticeBarPrivateComputed, VxeNoticeBarConstructor, VxeNoticeBarPrivateMethods, ValueOf, VxeTabsConstructor, VxeTabsPrivateMethods } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeNoticeBar',
@@ -33,6 +33,8 @@ export default defineVxeComponent({
   setup (props, context) {
     const { slots, emit } = context
 
+    const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
+
     const xID = XEUtils.uniqueId()
 
     const { computeSize } = useSize(props)
@@ -53,6 +55,10 @@ export default defineVxeComponent({
       return `${content || ''}`
     })
 
+    const computeTabsResizeFlag = computed(() => {
+      return $xeTabs ? $xeTabs.reactData.resizeFlag : null
+    })
+
     const computeMaps: VxeNoticeBarPrivateComputed = {
     }
 
@@ -136,7 +142,9 @@ export default defineVxeComponent({
       ])
     }
 
-    $xeNoticeBar.renderVN = renderVN
+    watch(computeTabsResizeFlag, () => {
+      updateAnimationStyle()
+    })
 
     onMounted(() => {
       globalEvents.on($xeNoticeBar, 'resize', updateAnimationStyle)
@@ -147,6 +155,8 @@ export default defineVxeComponent({
       globalEvents.off($xeNoticeBar, 'resize')
     })
 
+    $xeNoticeBar.renderVN = renderVN
+
     return $xeNoticeBar
   },
   render () {

package/packages/tabs/src/tabs.ts

@@ -6,9 +6,12 @@ import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { warnLog, errLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
+import VxeLoadingComponent from '../../loading/src/loading'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods, VxeComponentStyleType } from '../../../types'
 
+const scrollbarOffsetSize = 20
+
 export default defineVxeComponent({
   name: 'VxeTabs',
   props: {
@@ -28,6 +31,10 @@ export default defineVxeComponent({
       default: () => getConfig().tabs.position
     },
     showClose: Boolean as PropType<VxeTabsPropTypes.ShowClose>,
+    showBody: {
+      type: Boolean as PropType<VxeTabsPropTypes.ShowBody>,
+      default: true
+    },
     padding: {
       type: Boolean as PropType<VxeTabsPropTypes.Padding>,
       default: () => getConfig().tabs.padding
@@ -70,6 +77,7 @@ export default defineVxeComponent({
       lintWidth: 0,
       lintHeight: 0,
       scrollbarWidth: 0,
+      scrollbarHeight: 0,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -142,6 +150,10 @@ export default defineVxeComponent({
       return staticTabs.filter((item) => handleFilterTab(item))
     })
 
+    const computeParentTabsResizeFlag = computed(() => {
+      return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null
+    })
+
     const computeMaps: VxeTabsPrivateComputed = {
     }
 
@@ -213,12 +225,14 @@ export default 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 = XEUtils.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, item => item.name === activeName)
-          const { children, offsetWidth, scrollWidth, scrollHeight, clientWidth, clientHeight } = headerWrapperEl
-          scrollbarWidth = offsetWidth - clientWidth
+          const { children, offsetWidth, scrollWidth, offsetHeight, scrollHeight, clientWidth, clientHeight } = headerWrapperEl
+          sBarWidth = offsetWidth - clientWidth
+          sBarHeight = offsetHeight - clientHeight
           if (lrPosition) {
             isOver = scrollHeight !== clientHeight
             if (index > -1) {
@@ -247,7 +261,7 @@ export default 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
@@ -260,7 +274,8 @@ export default defineVxeComponent({
             }
           }
         }
-        reactData.scrollbarWidth = scrollbarWidth
+        reactData.scrollbarWidth = sBarWidth
+        reactData.scrollbarHeight = sBarHeight
         reactData.lintLeft = lintLeft
         reactData.lintTop = lintTop
         reactData.lintWidth = lintWidth
@@ -357,6 +372,9 @@ export default defineVxeComponent({
       const cacheItem = name ? cacheTabMaps[`${name}`] : null
       if (cacheItem) {
         if (queryMethod) {
+          if (cacheItem.loading) {
+            return
+          }
           cacheItem.loading = true
           Promise.resolve(
             queryMethod({ $tabs: $xeTabs, value: activeName, name, option: item })
@@ -565,7 +583,7 @@ export default defineVxeComponent({
 
     const renderTabHeader = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
       const { titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose, closeConfig, refreshConfig } = props
-      const { activeName, scrollbarWidth, isTabOver, cacheTabMaps } = reactData
+      const { activeName, scrollbarWidth, scrollbarHeight, isTabOver, cacheTabMaps } = reactData
       const tabType = computeTabType.value
       const tabPosition = computeTabPosition.value
       const lrPosition = computeLrPosition.value
@@ -603,11 +621,15 @@ export default defineVxeComponent({
           h('div', {
             ref: refHeadWrapperElem,
             class: 'vxe-tabs-header--item-wrapper',
-            style: lrPosition && scrollbarWidth
+            style: lrPosition
               ? {
-                  marginRight: `-${scrollbarWidth}px`
+                  marginRight: `-${scrollbarWidth + scrollbarOffsetSize}px`,
+                  paddingRight: `${scrollbarOffsetSize}px`
                 }
-              : undefined,
+              : {
+                  marginBottom: `-${scrollbarHeight + scrollbarOffsetSize}px`,
+                  paddingBottom: `${scrollbarOffsetSize}px`
+                },
             onScroll: checkScrolling
           }, tabList.map((item, index) => {
             const { title, titleWidth, titleAlign, icon, name, slots } = item
@@ -654,7 +676,9 @@ export default defineVxeComponent({
                 (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true)
                   ? h('div', {
                     class: ['vxe-tabs-header--refresh-btn', {
-                      'is--active': isActive
+                      'is--active': isActive,
+                      'is--loading': isLoading,
+                      'is--disabled': isLoading
                     }],
                     onClick (evnt: KeyboardEvent) {
                       handleRefreshTabEvent(evnt, item)
@@ -716,8 +740,7 @@ export default defineVxeComponent({
         ? 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)
@@ -726,29 +749,38 @@ export default defineVxeComponent({
     const renderTabContent = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
       const { destroyOnClose } = props
       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: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
-      const { height, padding } = props
-      const { activeName } = reactData
+      const { height, padding, showBody } = props
+      const { 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 h('div', {
         key: 'tb',
-        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
+        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`, {
+          'is--content': showBody
+        }]
       }, [
-        topSlot
+        headerpSlot
           ? h('div', {
-            class: 'vxe-tabs-pane--top'
-          }, callSlot(topSlot, defParams))
+            class: 'vxe-tabs-pane--header'
+          }, callSlot(headerpSlot, defParams))
           : renderEmptyElement($xeTabs),
         h('div', {
           class: ['vxe-tabs-pane--body', `type--${tabType}`, `pos--${tabPosition}`, {
@@ -760,7 +792,13 @@ export default defineVxeComponent({
           ? h('div', {
             class: 'vxe-tabs-pane--footer'
           }, callSlot(footerSlot, defParams))
-          : renderEmptyElement($xeTabs)
+          : renderEmptyElement($xeTabs),
+        showLoading && isLoading
+          ? renderEmptyElement($xeTabs)
+          : h(VxeLoadingComponent, {
+            class: 'vxe-tabs--loading',
+            modelValue: isLoading
+          })
       ])
     }
 
@@ -805,7 +843,7 @@ export default defineVxeComponent({
     }
 
     watch(() => props.position, () => {
-      updateTabStyle()
+      reactData.resizeFlag++
     })
 
     watch(() => props.modelValue, (val) => {
@@ -815,9 +853,6 @@ export default defineVxeComponent({
 
     watch(() => reactData.activeName, (val) => {
       scrollToTab(val)
-      nextTick(() => {
-        reactData.resizeFlag++
-      })
     })
 
     const optsFlag = ref(0)
@@ -829,7 +864,7 @@ export default defineVxeComponent({
     })
     watch(optsFlag, () => {
       initDefaultName(props.options)
-      updateTabStyle()
+      reactData.resizeFlag++
     })
 
     const stFlag = ref(0)
@@ -841,14 +876,12 @@ export default defineVxeComponent({
     })
     watch(stFlag, () => {
       initDefaultName(reactData.staticTabs)
-      updateTabStyle()
+      reactData.resizeFlag++
     })
 
-    if ($xeParentTabs) {
-      watch(() => $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null, () => {
-        reactData.resizeFlag++
-      })
-    }
+    watch(computeParentTabsResizeFlag, () => {
+      reactData.resizeFlag++
+    })
 
     watch(() => reactData.resizeFlag, () => {
       nextTick(() => {
@@ -857,8 +890,8 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      globalEvents.on($xeTabs, 'resize', updateTabStyle)
       updateTabStyle()
+      globalEvents.on($xeTabs, 'resize', updateTabStyle)
     })
 
     onUnmounted(() => {

package/styles/components/tabs.scss

@@ -1,5 +1,7 @@
 @use '../helpers/baseMixin.scss';
 
+$scrollbarOffsetSize: 20px;
+
 .vxe-tabs {
   display: flex;
   color: var(--vxe-ui-font-color);
@@ -421,25 +423,27 @@
 }
 .vxe-tabs-header--refresh-btn {
   visibility: hidden;
-  &.is--active {
+  &.is--active,
+  &.is--loading {
     visibility: visible;
   }
+  &.is--disabled {
+    cursor: no-drop;
+    color: var(--vxe-ui-font-disabled-color);
+  }
 }
 .vxe-tabs-header--item-inner {
   @include baseMixin.createAnimationTransition(color, .1s);
 }
 
 .vxe-tabs-pane--wrapper {
-  display: flex;
+  display: none;
+  position: relative;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
-}
-.vxe-tabs-pane--body {
-  flex-grow: 1;
-  overflow: hidden;
-  &.is--padding {
-    padding: var(--vxe-ui-layout-padding-default);
+  &.is--content {
+    display: flex;
   }
   &.type--border-card,
   &.type--round-card {
@@ -458,7 +462,14 @@
     }
   }
 }
-.vxe-tabs-pane--top,
+.vxe-tabs-pane--body {
+  flex-grow: 1;
+  overflow: hidden;
+  &.is--padding {
+    padding: var(--vxe-ui-layout-padding-default);
+  }
+}
+.vxe-tabs-pane--header,
 .vxe-tabs-pane--footer {
   flex-shrink: 0;
   overflow: auto;
@@ -612,7 +623,7 @@
     z-index: 2;
     @include baseMixin.createAnimationTransition(all, .3s);
     &.pos--top {
-      bottom: 0;
+      bottom: $scrollbarOffsetSize;
     }
     &.pos--bottom {
       top: 0;
@@ -624,7 +635,7 @@
       width: 4px;
     }
     &.pos--left {
-      right: 0;
+      right: $scrollbarOffsetSize;
     }
     &.pos--right {
       left: 0;
@@ -652,7 +663,7 @@
     }
     &.pos--left,
     &.pos--right {
-      width: 100%;
+      width: calc(100% - 20px);
       transition: color,top 0.3s ease-in-out;
     }
   }

package/types/components/grid.d.ts

@@ -129,6 +129,7 @@ export namespace VxeGridPropTypes {
      * @deprecated
      */
     message?: boolean
+    showLoading?: boolean
     showResponseMsg?: boolean
     showActiveMsg?: boolean
     seq?: boolean

package/types/components/tabs.d.ts

@@ -34,6 +34,7 @@ export namespace VxeTabsPropTypes {
   export type Type = null | '' | 'default' | 'card' | 'border-card' | 'round-card'
   export type Position = null | '' | 'top' | 'bottom' | 'left' | 'right'
   export type ShowClose = boolean
+  export type ShowBody = boolean
   export type Padding = boolean
   export type Trigger = '' | 'default' | 'click' | 'manual'
   export type BeforeChangeMethod = (params: {
@@ -82,6 +83,10 @@ export namespace VxeTabsPropTypes {
     }) => boolean
   }
   export interface RefreshConfig {
+    /**
+     * 点击页签刷新后是否显示加载中
+     */
+    showLoading?: boolean
     /**
      * 是否启用
      */
@@ -119,6 +124,7 @@ export type VxeTabsProps = {
   type?: VxeTabsPropTypes.Type
   position?: VxeTabsPropTypes.Position
   showClose?: VxeTabsPropTypes.ShowClose
+  showBody?: VxeTabsPropTypes.ShowBody
   padding?: VxeTabsPropTypes.Padding
   trigger?: VxeTabsPropTypes.Trigger
   beforeChangeMethod?: VxeTabsPropTypes.BeforeChangeMethod
@@ -151,6 +157,7 @@ export interface TabsReactData {
   lintWidth: number
   lintHeight: number
   scrollbarWidth: number
+  scrollbarHeight: number
   isTabOver: boolean
   resizeFlag: number
   cacheTabMaps: Record<string, {
@@ -296,16 +303,17 @@ export interface VxeTabsSlots {
   prefix?: (params: VxeTabsSlotTypes.PrefixSlotParams) => any
   suffix?: (params: VxeTabsSlotTypes.SuffixSlotParams) => any
   /**
-   * 自定义页签顶部模板
+   * 自定义面板头部模板
    */
-  top?(params: VxeTabsSlotTypes.TopSlotParams): any
+  header?(params: VxeTabsSlotTypes.TopSlotParams): any
   /**
-   * 自定义页签底部模板
+   * 自定义面板底部模板
    */
   footer?(params: VxeTabsSlotTypes.FooterSlotParams): any
 
   /**
    * 已废弃，请使用 suffix
+   * @deprecated
    */
   extra?: (params: VxeTabsSlotTypes.SuffixSlotParams) => any
 }