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

package/dist/bk-magic-vue.css

@@ -13498,6 +13498,10 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             -webkit-animation-direction:normal;
                     animation-direction:normal;
         }
+.bk-spin .bk-spin-rotation.bk-spin-rotation-default .rotate{
+                -webkit-animation-name:fadeDefault;
+                        animation-name:fadeDefault;
+            }
 .bk-spin .bk-spin-rotation.bk-spin-rotation-primary .rotate{
                 -webkit-animation-name:fadePrimary;
                         animation-name:fadePrimary;
@@ -13518,6 +13522,9 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
                 -webkit-animation-name:fadeInfo;
                         animation-name:fadeInfo;
             }
+.bk-spin .bk-spin-rotation.bk-spin-rotation-default-wait .rotate{
+                background-color:#c4c6cc;
+            }
 .bk-spin .bk-spin-rotation.bk-spin-rotation-primary-wait .rotate{
                 background-color:#3c96ff;
             }
@@ -13642,19 +13649,22 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
         }
 .bk-spin .bk-spin-icon-wait{
         -webkit-animation:none;
-                animation:none
+                animation:none;
+    }
+.bk-spin .bk-spin-icon-default{
+        color:#c4c6cc;
     }
 .bk-spin .bk-spin-icon-primary{
-        color:#3c96ff
+        color:#3c96ff;
     }
 .bk-spin .bk-spin-icon-success{
-        color:#2dcb56
+        color:#2dcb56;
     }
 .bk-spin .bk-spin-icon-warning{
-        color:#ffb848
+        color:#ffb848;
     }
 .bk-spin .bk-spin-icon-danger{
-        color:#ff5656
+        color:#ff5656;
     }
 .bk-spin .bk-spin-icon-info{
     	color:#979ba5;
@@ -13706,6 +13716,24 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             -ms-flex-align:center;
                 align-items:center;
     }
