@king-design/vue 2.0.0-beta.0

package/components/icon/index.vdt.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact-vue-next';
+import { addStyle, getRestProps } from '../utils';
+import makeStyles 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,
+      style = _this$get.style,
+      size = _this$get.size,
+      color = _this$get.color,
+      rotate = _this$get.rotate,
+      hoverable = _this$get.hoverable;
+
+  var classNameObj = (_classNameObj = {
+    'k-icon': true,
+    'k-rotate': rotate,
+    'k-hoverable': hoverable
+  }, _classNameObj[className] = className, _classNameObj);
+  var _style = {};
+
+  if (/^\d+$/.test(size)) {
+    _style.fontSize = size + 'px';
+  } else if (size !== 'default') {
+    classNameObj["k-" + size] = true;
+  }
+
+  if (this.colors.indexOf(color) > -1) {
+    classNameObj["k-" + color] = color !== 'default';
+    classNameObj[makeStyles()] = true;
+  } else if (color) {
+    _style.color = color;
+    classNameObj[makeStyles(color)] = true;
+  } else {
+    classNameObj[makeStyles()] = true;
+  }
+
+  return _$cv('i', _extends({
+    'className': _$cn(classNameObj),
+    'style': addStyle(style, _style)
+  }, getRestProps(this)));
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/icon/styles.d.ts

@@ -0,0 +1,9 @@
+import '../../styles/fonts/iconfont';
+import '../../styles/fonts/ionicons';
+import '../../styles/global';
+export declare const colors: readonly ["primary", "warning", "danger", "success"];
+export declare const sizes: readonly ["large", "small", "mini"];
+export default function makeStyles(color?: string): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/icon/styles.js

@@ -0,0 +1,35 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, palette } from '../../styles/utils';
+import { rotate } from '../../styles/keyframes';
+import '../../styles/fonts/iconfont';
+import '../../styles/fonts/ionicons';
+import '../../styles/global';
+var iconStyles = {
+  fontSize: {
+    default: '16px',
+    large: '22px',
+    small: '14px',
+    mini: '12px'
+  }
+};
+var defaults = iconStyles;
+var icon;
+setDefault(function () {
+  icon = deepDefaults(theme, {
+    icon: defaults
+  }).icon;
+});
+export var colors = ['primary', 'warning', 'danger', 'success'];
+export var sizes = ['large', 'small', 'mini'];
+export default function makeStyles(color) {
+  return /*#__PURE__*/css("font-size:", icon.fontSize.default, ";line-height:1;", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.k-", size, "{font-size:", icon.fontSize[size], ";}");
+  }), " ", _mapInstanceProperty(colors).call(colors, function (color) {
+    var _color = theme.color[color];
+    return /*#__PURE__*/css("&.k-", color, "{color:", _color, ";&.k-hoverable:hover{color:", palette(_color, -2), ";}}");
+  }), " &.k-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{font-size:inherit;}&.k-hoverable{cursor:pointer;transition:color ", theme.transition, ";", color && "\n                &:hover {\n                    color: " + palette(color, -2) + " !important;\n                }\n            ", ";&:hover{color:", theme.color.primary, ";}}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/input/index.d.ts

@@ -0,0 +1,58 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { Sizes } from '../../styles/utils';
+import { CommonInputHTMLAttributes, Events } from '../types';
+export * from './search';
+declare type HTMLInputTypes = 'textarea' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
+interface InputHTMLAttributes extends CommonInputHTMLAttributes {
+    pattern?: string;
+    dirname?: string;
+    datalist?: string;
+    cols?: number;
+    wrap?: 'hard' | 'soft';
+}
+declare type Value = string | number;
+export interface InputProps<V extends Value = Value> extends InputHTMLAttributes {
+    type?: HTMLInputTypes;
+    value?: V;
+    defaultValue?: string | number;
+    placeholder?: string;
+    readonly?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    size?: Sizes;
+    rows?: string | number;
+    autoWidth?: boolean;
+    fluid?: boolean;
+    width?: number | string;
+    stackClearIcon?: boolean;
+    frozenOnInput?: boolean;
+    inline?: boolean;
+}
+export interface InputEvents {
+    clear: [MouseEvent];
+    focus: [FocusEvent];
+    blur: [FocusEvent];
+    input: [InputEvent];
+}
+export interface InputBlocks {
+    prepend: null;
+    prefix: null;
+    suffix: null;
+    append: null;
+}
+export declare class Input<V extends Value = Value> extends Component<InputProps<V>, InputEvents, InputBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<Omit<InputProps<Value>, keyof InputHTMLAttributes>>>;
+    static defaults: () => Partial<InputProps<Value>>;
+    static events: Events<InputEvents>;
+    private inputRef;
+    private autoWidth;
+    private frozen;
+    focus(): void;
+    blur(): void;
+    select(): void;
+    private clear;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/input/index.js

