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

package/components/diagram/shapes/line.ts

@@ -10,10 +10,10 @@ export interface DLineProps extends DBaseProps {
     endArrow?: Arrow
     startPoint?: Point
     endPoint?: Point
-    exit?: Point
-    entry?: Point
     from?: Key
     to?: Key
+    exit?: Point
+    entry?: Point
 }
 
 type Arrow = 
@@ -57,7 +57,6 @@ const arrows: Arrow[] = [
 
 const typeDefs: Required<TypeDefs<DLineProps>> = {
     ...DBase.typeDefs,
-    strokeStyle: ['solid', 'dashed', 'dotted'],
     type: ['rounded', 'sharp', 'curved', 'straight'],
     startArrow: arrows,
     endArrow: arrows,

package/components/dialog/base.ts

@@ -10,7 +10,7 @@ import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
 import {useDraggable} from './useDraggable';
 import {useEscClosable} from './useEscClosable';
 import {SHOW, HIDE, DIALOG} from './constants';
-import {useFixBody} from './useFixBody';
+import {useFixBody, setHooks} from './useFixBody';
 import type {Events} from '../types';
 
 export interface BaseDialogProps {
@@ -100,6 +100,7 @@ export class BaseDialog<
     static typeDefs = typeDefs;
     static defaults = defaults;
     static events = events;
+    static setHooks = setHooks;
 
     public dialogRef = createRef<HTMLDivElement>();
 

package/components/dialog/demos/block.md

@@ -6,8 +6,6 @@ order: 1
 组件提供了`header`和`footer`扩展点（block），通过它们可以自定义头部和底部。有时候我们可能想
 完整去掉整个底部`footer`，这可以通过置空`footer-wrapper`这个扩展点做到。
 
-> 可以通过`parent()`引用到组件定义的默认内容
-
 > vue会忽略所有空`slot`，所以如果要重置`footer-wrapper`可以传一个空`div`代替
 
 ```vdt
@@ -61,9 +59,8 @@ import {Button, Dialog} from 'kpc';
 
         <template slot="footer">
             Custom Footer
-            <!-- vue不支持parent()引用，我们需要重新定义按钮 -->
-            <Button @click="show = false">取消</Button>
             <Button type="primary" @click="show = false">确认</Button>
+            <Button @click="show = false">取消</Button>
         </template>
     </Dialog>
     <Dialog v-model="show1" title="No Footer">
@@ -82,14 +79,16 @@ data() {
 },
 ```
 
-```jsx
+```tsx
 import React from 'react';
-import Button from 'kpc';
-import Dialog from 'kpc';
+import {Button, Dialog} from '@king-design/react';
 import './index.styl';
 
 export default class Demo extends React.Component {
-    state = {}
+    state = {
+        show: false,
+        show1: false,
+    }
 
     render() {
         return (
@@ -101,7 +100,7 @@ export default class Demo extends React.Component {
                     type="primary"
                 >Show No Footer Dialog</Button>
                 <Dialog value={this.state.show}
-                    ev$change-value={(c, show) => this.setState({show})}
+                    onChangeValue={(show) => this.setState({show})}
                     b-header={
                         <div className="k-title">
                             <i className="ion-person"></i>
@@ -111,15 +110,15 @@ export default class Demo extends React.Component {
                     b-footer={
                         <React.Fragment>
                             Custom Footer
-                            <Button onClick={() => this.setState({show: false})}>取消</Button>
                             <Button type="primary" onClick={() => this.setState({show: false})}>确认</Button>
+                            <Button onClick={() => this.setState({show: false})}>取消</Button>
                         </React.Fragment>
                     }
                 >
                     Dialog Body 
                 </Dialog>
                 <Dialog value={this.state.show1}
-                    on$change-value={(c, show1) => this.setState({show1})}
+                    onChangeValue={(show1) => this.setState({show1})}
                     title="No Footer"
                     b-body="body"
                     b-footer-wrapper=""
@@ -130,48 +129,3 @@ export default class Demo extends React.Component {
     }
 }
 ```
-
-```angular
-// import {Component} from '@angular/core';
-// 
-// @Component({
-//     selector: 'app-demo',
-//     template: `
-//         <div>
-//             <k-button (click)="set('show', true)"
-//                 type="primary"
-//             >Show Dialog</k-button>
-//             <k-button (click)="set('show1', true)"
-//                 type="primary"
-//             >Show No Footer Dialog</k-button>
-//             <k-dialog [(value)]="show">
-//                 <ng-template #header>
-//                     <div class="k-title">
-//                         <i class="ion-person"></i>
-//                         Custom Header
-//                     </div>
-//                 </ng-template>
-//         
-//                 Dialog Body 
-//         
-//                 <ng-template #footer>
-//                     Custom Footer
-//                     <k-button (click)="show = false">取消</k-button>
-//                     <k-button type="primary" (click)="show = false">确认</k-button>
-//                 </ng-template>
-//             </k-dialog>
-//             <k-dialog [(value)]="show1" title="No Footer">
-//                 <ng-template #body>body</ng-template>
-//                 <ng-template #footer_wrapper></ng-template>
-//             </k-dialog>
-//         </div>
-//     `,
-//     styleUrls: ['./index.styl'],
-// })
-// export class AppDemoComponent {
-//     private show;
-//     private show1;
-// 
-//     set(key, value) { this[key] = value; }
-// }
-```

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)
 ```