@king-design/intact 2.0.0-beta.0

package/components/dialog/demos/terminate.md

@@ -0,0 +1,53 @@
+---
+title: 二次确认关闭 
+order: 7
+---
+
+如果你想在用户强行关闭弹窗（点击“关闭”按钮，点击遮罩层，按ESC键）提示用户进行二次确认，可以通过`terminate`属性来自定义
+处理逻辑，他们会在上述行为发生时调用。另外，如果你想在用户点击“取消”按钮时，也进行相同的操作，则还可以同时指定
+`cancel`属性为同一函数
+
+```vdt
+import {Dialog, Button} from 'kpc';
+
+<div>
+    <Button ev-click={this.onClick} type="primary">Show Dialog</Button>
+    <Dialog v-model="show" title="Dialog Title" ref="__demo"
+        terminate={this.terminate}
+        cancel={this.terminate}
+    >
+        Dialog Body 
+    </Dialog>
+</div>
+```
+
+```ts
+import {Dialog, bind} from 'kpc';
+
+interface Props {
+    show?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            show: false
+        }
+    }
+
+    @bind
+    onClick() {
+        this.set('show', true);
+    }
+
+    @bind
+    terminate() {
+        Dialog.confirm({
+            content: 'Are you sure you want to close the dialog?'
+        }).then(() => {
+            this.set('show', false);
+        }, () => {});
+    }
+}
+```

package/components/dialog/index.md

@@ -0,0 +1,128 @@
+---
+title: 弹窗
+category: 组件
+order: 10
+sidebar: doc
+---
+
+> `Dialog`如果展示遮罩层，那么它会在弹出时给`body`添加`overflow: hidden`样式，以此来阻止`body`
+> 滚动，同时会添加`padding-right`来保证页面不闪动，但如果你页面存在`position: fixed`元素，则依然
+> 可能会在弹窗弹出时闪动。
+> 
+> 组件提供了两个全局配置，用来自定义元素的修正逻辑。例如：本文档网站的配置如下
+> ```js
+> // @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`;
+>         }
+>     },
+> 
+>     onDialogClose() {
+>         const header = document.querySelector('.header-wrapper');
+>         if (header) {
+>             header.removeAttribute('style');
+>         }
+>         const tableOfContents = document.querySelector('.table-of-contents');
+>         if (tableOfContents) {
+>             tableOfContents.removeAttribute('style');
+>         }
+>     },
+> });
+> ```
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 弹窗标题 | `String` | `"提示"` |
+| overlay | 是否展示遮罩层 | `Boolean` | `true` |
+| closable | 点击遮罩层是否可以关闭弹窗 | `Boolean` | `true` |
+| 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"` | `"hide"` |
+
+# 扩展点
+
+| 名称 | 说明 |
+| --- | --- |
+| header | 扩展弹窗头部 |
+| body | 扩展弹窗主体部分 |
+| footer | 扩展弹窗底部 |
+| footer-wrapper | 扩展弹窗整个底部，上述`footer`是它下面一个子扩展点 |
+
+# 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| show | 弹出弹窗 | - | `Promise` |
+| close | 关闭弹窗 | - | `undefined` |
+| showLoading | “确定”按钮变为加载状态 | - | `undefined` |
+| hideLoading | “确定”按钮变为正常状态 | - | `undefined` |
+| disableOk | “确定”按钮变为禁用状态 | - | `undefined` |
+| enableOk | “确定”按钮变为正常状态 | - | `undefined` |
+| ok | 点击“确定”按钮的回调方法，继承`Dialog`时，可以复写该方法实现自定义需求 | - | `undefined` |
+| cancel | 点击“取消”按钮的回调方法，继承`Dialog`时，可以复写该方法实现自定义需求 | - | `undefined` |
+
+# 静态方法
+
+> 如果你在Vue下全局安装KPC，可以通过`this.$dialog`引用到`Dialog`组件，所以你可以这样调用它的
+> 静态方法：`this.$dialog.success()`
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| success | 成功提示窗口 | `Options` | `Promise` |
+| warning | 警告提示窗口 | `Options` | `Promise` |
+| error | 错误提示窗口 | `Options` | `Promise` |
+| confirm | 确定提示窗口 | `Options` | `Promise` |
+
+其中`Options`对象常用属性说明如下
+
+> `Dialog`属性大都支持
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 弹窗标题，如果传入标题，则展示样式会有所不同 | `String` | `undefined` |
+| content | 弹窗内容 | `String` &#124; `Number` &#124; `VNode` &#124; <code>Array&lt;String &#124; Number &#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` |
+
+其中`Promise`对象会在点击“确定”按钮时`resolve()`，在点击“取消”按钮时`reject()`，你可以在`then()`
+中书写用户点击不同按钮的逻辑
+
+> 只有`confirm`类型的提示窗口才有“取消”按钮
+
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| cancel | 点击取消按钮时触发 | - |
+| ok | 点击确定按钮时触发 | - |
+| open | 弹窗打开后触发 | - |
+| close | 弹窗关闭后触发，不管是什么原因导致的关闭 | - |
+| terminate | 用户强行关闭弹窗时触发，即：点击“关闭”按钮，点击遮罩层，按ESC键 | - |

