bk-magic-vue 2.5.3 → 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: [{
@@ -50628,6 +50648,7 @@
       bkOverflowTips: overflowTips,
       bkloading: bkLoading
     },
+    mixins: [locale.mixin],
     props: {
       show: Boolean,
       versionList: {
@@ -50679,6 +50700,14 @@
       versionSubTitleName: {
         type: String,
         default: 'date'
+      },
+      defaultActive: {
+        type: String,
+        default: ''
+      },
+      currentTagText: {
+        type: String,
+        default: ''
       }
     },
     data: function data() {
@@ -50699,6 +50728,14 @@
       };
     },
     computed: {
+      defaultActiveIndex: function defaultActiveIndex() {
+        var _this = this;
+        var activeVersion = this.defaultActive || this.currentVersion;
+        var index = this.versionList.findIndex(function (item) {
+          return item[_this.versionTitleName] === activeVersion;
+        });
+        return index === -1 ? 0 : index;
+      },
       logContent: function logContent() {
         if (this.mdMode) {
           return marked.parse(this.versionDetail);
@@ -50725,7 +50762,7 @@
     },
     methods: {
       handleMouseDown: function handleMouseDown(e) {
-        var _this = this;
+        var _this2 = this;
         var target = event.target;
         while (target && target.dataset['tag'] !== 'resizeTarget') {
           target = target.parentNode;
@@ -50738,7 +50775,7 @@
           return false;
         };
         var handleMouseMove = function handleMouseMove(event) {
-          _this.left.width = Math.min(Math.max(_this.minLeftWidth, event.clientX - rect.left), _this.maxLeftWidth);
+          _this2.left.width = Math.min(Math.max(_this2.minLeftWidth, event.clientX - rect.left), _this2.maxLeftWidth);
         };
         var handleMouseUp = function handleMouseUp() {
           document.body.style.cursor = '';
@@ -50766,52 +50803,52 @@
         this.$emit('change', v);
       },
       handleOnShowChange: function handleOnShowChange(v) {
-        var _this2 = this;
+        var _this3 = this;
         return _asyncToGenerator( _regeneratorRuntime().mark(function _callee() {
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
-                  _this2.dialog.show = v;
+                  _this3.dialog.show = v;
                   if (!v) {
                     _context.next = 20;
                     break;
                   }
-                  _this2.dialog.width = window.innerWidth >= 1920 ? 1110 : 850;
-                  _this2.dialog.height = window.innerWidth >= 1920 ? 640 : 520;
-                  _this2.loading = true;
-                  _context.t0 = !_this2.versionList.length && typeof _this2.getVersionList === 'function';
+                  _this3.dialog.width = window.innerWidth >= 1920 ? 1110 : 850;
+                  _this3.dialog.height = window.innerWidth >= 1920 ? 640 : 520;
+                  _this3.loading = true;
+                  _context.t0 = !_this3.versionList.length && typeof _this3.getVersionList === 'function';
                   if (!_context.t0) {
                     _context.next = 9;
                     break;
                   }
                   _context.next = 9;
-                  return _this2.getVersionList();
+                  return _this3.getVersionList();
                 case 9:
-                  if (!_this2.versionList.length) {
+                  if (!_this3.versionList.length) {
                     _context.next = 19;
                     break;
                   }
                 case 10:
-                  if (!(!_this2.finished && _this2.dialog.height - 40 > _this2.versionList.length * 55)) {
+                  if (!(!_this3.finished && _this3.dialog.height - 40 > _this3.versionList.length * 55)) {
                     _context.next = 17;
                     break;
                   }
-                  _context.t1 = typeof _this2.getVersionList === 'function';
+                  _context.t1 = typeof _this3.getVersionList === 'function';
                   if (!_context.t1) {
                     _context.next = 15;
                     break;
                   }
                   _context.next = 15;
-                  return _this2.getVersionList();
+                  return _this3.getVersionList();
                 case 15:
                   _context.next = 10;
                   break;
                 case 17:
                   _context.next = 19;
-                  return _this2.handleItemClick();
+                  return _this3.handleItemClick(_this3.defaultActiveIndex);
                 case 19:
-                  _this2.loading = false;
+                  _this3.loading = false;
                 case 20:
                 case "end":
                   return _context.stop();
@@ -50821,39 +50858,39 @@
         }))();
       },
       handleLeftScroll: function handleLeftScroll(e) {
-        var _this3 = this;
+        var _this4 = this;
         return _asyncToGenerator( _regeneratorRuntime().mark(function _callee2() {
           var el, scrollHeight, scrollTop, clientHeight;
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) {
               switch (_context2.prev = _context2.next) {
                 case 0:
-                  el = _this3.$refs.leftList;
+                  el = _this4.$refs.leftList;
                   scrollHeight = el.scrollHeight;
                   scrollTop = el.scrollTop;
                   clientHeight = el.clientHeight;
-                  if (!(!_this3.finished && clientHeight + scrollTop >= scrollHeight && !_this3.scroll)) {
+                  if (!(!_this4.finished && clientHeight + scrollTop >= scrollHeight && !_this4.scroll)) {
                     _context2.next = 16;
                     break;
                   }
-                  _this3.left.scroll = true;
-                  _this3.left.loading = true;
-                  _context2.t0 = typeof _this3.getVersionList === 'function';
+                  _this4.left.scroll = true;
+                  _this4.left.loading = true;
+                  _context2.t0 = typeof _this4.getVersionList === 'function';
                   if (!_context2.t0) {
                     _context2.next = 11;
                     break;
                   }
                   _context2.next = 11;
-                  return _this3.getVersionList().catch(function (_) {
+                  return _this4.getVersionList().catch(function (_) {
                     return false;
                   });
                 case 11:
                   _context2.next = 13;
-                  return _this3.$nextTick();
+                  return _this4.$nextTick();
                 case 13:
                   el.scrollTo(0, scrollTop - 100);
-                  _this3.left.loading = false;
-                  _this3.left.scroll = false;
+                  _this4.left.loading = false;
+                  _this4.left.scroll = false;
                 case 16:
                 case "end":
                   return _context2.stop();
@@ -50863,27 +50900,28 @@
         }))();
       },
       handleItemClick: function handleItemClick() {
-        var _this4 = this;
+        var _this5 = this;
         var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         return _asyncToGenerator( _regeneratorRuntime().mark(function _callee3() {
           return _regeneratorRuntime().wrap(function _callee3$(_context3) {
             while (1) {
               switch (_context3.prev = _context3.next) {
                 case 0:
-                  _this4.active = v;
-                  _this4.loading = true;
-                  _context3.t0 = typeof _this4.getVersionDetail === 'function';
+                  _this5.active = v;
+                  _this5.loading = true;
+                  _context3.t0 = typeof _this5.getVersionDetail === 'function';
                   if (!_context3.t0) {
                     _context3.next = 6;
                     break;
                   }
                   _context3.next = 6;
-                  return _this4.getVersionDetail(_this4.versionList[v]).catch(function (_) {
+                  return _this5.getVersionDetail(_this5.versionList[v]).catch(function (_) {
                     return false;
                   });
                 case 6:
-                  _this4.loading = false;
-                case 7:
+                  _this5.loading = false;
+                  _this5.$emit('selected', v, _this5.versionList[v]);
+                case 8:
                 case "end":
                   return _context3.stop();
               }
@@ -50966,7 +51004,7 @@
           staticClass: "item-date"
         }, [_vm._v(_vm._s(item[_vm.versionSubTitleName]))]), item[_vm.versionTitleName] === _vm.currentVersion ? _c('span', {
           staticClass: "item-current"
-        }, [_vm._v(" " + _vm._s('当前版本') + " ")]) : _vm._e()];
+        }, [_vm._v(" " + _vm._s(_vm.currentTagText || _vm.t('bk.versionDetail.currentTagText')) + " ")]) : _vm._e()];
       }, {
         "version": {
           item: item,