bk-magic-vue 2.4.6 → 2.4.7

package/lib/button.js

@@ -5,105 +5,80 @@
 }(this, function (exports) { 'use strict';
 
   var script = {
-    name: 'bk-button',
+    name: 'bk-spin',
     props: {
       theme: {
         type: String,
-        default: 'default',
+        default: 'primary',
         validator: function validator(value) {
-          if (['default', 'primary', 'warning', 'success', 'danger'].indexOf(value) < 0) {
+          if (!['primary', 'warning', 'success', 'danger', 'info'].includes(value)) {
             console.error("theme property is not valid: '".concat(value, "'"));
             return false;
           }
           return true;
         }
       },
-      hoverTheme: {
-        type: String,
-        default: '',
-        validator: function validator(value) {
-          if (['', 'primary', 'warning', 'success', 'danger'].indexOf(value) < 0) {
-            console.error("hoverTheme property is not valid: '".concat(value, "'"));
-            return false;
-          }
-          return true;
-        }
-      },
       size: {
         type: String,
-        default: 'normal',
+        default: 'small',
         validator: function validator(value) {
-          if (['small', 'normal', 'large'].indexOf(value) < 0) {
+          if (!['large', 'normal', 'small', 'mini'].includes(value)) {
             console.error("size property is not valid: '".concat(value, "'"));
             return false;
           }
           return true;
         }
       },
-      title: {
+      icon: {
         type: String,
         default: ''
       },
-      icon: String,
-      iconRight: String,
-      disabled: Boolean,
-      loading: Boolean,
-      outline: Boolean,
-      text: Boolean,
-      nativeType: {
-        type: String,
-        default: 'button'
-      },
       extCls: {
         type: String,
         default: ''
+      },
+      placement: {
+        type: String,
+        default: 'bottom',
+        validator: function validator(value) {
+          if (!['bottom', 'right'].includes(value)) {
+            console.error("placement property is not valid: '".concat(value, "'"));
+            return false;
+          }
+          return true;
+        }
+      },
+      spinning: {
+        type: Boolean,
+        default: true
       }
     },
     data: function data() {
-      return {
-        showSlot: true
-      };
+      return {};
     },
     computed: {
-      iconType: function iconType() {
-        var icon = this.icon || '';
-        if (icon) {
-          if (icon.indexOf('icon') === 0) {
-            icon = icon.replace(/^(icon-)/, '');
-          }
-        }
-        return icon;
+      dotClass: function dotClass() {
+        var dotClass = ["bk-spin-rotation", "bk-spin-rotation-".concat(this.size), "bk-spin-rotation-".concat(this.theme)];
+        !this.spinning && dotClass.push("bk-spin-rotation-".concat(this.theme, "-wait"));
+        this.placement === 'right' && dotClass.push("bk-spin-rotation-flex");
+        this.placement === 'bottom' && dotClass.push("bk-spin-rotation-margin");
+        return dotClass;
       },
-      iconRightType: function iconRightType() {
-        var iconRight = this.iconRight || '';
-        if (iconRight) {
-          if (iconRight.indexOf('icon') === 0) {
-            iconRight = iconRight.replace(/^(icon-)/, '');
-          }
-        }
-        return iconRight;
+      slotTypeClass: function slotTypeClass() {
+        var slotType = ["rotate"];
+        this.$slots.default && this.placement === 'right' && slotType.push("slots-".concat(this.placement, "-rotate"));
+        return slotType;
       },
-      themeType: function themeType() {
-        if (this.text) {
-          if (this.theme === 'default') {
-            return 'primary';
-          }
-        }
-        return this.theme;
+      iconClass: function iconClass() {
+        var iconClass = ["bk-spin-icon", "bk-spin-icon-".concat(this.size), "bk-spin-icon-".concat(this.theme)];
+        !this.spinning && iconClass.push("bk-spin-icon-wait");
+        this.placement === 'right' && iconClass.push("bk-display-flex");
+        return iconClass;
       },
-      buttonCls: function buttonCls() {
-        return ["bk-".concat(this.themeType), "bk-button-".concat(this.size), this.hoverTheme ? "bk-button-hover bk-".concat(this.hoverTheme) : this.text ? 'bk-button-text' : 'bk-button', this.disabled ? 'is-disabled' : '', this.loading ? 'is-loading' : '', this.outline ? 'is-outline' : '', !this.showSlot ? 'no-slot' : ''];
-      }
-    },
-    mounted: function mounted() {
-      this.showSlot = this.$slots.default !== undefined;
-    },
-    methods: {
-      handleClick: function handleClick(e) {
-        if (!this.disabled && !this.loading) {
-          this.$emit('click', e);
-          this.$el.blur();
-        }
+      slotClass: function slotClass() {
+        var slotClass = ["bk-spin-title", "bk-spin-title-".concat(this.placement)];
+        this.placement === 'right' && slotClass.push("bk-spin-title-".concat(this.size), "bk-display-flex");
+        return slotClass;
       }
     }
   };
@@ -178,39 +153,49 @@
 
     var _c = _vm._self._c || _h;
 
-    return _c('button', _vm._b({
-      class: [_vm.buttonCls, _vm.extCls],
+    return _c('transition', {
       attrs: {
-        "title": _vm.title,
-        "disabled": _vm.disabled,
-        "type": _vm.nativeType
-      },
-      on: {
-        "click": _vm.handleClick
+        "name": "fade"
       }
-    }, 'button', _vm.$attrs, false), [_vm.loading ? _c('div', {
-      staticClass: "bk-button-loading"
     }, [_c('div', {
-      staticClass: "bounce1"
+      class: ['bk-spin', _vm.extCls]
+    }, [_c('div', {
+      style: {
+        display: _vm.placement === 'right' ? 'flex' : ''
+      }
+    }, [!_vm.icon ? _c('div', {
+      class: [_vm.dotClass]
+    }, [_c('div', {
+      staticClass: "rotate1",
+      class: _vm.slotTypeClass
     }), _c('div', {
-      staticClass: "bounce2"
+      staticClass: "rotate2",
+      class: _vm.slotTypeClass
     }), _c('div', {
-      staticClass: "bounce3"
+      staticClass: "rotate3",
+      class: _vm.slotTypeClass
     }), _c('div', {
-      staticClass: "bounce4"
-    })]) : _vm._e(), _c('div', {
-      class: _vm.loading ? 'bk-loading-wrapper' : ''
-    }, [_vm.iconType ? _c('i', {
-      staticClass: "bk-icon left-icon",
-      class: ['icon-' + _vm.iconType, _vm.iconType === 'loading' ? 'bk-button-icon-loading' : '']
-    }, [_vm.iconType === 'loading' ? [_c('span', {
-      staticClass: "loading"
-    })] : _vm._e()], 2) : _vm._e(), _c('span', [_vm._t("default")], 2), _vm.iconRightType ? _c('i', {
-      staticClass: "bk-icon right-icon",
-      class: ['icon-' + _vm.iconRightType, _vm.iconRightType === 'loading' ? 'bk-button-icon-loading' : '']
-    }, [_vm.iconRightType === 'loading' ? [_c('span', {
-      staticClass: "loading"
-    })] : _vm._e()], 2) : _vm._e()])]);
+      staticClass: "rotate4",
+      class: _vm.slotTypeClass
+    }), _c('div', {
+      staticClass: "rotate5",
+      class: _vm.slotTypeClass
+    }), _c('div', {
+      staticClass: "rotate6",
+      class: _vm.slotTypeClass
+    }), _c('div', {
+      staticClass: "rotate7",
+      class: _vm.slotTypeClass
+    }), _c('div', {
+      staticClass: "rotate8",
+      class: _vm.slotTypeClass
+    })]) : _vm._e(), _vm.icon ? _c('div', {
+      class: [_vm.iconClass]
+    }, [_c('i', {
+      class: ['bk-icon', 'icon-' + _vm.icon]
+    })]) : _vm._e(), _vm.$slots.default ? _c('div', {
+      class: [_vm.slotClass]
+    }, [_vm._t("default")], 2) : _vm._e()])])]);
   };
 
   var __vue_staticRenderFns__ = [];
@@ -544,7 +529,191 @@
 
   setInstaller(__vue_component__);
 
-  exports.default = __vue_component__;
+  var script$1 = {
+    name: 'bk-button',
+    components: {
+      BkSpin: __vue_component__
+    },
+    props: {
+      theme: {
+        type: String,
+        default: 'default',
+        validator: function validator(value) {
+          if (['default', 'primary', 'warning', 'success', 'danger'].indexOf(value) < 0) {
+            console.error("theme property is not valid: '".concat(value, "'"));
+            return false;
+          }
+          return true;
+        }
+      },
+      hoverTheme: {
+        type: String,
+        default: '',
+        validator: function validator(value) {
+          if (['', 'primary', 'warning', 'success', 'danger'].indexOf(value) < 0) {
+            console.error("hoverTheme property is not valid: '".concat(value, "'"));
+            return false;
+          }
+          return true;
+        }
+      },
+      size: {
+        type: String,
+        default: 'normal',
+        validator: function validator(value) {
+          if (['small', 'normal', 'large'].indexOf(value) < 0) {
+            console.error("size property is not valid: '".concat(value, "'"));
+            return false;
+          }
+          return true;
+        }
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      icon: String,
+      iconRight: String,
+      disabled: Boolean,
+      loading: Boolean,
+      outline: Boolean,
+      text: Boolean,
+      nativeType: {
+        type: String,
+        default: 'button'
+      },
+      extCls: {
+        type: String,
+        default: ''
+      }
+    },
+    data: function data() {
+      return {
+        showSlot: true
+      };
+    },
+    computed: {
+      iconType: function iconType() {
+        var icon = this.icon || '';
+        if (icon) {
+          if (icon.indexOf('icon') === 0) {
+            icon = icon.replace(/^(icon-)/, '');
+          }
+        }
+        return icon;
+      },
+      iconRightType: function iconRightType() {
+        var iconRight = this.iconRight || '';
+        if (iconRight) {
+          if (iconRight.indexOf('icon') === 0) {
+            iconRight = iconRight.replace(/^(icon-)/, '');
+          }
+        }
+        return iconRight;
+      },
+      themeType: function themeType() {
+        if (this.text) {
+          if (this.theme === 'default') {
+            return 'primary';
+          }
+        }
+        return this.theme;
+      },
+      buttonCls: function buttonCls() {
+        return ["bk-".concat(this.themeType), "bk-button-".concat(this.size), this.hoverTheme ? "bk-button-hover bk-".concat(this.hoverTheme) : this.text ? 'bk-button-text' : 'bk-button', this.disabled ? 'is-disabled' : '', this.loading ? 'is-loading' : '', this.outline ? 'is-outline' : '', !this.showSlot ? 'no-slot' : ''];
+      }
+    },
+    mounted: function mounted() {
+      this.showSlot = this.$slots.default !== undefined;
+    },
+    methods: {
+      handleClick: function handleClick(e) {
+        if (!this.disabled && !this.loading) {
+          this.$emit('click', e);
+          this.$el.blur();
+        }
+      }
+    }
+  };
+
+  /* script */
+  var __vue_script__$1 = script$1;
+  /* template */
+
+  var __vue_render__$1 = function __vue_render__() {
+    var _vm = this;
+
+    var _h = _vm.$createElement;
+
+    var _c = _vm._self._c || _h;
+
+    return _c('button', _vm._b({
+      class: [_vm.buttonCls, _vm.extCls],
+      attrs: {
+        "title": _vm.title,
+        "disabled": _vm.disabled,
+        "type": _vm.nativeType
+      },
+      on: {
+        "click": _vm.handleClick
+      }
+    }, 'button', _vm.$attrs, false), [_vm.loading ? _c('div', {
+      staticClass: "bk-button-loading"
+    }, [!_vm.text ? [_c('div', {
+      staticClass: "bounce bounce1"
+    }), _c('div', {
+      staticClass: "bounce bounce2"
+    }), _c('div', {
+      staticClass: "bounce bounce3"
+    }), _c('div', {
+      staticClass: "bounce bounce4"
+    })] : [_c('bk-spin', {
+      attrs: {
+        "size": "mini",
+        "theme": _vm.theme
+      }
+    })]], 2) : _vm._e(), _c('div', {
+      class: _vm.loading ? 'bk-loading-wrapper' : ''
+    }, [_vm.iconType ? _c('i', {
+      staticClass: "bk-icon left-icon",
+      class: ['icon-' + _vm.iconType, _vm.iconType === 'loading' ? 'bk-button-icon-loading' : '']
+    }, [_vm.iconType === 'loading' ? [_c('span', {
+      staticClass: "loading"
+    })] : _vm._e()], 2) : _vm._e(), _c('span', [_vm._t("default")], 2), _vm.iconRightType ? _c('i', {
+      staticClass: "bk-icon right-icon",
+      class: ['icon-' + _vm.iconRightType, _vm.iconRightType === 'loading' ? 'bk-button-icon-loading' : '']
+    }, [_vm.iconRightType === 'loading' ? [_c('span', {
+      staticClass: "loading"
+    })] : _vm._e()], 2) : _vm._e()])]);
+  };
+
+  var __vue_staticRenderFns__$1 = [];
+  /* style */
+
+  var __vue_inject_styles__$1 = undefined;
+  /* scoped */
+
+  var __vue_scope_id__$1 = undefined;
+  /* module identifier */
+
+  var __vue_module_identifier__$1 = undefined;
+  /* functional template */
+
+  var __vue_is_functional_template__$1 = false;
+  /* style inject */
+
+  /* style inject SSR */
+
+  /* style inject shadow dom */
+
+  var __vue_component__$1 = /*#__PURE__*/normalizeComponent_1({
+    render: __vue_render__$1,
+    staticRenderFns: __vue_staticRenderFns__$1
+  }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+
+  setInstaller(__vue_component__$1);
+
+  exports.default = __vue_component__$1;
 
   Object.defineProperty(exports, '__esModule', { value: true });