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

package/es/site/data/components/button/demos/loading/react.js

@@ -43,7 +43,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       circle: true,
       loading: true
     }, /*#__PURE__*/React.createElement("i", {
-      className: "k-icon ion-ios-search"
+      className: "k-icon k-icon-search"
     })), /*#__PURE__*/React.createElement("br", null), " ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       loading: this.state.loading1,
@@ -53,20 +53,20 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       loading: this.state.loading2,
       onClick: this.onClick.bind(this, 'loading2')
     }, /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search"
+      className: "k-icon-search"
     }), "\u70B9\u51FB\u52A0\u8F7D"), /*#__PURE__*/React.createElement(Button, {
       icon: true,
       circle: true,
       loading: this.state.loading3,
       onClick: this.onClick.bind(this, 'loading3')
     }, /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search"
+      className: "k-icon-search"
     })), /*#__PURE__*/React.createElement(Button, {
       type: "primary",
       loading: this.state.loading4,
       onClick: this.onClick.bind(this, 'loading4')
     }, "\u56FE\u6807\u5728\u53F3\u4FA7", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search"
+      className: "k-icon-search"
     })));
   };
 

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

@@ -24,26 +24,26 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       circle: true,
       size: "large"
     }, /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search",
+      className: "k-icon-search",
       size: "large"
     })), /*#__PURE__*/React.createElement(Button, {
       icon: true,
       circle: true
     }, /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search"
+      className: "k-icon-search"
     })), /*#__PURE__*/React.createElement(Button, {
       icon: true,
       circle: true,
       size: "small"
     }, /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search",
+      className: "k-icon-search",
       size: "small"
     })), /*#__PURE__*/React.createElement(Button, {
       icon: true,
       circle: true,
       size: "mini"
     }, /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-search",
+      className: "k-icon-search",
       size: "mini"
     })));
   };

package/es/site/data/components/datepicker/demos/datetime/index.d.ts

@@ -1,5 +1,6 @@
 export { default as data } from './index.json';
 import { Component } from 'intact';
+import './index.styl';
 interface Props {
     datetime1?: string | null;
     datetime2?: string | null;

package/es/site/data/components/datepicker/demos/datetime/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 export { default as data } from './index.json';
 import { Component } from 'intact';
 import template from './index.vdt';
+import './index.styl';
 
 var default_1 = /*#__PURE__*/function (_Component) {
   _inheritsLoose(default_1, _Component);

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

@@ -16,7 +16,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "hover ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));
   };
 

package/es/site/data/components/dropdown/demos/checkbox/react.js

@@ -28,7 +28,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Button, null, "More", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-right"
+      className: "k-icon-right"
     })), /*#__PURE__*/React.createElement(DropdownMenu, {
       className: "checkbox-menu"
     }, /*#__PURE__*/React.createElement(DropdownItem, {

package/es/site/data/components/dropdown/demos/disabled/react.js

@@ -20,11 +20,11 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "disabled ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "disabled item ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, {
       disabled: true
     }, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));

package/es/site/data/components/dropdown/demos/nested/react.js

@@ -18,7 +18,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "click ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, {
       className: "dropdown-demo"
     }, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"), /*#__PURE__*/React.createElement(Dropdown, {
@@ -27,8 +27,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         at: 'right top'
       },
       className: "dropdown-demo"
