@king-design/intact 2.0.0-beta.0 → 2.0.1

package/components/dropdown/styles.ts

@@ -22,7 +22,7 @@ const defaults = {
     }
 };
 
-let dropdown: any;
+let dropdown: typeof defaults;
 setDefault(() => {
     dropdown = deepDefaults(theme, {dropdown: defaults}).dropdown;
 });
@@ -73,7 +73,7 @@ export function makeItemStyles() {
         // checkbox / radio
         .k-checkbox,
         .k-radio {
-            display: block;
+            display: flex;
             margin: 0 -${getRight(dropdown.item.padding)} 0 -${getLeft(dropdown.item.padding)};
             padding: ${dropdown.item.padding};
         }

package/components/editable/index.md

@@ -5,27 +5,22 @@ order: 99
 sidebar: doc
 ---
 
-> 如果你不是通过`v-model`指令进行数据双向绑定，而是通过绑定`change`事件去修改的引用数据，则你需要
-> 在修改数据后，手动触发更新`this.update()`，这样才能传递新的`children`子元素给组件去渲染。
->
-> `vue`因为所有数据修改都会触发更新，所以无需手动触发更新
-
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| editing | 是否为编辑状态 | `Boolean` | `false` |
-| value | 编辑的内容，使用`v-model`进行双向绑定 | `String` | `undefined` |
-| required | 是否规定不能为空 | `Boolean` | `true` |
-| validate | 验证规则，可以为函数/正则/正则字符串，若为字符串将转为正则表达式；函数则会传入当前编辑框的值来调用函数验证，返回`true`则验证通过，否则验证失败 | `Function` | `RegExp` | `String` | `undefined` |
-| disabled | 是否禁用编辑 | `Boolean` | `false` |
-| tip | 编辑按钮提示文案 | `String` | `"编辑"` |
-| trim | 是否去掉前后空白字符 | `Boolean` | `true` |
-| invalid | 是否为验证失败状态 | `Boolean` | `false` |
+| editing | 是否为编辑状态 | `boolean` | `false` |
+| value | 编辑的内容，使用`v-model`进行双向绑定 | `string` | `undefined` |
+| required | 是否规定不能为空 | `boolean` | `true` |
+| validate | 验证规则，可以为函数/正则/正则字符串，若为字符串将转为正则表达式；函数则会传入当前编辑框的值来调用函数验证，返回`true`则验证通过，否则验证失败 | `(v: string) => boolean` | `RegExp` | `string` | `undefined` |
+| disabled | 是否禁用编辑 | `boolean` | `false` |
+| tip | 编辑按钮提示文案 | `string` | `"编辑"` |
+| trim | 是否去掉前后空白字符 | `boolean` | `true` |
+| invalid | 是否为验证失败状态 | `boolean` | `false` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| error | 验证失败时触发 | 当前输入的值 |
-| change | 当值改变时触发，与`$change:value`不同的是，该事件只会在用户输入导致变更时触发 | `newValue, oldValue` |
+| error | 验证失败时触发 | `(value: string) => void` |
+| change | 当值改变时触发 | `(newValue: string, oldValue: string) => void` |

package/components/editable/index.vdt

@@ -22,6 +22,7 @@ const classNameObj = {
     <Icon class="k-icon-edit k-editable-icon" title={tip}
         v-if={!disabled && !editing}
         ev-click={this.edit}
+        hoverable
     />
     <div class="c-ellipsis">
         <template v-if={!editing}>{children}</template>

package/components/editable/styles.ts

@@ -13,7 +13,7 @@ const defaults = {
     }
 };
 
-let editable: any;
+let editable: typeof defaults;
 setDefault(() => {
     editable = deepDefaults(theme, {editable: defaults}).editable;
 });

package/components/form/demos/basic.md

@@ -8,22 +8,22 @@ order: 0
 
 1. 给`FormItem`添加`value`属性，指定需要验证的数据。如果不指定，则不会进行任何验证
 2. 给`FormItem`添加`rules`属性，指定需要验证的规则。如果不指定，则不会进行任何验证。内置的验证规则如下：
-    1. `required {Boolean}`：必须填写
-    2. `digits {Boolean}`： 请输入数字
-    3. `email {Boolean}`: 请输入正确的邮箱地址
-    4. `url {Boolean}`: 请输入正确的网址
+    1. `required {boolean}`：必须填写
+    2. `digits {boolean}`： 请输入数字
+    3. `email {boolean}`: 请输入正确的邮箱地址
+    4. `url {boolean}`: 请输入正确的网址
         > 该规则可以验证IP地址，但是会排除`192.168.X.X | 192.254.X.X | 172.16.0.0 - 172.31.255.255 | 10.X.X.X | 172.X.X.X`这类保留IP地址
-    5. `date {Boolean}`：请输入正确的日期
-    6. `dateISO {Boolean}`：请输入正确的日期（YYYY-MM-DD）
-    7. `number {Boolean}`：请输入正确的数
-    8. `maxLength {Number}`：如果检验的值是数组：最多选择n项；如果检验的值是字符串：最多输入n个字符
-    9. `minLength {Number}`：同上（检验最少长度）
-    10. `rangeLength {Array<Number>}`：同上，检验长度的范围
-    11. `max {Number}`：请输入不大于n的数
-    12. `min {Number}`：请输入不小于n的数
-    13. `range {Array<Number>}`：请输入min到max之间的数
-    14. `step {Number}`：请输入步长为n的数
-    15. `equalTo {String}`：两次输入不一致
+    5. `date {boolean}`：请输入正确的日期
+    6. `dateISO {boolean}`：请输入正确的日期（YYYY-MM-DD）
+    7. `number {boolean}`：请输入正确的数
+    8. `maxLength {number}`：如果检验的值是数组：最多选择n项；如果检验的值是字符串：最多输入n个字符
+    9. `minLength {number}`：同上（检验最少长度）
+    10. `rangeLength {Array<number>}`：同上，检验长度的范围
+    11. `max {number}`：请输入不大于n的数
+    12. `min {number}`：请输入不小于n的数
+    13. `range {Array<number>}`：请输入min到max之间的数
+    14. `step {number}`：请输入步长为n的数
+    15. `equalTo {string}`：两次输入不一致
 3. 给`FormItem`添加`messages`属性，指定验证失败时展示的错误提示。默认内容如上所示
 4. 给`FormItem`添加`classNames`属性，指定验证失败时错误元素需要额外添加的`className`，默认不添加
 

package/components/form/index.md

@@ -11,23 +11,30 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| labelWidth | 定义所有子孙`FormItem`组件的`label`宽度 | `String` | `Number` | `undefined` |
+| labelWidth | 定义所有子孙`FormItem`组件的`label`宽度 | `string` | `number` | `undefined` |
 | layout | 指定表单布局方式 | `"horizontal"` | `"vertical"` | `"inline"` | `"horizontal"` |
-| starOnRequired | 当`FormItem`必填时，是否在`label`前面展示`*` | `Boolean` | `false` |
+| starOnRequired | 当`FormItem`必填时，是否在`label`前面展示`*` | `boolean` | `false` |
+| size | 定义表单之间的间隔大小 | `"default"` | `"small"` | `"mini"` | `"default"` |
 
 ## FormItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 指定需要验证的数据 | `*` | `undefined` |
-| rules | 指定验证规则 | `Object` | `{}` |
-| messages | 指定验证失败时错误提示文案 | `Object` | `{}` |
-| classNames | 指定验证失败时添加的className | `Object` | `{}` |
-| label | 指定表单每一项前面展示的标题 | `String` | `undefined` |
-| htmlFor | 指定`label`的`for`属性 | `String` | `undefined` | 
-| hideLabel | 是否隐藏`label`，默认会展示`label`，即使该属性为空，也会展示占位元素 | `Boolean` | `false` |
-| fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `Boolean` | `false` |
-| size | 控制`FormItem`的间距 | `"default"` | `"small"` | `"mini"` | `"default"` |
+| value | 指定需要验证的数据 | `any` | `undefined` |
+| rules | 指定验证规则 | `Record<string, any>` | `undefined` |
+| messages | 指定验证失败时错误提示文案 | `Record<string, Message>` | `undefined` |
+| classNames | 指定验证失败时添加的className | `Record<string, Classname>` | `undefined` |
+| errorClassName | 指定验证失败时统一添加的className，不管是哪个规则导致的失败 | `string` | `undefined` |
+| label | 指定表单每一项前面展示的标题 | `string` | `undefined` |
+| htmlFor | 指定`label`的`for`属性 | `string` | `undefined` | 
+| hideLabel | 是否隐藏`label`，默认会展示`label`，即使该属性为空，也会展示占位元素 | `boolean` | `false` |
+| fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `boolean` | `false` |
+
+```ts
+type Method = (value: any, param: any) => boolean | string
+type Message = string | ((value: any, param: any) => string)
+type ClassName = string | ((value: any, param: any) => string)
+```
 
 # 扩展点
 
@@ -45,7 +52,7 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| submit | 当表单提交并且所有规则都验证通过时触发 | 1. `Event` <br /> 2. `Form`实例 |
+| submit | 当表单提交并且所有规则都验证通过时触发 | `(event: Event) => void` |
 
 # 方法
 
@@ -53,7 +60,7 @@ sidebar: doc
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| validate | 验证表单所有规则 | - | `Promise`: `.then(valid => {})`，`valid`为`true`验证成功，否则失败 |
+| validate | 验证表单所有规则 | - | `Promise<boolean>`: `.then(valid => {})`，`valid`为`true`验证成功，否则失败 |
 | reset | 重置表单验证状态 | - | `undefined` |
 | getFirstInvalidFormItem | 获取第一条出错的`FormItem` | - | `FormItem` |
 
@@ -67,4 +74,13 @@ sidebar: doc
 | --- | --- | --- | --- |
 | addMethod | 添加全局验证规则，这样在所有`FormItem`中如果需要使用该规则，只需要在`rules`中写上该规则名即可 | 1. `name` 指定规则名称，不能重复 <br /> 2. `method` 指定该规则的验证函数，该函数返回`true`或`false`来标识验证成功或失败，如果返回字符串，则直接当做错误文案展示，该函数将传入3个参数：1. 当前验证的值，2. 当前验证的`FormItem`实例，3. 当前规则的参数，即使用该规则时指定的值 <br /> 3. `message` 验证失败时的错误提示文案，该值可以为字符串或者函数，如果为函数，传入参数同`method`，用于个性化文案提示 <br /> 4. `className` 验证失败时添加的类名 | `undefined` |
 
+```ts
+export declare const addMethod: (
+    name: string,
+    method: Method,
+    message?: Message | undefined,
+    className?: ClassName | undefined
+) => void;
+```
+
 [1]: https://github.com/ksc-fe/kpc/issues/6

package/components/form/index.spec.ts

@@ -1,4 +1,4 @@
-import BasicDemo from '~/components/form/demos/basic';
+import BasicDemo, {data as basicDemoData} from '~/components/form/demos/basic';
 import CustomDemo from '~/components/form/demos/custom';
 import VariableDemo from '~/components/form/demos/variable';
 import RemoteDemo from '~/components/form/demos/remote';
@@ -24,7 +24,7 @@ describe('Form', () => {
     afterEach(() => unmount());
 
     it('validate', async () => {
-        const [instance, element] = mount(BasicDemo);
+        const [instance, element] = mount(BasicDemo, null, basicDemoData);
         const form = instance.refs.form as Form;
 
         await instance.handleSubmit();
@@ -53,14 +53,14 @@ describe('Form', () => {
         const [input, input1] = Array.from<HTMLElement>(element.querySelectorAll('input'));
         instance.set<{'descriptions.0': string}>('descriptions.0', '1');
         dispatchEvent(input, 'focusout');
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
 
         instance.set<{'descriptions.0': string}>('descriptions.0', 'a');
         expect(element.innerHTML).to.matchSnapshot();
         instance.set<{'descriptions.1': string}>('descriptions.1', 'a');
         dispatchEvent(input1, 'focusout');
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
         instance.set<{'descriptions.1': string}>('descriptions.1', 'b');
         expect(element.innerHTML).to.matchSnapshot();
@@ -74,10 +74,10 @@ describe('Form', () => {
         expect(res).to.be.true;
 
         instance.set('firstName', 'a');
-        await wait(0);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
         instance.set('lastName', 'b');
-        await wait(0);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
     });
 
@@ -90,14 +90,14 @@ describe('Form', () => {
         await wait();
         let res = await form.validate();
         expect(res).to.be.false;
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
 
         i.set('userName', 'b');
         await wait();
         res = await form.validate();
         expect(res).to.be.true;
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
     });
 

package/components/form/item.vdt

@@ -3,6 +3,7 @@ import {Tooltip} from '../tooltip';
 import {Icon} from '../icon';
 import {Transition} from 'intact';
 import {makeItemStyles} from './styles';
+import {context as ErrorContext} from './useError';
 
 const {
     className, children, label,
@@ -49,7 +50,11 @@ const {ellipsis, message, errorRef} = this.error;
         <b:label>{label}</b:label>
     </label>
     <div class="k-form-content">
-        <b:content>{children}</b:content>
+        <ErrorContext.Provider value={isDirty && !isValid}>
+            <template>
+                <b:content>{children}</b:content>
+            </template>
+        </ErrorContext.Provider>
         <Transition key="error" name="k-fade" >
             <div v-if={isDirty && !isValid}
                 class={{

package/components/form/methods.ts

@@ -138,7 +138,12 @@ export const messages: Record<string, Message> = {
 
 export const classNames: Record<string, ClassName> = {};
 
-export const addMethod = function(name: string, method: Method, message?: Message, className?: ClassName) {
+export const addMethod = function(
+    name: string,
+    method: Method,
+    message?: Message,
+    className?: ClassName
+) {
     methods[name] = method;
     messages[name] = message !== undefined ? message : messages[name];
     if (className) {

package/components/form/styles.ts

@@ -33,7 +33,7 @@ const defaults = {
     },
 };
 
-let form: any;
+let form: typeof defaults;
 setDefault(() => {
     form = deepDefaults(theme, {form: defaults}).form;
 });

package/components/form/useError.ts

@@ -3,12 +3,15 @@ import type {FormItem} from './item';
 import {useState, watchState} from '../../hooks/useState';
 import {messages as globalMessages, classNames as globalClassNames} from './methods';
 import {isFunction} from 'intact-shared';
+import {createContext} from '../context';
 
 // enum MessageOrClassname {
     // Message,
     // ClassName,
 // }
 
+export const context = createContext();
+
 export function useError() {
     const instance = useInstance() as FormItem;
     const ellipsis = useState(false);

package/components/form/useValidate.ts

@@ -82,7 +82,7 @@ export function useValidate(
                         return [
                             false,
                             result || getErrorMessage(ruleName),
-                            getErrorMessage(ruleName),
+                            getErrorClassName(ruleName),
                         ];
                     }
                 }
@@ -94,7 +94,7 @@ export function useValidate(
                     message = err;
                 } else if (err) {
                     message = err.message || getErrorMessage(err.name);
-                    className = err.className || getErrorMessage(err.name);
+                    className = err.className || getErrorClassName(err.name);
                 }
 
                 return [false, message!, className!];

package/components/grid/col.vdt

@@ -22,7 +22,7 @@ const {className, children, span, style, offset, push, pull, order} = this.get()
         return (
             <div class={classNameObj} {...getRestProps(this)} style={newStyle}>
                 {gutter ? 
-                    <div class={className}>{children}</div> :
+                    <div class={{'k-col-wrapper': true, [className]: className}}>{children}</div> :
                     children
                 }
             </div>

package/components/grid/index.md

@@ -11,23 +11,44 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| gutter | 栅格间距，单位`px`；也可以以对象的方式指定响应式间距 | `Number` | `Object` | `0` |
+| gutter | 栅格间距，单位`px`；也可以以对象的方式指定响应式间距 | `PrimitiveValue` | `BreakpointValue` | `undefined` |
 | justify | 定义列水平方向布局，会自动启用`flex`布局 | `"start"` | `"end"` | `"center"` | `"between"` | `"around"` | `"evenly"` | `undefined` |
 | align | 定义列垂直方向布局，会自动启用`flex`布局 | `"top"` | `"bottom"` | `"middle"` | `"stretch"` | `"baseline"` | `undefined` |
-| flex | 是否强制启用`flex`布局 | `Boolean` | `false` |
+
+```ts
+export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type PrimitiveValue = string | number
+export type BreakpointValue = {
+    [key in Breakpoint]?: PrimitiveValue
+};
+export type Value = PrimitiveValue | BreakpointValue;
+```
 
 ## Col
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| span | 栅格所占宽度，可选值为0到24的整数 | `String` | `Number` | `24` |
-| offset | 栅格左侧偏移量 | `String` | `Number` | `0` |
-| order | 定义列的顺序，会自动启用`flex`布局 | `String` | `Number` | `0` |
-| pull | 定义列距离右边界的栅格数 | `String` | `Number` | `0` |
-| push | 定义列距离左边界的栅格数 | `String` | `Number` | `0` |
-| xs | 响应式宽度 `<576px` | `String` &#124; `Number` &#124; `Object` | `undefined` |
-| sm | 响应式宽度 `≥576px` | `String` &#124; `Number` &#124; `Object` | `undefined` |
-| md | 响应式宽度 `≥768px` | `String` &#124; `Number` &#124; `Object` | `undefined` |
-| lg | 响应式宽度 `≥992px` | `String` &#124; `Number` &#124; `Object` | `undefined` |
-| xl | 响应式宽度 `≥1200px` | `String` &#124; `Number` &#124; `Object` | `undefined` |
-| xxl | 响应式宽度 `≥1600px` | `String` &#124; `Number` &#124; `Object` | `undefined` |
+| span | 栅格所占宽度，可选值为0到24的整数 | `string` &#124; `number` | `24` |
+| offset | 栅格左侧偏移量 | `string` &#124; `number` | `0` |
+| order | 定义列的顺序，会自动启用`flex`布局 | `string` &#124; `number` | `0` |
+| pull | 定义列距离右边界的栅格数 | `string` &#124; `number` | `0` |
+| push | 定义列距离左边界的栅格数 | `string` &#124; `number` | `0` |
+| xs | 响应式宽度 `<576px` | `BreakpointValue` | `undefined` |
+| sm | 响应式宽度 `≥576px` | `BreakpointValue` | `undefined` |
+| md | 响应式宽度 `≥768px` | `BreakpointValue` | `undefined` |
+| lg | 响应式宽度 `≥992px` | `BreakpointValue` | `undefined` |
+| xl | 响应式宽度 `≥1200px` | `BreakpointValue` | `undefined` |
+| xxl | 响应式宽度 `≥1600px` | `BreakpointValue` | `undefined` |
+
+```ts
+export type BaseColProps = {
+    span?: PrimitiveValue, 
+    offset?: PrimitiveValue, 
+    order?: PrimitiveValue,
+    pull?: PrimitiveValue,
+    push?: PrimitiveValue,
+}
+type BreakpointValue = 
+    | PrimitiveValue
+    | {[key in keyof BaseColProps]?: PrimitiveValue}
+```

package/components/grid/styles.ts

@@ -6,7 +6,7 @@ import {breakpoints, responsiveMap} from './constants';
 
 const defaults = {};
 
-let grid: any;
+let grid: typeof defaults;
 setDefault(() => {
     grid = deepDefaults(theme, {grid: defaults}).grid;
 });
@@ -59,6 +59,9 @@ export function makeColStyles() {
     return css`
         position: relative;
         width: 100%;
+        .k-col-wrapper {
+            height: 100%;
+        }
         ${colsStyles}
     `;
 }

package/components/icon/index.md

@@ -9,5 +9,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| size | 定义图标尺寸 | `"default"` | `"large"` | `"small"` | `"mini"` | `String` | `Number` | `"default"` |
-| color | 图标颜色 | `"default"` | `"primary"` | `"danger"` | `"warning"` | `"success"` | `String` | `undefined` |
+| size | 定义图标尺寸 | `"default"` | `"large"` | `"small"` | `"mini"` | `string` | `number` | `"default"` |
+| color | 图标颜色 | `"default"` | `"primary"` | `"danger"` | `"warning"` | `"success"` | `string` | `undefined` |
+| rotate | 是否一直旋转图标 | `boolean` | `false` |
+| hoverable | 图标是否具有`hover`效果 | `boolean` | `false` |

package/components/icon/index.vdt

@@ -1,7 +1,7 @@
 import {addStyle, getRestProps} from '../utils';
 import makeStyles from './styles';
 
-const {className, style, size, color, rotate, hoverable} = this.get();
+const {className, style, size, color, rotate, hoverable, children} = this.get();
 
 const classNameObj = {
     'k-icon': true,
@@ -28,4 +28,4 @@ if (this.colors.indexOf(color) > -1) {
 <i class={classNameObj}
     style={addStyle(style, _style)}
     {...getRestProps(this)}
-></i>
+>{children}</i>

package/components/icon/styles.ts

@@ -1,5 +1,5 @@
 import {css, cx} from '@emotion/css';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
 import {IconProps} from './index';
 import {Sizes, Colors} from '../types';
@@ -8,18 +8,18 @@ import '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
 
-const iconStyles = {
+const defaults = {
+    get transition() { return theme.transition.small },
+
     fontSize: {
         default: '16px',
         large: '22px',
         small: '14px',
         mini: '12px',
-    }
+    },
 };
 
-const defaults = iconStyles;
-
-let icon: any;
+let icon: typeof defaults;
 setDefault(() => {
     icon = deepDefaults(theme, {icon: defaults}).icon;
 });
@@ -33,9 +33,10 @@ export default function makeStyles(color?: string) {
         line-height: 1;
         // display: inline-block;
         ${sizes.map(size => {
+            const fontSize = icon.fontSize[size];
             return css`
                 &.k-${size} {
-                    font-size: ${icon.fontSize[size]};
+                    font-size: ${fontSize};
                 }
             `
         })}
@@ -54,13 +55,15 @@ export default function makeStyles(color?: string) {
             animation: ${rotate} 1s infinite linear;
         }
         &:before {
+            position: relative;
             font-size: inherit;
+            z-index: 1;
         }
 
         // hoverable
         &.k-hoverable {
             cursor: pointer;
-            transition: color ${theme.transition};
+            transition: color ${icon.transition};
             &:hover {
                 color: ${theme.color.primary};
             }

package/components/input/demos/blocks.md

@@ -32,13 +32,13 @@ import {Input, Button, Icon} from 'kpc';
     </Input>
     <Input placeholder="please enter">
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="k-icon-search" /></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
     <Input placeholder="please enter">
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="k-icon-search" /></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

package/components/input/demos/clearable.md

@@ -6,7 +6,7 @@ order: 4
 指定`clearable`可以展示快速清除按钮，如果同时指定`stackClearIcon`则将清空按钮覆盖在`suffix`按钮上展示来节省空间
 
 ```vdt
-import {Input} from 'kpc';
+import {Input, Icon} from 'kpc';
 
 <div>
     <Input clearable placeholder="please enter" />
@@ -14,11 +14,11 @@ import {Input} from 'kpc';
     <Input value="disabled" clearable disabled />
     <br />
     <Input clearable placeholder="please enter">
-        <b:suffix><i class="ion-ios-search"></i></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
     <br />
     <Input clearable stackClearIcon placeholder="please enter">
-        <b:suffix><i class="ion-ios-search"></i></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

package/components/input/demos/inline.md

@@ -0,0 +1,12 @@
+---
+title: 内联模式
+order: 8 
+---
+
+添加`inline`属性，即可展示内联输入框
+
+```vdt
+import {Input} from 'kpc';
+
+<Input placeholder="内联文字" inline />
+```

package/components/input/demos/size.md

@@ -21,7 +21,6 @@ import {Button} from 'kpc';
     </Input>
     <Input size="small" placeholder="please enter">
         <b:prefix><i class="ion-earth"></i></b:prefix>
-        <b:suffix><i class="ion-ios-search"></i></b:suffix>
         <b:append><Button size="small" icon type="primary"><i class="ion-ios-search"></i></Button></b:append>
     </Input>
     <Input size="small" placeholder="please enter" clearable>

package/components/input/index.md

@@ -11,36 +11,32 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 在原生`input`标签的`type`取值的基础上扩展了`textarea`值,当取该值时渲染成`<textarea>` | `String` | `"text"` |
-| name | 原生`input`标签的`name`属性 | `String` | `undefined` |
-| value | 输入框的值,可用`v-model`进行双向绑定 | `String` | `undefined` |
-| defaultValue | `input`的`defaultValue`，首次渲染使用该值 | `String` | `undefined` |
-| placeholder | 占位文案 | `String` | `undefined` |
-| readonly | 是否只读 | `Boolean` | `false` |
-| clearable | 是否展示快速清除按钮 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| type | 在原生`input`标签的`type`取值的基础上扩展了`textarea`值,当取该值时渲染成`<textarea>` | `string` | `"text"` |
+| name | 原生`input`标签的`name`属性 | `string` | `undefined` |
+| value | 输入框的值,可用`v-model`进行双向绑定 | `string` | `undefined` |
+| defaultValue | `input`的`defaultValue`，首次渲染使用该值 | `string` | `undefined` |
+| placeholder | 占位文案 | `string` | `undefined` |
+| readonly | 是否只读 | `boolean` | `false` |
+| clearable | 是否展示快速清除按钮 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
 | size | 组件尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| rows | 当`type = "textarea"`时，默认展示文本行数 | `Number` &#124; `String` | `2` |
-| spellcheck | `textarea`是否进行拼写检查 | `Boolean` | `false` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| autoWidth | 是否宽度随输入的文本的长度变化而变化 | `Boolean` | `false` |
-| width | 指定宽度，组件会加上单位`px` | `String`  &#124; `Number` | `undefined` |
-| tabindex | 原生`tabindex`属性 | `String` | `undefined` |
-| autocomplete | 原生`autocomplete`属性 | `String` | `undefined` |
-| nativeProps | 原生`input`或`textarea`上的属性 | `Object` | `undefined` |
-| stackClearIcon | 是否将清空按钮覆盖在`suffix`按钮上展示来节省空间 | `Boolean` | `false` |
-| frozenOnInput | 是否在输入的过程中冻结`value`更新到视图 | `Boolean` | `false` |
-
+| rows | 当`type = "textarea"`时，默认展示文本行数 | `number` &#124; `string` | `2` |
+| autoWidth | 是否宽度随输入的文本的长度变化而变化 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| width | 指定宽度，组件会加上单位`px` | `string`  &#124; `number` | `undefined` |
+| stackClearIcon | 是否将清空按钮覆盖在`suffix`按钮上展示来节省空间 | `boolean` | `false` |
+| frozenOnInput | 是否在输入的过程中冻结`value`更新到视图 | `boolean` | `false` |
+| inline | 是否展示内联模式 | `boolean` | `flase` |
 
 ## Search
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件输入的值 | `String` | `""` |
-| placeholder | 展位文案 | `String` | `"请输入关键字"` |
+| value | 组件输入的值 | `string` | `""` |
+| placeholder | 展位文案 | `string` | `"请输入关键字"` |
 | type | 类型 | `"default"` &#124; `"line"` | `"default"` |
 | size | 尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| open | 是否展开状态 | `Boolean` | `false` |
+| open | 是否展开状态 | `boolean` | `false` |
 
 # 扩展点