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

package/components/slider/index.spec.js

@@ -80,15 +80,15 @@ describe('Slider', function () {
     }, _callee);
   })));
   it('range test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _mount2, instance, element, windowWidth, _element$querySelecto2, first, second, wrapper;
+    var _mount2, instance, element, windowWidth, _element$querySelecto2, first, second, wrapper, increaseBtn, decreaseBtn, _element$querySelecto3, firstInput, secondInput;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _mount2 = mount(RangeDemo), instance = _mount2[0], element = _mount2[1];
-            windowWidth = 800; //document.documentElement.clientWidth;
+            _mount2 = mount(RangeDemo), instance = _mount2[0], element = _mount2[1]; // const windowWidth = 800; //document.documentElement.clientWidth;
 
+            windowWidth = element.querySelector('.k-slider-main').clientWidth;
             _element$querySelecto2 = element.querySelectorAll('.k-slider-thumb'), first = _element$querySelecto2[0], second = _element$querySelecto2[1]; // drag
 
             dispatchEvent(first, 'mousedown', {
@@ -145,9 +145,48 @@ describe('Slider', function () {
             return wait();
 
           case 33:
-            expect(instance.get('values')).eql([1, 1]);
+            expect(instance.get('values')).eql([1, 1]); // increase first value
 
-          case 34:
+            increaseBtn = element.querySelector('.k-right');
+            increaseBtn.click();
+            _context2.next = 38;
+            return wait();
+
+          case 38:
+            expect(instance.get('values')).eql([2, 2]); // should disable second spinner's decrease button
+
+            decreaseBtn = element.querySelector('.k-spinner:last-of-type .k-left');
+            decreaseBtn.click();
+            _context2.next = 43;
+            return wait();
+
+          case 43:
+            expect(instance.get('values')).eql([2, 2]); // input value
+
+            _element$querySelecto3 = element.querySelectorAll('.k-input-inner'), firstInput = _element$querySelecto3[0], secondInput = _element$querySelecto3[1];
+            dispatchEvent(firstInput, 'focusin');
+            firstInput.value = '5';
+            dispatchEvent(firstInput, 'input');
+            firstInput.value = '50';
+            dispatchEvent(firstInput, 'input');
+            dispatchEvent(firstInput, 'change');
+            dispatchEvent(secondInput, 'focusin');
+            _context2.next = 54;
+            return wait();
+
+          case 54:
+            secondInput.value = '6';
+            dispatchEvent(secondInput, 'input');
+            secondInput.value = '60';
+            dispatchEvent(secondInput, 'input');
+            dispatchEvent(secondInput, 'change');
+            _context2.next = 61;
+            return wait();
+
+          case 61:
+            expect(instance.get('values')).eql([50, 60]);
+
+          case 62:
           case "end":
             return _context2.stop();
         }
@@ -155,14 +194,14 @@ describe('Slider', function () {
     }, _callee2);
   })));
   it('keyboard operation for basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var _mount3, instance, element, _element$querySelecto3, slider, handle;
+    var _mount3, instance, element, _element$querySelecto4, slider, handle;
 
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
             _mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
-            _element$querySelecto3 = element.querySelectorAll('.k-slider'), slider = _element$querySelecto3[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-slider'), slider = _element$querySelecto4[1];
             handle = slider.querySelector('.k-slider-thumb');
             dispatchEvent(handle, 'focusin');
             dispatchEvent(handle, 'keydown', {
@@ -198,14 +237,14 @@ describe('Slider', function () {
     }, _callee3);
   })));
   it('keyboard operation for range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var _mount4, instance, element, _element$querySelecto4, first, second;
+    var _mount4, instance, element, _element$querySelecto5, first, second;
 
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
             _mount4 = mount(RangeDemo), instance = _mount4[0], element = _mount4[1];
-            _element$querySelecto4 = element.querySelectorAll('.k-slider-thumb'), first = _element$querySelecto4[0], second = _element$querySelecto4[1];
+            _element$querySelecto5 = element.querySelectorAll('.k-slider-thumb'), first = _element$querySelecto5[0], second = _element$querySelecto5[1];
             instance.set('values', [50, 51]);
             _context4.next = 5;
             return wait();

package/components/slider/index.vdt.js

@@ -48,7 +48,10 @@ export default function ($props, $blocks, $__proto__) {
       thumbFirstStyle = _this$styles.thumbFirstStyle,
       thumbSecondStyle = _this$styles.thumbSecondStyle;
 
-  var onSpinnerChange = this.value.onSpinnerChange;
+  var _this$value = this.value,
+      onSpinnerChange = _this$value.onSpinnerChange,
+      onLeftSpinnerChange = _this$value.onLeftSpinnerChange,
+      onRightSpinnerChange = _this$value.onRightSpinnerChange;
   var _this$keyboard = this.keyboard,
       onKeydown = _this$keyboard.onKeydown,
       onKeyup = _this$keyboard.onKeyup;
@@ -137,16 +140,24 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': linkEvent(min, setOneValue)
   }), _$ce(2, 'span', max + unit, 0, null, {
     'ev-click': linkEvent(max, setOneValue)
-  })], 4, 'k-slider-ends') : undefined], 0, 'k-slider-main'), showInput && !range ? _$ce(2, 'div', _$cc(Spinner, _extends({
-    'disabled': disabled,
-    'max': max,
-    'min': min,
-    'step': step || 0.01,
-    'vertical': true,
-    'value': value,
-    'suffix': unit,
-    'forceStep': !!step && forceStep,
-    'ev-$change:value': onSpinnerChange
-  }, spinnerProps)), 2, 'k-slider-spinner') : undefined]);
+  })], 4, 'k-slider-ends') : undefined], 0, 'k-slider-main'), showInput ? _$ce(2, 'div', function () {
+    var props = {
+      disabled: disabled,
+      min: min,
+      max: max,
+      step: step || 0.01,
+      vertical: true,
+      suffix: unit,
+      forceStep: !!step && forceStep
+    };
+    return [_$cc(Spinner, _extends({}, props, {
+      'value': range ? value[0] : value,
+      'ev-$change:value': range ? onLeftSpinnerChange : onSpinnerChange
+    }, spinnerProps)), range ? [_$ce(2, 'span', '-', 16, 'k-slider-spinner-sep'), _$cc(Spinner, _extends({}, props, {
+      'min': value[0],
+      'value': range ? value[1] : value,
+      'ev-$change:value': onRightSpinnerChange
+    }, spinnerProps))] : undefined];
+  }(), 0, 'k-slider-spinner') : undefined]);
 }
 ;

