@king-design/vue 2.0.0-beta.0

package/components/breadcrumb/item.d.ts

@@ -0,0 +1,13 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface BreadcrumbItemProps {
+    to?: string;
+}
+export declare class BreadcrumbItem extends Component<BreadcrumbItemProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<BreadcrumbItemProps>>;
+    private router;
+    private onClick;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/item.js

@@ -0,0 +1,52 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component } from 'intact-vue-next';
+import { bind } from '../utils';
+import template from './item.vdt';
+import { isExternalLink } from '../utils';
+import { useRouter } from '../../hooks/useRouter';
+var typeDefs = {
+  to: String
+};
+export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BreadcrumbItem, _Component);
+
+  function BreadcrumbItem() {
+    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.router = useRouter();
+    return _this;
+  }
+
+  var _proto = BreadcrumbItem.prototype;
+
+  _proto.onClick = function onClick() {
+    var to = this.get('to');
+
+    if (to) {
+      var router = this.router.value;
+
+      if (router && !isExternalLink(to)) {
+        router.push(to);
+      } else {
+        window.location.href = to;
+      }
+    }
+  };
+
+  return BreadcrumbItem;
+}(Component);
+BreadcrumbItem.template = template;
+BreadcrumbItem.typeDefs = typeDefs;
+
+__decorate([bind], BreadcrumbItem.prototype, "onClick", null);
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/item.vdt.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      to = _this$get.to,
+      children = _this$get.children,
+      className = _this$get.className;
+
+  var classNameObj = (_classNameObj = {
+    'k-breadcrumb-item': true
+  }, _classNameObj[className] = className, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), to ? _$ce(2, 'a', children, 0, 'k-breadcrumb-link', {
+    'ev-click': this.onClick
+  }) : _$ce(2, 'span', children, 0, 'k-breadcrumb-link'));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export default function makeStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/breadcrumb/styles.js

@@ -0,0 +1,30 @@
+import { css } from '@emotion/css';
+import { deepDefaults } from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import '../../styles/global';
+var defaults = {
+  fontSize: '14px',
+
+  get color() {
+    return theme.color.lightBlack;
+  },
+
+  get hoverColor() {
+    return theme.color.primary;
+  },
+
+  gap: '6px',
+  activeFontWeight: 'normal',
+  activeColor: "#262626"
+};
+var breadcrumb;
+setDefault(function () {
+  breadcrumb = deepDefaults(theme, {
+    breadcrumb: defaults
+  }).breadcrumb;
+});
+export default function makeStyles() {
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";.k-breadcrumb-item{display:inline-block;&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link:hover,.k-breadcrumb-link a:hover{color:", breadcrumb.hoverColor, ";}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/button/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const BUTTON_GROUP = "ButtonGroup";
+
+
+export {normalize} from 'intact-vue-next';

package/components/button/constants.js

@@ -0,0 +1,3 @@
+export var BUTTON_GROUP = 'ButtonGroup';
+
+export {normalize} from 'intact-vue-next';

package/components/button/dynamicButton.d.ts

@@ -0,0 +1,11 @@
+import { ComponentFunction, ComponentConstructor } from 'intact-vue-next';
+export declare type DynamicButtonProps = {
+    href?: string;
+    htmlType?: string;
+    tagName: string | ComponentConstructor;
+    type?: string;
+};
+export declare const DynamicButton: ComponentFunction<DynamicButtonProps>;
+
+
+export {normalize} from 'intact-vue-next';

package/components/button/dynamicButton.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["tagName", "htmlType"];
+import { createVNode as h } from 'intact-vue-next';
+export var DynamicButton = function DynamicButton(_ref) {
+  var tagName = _ref.tagName,
+      htmlType = _ref.htmlType,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  if (props.href && tagName === 'button') {
+    tagName = 'a';
+  }
+
+  if (tagName === 'button') {
+    // set type of html button
+    props = _extends({}, props, {
+      type: htmlType
+    });
+  }
+
+  return h(tagName, props);
+};
+
+export {normalize} from 'intact-vue-next';

package/components/button/group.d.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface ButtonGroupProps {
+    vertical?: boolean;
+    value?: any;
+    checkType?: 'none' | 'radio' | 'checkbox';
+    fluid?: boolean;
+}
+export declare class ButtonGroup extends Component<ButtonGroupProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<ButtonGroupProps>>;
+    static defaults: () => Partial<ButtonGroupProps>;
+    init(): void;
+    setValue(v: any): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/button/group.js

@@ -0,0 +1,51 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component, provide } from 'intact-vue-next';
+import template from './group.vdt';
+import { toggleArray } from '../utils';
+import { BUTTON_GROUP } from './constants';
+var typeDefs = {
+  vertical: Boolean,
+  value: null,
+  fluid: Boolean,
+  checkType: ['none', 'radio', 'checkbox']
+};
+
+var defaults = function defaults() {
+  return {
+    checkType: 'none'
+  };
+};
+
+export var ButtonGroup = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ButtonGroup, _Component);
+
+  function ButtonGroup() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = ButtonGroup.prototype;
+
+  _proto.init = function init() {
+    provide(BUTTON_GROUP, this);
+  };
+
+  _proto.setValue = function setValue(v) {
+    var _this$get = this.get(),
+        checkType = _this$get.checkType,
+        value = _this$get.value;
+
+    if (checkType === 'radio') {
+      this.set('value', v);
+    } else if (checkType === 'checkbox') {
+      value = toggleArray(value, v);
+      this.set('value', value);
+    }
+  };
+
+  return ButtonGroup;
+}(Component);
+ButtonGroup.template = template;
+ButtonGroup.typeDefs = typeDefs;
+ButtonGroup.defaults = defaults;
+
+export {normalize} from 'intact-vue-next';

