@king-design/vue 2.1.3 → 2.1.4

package/components/button/group.vdt.js

@@ -4,17 +4,14 @@ import { getRestProps } from '../utils';
 import { makeButtonGroupStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      vertical = _this$get.vertical,
-      children = _this$get.children,
-      fluid = _this$get.fluid;
-
+    className = _this$get.className,
+    vertical = _this$get.vertical,
+    children = _this$get.children,
+    fluid = _this$get.fluid;
   var classNameObj = (_classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,

package/components/button/index.js

@@ -21,7 +21,6 @@ var typeDefs = {
   tabindex: [String, Number],
   ghost: Boolean
 };
-
 var defaults = function defaults() {
   return {
     type: 'default',
@@ -31,89 +30,66 @@ var defaults = function defaults() {
     tabindex: '0'
   };
 };
-
 export var Button = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Button, _Component);
-
   function Button() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.buttonGroup = inject(BUTTON_GROUP, null);
     _this.elementRef = createRef();
     return _this;
   }
-
   var _proto = Button.prototype;
-
   _proto.showLoading = function showLoading() {
     this.set('loading', true);
   };
-
   _proto.hideLoading = function hideLoading() {
     this.set('loading', false);
   };
-
   _proto.disable = function disable() {
     this.set('disabled', true);
   };
-
   _proto.enable = function enable() {
     this.set('disabled', false);
   };
-
   _proto.isChecked = function isChecked() {
     var group = this.buttonGroup;
     if (!group) return false;
-
     var _group$get = group.get(),
-        checkType = _group$get.checkType,
-        groupValue = _group$get.value;
-
+      checkType = _group$get.checkType,
+      groupValue = _group$get.value;
     var _this$get = this.get(),
-        value = _this$get.value;
-
+      value = _this$get.value;
     return value !== undefined ? checkType === 'radio' ? value === groupValue : checkType === 'checkbox' ? Array.isArray(groupValue) && !!~groupValue.indexOf(value) : false : false;
   };
-
   _proto.onClick = function onClick(e) {
     if (this.get('disabled') || this.get('loading')) {
       e.preventDefault();
       return;
     }
-
     var buttonGroup = this.buttonGroup;
-
     if (buttonGroup) {
       var value = this.get('value');
-
       if (value !== undefined) {
         buttonGroup.setValue(value);
       }
     }
-
     e.$component = this;
     this.trigger('click', e);
   };
-
   _proto.onMouseUp = function onMouseUp(e) {
     // when click, blur it to remove the focus style
     this.elementRef.value.blur();
     this.trigger('mouseup', e);
   };
-
   return Button;
 }(Component);
 Button.template = template;
 Button.typeDefs = typeDefs;
 Button.defaults = defaults;
-
 __decorate([bind], Button.prototype, "onClick", null);
-
 __decorate([bind], Button.prototype, "onMouseUp", null);

package/components/button/index.spec.js

