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

package/es/site/data/components/select/demos/draggable/index.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      days1: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+      days2: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']
+    };
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/draggable/react.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    days1?: string[];
+    days2?: string[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/select/demos/draggable/react.js

@@ -0,0 +1,85 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      days1: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+      days2: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      multiple: true,
+      draggable: true,
+      value: this.state.days1,
+      onChangeValue: function onChangeValue(days1) {
+        return _this2.setState({
+          days1: days1
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), _JSON$stringify(this.state.days1), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Select, {
+      multiple: true,
+      draggable: true,
+      nowrap: true,
+      value: this.state.days2,
+      onChangeValue: function onChangeValue(days2) {
+        return _this2.setState({
+          days2: days2
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), _JSON$stringify(this.state.days2));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/select/demos/flat/index.d.ts

@@ -0,0 +1,5 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+}

package/es/site/data/components/select/demos/flat/index.js

@@ -0,0 +1,17 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/flat/react.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    render(): JSX.Element;
+}

package/es/site/data/components/select/demos/flat/react.js

@@ -0,0 +1,73 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      flat: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Select, {
+      flat: true,
+      multiple: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Select, {
+      flat: true,
+      disabled: true,
+      multiple: true,
+      value: ['Monday', 'Tuesday']
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/select/demos/inline/index.d.ts

@@ -0,0 +1,5 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+}

package/es/site/data/components/select/demos/inline/index.js

@@ -0,0 +1,17 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/inline/react.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    render(): JSX.Element;
+}

package/es/site/data/components/select/demos/nowrap/index.d.ts

@@ -0,0 +1,5 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+}

package/es/site/data/components/select/demos/nowrap/index.js

@@ -0,0 +1,17 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/nowrap/react.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    render(): JSX.Element;
+}

package/es/site/data/components/select/demos/nowrap/react.js

@@ -0,0 +1,41 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      multiple: true,
+      filterable: true,
+      clearable: true,
+      nowrap: true,
+      value: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/select/demos/size/index.d.ts

@@ -3,6 +3,7 @@ import { Component } from 'intact';
 import './index.styl';
 interface Props {
     day?: string | null;
+    days?: string[];
 }
 export default class extends Component {
     static template: string | import("intact").Template<any>;

package/es/site/data/components/select/demos/size/index.js

@@ -13,7 +13,8 @@ var default_1 = /*#__PURE__*/function (_Component) {
 
   default_1.defaults = function defaults() {
     return {
-      day: null
+      day: null,
+      days: []
     };
   };
 

package/es/site/data/components/select/demos/size/react.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './index.styl';
 interface Props {
     day?: string | null;
+    days?: string[];
 }
 export default class Demo extends React.Component<{}, Props> {
     state: Props;

package/es/site/data/components/select/demos/size/react.js

@@ -18,7 +18,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.state = {
-      day: null
+      day: null,
+      days: []
     };
     return _this;
   }
@@ -115,6 +116,97 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       value: "Saturday"
     }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
       value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Select, {
+      value: this.state.days,
+      onChangeValue: function onChangeValue(days) {
+        return _this2.setState({
+          days: days
+        });
+      },
+      size: "large",
+      multiple: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement(Select, {
+      value: this.state.days,
+      onChangeValue: function onChangeValue(days) {
+        return _this2.setState({
+          days: days
+        });
+      },
+      multiple: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement(Select, {
+      value: this.state.days,
+      onChangeValue: function onChangeValue(days) {
+        return _this2.setState({
+          days: days
+        });
+      },
+      size: "small",
+      multiple: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement(Select, {
+      value: this.state.days,
+      onChangeValue: function onChangeValue(days) {
+        return _this2.setState({
+          days: days
+        });
+      },
+      size: "mini",
+      multiple: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
     }, "\u661F\u671F\u5929")));
   };
 

package/es/site/data/components/steps/demos/basic/react.js

@@ -62,7 +62,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, "Previous Step"), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       onClick: this.next,
-      disabled: this.state.index === 2
+      disabled: this.state.index === 3
     }, "Next Step"));
   };
 

package/es/site/data/components/steps/demos/clickable/react.js

