bk-magic-vue 2.4.9-beta.2 → 2.4.9

package/dist/bk-magic-vue.js

@@ -8175,23 +8175,6 @@
       },
       handleKeydown: function handleKeydown(e) {
         var keyCode = e.keyCode;
-        if (keyCode === 9) {
-          if (this.visible) {
-            e.stopPropagation();
-            e.preventDefault();
-            if (this.isConfirm) {
-              var selector = '.bk-picker-confirm > *';
-              var tabbable = this.$refs.drop.$el.querySelectorAll(selector);
-              this.internalFocus = true;
-              var element = _toConsumableArray(tabbable)[e.shiftKey ? 'pop' : 'shift']();
-              element.focus();
-            } else {
-              this.handleClose();
-            }
-          } else {
-            this.focused = false;
-          }
-        }
         var arrows = [37, 38, 39, 40];
         if (!this.visible && arrows.includes(keyCode)) {
           this.visible = true;
@@ -8203,7 +8186,7 @@
             this.handleClose();
           }
         }
-        if (keyCode === 13 && this.timeEnterMode) {
+        if ((keyCode === 9 || keyCode === 13) && this.timeEnterMode) {
           var _timePickers = findChildComponents(this, 'TimeSpinner');
           if (_timePickers.length > 0) {
             var columnsPerPicker = _timePickers[0].showSeconds ? 3 : 2;
@@ -8354,10 +8337,6 @@
         }
       },
       handleInputMouseleave: function handleInputMouseleave(e) {
-        if (e.toElement && e.toElement.classList.contains('clear-action')) {
-          return;
-        }
-        this.showClose = false;
       },
       handleClear: function handleClear(e) {
         var _this3 = this;
@@ -12980,6 +12959,10 @@
         type: Function,
         default: null
       },
+      closeFn: {
+        type: Function,
+        default: null
+      },
       onClose: {
         type: Function,
         default: function _default() {}
@@ -13326,6 +13309,7 @@
       },
       close: function close() {
         var _this2 = this;
+        var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cancel';
         return _asyncToGenerator( regenerator.mark(function _callee() {
           var shouldClose;
           return regenerator.wrap(function _callee$(_context) {
@@ -13342,14 +13326,28 @@
                 case 4:
                   shouldClose = _context.sent;
                 case 5:
-                  if (shouldClose) {
-                    _this2.visible = false;
-                    typeof _this2.onClose === 'function' && _this2.onClose();
-                    _this2.$emit('input', false);
-                    _this2.$emit('cancel');
+                  if (!shouldClose) {
+                    _context.next = 17;
+                    break;
+                  }
+                  _this2.visible = false;
+                  typeof _this2.onClose === 'function' && _this2.onClose();
+                  _this2.$emit('input', false);
+                  _this2.$emit('cancel');
+                  _context.t0 = type;
+                  _context.next = _context.t0 === 'cancel' ? 13 : _context.t0 === 'close' ? 15 : 17;
+                  break;
+                case 13:
+                  typeof _this2.cancelFn === 'function' && _this2.cancelFn(_this2);
+                  return _context.abrupt("break", 17);
+                case 15:
+                  if (_this2.closeFn) {
+                    typeof _this2.closeFn === 'function' && _this2.closeFn(_this2);
+                  } else {
                     typeof _this2.cancelFn === 'function' && _this2.cancelFn(_this2);
                   }
-                case 6:
+                  return _context.abrupt("break", 17);
+                case 17:
                 case "end":
                   return _context.stop();
               }
@@ -13361,6 +13359,9 @@
         this.$emit('after-leave');
         typeof this.afterLeaveFn === 'function' && this.afterLeaveFn(this);
       },
+      closeHandler: function closeHandler() {
+        this.close('close');
+      },
       cancelHandler: function cancelHandler(e) {
         this.close();
       },
@@ -13592,7 +13593,7 @@
       on: {
         "click": function click($event) {
           $event.stopPropagation();
-          return _vm.cancelHandler($event);
+          return _vm.closeHandler($event);
         }
       }
     }) : _vm._e()], 2)])] : [_vm.shouldRender || _vm.visible ? _c('div', {
@@ -29477,6 +29478,7 @@
       Info.close(id);
     };
     instance.cancelFn = opts.cancelFn && typeof opts.cancelFn === 'function' ? opts.cancelFn : function () {};
+    instance.closeFn = opts.closeFn && typeof opts.closeFn === 'function' ? opts.closeFn : null;
     instance.afterLeaveFn = opts.afterLeaveFn && typeof opts.afterLeaveFn === 'function' ? opts.afterLeaveFn : function () {};
     instance.stateChangeFn = opts.stateChangeFn && typeof opts.stateChangeFn === 'function' ? opts.stateChangeFn : function () {};
     instance.onClose = function () {
@@ -30554,7 +30556,9 @@
           el.$vm.isShow = false;
         }, delay);
       } else {
-        el.$vm.isShow = false;
+        Vue.nextTick(function () {
+          el.$vm.isShow = false;
+        });
       }
     }
     if (options.title) {
@@ -30588,7 +30592,9 @@
       }
     },
     update: function update(el, binding) {
-      toggle(el, binding.value);
+      if (el.viewmodel) {
+        toggle(el, binding.value);
+      }
     }
   };
 
