@king-design/vue 2.0.0-beta.0

package/components/steps/index.d.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export * from './step';
+export interface StepsProps {
+    value?: number;
+    status?: 'normal' | 'error';
+    type?: 'default' | 'line' | 'simple';
+    clickable?: boolean;
+}
+export declare class Steps extends Component<StepsProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<StepsProps>>;
+    static defaults: () => Partial<StepsProps>;
+    private changeIndex;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/steps/index.js

@@ -0,0 +1,49 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+import { Component } from 'intact-vue-next';
+import template from './index.vdt';
+import { bind } from '../utils';
+export * from './step';
+var typeDefs = {
+  value: Number,
+  status: ['normal', 'error'],
+  type: ['default', 'line', 'simple'],
+  clickable: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    value: 0,
+    status: 'normal',
+    type: 'default'
+  };
+};
+
+export var Steps = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Steps, _Component);
+
+  function Steps() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Steps.prototype;
+
+  _proto.changeIndex = function changeIndex(index) {
+    var _this$get = this.get(),
+        value = _this$get.value,
+        clickable = _this$get.clickable;
+
+    if (clickable && value > index) {
+      this.set('value', index);
+    }
+  };
+
+  return Steps;
+}(Component);
+Steps.template = template;
+Steps.typeDefs = typeDefs;
+Steps.defaults = defaults;
+
+__decorate([bind], Steps.prototype, "changeIndex", null);
+
+export {normalize} from 'intact-vue-next';

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

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

package/components/steps/index.spec.js

@@ -0,0 +1,44 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import ClickableDemo from '~/components/steps/demos/clickable';
+import { mount, unmount, wait } from '../../test/utils';
+describe('Steps', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('change step', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, next, _element$querySelecto2, step1, step2;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(ClickableDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-btn'), next = _element$querySelecto[1];
+            next.click();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.innerHTML).to.matchSnapshot();
+            _element$querySelecto2 = element.querySelectorAll('.k-step'), step1 = _element$querySelecto2[0], step2 = _element$querySelecto2[1];
+            step1.click();
+            _context.next = 10;
+            return wait();
+
+          case 10:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('index')).to.eql(0);
+            step2.click();
+            expect(instance.get('index')).to.eql(0);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/steps/index.vdt.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn } from 'intact-vue-next';
+import { getRestProps, eachChildren } from '../utils';
+import { Step } from './step';
+import { makeStepsStyles } from './styles';
+import { context as StepsContext } from './context';
+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,
+      value = _this$get.value,
+      status = _this$get.status,
+      type = _this$get.type,
+      clickable = _this$get.clickable;
+
+  var classNameObj = (_classNameObj = {
+    'k-steps': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + type] = true, _classNameObj['k-clickable'] = clickable, _classNameObj[makeStepsStyles()] = true, _classNameObj);
+  var stepIndex = 0;
+  var steps = [];
+  eachChildren(children, function (vNode) {
+    if (vNode.tag === Step) {
+      vNode.props = _extends({}, vNode.props, {
+        index: stepIndex
+      });
+      steps.push(vNode);
+      stepIndex++;
+    }
+  }); // add width
+
+  var width = 100 / stepIndex + '%';
+  return _$cc(StepsContext.Provider, {
+    'value': {
+      value: value,
+      status: status,
+      width: width,
+      onChange: this.changeIndex
+    },
+    'children': _$cv('div', _extends({
+      'className': _$cn(classNameObj)
+    }, getRestProps(this)), steps)
+  });
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/steps/step.d.ts

@@ -0,0 +1,12 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface StepProps {
+    title?: string;
+    index?: number;
+}
+export declare class Step extends Component<StepProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<StepProps>>;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/steps/step.js

@@ -0,0 +1,20 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+import template from './step.vdt';
+var typeDefs = {
+  title: String,
+  index: Number
+};
+export var Step = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Step, _Component);
+
+  function Step() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Step;
+}(Component);
+Step.template = template;
+Step.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