@@ -0,0 +1,99 @@
+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 { sizes } from '../../styles/utils';
+import template from './index.vdt';
+import { bind } from '../utils';
+import { useAutoWidth } from './useAutoWidth';
+import { useFrozen } from './useFrozen';
+export * from './search';
+var typeDefs = {
+  type: String,
+  value: [String, Number],
+  defaultValue: [String, Number],
+  placeholder: String,
+  readonly: Boolean,
+  clearable: Boolean,
+  disabled: Boolean,
+  size: sizes,
+  rows: [String, Number],
+  autoWidth: Boolean,
+  fluid: Boolean,
+  width: [Number, String],
+  stackClearIcon: Boolean,
+  frozenOnInput: Boolean,
+  inline: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    type: 'text',
+    size: 'default',
+    rows: 2
+  };
+};
+
+var events = {
+  clear: true,
+  focus: true,
+  blur: true,
+  input: true
+};
+export var Input = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Input, _Component);
+
+  function Input() {
+    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.inputRef = createRef();
+    _this.autoWidth = useAutoWidth();
+    _this.frozen = useFrozen();
+    return _this;
+  }
+
+  var _proto = Input.prototype;
+
+  _proto.focus = function focus() {
+    this.inputRef.value.focus();
+  };
+
+  _proto.blur = function blur() {
+    this.inputRef.value.blur();
+  };
+
+  _proto.select = function select() {
+    var input = this.inputRef.value;
+
+    if (input.select) {
+      input.select();
+    } else if (input.setSelectionRange) {
+      // mobile safari
+      input.focus();
+      input.setSelectionRange(0, input.value.length);
+    }
+  };
+
+  _proto.clear = function clear(e) {
+    this.set('value', '');
+    this.focus();
+    this.trigger('clear', e);
+  };
+
+  return Input;
+}(Component);
+Input.template = template;
+Input.typeDefs = typeDefs;
+Input.defaults = defaults;
+Input.events = events;
+
+__decorate([bind], Input.prototype, "clear", null);
+
+export {normalize} from 'intact-vue-next';

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

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

package/components/input/index.spec.js

