bk-magic-vue 2.5.9-beta.2 → 2.5.9-beta.21

package/lib/loading.js

@@ -691,11 +691,11 @@
       staticClass: "point point3"
     }), _c('div', {
       staticClass: "point point4"
-    })]], 2), _c('div', {
+    })]], 2), _vm.title ? _c('div', {
       staticClass: "bk-loading-title"
     }, [_vm._t("title", function () {
       return [_vm._v(_vm._s(_vm.title))];
-    })], 2)])])], 1) : _c('transition', {
+    })], 2) : _vm._e()])])], 1) : _c('transition', {
       attrs: {
         "name": "fade",
         "duration": {
@@ -747,11 +747,11 @@
       staticClass: "point point3"
     }), _c('div', {
       staticClass: "point point4"
-    })]], 2), _c('div', {
+    })]], 2), _vm.title ? _c('div', {
       staticClass: "bk-loading-title"
     }, [_vm._t("title", function () {
       return [_vm._v(_vm._s(_vm.title))];
-    })], 2)])])]);
+    })], 2) : _vm._e()])])]);
   };
   var __vue_staticRenderFns__ = [];
 
@@ -842,6 +842,9 @@
     if (options.title) {
       el.$vm.title = options.title;
     }
+    if (options.size) {
+      el.$vm.size = options.size;
+    }
   }
   var bkLoading = {
     inserted: function inserted(el, binding) {

package/lib/pagination.js

@@ -4065,9 +4065,7 @@
 	      return !this.enabledOptions.length;
 	    },
 	    isAllSelected: function isAllSelected() {
-	      return !this.enabledOptions.some(function (option) {
-	        return !option.isSelected;
-	      });
+	      return this.select.selected.length === this.enabledOptions.length;
 	    }
 	  },
 	  watch: {
@@ -4353,11 +4351,11 @@
 	    staticClass: "point point3"
 	  }), _c('div', {
 	    staticClass: "point point4"
-	  })]], 2), _c('div', {
+	  })]], 2), _vm.title ? _c('div', {
 	    staticClass: "bk-loading-title"
 	  }, [_vm._t("title", function () {
 	    return [_vm._v(_vm._s(_vm.title))];
-	  })], 2)])])], 1) : _c('transition', {
+	  })], 2) : _vm._e()])])], 1) : _c('transition', {
 	    attrs: {
 	      "name": "fade",
 	      "duration": {
@@ -4409,11 +4407,11 @@
 	    staticClass: "point point3"
 	  }), _c('div', {
 	    staticClass: "point point4"
-	  })]], 2), _c('div', {
+	  })]], 2), _vm.title ? _c('div', {
 	    staticClass: "bk-loading-title"
 	  }, [_vm._t("title", function () {
 	    return [_vm._v(_vm._s(_vm.title))];
-	  })], 2)])])]);
+	  })], 2) : _vm._e()])])]);
 	};
 	var __vue_staticRenderFns__$2 = [];
 
@@ -4472,6 +4470,9 @@
 	  if (options.title) {
 	    el.$vm.title = options.title;
 	  }