@@ -33821,6 +33827,7 @@
     name: 'bk-pagination',
     components: {
       bkSelect: __vue_component__$L,
+      bkInput: __vue_component__$B,
       bkOption: __vue_component__$F,
       paginationSelectionCount: __vue_component__$M,
       paginationTotalCount: __vue_component__$N,
@@ -33845,6 +33852,10 @@
         type: Boolean,
         default: false
       },
+      showQuickJumper: {
+        type: Boolean,
+        default: false
+      },
       size: {
         type: String,
         default: 'default',
@@ -33908,6 +33919,7 @@
     data: function data() {
       return {
         pageSize: 5,
+        jumpPage: 1,
         renderList: [],
         curGroup: 1,
         limitListTmp: [],
@@ -33942,6 +33954,7 @@
         this.$emit('limit-change', val, oldVal);
       },
       current: function current(newVal) {
+        this.jumpPage = newVal;
         this.calcPageList(newVal);
       },
       total: function total(newVal) {
@@ -34029,6 +34042,20 @@
           this.jumpToPage(this.current + 1);
         }
       },
+      handleJump: function handleJump() {
+        var _this = this;
+        this.$nextTick(function () {
+          var pageNum = Number(_this.jumpPage);
+          if (pageNum < 1) {
+            pageNum = 1;
+          }
+          if (pageNum > _this.total) {
+            pageNum = _this.total;
+          }
+          _this.jumpPage = pageNum;
+          _this.jumpToPage(pageNum);
+        });
+      },
       jumpToPage: function jumpToPage(page) {
         this.$emit('update:current', page);
         this.$emit('change', page);
@@ -34104,7 +34131,9 @@
           "name": p.count + "/page"
         }
       });