package/components/dialog/index.spec.ts

@@ -0,0 +1,308 @@
+import {Component} from 'intact';
+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);
+    });
+
+    function expectDialog() {
+        const dialog = getElement('.k-dialog')!;
+        expect(dialog).to.exist;
+        expect(getElement('.k-dialog-wrapper')!.innerHTML.replace(/[\d\.]+px/g, '')).to.matchSnapshot();
+
+        return dialog;
+    }
+
+    it('should show dialog correctly', async () => {
+        const [instance] = mount(BasicDemo);
+        const dialog = instance.refs.__demo as Dialog;
+        await dialog.show();
+        expectDialog();
+    });
+
+    it('should show correctly when render with value is true', () => {
+        class Demo extends Component {
+            static template = `const {Dialog} = this; <Dialog value={true}>test</Dialog>`;
+            private Dialog = Dialog;
+        }
+        const [instance] = mount(Demo);
+        expectDialog();
+    });
+
+    it('show dialog as instance', async () => {
+        class MyDialog extends BaseDialog<DialogProps & {data: number}> {
+            static template = `<t:super><b:body>Dialog Instance {this.get('data')}</b:body></t:super>`
+        }
+        const dialog = new MyDialog({data: 1});
+        await dialog.show();
+
+        expectDialog();
+
+        dialog.close();
+        await wait(500);
+        expect(getElement('.k-dialog')).to.be.undefined;
+    });
+
+    it('should update correctly', async () => {
+        class Demo extends Component<{content: string}> {
+            static template = `
+                var Dialog = this.Dialog;
+                <Dialog value={true} ref="dialog">{this.get('content')}</Dialog>
+            `
+            static defaults() {
+                return {
+                    content: 'a'
+                }
+            }
+
+            private Dialog = Dialog;
+        }
+
+        const [instance] = mount(Demo);
+        instance.set('content', 'b');
+        await wait();
+        expect(getElement('.k-dialog-body')!.innerText).to.eql('b');
+    });
+
+    it('should prepend conent to block correctly', () => {
+        class Demo extends Component {
+            static template = `
+                var Dialog = this.Dialog;
+                <Dialog value={true} ref="dialog">
+                    <b:footer>
+                        dialog footer
+                        {$super()}
+                    </b:footer>
+                </Dialog>
+            `
+            private Dialog = Dialog;
+        }
+
+        const [instance] = mount(Demo);
+        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 确定取消');
+    });
+
+    it('basic test', async () => {
+        const [instance, element] = mount(BasicDemo);
+        const btn = element.querySelector('.k-btn') as HTMLElement;
+
+        dispatchEvent(btn, 'click');
+        await wait();
+        const dialog = expectDialog();
+
+        // click ok
+        dispatchEvent(dialog.querySelector('.k-dialog-ok') as HTMLElement, 'click');
+        expect(instance.get('show')).be.false;
+
+        // click cancel
+        dispatchEvent(btn, 'click');
+        await wait();
+        dispatchEvent(dialog.querySelector('.k-dialog-cancel') as HTMLElement, 'click');
+        expect(instance.get('show')).be.false;
+
+        // press esc to close
+        dispatchEvent(btn, 'click');
+        await wait();
+        dispatchEvent(document, 'keydown', {keyCode: 27});
+        expect(instance.get('show')).be.false;
+        await wait(500);
+        expect(document.body.getAttribute('style')).to.be.null;
+    });
+
+    it('methods test', async () => {
+        const [instance, element] = mount(BasicDemo);
+        const btn = element.querySelector('.k-btn') as HTMLElement;
+
+        dispatchEvent(btn, 'click');
+        await wait();
+        const dialog = getElement('.k-dialog')!;
+        const ok = dialog.querySelector('.k-dialog-ok') as HTMLElement;
+
+        const demo = instance.refs.__demo as Dialog;
+        demo.showLoading();
+        await wait();
+        expect(ok.classList.contains('k-loading')).to.be.true;
+        demo.hideLoading();
+        await wait();
+        expect(ok.classList.contains('k-loading')).to.be.false;
+        demo.disableOk();
+        await wait();
+        expect(ok.classList.contains('k-disabled')).to.be.true;
+        demo.enableOk();
+        await wait();
+        expect(ok.classList.contains('k-disabled')).to.be.false;
+    });
+
+    it('demos test', async function() {
+        this.timeout(0);
+        const req = require.context('~/components/dialog/demos', true, /^((?!async).)*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);
+
+            dispatchEvent(element.querySelector('.k-btn') || element, 'click');
+            await wait();
+            expectDialog();
+            unmount();
+        }
+        await wait(500);
+        expect(document.body.getAttribute('style')).to.be.null;
+    });
+
+    it('async close', async () => {
+        const [instance, element] = mount(AsyncCloseDemo);
+
+        dispatchEvent(element.firstChild as HTMLElement, 'click');
+        instance.set('code', '111');
+        await wait();
+        let dialog = getElement('.k-dialog')!;
+        const className = dialog.className;
+        // click ok
+        dispatchEvent(dialog.querySelector('.k-dialog-ok')!, 'click');
+        await wait();
+        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);
+
+        dispatchEvent(element.firstChild as HTMLElement, 'click');
+        await wait();
+        const dialog = getElement('.k-dialog')!;
+        const top = Math.round(parseFloat(dialog.style.top));
+        const header = getElement('.k-dialog-header')!;
+        dispatchEvent(header, 'mousedown', {which: 1, clientY: 0});
+        dispatchEvent(document, 'mousemove', {clientY: -1});
+        dispatchEvent(document, 'mouseup');
+        await wait();
+        expect(dialog.style.top).to.eql(`${top - 1}px`);
+    });
+
+    it('static methods', async () => {
+        let cb = sinon.spy();
+        Dialog.success({content: 'test'}).then(cb);
+        await wait();
+        let dialog = expectDialog();
+        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        await wait();
+        expect(cb.callCount).to.eql(1);
+
+        let cb1 = sinon.spy();
+        Dialog.confirm({content: 'test', hideIcon: true, hideClose: false}).then(cb, cb1)
+        await wait();
+        dialog = expectDialog();
+        dialog.querySelector<HTMLElement>('.k-dialog-cancel')!.click();
+        await wait();
+        expect(cb1.callCount).to.eql(1);
+
+        // with title
+        Dialog.error({title: 'error', content: 'test'});
+        await wait();
+        dialog = expectDialog();
+        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+
+        const cb2 = sinon.spy();
+        Dialog.confirm({content: 'test', closable: false}).then(() => {}, cb2);
+        await wait();
+        const overlay = getElement('.k-dialog-overlay')!;
+        overlay.click();
+        await wait();
+        expect(cb2.callCount).to.eql(0);
+        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-btn')!.click();
+    });
+
+    it('should double check for closing dialog', async () => {
+        const [instance, element] = mount(TerminateDemo);
+
+        (element.firstChild as HTMLElement).click();
+        await wait();
+        const dialog = getElement('.k-dialog')!;
+        dialog.querySelector<HTMLElement>('.k-dialog-close')!.click();
+        await wait(500);
+        expect(dialog.style.display).to.eql('');
+        const confirm = getElement('.k-alert-dialog')!;
+        confirm.querySelector<HTMLElement>('.k-dialog-ok')!.click();
+        await wait(500);
+        expect(dialog.style.display).to.eql('none');
+    });
+
+    it('should remove body', async () => {
+        const [instance, element] = mount(DestroyDemo);
+
+        expect(getElement('.k-dialog')).to.be.undefined;
+        instance.set('show', true);
+        await wait(500);
+        expectDialog();
+
+        instance.set('show', false);
+        await wait(500);
+        expect(getElement('.k-dialog')).to.be.undefined;
+    });
+
+    it('should not close when click and move outside', async () => {
+        const [instance, element] = mount(BasicDemo);
+
+        (element.firstChild as HTMLElement).click();
+        await wait();
+        const dialog = getElement('.k-dialog')!;
+        const wrapper = dialog.parentElement!;
+        dispatchEvent(dialog, 'mousedown');
+        dispatchEvent(wrapper, 'mouseup');
+        dispatchEvent(wrapper, 'click');
+
+        await wait(500);
+        expectDialog();
+    });
+
+    // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
+        // const Test = {
+            // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,
+            // components: {
+                // Dialog
+            // },
+            // data() {
+                // return {
+                    // show: false,
+                // }
+            // },
+        // };
+        // const container = document.createElement('div');
+        // document.body.appendChild(container);
+        // const app = new Vue({
+            // render: h => h('Test', {ref: 'test'}),
+            // components: {Test},
+        // }).$mount(container);
+
+        // app.$refs.test.show = true;
+        // await wait();
+
+        // // close dialog
+        // app.$refs.test.$refs.dialog.close();
+        // await wait();
+    // });
+});