package/components/slider/styles.js

@@ -7,27 +7,38 @@ var defaults = {
     return theme.transition.middle;
   },
 
-  height: '4px',
-  bgColor: '#e5e5e5',
+  height: '6px',
+  bgColor: '#F0F2F4',
 
   get barColor() {
     return theme.color.primary;
   },
 
-  borderRadius: '2px',
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
   thumb: {
     height: '12px',
     width: '12px',
 
     get border() {
-      return "2px solid " + slider.barColor;
+      return "3px solid #fff";
     },
 
     borderRadius: '50%',
-    bgColor: '#fff',
-    hoverTransform: 'scale(1.5)',
-    hoverBgColor: '#fff',
-    disabledBgColor: '#fff'
+
+    get bgColor() {
+      return slider.barColor;
+    },
+
+    hoverTransform: 'scale(1.25)',
+
+    get hoverBgColor() {
+      return slider.barColor;
+    },
+
+    boxShadow: '0px 0px 5px 0px rgba(0, 0, 0, 0.08)'
   },
   endPadding: '10px 0 0',
   disabled: {
@@ -35,15 +46,13 @@ var defaults = {
       return theme.color.disabled;
     },
 
-    get bgColor() {
-      return theme.color.disabledBg;
-    }
-
+    // might be calculate according to the bar color
+    bgColor: '#B5E3FF'
   },
   // spinnerWidth: '124px',
   spinnerGap: '16px',
   point: {
-    width: '8px',
+    width: '10px',
 
     get height() {
       return slider.point.width;
@@ -77,5 +86,5 @@ setDefault(function () {
   }).slider;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("position:relative;outline:none;display:flex;.k-slider-main{flex:1;}.k-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.k-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.k-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.k-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.k-slider-thumb{height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.k-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.k-slider-spinner{margin-left:", slider.spinnerGap, ";}&.k-dragging{.k-slider-bar{transition:none;}.k-slider-thumb-wrapper{transition:none;}}&.k-disabled{color:", slider.disabled.color, ";.k-slider-track-wrapper{cursor:not-allowed;}.k-slider-bar{background-color:", slider.disabled.color, ";}.k-slider-thumb{border-color:", slider.disabled.color, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.k-slider-ends{span{cursor:not-allowed;}}}.k-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.k-active{border-color:", slider.point.activeBorderColor, ";}}.k-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.k-active{color:", slider.marks.activeColor, ";}}}.k-slider-tooltip{white-space:nowrap;}");