-    }), 1)]], 2) : _vm._e(), _vm.showSelectionCount ? _c('pagination-selection-count') : _vm._e(), !_vm.small ? _c('ul', {
+    }), 1)]], 2) : _vm._e(), _vm.showSelectionCount ? _c('pagination-selection-count') : _vm._e(), !_vm.small ? _c('div', {
+      staticClass: "bk-page-list-wrapper"
+    }, [_c('ul', {
       staticClass: "bk-page-list"
     }, [_c('li', {
       staticClass: "page-item",
@@ -34209,7 +34238,33 @@
       on: {
         "click": _vm.nextPage
       }
-    }, [_vm._m(1)])], 2) : _c('small-jump', {
+    }, [_vm._m(1)])], 2), _vm.showQuickJumper ? _c('div', {
+      staticClass: "bk-page-jumper"
+    }, [_c('span', [_vm._v("前往")]), _c('bk-input', {
+      staticStyle: {
+        "width": "60px",
+        "margin": "0 4px"
+      },
+      attrs: {
+        "type": "number",
+        "placeholder": "分页",
+        "size": _vm.small || _vm.size === 'small' ? 'small' : '',
+        "min": 1,
+        "max": _vm.total,
+        "show-controls": false
+      },
+      on: {
+        "blur": _vm.handleJump,
+        "enter": _vm.handleJump
+      },
+      model: {
+        value: _vm.jumpPage,
+        callback: function callback($$v) {
+          _vm.jumpPage = $$v;
+        },
+        expression: "jumpPage"
+      }
+    }), _c('span', [_vm._v("页")])], 1) : _vm._e()]) : _c('small-jump', {
       attrs: {
         "current": _vm.current,
         "total": _vm.total
@@ -37519,6 +37574,9 @@
       },
       hasAddBtnSlot: function hasAddBtnSlot() {
         return !!this.$slots && !!this.$slots.add;
+      },
+      hasExtensionSlot: function hasExtensionSlot() {
+        return !!this.$slots && !!this.$slots.extension;
       }
     },
     watch: {
@@ -37702,16 +37760,20 @@
           var _this4$$refs = _this4.$refs,
               labelWrapper = _this4$$refs.labelWrapper,
               labelList = _this4$$refs.labelList,
-              addController = _this4$$refs.addController;
+              addController = _this4$$refs.addController,
+              extensionController = _this4$$refs.extensionController;
           var labelWrapperRect = labelWrapper.getBoundingClientRect();
           var labelListRect = labelList.getBoundingClientRect();
           var addControllerRect = addController ? addController.getBoundingClientRect() : {
             width: 0
           };
+          var extensionControllerReact = extensionController ? extensionController.getBoundingClientRect() : {
+            width: 0
+          };
           _this4.addCustomRect = _this4.hasAddBtnSlot ? _this4.$refs.addCustom.getBoundingClientRect() : {
             width: 0
           };
-          _this4.scrollState.show = labelListRect.width + addControllerRect.width + _this4.addCustomRect.width > labelWrapperRect.width;
+          _this4.scrollState.show = labelListRect.width + addControllerRect.width + _this4.addCustomRect.width + extensionControllerReact.width > labelWrapperRect.width;
           if (!_this4.scrollState.show) {
             _this4.scrollState.offset = 0;
             _this4.scrollState.position = 'left';
@@ -37751,8 +37813,9 @@
       getRightControllerWidth: function getRightControllerWidth() {
         var _this$$refs = this.$refs,
             nextController = _this$$refs.nextController,
-            addController = _this$$refs.addController;
-        var controllers = [nextController, addController];
+            addController = _this$$refs.addController,
+            extensionController = _this$$refs.extensionController;
+        var controllers = [nextController, addController, extensionController];
         var width = 0;
         controllers.forEach(function (controller) {
           width += controller ? controller.offsetWidth : 0;
@@ -37771,45 +37834,47 @@
           return false;
         }
         this.$nextTick(function () {
-          var panel = _this5.$refs.tabLabel.find(function (item) {
-            if (item && item.$el) {
-              var newActive = Object.prototype.toString.call(active) === '[object Number]' ? active + '' : active;
-              return item.$el.dataset.name === newActive;
-            }
-          });
-          if (panel) {
-            var tabLabel = panel.$el;
-            var tabLabelRect = tabLabel.getBoundingClientRect();
-            if (!_this5.isSidePosition) {
-              if (tabLabelRect.width === 0 && tabLabelRect.height === 0) {
-                tabLabel.classList.add('simulate-border-bottom');
-              } else {
-                tabLabel.classList.remove('simulate-border-bottom');
-              }
-              _this5.activeBarStyle.width = "".concat(tabLabelRect.width - 24, "px");
-              _this5.activeBarStyle.height = _this5.activeBar.height;
-              _this5.activeBarStyle.transform = "translateX(".concat(tabLabel.offsetLeft + 12, "px)");
-              _this5.activeBarStyle.left = 0;
-              if (_this5.activeBar.position === 'top') {
-                _this5.activeBarStyle.top = '0px';
-                _this5.activeBarStyle.bottom = 'auto';
-              } else {
-                _this5.activeBarStyle.top = 'auto';
-                _this5.activeBarStyle.bottom = '0px';
-              }
-            } else {
-              if (tabLabelRect.width === 0 && tabLabelRect.height === 0) {
-                tabLabel.classList.add('simulate-border-right');
-              } else {
-                tabLabel.classList.remove('simulate-border-right');
+          if (isArray$1(_this5.$refs.tabLabel)) {
+            var panel = _this5.$refs.tabLabel.find(function (item) {
+              if (item && item.$el) {
+                var newActive = Object.prototype.toString.call(active) === '[object Number]' ? active + '' : active;
+                return item.$el.dataset.name === newActive;
               }
-              _this5.activeBarStyle.width = _this5.activeBar.height;
-              _this5.activeBarStyle.height = "".concat(tabLabelRect.height || 50, "px");
-              _this5.activeBarStyle.transform = "translateY(".concat(tabLabel.offsetTop, "px)");
-              if (_this5.tabPosition === 'right') {
+            });
+            if (panel) {
+              var tabLabel = panel.$el;
+              var tabLabelRect = tabLabel.getBoundingClientRect();
+              if (!_this5.isSidePosition) {
+                if (tabLabelRect.width === 0 && tabLabelRect.height === 0) {
+                  tabLabel.classList.add('simulate-border-bottom');
+                } else {
+                  tabLabel.classList.remove('simulate-border-bottom');
+                }
+                _this5.activeBarStyle.width = "".concat(tabLabelRect.width - 24, "px");
+                _this5.activeBarStyle.height = _this5.activeBar.height;
+                _this5.activeBarStyle.transform = "translateX(".concat(tabLabel.offsetLeft + 12, "px)");
                 _this5.activeBarStyle.left = 0;
+                if (_this5.activeBar.position === 'top') {
+                  _this5.activeBarStyle.top = '0px';
+                  _this5.activeBarStyle.bottom = 'auto';
+                } else {
+                  _this5.activeBarStyle.top = 'auto';
+                  _this5.activeBarStyle.bottom = '0px';
+                }
               } else {
-                _this5.activeBarStyle.left = "".concat(tabLabelRect.width - 2, "px");
+                if (tabLabelRect.width === 0 && tabLabelRect.height === 0) {
+                  tabLabel.classList.add('simulate-border-right');
+                } else {
+                  tabLabel.classList.remove('simulate-border-right');
+                }
+                _this5.activeBarStyle.width = _this5.activeBar.height;
+                _this5.activeBarStyle.height = "".concat(tabLabelRect.height || 50, "px");
+                _this5.activeBarStyle.transform = "translateY(".concat(tabLabel.offsetTop, "px)");
+                if (_this5.tabPosition === 'right') {
+                  _this5.activeBarStyle.left = 0;
+                } else {
+                  _this5.activeBarStyle.left = "".concat(tabLabelRect.width - 2, "px");
+                }
               }
             }
           }
@@ -37993,7 +38058,8 @@
       staticClass: "bk-tab-label-wrapper",
       class: {
         'has-scroller': _vm.scrollState.show && !_vm.isSidePosition,
-        'has-add': (_vm.addable || _vm.hasAddBtnSlot) && !_vm.isSidePosition
+        'has-add': (_vm.addable || _vm.hasAddBtnSlot) && !_vm.isSidePosition,
+        'has-extension': _vm.hasExtensionSlot
       },
       style: {
         padding: _vm.scrollState.show && !_vm.isSidePosition ? "0 " + (_vm.addCustomRect.width + 24) + "px 0 24px" : undefined
@@ -38064,11 +38130,21 @@
           }
         }
       });
-    }), 1), _vm.addable && !_vm.isSidePosition && !_vm.hasAddBtnSlot ? _c('i', {
+    }), 1), _vm.hasExtensionSlot ? _c('div', {
+      ref: "extensionController",
+      class: {
+        'bk-tab-extension-controller': true,
+        'has-setting': _vm.$slots.extension
+      },
+      style: {
+        height: _vm.labelHeight + "px",
+        lineHeight: _vm.labelHeight + "px"
+      }
+    }, [_vm._t("extension")], 2) : _vm._e(), _vm.addable && !_vm.isSidePosition && !_vm.hasAddBtnSlot ? _c('i', {
       ref: "addController",
       staticClass: "bk-tab-add-controller bk-icon icon-plus",
       class: {
-        'left-border': !_vm.visiblePanels.length,
+        'left-border': !_vm.visiblePanels.length && !_vm.hasExtensionSlot,
         'next-right': _vm.addShowNextRight
       },
       style: {
@@ -41880,7 +41956,7 @@
       },
       handlePageChange: function handlePageChange(page) {
         this.autoScrollToTop && this.scrollToTop();
-        this.$emit('page-change', page);
+        this.$emit('page-change', page, this.pagination.limit);
       },
       handlePageLimitChange: function handlePageLimitChange(currentLimit, prevLimit) {
         this.autoScrollToTop && this.scrollToTop();
@@ -48655,9 +48731,21 @@
 
   var script$1f = {
     name: 'bk-zoom-image',
+    directives: {
+      transferDom: transferDom
+    },
+    mixins: [zIndex$1],
     props: {
       src: String,
-      extCls: String
+      extCls: String,
+      zIndex: {
+        type: Number,
+        default: 2000
+      },
+      transfer: {
+        type: Boolean,
+        default: true
+      }
     },
     data: function data() {
       return {
@@ -48670,7 +48758,8 @@
         width: 0,
         height: 0,
         top: 0,
-        left: 0
+        left: 0,
+        popIndex: 0
       };
     },
     watch: {
@@ -48685,6 +48774,10 @@
       }
     },
     methods: {
+      showImg: function showImg() {
+        this.imgSrc = this.src;
+        this.popIndex = this.transfer ? this.getLocalZIndex() : this.zIndex;
+      },
       startChange: function startChange(event) {
         if (!this.isInit) return;
         this.top = event.clientY - event.offsetY;
@@ -48747,16 +48840,31 @@
         "src": _vm.src
       },
       on: {
-        "click": function click($event) {
-          _vm.imgSrc = _vm.src;
-        }
+        "click": _vm.showImg
       }
     }), _c('transition', {
       attrs: {
         "name": "fade"
       }
+    }, [_c('div', {
+      directives: [{
+        name: "transfer-dom",
+        rawName: "v-transfer-dom"
+      }],
+      staticClass: "bk-zoom-image",
+      staticStyle: {
+        "position": "absolute",
+        "top": "-100000px",
+        "left": "-100000px"
+      },
+      attrs: {
+        "data-transfer": _vm.transfer
+      }
     }, [_vm.imgSrc ? _c('section', {
       staticClass: "bk-full-screen",
+      style: {
+        zIndex: _vm.popIndex
+      },
       on: {
         "mousemove": _vm.mouseMove,
         "mouseup": _vm.mouseUp
@@ -48786,7 +48894,7 @@
         },
         "mousedown": _vm.mouseDown
       }
-    })]) : _vm._e()])], 1);
+    })]) : _vm._e()])])], 1);
   };
 
   var __vue_staticRenderFns__$1h = [];
