bk-magic-vue 2.4.13 → 2.4.15-beta.1

package/dist/bk-magic-vue.css

@@ -4377,7 +4377,7 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
 .bk-dialog-wrapper .bk-dialog-tool{
         min-height:30px;
         position:relative;
-        
+
     }
 .bk-dialog-wrapper .bk-dialog-header{
         padding:3px 24px 24px 24px;
@@ -4389,7 +4389,7 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
             display:inline-block;
             width:100%;
             font-size:20px;
-            color:#63656e;
+            color:#313238;
             overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap;
@@ -5220,16 +5220,21 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
 .bk-diff.format-side-by-side tbody.d2h-diff-tbody tr:last-child{
         display:none;
       }
-:root{
-  --font-size:12px;
+.bk-dropdown-menu{
+  --font-size:12px
 }
-:root .medium-font{
+.bk-dropdown-menu.medium-font{
     --font-size:14px;
   }
-:root .large-font{
+.bk-dropdown-menu.large-font{
     --font-size:16px;
   }
+.bk-dropdown-menu.medium-font .bk-dropdown-list > li > a, .bk-dropdown-menu.large-font .bk-dropdown-list > li > a{
+          height:36px;
+          line-height:37px;
+        }
 .bk-dropdown-menu{
+
   display:inline-block;
   position:relative
 }
@@ -5259,7 +5264,7 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
     }
 .bk-dropdown-menu .bk-dropdown-content{
     background:#fff;
-    padding:5px 0;
+    padding:4px 0;
     margin:0;
     z-index:2500;
     border-radius:2px;
@@ -5269,20 +5274,20 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
     -webkit-transition:visibility 0s, max-height 200ms linear;
     transition:visibility 0s, max-height 200ms linear;
     visibility:hidden;
-    -webkit-box-shadow:0 2px 6px rgba(51,60,72,0.1);
-            box-shadow:0 2px 6px rgba(51,60,72,0.1);
+    -webkit-box-shadow:0 2px 6px rgba(51, 60, 72, 0.1);
+            box-shadow:0 2px 6px rgba(51, 60, 72, 0.1);
     text-align:left;
     display:inline-block;
     overflow-x:hidden
   }
 .bk-dropdown-menu .bk-dropdown-content::-webkit-scrollbar{
       width:4px;
-      background-color:rgb(199, 206, 209);
+      background-color:#e6e9ea;
     }
 .bk-dropdown-menu .bk-dropdown-content::-webkit-scrollbar-thumb{
       height:5px;
       border-radius:2px;
-      background-color:#e6e9ea;
+      background-color:rgb(199, 206, 209);
     }
 .bk-dropdown-menu .bk-dropdown-content.is-show{
       visibility:visible;
@@ -9065,8 +9070,7 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
         line-height:60px;
         border-bottom:1px solid #DCDEE5;
         font-size:16px;
-        font-weight:bold;
-        color:#666;
+        color:#313238;
     }
 .bk-sideslider-content{
         overflow:auto;
@@ -10335,9 +10339,27 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
         width:100%;
         height:1px;
         content:'';
-        background-color:#dfe0e5;
+        background-color:transparent;
         z-index:1;
     }
+.bk-table.bk-table-dark-header th{
+            background-color:#f0f1f5;
+        }
+.bk-table.bk-table-dark-header th :hover{
+                background-color:#eaebf0
+            }
+.bk-table.bk-table-custom-header{
+        --customHeaderColor:#000;
+    }
+.bk-table.bk-table-custom-header th{
+            background-color:var(--customHeaderColor);
+        }
+.bk-table.bk-table-custom-header-hover{
+        --customHeaderColorHover:#fff;
+    }
+.bk-table.bk-table-custom-header-hover th .cell:hover{
+            background-color:var(--customHeaderColorHover)
+        }
 .bk-table thead{
         color:#63656e;
         font-weight:bold
@@ -10558,6 +10580,9 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
     border:1px solid #dfe0e5;
     border-radius:2px
 }
+.bk-table-group:before, .bk-table-border:before, .bk-table-outer-border:before{
+        background-color:#dfe0e5;
+    }
 .bk-table-group:after, .bk-table-border:after, .bk-table-outer-border:after{
         position:absolute;
         top:0;
@@ -11382,6 +11407,21 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
 .bk-selector-list .bk-selector-list-item .bk-selector-tools .bk-selector-list-icon{
                 margin-right:14px;
             }
+.bk-time-picker-now{
+    border-top:1px solid #dcdee5;
+    text-align:right;
+    clear:both;
+    background-color:#fafbfd;
+    height:42px;
+    line-height:41px;
+    font-size:13px;
+    padding:0 20px;
+    text-align:center;
+}
+.bk-time-picker-now a{
+        color:#3a84ff;
+        text-decoration:none;
+    }
 .bk-time-picker-cells{
 }
 .bk-time-picker-cells:after{
@@ -11396,7 +11436,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         box-sizing:border-box;
         padding-top:6px;
         text-align:left;
-        background-color:rgba(58,132,255,.16);
+        background-color:#e1ecff;
         mix-blend-mode:multiply;
         color:#3a84ff;
         pointer-events:none;
@@ -11517,7 +11557,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             position:relative
         }
 .bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell:hover{
-                color:#3a84ff;
+                background-color:#f0f1f5;
             }
 .bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled{
             color:#c4c6cc;
@@ -11532,6 +11572,9 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         .bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected:hover{
             color:#3a84ff;
         }
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected{
+            font-weight:700;
+        }
 .bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-focused{
         }
 .bk-time-picker-header{
@@ -11543,6 +11586,11 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
     font-weight:700;
     color:#63656e;
 }
+.bk-time-picker-header .now-time{
+        font-weight:400;
+        cursor:pointer;
+        margin-left:3px;
+    }
 .bk-time-picker-with-range .bk-picker-panel-body{
 }
 .bk-time-picker-with-range .bk-picker-panel-content{
@@ -14303,7 +14351,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
 .bk-popconfirm-content .popconfirm-split{
         display:inline-block;
         position:absolute;
-        top:13px;
+        top:9px;
         background-color:#dcdee5;
         width:1px;
         height:12px;
@@ -14313,7 +14361,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         padding:10px;
     }
 .bk-popconfirm-content.popconfirm-more .popconfirm-content .title{
-                font-size:16px;
+                font-size:14px;
                 color:#313238;
                 padding-bottom:10px;
             }
@@ -14325,7 +14373,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             }
 .bk-popconfirm-content.popconfirm-more .popconfirm-content .is-simple.content{
                 font-size:14px;
-                line-height:24px;
+                line-height:22px;
             }
 .bk-popconfirm-content.popconfirm-more .popconfirm-operate{
             text-align:right;
@@ -14357,7 +14405,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
                         background-color:#699df4;
                         border-color:#699df4;
                     }
-.bk-popconfirm-content .popconfirm-operate .default-operate-button{
+.bk-popconfirm-content .popconfirm-operate .default-operate-button[type="button"]{
             height:26px;
             padding:0 16px;
         }

package/dist/bk-magic-vue.js

@@ -8961,7 +8961,8 @@
         hour: 'Hour',
         min: 'Minute',
         sec: 'Second',
-        toNow: 'Now'
+        toNow: 'Now',
+        now: 'Now'
       },
       dialog: {
         ok: 'OK',
@@ -9116,7 +9117,8 @@
         hour: '时',
         min: '分',
         sec: '秒',
-        toNow: '至今'
+        toNow: '至今',
+        now: '此刻'
       },
       dialog: {
         ok: '确定',
@@ -10685,13 +10687,16 @@
       bindWheelEvent: function bindWheelEvent() {
         var _this5 = this;
         var bindFunction = function bindFunction(type) {
-          _this5.$refs[type].addEventListener('wheel', debounce$2(_this5.handleWheel, 32, type), {
+          var el = _this5.$refs[type];
+          el && el.addEventListener('wheel', debounce$2(_this5.handleWheel, 32, type), {
             passive: true
           });
         };
-        bindFunction('hours');
-        bindFunction('minutes');
-        bindFunction('seconds');
+        this.$nextTick(function () {
+          bindFunction('hours');
+          bindFunction('minutes');
+          bindFunction('seconds');
+        });
       },
       typeItemHeight: function typeItemHeight(type) {
         return this.$refs[type].querySelector('li').offsetHeight;
@@ -10967,7 +10972,7 @@
     components: {
       TimeSpinner: __vue_component__$p
     },
-    mixins: [timeMixins, panelMixins],
+    mixins: [timeMixins, panelMixins, locale.mixin],
     props: {
       disabledDate: {
         type: Function,
@@ -11077,6 +11082,16 @@
         if (emit) {
           this.$emit('pick', newDate, true, 'time');
         }
+      },
+      setTimeToNow: function setTimeToNow() {
+        var hours = new Date().getHours();
+        var minutes = new Date().getMinutes();
+        var seconds = new Date().getSeconds();
+        var newDate = new Date(this.date);
+        newDate.setHours(hours);
+        newDate.setMinutes(minutes);
+        newDate.setSeconds(seconds);
+        this.$emit('pick', newDate, true, 'time');
       }
     }
   };
@@ -11106,7 +11121,15 @@
       }
     }, [_vm.showDate ? _c('div', {
       staticClass: "bk-time-picker-header"
-    }, [_vm._v(_vm._s(_vm.visibleDate))]) : _vm._e(), _c('div', {
+    }, [_vm._v("\n      " + _vm._s(_vm.visibleDate) + "\n      "), _c('a', {
+      staticClass: "now-time",
+      attrs: {
+        "href": "javascript: void(0);"
+      },
+      on: {
+        "click": _vm.setTimeToNow
+      }
+    }, [_vm._v(_vm._s(_vm.t('bk.datePicker.now')))])]) : _vm._e(), _c('div', {
       staticClass: "bk-picker-panel-content"
     }, [_c('time-spinner', {
       ref: "timeSpinner",
@@ -11125,7 +11148,16 @@
         "change": _vm.handleChange,
         "pick-click": _vm.handlePickClick
       }
-    })], 1)])]);
+    })], 1), !_vm.showDate ? _c('div', {
+      staticClass: "bk-time-picker-now"
+    }, [_c('a', {
+      attrs: {
+        "href": "javascript: void(0);"
+      },
+      on: {
+        "click": _vm.setTimeToNow
+      }
+    }, [_vm._v(_vm._s(_vm.t('bk.datePicker.now')))])]) : _vm._e()])]);
   };
 
   var __vue_staticRenderFns__$q = [];
