@king-design/intact 2.0.0-beta.1 → 2.0.2

package/components/dropdown/demos/position.md

@@ -3,12 +3,11 @@ title: 菜单位置
 order: 2
 ---
 
-通过`position`属性，可以定义菜单相对触发器的位置。位置对象中`my`指菜单，`at`指触发器
+通过`position`属性，可以定义菜单相对触发器的位置。位置对象中`my`指菜单，`at`指触发器。
+通过`"top" | "bottom" | "left" | "right" `可以快速定位上下左右四个方向
 
 ```vdt
-import {Dropdown, DropdownMenu, DropdownItem} from 'kpc';
-import {Button} from 'kpc';
-import {Icon} from 'kpc';
+import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
 <div>
     <Dropdown position={{my: 'left top', at: 'left bottom+5'}}>
@@ -33,7 +32,7 @@ import {Icon} from 'kpc';
         </DropdownMenu>
     </Dropdown>
 
-    <Dropdown position={{my: 'center bottom-5', at: 'center top'}}>
+    <Dropdown position="top">
         <Button type="primary">
             top center <Icon class="ion-ios-arrow-down" />
         </Button>
@@ -54,5 +53,5 @@ import {Icon} from 'kpc';
     transition transform .25s ease-in-out
 .k-dropdown-open
     .k-icon
-        transform rotate(180deg)
+        transform rotateX(180deg)
 ```

package/components/dropdown/demos/trigger.md

@@ -7,9 +7,7 @@ order: 0
 通过`trigger`属性来指定它们。
 
 ```vdt
-import {Dropdown, DropdownMenu, DropdownItem} from 'kpc';
-import {Button} from 'kpc';
-import {Icon} from 'kpc';
+import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
 <div>
     <Dropdown>
@@ -44,5 +42,5 @@ import {Icon} from 'kpc';
     transition transform .25s ease-in-out
 .k-dropdown-open
     .k-icon
-        transform rotate(180deg)
+        transform rotateX(180deg)
 ```

package/components/dropdown/dropdown.ts

@@ -249,6 +249,8 @@ export class Dropdown<
             if (!vnode) return props;
 
             const _props = vnode.props;
+            if (!_props) return props;
+
             return {
                 vnode,
                 'ev-click': _props.onClick,

package/components/dropdown/index.md

@@ -5,9 +5,6 @@ order: 11
 sidebar: doc
 ---
 
-> `kpc/component/dropdown`暴露出来的并非`Dropdown`组件本身，而是包装该组件的函数（vdt中称作宏函数）
-> 所以不要试图继承它。
-
 # 属性
 
 ## Dropdown
@@ -15,32 +12,46 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
-| disabled | 是否禁用整个菜单 | `Boolean` | `false` |
-| position | 菜单弹出的位置，默认在触发器正下方向下偏移`5px`的地方 | `Object` | `{my: 'center top+5', 'center bottom'}` |
-| value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `Boolean` | `false` |
-| of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `"self"` |
-| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
+| disabled | 是否禁用整个菜单 | `boolean` | `false` |
+| value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `Event` | `"self"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+
+```ts
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 ## DropdownItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| disabled | 是否禁用该菜单项 | `Boolean` | `false` |
-| hideOnSelect | 是否选中该菜单后隐藏整个菜单 | `Boolean` | `true` |
+| disabled | 是否禁用该菜单项 | `boolean` | `false` |
+| hideOnSelect | 是否选中该菜单后隐藏整个菜单 | `boolean` | `true` |
 
-## 事件
+# 事件
 
-## DropdownMenu
+## Dropdown
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | show | 菜单展示事件 | - |
+| hide | 菜单隐藏事件 | - |
 
 ## DropdownItem
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | select | 菜单项被选中时触发，不管是点击还是键盘操作选中 | 被选中的`DropdownItem`实例 |
-| click | 菜单项被点击时触发 | `Event` |
-| mouseenter | 鼠标进入菜单项时触发 | `Event` |
-| mouseleave | 鼠标离开菜单项时触发 | `Event` |
+| click | 菜单项被点击时触发 | `MouseEvent` |
+| mouseenter | 鼠标进入菜单项时触发 | `MouseEvent` |
+| mouseleave | 鼠标离开菜单项时触发 | `MouseEvent` |

package/components/dropdown/index.spec.ts

@@ -8,7 +8,7 @@ import ContextMenuDemo from '~/components/dropdown/demos/contextmenu';
 describe('Dropdown', () => {
     afterEach((done) => {
         unmount();
-        setTimeout(done, 400);
+        setTimeout(done, 500);
     });
 
     // it('demos test', () => {
@@ -80,7 +80,7 @@ describe('Dropdown', () => {
         const dropdown = getElement('.k-dropdown-menu')!;
         const [, , , hoverItem, clickItem] = dropdown.querySelectorAll<HTMLElement>(':scope > .k-dropdown-item');
         clickItem.click();
-        await wait(300);
+        await wait(500);
         const clickSubDropdown = getElement('.k-dropdown-menu')!;
         expect(clickSubDropdown.innerHTML).to.matchSnapshot();
 
@@ -271,7 +271,7 @@ describe('Dropdown', () => {
         const [instance, element] = mount(Demo);
 
         dispatchEvent(instance.refs.trigger, 'mouseenter');
-        await wait(300);
+        await wait(500);
 
         const dropdown = getElement('.k-dropdown-menu')!;
         const [, item] = dropdown.querySelectorAll<HTMLElement>('.k-dropdown-item');

package/components/dropdown/index.ts

@@ -22,8 +22,7 @@ export type {
     DropdownMenuEvents,
     DropdownMenuBlocks,
 };
-// Don't export the generic type class, because it will let
-// the type inferring break down
+// Don't export the generic type class, because it will break down the type inference 
 // declare class _Dropdown extends BaseDropdown<
     // DropdownProps,
     // DropdownEvents,

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';
@@ -21,10 +21,10 @@ RemoteDemo.prototype.validateUserName = function(value) {
 };
 
 describe('Form', () => {
-    afterEach(() => unmount());
+    // 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(100);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
         instance.set('lastName', 'b');
-        await wait(100);
+        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>