bk-magic-vue 2.5.4-beta.1 → 2.5.4-beta.2

package/dist/bk-magic-vue.css

@@ -9870,16 +9870,80 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
 .bk-tab{
     border-radius:2px;
 }
-.bk-tab.bk-tab-border-card >.bk-tab-header{
+.bk-tab.bk-tab-border-card > .bk-tab-header{
         height:43px;
         border:1px solid #dcdee5;
         border-bottom:none;
         background-color:#fafbfd;
         border-radius:2px 2px 0 0;
     }
-.bk-tab.bk-tab-border-card >.bk-tab-header>.bk-tab-label-wrapper>.bk-tab-label-list >.bk-tab-label-item.active{
+.bk-tab.bk-tab-border-card > .bk-tab-header > .bk-tab-label-wrapper > .bk-tab-label-list > .bk-tab-label-item.active{
             background-color:#fff;
         }
+.bk-tab.bk-tab-card-tab{
+    border-radius:4px;
+}
+.bk-tab.bk-tab-card-tab > .bk-tab-header{
+        border:0;
+        background:#f0f1f5;
+        border-radius:4px 4px 0 0;
+        overflow:hidden;
+    }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-add-controller{
+                border-left:none;
+            }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper.has-scroller.has-add .bk-tab-extension-controller{
+                border-left:none;
+            }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-extension-controller,
+        .bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-add-controller,
+        .bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-scroll-controller{
+            border:none;
+            background:#f0f1f5;
+        }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{
+                border:0 !important;
+                position:relative
+            }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item:before{
+                    content:'';
+                    display:block;
+                    position:absolute;
+                    left:0;
+                    top:50%;
+                    margin-top:-8px;
+                    width:1px;
+                    height:16px;
+                    background:#c4c6cc;
+                }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .is-first:before{
+                    display:none;
+                }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .is-last:not(.active):after{
+                    content:'';
+                    display:block;
+                    position:absolute;
+                    right:0;
+                    top:50%;
+                    margin-top:-8px;
+                    width:1px;
+                    height:16px;
+                    background:#c4c6cc;
+                }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active{
+                background:#fff;
+                border-radius:4px 4px 0 0;
+                overflow:hidden
+            }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active:before{
+                    display:none;
+                }
+.bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active:before, .bk-tab.bk-tab-card-tab .bk-tab-label-wrapper .bk-tab-label-list .active + li:before{
+                    display:none;
+                }
+.bk-tab.bk-tab-card-tab .bk-tab-section{
+        border:none;
+    }
 .bk-tab.bk-tab-card .bk-tab-label-wrapper.has-add .bk-tab-label-list{
                 border-radius:2px 0 0 0;
             }
@@ -9906,7 +9970,7 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
         border-top:1px solid #dcdee5;
         background-color:#fff;
     }
-.bk-tab.bk-tab-card >.bk-tab-header>.bk-tab-label-wrapper>.bk-tab-label-list >.bk-tab-label-item.active{
+.bk-tab.bk-tab-card > .bk-tab-header > .bk-tab-label-wrapper > .bk-tab-label-list > .bk-tab-label-item.active{
             background-color:#fff;
         }
 .bk-tab-label-list-has-bar::after{
@@ -9942,12 +10006,12 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
             background-color:#fff;
         }
 .bk-tab.bk-tab-unborder-card .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{
-                border:none!important;
+                border:none !important;
             }
 .bk-tab.bk-tab-unborder-card .bk-tab-section{
         border:none;
     }
-.position-left,.position-right{
+.position-left, .position-right{
     display:-webkit-box;
     display:-ms-flexbox;
     display:flex;
@@ -10048,6 +10112,19 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
 .position-left .bk-tab-section .bk-tab-content, .position-right .bk-tab-section .bk-tab-content{
             word-break:break-all;
         }
+.position-left.bk-tab-vertical-tab .bk-tab-header,.position-right.bk-tab-vertical-tab .bk-tab-header{
+            padding:0;
+            background:#f0f1f5;
+        }
+.position-left.bk-tab-vertical-tab .bk-tab-label-wrapper .active,.position-right.bk-tab-vertical-tab .bk-tab-label-wrapper .active{
+                background:#fff;
+            }
+.position-left.bk-tab-vertical-tab .bk-tab-label-wrapper:after, .position-right.bk-tab-vertical-tab .bk-tab-label-wrapper:after{
+               display:none;
+            }
+.position-left.bk-tab-vertical-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item, .position-right.bk-tab-vertical-tab .bk-tab-label-wrapper .bk-tab-label-list .bk-tab-label-item{
+                    border:0;
+                }
 .bk-tab-header{
     position:relative;
     height:42px;
@@ -10061,15 +10138,15 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
     overflow:hidden
 }
 .bk-tab-label-wrapper.has-add .bk-tab-label-list .bk-tab-label-item.has-close{
-            -webkit-transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
-            transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)
+            -webkit-transition:color .3s cubic-bezier(.645, .045, .355, 1), padding .3s cubic-bezier(.645, .045, .355, 1);
+            transition:color .3s cubic-bezier(.645, .045, .355, 1), padding .3s cubic-bezier(.645, .045, .355, 1)
         }
 .bk-tab-label-wrapper.has-add .bk-tab-label-list .bk-tab-label-item.has-close:hover{
                 padding:0 11px;
             }
 .bk-tab-label-wrapper.has-add .bk-tab-label-list .bk-tab-label-item.has-close .bk-tab-close-controller{
-                -webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);
-                transition:all .3s cubic-bezier(.645,.045,.355,1);
+                -webkit-transition:all .3s cubic-bezier(.645, .045, .355, 1);
+                transition:all .3s cubic-bezier(.645, .045, .355, 1);
             }
 .bk-tab-label-wrapper.has-scroller{
         padding:0 24px;

package/dist/bk-magic-vue.js

@@ -37120,6 +37120,18 @@
           return panel.visible;
         });
       },
+      tabClass: function tabClass() {
+        var arr = ['bk-tab', this.extCls];
+        if (this.tabPosition === 'top') {
+          arr.push("bk-tab-".concat(this.type));
+        } else {
+          arr.push("position-".concat(this.tabPosition));
+          if (this.type === 'card-tab') {
+            arr.push("bk-tab-vertical-tab");
+          }
+        }
+        return arr;
+      },
       tabStyle: function tabStyle() {
         if (this.isSidePosition) {
           var paddingValue = 21;
@@ -37131,6 +37143,11 @@
       },
       headerStyle: function headerStyle() {
         if (this.tabPosition === 'top') {
+          if (this.type === 'card-tab') {
+            return {
+              height: "".concat(this.labelHeight, "px")
+            };
+          }
           var diffValue = this.type === 'border-card' ? 2 : 1;
           return {
             height: "".concat(this.labelHeight, "px"),
@@ -37146,6 +37163,9 @@
         return this.panelInstance.length < 1;
       },
       hasActiveBar: function hasActiveBar() {
+        if (this.type === 'card-tab') {
+          return false;
+        }
         return (this.type === 'unborder-card' || this.isSidePosition) && !this.isEmpty;
       },
       tabLabelListStyle: function tabLabelListStyle() {
@@ -37625,7 +37645,7 @@
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c('div', {
-      class: ['bk-tab', _vm.tabPosition === 'top' ? "bk-tab-" + _vm.type : "position-" + _vm.tabPosition, _vm.extCls],
+      class: _vm.tabClass,
       style: _vm.tabStyle
     }, [_c('div', {
       directives: [{