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

package/components/dialog/demos/size.md

@@ -4,7 +4,7 @@ order: 0.2
 ---
 
 添加`size`属性，定义如下尺寸：`large`, `default`，`small`，`mini`；另外你也可以通过`width`属性，给弹窗指定宽度，
-如果该值为`Number`类型，则默认单位为`px`，`String`类型时，你需要指定单位
+如果该值为`number`类型，则默认单位为`px`，`string`类型时，你需要指定单位
 
 > `width`优先级高于`size`
 

package/components/dialog/index.md

@@ -9,67 +9,64 @@ sidebar: doc
 > 滚动，同时会添加`padding-right`来保证页面不闪动，但如果你页面存在`position: fixed`元素，则依然
 > 可能会在弹窗弹出时闪动。
 > 
-> 组件提供了两个全局配置，用来自定义元素的修正逻辑。例如：本文档网站的配置如下
-> ```js
+> 组件提供了钩子函数，用来自定义元素的修正逻辑。例如：本文档网站的配置如下
+> ```ts
 > // @code
-> import {configure} from 'kpc';
->
-> configure({
->     onDialogOpen(scrollbarWidth) {
->         document.body.style.backgroundColor = '#f1f1f5';
->         const header = document.querySelector('.header-wrapper');
->         if (header) {
->             header.style.paddingRight = `${scrollbarWidth}px`;
->         }
->         const tableOfContents = document.querySelector('.table-of-contents');
->         if (tableOfContents) {
->             tableOfContents.style.right = `${scrollbarWidth}px`;
->         }
->     },
+> import {Dialog} from 'kpc';
 > 
->     onDialogClose() {
->         const header = document.querySelector('.header-wrapper');
->         if (header) {
->             header.removeAttribute('style');
->         }
->         const tableOfContents = document.querySelector('.table-of-contents');
->         if (tableOfContents) {
->             tableOfContents.removeAttribute('style');
->         }
->     },
-> });
+> Dialog.setHooks({
+>    onStart(scrollBarWidth) {
+>        if (scrollBarWidth) {
+>            const header = document.querySelector<HTMLElement>('.k-layout-header');
+>            if (header) {
+>                header.style.paddingRight = `${scrollBarWidth}px`;
+>            }
+>        } 
+>    },
+>    onEnd() {
+>        const header = document.querySelector<HTMLElement>('.k-layout-header');
+>        if (header) {
+>            header.style.paddingRight = '0';
+>        }
+>    }
+>});
 > ```
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 弹窗标题 | `String` | `"提示"` |
-| overlay | 是否展示遮罩层 | `Boolean` | `true` |
-| closable | 点击遮罩层是否可以关闭弹窗 | `Boolean` | `true` |
-| value | 弹窗是否展示出来 | `Boolean` | `false` |
+| title | 弹窗标题 | `string` | `"提示"` |
+| value | 弹窗是否展示出来 | `boolean` | `false` |
 | size | 弹窗尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| loading | “确定”按钮是否为加载状态 | `Boolean` | `false` |
-| okText | “确定”按钮文案 | `String` | `"确定"` |
-| cancelText | “取消”按钮文案 | `String` | `"取消"` |
-| disabledOk | “确定”按钮是否为禁用状态 | `Boolean` | `false` |
-| ok | “确定”按钮点击后自定义回调函数 | `Function` | `undefined` |
-| cancel | “取消”按钮点击后自定义回调函数 | `Function` | `undefined` |
-| container | 指定弹层插入的容器，默认会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` &#124; `String` | `undefined` |
-| hideClose | 是否隐藏右上角关闭按钮 | `Boolean` | `false` |
-| escClosable | 是否按ESC时关闭弹窗 | `Boolean` | `true` |
-| terminate | 指定在用户点击“关闭”按钮，点击遮罩层或者按ESC键时的回调函数 | `Function` | `undefined` |
-| width | 指定弹窗宽度，`Number`类型时，单位为`px`；`String`类型时，需要指定单位 | `Number` &#124; `String` | `undefined` |
+| loading | “确定”按钮是否为加载状态 | `boolean` | `false` |
+| disabledOk | “确定”按钮是否为禁用状态 | `boolean` | `false` |
+| okText | “确定”按钮文案 | `string` | `"确定"` |
+| cancelText | “取消”按钮文案 | `string` | `"取消"` |
+| ok | “确定”按钮点击后自定义回调函数 | `() => void` | `undefined` |
+| cancel | “取消”按钮点击后自定义回调函数 | `() => void` | `undefined` |
+| container | 指定弹层插入的位置，默认会追加到`body`中，你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| hideClose | 是否隐藏右上角关闭按钮 | `boolean` | `false` |
+| overlay | 是否展示遮罩层 | `boolean` | `true` |
+| closable | 点击遮罩层是否可以关闭弹窗 | `boolean` | `true` |
+| terminate | 指定在用户点击“关闭”按钮，点击遮罩层或者按ESC键时的回调函数 | `() => void` | `undefined` |
+| escClosable | 是否按ESC时关闭弹窗 | `boolean` | `true` |
+| width | 指定弹窗宽度，`number`类型时，单位为`px`；`string`类型时，需要指定单位 | `number` &#124; `string` | `undefined` |
 | mode | 指定主体元素在关闭状态下的渲染方式，`"destroy"`代表直接销毁，`"hide"`代表只是隐藏 | `"destroy"` &#124; `"hide"` | `"hide"` |
 
