@king-design/vue 2.1.4 → 2.1.6

package/components/button/group.vdt.js

@@ -4,14 +4,17 @@ 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,6 +21,7 @@ var typeDefs = {
   tabindex: [String, Number],
   ghost: Boolean
 };
+
 var defaults = function defaults() {
   return {
     type: 'default',
@@ -30,66 +31,89 @@ 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,93 +12,115 @@ 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,32 +8,37 @@ 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) {
@@ -50,17 +55,22 @@ 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';
-type TypeStyles = {
+declare type TypeStyles = {
     color: string;
     bgColor: string;
     borderColor: string;
     hoverBorderColor: string;
     ghostColor: string;
 };
-type SizeStyles = {
+declare type SizeStyles = {
     fontSize: string;
     height: string;
     padding: string;

package/components/button/styles.js

@@ -9,39 +9,52 @@ 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: {
@@ -53,15 +66,19 @@ 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) {
@@ -69,38 +86,49 @@ 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];
@@ -108,12 +136,15 @@ 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;
 }, {});
@@ -121,36 +152,45 @@ 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: {
@@ -158,21 +198,25 @@ 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);
@@ -186,8 +230,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
@@ -202,8 +246,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,9 +7,11 @@ 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,21 +3,26 @@ 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,