package/components/steps/step.vdt.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { linkEvent } from 'intact';
+import { getRestProps, addStyle } from '../utils';
+import { makeStepStyles } from './styles';
+import { context as StepsContext } from './context';
+export default function ($props, $blocks, $__proto__) {
+  var _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      _children = _this$get.children,
+      title = _this$get.title,
+      index = _this$get.index,
+      className = _this$get.className,
+      style = _this$get.style;
+
+  return _$cc(StepsContext.Consumer, {
+    'children': function children(_ref) {
+      var _classNameObj;
+
+      var value = _ref.value,
+          status = _ref.status,
+          width = _ref.width,
+          onChange = _ref.onChange;
+      var selected = value === index;
+      var error = selected && status === 'error';
+      var classNameObj = (_classNameObj = {
+        'k-step': true,
+        'k-active': selected,
+        'k-done': value > index,
+        'k-error': error
+      }, _classNameObj[className] = className, _classNameObj[makeStepStyles()] = true, _classNameObj);
+      return _$cv('div', _extends({}, getRestProps(_this), {
+        'className': _$cn(classNameObj),
+        'style': addStyle(style, {
+          width: width
+        }),
+        'ev-click': linkEvent(index, onChange)
+      }), [_$ce(2, 'div', null, 1, 'k-step-tail'), _$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'div', error ? _$ce(2, 'i', null, 1, 'k-step-icon ion-ios-close-empty') : _$ce(2, 'span', index + 1, 0), 2, 'k-step-inner'), 2, 'k-step-head'), _$ce(2, 'div', [_$ce(2, 'div', title, 0, 'k-step-title'), _$ce(2, 'div', _children, 0, 'k-step-content')], 4, 'k-step-main')], 4, 'k-step-wrapper')]);
+    }
+  });
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/steps/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare function makeStepsStyles(): string;
+export declare function makeStepStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/steps/styles.js

