vxe-table 4.6.14 → 4.6.15-beta.1

package/es/all.js

@@ -24,6 +24,7 @@ import { VxeTextarea } from './textarea';
 import { VxeButton } from './button';
 import { VxeButtonGroup } from './button-group';
 import { VxeModal } from './modal';
+import { VxeDrawer } from './drawer';
 import { VxeTooltip } from './tooltip';
 import { VxeForm } from './form';
 import { VxeFormItem } from './form-item';
@@ -63,6 +64,7 @@ const components = [
     VxeButton,
     VxeButtonGroup,
     VxeModal,
+    VxeDrawer,
     VxeTooltip,
     VxeForm,
     VxeFormItem,
@@ -117,6 +119,7 @@ export * from './textarea';
 export * from './button';
 export * from './button-group';
 export * from './modal';
+export * from './drawer';
 export * from './tooltip';
 export * from './form';
 export * from './form-item';

package/es/drawer/index.d.ts

@@ -0,0 +1,4 @@
+import { VxeDrawer } from '../../types/drawer'
+
+export * from '../../types/drawer'
+export default VxeDrawer

package/es/drawer/index.js

@@ -0,0 +1,62 @@
+import XEUtils from 'xe-utils';
+import VxeDrawerComponent, { allActiveDrawers } from './src/modal';
+import { VXETable } from '../v-x-e-table';
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics';
+function openDrawer(options) {
+    // 使用动态组件渲染动态弹框
+    checkDynamic();
+    return new Promise(resolve => {
+        if (options && options.id && allActiveDrawers.some(comp => comp.props.id === options.id)) {
+            resolve('exist');
+        }
+        else {
+            const _onHide = options.onHide;
+            const drawerOpts = Object.assign(options, {
+                key: XEUtils.uniqueId(),
+                modelValue: true,
+                onHide(params) {
+                    const drawerList = dynamicStore.drawers;
+                    if (_onHide) {
+                        _onHide(params);
+                    }
+                    dynamicStore.drawers = drawerList.filter(item => item.key !== drawerOpts.key);
+                    resolve(params.type);
+                }
+            });
+            dynamicStore.drawers.push(drawerOpts);
+        }
+    });
+}
+function getDrawer(id) {
+    return XEUtils.find(allActiveDrawers, $drawer => $drawer.props.id === id);
+}
+/**
+ * 全局关闭动态的活动窗口（只能用于关闭动态的创建的活动窗口）
+ * 如果传 id 则关闭指定的窗口
+ * 如果不传则关闭所有窗口
+ */
+function closeDrawer(id) {
+    const drawers = id ? [getDrawer(id)] : allActiveDrawers;
+    const restPromises = [];
+    drawers.forEach($drawer => {
+        if ($drawer) {
+            restPromises.push($drawer.close());
+        }
+    });
+    return Promise.all(restPromises);
+}
+const DrawerController = {
+    get: getDrawer,
+    close: closeDrawer,
+    open: openDrawer
+};
+export const drawer = DrawerController;
+export const VxeDrawer = Object.assign(VxeDrawerComponent, {
+    install: function (app) {
+        app.component(VxeDrawerComponent.name, VxeDrawerComponent);
+        VXETable.drawer = DrawerController;
+    }
+});
+dynamicApp.component(VxeDrawerComponent.name, VxeDrawerComponent);
+export const Drawer = VxeDrawer;
+export default VxeDrawer;

package/es/drawer/src/modal.js

@@ -0,0 +1,377 @@
+import { defineComponent, h, Teleport, ref, reactive, nextTick, watch, onMounted, onUnmounted } from 'vue';
+import XEUtils from 'xe-utils';
+import { useSize } from '../../hooks/size';
+import { getLastZIndex, nextZIndex, getFuncText } from '../../tools/utils';
+import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event';
+import GlobalConfig from '../../v-x-e-table/src/conf';
+import VxeButtonComponent from '../../button/src/button';
+import VxeLoadingComponent from '../../loading/index';
+import { getSlotVNs } from '../../tools/vn';
+export const allActiveDrawers = [];
+export default defineComponent({
+    name: 'VxeDrawer',
+    props: {
+        modelValue: Boolean,
+        id: String,
+        title: String,
+        loading: { type: Boolean, default: null },
+        className: String,
+        position: [String, Object],
+        lockView: { type: Boolean, default: () => GlobalConfig.drawer.lockView },
+        lockScroll: Boolean,
+        mask: { type: Boolean, default: () => GlobalConfig.drawer.mask },
+        maskClosable: { type: Boolean, default: () => GlobalConfig.drawer.maskClosable },
+        escClosable: { type: Boolean, default: () => GlobalConfig.drawer.escClosable },
+        showHeader: { type: Boolean, default: () => GlobalConfig.drawer.showHeader },
+        showFooter: { type: Boolean, default: () => GlobalConfig.drawer.showFooter },
+        showClose: { type: Boolean, default: () => GlobalConfig.drawer.showClose },
+        content: [Number, String],
+        showCancelButton: { type: Boolean, default: null },
+        cancelButtonText: { type: String, default: () => GlobalConfig.drawer.cancelButtonText },
+        showConfirmButton: { type: Boolean, default: () => GlobalConfig.drawer.showConfirmButton },
+        confirmButtonText: { type: String, default: () => GlobalConfig.drawer.confirmButtonText },
+        destroyOnClose: { type: Boolean, default: () => GlobalConfig.drawer.destroyOnClose },
+        showTitleOverflow: { type: Boolean, default: () => GlobalConfig.drawer.showTitleOverflow },
+        width: [Number, String],
+        height: [Number, String],
+        zIndex: Number,
+        transfer: { type: Boolean, default: () => GlobalConfig.drawer.transfer },
+        size: { type: String, default: () => GlobalConfig.drawer.size || GlobalConfig.size },
+        beforeHideMethod: { type: Function, default: () => GlobalConfig.drawer.beforeHideMethod },
+        slots: Number
+    },
+    emits: [
+        'update:modelValue',
+        'show',
+        'hide',
+        'before-hide',
+        'close',
+        'confirm',
+        'cancel'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const refElem = ref();
+        const refDrawerBox = ref();
+        const refConfirmBtn = ref();
+        const refCancelBtn = ref();
+        const reactData = reactive({
+            inited: false,
+            visible: false,
+            contentVisible: false,
+            drawerZIndex: 0,
+            firstOpen: true
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeDrawer = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const getBox = () => {
+            const boxElem = refDrawerBox.value;
+            return boxElem;
+        };
+        const recalculate = () => {
+            const { width, height } = props;
+            const boxElem = getBox();
+            boxElem.style.width = `${width ? (isNaN(width) ? width : `${width}px`) : ''}`;
+            boxElem.style.height = `${height ? (isNaN(height) ? height : `${height}px`) : ''}`;
+            return nextTick();
+        };
+        const updateZindex = () => {
+            const { zIndex } = props;
+            const { drawerZIndex } = reactData;
+            if (zIndex) {
+                reactData.drawerZIndex = zIndex;
+            }
+            else if (drawerZIndex < getLastZIndex()) {
+                reactData.drawerZIndex = nextZIndex();
+            }
+        };
+        const updatePosition = () => {
+            return nextTick().then(() => {
+            });
+        };
+        const closeDrawer = (type) => {
+            const { beforeHideMethod } = props;
+            const { visible } = reactData;
+            const params = { type };
+            if (visible) {
+                Promise.resolve(beforeHideMethod ? beforeHideMethod(params) : null).then((rest) => {
+                    if (!XEUtils.isError(rest)) {
+                        reactData.contentVisible = false;
+                        XEUtils.remove(allActiveDrawers, item => item === $xeDrawer);
+                        drawerMethods.dispatchEvent('before-hide', params);
+                        setTimeout(() => {
+                            reactData.visible = false;
+                            emit('update:modelValue', false);
+                            drawerMethods.dispatchEvent('hide', params);
+                        }, 200);
+                    }
+                }).catch(e => e);
+            }
+            return nextTick();
+        };
+        const closeEvent = (evnt) => {
+            const type = 'close';
+            drawerMethods.dispatchEvent(type, { type }, evnt);
+            closeDrawer(type);
+        };
+        const confirmEvent = (evnt) => {
+            const type = 'confirm';
+            drawerMethods.dispatchEvent(type, { type }, evnt);
+            closeDrawer(type);
+        };
+        const cancelEvent = (evnt) => {
+            const type = 'cancel';
+            drawerMethods.dispatchEvent(type, { type }, evnt);
+            closeDrawer(type);
+        };
+        const openDrawer = () => {
+            const { showFooter } = props;
+            const { inited, visible } = reactData;
+            if (!inited) {
+                reactData.inited = true;
+            }
+            if (!visible) {
+                recalculate();
+                reactData.visible = true;
+                reactData.contentVisible = false;
+                updateZindex();
+                allActiveDrawers.push($xeDrawer);
+                setTimeout(() => {
+                    reactData.contentVisible = true;
+                    nextTick(() => {
+                        if (showFooter) {
+                            const confirmBtn = refConfirmBtn.value;
+                            const cancelBtn = refCancelBtn.value;
+                            const operBtn = confirmBtn || cancelBtn;
+                            if (operBtn) {
+                                operBtn.focus();
+                            }
+                        }
+                        const type = '';
+                        const params = { type };
+                        emit('update:modelValue', true);
+                        drawerMethods.dispatchEvent('show', params);
+                    });
+                }, 10);
+                nextTick(() => {
+                    const { firstOpen } = reactData;
+                    if (firstOpen) {
+                        updatePosition().then(() => {
+                            setTimeout(() => updatePosition(), 20);
+                        });
+                    }
+                    if (firstOpen) {
+                        reactData.firstOpen = false;
+                    }
+                });
+            }
+            return nextTick();
+        };
+        const drawerMethods = {
+            dispatchEvent(type, params, evnt) {
+                emit(type, Object.assign({ $drawer: $xeDrawer, $event: evnt }, params));
+            },
+            open: openDrawer,
+            close() {
+                return closeDrawer('close');
+            },
+            getBox
+        };
+        const selfClickEvent = (evnt) => {
+            const el = refElem.value;
+            if (props.maskClosable && evnt.target === el) {
+                const type = 'mask';
+                closeDrawer(type);
+            }
+        };
+        const handleGlobalKeydownEvent = (evnt) => {
+            const isEsc = hasEventKey(evnt, EVENT_KEYS.ESCAPE);
+            if (isEsc) {
+                const lastDrawer = XEUtils.max(allActiveDrawers, (item) => item.reactData.drawerZIndex);
+                // 多个时，只关掉最上层的窗口
+                if (lastDrawer) {
+                    setTimeout(() => {
+                        if (lastDrawer === $xeDrawer && lastDrawer.props.escClosable) {
+                            closeDrawer('exit');
+                        }
+                    }, 10);
+                }
+            }
+        };
+        const boxMousedownEvent = () => {
+            const { drawerZIndex } = reactData;
+            if (allActiveDrawers.some(comp => comp.reactData.visible && comp.reactData.drawerZIndex > drawerZIndex)) {
+                updateZindex();
+            }
+        };
+        const formDesignPrivateMethods = {};
+        Object.assign($xeDrawer, drawerMethods, formDesignPrivateMethods);
+        const renderTitles = () => {
+            const { slots: propSlots = {}, showClose, title } = props;
+            const titleSlot = slots.title || propSlots.title;
+            const cornerSlot = slots.corner || propSlots.corner;
+            const titVNs = [
+                h('div', {
+                    class: 'vxe-drawer--header-title'
+                }, titleSlot ? getSlotVNs(titleSlot({ $drawer: $xeDrawer })) : (title ? getFuncText(title) : GlobalConfig.i18n('vxe.alert.title')))
+            ];
+            const rightVNs = [];
+            if (cornerSlot) {
+                rightVNs.push(h('span', {
+                    class: 'vxe-drawer--corner-wrapper'
+                }, getSlotVNs(cornerSlot({ $drawer: $xeDrawer }))));
+            }
+            if (showClose) {
+                rightVNs.push(h('i', {
+                    class: ['vxe-drawer--close-btn', 'trigger--btn', GlobalConfig.icon.MODAL_CLOSE],
+                    title: GlobalConfig.i18n('vxe.drawer.close'),
+                    onClick: closeEvent
+                }));
+            }
+            titVNs.push(h('div', {
+                class: 'vxe-drawer--header-right'
+            }, rightVNs));
+            return titVNs;
+        };
+        const renderHeader = () => {
+            const { slots: propSlots = {}, showTitleOverflow } = props;
+            const headerSlot = slots.header || propSlots.header;
+            const headVNs = [];
+            if (props.showHeader) {
+                headVNs.push(h('div', {
+                    class: ['vxe-drawer--header', {
+                            'is--ellipsis': showTitleOverflow
+                        }]
+                }, headerSlot
+                    ? (!reactData.inited || (props.destroyOnClose && !reactData.visible) ? [] : getSlotVNs(headerSlot({ $drawer: $xeDrawer })))
+                    : renderTitles()));
+            }
+            return headVNs;
+        };
+        const renderBody = () => {
+            const { slots: propSlots = {}, content } = props;
+            const defaultSlot = slots.default || propSlots.default;
+            return [
+                h('div', {
+                    class: 'vxe-drawer--body'
+                }, [
+                    h('div', {
+                        class: 'vxe-drawer--content'
+                    }, defaultSlot ? (!reactData.inited || (props.destroyOnClose && !reactData.visible) ? [] : getSlotVNs(defaultSlot({ $drawer: $xeDrawer }))) : getFuncText(content)),
+                    h(VxeLoadingComponent, {
+                        class: 'vxe-drawer--loading',
+                        modelValue: props.loading
+                    })
+                ])
+            ];
+        };
+        const renderBtns = () => {
+            const { showCancelButton, showConfirmButton } = props;
+            const btnVNs = [];
+            if (showCancelButton) {
+                btnVNs.push(h(VxeButtonComponent, {
+                    key: 1,
+                    ref: refCancelBtn,
+                    content: props.cancelButtonText || GlobalConfig.i18n('vxe.button.cancel'),
+                    onClick: cancelEvent
+                }));
+            }
+            if (showConfirmButton) {
+                btnVNs.push(h(VxeButtonComponent, {
+                    key: 2,
+                    ref: refConfirmBtn,
+                    status: 'primary',
+                    content: props.confirmButtonText || GlobalConfig.i18n('vxe.button.confirm'),
+                    onClick: confirmEvent
+                }));
+            }
+            return btnVNs;
+        };
+        const renderFooter = () => {
+            const { slots: propSlots = {} } = props;
+            const footerSlot = slots.footer || propSlots.footer;
+            const footVNs = [];
+            if (props.showFooter) {
+                footVNs.push(h('div', {
+                    class: 'vxe-drawer--footer'
+                }, footerSlot
+                    ? (!reactData.inited || (props.destroyOnClose && !reactData.visible) ? [] : getSlotVNs(footerSlot({ $drawer: $xeDrawer })))
+                    : renderBtns()));
+            }
+            return footVNs;
+        };
+        const renderVN = () => {
+            const { className, position, loading, lockScroll, lockView, mask } = props;
+            const { inited, contentVisible, visible } = reactData;
+            const vSize = computeSize.value;
+            return h(Teleport, {
+                to: 'body',
+                disabled: props.transfer ? !inited : true
+            }, [
+                h('div', {
+                    ref: refElem,
+                    class: ['vxe-drawer--wrapper', `pos--${position}`, className || '', {
+                            [`size--${vSize}`]: vSize,
+                            'lock--scroll': lockScroll,
+                            'lock--view': lockView,
+                            'is--mask': mask,
+                            'is--visible': contentVisible,
+                            'is--active': visible,
+                            'is--loading': loading
+                        }],
+                    style: {
+                        zIndex: reactData.drawerZIndex
+                    },
+                    onClick: selfClickEvent
+                }, [
+                    h('div', {
+                        ref: refDrawerBox,
+                        class: 'vxe-drawer--box',
+                        onMousedown: boxMousedownEvent
+                    }, renderHeader().concat(renderBody(), renderFooter()))
+                ])
+            ]);
+        };
+        $xeDrawer.renderVN = renderVN;
+        watch(() => props.width, recalculate);
+        watch(() => props.height, recalculate);
+        watch(() => props.modelValue, (value) => {
+            if (value) {
+                openDrawer();
+            }
+            else {
+                closeDrawer('model');
+            }
+        });
+        onMounted(() => {
+            nextTick(() => {
+                if (props.modelValue) {
+                    openDrawer();
+                }
+                recalculate();
+            });
+            if (props.escClosable) {
+                GlobalEvent.on($xeDrawer, 'keydown', handleGlobalKeydownEvent);
+            }
+        });
+        onUnmounted(() => {
+            GlobalEvent.off($xeDrawer, 'keydown');
+        });
+        return $xeDrawer;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/drawer/style.css

@@ -0,0 +1,203 @@
+/*font*/
+/*size*/
+/*icon*/
+/*color*/
+/*input/radio/checkbox*/
+/*popup*/
+/*table*/
+/*filter*/
+/*menu*/
+/*loading*/
+/*validate*/
+/*grid*/
+/*toolbar*/
+/*tooltip*/
+/*pager*/
+/*modal*/
+/*checkbox*/
+/*radio*/
+/*button*/
+/*input*/
+/*textarea*/
+/*form*/
+/*select*/
+/*switch*/
+/*pulldown*/
+.vxe-drawer--wrapper {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  line-height: 1.5;
+  width: calc(100% + 18px);
+  height: calc(100% + 18px);
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+}
+.vxe-drawer--wrapper.is--active {
+  display: block;
+}
+.vxe-drawer--wrapper.is--visible.is--mask:before {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.vxe-drawer--wrapper.is--visible.pos--left .vxe-drawer--box {
+  left: 0;
+}
+.vxe-drawer--wrapper.is--visible.pos--right .vxe-drawer--box {
+  right: 0;
+}
+.vxe-drawer--wrapper.is--visible.pos--top .vxe-drawer--box {
+  top: 0;
+}
+.vxe-drawer--wrapper.is--visible.pos--bottom .vxe-drawer--box {
+  bottom: 0;
+}
+.vxe-drawer--wrapper.is--visible .vxe-drawer--box {
+  opacity: 1;
+}
+.vxe-drawer--wrapper.is--loading .vxe-drawer--header,
+.vxe-drawer--wrapper.is--loading .vxe-drawer--footer {
+  position: relative;
+  border-bottom-color: var(--vxe-loading-background-color);
+}
+.vxe-drawer--wrapper.is--loading .vxe-drawer--header:before,
+.vxe-drawer--wrapper.is--loading .vxe-drawer--footer:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background-color: var(--vxe-loading-background-color);
+}
+.vxe-drawer--wrapper:not(.lock--view) {
+  pointer-events: none;
+}
+.vxe-drawer--wrapper.lock--scroll {
+  overflow: hidden;
+}
+.vxe-drawer--wrapper:not(.lock--scroll) {
+  overflow: auto;
+}
+.vxe-drawer--wrapper.lock--view:before, .vxe-drawer--wrapper.is--mask:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: auto;
+}
+.vxe-drawer--wrapper.is--mask:before {
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.2s ease-in-out;
+}
+.vxe-drawer--wrapper.pos--left .vxe-drawer--box {
+  top: 0;
+  left: -100%;
+  box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.2);
+}
+.vxe-drawer--wrapper.pos--right .vxe-drawer--box {
+  top: 0;
+  right: -100%;
+  box-shadow: -2px 0 10px 0 rgba(0, 0, 0, 0.2);
+}
+.vxe-drawer--wrapper.pos--top .vxe-drawer--box {
+  top: -100%;
+  left: 0;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+}
+.vxe-drawer--wrapper.pos--bottom .vxe-drawer--box {
+  bottom: -100%;
+  left: 0;
+  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.2);
+}
+.vxe-drawer--wrapper.pos--left .vxe-drawer--box, .vxe-drawer--wrapper.pos--right .vxe-drawer--box {
+  width: 30%;
+  height: 100%;
+}
+.vxe-drawer--wrapper.pos--top .vxe-drawer--box, .vxe-drawer--wrapper.pos--bottom .vxe-drawer--box {
+  width: 100%;
+  height: 30%;
+}
+.vxe-drawer--wrapper .vxe-drawer--box {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  background-color: var(--vxe-drawer-body-background-color);
+  border: 1px solid var(--vxe-drawer-border-color);
+  text-align: left;
+  pointer-events: auto;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+.vxe-drawer--wrapper .vxe-drawer--content {
+  flex-grow: 1;
+  padding: 0.8em 1em;
+  white-space: pre-line;
+}
+.vxe-drawer--wrapper .vxe-drawer--header,
+.vxe-drawer--wrapper .vxe-drawer--body,
+.vxe-drawer--wrapper .vxe-drawer--footer {
+  position: relative;
+}
+.vxe-drawer--wrapper .vxe-drawer--body {
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+}
+.vxe-drawer--wrapper .vxe-drawer--body .vxe-drawer--content {
+  overflow: auto;
+}
+.vxe-drawer--wrapper .vxe-drawer--header {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  font-size: 1.1em;
+  font-weight: 700;
+  border-bottom: 1px solid var(--vxe-drawer-border-color);
+  background-color: var(--vxe-drawer-header-background-color);
+}
+.vxe-drawer--wrapper .vxe-drawer--header.is--ellipsis .vxe-drawer--header-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-drawer--wrapper .vxe-drawer--header-title {
+  flex-grow: 1;
+  padding: 0.6em 0 0.6em 1em;
+}
+.vxe-drawer--wrapper .vxe-drawer--header-right {
+  flex-shrink: 0;
+  padding: 0.6em 1em 0.6em 0;
+}
+.vxe-drawer--wrapper .vxe-drawer--close-btn {
+  cursor: pointer;
+  margin-left: 0.6em;
+}
+.vxe-drawer--wrapper .vxe-drawer--close-btn:hover {
+  color: var(--vxe-primary-color);
+}
+.vxe-drawer--wrapper .vxe-drawer--footer {
+  flex-shrink: 0;
+  text-align: right;
+  padding: 0.4em 1em 0.8em 1em;
+}
+
+.vxe-drawer--wrapper {
+  font-size: var(--vxe-font-size);
+}
+.vxe-drawer--wrapper.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-drawer--wrapper.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-drawer--wrapper.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}