@@ -56,6 +56,21 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       title: "\u9009\u62E9\u5F39\u6027IP"
     }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
       title: "\u8BBE\u7F6EVPC"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Steps, {
+      value: this.state.index,
+      onChangeValue: function onChangeValue(index) {
+        return _this2.setState({
+          index: index
+        });
+      },
+      type: "line",
+      clickable: true
+    }, /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u914D\u7F6E"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u5F39\u6027IP"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u8BBE\u7F6EVPC"
     })), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       onClick: this.previous,

package/es/site/data/components/steps/demos/error/react.js

@@ -12,7 +12,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   var _proto = Demo.prototype;
 
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(Steps, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Steps, {
       value: 1,
       status: "error"
     }, /*#__PURE__*/React.createElement(Step, {
@@ -21,7 +21,27 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       title: "\u9009\u62E9\u5F39\u6027IP"
     }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
       title: "\u8BBE\u7F6EVPC"
-    }));
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Steps, {
+      value: 1,
+      status: "error",
+      type: "line"
+    }, /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u914D\u7F6E"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u5F39\u6027IP"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u8BBE\u7F6EVPC"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Steps, {
+      value: 1,
+      status: "error",
+      type: "simple"
+    }, /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u914D\u7F6E"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u5F39\u6027IP"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u8BBE\u7F6EVPC"
+    })));
   };
 
   return Demo;

package/es/site/data/components/steps/demos/line/react.js

@@ -56,6 +56,20 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       title: "\u9009\u62E9\u5F39\u6027IP"
     }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
       title: "\u8BBE\u7F6EVPC"
+    })), /*#__PURE__*/React.createElement(Steps, {
+      value: this.state.index,
+      onChangeValue: function onChangeValue(index) {
+        return _this2.setState({
+          index: index
+        });
+      },
+      type: "line-compact"
+    }, /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u914D\u7F6E"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u9009\u62E9\u5F39\u6027IP"
+    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
+      title: "\u8BBE\u7F6EVPC"
     })), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       onClick: this.previous,
@@ -64,17 +78,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "primary",
       onClick: this.next,
       disabled: this.state.index === 2
-    }, "Next Step"), /*#__PURE__*/React.createElement(Steps, {
-      value: 1,
-      status: "error",
-      type: "line"
-    }, /*#__PURE__*/React.createElement(Step, {
-      title: "\u9009\u62E9\u914D\u7F6E"
-    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
-      title: "\u9009\u62E9\u5F39\u6027IP"
-    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
-      title: "\u8BBE\u7F6EVPC"
-    })));
+    }, "Next Step"));
   };
 
   return Demo;

package/es/site/data/components/steps/demos/simple/react.js

@@ -64,17 +64,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "primary",
       onClick: this.next,
       disabled: this.state.index === 2
-    }, "Next Step"), /*#__PURE__*/React.createElement(Steps, {
-      value: 1,
-      status: "error",
-      type: "simple"
-    }, /*#__PURE__*/React.createElement(Step, {
-      title: "\u9009\u62E9\u914D\u7F6E"
-    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
-      title: "\u9009\u62E9\u5F39\u6027IP"
-    }, "\u8BF7\u9009\u62E9\u4E3B\u673A\u5F39\u6027IP\u7684\u914D\u7F6E\u4FE1\u606F"), /*#__PURE__*/React.createElement(Step, {
-      title: "\u8BBE\u7F6EVPC"
-    })));
+    }, "Next Step"));
   };
 
   return Demo;

package/es/site/data/components/steps/demos/vertical/index.d.ts

@@ -0,0 +1,14 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import './index.styl';
+interface Props {
+    index?: number;
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        index: number;
+    };
+    previous(): void;
+    next(): void;
+}

package/es/site/data/components/steps/demos/vertical/index.js

@@ -0,0 +1,40 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import { bind } from 'kpc';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      index: 0
+    };
+  };
+
+  var _proto = default_1.prototype;
+
+  _proto.previous = function previous() {
+    this.set('index', this.get('index') - 1);
+  };
+
+  _proto.next = function next() {
+    this.set('index', this.get('index') + 1);
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };
+
+__decorate([bind], default_1.prototype, "previous", null);
+
+__decorate([bind], default_1.prototype, "next", null);