package/components/dialog/index.ts

@@ -0,0 +1,75 @@
+import {BaseDialog as _BaseDialog, BaseDialogProps, BaseDialogEvents, BaseDialogBlocks} from './base';
+import {createVNode, VNodeComponentClass, callAll, Props, ComponentClass} from 'intact';
+import {addStaticMethods, StaticMethod} from './staticMethods';
+import {usePosition} from './usePosition';
+
+export interface DialogProps extends BaseDialogProps { }
+export interface DialogEvents extends BaseDialogEvents { }
+export interface DialogBlocks extends BaseDialogBlocks { }
+
+export class BaseDialog<
+    P extends DialogProps = DialogProps,
+    E extends DialogEvents = DialogEvents,
+    B extends DialogBlocks = DialogBlocks,
+> extends _BaseDialog<P, E> {
+    public useAsComponent = false;
+
+    constructor(
+        props: Props<P, BaseDialog> | null | undefined = null as unknown as P,
+        $vNode: VNodeComponentClass = null as unknown as VNodeComponentClass,
+        $SVG: boolean = false,
+        $mountedQueue: Function[] = [],
+        $senior: ComponentClass | null = null
+    ) {
+        super(props, $vNode, $SVG, $mountedQueue, $senior);
+    }
+
+    init() {
+        super.init();
+
+        usePosition(this.dialogRef);
+
+        if (this.$vNode) {
+            this.useAsComponent = true;
+        }
+    }
+
+    public show() {
+        return new Promise<void>(resolve => {
+            if (this.get('value')) return resolve();
+
+            const show = () => {
+                this.set('value', true);
+                resolve();
+            }
+
+            if (this.useAsComponent) {
+                return show();
+            }
+
+            // use as intance
+            const mountedQueue = this.$mountedQueue;
+            this.$init(null); 
+            const vNode = this.$vNode = createVNode(BaseDialog) as VNodeComponentClass<any>;
+            vNode.children = this;
+            this.$render(null, vNode, document.body, null, mountedQueue);
+            callAll(mountedQueue);
+
+            if (this.$inited) {
+                show();
+            } else {
+                this.on('$inited', show);
+            }
+        });
+    }
+}
+
+// for React/Vue type inference
+export class Dialog extends BaseDialog<DialogProps, DialogEvents, DialogBlocks> {
+    static success: StaticMethod;
+    static warning: StaticMethod;
+    static error: StaticMethod;
+    static confirm: StaticMethod;
+}
+
+addStaticMethods(Dialog);