-    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "hover"), /*#__PURE__*/React.createElement("i", {
-      className: "ion-ios-arrow-right"
+    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "hover"), /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-right"
     })), /*#__PURE__*/React.createElement(DropdownMenu, {
       className: "dropdown-demo"
     }, /*#__PURE__*/React.createElement(Dropdown, {
@@ -36,8 +36,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         my: 'left top',
         at: 'right top'
       }
-    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "hover"), /*#__PURE__*/React.createElement("i", {
-      className: "ion-ios-arrow-right"
+    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "hover"), /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-right"
     })), /*#__PURE__*/React.createElement(DropdownMenu, {
       className: "dropdown-demo"
     }, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"))), /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"))), /*#__PURE__*/React.createElement(Dropdown, {
@@ -46,8 +46,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         my: 'left top',
         at: 'right top'
       }
-    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "click"), /*#__PURE__*/React.createElement("i", {
-      className: "ion-ios-arrow-right"
+    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "click"), /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-right"
     })), /*#__PURE__*/React.createElement(DropdownMenu, {
       className: "dropdown-demo"
     }, /*#__PURE__*/React.createElement(Dropdown, {
@@ -56,8 +56,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         my: 'left top',
         at: 'right top'
       }
-    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "click"), /*#__PURE__*/React.createElement("i", {
-      className: "ion-ios-arrow-right"
+    }, /*#__PURE__*/React.createElement(DropdownItem, null, /*#__PURE__*/React.createElement("span", null, "click"), /*#__PURE__*/React.createElement(Icon, {
+      className: "k-icon-right"
     })), /*#__PURE__*/React.createElement(DropdownMenu, {
       className: "dropdown-demo"
     }, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"))), /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"))), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));

package/es/site/data/components/dropdown/demos/position/react.js

@@ -21,7 +21,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "left ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, {
       position: {
         my: 'right top',
@@ -30,13 +30,13 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "right ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, {
       position: "top"
     }, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "top center ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));
   };
 

package/es/site/data/components/dropdown/demos/trigger/react.js

@@ -16,13 +16,13 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "hover ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, {
       trigger: "click"
     }, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, "click ", /*#__PURE__*/React.createElement(Icon, {
-      className: "ion-ios-arrow-down"
+      className: "k-icon-down"
     })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, {
       trigger: "focus"
     }, /*#__PURE__*/React.createElement(Input, {

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

@@ -255,7 +255,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       onClick: this.handleSubmit
     }, "\u63D0\u4EA4"), /*#__PURE__*/React.createElement(Button, {
       style: {
-        "marginLeft": "20px"
+        "marginLeft": "8px"
       },
       onClick: this.reset
     }, "\u91CD\u7F6E")));

package/es/site/data/components/icon/demos/icons/index.d.ts

@@ -1,9 +1,13 @@
 export { default as data } from './index.json';
 import { Component } from 'intact';
 import './index.styl';
