vxe-pc-ui 1.8.13 → 1.9.0

package/es/image/src/preview.js

@@ -1,12 +1,20 @@
-import { defineComponent, h, provide, reactive, computed, watch, onMounted, onUnmounted } from 'vue';
-import { VxeUI, createEvent, getIcon, globalEvents, GLOBAL_EVENT_KEYS } from '@vxe-ui/core';
+import { defineComponent, h, provide, reactive, computed, watch, onMounted, onUnmounted, createCommentVNode } from 'vue';
+import { VxeUI, getConfig, createEvent, getIcon, globalEvents, GLOBAL_EVENT_KEYS } from '@vxe-ui/core';
 import XEUtils from 'xe-utils';
+import { getDomNode } from '../..//ui/src/dom';
 export default defineComponent({
     name: 'VxeImagePreview',
     props: {
         modelValue: Number,
-        url: String,
-        urlList: Array
+        urlList: Array,
+        urlField: {
+            type: String,
+            default: () => getConfig().imagePreview.urlField
+        },
+        marginSize: {
+            type: String,
+            default: () => getConfig().imagePreview.marginSize
+        }
     },
     emits: [
         'update:modelValue',
@@ -17,33 +25,76 @@ export default defineComponent({
         const { emit } = context;
         const xID = XEUtils.uniqueId();
         const reactData = reactive({
-            activeIndex: props.modelValue,
+            activeIndex: props.modelValue || 0,
+            targetHeight: 0,
+            targetWidth: 0,
             offsetPct11: false,
             offsetScale: 0,
             offsetRotate: 0,
             offsetLeft: 0,
             offsetTop: 0
         });
+        const computeUrlProp = computed(() => {
+            return props.urlField || 'url';
+        });
+        const computeMarginSize = computed(() => {
+            return XEUtils.toNumber(props.marginSize || 0) || 16;
+        });
         const computeImgList = computed(() => {
-            const { url, urlList } = props;
-            let list = [];
+            const { urlList } = props;
+            const urlProp = computeUrlProp.value;
             if (urlList && urlList.length) {
-                list = urlList;
-            }
-            else if (url) {
-                list = [url];
+                return urlList.map(item => {
+                    if (XEUtils.isString(item)) {
+                        return item;
+                    }
+                    if (item[urlProp]) {
+                        return item[urlProp];
+                    }
+                    return '';
+                });
             }
-            return list;
+            return [];
         });
         const computeImgTransform = computed(() => {
-            const { offsetScale, offsetRotate } = reactData;
+            let { offsetScale, offsetRotate, offsetLeft, offsetTop } = reactData;
             const stys = [];
-            if (offsetScale) {
-                stys.push(`scale(${1 + offsetScale})`);
+            let targetScale = 1;
+            if (targetScale) {
+                targetScale = 1 + offsetScale;
+                stys.push(`scale(${targetScale})`);
             }
             if (offsetRotate) {
                 stys.push(`rotate(${offsetRotate}deg)`);
             }
+            if (offsetLeft || offsetTop) {
+                // 缩放与位移
+                offsetLeft /= targetScale;
+                offsetTop /= targetScale;
+                let targetOffsetLeft = offsetLeft;
+                let targetOffsetTop = offsetTop;
+                if (offsetRotate) {
+                    // 转向与位移
+                    switch (offsetRotate % 360) {
+                        case 90:
+                        case -270:
+                            targetOffsetLeft = offsetTop;
+                            targetOffsetTop = -offsetLeft;
+                            break;
+                        case 180:
+                        case -180:
+                            targetOffsetLeft = -offsetLeft;
+                            targetOffsetTop = -offsetTop;
+                            break;
+                        case 270:
+                        case -90:
+                            targetOffsetLeft = -offsetTop;
+                            targetOffsetTop = offsetLeft;
+                            break;
+                    }
+                }
+                stys.push(`translate(${targetOffsetLeft}px, ${targetOffsetTop}px)`);
+            }
             return stys.length ? stys.join(' ') : '';
         });
         const computeMaps = {
@@ -70,19 +121,46 @@ export default defineComponent({
         };
         const imagePreviewPrivateMethods = {};
         const resetStyle = () => {
-            reactData.offsetPct11 = false;
-            reactData.offsetScale = 0;
-            reactData.offsetRotate = 0;
-            reactData.offsetTop = 0;
-            reactData.offsetLeft = 0;
+            Object.assign(reactData, {
+                targetHeight: 0,
+                targetWidth: 0,
+                offsetPct11: false,
+                offsetScale: 0,
+                offsetRotate: 0,
+                offsetLeft: 0,
+                offsetTop: 0
+            });
         };
         const handleZoom = (isAdd) => {
             const { offsetScale } = reactData;
+            let stepNum = 0.02;
+            console.log(offsetScale);
+            if (offsetScale >= -0.6) {
+                stepNum = 0.04;
+                if (offsetScale >= -0.4) {
+                    stepNum = 0.07;
+                    if (offsetScale >= 0) {
+                        stepNum = 0.1;
+                        if (offsetScale >= 3) {
+                            stepNum = 0.2;
+                            if (offsetScale >= 8) {
+                                stepNum = 0.3;
+                                if (offsetScale >= 18) {
+                                    stepNum = 0.4;
+                                    if (offsetScale >= 38) {
+                                        stepNum = 0.5;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
             if (isAdd) {
-                reactData.offsetScale = Number(Math.min(10, offsetScale + 0.1).toFixed(2));
+                reactData.offsetScale = Number(Math.min(50, offsetScale + stepNum).toFixed(2));
             }
             else {
-                reactData.offsetScale = Number(Math.max(-0.6, offsetScale - 0.1).toFixed(2));
+                reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2));
             }
         };
         const handleChange = (isNext) => {
@@ -104,6 +182,7 @@ export default defineComponent({
                     activeIndex--;
                 }
             }
+            resetStyle();
             reactData.activeIndex = activeIndex;
             emitModel(activeIndex);
         };
@@ -118,6 +197,7 @@ export default defineComponent({
             reactData.offsetRotate = offsetRotate;
         };
         const handlePct11 = () => {
+            resetStyle();
             reactData.offsetPct11 = true;
         };
         const handlePrintImg = () => {
@@ -161,14 +241,96 @@ export default defineComponent({
                 }
             }
         };
+        const wheelEvent = (evnt) => {
+            const delta = evnt.deltaY;
+            if (delta > 0) {
+                handleZoom(false);
+            }
+            else if (delta < 0) {
+                handleZoom(true);
+            }
+        };
+        const moveEvent = (evnt) => {
+            const { offsetTop, offsetLeft } = reactData;
+            evnt.preventDefault();
+            const domMousemove = document.onmousemove;
+            const domMouseup = document.onmouseup;
+            const startX = evnt.pageX;
+            const startY = evnt.pageY;
+            const marginSize = computeMarginSize.value;
+            document.onmousemove = et => {
+                const { pageX, pageY } = et;
+                const { visibleHeight, visibleWidth } = getDomNode();
+                et.preventDefault();
+                console.log(et.pageX);
+                // 限制边界值
+                if (pageX > marginSize && pageY > marginSize && pageX < (visibleWidth - marginSize) && pageY < (visibleHeight - marginSize)) {
+                    reactData.offsetLeft = offsetLeft + pageX - startX;
+                    reactData.offsetTop = offsetTop + pageY - startY;
+                }
+            };
+            document.onmouseup = () => {
+                document.onmousemove = domMousemove;
+                document.onmouseup = domMouseup;
+            };
+        };
         const handleGlobalKeydownEvent = (evnt) => {
+            const hasCtrlKey = evnt.ctrlKey;
+            const hasShiftKey = evnt.shiftKey;
+            const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+            const isDownArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
             const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
             const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-            if (isLeftArrow) {
-                handleChange(false);
+            const isR = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.R);
+            const isP = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.P);
+            if (isUpArrow) {
+                evnt.preventDefault();
+                if (hasShiftKey) {
+                    reactData.offsetTop -= 1;
+                }
+                else {
+                    handleZoom(true);
+                }
+            }
+            else if (isDownArrow) {
+                evnt.preventDefault();
+                if (hasShiftKey) {
+                    reactData.offsetTop += 1;
+                }
+                else {
+                    handleZoom(false);
+                }
+            }
+            else if (isLeftArrow) {
+                evnt.preventDefault();
+                if (hasShiftKey) {
+                    reactData.offsetLeft -= 1;
+                }
+                else {
+                    handleChange(false);
+                }
             }
             else if (isRightArrow) {
-                handleChange(true);
+                evnt.preventDefault();
+                if (hasShiftKey) {
+                    reactData.offsetLeft += 1;
+                }
+                else {
+                    handleChange(true);
+                }
+            }
+            else if (isR && hasCtrlKey) {
+                evnt.preventDefault();
+                if (hasShiftKey) {
+                    handleRotateImg(false);
+                }
+                else {
+                    handleRotateImg(true);
+                }
+            }
+            else if (isP && hasCtrlKey) {
+                evnt.preventDefault();
+                handlePrintImg();
             }
         };
         Object.assign($xeImagePreview, imagePreviewMethods, imagePreviewPrivateMethods);
@@ -189,7 +351,10 @@ export default defineComponent({
                         ? {
                             transform: imgTransform
                         }
-                        : null
+                        : null,
+                    onMousedown(evnt) {
+                        moveEvent(evnt);
+                    }
                 });
             }));
         };
@@ -226,26 +391,30 @@ export default defineComponent({
                         class: 'vxe-image-preview--close-bg'
                     })
                 ]),
-                h('div', {
-                    class: 'vxe-image-preview--previous-btn',
-                    onClick() {
-                        handleChange(false);
-                    }
-                }, [
-                    h('i', {
-                        class: getIcon().IMAGE_PREVIEW_PREVIOUS
-                    })
-                ]),
-                h('div', {
-                    class: 'vxe-image-preview--next-btn',
-                    onClick() {
-                        handleChange(true);
-                    }
-                }, [
-                    h('i', {
-                        class: getIcon().IMAGE_PREVIEW_NEXT
-                    })
-                ]),
+                imgList.length > 1
+                    ? h('div', {
+                        class: 'vxe-image-preview--previous-btn',
+                        onClick() {
+                            handleChange(false);
+                        }
+                    }, [
+                        h('i', {
+                            class: getIcon().IMAGE_PREVIEW_PREVIOUS
+                        })
+                    ])
+                    : createCommentVNode(),
+                imgList.length > 1
+                    ? h('div', {
+                        class: 'vxe-image-preview--next-btn',
+                        onClick() {
+                            handleChange(true);
+                        }
+                    }, [
+                        h('i', {
+                            class: getIcon().IMAGE_PREVIEW_NEXT
+                        })
+                    ])
+                    : createCommentVNode(),
                 h('div', {
                     class: 'vxe-image-preview--operation-wrapper'
                 }, [
@@ -267,7 +436,8 @@ export default defineComponent({
             return h('div', {
                 class: ['vxe-image-preview', {
                         'is--pct11': offsetPct11
-                    }]
+                    }],
+                onWheel: wheelEvent
             }, [
                 renderImgWrapper(),
                 renderBtnWrapper()

package/es/image/src/util.js

@@ -5,7 +5,7 @@ import XEUtils from 'xe-utils';
 export const openPreviewImage = (options) => {
     if (VxeUI.modal) {
         const opts = Object.assign({}, options);
-        const { url, urlList, activeIndex } = opts;
+        const { urlList, activeIndex } = opts;
         const modalId = XEUtils.uniqueId('image-preview');
         VxeUI.modal.open({
             id: modalId,
@@ -21,7 +21,6 @@ export const openPreviewImage = (options) => {
                     return h(VxeImagePreviewComponent, {
                         modelValue: activeIndex,
                         urlList,
-                        url,
                         onClose() {
                             VxeUI.modal.close(modalId);
                         }

package/es/image-preview/style.css

@@ -21,7 +21,6 @@
 .vxe-image-preview--img-item {
   display: none;
   cursor: grabbing;
-  transition: transform 0.3s ease-in-out;
 }
 .vxe-image-preview--img-item.is--active {
   display: block;
@@ -80,7 +79,7 @@
   justify-content: center;
   top: 50%;
   border-radius: 50%;
-  font-size: 2em;
+  font-size: 1.6em;
   padding: 0.5em;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.8);
@@ -120,12 +119,13 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
   font-size: 1.2em;
-  padding: 0 0.5em;
+  min-width: 2.5em;
 }
 
 .vxe-image-preview--operation-btn {
-  font-size: 2em;
+  font-size: 1.6em;
   padding: 0.5em;
   cursor: pointer;
   transition: all 0.1s ease-in-out;
@@ -144,7 +144,9 @@
           user-select: none;
 }
 .vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box {
+  border: 0;
   background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
 }
 .vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content {
   padding: 0;

package/es/image-preview/style.min.css

@@ -1 +1 @@
-.vxe-image-preview{position:relative;width:100%;height:100%;overflow:hidden}.vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item{max-width:100%;max-height:100%}.vxe-image-preview--img-list{display:flex;width:100%;height:100%;flex-direction:row;align-items:center;justify-content:center}.vxe-image-preview--img-item{display:none;cursor:grabbing;transition:transform .3s ease-in-out}.vxe-image-preview--img-item.is--active{display:block}.vxe-image-preview--close-btn{top:0;right:0;z-index:99;padding:1em;font-size:1.5em;transform:scale(1);border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.vxe-image-preview--close-bg{position:absolute;top:-7em;right:-12em;z-index:99;width:30em;height:10em;background-color:rgba(0,0,0,.8);color:var(--vxe-ui-status-error-color);transform:rotate(45deg);cursor:pointer;z-index:88;transition:all .2s ease-in-out}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn{top:.2em;right:.2em;transform:scale(1.2);color:var(--vxe-ui-status-error-color)}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg{top:-5em}.vxe-image-preview--close-btn,.vxe-image-preview--next-btn,.vxe-image-preview--operation-wrapper,.vxe-image-preview--previous-btn{position:absolute;z-index:99}.vxe-image-preview--next-btn,.vxe-image-preview--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;top:50%;border-radius:50%;font-size:2em;padding:.5em;transform:translateY(-50%);background-color:rgba(0,0,0,.8);cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--next-btn:hover,.vxe-image-preview--previous-btn:hover{color:var(--vxe-ui-font-primary-color);transform:translateY(-50%) scale(1.2)}.vxe-image-preview--next-btn:active,.vxe-image-preview--previous-btn:active{transform:translateY(-50%) scale(1.1)}.vxe-image-preview--previous-btn{left:1vw}.vxe-image-preview--next-btn{right:1vw}.vxe-image-preview--operation-wrapper{display:flex;flex-direction:row;bottom:3vh;left:50%;transform:translateX(-50%);padding:0 1.5em;border-radius:3em;background-color:rgba(0,0,0,.8)}.vxe-image-preview--operation-active-count{display:flex;flex-direction:row;align-items:center;font-size:1.2em;padding:0 .5em}.vxe-image-preview--operation-btn{font-size:2em;padding:.5em;cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--operation-btn:hover{color:var(--vxe-ui-font-primary-color);transform:scale(1.2)}.vxe-image-preview--operation-btn:active{transform:scale(1.1)}.vxe-image-preview-popup-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box{background-color:rgba(0,0,0,.1)}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content{padding:0}
+.vxe-image-preview{position:relative;width:100%;height:100%;overflow:hidden}.vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item{max-width:100%;max-height:100%}.vxe-image-preview--img-list{display:flex;width:100%;height:100%;flex-direction:row;align-items:center;justify-content:center}.vxe-image-preview--img-item{display:none;cursor:grabbing}.vxe-image-preview--img-item.is--active{display:block}.vxe-image-preview--close-btn{top:0;right:0;z-index:99;padding:1em;font-size:1.5em;transform:scale(1);border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.vxe-image-preview--close-bg{position:absolute;top:-7em;right:-12em;z-index:99;width:30em;height:10em;background-color:rgba(0,0,0,.8);color:var(--vxe-ui-status-error-color);transform:rotate(45deg);cursor:pointer;z-index:88;transition:all .2s ease-in-out}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn{top:.2em;right:.2em;transform:scale(1.2);color:var(--vxe-ui-status-error-color)}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg{top:-5em}.vxe-image-preview--close-btn,.vxe-image-preview--next-btn,.vxe-image-preview--operation-wrapper,.vxe-image-preview--previous-btn{position:absolute;z-index:99}.vxe-image-preview--next-btn,.vxe-image-preview--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;top:50%;border-radius:50%;font-size:1.6em;padding:.5em;transform:translateY(-50%);background-color:rgba(0,0,0,.8);cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--next-btn:hover,.vxe-image-preview--previous-btn:hover{color:var(--vxe-ui-font-primary-color);transform:translateY(-50%) scale(1.2)}.vxe-image-preview--next-btn:active,.vxe-image-preview--previous-btn:active{transform:translateY(-50%) scale(1.1)}.vxe-image-preview--previous-btn{left:1vw}.vxe-image-preview--next-btn{right:1vw}.vxe-image-preview--operation-wrapper{display:flex;flex-direction:row;bottom:3vh;left:50%;transform:translateX(-50%);padding:0 1.5em;border-radius:3em;background-color:rgba(0,0,0,.8)}.vxe-image-preview--operation-active-count{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;min-width:2.5em}.vxe-image-preview--operation-btn{font-size:1.6em;padding:.5em;cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--operation-btn:hover{color:var(--vxe-ui-font-primary-color);transform:scale(1.2)}.vxe-image-preview--operation-btn:active{transform:scale(1.1)}.vxe-image-preview-popup-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box{border:0;background-color:rgba(0,0,0,.1);box-shadow:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content{padding:0}

package/es/modal/src/modal.js

@@ -53,6 +53,7 @@ export default defineComponent({
         transfer: { type: Boolean, default: () => getConfig().modal.transfer },
         storage: { type: Boolean, default: () => getConfig().modal.storage },
         storageKey: { type: String, default: () => getConfig().modal.storageKey },
+        padding: { type: Boolean, default: () => getConfig().modal.padding },
         animat: { type: Boolean, default: () => getConfig().modal.animat },
         size: { type: String, default: () => getConfig().modal.size || getConfig().size },
         beforeHideMethod: { type: Function, default: () => getConfig().modal.beforeHideMethod },
@@ -804,7 +805,7 @@ export default defineComponent({
             return footVNs;
         };
         const renderVN = () => {
-            const { className, type, animat, loading, status, lockScroll, lockView, mask, resize } = props;
+            const { className, type, animat, loading, status, lockScroll, padding, lockView, mask, resize } = props;
             const { inited, zoomLocat, modalTop, contentVisible, visible } = reactData;
             const vSize = computeSize.value;
             return h(Teleport, {
@@ -816,6 +817,7 @@ export default defineComponent({
                     class: ['vxe-modal--wrapper', `type--${type}`, className || '', {
                             [`size--${vSize}`]: vSize,
                             [`status--${status}`]: status,
+                            'is--padding': padding,
                             'is--animat': animat,
                             'lock--scroll': lockScroll,
                             'lock--view': lockView,

package/es/modal/style.css

@@ -164,6 +164,9 @@
 .vxe-modal--wrapper.status--loading .vxe-modal--status-wrapper {
   color: var(--vxe-ui-font-disabled-color);
 }
+.vxe-modal--wrapper.is--padding .vxe-modal--content {
+  padding: 0.8em 1em;
+}
 .vxe-modal--wrapper .vxe-modal--status-wrapper {
   flex-shrink: 0;
   display: flex;
@@ -171,7 +174,6 @@
 }
 .vxe-modal--wrapper .vxe-modal--content {
   flex-grow: 1;
-  padding: 0.8em 1em;
   white-space: pre-line;
 }
 .vxe-modal--wrapper .vxe-modal--header,

package/es/modal/style.min.css

@@ -1 +1 @@
-.vxe-modal--wrapper{display:none;position:fixed;top:0;left:0;line-height:1.5;width:calc(100% + 18px);height:calc(100% + 18px);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);transition:top .4s ease-in-out}.vxe-modal--wrapper.is--active{display:block}.vxe-modal--wrapper.is--visible.is--mask:before{background-color:rgba(0,0,0,.5)}.vxe-modal--wrapper.is--visible.type--message .vxe-modal--box{opacity:1;transform:translateY(0)}.vxe-modal--wrapper.is--visible .vxe-modal--box{opacity:1;visibility:visible}.vxe-modal--wrapper.is--loading .vxe-modal--footer,.vxe-modal--wrapper.is--loading .vxe-modal--header{position:relative;border-bottom-color:var(--vxe-ui-loading-background-color)}.vxe-modal--wrapper.is--loading .vxe-modal--footer:before,.vxe-modal--wrapper.is--loading .vxe-modal--header: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-ui-loading-background-color)}.vxe-modal--wrapper:not(.lock--view){pointer-events:none}.vxe-modal--wrapper:not(.type--message).lock--scroll{overflow:hidden}.vxe-modal--wrapper:not(.type--message):not(.lock--scroll){overflow:auto}.vxe-modal--wrapper.is--mask:before,.vxe-modal--wrapper.lock--view:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:auto}.vxe-modal--wrapper.is--mask:before{background-color:rgba(0,0,0,0)}.vxe-modal--wrapper.is--animat.is--mask:before{transition:background-color .2s ease-in-out}.vxe-modal--wrapper.is--animat.type--message .vxe-modal--box:not(.is--drag){transition:all .4s ease-out}.vxe-modal--wrapper.type--alert .vxe-modal--body,.vxe-modal--wrapper.type--confirm .vxe-modal--body,.vxe-modal--wrapper.type--message .vxe-modal--body{white-space:normal;word-break:break-word}.vxe-modal--wrapper.type--message{text-align:center}.vxe-modal--wrapper.type--message .vxe-modal--box{display:inline-block;padding:2px 0;margin-top:0;width:auto;box-shadow:0 0 8px 0 rgba(0,0,0,.1);opacity:0;transform:translateY(-100%)}.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--body:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden}.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--content{max-width:800px;float:left}.vxe-modal--wrapper.type--message .vxe-modal--status-wrapper{font-size:1.4em;padding-left:10px}.vxe-modal--wrapper.type--alert .vxe-modal--box,.vxe-modal--wrapper.type--confirm .vxe-modal--box,.vxe-modal--wrapper.type--modal .vxe-modal--box{display:flex;flex-direction:column;position:fixed;left:50%;top:0;box-shadow:var(--vxe-ui-base-popup-box-shadow)}.vxe-modal--wrapper.type--alert .vxe-modal--body,.vxe-modal--wrapper.type--confirm .vxe-modal--body,.vxe-modal--wrapper.type--modal .vxe-modal--body{overflow:auto}.vxe-modal--wrapper.type--alert .vxe-modal--body .vxe-modal--content,.vxe-modal--wrapper.type--confirm .vxe-modal--body .vxe-modal--content,.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content{overflow:auto}.vxe-modal--wrapper.type--alert .vxe-modal--status-wrapper,.vxe-modal--wrapper.type--confirm .vxe-modal--status-wrapper{font-size:1.6em;padding-left:10px}.vxe-modal--wrapper .vxe-modal--box{visibility:hidden;width:420px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);text-align:left;pointer-events:auto;opacity:0}.vxe-modal--wrapper .vxe-modal--box.is--drag{cursor:move}.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body:after,.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--footer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body{overflow:hidden}.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content{overflow:hidden}.vxe-modal--wrapper.status--info .vxe-modal--status-wrapper{color:var(--vxe-ui-status-info-color)}.vxe-modal--wrapper.status--question .vxe-modal--status-wrapper,.vxe-modal--wrapper.status--warning .vxe-modal--status-wrapper{color:var(--vxe-ui-status-warning-color)}.vxe-modal--wrapper.status--success .vxe-modal--status-wrapper{color:var(--vxe-ui-status-success-color)}.vxe-modal--wrapper.status--error .vxe-modal--status-wrapper{color:var(--vxe-ui-status-danger-color)}.vxe-modal--wrapper.status--loading .vxe-modal--status-wrapper{color:var(--vxe-ui-font-disabled-color)}.vxe-modal--wrapper .vxe-modal--status-wrapper{flex-shrink:0;display:flex;align-items:center}.vxe-modal--wrapper .vxe-modal--content{flex-grow:1;padding:.8em 1em;white-space:pre-line}.vxe-modal--wrapper .vxe-modal--body,.vxe-modal--wrapper .vxe-modal--footer,.vxe-modal--wrapper .vxe-modal--header{position:relative}.vxe-modal--wrapper .vxe-modal--body{display:flex;flex-grow:1}.vxe-modal--wrapper .vxe-modal--header{display:flex;flex-direction:row;flex-shrink:0;font-size:1.1em;font-weight:700;border-bottom:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-modal-header-background-color);border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-modal--wrapper .vxe-modal--header.is--draggable .vxe-modal--header-title{cursor:move}.vxe-modal--wrapper .vxe-modal--header.is--ellipsis .vxe-modal--header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-modal--wrapper .vxe-modal--header-title{flex-grow:1;padding:.6em 0 .6em 1em}.vxe-modal--wrapper .vxe-modal--header-right{flex-shrink:0;padding:.6em 1em .6em 0}.vxe-modal--wrapper .vxe-modal--close-btn,.vxe-modal--wrapper .vxe-modal--zoom-btn{cursor:pointer;margin-left:.6em}.vxe-modal--wrapper .vxe-modal--close-btn:hover,.vxe-modal--wrapper .vxe-modal--zoom-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-modal--wrapper .vxe-modal--footer{flex-shrink:0;text-align:right;padding:.4em 1em .8em 1em}.vxe-modal--wrapper.is--maximize .vxe-modal--box .vxe-modal--header{cursor:default}.vxe-modal--wrapper.is--maximize .vxe-modal--resize .sb-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .selb-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .sest-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .st-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .swst-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .wl-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .wr-resize{display:none}.vxe-modal--wrapper .vxe-modal--resize .sb-resize,.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .st-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize,.vxe-modal--wrapper .vxe-modal--resize .wl-resize,.vxe-modal--wrapper .vxe-modal--resize .wr-resize{position:absolute;z-index:100}.vxe-modal--wrapper .vxe-modal--resize .wl-resize,.vxe-modal--wrapper .vxe-modal--resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.vxe-modal--wrapper .vxe-modal--resize .wl-resize{left:-5px}.vxe-modal--wrapper .vxe-modal--resize .wr-resize{right:-5px}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{width:10px;height:10px;z-index:101}.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{top:-8px}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize{bottom:-8px}.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize{cursor:sw-resize}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{cursor:se-resize}.vxe-modal--wrapper .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{left:-8px}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .sest-resize{right:-8px}.vxe-modal--wrapper .vxe-modal--resize .sb-resize,.vxe-modal--wrapper .vxe-modal--resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.vxe-modal--wrapper .vxe-modal--resize .st-resize{top:-5px}.vxe-modal--wrapper .vxe-modal--resize .sb-resize{bottom:-5px}.vxe-modal--wrapper{font-size:var(--vxe-ui-font-size-default)}.vxe-modal--wrapper.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-modal--wrapper.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-modal--wrapper.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-modal--wrapper{display:none;position:fixed;top:0;left:0;line-height:1.5;width:calc(100% + 18px);height:calc(100% + 18px);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);transition:top .4s ease-in-out}.vxe-modal--wrapper.is--active{display:block}.vxe-modal--wrapper.is--visible.is--mask:before{background-color:rgba(0,0,0,.5)}.vxe-modal--wrapper.is--visible.type--message .vxe-modal--box{opacity:1;transform:translateY(0)}.vxe-modal--wrapper.is--visible .vxe-modal--box{opacity:1;visibility:visible}.vxe-modal--wrapper.is--loading .vxe-modal--footer,.vxe-modal--wrapper.is--loading .vxe-modal--header{position:relative;border-bottom-color:var(--vxe-ui-loading-background-color)}.vxe-modal--wrapper.is--loading .vxe-modal--footer:before,.vxe-modal--wrapper.is--loading .vxe-modal--header: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-ui-loading-background-color)}.vxe-modal--wrapper:not(.lock--view){pointer-events:none}.vxe-modal--wrapper:not(.type--message).lock--scroll{overflow:hidden}.vxe-modal--wrapper:not(.type--message):not(.lock--scroll){overflow:auto}.vxe-modal--wrapper.is--mask:before,.vxe-modal--wrapper.lock--view:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:auto}.vxe-modal--wrapper.is--mask:before{background-color:rgba(0,0,0,0)}.vxe-modal--wrapper.is--animat.is--mask:before{transition:background-color .2s ease-in-out}.vxe-modal--wrapper.is--animat.type--message .vxe-modal--box:not(.is--drag){transition:all .4s ease-out}.vxe-modal--wrapper.type--alert .vxe-modal--body,.vxe-modal--wrapper.type--confirm .vxe-modal--body,.vxe-modal--wrapper.type--message .vxe-modal--body{white-space:normal;word-break:break-word}.vxe-modal--wrapper.type--message{text-align:center}.vxe-modal--wrapper.type--message .vxe-modal--box{display:inline-block;padding:2px 0;margin-top:0;width:auto;box-shadow:0 0 8px 0 rgba(0,0,0,.1);opacity:0;transform:translateY(-100%)}.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--body:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden}.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--content{max-width:800px;float:left}.vxe-modal--wrapper.type--message .vxe-modal--status-wrapper{font-size:1.4em;padding-left:10px}.vxe-modal--wrapper.type--alert .vxe-modal--box,.vxe-modal--wrapper.type--confirm .vxe-modal--box,.vxe-modal--wrapper.type--modal .vxe-modal--box{display:flex;flex-direction:column;position:fixed;left:50%;top:0;box-shadow:var(--vxe-ui-base-popup-box-shadow)}.vxe-modal--wrapper.type--alert .vxe-modal--body,.vxe-modal--wrapper.type--confirm .vxe-modal--body,.vxe-modal--wrapper.type--modal .vxe-modal--body{overflow:auto}.vxe-modal--wrapper.type--alert .vxe-modal--body .vxe-modal--content,.vxe-modal--wrapper.type--confirm .vxe-modal--body .vxe-modal--content,.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content{overflow:auto}.vxe-modal--wrapper.type--alert .vxe-modal--status-wrapper,.vxe-modal--wrapper.type--confirm .vxe-modal--status-wrapper{font-size:1.6em;padding-left:10px}.vxe-modal--wrapper .vxe-modal--box{visibility:hidden;width:420px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);text-align:left;pointer-events:auto;opacity:0}.vxe-modal--wrapper .vxe-modal--box.is--drag{cursor:move}.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body:after,.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--footer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body{overflow:hidden}.vxe-modal--wrapper .vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content{overflow:hidden}.vxe-modal--wrapper.status--info .vxe-modal--status-wrapper{color:var(--vxe-ui-status-info-color)}.vxe-modal--wrapper.status--question .vxe-modal--status-wrapper,.vxe-modal--wrapper.status--warning .vxe-modal--status-wrapper{color:var(--vxe-ui-status-warning-color)}.vxe-modal--wrapper.status--success .vxe-modal--status-wrapper{color:var(--vxe-ui-status-success-color)}.vxe-modal--wrapper.status--error .vxe-modal--status-wrapper{color:var(--vxe-ui-status-danger-color)}.vxe-modal--wrapper.status--loading .vxe-modal--status-wrapper{color:var(--vxe-ui-font-disabled-color)}.vxe-modal--wrapper.is--padding .vxe-modal--content{padding:.8em 1em}.vxe-modal--wrapper .vxe-modal--status-wrapper{flex-shrink:0;display:flex;align-items:center}.vxe-modal--wrapper .vxe-modal--content{flex-grow:1;white-space:pre-line}.vxe-modal--wrapper .vxe-modal--body,.vxe-modal--wrapper .vxe-modal--footer,.vxe-modal--wrapper .vxe-modal--header{position:relative}.vxe-modal--wrapper .vxe-modal--body{display:flex;flex-grow:1}.vxe-modal--wrapper .vxe-modal--header{display:flex;flex-direction:row;flex-shrink:0;font-size:1.1em;font-weight:700;border-bottom:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-modal-header-background-color);border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-modal--wrapper .vxe-modal--header.is--draggable .vxe-modal--header-title{cursor:move}.vxe-modal--wrapper .vxe-modal--header.is--ellipsis .vxe-modal--header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-modal--wrapper .vxe-modal--header-title{flex-grow:1;padding:.6em 0 .6em 1em}.vxe-modal--wrapper .vxe-modal--header-right{flex-shrink:0;padding:.6em 1em .6em 0}.vxe-modal--wrapper .vxe-modal--close-btn,.vxe-modal--wrapper .vxe-modal--zoom-btn{cursor:pointer;margin-left:.6em}.vxe-modal--wrapper .vxe-modal--close-btn:hover,.vxe-modal--wrapper .vxe-modal--zoom-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-modal--wrapper .vxe-modal--footer{flex-shrink:0;text-align:right;padding:.4em 1em .8em 1em}.vxe-modal--wrapper.is--maximize .vxe-modal--box .vxe-modal--header{cursor:default}.vxe-modal--wrapper.is--maximize .vxe-modal--resize .sb-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .selb-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .sest-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .st-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .swst-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .wl-resize,.vxe-modal--wrapper.is--maximize .vxe-modal--resize .wr-resize{display:none}.vxe-modal--wrapper .vxe-modal--resize .sb-resize,.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .st-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize,.vxe-modal--wrapper .vxe-modal--resize .wl-resize,.vxe-modal--wrapper .vxe-modal--resize .wr-resize{position:absolute;z-index:100}.vxe-modal--wrapper .vxe-modal--resize .wl-resize,.vxe-modal--wrapper .vxe-modal--resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.vxe-modal--wrapper .vxe-modal--resize .wl-resize{left:-5px}.vxe-modal--wrapper .vxe-modal--resize .wr-resize{right:-5px}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{width:10px;height:10px;z-index:101}.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{top:-8px}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize{bottom:-8px}.vxe-modal--wrapper .vxe-modal--resize .sest-resize,.vxe-modal--wrapper .vxe-modal--resize .swlb-resize{cursor:sw-resize}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{cursor:se-resize}.vxe-modal--wrapper .vxe-modal--resize .swlb-resize,.vxe-modal--wrapper .vxe-modal--resize .swst-resize{left:-8px}.vxe-modal--wrapper .vxe-modal--resize .selb-resize,.vxe-modal--wrapper .vxe-modal--resize .sest-resize{right:-8px}.vxe-modal--wrapper .vxe-modal--resize .sb-resize,.vxe-modal--wrapper .vxe-modal--resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.vxe-modal--wrapper .vxe-modal--resize .st-resize{top:-5px}.vxe-modal--wrapper .vxe-modal--resize .sb-resize{bottom:-5px}.vxe-modal--wrapper{font-size:var(--vxe-ui-font-size-default)}.vxe-modal--wrapper.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-modal--wrapper.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-modal--wrapper.size--mini{font-size:var(--vxe-ui-font-size-mini)}