@@ -28843,6 +28875,7 @@
     trigger: 'mouseenter focus',
     theme: 'dark',
     interactive: true,
+    boundary: 'window',
     content: '',
     allowHtml: false,
     extCls: ''
@@ -34549,10 +34582,6 @@
     },
     mixins: [locale.mixin],
     props: {
-      tirgger: {
-        type: String,
-        default: 'mouseenter focus'
-      },
       title: {
         type: String
       },
@@ -41802,6 +41831,18 @@
         type: Boolean,
         default: true
       },
+      customHeaderColor: {
+        type: String,
+        default: ''
+      },
+      customHeaderColorHover: {
+        type: String,
+        default: ''
+      },
+      darkHeader: {
+        type: Boolean,
+        default: false
+      },
       rowAutoHeight: {
         type: Boolean,
         default: false
@@ -42114,6 +42155,7 @@
     },
     mounted: function mounted() {
       var _this3 = this;
+      this.setHeaderStyle();
       this.bindEvents();
       this.store.updateColumns();
       this.doLayout();
@@ -42137,6 +42179,13 @@
       if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
     },
     methods: {
+      setHeaderStyle: function setHeaderStyle() {
+        var _this4 = this;
+        this.$nextTick(function () {
+          _this4.$refs.bkTable.style.setProperty('--customHeaderColor', _this4.customHeaderColor);
+          _this4.$refs.bkTable.style.setProperty('--customHeaderColorHover', _this4.customHeaderColorHover);
+        });
+      },
       setCurrentRow: function setCurrentRow(row) {
         this.store.commit('setCurrentRow', row);
       },
@@ -42209,7 +42258,7 @@
         var refs = this.$refs;
         var self = this;
         this.bodyWrapper.addEventListener('scroll', function () {
-          var _this4 = this;
+          var _this5 = this;
           if (headerWrapper) {
             headerWrapper.scrollLeft = this.scrollLeft;
             values$1(tableHeader.filterPanels).forEach(function (filterPanel) {
@@ -42232,7 +42281,7 @@
           if (this.scrollThrottle) return;
           this.scrollThrottle = true;
           setTimeout(function () {
-            _this4.scrollThrottle = false;
+            _this5.scrollThrottle = false;
             if (bodyWrapper.scrollHeight - bodyWrapper.offsetHeight - bodyWrapper.scrollTop < 40) {
               self.$emit('scroll-end');
             }
@@ -42294,12 +42343,16 @@
     var _c = _vm._self._c || _h;
 
     return _c('div', {
+      ref: "bkTable",
       staticClass: "bk-table",
       class: [{
         'bk-table-fit': _vm.fit,
         'bk-table-striped': _vm.stripe,
         'bk-table-border': _vm.tableBorder || _vm.isGroup,
         'bk-table-outer-border': _vm.outerBorder,
+        'bk-table-dark-header': _vm.darkHeader,
+        'bk-table-custom-header': _vm.customHeaderColor,
+        'bk-table-custom-header-hover': _vm.customHeaderColorHover,
         'bk-table-linear': !(_vm.tableBorder || _vm.outerBorder || _vm.isGroup),
         'bk-table-row-border': _vm.tableRowBorder,
         'bk-table-col-border': _vm.tableColBorder,
@@ -54984,7 +55037,8 @@
   var script$1s = {
     name: 'bk-card',
     components: {
-      bkInput: __vue_component__$B
+      bkInput: __vue_component__$B,
+      bkTransition: __vue_component__$3
     },
     props: {
       title: {
@@ -55135,9 +55189,13 @@
         },
         expression: "renderTitle"
       }
-    })])], 2) : _vm._e(), _vm.collapseActive ? [_c('div', {
+    })])], 2) : _vm._e(), _vm.collapseActive ? [_c('bk-transition', {
+      attrs: {
+        "name": "collapse"
+      }
+    }, [_c('div', {
       staticClass: "bk-card-body"
-    }, [_vm._t("default")], 2), _vm.showFoot ? _c('div', {
+    }, [_vm._t("default")], 2)]), _vm.showFoot ? _c('div', {
       staticClass: "bk-card-foot"
     }, [_vm._t("footer")], 2) : _vm._e()] : _vm._e()], 2);
   };