+	  if (options.size) {
+	    el.$vm.size = options.size;
+	  }
 	}
 	var bkLoading = {
 	  inserted: function inserted(el, binding) {
@@ -4600,6 +4601,7 @@
 	  data: function data() {
 	    return {
 	      overflowTagNode: null,
+	      overflowTagTips: null,
 	      overflowTagIndex: null,
 	      newOptionName: ''
 	    };
@@ -4686,6 +4688,25 @@
 	    },
 	    setOverflowTagContent: function setOverflowTagContent() {
 	      this.overflowTagNode.textContent = "+".concat(this.select.selected.length - this.overflowTagIndex);
+	      this.destroyTippy();
+	      this.overflowTagTips = tippy(this.overflowTagNode, {
+	        duration: 0,
+	        arrow: true,
+	        size: 'small',
+	        trigger: 'mouseenter focus',
+	        theme: 'dark',
+	        interactive: true,
+	        boundary: 'window',
+	        content: this.getOverflowTagTips(),
+	        allowHTML: true,
+	        extCls: ''
+	      });
+	    },
+	    getOverflowTagTips: function getOverflowTagTips() {
+	      var data = this.select.selectedOptions.slice(this.overflowTagIndex, this.select.selectedOptions.length) || [];
+	      return data.map(function (option) {
+	        return option.name;
+	      }).join(',');
 	    },
 	    getOverflowTagNode: function getOverflowTagNode() {
 	      if (this.overflowTagNode) {
@@ -4700,6 +4721,12 @@
 	      if (this.overflowTagNode && this.overflowTagNode.parentNode === this.$el) {
 	        this.$el.removeChild(this.overflowTagNode);
 	      }
+	      this.destroyTippy();
+	    },
+	    destroyTippy: function destroyTippy() {
+	      if (!this.overflowTagTips) return;
+	      this.overflowTagTips.destroy();
+	      this.overflowTagTips = null;
 	    },
 	    handleCreateTag: function handleCreateTag(e) {
 	      this.$emit('create-tag', e.target.value);
@@ -6232,6 +6259,10 @@
 	    };
 	  },
 	  computed: {
+	    virtualScrollHeight: function virtualScrollHeight() {
+	      var selectAllOptionHeight = 39;
+	      return this.showSelectAll ? this.scrollHeight - selectAllOptionHeight : this.scrollHeight;
+	    },
 	    selectedName: function selectedName() {
 	      if (this.selectedOptions) {
 	        if (this.multiple) {
@@ -6803,7 +6834,7 @@
 	      "placement": "bottom-start",
 	      "theme": "light bk-select-dropdown",
 	      "animation": "slide-toggle",
-	      "offset": -1,
+	      "offset": 0,
 	      "distance": _vm.popoverDistance,
 	      "z-index": _vm.zIndex,
 	      "on-show": _vm.handleDropdownShow,
@@ -6940,7 +6971,7 @@
 	    ref: "virtualScroll",
 	    staticClass: "bk-virtual-select",
 	    style: {
-	      height: _vm.scrollHeight + 'px',
+	      height: _vm.virtualScrollHeight + 'px',
 	      width: '100%'
 	    },
 	    attrs: {
@@ -7053,8 +7084,109 @@
 	  }
 	};
 
+	var defaultOptions = {
+	  duration: 0,
+	  arrow: true,
+	  size: 'small',
+	  trigger: 'mouseenter focus',
+	  theme: 'dark',
+	  interactive: true,
+	  boundary: 'window',
+	  content: '',
+	  allowHTML: true,
+	  extCls: ''
+	};
+	var validPlacements$1 = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
+	var createTippy$1 = function createTippy(el, binding) {
+	  var value = binding.value;
+	  var options = _objectSpread({}, defaultOptions);
+	  if (_typeof(value) === 'object') {
+	    if (value.allowHtml || value.allowHTML) {
+	      value.allowHTML = true;
+	    }
+	    _extends(options, value);
+	  } else {
+	    options.content = value;
+	  }
+	  var placement = validPlacements$1.find(function (placement) {
+	    return binding.modifiers[placement];
+	  });
+	  options.placement = options.placement || placement || (options.placements || ['top'])[0];
+	  var _binding$modifiers = binding.modifiers,
+	    click = _binding$modifiers.click,
+	    light = _binding$modifiers.light;
+	  if (click) {
+	    options.trigger = 'click';
+	  }
+	  if (light) {
+	    options.theme = 'light';
+	  }
+	  if (options.allowHTML) {
+	    var selector = options.content;
+	    if (selector instanceof Vue) {
+	      options.content = selector.$el;
+	    } else if (typeof selector === 'string') {
+	      try {
+	        var element = document.querySelector(selector);
+	        if (element) {
+	          options.content = element;
+	        }
+	      } catch (e) {
+	        var _element = document.createElement('div');
+	        _element.innerHTML = selector;
+	      }
+	    }
+	  }
+	  if (options.html) {
+	    options.content = options.html;
+	  }
+	  if (typeof options.onClose === 'function') {
+	    options.onHide = options.onClose;
+	  }
+	  var validOptions = getValidTippyProps(options);
+	  return tippy(el, validOptions);
+	};
+	var bkTooltips = {
+	  inserted: function inserted(el, binding) {
+	    var disabled = _typeof(binding.value) === 'object' ? binding.value.disabled : false;
+	    if (!disabled) {
+	      el.tippyInstance = createTippy$1(el, binding);
+	    }
+	  },
+	  unbind: function unbind(el) {
+	    el._tippy && el._tippy.destroy();
+	    el.tippyInstance = null;
+	  },
+	  update: function update(el, binding) {
+	    var value = binding.value;
+	    var isObject = _typeof(value) === 'object';
+	    var content = isObject ? value.content : value;
+	    var disabled = isObject ? value.disabled : false;
+	    if (disabled || !content) {
+	      el._tippy && el._tippy.destroy();
+	      el.tippyInstance = null;
+	    } else if (content) {
+	      if (!el._tippy) {
+	        el.tippyInstance = createTippy$1(el, binding);
+	      } else {
+	        if (_typeof(value) === 'object' && (binding.value.allowHtml || binding.value.allowHTML)) {
+	          el.tippyInstance = createTippy$1(el, binding);
+	        } else {
+	          el._tippy.setContent(content);
+	        }
+	      }
+	    }
+	  }
+	};
+	bkTooltips.install = function (Vue) {
+	  Vue.directive('bkTooltips', bkTooltips);
+	};
+
 	var script$9 = {
 	  name: 'bk-input',
+	  directives: {
+	    bkTooltips: bkTooltips
+	  },
 	  mixins: [emitter, locale.mixin],
 	  props: {
 	    type: {
@@ -7164,7 +7296,12 @@
 	    allowNumberPaste: {
 	      type: Boolean,
 	      default: false
-	    }
+	    },
+	    showOverflowTooltips: {
+	      type: Boolean,
+	      default: false
+	    },
+	    initialControlValue: Number
 	  },
 	  data: function data() {
 	    return {
@@ -7185,6 +7322,9 @@
 	      inputPasswordIcon: this.passwordIcon,
 	      inputRightPadding: '10px',
 	      iconAreaSizeObserver: null,
+	      inputResizeObserver: null,
+	      isInputOverflow: false,
+	      inputClientWidth: null,
 	      validKeyCodeList: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
 	      96, 97, 98, 99, 100, 101, 102, 103, 104, 105,
 	      8,
@@ -7256,6 +7396,13 @@
 	        return "bk-input-".concat(this.inputSize);
 	      }
 	      return '';
+	    },
+	    inputTooltips: function inputTooltips() {
+	      return {
+	        content: this.curValue,
+	        disabled: !this.showOverflowTooltips || this.type === 'password' || !this.isInputOverflow,
+	        width: this.inputClientWidth && this.inputClientWidth
+	      };
 	    }
 	  },
 	  watch: {
@@ -7263,6 +7410,7 @@
 	      handler: function handler(val, old) {
 	        this.setCurValue(val);
 	        old === undefined && this.updateNumberValue(val);
+	        this.setOverflow();
 	      },
 	      immediate: true
 	    },
@@ -7297,10 +7445,13 @@
 	      };
 	    }
 	    this.observerIconSize();
+	    this.observerInputSize();
 	  },
 	  beforeDestroy: function beforeDestroy() {
 	    this.iconAreaSizeObserver && typeof this.iconAreaSizeObserver.disconnect === 'function' && this.iconAreaSizeObserver.disconnect();
 	    this.iconAreaSizeObserver = null;
+	    this.inputResizeObserver && this.inputResizeObserver.disconnect();
+	    this.inputResizeObserver = null;
 	  },
 	  methods: {
 	    observerIconSize: function observerIconSize() {
@@ -7327,6 +7478,41 @@
 	        this.iconAreaSizeObserver.observe(element);
 	      }
 	    },
+	    observerInputSize: function observerInputSize() {
+	      var _this3 = this;
+	      var element = this.$refs.input;
+	      if (!element) return;
+	      this.inputResizeObserver = new ResizeObserver(function (entries) {
+	        var _iterator2 = _createForOfIteratorHelper(entries),
+	          _step2;
+	        try {
+	          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+	            var entry = _step2.value;
+	            if (entry.target === element) {
+	              _this3.setOverflow();
+	            }
+	          }
+	        } catch (err) {
+	          _iterator2.e(err);
+	        } finally {
+	          _iterator2.f();
+	        }
+	      });
+	      this.inputResizeObserver.observe(element);
+	    },
+	    setOverflow: function setOverflow() {
+	      var _this4 = this;
+	      setTimeout(function () {
+	        var inputEl = _this4.$refs.input;
+	        if (inputEl) {
+	          _this4.isInputOverflow = inputEl.scrollWidth > inputEl.clientWidth + 2;
+	          if (inputEl.clientWidth !== _this4.inputClientWidth) {
+	            _this4.$refs.inputWrapper._tippy && _this4.$refs.inputWrapper._tippy.destroy();
+	          }
+	          _this4.inputClientWidth = inputEl.clientWidth;
+	        }
+	      });
+	    },
 	    getAttributeByType: function getAttributeByType() {
 	      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 	      var defaultAttr = {
@@ -7412,7 +7598,9 @@
 	      }
 	    },
 	    handleNumberDelete: function handleNumberDelete(event) {
-	      this.curValue === '' && (this.curValue = this.max);
+	      if (this.curValue === '') {
+	        this.curValue = this.initialControlValue === undefined ? this.max : Math.min(this.initialControlValue, this.max);
+	      }
 	      var curNumberValue = Number(this.curValue);
 	      if (curNumberValue - 1 >= this.min) {
 	        var curLenAfterDot = (String(curNumberValue) || '').split('.')[1] || '';
@@ -7427,7 +7615,9 @@
 	      }
 	    },
 	    handleNumberAdd: function handleNumberAdd(event) {
-	      this.curValue === '' && (this.curValue = this.min);
+	      if (this.curValue === '') {
+	        this.curValue = this.initialControlValue === undefined ? this.min : Math.max(this.initialControlValue, this.min);
+	      }
 	      var curNumberValue = Number(this.curValue);
 	      if (curNumberValue <= this.max - 1) {
 	        var curLenAfterDot = (String(curNumberValue) || '').split('.')[1] || '';
@@ -7581,16 +7771,16 @@
 	      }
 	    },
 	    handlerInput: function handlerInput(event) {
-	      var _this3 = this;
+	      var _this5 = this;
 	      if (this.inputType === 'number' && this.isOnComposition) {
 	        return;
 	      }
 	      this.$nextTick(function () {
 	        var value = event.target.value;
-	        _this3.setCurValue(value);
-	        _this3.$emit('input', value, event);
-	        _this3.$emit('change', value, event);
-	        _this3.dispatch('bk-form-item', 'form-change');
+	        _this5.setCurValue(value);
+	        _this5.$emit('input', value, event);
+	        _this5.$emit('change', value, event);
+	        _this5.dispatch('bk-form-item', 'form-change');
 	      });
 	    },
 	    handlerClear: function handlerClear(event) {
@@ -7695,6 +7885,13 @@
 	  }, [_c('span', {
 	    staticClass: "strong"
 	  }, [_vm._v(_vm._s(_vm.curValue && _vm.curValue.length || 0))]), _vm._v("/"), _c('span', [_vm._v(_vm._s(_vm.maxlength))])])] : _vm._e()], 2)] : [_c('div', {
+	    directives: [{
+	      name: "bk-tooltips",
+	      rawName: "v-bk-tooltips",
+	      value: _vm.inputTooltips,
+	      expression: "inputTooltips"
+	    }],
+	    ref: "inputWrapper",
 	    class: ["bk-input-" + _vm.type]
 	  }, [_c('input', _vm._b({
 	    ref: "input",

package/lib/rate.js

@@ -49,10 +49,18 @@
         var rate = index + 1;
         this.$emit('chooseRate', rate);
       },
-      changeHover: function changeHover(index) {
+      changeHover: function changeHover(e, index) {
         if (!this.edit) return;
         var rate = index + 1;
         this.$emit('changeHover', rate);
+        this.$nextTick(function () {
+          e.target.classList.add('bk-rate-star-is-hover');
+        });
+      },
+      handleMouseLeave: function handleMouseLeave(e, index) {
+        this.$nextTick(function () {
+          e.target.classList.remove('bk-rate-star-is-hover');
+        });
       }
     }
   };
@@ -157,7 +165,10 @@
             return _vm.chooseRate(index);
           },
           "mouseenter": function mouseenter($event) {
-            return _vm.changeHover(index);
+            return _vm.changeHover($event, index);
+          },
+          "mouseleave": function mouseleave($event) {
+            return _vm.handleMouseLeave($event, index);
           }
         }
       }, [_c('g', {
@@ -217,7 +228,7 @@
       },
       width: {
         type: Number,
-        default: 15
+        default: 16
       },
       height: {
         type: Number,

package/lib/resize-layout.js

@@ -685,6 +685,7 @@
 	          return false;
 	        }
 	        aside.style[_this.computedStyleKey] = resizeProxy.style[placement];
+	        console.error('mouseup', aside.style[_this.computedStyleKey]);
 	      };
 	      document.addEventListener('mousemove', handleMouseMove);
 	      document.addEventListener('mouseup', handleMouseUp);
@@ -717,7 +718,7 @@
 	      this.setupAsideListener(!this.collapsed);
 	      if (this.collapsed) {
 	        aside.setAttribute("data-".concat(this.computedStyleKey), asideRect[this.computedStyleKey] + 'px');
-	        aside.style[this.computedStyleKey] = '5px';
+	        aside.style[this.computedStyleKey] = this.collapsible ? '0' : '5px';
 	      } else {
 	        this.asideContentVisible = true;
 	        aside.style[this.computedStyleKey] = aside.getAttribute("data-".concat(this.computedStyleKey));
@@ -805,6 +806,7 @@
 	  var _c = _vm._self._c || _h;
 	  return _c('div', {
 	    class: [_vm.extCls, 'bk-resize-layout', "bk-resize-layout-" + _vm.placement, {
+	      'bk-resize-layout-collapsible': _vm.collapsible,
 	      'bk-resize-layout-collapsed': _vm.collapsed,
 	      'bk-resize-layout-border': _vm.border
 	    }]

package/lib/select.js

@@ -4014,9 +4014,7 @@
         return !this.enabledOptions.length;
       },
       isAllSelected: function isAllSelected() {
-        return !this.enabledOptions.some(function (option) {
-          return !option.isSelected;
-        });
+        return this.select.selected.length === this.enabledOptions.length;
       }
     },
     watch: {
@@ -4302,11 +4300,11 @@
       staticClass: "point point3"
     }), _c('div', {
       staticClass: "point point4"
-    })]], 2), _c('div', {
+    })]], 2), _vm.title ? _c('div', {
       staticClass: "bk-loading-title"
     }, [_vm._t("title", function () {
       return [_vm._v(_vm._s(_vm.title))];
-    })], 2)])])], 1) : _c('transition', {
+    })], 2) : _vm._e()])])], 1) : _c('transition', {
       attrs: {
         "name": "fade",
         "duration": {
@@ -4358,11 +4356,11 @@
       staticClass: "point point3"
     }), _c('div', {
       staticClass: "point point4"
-    })]], 2), _c('div', {
+    })]], 2), _vm.title ? _c('div', {
       staticClass: "bk-loading-title"
     }, [_vm._t("title", function () {
       return [_vm._v(_vm._s(_vm.title))];
-    })], 2)])])]);
+    })], 2) : _vm._e()])])]);
   };
   var __vue_staticRenderFns__$2 = [];
 
