@king-design/intact 2.0.0-beta.0

package/components/dialog/styles.ts

@@ -0,0 +1,234 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+
+const defaults = {
+    width: '800px',
+    bgColor: '#fff',
+    get borderRadius() { return theme.borderRadius },
+    padding: '0',
+    margin: '0 20px',
+    get color() { return theme.color.text },
+    get fontSize() { return theme.fontSize },
+    get boxShadow() { return theme.boxShadow },
+
+    // header
+    header: {
+        fontSize: '16px',
+        get color() { return theme.color.title },
+        height: '61px',
+        border: `1px solid #eaeaea`,
+        closeTop: '16px',
+        closeRight: '-9px',
+        closeIconFontSize: '44px',
+    },
+
+    // body
+    body: {
+        padding: `20px`,
+    },
+
+    // footer
+    footer: {
+        padding: `20px 0`,
+        btnGap: `12px`,
+        border: `1px solid #eaeaea`,
+    },
+
+    // transition
+    transform: 'translateY(-10px) scale(1.05)',
+
+    // size
+    largeWidth: '1000px',
+    smallWidth: '600px',
+    miniWidth: '400px',
+
+    // alert dialog
+    alert: {
+        padding: `0 20px`,
+        bodyMarginTop: `-25px`,
+        tipIconMarginBottom: '10px',
+        tipIconFontSize: '37px',
+        tipIconLineHeight: '37px',
+
+        // with title
+        titleTipIconFontSize: '37px',
+        titleFontSize: '14px',
+        wrapperPaddingLeft: '8px',
+        titleBodyMarginTop: '-36px',
+    },
+};
+
+let dialog: any;
+setDefault(() => {
+    dialog = deepDefaults(theme, {dialog: defaults}).dialog;
+});
+
+export function makeDialogStyles() {
+    return css`
+        position: absolute;
+        width: ${dialog.width};
+        border-radius: ${dialog.borderRadius};
+        background: ${dialog.bgColor};
+        font-size: ${dialog.fontSize};
+        color: ${dialog.color};
+        box-shadow: ${dialog.boxShadow};
+        max-width: 100%;
+        z-index: ${theme.maxZIndex};
+
+        // drag
+        &.k-dragging {
+            cursor: move;
+            user-select: none;
+        }
+
+        // transition
+        &.transition-enter-active,
+        &.transition-leave-active,
+        &.transition-appear-active {
+            // transition: transform ${theme.transition}, opacity ${theme.transition};
+            transition: all ${theme.transition};
+        }
+        &.transition-enter-from,
+        &.transition-leave-to,
+        &.transition-appear-from {
+            transform: ${dialog.transform};
+            opacity: 0;
+        }
+
+        // size
+        ${(['large', 'small', 'mini'] as const).map(size => {
+            return css`
+                &.k-${size} {
+                    width: ${dialog[`${size}Width` as const]}
+                }
+            `
+        })}
+
+        // header
+        .k-dialog-header {
+            padding: 0 ${dialog.padding};
+            margin: ${dialog.margin};
+            border-bottom: ${dialog.header.border} ;
+            height: ${dialog.header.height};
+            line-height: ${dialog.header.height};
+            font-size: ${dialog.header.fontSize};
+            color: ${dialog.header.color};
+            position: relative;
+        }
+        .k-dialog-title {
+            display: inline-block;
+        }
+        .k-dialog-close {
+            position: absolute;
+            right: ${dialog.header.closeRight};
+            top: ${dialog.header.closeTop};
+            .k-icon {
+                font-size: ${dialog.header.closeIconFontSize};
+            }
+        }
+
+        // body
+        .k-dialog-body {
+            padding: ${dialog.body.padding};
+        }
+
+        // footer
+        .k-dialog-footer {
+            text-align: right;
+            padding: ${dialog.footer.padding};
+            margin: ${dialog.margin};
+            border-top: ${dialog.footer.border};
+            .k-btn {
+                margin-left: ${dialog.footer.btnGap};
+            }
+        }
+    `;
+}
+
+export function makeWrapperStyles() {
+    // k-fade-leave-active will add position absolute to the styles
+    // so we must set fixed with important to .k-dialog-overlay
+    return css`
+        position: absolute;
+        z-index: ${theme.maxZIndex};
+        top: 0;
+        left: 0;
+        width: 100%;
+        .k-dialog-overlay {
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, .5);
+        }
+    `;
+}
+
+export function makeAlertStyles() {
+    return css`
+        &.k-alert-dialog {
+            .k-dialog-body {
+                margin-top: ${dialog.alert.bodyMarginTop};
+                padding: ${dialog.alert.padding};
+                text-align: center;
+                position: relative;
+                z-index: 1;
+            }
+            .k-dialog-header,
+            .k-dialog-footer {
+                border: none;
+            }
+            .k-dialog-tip-icon {
+                margin-bottom: ${dialog.alert.tipIconMarginBottom};
+                .k-icon {
+                    font-size: ${dialog.alert.tipIconFontSize};
+                    line-height: ${dialog.alert.tipIconLineHeight};
+                }
+            }
+            ${(['success', 'warning', 'error', 'confirm'] as const).map(type => {
+                const color = type === 'error' ?
+                    theme.color.danger :
+                        type === 'confirm' ?
+                            theme.color.primary :
+                            theme.color[type];
+                return css`
+                    &.k-${type} {
+                        .k-dialog-tip-icon {
+                            color: ${color};
+                        }
+                    }
+                `
+            })}
+            &:not(.k-confirm) {
+                .k-dialog-cancel {
+                    display: none;
+                }
+            }
+
+            // with title
+            &.k-with-title {
+                .k-dialog-body {
+                    margin-top: ${dialog.alert.titleBodyMarginTop};
+                    text-align: left;
+                }
+                .k-dialog-tip-icon {
+                    float: left;
+                    .k-icon {
+                        font-size: ${dialog.alert.titleTipIconFontSize};
+                    }
+                }
+                .k-alert-dialog-wrapper {
+                    overflow: hidden;
+                    padding-left: ${dialog.alert.wrapperPaddingLeft};
+                }
+                .k-alert-dialog-title {
+                    line-height: ${dialog.alert.tipIconLineHeight};
+                    font-size: ${dialog.alert.titleFontSize};
+                }
+            }
+        }
+    ` 
+}