-export default class extends Component {
+interface Props {
+    keywords?: string;
+    fonts: string[][];
+}
+export default class extends Component<Props> {
     static template: string | import("intact").Template<any>;
-    static defaults(): {
-        fonts: string[];
-    };
+    static defaults(): Props;
+    init(): void;
+    filter(): string[][];
 }

package/es/site/data/components/icon/demos/icons/index.js

@@ -1,4 +1,7 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 export { default as data } from './index.json';
 import { Component } from 'intact';
 import template from './index.vdt';
@@ -13,10 +16,41 @@ var default_1 = /*#__PURE__*/function (_Component) {
 
   default_1.defaults = function defaults() {
     return {
-      fonts: ["tag", "clone", "information-fill", "warning-fill", "success-fill", "error-fill", "question-fill", "information", "cloud", "pin", "home", "cut", "servers", "internet", "mail", "paper", "phone", "panel", "alarm", "notification-outline", "earphone", "settings-horizontal", "message", "heart-outline", "return-right", "picture", "logout", "all", "drag", "settings-vertical", "more", "more-circled", "folder", "unlock", "user", "folder-open", "lock", "users", "edit", "location", "delete", "edit2", "settings", "calendar", "search", "alert", "question", "zoom-in", "zoom-out", "fault-outline", "truth-circled", "hide", "visible", "time", "refresh", "batchsearch", "refresh2", "upload", "download", "left-squared", "right-squared", "down-squared", "up-squared", "arrow-right-circled", "arrow-down-circled", "arrow-left-circled", "arrow-up-circled", "arrow-up-big", "arrow-left-big", "arrow-down", "arrow-right-big", "arrow-right", "sortfill", "arrow-left", "arrow-up", "arrow-down-big", "sort", "sortbig", "truth", "check", "close-big", "add-small", "minus", "close", "minuss-mall", "add-big"]
+      keywords: '',
+      fonts: [["information-fill"], ["warning-fill"], ["success-fill"], ["error-fill"], ["question-fill"], ["heart-fill"], ['heart'], ['notification-fill'], ['notification'], ["information"], ["alert"], ["question"], ["zoom-in"], ["zoom-out"], ["close-outline"], ["check-outline"], ["time"], ['right-circled', 'arrow'], ['down-circled', 'arrow'], ['right-circled', 'arrow'], ['up-circled', 'arrow'], ['right-squared', 'arrow'], ['down-squared', 'arrow'], ['left-squared', 'arrow'], ['up-squared', 'arrow'], ['right', 'arrow'], ['down', 'arrow'], ['left', 'arrow'], ['up', 'arrow'], ['right-bold', 'arrow'], ['down-bold', 'arrow'], ['left-bold', 'arrow'], ['up-bold', 'arrow'], ['sort'], ['sort-bold'], ['close'], ['close-bold'], ['check'], ['check-bold'], ['add'], ['add-bold'], ['minus'], ['minus-bold'], ['share'], ['tag'], ['clone'], ['cloud'], ['pin'], ['home'], ['cut'], ['server'], ['internet'], ['mail'], ['paper'], ['phone'], ['panel'], ['alarm'], ['earphone'], ['settings-horizontal'], ['settings-vertical'], ['settings'], ['message'], ['return-right'], ['picture'], ['logout'], ['all'], ['drag'], ['more'], ['more-circled'], ['folder'], ['folder-open'], ['lock'], ['unlock'], ['user'], ['users'], ['edit'], ['location'], ['delete'], ['calendar'], ['search'], ['batchsearch'], ['hidden'], ['visible'], ['refresh'], ['upload'], ['download']]
     };
   };
 
+  var _proto = default_1.prototype;
+
+  _proto.init = function init() {
+    var fonts = this.get('fonts');
+    var map = {};
+    fonts.forEach(function (_ref) {
+      var font = _ref[0];
+
+      if (map[font]) {
+        console.log('duplicated', font);
+      }
+
+      map[font] = true;
+    });
+  };
+
+  _proto.filter = function filter() {
+    var _context;
+
+    var keywords = _trimInstanceProperty(_context = this.get('keywords')).call(_context).toLowerCase();
+
+    var fonts = this.get('fonts');
+    if (!keywords) return fonts;
+    return _filterInstanceProperty(fonts).call(fonts, function (font) {
+      var _context2, _context3;
+
+      return _includesInstanceProperty(_context2 = font[0]).call(_context2, keywords) || font[1] && _includesInstanceProperty(_context3 = font[1]).call(_context3, keywords);
+    });
+  };
+
   return default_1;
 }(Component);
 

package/es/site/data/components/icon/demos/icons/react.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import './index.styl';
-export default class Demo extends React.Component {
-    state: {
-        fonts: string[];
-    };
+interface Props {
+    keywords?: string;
+    fonts: string[][];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
     private classNames;
+    componentDidMount(): void;
+    filter(): string[][];
     render(): JSX.Element;
 }
+export {};

package/es/site/data/components/icon/demos/icons/react.js

@@ -1,8 +1,11 @@
 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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import React from 'react';
-import { Icon } from '@king-design/react';
+import { Icon, Input } from '@king-design/react';
 import './index.styl';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
@@ -19,7 +22,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.state = {
-      fonts: ["tag", "clone", "information-fill", "warning-fill", "success-fill", "error-fill", "question-fill", "information", "cloud", "pin", "home", "cut", "servers", "internet", "mail", "paper", "phone", "panel", "alarm", "notification-outline", "earphone", "settings-horizontal", "message", "heart-outline", "return-right", "picture", "logout", "all", "drag", "settings-vertical", "more", "more-circled", "folder", "unlock", "user", "folder-open", "lock", "users", "edit", "location", "delete", "edit2", "settings", "calendar", "search", "alert", "question", "zoom-in", "zoom-out", "fault-outline", "truth-circled", "hide", "visible", "time", "refresh", "batchsearch", "refresh2", "upload", "download", "left-squared", "right-squared", "down-squared", "up-squared", "arrow-right-circled", "arrow-down-circled", "arrow-left-circled", "arrow-up-circled", "arrow-up-big", "arrow-left-big", "arrow-down", "arrow-right-big", "arrow-right", "sortfill", "arrow-left", "arrow-up", "arrow-down-big", "sort", "sortbig", "truth", "check", "close-big", "add-small", "minus", "close", "minuss-mall", "add-big"]
+      keywords: '',
+      fonts: [["information-fill"], ["warning-fill"], ["success-fill"], ["error-fill"], ["question-fill"], ["heart-fill"], ['heart'], ['notification-fill'], ['notification'], ["information"], ["alert"], ["question"], ["zoom-in"], ["zoom-out"], ["close-outline"], ["check-outline"], ["time"], ['right-circled', 'arrow'], ['down-circled', 'arrow'], ['right-circled', 'arrow'], ['up-circled', 'arrow'], ['right-squared', 'arrow'], ['down-squared', 'arrow'], ['left-squared', 'arrow'], ['up-squared', 'arrow'], ['right', 'arrow'], ['down', 'arrow'], ['left', 'arrow'], ['up', 'arrow'], ['right-bold', 'arrow'], ['down-bold', 'arrow'], ['left-bold', 'arrow'], ['up-bold', 'arrow'], ['sort'], ['sort-bold'], ['close'], ['close-bold'], ['check'], ['check-bold'], ['add'], ['add-bold'], ['minus'], ['minus-bold'], ['share'], ['tag'], ['clone'], ['cloud'], ['pin'], ['home'], ['cut'], ['server'], ['internet'], ['mail'], ['paper'], ['phone'], ['panel'], ['alarm'], ['earphone'], ['settings-horizontal'], ['settings-vertical'], ['settings'], ['message'], ['return-right'], ['picture'], ['logout'], ['all'], ['drag'], ['more'], ['more-circled'], ['folder'], ['folder-open'], ['lock'], ['unlock'], ['user'], ['users'], ['edit'], ['location'], ['delete'], ['calendar'], ['search'], ['batchsearch'], ['hidden'], ['visible'], ['refresh'], ['upload'], ['download']]
     };
     return _this;
   }
@@ -41,20 +45,58 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     return ret.join(' ');
   };
 