+  return /*#__PURE__*/css("position:relative;outline:none;display:flex;.k-slider-main{flex:1;}.k-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.k-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.k-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.k-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.k-slider-thumb{box-sizing:content-box;height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";box-shadow:", slider.thumb.boxShadow, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.k-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.k-slider-spinner{margin-left:", slider.spinnerGap, ";}.k-slider-spinner-sep{display:inline-block;margin:auto 8px;}&.k-dragging{.k-slider-bar{transition:none;}.k-slider-thumb-wrapper{transition:none;}}&.k-disabled{color:", slider.disabled.color, ";.k-slider-track-wrapper{cursor:not-allowed;}.k-slider-bar{background-color:", slider.disabled.bgColor, ";}.k-slider-thumb{border-color:#fff;background-color:", slider.disabled.bgColor, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.k-slider-ends{span{cursor:not-allowed;}}}.k-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.k-active{border-color:", slider.point.activeBorderColor, ";}}.k-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.k-active{color:", slider.marks.activeColor, ";}}}.k-slider-tooltip{white-space:nowrap;}");
 }

package/components/slider/useValue.d.ts

@@ -2,7 +2,9 @@ import { NormalizedGetStep } from '../spinner/useStep';
 export declare type Value<Range extends boolean = boolean> = Range extends true ? [number, number] : number;
 export declare function useValue(getStep: NormalizedGetStep, getDragging: () => boolean): {
     showValue: import("../../hooks/useState").State<number | [number, number]>;
-    onSpinnerChange: (v: number) => void;
+    onSpinnerChange: (v: Value) => void;
+    onLeftSpinnerChange: (v: number) => void;
+    onRightSpinnerChange: (v: number) => void;
     setValue: (value: Value) => void;
     triggerChangeEvent: (oldValue: Value) => void;
     fixValue: (value: Value, fixShowValue: boolean) => void;

package/components/slider/useValue.js

@@ -80,6 +80,16 @@ export function useValue(getStep, getDragging) {
     });
   }
 
+  function onLeftSpinnerChange(v) {
+    var secondValue = showValue.value[1];
+    onSpinnerChange([v, Math.max(v, secondValue)]);
+  }
+
+  function onRightSpinnerChange(v) {
+    var firstValue = showValue.value[0];
+    onSpinnerChange([Math.min(v, firstValue), v]);
+  }
+
   function triggerChangeEvent(oldValue) {
     var _instance$get3 = instance.get(),
         value = _instance$get3.value;
@@ -91,6 +101,8 @@ export function useValue(getStep, getDragging) {
   return {
     showValue: showValue,
     onSpinnerChange: onSpinnerChange,
+    onLeftSpinnerChange: onLeftSpinnerChange,
+    onRightSpinnerChange: onRightSpinnerChange,
     setValue: setValue,
     triggerChangeEvent: triggerChangeEvent,
     fixValue: fixValue

package/components/spinner/index.d.ts

@@ -39,6 +39,5 @@ export declare class Spinner extends Component<SpinnerProps, SpinnerEvents> {
     private change;
     private isDisabledDecrease;
     private isDisabledIncrease;
-    private onInput;
 }
 export {};

package/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-vue-next';
 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/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/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/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/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/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/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-vue-next';
 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/components/split/index.vdt.js

@@ -1,6 +1,9 @@
-import { createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact-vue-next';
+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-vue-next';
 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/components/split/memo.d.ts

@@ -0,0 +1,9 @@
+import { Component, VNodeComponentClass, IntactDom } from 'intact-vue-next';
+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/components/split/memo.js

@@ -0,0 +1,26 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+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/components/steps/index.d.ts

@@ -2,9 +2,10 @@ import { Component, TypeDefs } from 'intact-vue-next';
 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>;