package/components/button/group.vdt.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact-vue-next';
+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;
+
+  var classNameObj = (_classNameObj = {
+    'k-btns': true,
+    'k-vertical': vertical,
+    'k-fluid': fluid
+  }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), children);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/button/index.d.ts

@@ -0,0 +1,51 @@
+import { Component, ComponentConstructor, TypeDefs } from 'intact-vue-next';
+import { Sizes, Colors } from '../types';
+export * from './group';
+interface ButtonHTMLAttributes {
+    autofocus?: boolean;
+    form?: string;
+    formaction?: string;
+    formenctype?: string;
+    formmethod?: string;
+    formnovalidate?: boolean;
+    formtarget?: string;
+    href?: string;
+    target?: string;
+    download?: string;
+}
+export interface ButtonProps extends ButtonHTMLAttributes {
+    type?: Colors | 'none' | 'secondary' | 'link';
+    size?: Sizes;
+    icon?: boolean;
+    circle?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    fluid?: boolean;
+    htmlType?: 'submit' | 'reset' | 'button';
+    tagName?: string | ComponentConstructor;
+    value?: any;
+    name?: string;
+    tabindex?: string | number;
+    ghost?: boolean;
+}
+export interface ButtonEvents {
+    click: [MouseEvent];
+    mouseup: [MouseEvent];
+}
+export declare class Button extends Component<ButtonProps, ButtonEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<Omit<ButtonProps, keyof ButtonHTMLAttributes>>>;
+    static defaults: () => Partial<ButtonProps>;
+    private buttonGroup;
+    private elementRef;
+    showLoading(): void;
+    hideLoading(): void;
+    disable(): void;
+    enable(): void;
+    private isChecked;
+    private onClick;
+    private onMouseUp;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/button/index.js

@@ -0,0 +1,121 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject, createRef } from 'intact-vue-next';
+import template from './index.vdt';
+import { bind } from '../utils';
+import { BUTTON_GROUP } from './constants';
+export * from './group';
+var typeDefs = {
+  type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+  size: ['large', 'default', 'small', 'mini'],
+  icon: Boolean,
+  circle: Boolean,
+  loading: Boolean,
+  disabled: Boolean,
+  fluid: Boolean,
+  htmlType: String,
+  tagName: [String, Function],
+  value: null,
+  name: String,
+  tabindex: [String, Number],
+  ghost: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    type: 'default',
+    size: 'default',
+    htmlType: 'button',
+    tagName: 'button',
+    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;
+
+    var _this$get = this.get(),
+        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);
+
+export {normalize} from 'intact-vue-next';

package/components/button/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-vue-next';

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-vue-next';
+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-vue-next';

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-vue-next';
+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-vue-next';