+```ts
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
+
 # 扩展点
 
 | 名称 | 说明 |
 | --- | --- |
+| content | 定义整个弹窗体，包括header，body，footer | 
 | header | 扩展弹窗头部 |
 | body | 扩展弹窗主体部分 |
 | footer | 扩展弹窗底部 |
-| footer-wrapper | 扩展弹窗整个底部，上述`footer`是它下面一个子扩展点 |
+| footerWrapper | 扩展弹窗整个底部，上述`footer`是它下面一个子扩展点 |
 
 # 方法
 
@@ -96,33 +93,27 @@ sidebar: doc
 | error | 错误提示窗口 | `Options` | `Promise` |
 | confirm | 确定提示窗口 | `Options` | `Promise` |
 
-其中`Options`对象常用属性说明如下
-
-> `Dialog`属性大都支持
+其中`Options`对象常用属性说明如下，除了`Dialog`的属性外，还支持如下属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 弹窗标题，如果传入标题，则展示样式会有所不同 | `String` | `undefined` |
-| content | 弹窗内容 | `String` &#124; `Number` &#124; `VNode` &#124; <code>Array&lt;String &#124; Number &#124; VNode&gt;</code> | `undefined` |
+| content | 弹窗内容 | `string` &#124; `VNode` &#124; <code>Array&lt;string &#124; VNode&gt;</code> | `undefined` |
 | size | 弹窗尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| okText | “确定”按钮文案 | `String` | `"确定"` |
-| cancelText | “取消”按钮文案 | `String` | `"取消"` |
-| hideIcon | 是否隐藏提示图标 | `Boolean` | `false` |
-| hideFooter | 是否隐藏底部按钮 | `Boolean` | `false` |
-| showClose | 是否展示关闭按钮 | `Boolean` | `false` |
+| hideIcon | 是否隐藏提示图标 | `boolean` | `false` |
+| hideFooter | 是否隐藏底部按钮 | `boolean` | `false` |
 
 其中`Promise`对象会在点击“确定”按钮时`resolve()`，在点击“取消”按钮时`reject()`，你可以在`then()`
 中书写用户点击不同按钮的逻辑
 
 > 只有`confirm`类型的提示窗口才有“取消”按钮
 
-
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| cancel | 点击取消按钮时触发 | - |
-| ok | 点击确定按钮时触发 | - |
 | open | 弹窗打开后触发 | - |
 | close | 弹窗关闭后触发，不管是什么原因导致的关闭 | - |
+| ok | 点击确定按钮时触发 | - |
+| cancel | 点击取消按钮时触发 | - |
 | terminate | 用户强行关闭弹窗时触发，即：点击“关闭”按钮，点击遮罩层，按ESC键 | - |
+| afterClose | 弹窗退出动画执行完成后触发 | - |

package/components/dialog/index.spec.ts

@@ -3,14 +3,13 @@ import {Dialog, BaseDialog, DialogProps} from './';
 import {getElement, mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
-import AsyncOpenDemo from '~/components/dialog/demos/asyncOpen';
 import TerminateDemo from '~/components/dialog/demos/terminate';
 import DestroyDemo from '~/components/dialog/demos/destroy';
 
 describe('Dialog', () => {
     afterEach((done) => {
         unmount();
-        setTimeout(done, 400);
+        setTimeout(done, 500);
     });
 
     function expectDialog() {
@@ -143,10 +142,9 @@ describe('Dialog', () => {
 
     it('demos test', async function() {
         this.timeout(0);
-        const req = require.context('~/components/dialog/demos', true, /^((?!async).)*index\.ts$/i);
+        const req = require.context('~/components/dialog/demos', true, /^((?!static).)*index\.ts$/i);
         for (const item of req.keys()) {
             if (!item.startsWith('.')) continue;
-            if (/static/.test(item)) continue;
 
             const Demo = req(item).default;
             const [instance, element] = mount(Demo);
@@ -174,20 +172,6 @@ describe('Dialog', () => {
         expect(dialog.className).to.eql(className);
     });
 
-    it('async open', async function() {
-        this.timeout(0);
-
-        const [instance, element] = mount(AsyncOpenDemo);
-
-        dispatchEvent(element.firstChild as HTMLElement, 'click');
-        expect(getElement('.k-dialog')).to.be.undefined;
-
-        await wait(3000);
-        const dialog = expectDialog();
-        // close
-        dispatchEvent(dialog.querySelector('.k-dialog-ok') as HTMLElement, 'click');
-    });
-
     it('drag', async () => {
         const [instance, element] = mount(BasicDemo);
 

package/components/dialog/styles.ts

@@ -7,6 +7,7 @@ const defaults = {
     width: '800px',
     bgColor: '#fff',
     get borderRadius() { return theme.borderRadius },
+    get transition() { return theme.transition.large },
     padding: '0',
     margin: '0 20px',
     get color() { return theme.color.text },
@@ -60,7 +61,7 @@ const defaults = {
     },
 };
 
-let dialog: any;
+let dialog: typeof defaults;
 setDefault(() => {
     dialog = deepDefaults(theme, {dialog: defaults}).dialog;
 });
@@ -87,8 +88,8 @@ export function makeDialogStyles() {
         &.transition-enter-active,
         &.transition-leave-active,
         &.transition-appear-active {
-            // transition: transform ${theme.transition}, opacity ${theme.transition};
-            transition: all ${theme.transition};
+            // transition: transform ${dialog.transition}, opacity ${dialog.transition};
+            transition: all ${dialog.transition};
         }
         &.transition-enter-from,
         &.transition-leave-to,

package/components/dialog/useFixBody.ts

@@ -4,8 +4,14 @@ import {position} from '../position';
 import {scrollbarWidth} from '../position';
 import {SHOW} from './constants';
 
+type Hooks = {
+    onStart?: (scrollBarWidth: number | undefined) => void
+    onEnd?: () => void
+}
+
 const dialogs = new Set<BaseDialog>();
 let originalStyle: string | null = null;
+let hooks: Hooks | null = null; 
 
 export function useFixBody(elementRef: RefObject<HTMLDivElement>) {
     const instance = useInstance() as BaseDialog;
@@ -36,6 +42,10 @@ export function useFixBody(elementRef: RefObject<HTMLDivElement>) {
     }
 }
 
+export function setHooks(h: Hooks | null) {
+    hooks = h;
+}
+
 function onOpen(dialog: BaseDialog) {
     const body = document.body;
     if (dialogs.size === 0) {
@@ -47,6 +57,9 @@ function onOpen(dialog: BaseDialog) {
         if (scrollBarWidth) {
             bodyStyle.paddingRight = `${scrollBarWidth}px`;
         }
+        if (hooks && hooks.onStart) {
+            hooks.onStart(scrollBarWidth);
+        }
     }
     dialogs.add(dialog);
 }
@@ -61,6 +74,9 @@ function onClosed(dialog: BaseDialog) {
         } else {
             body.removeAttribute('style');
         }
+        if (hooks && hooks.onEnd) {
+            hooks.onEnd();
+        }
     }
 }
 

package/components/drawer/index.md

@@ -9,29 +9,30 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| placement | 自定义位置 | `"top"` | `"bottom"` |`"left"` |`"right"`|`"right"`|
-| overlay | 是否展示遮罩层 | `Boolean` | `true` |
-| closable | 点击遮罩层是否可以关闭抽屉 | `Boolean` | `true` |
-| title | 弹窗标题 | `String` | `"提示"` |
-| value | 弹窗是否展示出来 | `Boolean` | `false` |
+| title | 弹窗标题 | `string` | `"提示"` |
+| value | 弹窗是否展示出来 | `boolean` | `false` |
 | size | 弹窗尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| loading | “确定”按钮是否为加载状态 | `Boolean` | `false` |
-| okText | “确定”按钮文案 | `String` | `"确定"` |
-| cancelText | “取消”按钮文案 | `String` | `"取消"` |
-| disabledOk | “确定”按钮是否为禁用状态 | `Boolean` | `false` |
-| ok | “确定”按钮点击后自定义回调函数 | `Function` | `undefined` |
-| cancel | “取消”按钮点击后自定义回调函数 | `Function` | `undefined` |
-| container | 指定弹层插入的容器，默认会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| hideClose | 是否隐藏右上角关闭按钮 | `Boolean` | `false` |
-| escClosable | 是否按ESC时关闭抽屉 | `Boolean` | `true` |
-| terminate | 指定在用户点击“关闭”按钮，点击遮罩层或者按ESC键时的回调函数 | `Function` | `undefined` |
-| width | 指定抽屉宽度，`Number`类型时，单位为`px`；`String`类型时，需要指定单位 | `Number` | `String` | `undefined` |
-| mode | 指定主体元素在关闭状态下的渲染方式，`"destroy"`代表直接销毁，`"hide"`代表只是隐藏 | `"destroy"` | `"hide"` | `"destroy"` |
+| loading | “确定”按钮是否为加载状态 | `boolean` | `false` |
+| disabledOk | “确定”按钮是否为禁用状态 | `boolean` | `false` |
+| okText | “确定”按钮文案 | `string` | `"确定"` |
+| cancelText | “取消”按钮文案 | `string` | `"取消"` |
+| ok | “确定”按钮点击后自定义回调函数 | `() => void` | `undefined` |
+| cancel | “取消”按钮点击后自定义回调函数 | `() => void` | `undefined` |
+| container | 指定弹层插入的位置，默认会追加到`body`中，你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| hideClose | 是否隐藏右上角关闭按钮 | `boolean` | `false` |
+| overlay | 是否展示遮罩层 | `boolean` | `true` |
+| closable | 点击遮罩层是否可以关闭弹窗 | `boolean` | `true` |
+| terminate | 指定在用户点击“关闭”按钮，点击遮罩层或者按ESC键时的回调函数 | `() => void` | `undefined` |
+| escClosable | 是否按ESC时关闭弹窗 | `boolean` | `true` |
+| width | 指定弹窗宽度，`number`类型时，单位为`px`；`string`类型时，需要指定单位 | `number` | `string` | `undefined` |
+| mode | 指定主体元素在关闭状态下的渲染方式，`"destroy"`代表直接销毁，`"hide"`代表只是隐藏 | `"destroy"` | `"hide"` | `"hide"` |
+| placement | 自定义位置 | `"top"` | `"bottom"` |`"left"` |`"right"`|`"right"`|
 
 # 扩展点
 
 | 名称 | 说明 |
 | --- | --- |
+| content | 定义整个弹窗体，包括header，body，footer | 
 | header | 扩展弹窗头部 |
 | body | 扩展弹窗主体部分 |
 | footer | 扩展弹窗底部 |
@@ -54,7 +55,9 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| cancel | 点击取消按钮时触发 | - |
-| ok | 点击确定按钮时触发 | - |
 | open | 弹窗打开后触发 | - |
-| close | 弹窗关闭后触发 | - |
+| close | 弹窗关闭后触发，不管是什么原因导致的关闭 | - |
+| ok | 点击确定按钮时触发 | - |
+| cancel | 点击取消按钮时触发 | - |
+| terminate | 用户强行关闭弹窗时触发，即：点击“关闭”按钮，点击遮罩层，按ESC键 | - |
+| afterClose | 弹窗退出动画执行完成后触发 | - |

package/components/drawer/index.spec.ts

@@ -6,7 +6,7 @@ import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils'
 describe('Drawer', () => {
     afterEach((done) => {
         unmount();
-        setTimeout(done, 400);
+        setTimeout(done, 500);
     });
 
     it('should show drawer correctly', async function() {
@@ -20,10 +20,10 @@ describe('Drawer', () => {
         const drawer = getElement('.k-dialog-wrapper')!;
         expect(drawer.innerHTML).to.matchSnapshot();
         
-        await wait(400);
+        await wait(500);
         //hide
         getElement('.k-dialog-overlay')!.click();
-        await wait(400);
+        await wait(500);
         expect(getElement('.k-drawer')).to.be.undefined;
     });
 
@@ -58,13 +58,13 @@ describe('Drawer', () => {
         expect(overlay).to.be.undefined;
         await wait(200);
         dispatchEvent(document, 'click');
-        await wait(400);
+        await wait(500);
         const dialog = getElement('.k-dialog-wrapper')!;
         expect(dialog.innerHTML).to.matchSnapshot();
 
         const btn = dialog.querySelector('.k-dialog-ok') as HTMLElement;
         btn.click();
-        await wait(400);
+        await wait(500);
         expect(getElement('.k-drawer')).to.be.undefined;
     });
 });

package/components/drawer/styles.ts

@@ -10,11 +10,11 @@ export type Placement = ValueOf<typeof placements>
 export const placements = ['top', 'right', 'bottom', 'left'] as const;
 
 const defaults = {
-    get transition() { return theme.transition },
+    get transition() { return theme.transition.large },
     get boxShadow() { return theme.boxShadow }
 };
 
-let drawer: any;
+let drawer: typeof defaults;
 setDefault(() => {
     drawer = deepDefaults(theme, {drawer: defaults}).drawer;
 });

package/components/dropdown/demos/basic.md

@@ -6,24 +6,12 @@ order: 0
 一个完整的菜单需要用到`Dropdown`，`DropdownMenu`和`DropdownItem`三个组件。
 `Dropdown`会将第一个子元素作为触发器，第二个元素为菜单`DropdownMenu`。
 
-> 与`Tooltip`一样，在Intact下，`Dropdown`会返回两个元素（触发器和菜单），而不是将它们包裹起来，作为一个元素返回，
-> 所以不要将它作为模板的顶级元素，例如本例中，用`<div>`将之包裹起来才能作为模板元素返回。
-
-> `@since 0.9.0` `Dropdown`在`Vue/React`下渲染不会被元素包裹，这可能会影响你之前项目中定义的样式，
-> 如需渲染包裹元素，请做如下配置
-> ```js
-> // @code 
-> import {configure} from 'kpc';
->
-> // 该配置全局生效
-> configure({useWrapper: true});
-> ```
+> 与`Tooltip`一样，`Dropdown`会返回两个元素（触发器和菜单），所以不要作为Vue2.0的模板顶层返回元素
+> 因为Vue2.0只支持返回一个元素
 
 
 ```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>
@@ -45,5 +33,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/contextmenu.md

@@ -3,13 +3,7 @@ title: 右键菜单
 order: 7
 ---
 
-将`DropdownMenu`作为顶层元素，而不是`Dropdown`的子元素，然后指定`of`属性为事件对象，即可以实现
-跟随鼠标位置的弹出菜单
-
-> 这里将`position`属性指定为`left+1`是为了避免弹出菜单立即被选中第一项
-
-> `React`下事件对象会复用，我们不能在异步函数中调用事件对象的属性和方法，如果需要保留事件
-> 对象，需要调用`event.persist()`方法 https://reactjs.org/docs/events.html#event-pooling
+指定`trigger`为`contextmenu`即可实现右键菜单功能
 
 ```vdt
 import {Dropdown, DropdownMenu, DropdownItem} from 'kpc';

package/components/dropdown/demos/disabled.md

@@ -43,5 +43,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/nested.md

@@ -7,9 +7,7 @@ order: 4
 我们还可以通过`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 trigger="click">
@@ -76,5 +74,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/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,