package/components/dialog/useDraggable.ts

@@ -0,0 +1,64 @@
+import {useInstance, RefObject} from 'intact';
+import {useDraggable as useBaseDraggable} from '../../hooks/useDraggable';
+import {scrollbarWidth} from '../position';
+import type {Dialog} from './index';
+
+export function useDraggable(
+    dialogRef: RefObject<HTMLDivElement>,
+    areaRef: RefObject<HTMLDivElement>
+) {
+    const component = useInstance() as Dialog;
+    let x = 0;
+    let y = 0;
+    let width = 0;
+    let height = 0;
+    let areaWidth = 0;
+    let areaHeight = 0;
+
+    function onStart(e: MouseEvent) {
+        const dialog = dialogRef.value!;
+
+        x = dialog.offsetLeft - e.clientX;
+        y = dialog.offsetTop - e.clientY;
+        width = dialog.offsetWidth;
+        height = dialog.offsetHeight;
+
+        const body = document.body;
+        const html = document.documentElement;
+        
+        if (!component.get('overlay')) {
+            areaWidth = Math.max(body.scrollWidth, html.scrollWidth);
+            areaHeight = Math.max(body.scrollHeight, html.scrollHeight);
+        } else {
+            areaWidth = Math.max(html.offsetWidth, window.innerWidth);
+            areaHeight = Math.max(html.offsetHeight, window.innerHeight);
+        }
+    }
+
+    function onMove(e: MouseEvent) {
+        const style = dialogRef.value!.style;
+        let _areaWidth = areaWidth;
+        const area = areaRef.value;
+        if (area) {
+            // detect the wrapper has scrollbar or not
+            if (area.scrollHeight > area.offsetHeight) {
+                const scrollBarWidth = scrollbarWidth();
+                _areaWidth -= scrollBarWidth;
+            }
+        }
+
+        const left = Math.min(
+            Math.max(x + e.clientX, 0),
+            Math.max(_areaWidth - width, 0)
+        );
+        const top = Math.min(
+            Math.max(y + e.clientY, 0),
+            Math.max(areaHeight - height, 0)
+        );
+
+        style.left = `${left}px`;
+        style.top = `${top}px`;
+    }
+
+    return useBaseDraggable({onStart, onMove});
+}

package/components/dialog/useEscClosable.ts

@@ -0,0 +1,45 @@
+import {useInstance, onUnmounted} from 'intact';
+import type {Dialog} from './index';
+import {SHOW, HIDE} from './constants';
+
+// only close the top dialog when press ESC
+const dialogs: Dialog[] = [];
+const escClose = (e: KeyboardEvent) => {
+    const dialog = dialogs[dialogs.length - 1];
+    if (e.keyCode === 27 && dialog.get('escClosable')) {
+        dialog.terminate();
+    }
+};
+
+export function useEscClosable() {
+    const instance = useInstance() as Dialog;
+
+    instance.on(SHOW, () => {
+        if (!dialogs.length) {
+            document.addEventListener('keydown', escClose);
+        }
+        dialogs.push(instance);
+    });
+
+    function onHide() {
+        const dialog = dialogs.pop();
+        // const dialog = dialogs.shift();
+        if (process.env.NODE_ENV !== 'production') {
+            if (dialog !== instance) {
+                throw new Error('The dialog has handled hide callback. It is a bug of KPC');
+            }
+        }
+
+        if (!dialogs.length) {
+            document.removeEventListener('keydown', escClose);
+        }
+    }
+
+    instance.on(HIDE, onHide);
+
+    onUnmounted(() => {
+        if (instance.get('value')) {
+            onHide();
+        }
+    });
+}