@@ -54810,7 +54918,7 @@
   }
   var script$1t = {
     name: 'bk-image-viewer',
-    mixins: [locale.mixin],
+    mixins: [locale.mixin, zIndex$1],
     props: {
       urlList: {
         type: Array,
@@ -54841,6 +54949,10 @@
       maskClose: {
         type: Boolean,
         default: true
+      },
+      transfer: {
+        type: Boolean,
+        default: true
       }
     },
     data: function data() {
@@ -54878,6 +54990,11 @@
         var arr = this.currentImg.split('/');
         return arr[arr.length - 1];
       },
+      wrapStyles: function wrapStyles() {
+        return {
+          zIndex: this.transfer ? this.getLocalZIndex() : this.zIndex
+        };
+      },
       imgStyle: function imgStyle() {
         var _this$transform = this.transform,
             scale = _this$transform.scale,
@@ -54916,9 +55033,17 @@
       }
     },
     mounted: function mounted() {
+      if (this.transfer) {
+        document.body.appendChild(this.$el);
+      }
       this.deviceSupportInstall();
       this.$refs['bk-image-viewer-wrapper'].focus();
     },
+    destroyed: function destroyed() {
+      if (this.transfer && this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    },
     methods: {
       hide: function hide() {
         this.deviceSupportUninstall();
@@ -55075,9 +55200,7 @@
     }, [_c('div', {
       ref: "bk-image-viewer-wrapper",
       staticClass: "bk-image-viewer-wrapper",
-      style: {
-        'z-index': _vm.zIndex
-      },
+      style: _vm.wrapStyles,
       attrs: {
         "tabindex": "-1"
       }
@@ -55293,7 +55416,6 @@
     FILL: 'fill',
     SCALE_DOWN: 'scale-down'
   };
-  var prevOverflow = '';
   var script$1u = {
     name: 'bk-image',
     components: {
@@ -55321,11 +55443,15 @@
         type: Boolean,
         default: true
       },
+      maskClose: {
+        type: Boolean,
+        default: true
+      },
       zIndex: {
         type: Number,
         default: 2000
       },
-      maskClose: {
+      transfer: {
         type: Boolean,
         default: true
       }
@@ -55337,7 +55463,8 @@
         show: !this.lazy,
         imageWidth: 0,
         imageHeight: 0,
-        showViewer: false
+        showViewer: false,
+        prevOverflow: ''
       };
     },
     computed: {
@@ -55486,12 +55613,12 @@
         if (!this.preview) {
           return;
         }
-        prevOverflow = document.body.style.overflow;
+        this.prevOverflow = document.body.style.overflow;
         document.body.style.overflow = 'hidden';
         this.showViewer = true;
       },
       closeViewer: function closeViewer() {
-        document.body.style.overflow = prevOverflow;
+        document.body.style.overflow = this.prevOverflow;
         this.showViewer = false;
       }
     }
@@ -55538,6 +55665,7 @@
         "initial-index": _vm.imageIndex,
         "url-list": _vm.previewSrcList,
         "on-close": _vm.closeViewer,
+        "transfer": _vm.transfer,
         "mask-close": _vm.maskClose
       }
     }) : _vm._e()] : _vm._e()], 2);