+@-webkit-keyframes fadeDefault{
+    0%{
+        background-color:#c4c6cc;
+    }
+
+    100%{
+        background-color:none;
+    }
+}
+@keyframes fadeDefault{
+    0%{
+        background-color:#c4c6cc;
+    }
+
+    100%{
+        background-color:none;
+    }
+}
 @keyframes fadePrimary{
     0%{
         background-color:#3c96ff;

package/dist/bk-magic-vue.js

@@ -2041,7 +2041,7 @@
         type: String,
         default: 'primary',
         validator: function validator(value) {
-          if (!['primary', 'warning', 'success', 'danger', 'info'].includes(value)) {
+          if (!['default', 'primary', 'warning', 'success', 'danger', 'info'].includes(value)) {
             console.error("theme property is not valid: '".concat(value, "'"));
             return false;
           }
@@ -12206,7 +12206,8 @@
         "disabled-date": _vm.disabledDate,
         "range-state": _vm.rangeState,
         "value": _vm.preSelecting.left ? [_vm.dates[0]] : _vm.dates,
-        "focused-date": _vm.focusedDate
+        "focused-date": _vm.focusedDate,
+        "cell-class": _vm.cellClass
       },
       on: {
         "change-range": _vm.handleChangeRange,
@@ -13221,7 +13222,6 @@
       if (this.escClose) {
         addEvent(document, 'keydown', this.escCloseHandler);
       }
-      console.error(this);
     },
     beforeDestroy: function beforeDestroy() {
       if (this.escClose) {
@@ -48326,6 +48326,21 @@
 
   setInstaller(__vue_component__$1e);
 
+  var getElementSize = function getElementSize(node) {
+    if (node === undefined) {
+      return {
+        height: 0,
+        width: 0
+      };
+    }
+    var computedStyle = getComputedStyle(node);
+    var width = node.clientWidth - _parseFloat$2(computedStyle.paddingTop) - _parseFloat$2(computedStyle.paddingBottom);
+    var height = node.clientHeight - _parseFloat$2(computedStyle.paddingLeft) - _parseFloat$2(computedStyle.paddingRight);
+    return {
+      height: height,
+      width: width
+    };
+  };
   var script$1e = {
     name: 'bk-swiper',
     props: {
@@ -48364,7 +48379,6 @@
     },
     data: function data() {
       return {
-        swiperMainWith: 0,
         currentIndex: 1,
         isStartMove: false,
         isTransition: false,
@@ -48372,7 +48386,9 @@
         mouseDistance: 0,
         loopId: '',
         isClick: false,
-        realWidth: 0
+        realWidth: 0,
+        realHeight: 0,
+        resizeObserver: {}
       };
     },
     computed: {
@@ -48384,6 +48400,9 @@
         var last = this.sourceList.slice(-1);
         return [].concat(_toConsumableArray(last), _toConsumableArray(this.sourceList), [first]);
       },
+      swiperMainWith: function swiperMainWith() {
+        return this.realWidth * this.dataList.length;
+      },
       imageTransfer: function imageTransfer() {
         var indexMove = this.realWidth * this.currentIndex;
         var imageMove = indexMove - this.mouseDistance;
@@ -48398,38 +48417,11 @@
         },
         immediate: true
       },
-      height: function height(val) {
-        var ele = this.$refs.swiper || {
-          style: {
-            width: 0,
-            height: 0
-          },
-          offsetWidth: 0
-        };
-        if (+val > 0) ele.style.height = val + 'px';
-      },
-      width: function width(val) {
-        var ele = this.$refs.swiper || {
-          style: {
-            width: 0,
-            height: 0
-          },
-          offsetWidth: 0
-        };
-        this.realWidth = +val > 0 ? +val : ele.offsetWidth;
-        ele.style.width = this.realWidth + 'px';
-      },
-      list: function list() {
-        var _this = this;
-        this.$nextTick(function () {
-          _this.calcSize();
-        });
+      height: function height() {
+        this.calcSize();
       },
-      pics: function pics() {
-        var _this2 = this;
-        this.$nextTick(function () {
-          _this2.calcSize();
-        });
+      width: function width() {
+        this.calcSize();
       }
     },
     mounted: function mounted() {
@@ -48440,27 +48432,37 @@
     },
     methods: {
       calcSize: function calcSize() {
-        var ele = this.$refs.swiper || {
-          style: {
-            width: 0,
-            height: 0
-          },
-          offsetWidth: 0
-        };
-        if (+this.height > 0) ele.style.height = this.height + 'px';
-        this.realWidth = +this.width > 0 ? +this.width : ele.offsetWidth;
-        ele.style.width = this.realWidth + 'px';
-        this.swiperMainWith = this.realWidth * this.dataList.length;
+        var swiperParentSize = getElementSize(this.$refs.swiper && this.$refs.swiper.parentElement);
+        this.realWidth = +this.width > 0 ? this.width : swiperParentSize.width || 600;
+        this.realHeight = +this.height > 0 ? this.height : swiperParentSize.height || 300;
       },
       initStatus: function initStatus() {
         this.calcSize();
         this.startLoop();
+        this.watchParentSizeChange();
         document.addEventListener('visibilitychange', this.visChange);
       },
       destoryStatus: function destoryStatus() {
         this.endLoop();
+        this.endWatchParentSizeChange();
         document.removeEventListener('visibilitychange', this.visChange);
       },
+      watchParentSizeChange: function watchParentSizeChange() {
+        var _this = this;
+        var parentEle = this.$refs.swiper && this.$refs.swiper.parentElement;
+        if (!parentEle || !window.ResizeObserver) {
+          return;
+        }
+        this.resizeObserver = new ResizeObserver(function () {
+          _this.calcSize();
+        });
+        this.resizeObserver.observe(parentEle);
+      },
+      endWatchParentSizeChange: function endWatchParentSizeChange() {
+        if (this.resizeObserver && this.resizeObserver.disconnect) {
+          this.resizeObserver.disconnect();
+        }
+      },
       goToLink: function goToLink(link) {
         if (this.isClick && link) window.open(link, '_blank');
       },
@@ -48519,13 +48521,13 @@
         }
       },
       startLoop: function startLoop() {
-        var _this3 = this;
+        var _this2 = this;
         if (!this.isLoop) return;
         this.endLoop();
         this.loopId = window.setTimeout(function () {
-          _this3.isTransition = true;
-          _this3.changeCurrentIndex(_this3.currentIndex + 1);
-          _this3.startLoop();
+          _this2.isTransition = true;
+          _this2.changeCurrentIndex(_this2.currentIndex + 1);
+          _this2.startLoop();
         }, this.loopTime);
       },
       endLoop: function endLoop() {
@@ -48547,8 +48549,11 @@
 
     return _vm.sourceList.length ? _c('section', {
       ref: "swiper",
-      staticClass: "bk-swiper-home",
-      class: _vm.extCls
+      class: ['bk-swiper-home', _vm.extCls],
+      style: {
+        width: _vm.realWidth + "px",
+        height: _vm.realHeight + "px"
+      }
     }, [_c('hgroup', {
       class: [{
         'bk-transition': _vm.isTransition
@@ -56143,29 +56148,31 @@
           return _this.$emit('resizing', value);
         });
         var handleMouseMove = function handleMouseMove(event) {
-          var delta;
-          switch (placement) {
-            case 'top':
-              delta = event.clientY - _this.state.mouse.clientY;
-              break;
-            case 'right':
-              delta = _this.state.mouse.clientX - event.clientX;
-              break;
-            case 'bottom':
-              delta = _this.state.mouse.clientY - event.clientY;
-              break;
-            case 'left':
-              delta = event.clientX - _this.state.mouse.clientX;
-          }
-          var current = _this.state.aside[_this.computedStyleKey] + delta;
-          var realValue = _this.getRealValue(current) + _this.triggerOffset;
-          var pixel = "".concat(realValue, "px");
-          if (_this.immediate) {
-            aside.style[_this.computedStyleKey] = pixel;
-          } else {
-            resizeProxy.style[placement] = pixel;
+          if (!_this.disabled) {
+            var delta;
+            switch (placement) {
+              case 'top':
+                delta = event.clientY - _this.state.mouse.clientY;
+                break;
+              case 'right':
+                delta = _this.state.mouse.clientX - event.clientX;
+                break;
+              case 'bottom':
+                delta = _this.state.mouse.clientY - event.clientY;
+                break;
+              case 'left':
+                delta = event.clientX - _this.state.mouse.clientX;
+            }
+            var current = _this.state.aside[_this.computedStyleKey] + delta;
+            var realValue = _this.getRealValue(current) + _this.triggerOffset;
+            var pixel = "".concat(realValue, "px");
+            if (_this.immediate) {
+              aside.style[_this.computedStyleKey] = pixel;
+            } else {
+              resizeProxy.style[placement] = pixel;
+            }
+            resizingCallback(realValue);
           }
-          resizingCallback(realValue);
         };
         var handleMouseUp = function handleMouseUp(event) {
           resizingCallback.cancel();