package/components/dialog/useFixBody.ts

@@ -0,0 +1,71 @@
+import {useInstance, RefObject, onBeforeUnmount} from 'intact';
+import type {BaseDialog} from './base';
+import {position} from '../position';
+import {scrollbarWidth} from '../position';
+import {SHOW} from './constants';
+
+const dialogs = new Set<BaseDialog>();
+let originalStyle: string | null = null;
+
+export function useFixBody(elementRef: RefObject<HTMLDivElement>) {
+    const instance = useInstance() as BaseDialog;
+    let fixedBody = false;
+
+    instance.on(SHOW, onEnter);
+    instance.on('afterClose', onAfterLeave);
+    
+    onBeforeUnmount(() => {
+        if (fixedBody && instance.get('value')) {
+            // maybe HIDE event has not triggered
+            onClosed(instance);
+        }
+    });
+
+    function onEnter() {
+        if (instance.get('overlay')) {
+            fixedBody = true;
+            onOpen(instance);
+        }
+    }
+
+    function onAfterLeave() {
+        if (fixedBody) {
+            fixedBody = false;
+            onClosed(instance);
+        }
+    }
+}
+
+function onOpen(dialog: BaseDialog) {
+    const body = document.body;
+    if (dialogs.size === 0) {
+        const bodyStyle = body.style;
+        originalStyle = body.getAttribute('style');
+        bodyStyle.overflow = 'hidden';
+
+        const scrollBarWidth = shouldFixBody();
+        if (scrollBarWidth) {
+            bodyStyle.paddingRight = `${scrollBarWidth}px`;
+        }
+    }
+    dialogs.add(dialog);
+}
+
+function onClosed(dialog: BaseDialog) {
+    const body = document.body;
+    dialogs.delete(dialog);
+    if (dialogs.size === 0) {
+        if (originalStyle) {
+            // console.log(originalStyle);
+            body.setAttribute('style', originalStyle);
+        } else {
+            body.removeAttribute('style');
+        }
+    }
+}
+
+function shouldFixBody() {
+    if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
+        return scrollbarWidth();
+    }
+}

package/components/dialog/usePosition.ts

@@ -0,0 +1,41 @@
+import {useInstance, RefObject, remove} from 'intact';
+import type {Dialog} from './';
+import {position} from '../position';
+import {SHOW} from './constants';
+
+export function usePosition(elementRef: RefObject<HTMLDivElement>) {
+    const instance = useInstance() as Dialog;
+
+    instance.on(SHOW, center);
+    instance.on('afterClose', onAfterLeave);
+
+    function center() {
+        position(elementRef.value!, {
+            // ensure title visible always
+            using: (feedback, position) => {
+                const height = feedback.element.height;
+                const scrollTop = window.pageYOffset;
+                const outerHeight = window.document.documentElement.clientHeight;
+                if (height > outerHeight) {
+                    position.top = scrollTop;
+                }
+            },
+            // let dialog padding top half of padding bottom
+            my: 'center center+16%',
+            at: 'center center-16%'
+        });
+    }
+
+    function onAfterLeave() {
+        const element = elementRef.value;
+        if (element) {
+            // in `destroy` mode, the elementRef.value doesn't exist
+            const style = element.style;
+            style.left = style.top = '';
+        }
+
+        if (!instance.useAsComponent) {
+            remove(instance.$vNode!, document.body, false);
+        }
+    }
+}

package/components/drawer/demos/basic.md

@@ -0,0 +1,43 @@
+---
+title: 基本用法
+order: 0
+---
+
+`Drawer`组件继承了`Dialog`组件的属性、扩展点、方法和事件（拖拽功能除外）。基本用法和`Dialog`相同。
+
+<!-- 继承了Dialog弹窗，通过`v-model`建立绑定，当该绑定的值为`true`时，展示抽屉组件。 -->
+
+```vdt
+import {Drawer, Button, ButtonGroup, Select, Option} from 'kpc';
+
+<div>
+    <Button ev-click={this.set.bind(this, 'show', true)}
+        type="primary"
+    >Show Drawer</Button>
+    <Drawer v-model="show"
+        title="Drawer Title"
+        ref="__demoOne"
+    >
+        <Select>
+            <Option value="1">Option 1</Option>
+            <Option value="2">Option 2</Option>
+        </Select>
+        Drawer Body 
+    </Drawer>
+</div>
+```
+
+```ts
+interface Props {
+    show?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            show: false
+        }
+    }
+}
+```