+  _proto.componentDidMount = function componentDidMount() {
+    var fonts = this.state.fonts;
+    var map = {};
+    fonts.forEach(function (_ref) {
+      var font = _ref[0];
+
+      if (map[font]) {
+        console.log('duplicated', font);
+      }
+
+      map[font] = true;
+    });
+  };
+
+  _proto.filter = function filter() {
+    var _context2;
+
+    var keywords = _trimInstanceProperty(_context2 = this.state.keywords).call(_context2).toLowerCase();
+
+    var fonts = this.state.fonts;
+    if (!keywords) return fonts;
+    return _filterInstanceProperty(fonts).call(fonts, function (font) {
+      var _context3, _context4;
+
+      return _includesInstanceProperty(_context3 = font[0]).call(_context3, keywords) || font[1] && _includesInstanceProperty(_context4 = font[1]).call(_context4, keywords);
+    });
+  };
+
   _proto.render = function render() {
-    var _context2,
-        _this2 = this;
+    var _this2 = this,
+        _context5,
+        _context6;
 
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+      value: this.state.keywords,
+      onChangeValue: function onChangeValue(keywords) {
+        return _this2.setState({
+          keywords: keywords
+        });
+      },
+      placeholder: "Search icon",
+      clearable: true
+    }), /*#__PURE__*/React.createElement("div", {
       className: "icons"
-    }, _mapInstanceProperty(_context2 = this.state.fonts).call(_context2, function ($value, $key) {
+    }, _mapInstanceProperty(_context5 = _filterInstanceProperty(_context6 = this).call(_context6)).call(_context5, function ($value, $key) {
       return /*#__PURE__*/React.createElement("div", {
         className: "icon"
       }, /*#__PURE__*/React.createElement(Icon, {
-        className: _this2.classNames('k-icon-' + $value),
+        className: _this2.classNames('k-icon-' + $value[0]),
         size: "large"
-      }), /*#__PURE__*/React.createElement("div", null, 'k-icon-' + $value));
-    }));
+      }), /*#__PURE__*/React.createElement("div", null, 'k-icon-' + $value[0]));
+    })));
   };
 
   return Demo;