@@ -0,0 +1,156 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  get height() {
+    return theme.default.height;
+  },
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
+  gutter: '10px',
+  gapTop: '-2px',
+  // head
+  head: {
+    innerWidth: '16px',
+
+    get innerBorder() {
+      return "1px solid " + theme.color.placeholder;
+    },
+
+    iconFontSize: '24px',
+    paddingRight: '10px'
+  },
+  main: {
+    get color() {
+      return theme.color.text;
+    },
+
+    get titlePaddingRight() {
+      return steps.head.paddingRight;
+    },
+
+    contentFontSize: '12px'
+  },
+  // done
+  done: {
+    get headColor() {
+      return theme.color.primary;
+    },
+
+    get headInnerBorderColor() {
+      return theme.color.primary;
+    },
+
+    headInnerBgColor: 'transparent',
+
+    get mainColor() {
+      return theme.color.primary;
+    },
+
+    get simpleColor() {
+      return theme.color.text;
+    }
+
+  },
+  // active
+  active: {
+    headColor: '#fff',
+
+    get headInnerBorderColor() {
+      return theme.color.primary;
+    },
+
+    get headInnerBgColor() {
+      return theme.color.primary;
+    },
+
+    get mainColor() {
+      return theme.color.primary;
+    },
+
+    get simpleColor() {
+      return theme.color.primary;
+    }
+
+  },
+  // error
+  error: {
+    get headColor() {
+      return theme.color.danger;
+    },
+
+    get headInnerBorderColor() {
+      return theme.color.danger;
+    },
+
+    headInnerBgColor: 'transparent',
+
+    get mainColor() {
+      return theme.color.danger;
+    },
+
+    get simpleColor() {
+      return theme.color.danger;
+    }
+
+  },
+  // line
+  line: {
+    bgColor: '#fff',
+    mainContentGap: '5px 0 0',
+
+    get tailBgColor() {
+      return theme.color.placeholder;
+    },
+
+    get doneTailBgColor() {
+      return theme.color.primary;
+    },
+
+    innerWidth: '32px',
+    innerLineHeight: '30px',
+    innerFontSize: '18px',
+    headTop: '16px',
+    titleFontSize: '14px',
+    titleGopTop: '16px',
+    iconLineHeight: '30px',
+    tailTop: '16px',
+    width: '160px'
+  },
+  // simple
+  simple: {
+    fontSize: '14px',
+
+    get color() {
+      return theme.color.disabled;
+    },
+
+    headPaddingRight: '6px'
+  }
+};
+var steps;
+setDefault(function () {
+  steps = deepDefaults(theme, {
+    steps: defaults
+  }).steps;
+});
+var stepStatus = ['done', 'active', 'error'];
+export function makeStepsStyles() {
+  return /*#__PURE__*/css("display:flex;&.k-default,&.k-line{", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
+    var styles = steps[status];
+    return /*#__PURE__*/css(".k-", status, "{.k-step-inner{color:", styles.headColor, ";border-color:", styles.headInnerBorderColor, "!important;background:", styles.headInnerBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
+  }), ";.k-step-head{padding-right:", steps.head.paddingRight, ";}.k-step-inner{width:", steps.head.innerWidth, ";height:", steps.head.innerWidth, ";line-height:calc(", steps.head.innerWidth, " - 2px);border-radius:50%;text-align:center;border:", steps.head.innerBorder, ";}.k-step-icon:before{line-height:calc(", steps.head.innerWidth, " - 2px);}.k-step-main{color:", steps.main.color, ";}.k-step-tail{position:absolute;}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple,&.k-default{text-align:center;height:", steps.height, ";line-height:", steps.height, ";overflow:hidden;.k-step-head,.k-step-main,.k-step-content,.k-step-inner{display:inline-block;}.k-step{white-space:nowrap;}.k-step-wrapper{overflow:hidden;}}&.k-default{background:", steps.bgColor, ";.k-step-tail{top:0;right:calc(-1 * (", steps.height, " / 2 + ", steps.gutter, "));width:calc(", steps.height, " / 2 + ", steps.gutter, ");height:", steps.height, ";overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", steps.height, " / 2 + ", steps.gutter, ");border-style:solid;border-color:transparent;position:absolute;top:calc(-1 * ", steps.gutter, ");}&:after{border-left-color:", steps.bgColor, ";left:calc(-1 * ", steps.head.paddingRight, ");}&:before{border-left-color:", steps.line.bgColor, ";left:0;}}.k-step-head,.k-step-inner{vertical-align:middle;margin-top:", steps.gapTop, ";}.k-step:not(:first-of-type){padding-left:calc(", steps.height, " / 2 + ", steps.gutter, ");}}&.k-line{.k-step{width:auto!important;&:last-of-type{flex:0 0 auto;.k-step-wrapper{display:flex;}.k-step-title{padding-right:0;}}}.k-step-head{background:", steps.line.bgColor, ";position:relative;display:flex;padding:0;&:before,&:after{content:'';display:block;flex:1;height:1px;background:", theme.color.placeholder, ";top:", steps.line.headTop, ";position:relative;}}.k-step-inner{width:", steps.line.innerWidth, ";height:", steps.line.innerWidth, ";line-height:", steps.line.innerLineHeight, ";font-size:", steps.line.innerFontSize, ";}.k-step-main{position:relative;width:", steps.line.width, ";}.k-step-title{line-height:", steps.head.innerWidth, ";background:", steps.line.bgColor, ";font-size:", steps.line.titleFontSize, ";padding:0;margin-top:", steps.line.titleGopTop, ";}.k-step-content{margin:", steps.line.mainContentGap, ";}.k-step-tail{left:0;right:", steps.head.paddingRight, ";top:calc(", steps.head.innerWidth, " / 2);height:1px;background:", steps.line.tailBgColor, ";}.k-step:first-of-type .k-step-head:before,.k-step:last-of-type .k-step-head:after{background:transparent;}.k-done{.k-step-tail{background:", steps.line.doneTailBgColor, ";}.k-step-head{&:before,&:after{background:", theme.color.primary, ";}}}.k-active{.k-step-head{&:before{background:", theme.color.primary, ";}}}.k-step-icon:before{line-height:", steps.line.iconLineHeight, ";}.k-step-wrapper{display:inline-block!important;text-align:center;}.k-step-tail{right:0;top:", steps.line.tailTop, ";}}&.k-simple{font-size:", steps.simple.fontSize, ";", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
+    var styles = steps[status];
+    return /*#__PURE__*/css(".k-", status, "{.k-step-main,.k-step-inner{color:", styles.simpleColor, ";}}");
+  }), ";.k-step,.k-step-main{color:", steps.simple.color, ";}.k-step-head{padding-right:", steps.simple.headPaddingRight, ";vertical-align:top;}}&.k-clickable{.k-done{cursor:pointer;}}");
+}
+export function makeStepStyles() {
+  return /*#__PURE__*/css("position:relative;flex:1;.k-step-icon:before{font-size:", steps.head.iconFontSize, ";}.k-step-title{display:inline-block;padding-right:", steps.main.titlePaddingRight, ";white-space:nowrap;}.k-step-content{font-size:", steps.main.contentFontSize, ";}.k-step-inner,.k-step-main{transition:all ", theme.transition, ";}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/switch/index.d.ts

@@ -0,0 +1,41 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { Sizes } from '../../styles/utils';
+import type { Events } from '../types';
+export interface SwitchProps<True = any, False = any> {
+    name?: string;
+    on?: string;
+    off?: string;
+    value?: True | False;
+    trueValue?: True;
+    falseValue?: False;
+    width?: number | string;
+    height?: number | string;
+    size?: Sizes;
+    disabled?: boolean;
+}
+export interface SwitchEvents {
+    click: [MouseEvent];
+    keypress: [KeyboardEvent];
+}
+export interface SwitchBlocks {
+    off: null;
+    on: null;
+}
+export declare class Switch<True = true, False = false> extends Component<SwitchProps<True, False>, SwitchEvents, SwitchBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SwitchProps<any, any>>>;
+    static defaults: () => Partial<SwitchProps<any, any>>;
+    static events: Events<SwitchEvents>;
+    private elementRef;
+    private draggable;
+    private onClick;
+    private onClickOnHandle;
+    private onKeypress;
+    toggle(isKeypress: boolean): void;
+    isChecked(): boolean;
+    check(): void;
+    uncheck(): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/switch/index.js

@@ -0,0 +1,115 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, createRef } from 'intact-vue-next';
+import template from './index.vdt';
+import { sizes } from '../../styles/utils';
+import { bind } from '../utils';
+import { useDraggable } from './useDraggable';
+var typeDefs = {
+  name: String,
+  on: String,
+  off: String,
+  value: null,
+  trueValue: null,
+  falseValue: null,
+  width: [Number, String],
+  height: [Number, String],
+  size: sizes,
+  disabled: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    value: false,
+    trueValue: true,
+    falseValue: false,
+    size: 'default'
+  };
+};
+
+var events = {
+  click: true,
+  keypress: true
+};
+export var Switch = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Switch, _Component);
+
+  function Switch() {
+    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.elementRef = createRef();
+    _this.draggable = useDraggable(_this.elementRef);
+    return _this;
+  }
+
+  var _proto = Switch.prototype;
+
+  _proto.onClick = function onClick(e) {
+    if (!e._switchIgnore) {
+      this.toggle(false);
+    }
+
+    this.trigger('click', e);
+  };
+
+  _proto.onClickOnHandle = function onClickOnHandle(e) {
+    // we can not stop propagation, otherwise the click can not be listen at outer
+    e._switchIgnore = true;
+  };
+
+  _proto.onKeypress = function onKeypress(e) {
+    this.trigger('keypress', e);
+
+    if (e.keyCode === 13) {
+      this.toggle(true);
+    }
+  };
+
+  _proto.toggle = function toggle(isKeypress) {
+    if (this.get('disabled')) return; // if is not keypress, we blur it to remove focus style
+
+    if (!isKeypress) {
+      this.elementRef.value.blur();
+    }
+
+    if (this.isChecked()) {
+      this.uncheck();
+    } else {
+      this.check();
+    }
+  };
+
+  _proto.isChecked = function isChecked() {
+    return this.get('value') === this.get('trueValue');
+  };
+
+  _proto.check = function check() {
+    this.set('value', this.get('trueValue'));
+  };
+
+  _proto.uncheck = function uncheck() {
+    this.set('value', this.get('falseValue'));
+  };
+
+  return Switch;
+}(Component);
+Switch.template = template;
+Switch.typeDefs = typeDefs;
+Switch.defaults = defaults;
+Switch.events = events;
+
+__decorate([bind], Switch.prototype, "onClick", null);
+
+__decorate([bind], Switch.prototype, "onClickOnHandle", null);
+
+__decorate([bind], Switch.prototype, "onKeypress", null);
+
+export {normalize} from 'intact-vue-next';

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

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