@king-design/react 3.0.0-beta.0 → 3.0.0-beta.2

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-react';
 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 k-icon-minus-small'
+  'className': 'k-spinner-icon k-icon-minus'
 };
 var _$tmp1 = {
-  'className': 'k-spinner-icon k-icon-arrow-down'
+  'className': 'k-spinner-icon k-icon-down'
 };
 var _$tmp2 = {
-  'className': 'k-spinner-icon k-icon-add-small'
+  'className': 'k-spinner-icon k-icon-add'
 };
 var _$tmp3 = {
-  'className': 'k-spinner-icon k-icon-arrow-up'
+  'className': 'k-spinner-icon k-icon-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, {
@@ -50,14 +53,15 @@ export default function ($props, $blocks, $__proto__) {
     '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, {
@@ -67,6 +71,7 @@ export default function ($props, $blocks, $__proto__) {
     '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

@@ -70,7 +70,7 @@ setDefault(function () {
   }).spinner;
 });
 export function makeStyles() {
-  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) {
+  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-wrapper{border:none;border-radius:0;&:hover{border:none;}}&.k-focus .k-input-wrapper{border:none;}.k-input-inner{text-align:center;}}.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: " + theme[size].height + ";\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
     };
@@ -80,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% - 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) {
+  }), ";.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{.k-input-wrapper{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-react';
 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-react';
+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-react';
 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-react';
+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-react';
+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