@@ -12,115 +12,93 @@ describe('Button', function () {
   });
   it('should change value when click radio buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, radioShanggaiElement, checkboxShanghaiElement;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _mount = mount(GroupDemo), instance = _mount[0];
-            radioShanggaiElement = findDomFromVNode(instance.refs.__radioShanghai.$lastInput, true);
-            dispatchEvent(radioShanggaiElement, 'click');
-            _context.next = 5;
-            return wait();
-
-          case 5:
-            expect(instance.get('city')).to.eql('shanghai');
-            checkboxShanghaiElement = findDomFromVNode(instance.refs.__checkboxShanghai.$lastInput, true);
-            dispatchEvent(checkboxShanghaiElement, 'click');
-            _context.next = 10;
-            return wait();
-
-          case 10:
-            expect(instance.get('cities')).to.eql(['shanghai']);
-            dispatchEvent(checkboxShanghaiElement, 'click');
-            _context.next = 14;
-            return wait();
-
-          case 14:
-            expect(instance.get('cities')).to.eql([]); // should set value correctly, even if the type of value is not an array
-
-            instance.set('cities', '');
-            dispatchEvent(checkboxShanghaiElement, 'click');
-            _context.next = 19;
-            return wait();
-
-          case 19:
-            expect(instance.get('cities')).to.eql(['shanghai']);
-
-          case 20:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _mount = mount(GroupDemo), instance = _mount[0];
+          radioShanggaiElement = findDomFromVNode(instance.refs.__radioShanghai.$lastInput, true);
+          dispatchEvent(radioShanggaiElement, 'click');
+          _context.next = 5;
+          return wait();
+        case 5:
+          expect(instance.get('city')).to.eql('shanghai');
+          checkboxShanghaiElement = findDomFromVNode(instance.refs.__checkboxShanghai.$lastInput, true);
+          dispatchEvent(checkboxShanghaiElement, 'click');
+          _context.next = 10;
+          return wait();
+        case 10:
+          expect(instance.get('cities')).to.eql(['shanghai']);
+          dispatchEvent(checkboxShanghaiElement, 'click');
+          _context.next = 14;
+          return wait();
+        case 14:
+          expect(instance.get('cities')).to.eql([]);
+          // should set value correctly, even if the type of value is not an array
+          instance.set('cities', '');
+          dispatchEvent(checkboxShanghaiElement, 'click');
+          _context.next = 19;
+          return wait();
+        case 19:
+          expect(instance.get('cities')).to.eql(['shanghai']);
+        case 20:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })));
   it('method test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _mount2 = mount(Button), instance = _mount2[0], element = _mount2[1];
-            instance.showLoading();
-            _context2.next = 4;
-            return wait();
-
-          case 4:
-            expect(element.classList.contains('k-loading')).to.be.true;
-            instance.hideLoading();
-            _context2.next = 8;
-            return wait();
-
-          case 8:
-            expect(element.classList.contains('k-loading')).to.be.false;
-            instance.disable();
-            _context2.next = 12;
-            return wait();
-
-          case 12:
-            expect(element.classList.contains('k-disabled')).to.be.true;
-            instance.enable();
-            _context2.next = 16;
-            return wait();
-
-          case 16:
-            expect(element.classList.contains('k-disabled')).to.be.false;
-
-          case 17:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _mount2 = mount(Button), instance = _mount2[0], element = _mount2[1];
+          instance.showLoading();
+          _context2.next = 4;
+          return wait();
+        case 4:
+          expect(element.classList.contains('k-loading')).to.be.true;
+          instance.hideLoading();
+          _context2.next = 8;
+          return wait();
+        case 8:
+          expect(element.classList.contains('k-loading')).to.be.false;
+          instance.disable();
+          _context2.next = 12;
+          return wait();
+        case 12:
+          expect(element.classList.contains('k-disabled')).to.be.true;
+          instance.enable();
+          _context2.next = 16;
+          return wait();
+        case 16:
+          expect(element.classList.contains('k-disabled')).to.be.false;
+        case 17:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
   it('should blur on mouse up', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, element;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            _mount3 = mount(Button), element = _mount3[1];
-            element.focus(); // test color of focus style 
-
-            _context3.next = 4;
-            return wait(500);
-
-          case 4:
-            // has transition
-            expect(tinycolor(getComputedStyle(element).color).toHexString()).to.eql(buttonStyles.hoverColor);
-            dispatchEvent(element, 'mouseup');
-            _context3.next = 8;
-            return wait(500);
-
-          case 8:
-            expect(tinycolor(getComputedStyle(element).color).toHexString()).to.eql(buttonStyles.color);
-
-          case 9:
-          case "end":
-            return _context3.stop();
-        }
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _mount3 = mount(Button), element = _mount3[1];
+          element.focus();
+          // test color of focus style 
+          _context3.next = 4;
+          return wait(500);
+        case 4:
+          // has transition
+          expect(tinycolor(getComputedStyle(element).color).toHexString()).to.eql(buttonStyles.hoverColor);
+          dispatchEvent(element, 'mouseup');
+          _context3.next = 8;
+          return wait(500);
+        case 8:
+          expect(tinycolor(getComputedStyle(element).color).toHexString()).to.eql(buttonStyles.color);
+        case 9:
+        case "end":
+          return _context3.stop();
       }
     }, _callee3);
   })));

package/components/button/index.vdt.js

@@ -8,37 +8,32 @@ import { Wave } from '../wave';
 import { button as theme } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      type = _this$get.type,
