@king-design/react 2.0.0-beta.0

package/components/button/index.spec.js

@@ -0,0 +1,129 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { Button } from './';
+import { dispatchEvent, mount, unmount, wait } from '../../test/utils';
+import GroupDemo from '~/components/button/demos/group';
+import { findDomFromVNode } from 'intact-react';
+import { button as buttonStyles } from './styles';
+import tinycolor from 'tinycolor2';
+describe('Button', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  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();
+        }
+      }
+    }, _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();
+        }
+      }
+    }, _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();
+        }
+      }
+    }, _callee3);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/button/index.vdt.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce } from 'intact-react';
+import { getRestProps } from '../utils';
+import { Icon } from '../icon';
+import { makeButtonStyles } from './styles';
+import { DynamicButton } from './dynamicButton';
+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;
+
+  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
+
+  if (!icon && Array.isArray(children)) {
+    children.forEach(function (child, index) {
+      if (child) {
+        // whether the icon is on the left side or right
+        if (index === 0) {
+          if (isIcon(child)) {
+            iconSide = 'left';
+          }
+        } else if (index === children.length - 1) {
+          if (isIcon(child)) {
+            iconSide = 'right';
+          }
+        }
+      }
+    });
+  }
+
+  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]*/
+    ,
+    'key': 'k-loading',
+    'rotate': true
+  }, 'k-loading');
+
+  var buttonGroup = this.buttonGroup;
+  var checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
+  var isCheckType = checkType !== 'none';
+  return _$cc(DynamicButton, _extends({
+    'className': _$cn(classNameObj),
+    'tagName': tagName
+  }, getRestProps(this), {
+    'ref': this.elementRef,
+    'tabindex': disabled || loading ? '-1' : tabindex,
+    'ev-click': this.onClick,
+    'ev-mouseup': this.onMouseUp,
+    'htmlType': htmlType,
+    'name': isCheckType ? null : name,
+    'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
+      'type': checkType,
+      'name': name,
+      'checked': checked,
+      'tabindex': '-1'
+    }) : undefined]
+  }), null, this.elementRef);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/button/styles.d.ts

@@ -0,0 +1,11 @@
+import '../../styles/global';
+export declare const types: readonly ["primary", "warning", "danger", "active", "success"];
+declare let button: any;
+export { button };
+export declare function makeButtonStyles({ iconSide }: {
+    iconSide?: string;
+}): string;
+export declare function makeButtonGroupStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/button/styles.js

@@ -0,0 +1,257 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css, cx } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, palette, getLeft, darken } from '../../styles/utils';
+import '../../styles/global';
+export var types = ['primary', 'warning', 'danger', 'active', 'success'];
+var sizes = ['large', 'small', 'mini'];
+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: {
+    gap: '5px',
+    fontSize: '16px'
+  },
+  // disabled
+  disabled: {
+    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) {
+  if (type !== 'active') {
+    // 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];
+  memo[size] = {
+    get fontSize() {
+      return theme[size].fontSize;
+    },
+
+    get height() {
+      return theme[size].height;
+    },
+
+    get padding() {
+      return "0 " + theme[size].padding;
+    }
+
+  };
+  return memo;
+}, {});
+var defaults = deepDefaults({
+  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;
+    }
+
+  },
+  // ButtonGroup
+  group: {
+    primary: {
+      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);
+var button;
+setDefault(function () {
+  button = deepDefaults(theme, {
+    button: defaults
+  }).button;
+});
+export { button };
+export function makeButtonStyles(_ref) {
+  var iconSide = _ref.iconSide;
+  var _button = button,
+      secondary = _button.secondary,
+      link = _button.link;
+  return cx(
+  /*#__PURE__*/
+  // extract static styles to individual css method for performance
+  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", theme.transition, ";line-height:", button.lineHeight, ";&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
+    var typeStyles = button[type];
+    return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{&,&:hover{border:none;background:transparent;}&.k-active{color:", theme.color.primary, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var styles = button[size];
+    return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
+  }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {
+    var styles = button[type];
+    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;
+    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__*/
+  // dynamic styles
+  css(".k-icon{", iconSide === 'right' ? "margin-left: " + button.icon.gap + ";" : "margin-right: " + button.icon.gap + ";", ";}", !iconSide && "\n                &.k-loading {\n                    &:not(.k-btn-icon) {\n                        padding-left: calc(" + getLeft(button.padding) + " + 1em);\n                        .k-icon-loading {\n                            margin-left: -1em;\n                        }\n                        " + _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.k-", size, "{padding-left:calc(", getLeft(button[size].padding), " + 1em);}");
+  }) + "\n                    }\n                }\n            ", ";"));
+}
+export function makeButtonGroupStyles() {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
+    if (type === 'active') return;
+    var borderColor = button.group[type].borderColor;
+    return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{>.k-btn{display:block;", _mapInstanceProperty(types).call(types, function (type) {
+    if (type === 'active') return;
+    var borderColor = button.group[type].borderColor;
+    return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
+  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}");
+}
+
+export {normalize} from 'intact-react';

package/components/card/column.d.ts

@@ -0,0 +1,12 @@
+import { Component, TypeDefs } from 'intact-react';
+export interface CardColumnProps {
+    width?: string;
+    center?: boolean;
+}
+export declare class CardColumn extends Component<CardColumnProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CardColumnProps>>;
+}
+
+
+export {normalize} from 'intact-react';

package/components/card/column.js

@@ -0,0 +1,20 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-react';
+import template from './column.vdt';
+var typeDefs = {
+  width: String,
+  center: Boolean
+};
+export var CardColumn = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(CardColumn, _Component);
+
+  function CardColumn() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return CardColumn;
+}(Component);
+CardColumn.template = template;
+CardColumn.typeDefs = typeDefs;
+
+export {normalize} from 'intact-react';

package/components/card/column.vdt.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact-react';
+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;
+
+  var _style = style;
+
+  if (width) {
+    _style = addStyle(style, {
+      width: width
+    });
+  }
+
+  var classNameObj = (_classNameObj = {
+    'k-card-column': true,
+    'k-fluid': !width,
+    'k-center': center
+  }, _classNameObj[className] = className, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj),
+    'style': _style
+  }, getRestProps(this)), children);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/card/index.d.ts

@@ -0,0 +1,21 @@
+import { Component, VNode, TypeDefs } from 'intact-react';
+export * from './column';
+export interface CardProps {
+    title?: string | VNode;
+    type?: 'shadow' | 'border' | 'none';
+}
+export interface CardEvents {
+}
+export interface CardBlocks {
+    header: null;
+    title: null;
+    extra: null;
+}
+export declare class Card extends Component<CardProps, CardEvents, CardBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CardProps>>;
+    static defaults: () => Partial<CardProps>;
+}
+
+
+export {normalize} from 'intact-react';

package/components/card/index.js

@@ -0,0 +1,29 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component, VNode } from 'intact-react';
+import template from './index.vdt';
+export * from './column';
+var typeDefs = {
+  title: [String, VNode],
+  type: ['shadow', 'border', 'none']
+};
+
+var defaults = function defaults() {
+  return {
+    type: 'shadow'
+  };
+};
+
+export var Card = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Card, _Component);
+
+  function Card() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Card;
+}(Component);
+Card.template = template;
+Card.typeDefs = typeDefs;
+Card.defaults = defaults;
+
+export {normalize} from 'intact-react';