@@ -4421,6 +4419,9 @@
     if (options.title) {
       el.$vm.title = options.title;
     }
+    if (options.size) {
+      el.$vm.size = options.size;
+    }
   }
   var bkLoading = {
     inserted: function inserted(el, binding) {
@@ -4549,6 +4550,7 @@
     data: function data() {
       return {
         overflowTagNode: null,
+        overflowTagTips: null,
         overflowTagIndex: null,
         newOptionName: ''
       };
@@ -4635,6 +4637,25 @@
       },
       setOverflowTagContent: function setOverflowTagContent() {
         this.overflowTagNode.textContent = "+".concat(this.select.selected.length - this.overflowTagIndex);
+        this.destroyTippy();
+        this.overflowTagTips = tippy(this.overflowTagNode, {
+          duration: 0,
+          arrow: true,
+          size: 'small',
+          trigger: 'mouseenter focus',
+          theme: 'dark',
+          interactive: true,
+          boundary: 'window',
+          content: this.getOverflowTagTips(),
+          allowHTML: true,
+          extCls: ''
+        });
+      },
+      getOverflowTagTips: function getOverflowTagTips() {
+        var data = this.select.selectedOptions.slice(this.overflowTagIndex, this.select.selectedOptions.length) || [];
+        return data.map(function (option) {
+          return option.name;
+        }).join(',');
       },
       getOverflowTagNode: function getOverflowTagNode() {
         if (this.overflowTagNode) {
@@ -4649,6 +4670,12 @@
         if (this.overflowTagNode && this.overflowTagNode.parentNode === this.$el) {
           this.$el.removeChild(this.overflowTagNode);
         }
+        this.destroyTippy();
+      },
+      destroyTippy: function destroyTippy() {
+        if (!this.overflowTagTips) return;
+        this.overflowTagTips.destroy();
+        this.overflowTagTips = null;
       },
       handleCreateTag: function handleCreateTag(e) {
         this.$emit('create-tag', e.target.value);
@@ -6181,6 +6208,10 @@
       };
     },
     computed: {
+      virtualScrollHeight: function virtualScrollHeight() {
+        var selectAllOptionHeight = 39;
+        return this.showSelectAll ? this.scrollHeight - selectAllOptionHeight : this.scrollHeight;
+      },
       selectedName: function selectedName() {
         if (this.selectedOptions) {
           if (this.multiple) {
@@ -6752,7 +6783,7 @@
         "placement": "bottom-start",
         "theme": "light bk-select-dropdown",
         "animation": "slide-toggle",
-        "offset": -1,
+        "offset": 0,
         "distance": _vm.popoverDistance,
         "z-index": _vm.zIndex,
         "on-show": _vm.handleDropdownShow,
@@ -6889,7 +6920,7 @@
       ref: "virtualScroll",
       staticClass: "bk-virtual-select",
       style: {
-        height: _vm.scrollHeight + 'px',
+        height: _vm.virtualScrollHeight + 'px',
         width: '100%'
       },
       attrs: {