-      className = _this$get.className,
-      size = _this$get.size,
-      icon = _this$get.icon,
-      circle = _this$get.circle,
-      ref = _this$get.ref,
-      key = _this$get.key,
-      tabindex = _this$get.tabindex,
-      tagName = _this$get.tagName,
-      htmlType = _this$get.htmlType,
-      fluid = _this$get.fluid,
-      children = _this$get.children,
-      loading = _this$get.loading,
-      disabled = _this$get.disabled,
-      name = _this$get.name,
-      ghost = _this$get.ghost;
-
+    type = _this$get.type,
+    className = _this$get.className,
+    size = _this$get.size,
+    icon = _this$get.icon,
+    circle = _this$get.circle,
+    ref = _this$get.ref,
+    key = _this$get.key,
+    tabindex = _this$get.tabindex,
+    tagName = _this$get.tagName,
+    htmlType = _this$get.htmlType,
+    fluid = _this$get.fluid,
+    children = _this$get.children,
+    loading = _this$get.loading,
+    disabled = _this$get.disabled,
+    name = _this$get.name,
+    ghost = _this$get.ghost;
   var checked = this.isChecked();
-
   var isIcon = function isIcon(child) {
     return child.tag === Icon || child.className && child.className.indexOf('icon') > -1;
   };
-
-  var iconSide; // hack for loading transition of width
-
+  var iconSide;
+  // hack for loading transition of width
   if (!icon && Array.isArray(children)) {
     children.forEach(function (child, index) {
       if (child) {
@@ -55,22 +50,17 @@ export default function ($props, $blocks, $__proto__) {
       }
     });
   }
-
   var classNameObj = (_classNameObj = {
     'k-btn': true
   }, _classNameObj["k-" + type] = type !== 'default', _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-btn-icon'] = icon, _classNameObj[className] = className, _classNameObj['k-circle'] = circle, _classNameObj['k-loading'] = loading, _classNameObj['k-fluid'] = fluid, _classNameObj['k-active'] = checked, _classNameObj['k-disabled'] = disabled || loading, _classNameObj['k-ghost'] = ghost, _classNameObj[makeButtonStyles({
     iconSide: iconSide
   })] = true, _classNameObj);
-
   var loadingIcon = _$cc(Icon, {
     'className': 'ion-load-c k-icon-loading',
-    'size': size
-    /*loadingSizeMap[size]*/
-    ,
+    'size': size /*loadingSizeMap[size]*/,
     'key': 'k-loading',
     'rotate': true
   }, 'k-loading');
-
   var buttonGroup = this.buttonGroup;
   var checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
   var isCheckType = checkType !== 'none';

package/components/button/styles.d.ts

@@ -1,12 +1,12 @@
 import '../../styles/global';
