@king-design/intact 2.1.1 → 3.0.0-beta.1

package/es/components/spinner/index.js

@@ -1,10 +1,7 @@
 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 } from 'intact';
 import template from './index.vdt';
-import { bind } from '../utils';
 import { sizes } from '../../styles/utils';
 import { useStep } from './useStep';
 import { useFormatter } from './useFormatter';
@@ -79,19 +76,6 @@ export var Spinner = /*#__PURE__*/function (_Component) {
         disabled = _this$get2.disabled;
 
     return disabled || value >= max;
-  } // we need change value as long as the input is valid, #213
-  ;
-
-  _proto.onInput = function onInput(e) {
-    var val = e.target.value;
-
-    var _this$value$getFixedV = this.value.getFixedValue(_trimInstanceProperty(val).call(val), this.get('value')),
-        value = _this$value$getFixedV.value;
-
-    this.value.showValue.set(val);
-    this.set({
-      value: value
-    });
   };
 
   return Spinner;
@@ -99,6 +83,4 @@ export var Spinner = /*#__PURE__*/function (_Component) {
 Spinner.template = template;
 Spinner.typeDefs = typeDefs;
 Spinner.defaults = defaults;
-Spinner.events = events;
-
-__decorate([bind], Spinner.prototype, "onInput", null);
+Spinner.events = events;

package/es/components/spinner/index.vdt.js

@@ -6,16 +6,16 @@ import { Input } from '../input';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 var _$tmp0 = {
-  'className': 'k-spinner-icon ion-ios-minus-empty'
+  'className': 'k-spinner-icon k-icon-minus-small'
 };
 var _$tmp1 = {
-  'className': 'k-spinner-icon ion-ios-arrow-down'
+  'className': 'k-spinner-icon k-icon-arrow-down'
 };
 var _$tmp2 = {
-  'className': 'k-spinner-icon ion-ios-plus-empty'
+  'className': 'k-spinner-icon k-icon-add-small'
 };
 var _$tmp3 = {
-  'className': 'k-spinner-icon ion-ios-arrow-up'
+  'className': 'k-spinner-icon k-icon-arrow-up'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -39,8 +39,11 @@ export default function ($props, $blocks, $__proto__) {
   var _this$change = this.change,
       decrease = _this$change.decrease,
       increase = _this$change.increase,
-      changeValue = _this$change.changeValue,
+      onChangeValue = _this$change.onChangeValue,
       onFocusin = _this$change.onFocusin;
+  var _this$value = this.value,
+      showValue = _this$value.showValue,
+      onInput = _this$value.onInput;
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [_$cc(Button, {
@@ -49,14 +52,16 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': this.isDisabledDecrease(),
     'className': 'k-spinner-btn k-left',
     'size': size,
+    'type': 'none',
+    'tabindex': '-1',
     'children': !vertical ? _$cc(Icon, _$tmp0) : _$cc(Icon, _$tmp1)
   }), _$cc(Input, {
     'className': 'k-spinner-input',
     'disabled': disabled,
-    'ev-change': changeValue,
+    'ev-change': onChangeValue,
     'ev-focusin': onFocusin,
-    'value': this.value.showValue.value,
-    'ev-input': this.onInput,
+    'value': showValue.value,
+    'ev-input': onInput,
     'size': size,
     'width': width
   }), _$cc(Button, {
@@ -65,6 +70,8 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': this.isDisabledIncrease(),
     'className': 'k-spinner-btn k-right',
     'size': size,
+    'type': 'none',
+    'tabindex': '-1',
     'children': !vertical ? _$cc(Icon, _$tmp2) : _$cc(Icon, _$tmp3)
   })]);
 }

package/es/components/spinner/styles.js

@@ -4,13 +4,41 @@ import { deepDefaults, sizes } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var defaults = {
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  get border() {
+    return "1px solid " + theme.color.border;
+  },
+
+  get hoverBorderColor() {
+    return theme.color.primary;
+  },
+
+  get hoverBtnBg() {
+    return theme.color.bg;
+  },
+
+  get disabledBorderColor() {
+    return theme.color.disabledBorder;
+  },
+
+  get disabledBg() {
+    return theme.color.disabledBg;
+  },
+
+  get disabledColor() {
+    return theme.color.disabled;
+  },
+
   default: {
     inputWidth: '46px',
-    iconFontSize: '24px'
+    iconFontSize: '16px'
   },
   large: {
     inputWidth: '60px',
-    iconFontSize: '32px'
+    iconFontSize: '24px'
   },
   small: {
     inputWidth: '32px',
@@ -42,9 +70,9 @@ setDefault(function () {
   }).spinner;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;line-height:1;.k-spinner-btn{vertical-align:top;&:hover,&:focus{z-index:1;position:relative;}&.k-left{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px;}&.k-right{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;}}.k-spinner-input{width:", spinner.default.inputWidth, ";vertical-align:top;.k-input-inner{text-align:center;padding:0;border-radius:0;}}.k-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.k-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;border:", spinner.border, ";border-radius:", spinner.borderRadius, ";&:hover{border-color:", spinner.hoverBorderColor, ";.k-spinner-btn{background:", spinner.hoverBtnBg, ";}.k-left{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}.k-right{border-radius:0 ", spinner.borderRadius, " ", spinner.borderRadius, " 0;}}.k-spinner-input{width:", spinner.default.inputWidth, ";.k-input-inner{text-align:center;border:none;border-radius:0;&:hover,&:focus{border:none;}}}.k-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.k-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var generate = function generate() {
-      return "\n                    .k-spinner-input {\n                        padding-right: calc(" + theme[size].height + " - 1px);\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
+      return "\n                    .k-spinner-input {\n                        padding-right: " + theme[size].height + ";\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
     };
 
     if (size === 'default') {
@@ -52,7 +80,7 @@ export function makeStyles() {
     } else {
       return "\n                        &.k-" + size + " {\n                            " + generate() + "\n                        }\n                    ";
     }
-  }), ";.k-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% + 1px);line-height:50%;}.k-spinner-icon{line-height:50%!important;font-size:inherit!important;}.k-spinner-btn.k-left{bottom:0;border-radius:0 0 ", theme.borderRadius, " 0;}.k-spinner-btn.k-right{top:0;border-radius:0 ", theme.borderRadius, " 0 0;}.k-spinner-input{font-size:0;.k-input-inner{border-radius:", theme.borderRadius, " 0 0 ", theme.borderRadius, ";}}}&.k-disabled{.k-spinner-btn{&:hover,&:focus{z-index:0;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), ";.k-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% - 2px);line-height:50%;}.k-spinner-icon{font-size:inherit!important;}.k-spinner-btn.k-left{bottom:1px;border-radius:0 0 ", spinner.borderRadius, " 0;}.k-spinner-btn.k-right{top:1px;border-radius:0 ", spinner.borderRadius, " 0 0;}.k-spinner-input{font-size:0;.k-input-inner{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}}}&.k-disabled{border-color:", spinner.disabledBorderColor, ";background:", spinner.disabledBg, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = spinner[size];
 
     var generate = function generate() {

package/es/components/spinner/useChange.d.ts

@@ -3,6 +3,6 @@ import type { useValue } from './useValue';
 export declare function useChange(getStep: NormalizedGetStep, fixValue: ReturnType<typeof useValue>['fixValue']): {
     increase: () => void;
     decrease: () => void;
-    changeValue: (e: Event) => void;
+    onChangeValue: (e: Event) => void;
     onFocusin: () => void;
 };

package/es/components/spinner/useChange.js

@@ -26,7 +26,7 @@ export function useChange(getStep, fixValue) {
     fixAndTriggerChange(Number((value - step).toFixed(10)), 0);
   }
 
-  function changeValue(e) {
+  function onChangeValue(e) {
     var _context;
 
     fixAndTriggerChange(_trimInstanceProperty(_context = e.target.value).call(_context), instance.get('value'));
@@ -47,7 +47,7 @@ export function useChange(getStep, fixValue) {
   return {
     increase: increase,
     decrease: decrease,
-    changeValue: changeValue,
+    onChangeValue: onChangeValue,
     onFocusin: onFocusin
   };
 }

package/es/components/spinner/useValue.d.ts

@@ -7,6 +7,7 @@ export declare function useValue(getStep: NormalizedGetStep, formatter: ReturnTy
         valueString: string;
         value: number;
     };
+    onInput: (e: InputEvent) => void;
 };
 /**
  * return max min or multiple by step

package/es/components/spinner/useValue.js

@@ -1,4 +1,5 @@
 import _Number$isNaN from "@babel/runtime-corejs3/core-js/number/is-nan";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import { useInstance } from 'intact';
 import { useReceive } from '../../hooks/useReceive';
 import { error, isNullOrUndefined, isString } from 'intact-shared';
@@ -63,12 +64,26 @@ export function useValue(getStep, formatter) {
       valueString: valueString,
       value: value
     };
+  } // we need change value as long as the input is valid, #213
+
+
+  function onInput(e) {
+    var val = e.target.value;
+
+    var _getFixedValue2 = getFixedValue(_trimInstanceProperty(val).call(val), instance.get('value')),
+        value = _getFixedValue2.value;
+
+    showValue.set(val);
+    instance.set({
+      value: value
+    });
   }
 
   return {
     showValue: showValue,
     fixValue: fixValue,
-    getFixedValue: getFixedValue
+    getFixedValue: getFixedValue,
+    onInput: onInput
   };
 }
 /**

package/es/components/split/index.vdt.js

@@ -1,6 +1,9 @@
-import { createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact';
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact';
 import { makeStyles } from './style';
 import { kls } from './style';
+import { MemoBlock } from './memo';
+import { getRestProps } from '../utils';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _style, _style2;
 
@@ -26,17 +29,23 @@ export default function ($props, $blocks, $__proto__) {
     'k-split': true
   }, _classNameObj["k-" + mode] = true, _classNameObj[makeStyles()] = true, _classNameObj['k-first-auto'] = firstSize.value === 'auto', _classNameObj['k-last-auto'] = lastSize.value === 'auto', _classNameObj['k-resizing'] = dragging.value, _classNameObj);
   var stylePropName = mode === 'horizontal' ? 'width' : 'height';
-  return _$ce(2, 'div', [_$ce(2, 'div', (_$blocks['first'] = function ($super) {
-    return null;
-  }, __$blocks['first'] = function ($super, data) {
-    var block = $blocks['first'];
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj),
+    'ref': elementRef
+  }, getRestProps(this)), [_$ce(2, 'div', _$cc(MemoBlock, {
+    'block': $blocks.first,
+    'children': (_$blocks['first'] = function ($super) {
+      return null;
+    }, __$blocks['first'] = function ($super, data) {
+      var block = $blocks['first'];
 
-    var callBlock = function callBlock() {
-      return _$blocks['first'].call($this, $super, data);
-    };
+      var callBlock = function callBlock() {
+        return _$blocks['first'].call($this, $super, data);
+      };
 
-    return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['first'](_$no)), 0, _$cn(kls('first')), {
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['first'](_$no))
+  }), 2, _$cn(kls('first')), {
     'style': (_style = {}, _style[stylePropName] = firstSize.value, _style)
   }, null, firstRef), _$ce(2, 'div', (_$blocks['drag'] = function ($super) {
     return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(kls('drag-lines'))), 2, _$cn(kls('line')));
@@ -50,18 +59,21 @@ export default function ($props, $blocks, $__proto__) {
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['drag'](_$no)), 0, _$cn(kls('line-wrapper')), {
     'ev-mousedown': start
-  }), _$ce(2, 'div', (_$blocks['last'] = function ($super) {
-    return null;
-  }, __$blocks['last'] = function ($super, data) {
-    var block = $blocks['last'];
+  }), _$ce(2, 'div', _$cc(MemoBlock, {
+    'block': $blocks.last,
+    'children': (_$blocks['last'] = function ($super) {
+      return null;
+    }, __$blocks['last'] = function ($super, data) {
+      var block = $blocks['last'];
 
-    var callBlock = function callBlock() {
-      return _$blocks['last'].call($this, $super, data);
-    };
+      var callBlock = function callBlock() {
+        return _$blocks['last'].call($this, $super, data);
+      };
 
-    return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['last'](_$no)), 0, _$cn(kls('last')), {
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['last'](_$no))
+  }), 2, _$cn(kls('last')), {
     'style': (_style2 = {}, _style2[stylePropName] = lastSize.value, _style2)
-  }, null, lastRef)], 4, _$cn(classNameObj), null, null, elementRef);
+  }, null, lastRef)]);
 }
 ;

package/es/components/split/memo.d.ts

@@ -0,0 +1,9 @@
+import { Component, VNodeComponentClass, IntactDom } from 'intact';
+interface MemoBlockProps {
+    block: Function;
+}
+export declare class MemoBlock extends Component<MemoBlockProps> {
+    static template: (this: MemoBlock) => import("intact").Children;
+    $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
+}
+export {};

package/es/components/split/memo.js

@@ -0,0 +1,26 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+export var MemoBlock = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(MemoBlock, _Component);
+
+  function MemoBlock() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = MemoBlock.prototype;
+
+  _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
+    var lastProps = lastVNode.props;
+    var nextProps = nextVNode.props;
+    if (lastProps.block === nextProps.block) return;
+
+    _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+  };
+
+  return MemoBlock;
+}(Component);
+
+MemoBlock.template = function () {
+  var props = this.$props;
+  return props.children;
+};

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

@@ -2,9 +2,10 @@ import { Component, TypeDefs } from 'intact';
 export * from './step';
 export interface StepsProps {
     value?: number;
-    status?: 'normal' | 'error';
-    type?: 'default' | 'line' | 'simple';
+    status?: 'normal' | 'error' | 'done';
+    type?: 'default' | 'line' | 'simple' | 'line-compact' | 'dot';
     clickable?: boolean;
+    vertical?: boolean;
 }
 export declare class Steps extends Component<StepsProps> {
     static template: string | import("intact").Template<any>;

package/es/components/steps/index.js

@@ -6,9 +6,10 @@ import { bind } from '../utils';
 export * from './step';
 var typeDefs = {
   value: Number,
-  status: ['normal', 'error'],
-  type: ['default', 'line', 'simple'],
-  clickable: Boolean
+  status: ['normal', 'error', 'done'],
+  type: ['default', 'line', 'simple', 'line-compact', 'dot'],
+  clickable: Boolean,
+  vertical: Boolean
 };
 
 var defaults = function defaults() {

package/es/components/steps/index.spec.js

@@ -21,7 +21,7 @@ describe('Steps', function () {
 
           case 5:
             expect(element.innerHTML).to.matchSnapshot();
-            _element$querySelecto2 = element.querySelectorAll('.k-step'), step1 = _element$querySelecto2[0], step2 = _element$querySelecto2[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-step-wrapper'), step1 = _element$querySelecto2[0], step2 = _element$querySelecto2[1];
             step1.click();
             _context.next = 10;
             return wait();

package/es/components/steps/index.vdt.js

@@ -17,11 +17,12 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       status = _this$get.status,
       type = _this$get.type,
-      clickable = _this$get.clickable;
+      clickable = _this$get.clickable,
+      vertical = _this$get.vertical;
 
   var classNameObj = (_classNameObj = {
     'k-steps': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + type] = true, _classNameObj['k-clickable'] = clickable, _classNameObj[makeStepsStyles()] = true, _classNameObj);
+  }, _classNameObj[className] = className, _classNameObj["k-" + type] = true, _classNameObj['k-clickable'] = clickable, _classNameObj['k-vertical'] = vertical, _classNameObj[makeStepsStyles()] = true, _classNameObj);
   var stepIndex = 0;
   var steps = [];
   eachChildren(children, function (vNode) {
@@ -34,12 +35,15 @@ export default function ($props, $blocks, $__proto__) {
     }
   }); // add width
 
-  var width = 100 / stepIndex + '%';
+  /* const width = (100 / stepIndex) + '%';  */
+
   return _$cc(StepsContext.Provider, {
     'value': {
       value: value,
       status: status,
-      width: width,
+
+      /* width, */
+      type: type,
       onChange: this.changeIndex
     },
     'children': _$cv('div', _extends({

package/es/components/steps/step.vdt.js

@@ -2,8 +2,16 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
 import { linkEvent } from 'intact';
 import { getRestProps, addStyle } from '../utils';
-import { makeStepStyles } from './styles';
 import { context as StepsContext } from './context';
+import { Icon } from '../icon';
+var _$tmp0 = {
+  'className': 'k-icon-close-big',
+  'color': 'danger'
+};
+var _$tmp1 = {
+  'className': 'k-icon-check',
+  'color': 'primary'
+};
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
 
@@ -24,23 +32,23 @@ export default function ($props, $blocks, $__proto__) {
 
       var value = _ref.value,
           status = _ref.status,
-          width = _ref.width,
-          onChange = _ref.onChange;
+          onChange = _ref.onChange,
+          type = _ref.type;
       var selected = value === index;
       var error = selected && status === 'error';
+      var done = value > index;
       var classNameObj = (_classNameObj = {
         'k-step': true,
         'k-active': selected,
-        'k-done': value > index,
+        'k-done': done,
         'k-error': error
-      }, _classNameObj[className] = className, _classNameObj[makeStepStyles()] = true, _classNameObj);
+      }, _classNameObj[className] = className, _classNameObj);
       return _$cv('div', _extends({}, getRestProps(_this), {
         'className': _$cn(classNameObj),
-        'style': addStyle(style, {
-          width: width
-        }),
+        'style': style
+      }), [_$ce(2, 'div', [_$ce(2, 'div', error && type !== 'simple' ? _$cc(Icon, _$tmp0) : done && (type === 'line' || type === 'line-compact') ? _$cc(Icon, _$tmp1) : type !== 'simple' ? _$ce(2, 'span', index + 1, 0) : undefined, 0, 'k-step-mark'), _$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', {
         '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')]);
+      }), _$ce(2, 'div', null, 1, 'k-step-tail')]);
     }
   });
 }

package/es/components/steps/styles.d.ts

@@ -1,3 +1,4 @@
 import '../../styles/global';
 export declare function makeStepsStyles(): string;
-export declare function makeStepStyles(): string;
+export declare function makeCommonStyles(): string;
+export declare function makeVerticalStyles(): string;