package/es/site/data/components/input/demos/blocks/react.js

@@ -17,7 +17,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       placeholder: "please enter",
       slotPrepend: /*#__PURE__*/React.createElement(React.Fragment, null, "http://"),
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, ".com")
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       placeholder: "please enter",
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         icon: true,
@@ -25,7 +25,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Icon, {
         className: "k-icon-search"
       })))
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       placeholder: "please enter",
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         icon: true,
@@ -33,21 +33,21 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Icon, {
         className: "k-icon-search"
       })))
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       placeholder: "please enter",
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
         type: "primary"
       }, "\u641C\u7D22"))
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       placeholder: "please enter",
       slotPrefix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
         className: "k-icon-internet"
       })),
       slotSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-        className: "ion-ios-search",
+        className: "k-icon-search",
         hoverable: true
       }))
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       placeholder: "please enter",
       slotPrepend: /*#__PURE__*/React.createElement(React.Fragment, null, "http://"),
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, ".com"),
@@ -55,7 +55,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         className: "k-icon-internet"
       })),
       slotSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-        className: "ion-ios-search",
+        className: "k-icon-search",
         hoverable: true
       }))
     }));

package/es/site/data/components/input/demos/clearable/react.js

@@ -24,7 +24,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       clearable: true,
       placeholder: "please enter",
       slotSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-        className: "ion-ios-search",
+        className: "k-icon-search",
         hoverable: true
       }))
     }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
@@ -32,7 +32,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       stackClearIcon: true,
       placeholder: "please enter",
       slotSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-        className: "ion-ios-search",
+        className: "k-icon-search",
         hoverable: true
       }))
     }));

package/es/site/data/components/input/demos/showCount/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/input/demos/showCount/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/input/demos/showCount/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/input/demos/showCount/react.js

@@ -0,0 +1,33 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { Input } 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(Input, {
+      placeholder: "Please enter",
+      showCount: true
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
+      placeholder: "Please enter",
+      showCount: true,
+      maxlength: "10"
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
+      type: "textarea",
+      placeholder: "please enter",
+      showCount: true,
+      maxlength: "100"
+    }));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

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

@@ -1,7 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Input } from '@king-design/react';
-import { Button } from '@king-design/react';
+import { Input, Button, Icon } from '@king-design/react';
 import './index.styl';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
@@ -22,12 +21,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       value: "small",
       size: "small"
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       size: "small",
       placeholder: "please enter",
       slotPrepend: /*#__PURE__*/React.createElement(React.Fragment, null, "http://"),
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, ".com")
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       size: "small",
       placeholder: "please enter",
       slotPrefix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
@@ -37,10 +36,11 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         size: "small",
         icon: true,
         type: "primary"
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "ion-ios-search"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        className: "k-icon k-icon-search",
+        size: "small"
       })))
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       size: "small",
       placeholder: "please enter",
       clearable: true,
@@ -48,7 +48,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         type: "primary",
         size: "small"
       }, "Search"))
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       value: "mini",
       size: "mini"
     }));

package/es/site/data/components/message/demos/config/index.js

@@ -23,7 +23,7 @@ var default_1 = /*#__PURE__*/function (_Component) {
     Message[type]({
       content: type,
       duration: 3000,
-      closable: false,
+      closable: true,
       hideIcon: true
     });
   };

package/es/site/data/components/message/demos/config/react.js

@@ -30,7 +30,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     Message[type]({
       content: type,
       duration: 3000,
-      closable: false,
+      closable: true,
       hideIcon: true
     });
   };