@king-design/vue 2.0.15 → 3.0.0-beta.0

package/components/pagination/styles.js

@@ -23,7 +23,16 @@ var defaults = deepDefaults({
   gap: '16px',
   btn: {
     gap: '6px',
-    padding: '0 3px'
+    padding: '0 3px',
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get hoverBgColor() {
+      return theme.color.hoverBg;
+    }
+
   },
   // goto
   goto: {
@@ -55,7 +64,7 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}&:hover{background:", pagination.btn.hoverBgColor, ";}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");

package/components/radio/styles.js

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var defaults = {
-  width: '14px',
+  width: '16px',
 
   get transition() {
     return theme.transition.small;
@@ -38,10 +38,20 @@ var defaults = {
       return theme.color.disabledBg;
     },
 
-    get innerColor() {
-      return theme.color.disabledBorder;
-    }
+    checked: {
+      get borderColor() {
+        return palette(theme.color.primary, -2);
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -4);
+      },
 
+      get innerColor() {
+        return palette(theme.color.primary, -3);
+      }
+
+    }
   }
 };
 var radio;
@@ -51,5 +61,5 @@ setDefault(function () {
   }).radio;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";&:before{background:", radio.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}&:hover{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

package/components/select/base.vdt.js

@@ -130,9 +130,10 @@ export default function ($props, $blocks, $__proto__) {
 
                     return block ? block.call($this, callBlock, data) : callBlock();
                   }, __$blocks['value'](_$no, [value[$key], $label])), 0, 'k-select-text'), _$cc(Icon, {
-                    'className': 'ion-ios-close k-select-close',
+                    'className': 'k-icon-close k-select-close',
                     'ev-click': this.delete.bind(this, $key),
-                    'hoverable': !disabled
+                    'hoverable': !disabled,
+                    'disabled': disabled
                   })], 4, 'k-select-tag', null, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : undefined);
                 }, $this);
               }, __$blocks['values'] = function ($super, data) {
@@ -170,10 +171,8 @@ export default function ($props, $blocks, $__proto__) {
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
             return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
-              'className': _$cn({
-                "k-select-arrow ion-ios-arrow-down": true,
-                'k-disabled': $props.isDisableArrow
-              })
+              'className': 'k-select-arrow ion-ios-arrow-down',
+              'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {
             var block = $blocks['suffix'];

package/components/select/styles.js

@@ -33,10 +33,6 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
-  get iconColor() {
-    return theme.color.placeholder;
-  },
-
   get activeColor() {
     return theme.color.primary;
   },
@@ -46,7 +42,6 @@ var defaults = deepDefaults({
   },
 
   suffixGap: '10px',
-  disabledArrowColor: '#e5e5e5',
   clearGap: "8px",
 
   get placeholderColor() {
@@ -94,7 +89,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "3px 8px",
+    padding: "1px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -104,13 +99,13 @@ var defaults = deepDefaults({
       return theme.color.bg;
     },
 
-    disabledBgColor: '#eee',
+    disabledBgColor: '#f8f9fa',
     delete: {
       gap: "8px",
       fontSize: '14px',
 
       get color() {
-        return theme.color.placeholder;
+        return theme.color.lightBlack;
       }
 
     }
@@ -164,21 +159,6 @@ var defaults = deepDefaults({
     multipleGap: "1px",
     multipleMargin: "0 2px 1px 0"
   };
-
-  if (size === 'large') {
-    // use default padding for large size
-    Object.defineProperty(memo.large, 'padding', {
-      get: function get() {
-        return "0 " + theme.default.padding;
-      }
-    });
-    Object.defineProperty(memo.large, 'fontSize', {
-      get: function get() {
-        return theme.default.fontSize;
-      }
-    });
-  }
-
   return memo;
 }, {}));
 var select;
@@ -188,7 +168,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";margin-top:2px;}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

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;
@@ -49,6 +49,7 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': this.isDisabledDecrease(),
     'className': 'k-spinner-btn k-left',
     'size': size,
+    'type': 'none',
     'children': !vertical ? _$cc(Icon, _$tmp0) : _$cc(Icon, _$tmp1)
   }), _$cc(Input, {
     'className': 'k-spinner-input',
@@ -65,6 +66,7 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': this.isDisabledIncrease(),
     'className': 'k-spinner-btn k-right',
     'size': size,
+    'type': 'none',
     '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/steps/index.d.ts

@@ -2,8 +2,8 @@ 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;
 }
 export declare class Steps extends Component<StepsProps> {

package/components/steps/index.js

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

package/components/steps/index.vdt.js

@@ -40,6 +40,7 @@ export default function ($props, $blocks, $__proto__) {
       value: value,
       status: status,
       width: width,
+      type: type,
       onChange: this.changeIndex
     },
     'children': _$cv('div', _extends({

package/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-vue-next';
 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;
 
@@ -25,22 +33,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/components/steps/styles.d.ts

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

package/components/steps/styles.js

@@ -4,137 +4,116 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  get transition() {
-    return theme.transition.middle;
-  },
+  gap: '10px',
 
-  get height() {
-    return theme.default.height;
+  get titleColor() {
+    return theme.color.title;
   },
 
-  get bgColor() {
-    return theme.color.bg;
+  get desColor() {
+    return theme.color.lightBlack;
   },
 
-  gutter: '10px',
-  gapTop: '-2px',
-  // head
-  head: {
-    innerWidth: '16px',
-
-    get innerBorder() {
-      return "1px solid " + theme.color.placeholder;
-    },
+  get markColor() {
+    return theme.color.placeholder;
+  },
 
-    iconFontSize: '24px',
-    paddingRight: '10px'
+  get markborder() {
+    return "1px solid " + theme.color.placeholder;
   },
-  main: {
-    get color() {
-      return theme.color.text;
+
+  markBgColor: '#fff',
+  default: {
+    get height() {
+      return theme.default.height;
     },
 
-    get titlePaddingRight() {
-      return steps.head.paddingRight;
+    get bgColor() {
+      return theme.color.bg;
     },
 
-    contentFontSize: '12px'
+    markWidth: '16px'
   },
   // done
   done: {
-    get headColor() {
+    get markColor() {
       return theme.color.primary;
     },
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.primary;
     },
 
-    headInnerBgColor: 'transparent',
+    markBgColor: '#fff',
 
     get mainColor() {
       return theme.color.primary;
-    },
-
-    get simpleColor() {
-      return theme.color.text;
     }
 
   },
   // active
   active: {
-    headColor: '#fff',
+    markColor: '#fff',
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.primary;
     },
 
-    get headInnerBgColor() {
+    get markBgColor() {
       return theme.color.primary;
     },
 
     get mainColor() {
       return theme.color.primary;
-    },
-
-    get simpleColor() {
-      return theme.color.primary;
     }
 
   },
   // error
   error: {
-    get headColor() {
+    get markColor() {
       return theme.color.danger;
     },
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.danger;
     },
 
-    headInnerBgColor: 'transparent',
+    markBgColor: '#fff',
 
     get mainColor() {
       return theme.color.danger;
-    },
-
-    get simpleColor() {
-      return theme.color.danger;
     }
 
   },
   // line
   line: {
-    bgColor: '#fff',
-    mainContentGap: '5px 0 0',
-
-    get tailBgColor() {
-      return theme.color.placeholder;
-    },
+    markWidth: '32px',
+    markFontSize: '24px',
 
-    get doneTailBgColor() {
-      return theme.color.primary;
+    get lineColor() {
+      return theme.color.border;
     },
 
-    innerWidth: '32px',
-    innerLineHeight: '30px',
-    innerFontSize: '18px',
-    headTop: '16px',
-    titleFontSize: '14px',
-    titleGopTop: '16px',
-    iconLineHeight: '30px',
-    tailTop: '16px',
-    width: '160px'
+    titleGap: '16px',
+    descGap: '4px',
+    contentMaxWidth: '200px'
   },
   // simple
   simple: {
-    fontSize: '14px',
+    markWidth: '12px',
+
+    get markBgColor() {
+      return theme.color.placeholder;
+    },
 
-    get color() {
-      return theme.color.disabled;
+    get doneMarkBgColor() {
+      return theme.color.primary;
     },
 
-    headPaddingRight: '6px'
+    get errorMarkBgColor() {
+      return theme.color.danger;
+    }
+
   }
 };
 var steps;
@@ -145,14 +124,40 @@ setDefault(function () {
 });
 var stepStatus = ['done', 'active', 'error'];
 export function makeStepsStyles() {
-  return /*#__PURE__*/css("display:flex;&.k-default,&.k-line{", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
-    var styles = steps[status];
-    return /*#__PURE__*/css(".k-", status, "{.k-step-inner{color:", styles.headColor, ";border-color:", styles.headInnerBorderColor, "!important;background:", styles.headInnerBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
-  }), ";.k-step-head{padding-right:", steps.head.paddingRight, ";}.k-step-inner{width:", steps.head.innerWidth, ";height:", steps.head.innerWidth, ";line-height:calc(", steps.head.innerWidth, " - 2px);border-radius:50%;text-align:center;border:", steps.head.innerBorder, ";}.k-step-icon:before{line-height:calc(", steps.head.innerWidth, " - 2px);}.k-step-main{color:", steps.main.color, ";}.k-step-tail{position:absolute;}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple,&.k-default{text-align:center;height:", steps.height, ";line-height:", steps.height, ";overflow:hidden;.k-step-head,.k-step-main,.k-step-content,.k-step-inner{display:inline-block;}.k-step{white-space:nowrap;}.k-step-wrapper{overflow:hidden;}}&.k-default{background:", steps.bgColor, ";.k-step-tail{top:0;right:calc(-1 * (", steps.height, " / 2 + ", steps.gutter, "));width:calc(", steps.height, " / 2 + ", steps.gutter, ");height:", steps.height, ";overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", steps.height, " / 2 + ", steps.gutter, ");border-style:solid;border-color:transparent;position:absolute;top:calc(-1 * ", steps.gutter, ");}&:after{border-left-color:", steps.bgColor, ";left:calc(-1 * ", steps.head.paddingRight, ");}&:before{border-left-color:", steps.line.bgColor, ";left:0;}}.k-step-head,.k-step-inner{vertical-align:middle;margin-top:", steps.gapTop, ";}.k-step:not(:first-of-type){padding-left:calc(", steps.height, " / 2 + ", steps.gutter, ");}}&.k-line{.k-step{width:auto!important;&:last-of-type{flex:0 0 auto;.k-step-wrapper{display:flex;}.k-step-title{padding-right:0;}}}.k-step-head{background:", steps.line.bgColor, ";position:relative;display:flex;padding:0;&:before,&:after{content:'';display:block;flex:1;height:1px;background:", theme.color.placeholder, ";top:", steps.line.headTop, ";position:relative;}}.k-step-inner{width:", steps.line.innerWidth, ";height:", steps.line.innerWidth, ";line-height:", steps.line.innerLineHeight, ";font-size:", steps.line.innerFontSize, ";}.k-step-main{position:relative;width:", steps.line.width, ";}.k-step-title{line-height:", steps.head.innerWidth, ";background:", steps.line.bgColor, ";font-size:", steps.line.titleFontSize, ";padding:0;margin-top:", steps.line.titleGopTop, ";}.k-step-content{margin:", steps.line.mainContentGap, ";}.k-step-tail{left:0;right:", steps.head.paddingRight, ";top:calc(", steps.head.innerWidth, " / 2);height:1px;background:", steps.line.tailBgColor, ";}.k-step:first-of-type .k-step-head:before,.k-step:last-of-type .k-step-head:after{background:transparent;}.k-done{.k-step-tail{background:", steps.line.doneTailBgColor, ";}.k-step-head{&:before,&:after{background:", theme.color.primary, ";}}}.k-active{.k-step-head{&:before{background:", theme.color.primary, ";}}}.k-step-icon:before{line-height:", steps.line.iconLineHeight, ";}.k-step-wrapper{display:inline-block!important;text-align:center;}.k-step-tail{right:0;top:", steps.line.tailTop, ";}}&.k-simple{font-size:", steps.simple.fontSize, ";", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
-    var styles = steps[status];
-    return /*#__PURE__*/css(".k-", status, "{.k-step-main,.k-step-inner{color:", styles.simpleColor, ";}}");
-  }), ";.k-step,.k-step-main{color:", steps.simple.color, ";}.k-step-head{padding-right:", steps.simple.headPaddingRight, ";vertical-align:top;}}&.k-clickable{.k-done{cursor:pointer;}}");
+  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;}}");
+}
+
+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, ");}");
+}
+
+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, ";}}");
 }
-export function makeStepStyles() {
-  return /*#__PURE__*/css("position:relative;flex:1;.k-step-icon:before{font-size:", steps.head.iconFontSize, ";}.k-step-title{display:inline-block;padding-right:", steps.main.titlePaddingRight, ";white-space:nowrap;}.k-step-content{font-size:", steps.main.contentFontSize, ";}.k-step-inner,.k-step-main{transition:all ", steps.transition, ";}");
+
+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, ";}}}");
+}
+
+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, ";}}}");
+}
+
+function center(flex) {
+  if (flex === void 0) {
+    flex = 'flex';
+  }
+
+  return /*#__PURE__*/css("display:", flex, ";align-items:center;justify-content:center;");
+}
+
+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, ";}");
 }