-declare type TypeStyles = {
+type TypeStyles = {
     color: string;
     bgColor: string;
     borderColor: string;
     hoverBorderColor: string;
     ghostColor: string;
 };
-declare type SizeStyles = {
+type SizeStyles = {
     fontSize: string;
     height: string;
     padding: string;

package/components/button/styles.js

@@ -9,52 +9,39 @@ var btnStyles = {
   get color() {
     return theme.color.text;
   },
-
   bgColor: '#fff',
   lineHeight: '1.15',
-
   get padding() {
     return "0 " + theme.default.padding;
   },
-
   get borderColor() {
     return theme.color.border;
   },
-
   get borderRadius() {
     return theme.borderRadius;
   },
-
   get fontSize() {
     return theme.default.fontSize;
   },
-
   get height() {
     return theme.default.height;
   },
-
   get hoverBorderColor() {
     return theme.color.primary;
   },
-
   get hoverColor() {
     return theme.color.primary;
   },
-
   // ghost
   ghost: {
     color: '#fff',
-
     get hoverColor() {
       return palette(theme.color.primary, -1);
     },
-
     borderColor: '#fff',
-
     get hoverBorderColor() {
       return palette(theme.color.primary, -1);
     }
-
   },
   // icon
   icon: {
@@ -66,19 +53,15 @@ var btnStyles = {
     get color() {
       return theme.color.disabled;
     },
-
     get bgColor() {
       return theme.color.disabledBg;
     },
-
     get borderColor() {
       return theme.color.disabledBorder;
     },
-
     get ghostBorderColor() {
       return theme.color.disabled;
     }
-
   }
 };
 var btnTypeStyles = types.reduce(function (memo, type) {
@@ -86,49 +69,38 @@ var btnTypeStyles = types.reduce(function (memo, type) {
     // const color = theme.color;
     memo[type] = {
       color: '#fff',
-
       get bgColor() {
         return theme.color[type];
       },
-
       get borderColor() {
         return theme.color[type];
       },
-
       get hoverBorderColor() {
         return palette(theme.color[type], -1);
       },
-
       get ghostColor() {
         return theme.color[type];
       }
-
     };
   }
-
   return memo;
 }, {});
 var btnActiveStyles = {
   get color() {
     return theme.color.primary;
   },
-
   get bgColor() {
     return palette(theme.color.primary, -4);
   },
-
   get borderColor() {
     return btnTypeStyles.primary.borderColor;
   },
-
   get hoverBorderColor() {
     return btnTypeStyles.primary.hoverBorderColor;
   },
-
   get ghostColor() {
     return btnTypeStyles.primary.ghostColor;
   }
-
 };
 var btnSizeStyles = sizes.reduce(function (memo, size) {
   // const defaultStyle = theme[size];
@@ -136,15 +108,12 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
     get fontSize() {
       return theme[size].fontSize;
     },
-
     get height() {
       return theme[size].height;
     },
-
     get padding() {
       return "0 " + theme[size].padding;
     }
-
   };
   return memo;
 }, {});
@@ -152,45 +121,36 @@ var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
   },
-
   active: btnActiveStyles,
   secondary: {
     get color() {
       return theme.color.primary;
     },
-
     get borderColor() {
       return theme.color.primary;
     },
-
     get hoverBgColor() {
       return palette(theme.color.primary, -4);
     },
-
     get activeBgColor() {
       return palette(theme.color.primary, -3);
     }
-
   },
   link: {
     get color() {
       return theme.color.link;
     },
-
     get hoverColor() {
       return theme.color.linkHover;
     },
-
     get hoverBgColor() {
       return theme.color.hoverBg;
     }
-
   },
   none: {
     get hoverBgColor() {
       return theme.color.bg;
     }
-
   },
   // ButtonGroup
   group: {
@@ -198,25 +158,21 @@ var defaults = deepDefaults({
       get borderColor() {
         return darken(button.primary.borderColor, 3);
       }
-
     },
     warning: {
       get borderColor() {
         return darken(button.warning.borderColor, 3);
       }
-
     },
     danger: {
       get borderColor() {
         return darken(button.danger.borderColor, 3);
       }
-
     },
     success: {
       get borderColor() {
         return darken(button.success.borderColor, 3);
       }
-
     }
   }
 }, btnStyles, btnTypeStyles, btnSizeStyles);
@@ -230,8 +186,8 @@ export { button };
 export function makeButtonStyles(_ref) {
   var iconSide = _ref.iconSide;
   var _button = button,
-      secondary = _button.secondary,
-      link = _button.link;
+    secondary = _button.secondary,
+    link = _button.link;
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
@@ -246,8 +202,8 @@ export function makeButtonStyles(_ref) {
     return /*#__PURE__*/css("&.k-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
   }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.k-icon:not(.k-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.k-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
     var _button$type = button[type],
-        ghostColor = _button$type.ghostColor,
-        borderColor = _button$type.borderColor;
+      ghostColor = _button$type.ghostColor,
+      borderColor = _button$type.borderColor;
     return /*#__PURE__*/css("&.k-", type, "{color:", ghostColor, ";border-color:", borderColor, ";&:hover{color:", palette(ghostColor, -1), ";border-color:", palette(ghostColor, -1), ";}&:active{color:", palette(ghostColor, 1), ";border-color:", palette(ghostColor, 1), ";}}");
   }), "&.k-disabled{&,&:hover{color:", button.disabled.color, ";border-color:", button.disabled.ghostBorderColor, ";background:transparent;}}}"),
   /*#__PURE__*/

package/components/card/column.js

@@ -7,11 +7,9 @@ var typeDefs = {
 };
 export var CardColumn = /*#__PURE__*/function (_Component) {
   _inheritsLoose(CardColumn, _Component);
-
   function CardColumn() {
     return _Component.apply(this, arguments) || this;
   }
-
   return CardColumn;
 }(Component);
 CardColumn.template = template;

package/components/card/column.vdt.js

@@ -3,26 +3,21 @@ import { createVNode as _$cv, className as _$cn } from 'intact-vue-next';
 import { addStyle, getRestProps } from '../utils';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      children = _this$get.children,
-      className = _this$get.className,
-      width = _this$get.width,
-      style = _this$get.style,
-      center = _this$get.center;
-
+    children = _this$get.children,
+    className = _this$get.className,
+    width = _this$get.width,
+    style = _this$get.style,
+    center = _this$get.center;
   var _style = style;
-
   if (width) {
     _style = addStyle(style, {
       width: width
     });
   }
-
   var classNameObj = (_classNameObj = {
     'k-card-column': true,
     'k-fluid': !width,