@@ -0,0 +1,129 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/input/demos/basic';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import SearchDemo from '~/components/input/demos/search';
+import FrozenDemo from '~/components/input/demos/frozen';
+describe('Input', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, input;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            input = element.querySelector('input');
+
+            instance.refs.__test.focus();
+
+            input.value = 'test';
+            dispatchEvent(input, 'input');
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            expect(instance.get('value')).eql('test');
+
+            instance.refs.__test.select();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var onSearch, _mount2, instance, element, btn, input, form;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            onSearch = sinon.spy();
+            SearchDemo.prototype.search = onSearch;
+            _mount2 = mount(SearchDemo), instance = _mount2[0], element = _mount2[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            btn = element.querySelector('.k-btn');
+            btn.click();
+            _context2.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+            input = element.querySelector('input');
+            input.value = 'test';
+            dispatchEvent(input, 'input');
+            _context2.next = 14;
+            return wait();
+
+          case 14:
+            expect(element.innerHTML).to.matchSnapshot();
+            form = element.querySelector('form');
+            dispatchEvent(form, 'submit');
+            _context2.next = 19;
+            return wait();
+
+          case 19:
+            expect(onSearch.calledWith('test')).to.be.true;
+            btn.click();
+            _context2.next = 23;
+            return wait();
+
+          case 23:
+            expect(onSearch.callCount).to.eql(2);
+            expect(onSearch.calledWith('test')).to.be.true;
+            expect(element.innerHTML).to.matchSnapshot();
+            document.body.click();
+            _context2.next = 29;
+            return wait();
+
+          case 29:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 30:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should frozen value on input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _element$querySelecto, input1, input2;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(FrozenDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto = element.querySelectorAll('input'), input1 = _element$querySelecto[0], input2 = _element$querySelecto[1];
+            dispatchEvent(input2, 'focus');
+            input2.value = '#123';
+            dispatchEvent(input2, 'input');
+            _context3.next = 7;
+            return wait();
+
+          case 7:
+            expect(input1.value).to.eql('#112233');
+            expect(input2.value).to.eql('#123');
+            dispatchEvent(input2, 'blur');
+            _context3.next = 12;
+            return wait();
+
+          case 12:
+            expect(input2.value).to.eql('#112233');
+
+          case 13:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/input/index.vdt.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+import { createElementVNode as _$ce, className as _$cn, noop as _$no, createVNode as _$cv, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { Icon } from '../icon';
+import { addStyle, isTextBlock, getRestProps } from '../utils';
+import { makeStyles } from './styles';
+import { noop, isNullOrUndefined } from 'intact-shared';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, children, _children;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      style = _this$get.style,
+      type = _this$get.type,
+      value = _this$get.value,
+      defaultValue = _this$get.defaultValue,
+      placeholder = _this$get.placeholder,
+      clearable = _this$get.clearable,
+      disabled = _this$get.disabled,
+      size = _this$get.size,
+      rows = _this$get.rows,
+      autoWidth = _this$get.autoWidth,
+      fluid = _this$get.fluid,
+      width = _this$get.width,
+      stackClearIcon = _this$get.stackClearIcon,
+      frozenOnInput = _this$get.frozenOnInput,
+      readonly = _this$get.readonly,
+      inline = _this$get.inline,
+      click = _this$get['ev-click'],
+      mouseenter = _this$get['ev-mounseenter'],
+      mouseleave = _this$get['ev-mouseleave'],
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
+  var _this$frozen = this.frozen,
+      inputing = _this$frozen.inputing.value,
+      originalValue = _this$frozen.originalValue.value,
+      startInput = _this$frozen.startInput,
+      onInput = _this$frozen.onInput,
+      endInput = _this$frozen.endInput;
+  var classNameObj = (_classNameObj = {
+    'k-input': true
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-with-prefix'] = $blocks.prefix, _classNameObj['k-with-suffix'] = $blocks.suffix, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$autoWidth = this.autoWidth,
+      fakeRef = _this$autoWidth.fakeRef,
+      fakeWidth = _this$autoWidth.width.value;
+  var inputValue = frozenOnInput && inputing ? originalValue : value;
+  var hasInputValue = !isNullOrUndefined(inputValue);
+  var hasValue = hasInputValue && inputValue !== '';
+
+  var inputProps = _extends({}, getRestProps(this, rest), {
+    'ev-focus': startInput,
+    'ev-blur': endInput,
+    'ev-input': onInput,
+    defaultValue: defaultValue,
+    readOnly: readonly,
+    placeholder: placeholder,
+    disabled: disabled,
+    ref: this.inputRef,
+    style: autoWidth ? {
+      width: fakeWidth + 'px'
+    } : undefined
+  }); // if we pass value to input element, the input is controlled and the
+  // defaultValue does not work
+
+
+  if (hasInputValue) {
+    inputProps.value = inputValue;
+  }
+
+  return _$ce(2, 'div', [$blocks.prepend ? (children = $blocks.prepend(noop), _$ce(2, 'div', children, 0, _$cn({
+    "k-input-prepend": true,
+    "k-input-padding": isTextBlock(children)
+  }))) : void 0, _$ce(2, 'div', [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
+    return null;
+  }, __$blocks['prefix'] = function ($super, data) {
+    var block = $blocks['prefix'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['prefix'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['prefix'](_$no)), 0, 'k-input-prefix') : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
+    'className': 'k-input-inner',
+    'type': type
+  })) : _$cv('textarea', _extends({}, inputProps, {
+    'className': 'k-input-inner k-textarea',
+    'rows': rows
+  })), $blocks.suffix || clearable && !disabled ? _$ce(2, 'div', [clearable && !disabled ? _$cc(Icon, {
+    'className': _$cn({
+      "k-input-clear ion-ios-close": true,
+      "k-input-show": hasValue
+    }),
+    'ev-click': this.clear
+  }) : undefined, ' ', (_$blocks['suffix'] = function ($super) {
+    return null;
+  }, __$blocks['suffix'] = function ($super, data) {
+    var block = $blocks['suffix'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['suffix'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix') : undefined, autoWidth ? _$ce(2, 'div', !hasValue ? placeholder : inputValue, 0, 'k-input-fake', null, null, fakeRef) : undefined], 0, 'k-input-wrapper'), $blocks.append ? (_children = $blocks.append(noop), _$ce(2, 'div', _children, 0, _$cn({
+    "k-input-append": true,
+    "k-input-padding": isTextBlock(_children)
+  }))) : void 0], 0, _$cn(classNameObj), {
+    'style': width != null ? addStyle(style, {
+      width: width + "px"
+    }) : style,
+    'ev-click': click,
+    'ev-mouseenter': mouseenter,
+    'ev-mouseleave': mouseleave
+  });
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/input/search.d.ts

@@ -0,0 +1,29 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import { Sizes } from '../../styles/utils';
+export interface SearchProps {
+    placeholder?: string;
+    value?: string;
+    type?: 'default' | 'line';
+    size?: Sizes;
+    open?: boolean;
+}
+export interface SearchEvents {
+    submit: [string];
+}
+export declare class Search extends Component<SearchProps, SearchEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SearchProps>>;
+    static defaults: () => Partial<SearchProps>;
+    private elementRef;
+    private inputRef;
+    init(): void;
+    open(): void;
+    hide(): void;
+    onClickBtn(): void;
+    onChangeValue(v: SearchProps['value']): void;
+    onSubmit(e: Event): void;
+    submit(): void;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/input/search.js

@@ -0,0 +1,102 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import { __decorate } from "tslib";
+import { Component, createRef } from 'intact-vue-next';
+import template from './search.vdt';
+import { sizes } from '../../styles/utils';
+import { _$ } from '../../i18n';
+import { bind } from '../utils';
+import { useDocumentClick } from '../../hooks/useDocumentClick';
+var typeDefs = {
+  placeholder: String,
+  value: String,
+  type: ['default', 'line'],
+  size: sizes,
+  open: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    get placeholder() {
+      return _$('请输入关键字');
+    },
+
+    value: '',
+    type: 'default',
+    size: 'default',
+    open: false
+  };
+};
+
+export var Search = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Search, _Component);
+
+  function Search() {
+    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.inputRef = createRef();
+    return _this;
+  }
+
+  var _proto = Search.prototype;
+
+  _proto.init = function init() {
+    useDocumentClick(this.elementRef, this.hide.bind(this));
+  };
+
+  _proto.open = function open() {
+    this.set('open', true);
+    this.inputRef.value.select();
+  };
+
+  _proto.hide = function hide() {
+    this.set('open', false);
+  };
+
+  _proto.onClickBtn = function onClickBtn() {
+    // if the box is open, then submit the form
+    if (this.get('open')) {
+      this.submit();
+    } else {
+      this.open();
+    }
+  };
+
+  _proto.onChangeValue = function onChangeValue(v) {
+    if (!this.get('open')) return;
+    this.set('value', v);
+  };
+
+  _proto.onSubmit = function onSubmit(e) {
+    e.preventDefault();
+    this.submit();
+  };
+
+  _proto.submit = function submit() {
+    var _context2;
+
+    this.trigger('submit', _trimInstanceProperty(_context2 = this.get('value')).call(_context2));
+  };
+
+  return Search;
+}(Component);
+Search.template = template;
+Search.typeDefs = typeDefs;
+Search.defaults = defaults;
+
+__decorate([bind], Search.prototype, "onClickBtn", null);
+
+__decorate([bind], Search.prototype, "onChangeValue", null);
+
+__decorate([bind], Search.prototype, "onSubmit", null);
+
+export {normalize} from 'intact-vue-next';