package/components/drawer/demos/overlay.md

@@ -0,0 +1,39 @@
+---
+title: 遮罩层
+order: 0.2
+---
+
+添加`overlay`属性，false则不展示遮罩层，true展示遮罩层
+
+```vdt
+import {Drawer, Button, ButtonGroup} from 'kpc';
+
+<div>
+    <Button ev-click={this.set.bind(this, 'show', true)}
+        type="primary"
+    >Show Drawer Without Overlay</Button>
+
+    <Drawer v-model="show" 
+        title="Drawer Title"
+        ref="__demoOne"
+        overlay={false}
+    >
+        Drawer Without Overlay
+    </Drawer>
+</div>
+```
+
+```ts
+interface Props {
+    show?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            show: false
+        }
+    }
+}
+```

package/components/drawer/demos/placement.md

@@ -0,0 +1,86 @@
+---
+title: 位置
+order: 0.1
+---
+
+添加`placement`属性，定义如下位置：`top`,`bottom`,`left`,`right`。默认`right`从右侧出现
+
+```vdt
+import {Drawer, Button, ButtonGroup} from 'kpc';
+
+<div>
+    <ButtonGroup>
+        <Button v-for={this.get('showList')}
+            ev-click={this.showDrawer.bind(self, $value.key)}
+        >{$value.value}</Button>
+    </ButtonGroup>
+
+    <Drawer v-model='show'
+        title='Drawer Title' 
+        ref='__demoTwo' 
+        placement={this.get('showPosition')}
+        size='small'
+    >
+        Drawer Body
+    </Drawer>
+</div>
+```
+
+```ts
+import {bind, DrawerProps} from 'kpc';
+
+interface Props {
+    show?: boolean
+    showPosition: DrawerProps['placement'] 
+    showList: ListItem[]
+}
+
+type ListItem = {
+    key: DrawerProps['placement'] 
+    value: string
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            show: false,
+            showPosition: 'right',
+            showList: [
+                {
+                    key: 'top',
+                    value: '从上侧出现'
+                },
+                {
+                    key: 'bottom',
+                    value: '从下侧出现'
+                },
+                {
+                    key: 'left',
+                    value: '从左侧出现'
+                },
+                {
+                    key: 'right',
+                    value: '从右侧出现'
+                }
+            ]
+        } as Props;
+    }
+
+    @bind
+    showDrawer(value: DrawerProps['placement']) {
+        this.set({
+            'showPosition': value,
+            'show': true
+        });
+    }
+}
+```
+
+```vue-methods
+showDrawer(value) {
+    this.showPosition = value;
+    this.show = true;
+}
+```

package/components/drawer/index.md

@@ -0,0 +1,60 @@
+---
+title: 抽屉
+category: 组件
+order: 30
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| placement | 自定义位置 | `"top"` | `"bottom"` |`"left"` |`"right"`|`"right"`|
+| overlay | 是否展示遮罩层 | `Boolean` | `true` |
+| closable | 点击遮罩层是否可以关闭抽屉 | `Boolean` | `true` |
+| 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"` |
+
+# 扩展点
+
+| 名称 | 说明 |
+| --- | --- |
+| header | 扩展弹窗头部 |
+| body | 扩展弹窗主体部分 |
+| footer | 扩展弹窗底部 |
+| footer-wrapper | 扩展弹窗整个底部，上述`footer`是它下面一个子扩展点 |
+
+# 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| show | 弹出弹窗 | - | `Promise` |
+| close | 关闭弹窗 | - | `undefined` |
+| showLoading | “确定”按钮变为加载状态 | - | `undefined` |
+| hideLoading | “确定”按钮变为正常状态 | - | `undefined` |
+| disableOk | “确定”按钮变为禁用状态 | - | `undefined` |
+| enableOk | “确定”按钮变为正常状态 | - | `undefined` |
+| ok | 点击“确定”按钮的回调方法，继承`Dialog`时，可以复写该方法实现自定义需求 | - | `undefined` |
+| cancel | 点击“取消”按钮的回调方法，继承`Dialog`时，可以复写该方法实现自定义需求 | - | `undefined` |
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| cancel | 点击取消按钮时触发 | - |
+| ok | 点击确定按钮时触发 | - |
+| open | 弹窗打开后触发 | - |
+| close | 弹窗关闭后触发 | - |