bk-magic-vue 2.4.1-beta.2 → 2.4.1-beta.3

package/dist/bk-magic-vue.css

@@ -15035,6 +15035,13 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             -ms-flex-direction:column;
                 flex-direction:column;
     }
+.bk-image-viewer-mask{
+        position:absolute;
+        top:0;
+        right:0;
+        bottom:0;
+        left:0;
+    }
 .bk-image-viewer-header{
         position:absolute;
         top:0;
@@ -15051,9 +15058,7 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         -webkit-box-align:center;
             -ms-flex-align:center;
                 align-items:center;
-        padding:0 13px 0 25px;
-        background:rgba(0, 0, 0, .7);
-        color:#63656e;
+        color:#c4c6cc;
     }
 .bk-image-viewer-header > div{
             -webkit-box-flex:1;
@@ -15062,6 +15067,8 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             overflow:hidden;
             white-space:nowrap;
             text-overflow:ellipsis;
+            font-size:14px;
+            padding:0 25px;
         }
 .bk-image-viewer-header .quit-box{
             display:-webkit-box;
@@ -15074,8 +15081,6 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
                 -ms-flex-pack:end;
                     justify-content:flex-end;
             height:100%;
-        }
-.bk-image-viewer-header .quit-tips{
             color:#979ba5;
         }
 .bk-image-viewer-btn{
@@ -15094,18 +15099,23 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         opacity:.8;
         -webkit-box-sizing:border-box;
                 box-sizing:border-box;
-        color:#fff;
+        background-color:rgba(0, 0, 0, .3);
+        color:#DCDEE5;
         -webkit-user-select:none;
            -moz-user-select:none;
             -ms-user-select:none;
                 user-select:none
     }
+.bk-image-viewer-btn:hover{
+            background-color:rgba(0, 0, 0, .4);
+            color:#63656e;
+        }
 .bk-image-viewer-close{
-        width:40px;
-        height:40px;
-        line-height:38px;
+        width:80px;
+        height:80px;
+        line-height:80px;
         text-align:center;
-        font-size:32px;
+        font-size:50px;
         color:#fff;
         cursor:pointer;
     }
@@ -15145,14 +15155,17 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         padding:0 23px;
         background-color:rgba(0,0,0,0.4);
         border-color:#fff;
-        border-radius:22px;
+        border-radius:22px
     }
+.bk-image-viewer-actions:hover{
+            background:rgba(0,0,0,.5);
+        }
 .bk-image-viewer-actions-inner{
             width:100%;
             height:100%;
             text-align:justify;
             font-size:23px;
-            color:#fff;
+            color:#c4c6cc;
             display:-webkit-box;
             display:-ms-flexbox;
             display:flex;
@@ -15161,17 +15174,21 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
                     align-items:center;
             -ms-flex-pack:distribute;
                 justify-content:space-around;
-            cursor:pointer;
+
         }