@@ -5,6 +5,7 @@ export interface StepsProps {
     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/components/steps/index.js

@@ -8,7 +8,8 @@ var typeDefs = {
   value: Number,
   status: ['normal', 'error', 'done'],
   type: ['default', 'line', 'simple', 'line-compact', 'dot'],
-  clickable: Boolean
+  clickable: Boolean,
+  vertical: Boolean
 };
 
 var defaults = function defaults() {

package/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/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,14 @@ 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
     },

package/components/steps/step.vdt.js

@@ -5,11 +5,11 @@ import { getRestProps, addStyle } from '../utils';
 import { context as StepsContext } from './context';
 import { Icon } from '../icon';
 var _$tmp0 = {
-  'className': 'k-icon-close-big',
+  'className': 'k-icon-close-bold',
   'color': 'danger'
 };
 var _$tmp1 = {
-  'className': 'k-icon-check',
+  'className': 'k-icon-check-bold',
   'color': 'primary'
 };
 export default function ($props, $blocks, $__proto__) {
@@ -32,7 +32,6 @@ export default function ($props, $blocks, $__proto__) {
 
       var value = _ref.value,
           status = _ref.status,
-          width = _ref.width,
           onChange = _ref.onChange,
           type = _ref.type;
       var selected = value === index;

package/components/steps/styles.d.ts

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

package/components/steps/styles.js

@@ -1,7 +1,7 @@
 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 { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
   gap: '10px',
@@ -18,10 +18,6 @@ var defaults = {
     return theme.color.placeholder;
   },
 
-  get markborder() {
-    return "1px solid " + theme.color.placeholder;
-  },
-
   markBgColor: '#fff',
   default: {
     get height() {
@@ -32,7 +28,12 @@ var defaults = {
       return theme.color.bg;
     },
 
-    markWidth: '16px'
+    get markborder() {
+      return "1px solid " + theme.color.placeholder;
+    },
+
+    markWidth: '16px',
+    padding: '16px'
   },
   // done
   done: {
@@ -44,6 +45,10 @@ var defaults = {
       return theme.color.primary;
     },
 
+    get markHoverBgColor() {
+      return palette(theme.color.primary, -4);
+    },
+
     markBgColor: '#fff',
 
     get mainColor() {
@@ -87,16 +92,21 @@ var defaults = {
   },
   // line
   line: {
+    get markborder() {
+      return "2px solid " + theme.color.placeholder;
+    },
+
     markWidth: '32px',
-    markFontSize: '24px',
+    markFontSize: '18px',
 
     get lineColor() {
       return theme.color.border;
     },
 
+    lineWidth: '2px',
     titleGap: '16px',
     descGap: '4px',
-    contentMaxWidth: '200px'
+    contentWidth: '200px'
   },
   // simple
   simple: {
@@ -114,6 +124,16 @@ var defaults = {
       return theme.color.danger;
     }
 
+  },
+  // vertical
+  vertical: {
+    line: {
+      minHeight: '100px',
+      padding: '16px'
+    },
+    simple: {
+      titleGap: '8px'
+    }
   }
 };
 var steps;
@@ -124,27 +144,36 @@ setDefault(function () {
 });
 var stepStatus = ['done', 'active', 'error'];
 export function makeStepsStyles() {
-  return /*#__PURE__*/css("display:flex;", makeCommonStyles(), ";&.k-default{", makeDefaultStyles(), ";}&.k-line,&.k-line-compact,&.k-simple{", makeLineStyles(), ";}&.k-line-compact{", makeLineCompactStyles(), ";}&.k-simple{", makeSimpleStyles(), ";}&.k-clickable{.k-done{cursor:pointer;}}");
+  return /*#__PURE__*/css("display:flex;", makeCommonStyles(), ";&.k-default{", makeDefaultStyles(), ";}&.k-line,&.k-line-compact,&.k-simple{", makeLineStyles(), ";}&.k-line-compact{", makeLineCompactStyles(), ";}&.k-simple{", makeSimpleStyles(), ";}&.k-clickable{.k-done{cursor:pointer;.k-step-wrapper:hover .k-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(), ";");
 }
 
 function makeDefaultStyles() {
   var defaults = steps.default;
-  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.k-step-wrapper{", center(), ";height:100%;}.k-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.k-step-main{display:flex;overflow:hidden;white-space:nowrap;}.k-step-title{padding-right:", steps.gap, ";}.k-step:last-of-type{.k-step-tail{display:none;}}.k-step-tail{position:absolute;top:0;right:calc(-1 * (", defaults.height, " / 2 + ", steps.gap, "));width:calc(", defaults.height, " / 2 + ", steps.gap, ");height:", defaults.height, ";overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;top:calc(-1 * ", steps.gap, ");}&:after{border-left-color:", defaults.bgColor, ";left:calc(-1 * ", steps.gap, ");}&:before{border-left-color:#fff;left:0;}}.k-step:not(:first-of-type){padding-left:calc(", defaults.height, " / 2 + ", steps.gap, ");}");
+  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.k-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.k-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.k-step-main{display:flex;overflow:hidden;white-space:nowrap;}.k-step-title{padding-right:", steps.gap, ";}.k-step:last-of-type{.k-step-tail{display:none;}}&:not(.k-vertical){", makeArrow(false), ";}");
+}
+
+function makeArrow(isVertical) {
+  var defaults = steps.default;
+  var offset = "calc(-1 * (" + defaults.height + " / 2 + " + steps.gap + "))";
+  var size = "calc(" + defaults.height + " / 2 + " + steps.gap + ")";
+  return /*#__PURE__*/css(".k-step-tail{position:absolute;", !isVertical ? "\n                    top: 0;\n                    right: " + offset + ";\n                    width: " + size + ";\n                    height: " + defaults.height + ";\n                " : "\n                    left: 0;\n                    bottom: " + offset + ";\n                    height: " + size + ";\n                    width: " + defaults.height + ";\n                ", " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.k-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
 }
 
 function makeLineStyles() {
-  var line = defaults.line;
-  return /*#__PURE__*/css(".k-step{display:flex;}.k-step-wrapper{display:inline-block;text-align:center;position:relative;}.k-step:last-of-type{flex:0 0 auto;}.k-step-mark{width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.k-icon{font-size:", line.markFontSize, ";}}.k-step-main{padding-top:", line.titleGap, ";}.k-step-title{font-size:14px;color:", theme.color.text, ";}.k-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";max-width:", line.contentMaxWidth, ";}.k-step-wrapper{&:before,&:after{content:'';display:block;height:1px;background:", line.lineColor, ";width:50%;position:absolute;top:calc(", line.markWidth, " / 2);}&:after{right:0;}}.k-step{&:first-of-type .k-step-wrapper:before,&:last-of-type .k-step-wrapper:after{background:transparent;}}.k-step-tail{flex:1;height:1px;background:", line.lineColor, ";margin-top:calc(", line.markWidth, " / 2);}.k-step{&.k-done{.k-step-tail,&:not(:last-of-type) .k-step-wrapper:after,&:not(:first-of-type) .k-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).k-active{.k-step-wrapper:before{background:", theme.color.primary, ";}}&.k-active .k-step-title{color:", theme.color.primary, ";}&.k-error .k-step-title{color:", theme.color.danger, ";}}");
+  var line = steps.line;
+  var top = "calc(" + line.markWidth + " / 2 - " + line.lineWidth + " / 2)";
+  return /*#__PURE__*/css(".k-step{display:flex;}.k-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.k-step:last-of-type{flex:0 0 auto;}.k-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.k-icon{font-size:", line.markFontSize, ";}}.k-step-main{padding-top:", line.titleGap, ";}.k-step-title{font-size:14px;color:", theme.color.text, ";}.k-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.k-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.k-step{&:first-of-type .k-step-wrapper:before,&:last-of-type .k-step-wrapper:after{background:transparent;}}.k-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.k-step{&.k-done{.k-step-tail,&:not(:last-of-type) .k-step-wrapper:after,&:not(:first-of-type) .k-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).k-active{.k-step-wrapper:before{background:", theme.color.primary, ";}}&.k-active .k-step-title{color:", theme.color.primary, ";}&.k-error .k-step-title{color:", theme.color.danger, ";}}");
 }
 
 function makeLineCompactStyles() {
-  var line = defaults.line;
-  return /*#__PURE__*/css(".k-step-wrapper{display:inline-flex;text-align:left;&:before,&:after{display:none;}}.k-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.k-step-content{margin:0;}.k-step-tail{margin-right:", line.titleGap, ";}.k-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:1px;background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.k-step:last-of-type .k-step-title:after{display:none;}.k-step{&.k-done{.k-step-title:after{background:", theme.color.primary, ";}}}");
+  var line = steps.line;
+  return /*#__PURE__*/css(".k-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.k-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.k-step-content{margin:0;}.k-step-tail{margin-right:", line.titleGap, ";}.k-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.k-step:last-of-type .k-step-title:after{display:none;}.k-step{&.k-done{.k-step-title:after{background:", theme.color.primary, ";}}}");
 }
 
 function makeSimpleStyles() {
-  var simple = defaults.simple;
-  return /*#__PURE__*/css(".k-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.k-step-wrapper{font-size:0;&:before,&:after{top:calc(", simple.markWidth, " / 2);}}.k-step-main{font-size:", theme.default.fontSize, ";}.k-step-tail{margin-top:calc(", simple.markWidth, " / 2);}.k-step{&.k-done{.k-step-mark{background:", simple.doneMarkBgColor, ";}}&.k-error{.k-step-mark{background:", simple.errorMarkBgColor, ";}}}");
+  var simple = steps.simple;
+  var top = "calc(" + simple.markWidth + " / 2 - " + steps.line.lineWidth + " / 2)";
+  return /*#__PURE__*/css(".k-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.k-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.k-step-main{font-size:", theme.default.fontSize, ";}.k-step-tail{margin-top:", top, ";}.k-step{&.k-done{.k-step-mark{background:", simple.doneMarkBgColor, ";}}&.k-error{.k-step-mark{background:", simple.errorMarkBgColor, ";}}}");
 }
 
 function center(flex) {
@@ -159,5 +188,9 @@ export function makeCommonStyles() {
   return /*#__PURE__*/css(".k-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
     var styles = steps[status];
     return /*#__PURE__*/css("&.k-", status, "{.k-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
-  }), ";}.k-step-mark{", center('inline-flex'), ";border:", steps.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
+  }), ";}.k-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
+}
+export function makeVerticalStyles() {
+  var verticalLine = steps.vertical.line;
+  return /*#__PURE__*/css("&.k-vertical{&.k-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true), ";.k-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.k-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.k-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.k-line,&.k-line-compact,&.k-simple{flex-direction:column;.k-step{flex:none;min-height:", verticalLine.minHeight, ";}.k-step-wrapper{display:flex;width:auto;text-align:left;}.k-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.k-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.k-step-wrapper{&:before,&:after{display:none;}}.k-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple{.k-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.k-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
 }