package/components/dialog/staticMethods.ts

@@ -0,0 +1,55 @@
+import {VNode, VNodeComponentClass} from 'intact';
+import type {Dialog, DialogProps} from './';
+import template from './alert.vdt';
+
+export interface AlertDialogProps extends DialogProps {
+    content?: string | VNode
+    type?: 'success' | 'warning' | 'error' | 'confirm' 
+    hideIcon?: boolean
+    hideFooter?: boolean
+}
+
+export type StaticMethod = (options?: AlertDialogProps) => Promise<void>
+
+export function addStaticMethods(Component: typeof Dialog) {
+    class AlertDialog extends Component {
+        static template = template;
+        static defaults = (): Partial<AlertDialogProps> =>({
+            ...Component.defaults(),
+            title: undefined,
+            type: 'success',
+            size: 'mini',
+            hideClose: true,
+        });
+    }
+
+    function show(options: AlertDialogProps = {}) {
+        return new Promise<void>((resolve, reject) => {
+            const dialog = new AlertDialog(options, null as unknown as VNodeComponentClass<any>, false, [], null);
+            dialog.show();
+            dialog.on('ok', () => {
+                resolve();
+            });
+            dialog.on('cancel', () => {
+                reject();
+            });
+            // if press esc, treat it as cancel too
+            dialog.on('terminate', () => {
+                reject();
+            });
+        });
+    }
+
+    (['success', 'warning', 'error', 'confirm'] as const).forEach(type => {
+        Component[type] = (options: AlertDialogProps = {}) => {
+            const closable = type === 'confirm';
+            options = {
+                closable, 
+                escClosable: closable, 
+                ...options,
+                type
+            };
+            return show(options);
+        }
+    });
+}