+.bk-image-viewer-actions-inner .bk-icon{
+                cursor:pointer
+            }
+.bk-image-viewer-actions-inner .bk-icon:hover{
+                    color:#fff;
+                }
 .bk-image-viewer-next, .bk-image-viewer-prev{
         top:50%;
         width:80px;
         height:80px;
         font-size:40px;
-        color:#fff;
-        background-color:rgba(0,0,0,0.4);
-        border-color:#fff;
         cursor:pointer;
+    //background:rgb(76,76,76);
     }
 .bk-image-viewer-prev{
         -webkit-transform:translateY(-50%);

package/dist/bk-magic-vue.js

@@ -2744,6 +2744,7 @@
   var script$8 = {
     name: 'bk-checkbox',
     mixins: [emitter],
+    inject: ['handleRemoveItem', 'handleAddItem'],
     props: {
       value: {
         type: [String, Number, Boolean],
@@ -2823,9 +2824,16 @@
       }
     },
     created: function created() {
-      this.dispatch('bk-checkbox-group', 'checkbox-item-add', this);
+      if (this.handleAddItem && typeof this.handleAddItem === 'function') {
+        this.handleAddItem(this);
+      }
       this.init();
     },
+    destroyed: function destroyed() {
+      if (this.handleRemoveItem && typeof this.handleRemoveItem === 'function') {
+        this.handleRemoveItem(this);
+      }
+    },
     methods: {
       getValue: function getValue() {
         if (this.selected) {
@@ -2995,6 +3003,12 @@
 
   var script$9 = {
     name: 'bk-checkbox-group',
+    provide: function provide() {
+      return {
+        handleAddItem: this.handleAddItem,
+        handleRemoveItem: this.handleRemoveItem
+      };
+    },
     props: {
       value: {
         type: Array,
@@ -3021,16 +3035,17 @@
         this.localValue = _toConsumableArray(_value);
       }
     },
-    created: function created() {
-      var _this = this;
-      this.$on('checkbox-item-add', function (item) {
-        if (item) {
-          _this.checkboxItems.push(item);
-        }
-        return false;
-      });
-    },
     methods: {
+      handleAddItem: function handleAddItem(item) {
+        if (!item || this.checkboxItems.includes(item)) return;
+        this.checkboxItems.push(item);
+      },
+      handleRemoveItem: function handleRemoveItem(item) {
+        var index = this.checkboxItems.indexOf(item);
+        if (index > -1) {
+          this.checkboxItems.splice(index, 1);
+        }
+      },
       handleChange: function handleChange(checked, value) {
         var oldValue = _toConsumableArray(this.localValue);
         var localValue = [];
@@ -8906,6 +8921,16 @@
       message: {
         copy: 'copy',
         copied: 'copied'
+      },
+      image: {
+        zoomIn: 'zoom in',
+        zoomOut: 'zoom out',
+        rotateLeft: 'anticlockwise',
+        rotateRight: 'clockwise rotation',
+        fullScreen: 'full screen',
+        original: 'original size',
+        prev: 'prev',
+        next: 'next'
       }
     }
   };
@@ -9051,6 +9076,14 @@
       message: {
         copy: '复制',
         copied: '已复制'
+      },
+      image: {
+        zoomIn: '放大',
+        zoomOut: '缩小',
+        rotateLeft: '向左旋转',
+        rotateRight: '向右旋转',
+        fullScreen: '适应屏幕',
+        original: '快速回到 1：1'
       }
     }
   };
@@ -52414,7 +52447,9 @@
       class: {
         'bk-margin-left': _vm.multiple
       }
-    }, [_vm._v("\n          " + _vm._s(_vm.item.name) + "\n          "), _vm._t("prepend", null, {
+    }, [_vm._t("option", null, {
+      node: _vm.item
+    }), _vm._t("prepend", null, {
       node: _vm.item
     })], 2)])])], 2), _vm.isRemote ? [_vm.item.isLoading ? _c('i', {
       staticClass: "bk-icon left-icon icon-loading bk-button-icon-loading bk-cascade-right"
@@ -52763,6 +52798,14 @@
           }
         },
         scopedSlots: _vm._u([{
+          key: "option",
+          fn: function fn(ref) {
+            var node = ref.node;
+            return [_vm._t("option", null, {
+              node: node
+            })];
+          }
+        }, {
           key: "prepend",
           fn: function fn(ref) {
             var node = ref.node;
@@ -52794,6 +52837,14 @@
         "updateSelectedList": _vm.updateSelectedList
       },
       scopedSlots: _vm._u([{
+        key: "option",
+        fn: function fn(ref) {
+          var node = ref.node;
+          return [_vm._t("option", null, {
+            node: node
+          })];
+        }
+      }, {
         key: "prepend",
         fn: function fn(ref) {
           var node = ref.node;
@@ -53687,6 +53738,14 @@
         "updateSelectedList": _vm.updateSelectedList
       },
       scopedSlots: _vm._u([{
+        key: "option",
+        fn: function fn(ref) {
+          var node = ref.node;
+          return [_vm._t("option", [_vm._v(_vm._s(node.name))], {
+            node: node
+          })];
+        }
+      }, {
         key: "prepend",
         fn: function fn(ref) {
           var node = ref.node;
@@ -53955,6 +54014,10 @@
       initialIndex: {
         type: Number,
         default: 0
+      },
+      maskClose: {
+        type: Boolean,
+        default: true
       }
     },
     data: function data() {
@@ -54195,7 +54258,14 @@
       attrs: {
         "tabindex": "-1"
       }
-    }, [_vm.isShowTitle && _vm.urlList.length ? _c('div', {
+    }, [_c('div', {
+      staticClass: "bk-image-viewer-mask",
+      on: {
+        "click": function click($event) {
+          _vm.maskClose && _vm.hide();
+        }
+      }
+    }), _vm.isShowTitle && _vm.urlList.length ? _c('div', {
       staticClass: "bk-image-viewer-header"
     }, [_c('div', [_vm._v(_vm._s(_vm.currentName))]), _c('div', {
       staticClass: "tc"
@@ -54235,6 +54305,15 @@
     }, [_c('div', {
       staticClass: "bk-image-viewer-actions-inner"
     }, [_c('i', {
+      directives: [{
+        name: "bk-tooltips",
+        rawName: "v-bk-tooltips.top",
+        value: _vm.t('bk.image.zoomOut'),
+        expression: "t('bk.image.zoomOut')",
+        modifiers: {
+          "top": true
+        }
+      }],
       staticClass: "bk-icon icon-narrow-line",
       on: {
         "click": function click($event) {
@@ -54242,6 +54321,15 @@
         }
       }
     }), _c('i', {
+      directives: [{
+        name: "bk-tooltips",
+        rawName: "v-bk-tooltips.top",
+        value: _vm.t('bk.image.zoomIn'),
+        expression: "t('bk.image.zoomIn')",
+        modifiers: {
+          "top": true
+        }
+      }],
       staticClass: "bk-icon icon-enlarge-line",
       on: {
         "click": function click($event) {
@@ -54249,6 +54337,15 @@
         }
       }
     }), _c('i', {
+      directives: [{
+        name: "bk-tooltips",
+        rawName: "v-bk-tooltips.top",
+        value: _vm.t('bk.image.original'),
+        expression: "t('bk.image.original')",
+        modifiers: {
+          "top": true
+        }
+      }],
       staticClass: "bk-icon icon-normalized",
       on: {
         "click": function click($event) {
@@ -54256,6 +54353,15 @@
         }
       }
     }), _c('i', {
+      directives: [{
+        name: "bk-tooltips",
+        rawName: "v-bk-tooltips.top",
+        value: _vm.t('bk.image.rotateLeft'),
+        expression: "t('bk.image.rotateLeft')",
+        modifiers: {
+          "top": true
+        }
+      }],
       staticClass: "bk-icon icon-left-turn-line",
       on: {
         "click": function click($event) {
@@ -54263,13 +54369,31 @@
         }
       }
     }), _c('i', {
+      directives: [{
+        name: "bk-tooltips",
+        rawName: "v-bk-tooltips.top",
+        value: _vm.t('bk.image.rotateRight'),
+        expression: "t('bk.image.rotateRight')",
+        modifiers: {
+          "top": true
+        }
+      }],
       staticClass: "bk-icon icon-right-turn-line",
       on: {
         "click": function click($event) {
-          _vm.handleActions('clocelise');
+          _vm.handleActions('clockwise');
         }
       }
     }), _c('i', {
+      directives: [{
+        name: "bk-tooltips",
+        rawName: "v-bk-tooltips.top",
+        value: _vm.t('bk.image.fullScreen'),
+        expression: "t('bk.image.fullScreen')",
+        modifiers: {
+          "top": true
+        }
+      }],
       staticClass: "bk-icon icon-unfull-screen",
       on: {
         "click": function click($event) {
@@ -54378,6 +54502,10 @@
       zIndex: {
         type: Number,
         default: 2000
+      },
+      maskClose: {
+        type: Boolean,
+        default: true
       }
     },
     data: function data() {
@@ -54587,7 +54715,8 @@
         "is-show-title": _vm.isShowPreviewTitle,
         "initial-index": _vm.imageIndex,
         "url-list": _vm.previewSrcList,
-        "on-close": _vm.closeViewer
+        "on-close": _vm.closeViewer,
+        "mask-close": _vm.maskClose
       }
     }) : _vm._e()] : _vm._e()], 2);
   };