vxe-pc-ui 3.17.28 → 3.17.30

package/es/modal/src/modal.js

@@ -3,12 +3,33 @@ import XEUtils from 'xe-utils';
 import { VxeUI, getConfig, getI18n, getIcon, createEvent, globalEvents, globalMixins, renderEmptyElement, GLOBAL_EVENT_KEYS } from '../../ui';
 import { getEventTargetNode, getPopupAppendElement, getPopupWrapperElement, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue } from '../../ui/src/utils';
-import VxeButtonComponent from '../../button';
-import VxeLoadingComponent from '../../loading';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
+import { allActiveModals } from './store';
+import VxeButtonComponent from '../../button';
+import VxeLoadingComponent from '../../loading';
 const { warnLog, errLog } = createComponentLog('modal');
-export const allActiveModals = [];
+function createInternalData() {
+    return {
+        // msgTimeout: undefined,
+        isMoveStatus: false
+    };
+}
+function createReactData() {
+    return {
+        initialized: false,
+        visible: false,
+        contentVisible: false,
+        modalTop: 0,
+        modalZindex: 0,
+        prevZoomStatus: '',
+        zoomStatus: '',
+        revertLocat: null,
+        prevLocat: null,
+        firstOpen: true,
+        resizeFlag: 1
+    };
+}
 const msgQueue = [];
 const notifyQueue = [];
 const lockScrollAttrKey = 'data-vxe-lock-scroll';
@@ -230,27 +251,9 @@ export default {
     },
     data() {
         const xID = XEUtils.uniqueId();
-        const reactData = {
-            initialized: false,
-            visible: false,
-            contentVisible: false,
-            modalTop: 0,
-            modalZindex: 0,
-            prevZoomStatus: '',
-            zoomStatus: '',
-            revertLocat: null,
-            prevLocat: null,
-            firstOpen: true,
-            resizeFlag: 1
-        };
-        const internalData = {
-            msgTimeout: undefined
-        };
-        return {
-            xID,
-            reactData,
-            internalData
-        };
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID,
+            reactData });
     },
     computed: Object.assign(Object.assign({}, {}), { computeBtnTransfer() {
             const $xeSelect = this;
@@ -551,6 +554,10 @@ export default {
             if (visible) {
                 Promise.resolve(beforeHideFn ? beforeHideFn(params) : null).then((rest) => {
                     if (!XEUtils.isError(rest)) {
+                        const el = $xeModal.$refs.refElem;
+                        if (el) {
+                            el.setAttribute('data-effect', 'y');
+                        }
                         if (isMsg) {
                             $xeModal.removeMsgQueue();
                         }
@@ -566,6 +573,12 @@ export default {
                             $xeModal.dispatchEvent('hide', params, null);
                         }, 200);
                         $xeModal.removeBodyLockScroll();
+                        setTimeout(() => {
+                            const el = $xeModal.$refs.refElem;
+                            if (el) {
+                                el.removeAttribute('data-effect');
+                            }
+                        }, 350);
                     }
                 }).catch(e => e);
             }
@@ -885,6 +898,7 @@ export default {
             const $xeModal = this;
             const props = $xeModal;
             const reactData = $xeModal.reactData;
+            const internalData = $xeModal.internalData;
             const { remember, showFooter, appendTo } = props;
             const { initialized, visible } = reactData;
             const isMsg = $xeModal.computeIsMsg;
@@ -898,6 +912,7 @@ export default {
             }
             if (!visible) {
                 $xeModal.addBodyLockScroll();
+                internalData.isMoveStatus = false;
                 reactData.visible = true;
                 reactData.contentVisible = false;
                 $xeModal.updateZindex();
@@ -929,6 +944,10 @@ export default {
                 else {
                     $xeModal.$nextTick(() => {
                         const { firstOpen } = reactData;
+                        const el = $xeModal.$refs.refElem;
+                        if (el) {
+                            el.setAttribute('data-effect', 'y');
+                        }
                         if (firstOpen) {
                             reactData.firstOpen = false;
                             if ($xeModal.hasPosStorage()) {
@@ -955,6 +974,12 @@ export default {
                             }
                         }
                     });
+                    setTimeout(() => {
+                        const el = $xeModal.$refs.refElem;
+                        if (el) {
+                            el.removeAttribute('data-effect');
+                        }
+                    }, 350);
                 }
             }
             return $xeModal.$nextTick();
@@ -1009,6 +1034,13 @@ export default {
                 }
             }
         },
+        handleGlobalResizeEvent() {
+            const $xeModal = this;
+            const internalData = $xeModal.internalData;
+            if (!internalData.isMoveStatus) {
+                $xeModal.updatePosition();
+            }
+        },
         handleRevert() {
             const $xeModal = this;
             const reactData = $xeModal.reactData;
@@ -1089,7 +1121,8 @@ export default {
             const $xeModal = this;
             const props = $xeModal;
             const reactData = $xeModal.reactData;
-            const { resize, storage, isWithinAppendTo } = props;
+            const internalData = $xeModal.internalData;
+            const { storage, isWithinAppendTo } = props;
             const { zoomStatus } = reactData;
             const marginSize = XEUtils.toNumber(props.marginSize);
             const boxElem = $xeModal.getBox();
@@ -1103,8 +1136,8 @@ export default {
                 if (!parentWrapperEl) {
                     return;
                 }
-                const visibleWidth = parentWrapperEl.clientWidth - (resize && isWithinAppendTo ? 8 : 0);
-                const visibleHeight = parentWrapperEl.clientHeight - (resize && isWithinAppendTo ? 8 : 0);
+                const visibleWidth = parentWrapperEl.clientWidth;
+                const visibleHeight = parentWrapperEl.clientHeight;
                 const disX = evnt.clientX - boxElem.offsetLeft;
                 const disY = evnt.clientY - boxElem.offsetTop;
                 document.onmousemove = evnt => {
@@ -1133,6 +1166,7 @@ export default {
                     boxElem.style.top = `${top}px`;
                     boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag';
                     $xeModal.$emit('move', createEvent(evnt, { type: 'move' }));
+                    internalData.isMoveStatus = true;
                     reactData.resizeFlag++;
                 };
                 document.onmouseup = () => {
@@ -1155,14 +1189,14 @@ export default {
             const props = $xeModal;
             const reactData = $xeModal.reactData;
             evnt.preventDefault();
-            const { resize, storage, isWithinAppendTo } = props;
+            const { storage, isWithinAppendTo } = props;
             const el = $xeModal.$refs.refElem;
             const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
             if (!parentWrapperEl) {
                 return;
             }
-            const visibleWidth = parentWrapperEl.clientWidth - (resize && isWithinAppendTo ? 8 : 0);
-            const visibleHeight = parentWrapperEl.clientHeight - (resize && isWithinAppendTo ? 8 : 0);
+            const visibleWidth = parentWrapperEl.clientWidth;
+            const visibleHeight = parentWrapperEl.clientHeight;
             const marginSize = XEUtils.toNumber(props.marginSize);
             const targetElem = evnt.target;
             const type = targetElem.getAttribute('data-type');
@@ -1545,7 +1579,7 @@ export default {
             }
             return h('div', {
                 ref: 'refElem',
-                class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, className || '', position ? `pos--${position}` : '', isWithinAppendTo ? 'ctx--within' : 'ctx--free', {
+                class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, position ? `pos--${position}` : '', isWithinAppendTo ? 'ctx--within' : 'ctx--free', className || '', {
                         [`size--${vSize}`]: vSize,
                         [`status--${status}`]: status,
                         'is--padding': padding,
@@ -1621,6 +1655,10 @@ export default {
                 : []);
         }
     },
+    created() {
+        const $xeModal = this;
+        $xeModal.internalData = createInternalData();
+    },
     mounted() {
         const $xeModal = this;
         const slots = $xeModal.$scopedSlots;
@@ -1632,7 +1670,7 @@ export default {
         reactData.initialized = !!props.preload;
         $xeModal.$nextTick(() => {
             if (props.storage && !props.id) {
-                errLog('vxe.error.reqProp', ['[modal] id']);
+                errLog('vxe.error.reqProp', ['id']);
             }
             if (props.value) {
                 $xeModal.openModal();
@@ -1642,17 +1680,23 @@ export default {
         if (props.escClosable) {
             globalEvents.on($xeModal, 'keydown', $xeModal.handleGlobalKeydownEvent);
         }
+        globalEvents.on($xeModal, 'resize', $xeModal.handleGlobalResizeEvent);
     },
     beforeDestroy() {
         const $xeModal = this;
+        const reactData = $xeModal.reactData;
+        const internalData = $xeModal.internalData;
         const panelElem = $xeModal.$refs.refElem;
         if (panelElem && panelElem.parentNode) {
             panelElem.parentNode.removeChild(panelElem);
         }
         globalEvents.off($xeModal, 'keydown');
+        globalEvents.off($xeModal, 'resize');
         $xeModal.removeMsgQueue();
         $xeModal.removeActiveQueue();
         $xeModal.removeBodyLockScroll();
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
     },
     render(h) {
         return this.renderVN(h);

package/es/modal/src/store.js

@@ -0,0 +1 @@
+export const allActiveModals = [];

package/es/modal/style.css

@@ -1,3 +1,22 @@
+.vxe-modal--wrapper {
+  --vxe-ui-modal-current-font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-modal--wrapper.size--xlarge {
+  --vxe-ui-modal-current-font-size: var(--vxe-ui-font-size-xlarge);
+}
+.vxe-modal--wrapper.size--large {
+  --vxe-ui-modal-current-font-size: var(--vxe-ui-font-size-large);
+}
+.vxe-modal--wrapper.size--medium {
+  --vxe-ui-modal-current-font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-modal--wrapper.size--small {
+  --vxe-ui-modal-current-font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-modal--wrapper.size--mini {
+  --vxe-ui-modal-current-font-size: var(--vxe-ui-font-size-mini);
+}
+
 html[data-vxe-lock-scroll] {
   overflow: hidden;
 }
@@ -170,10 +189,10 @@ html[data-vxe-lock-scroll] body {
   cursor: w-resize;
 }
 .vxe-modal--resize .wl-resize {
-  left: -5px;
+  left: -4px;
 }
 .vxe-modal--resize .wr-resize {
-  right: -5px;
+  right: -4px;
 }
 .vxe-modal--resize .swst-resize,
 .vxe-modal--resize .sest-resize,
@@ -215,10 +234,10 @@ html[data-vxe-lock-scroll] body {
   cursor: s-resize;
 }
 .vxe-modal--resize .st-resize {
-  top: -5px;
+  top: -4px;
 }
 .vxe-modal--resize .sb-resize {
-  bottom: -5px;
+  bottom: -4px;
 }
 
 .vxe-modal--wrapper {
@@ -226,6 +245,7 @@ html[data-vxe-lock-scroll] body {
   top: 0;
   left: 0;
   line-height: 1.5;
+  font-size: var(--vxe-ui-modal-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   outline: 0;
@@ -422,15 +442,6 @@ html[data-vxe-lock-scroll] body {
   padding-right: 1.2em;
 }
 
-.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[data-effect] {
+  overflow: hidden;
 }

package/es/modal/style.min.css

@@ -1 +1 @@
-html[data-vxe-lock-scroll]{overflow:hidden}html[data-vxe-lock-scroll] body{overflow:hidden;width:var(--vxe-ui-modal-lock-scroll-view-width)}.vxe-modal--box{visibility:hidden;width:420px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);text-align:left;pointer-events:auto;opacity:0;outline:0}.vxe-modal--box.is--drag{cursor:move}.vxe-modal--box.is--drag .vxe-modal--body:after,.vxe-modal--box.is--drag .vxe-modal--footer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.vxe-modal--box.is--drag .vxe-modal--body{overflow:hidden}.vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content{overflow:hidden}.vxe-modal--aside{flex-shrink:0;overflow:auto}.vxe-modal--container{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-modal--status-wrapper{flex-shrink:0;display:flex;align-items:center;font-size:1.6em}.vxe-modal--content{flex-grow:1;white-space:pre-line}.vxe-modal--body,.vxe-modal--footer,.vxe-modal--header{position:relative}.vxe-modal--body{display:flex;flex-direction:row;flex-grow:1;outline:0}.vxe-modal--body-left,.vxe-modal--body-right{flex-shrink:0;overflow:auto;outline:0}.vxe-modal--body-default{display:flex;flex-grow:1;overflow:auto;outline:0}.vxe-modal--header{display:flex;flex-direction:row;align-items:center;height:2.8em;flex-shrink:0;font-size:1.1em;font-weight:700;border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-modal--header.is--ellipsis .vxe-modal--header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-modal--footer-wrapper{display:flex;flex-direction:row}.vxe-modal--footer-wrapper .vxe-modal--footer-left{flex-grow:1;text-align:left}.vxe-modal--footer-wrapper .vxe-modal--footer-right{flex-shrink:0}.vxe-modal--header-title{flex-grow:1;padding:.8em 0 .8em .6em}.vxe-modal--header-right{display:flex;flex-direction:row;flex-shrink:0;padding:0 .6em 0 0}.vxe-modal--close-btn,.vxe-modal--zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;margin-left:.5em;cursor:pointer}.vxe-modal--close-btn:hover,.vxe-modal--zoom-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-modal--footer{flex-shrink:0;text-align:right;padding:.4em 1em .8em 1em}.vxe-modal--resize .sb-resize,.vxe-modal--resize .selb-resize,.vxe-modal--resize .sest-resize,.vxe-modal--resize .st-resize,.vxe-modal--resize .swlb-resize,.vxe-modal--resize .swst-resize,.vxe-modal--resize .wl-resize,.vxe-modal--resize .wr-resize{position:absolute;z-index:100}.vxe-modal--resize .wl-resize,.vxe-modal--resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.vxe-modal--resize .wl-resize{left:-5px}.vxe-modal--resize .wr-resize{right:-5px}.vxe-modal--resize .selb-resize,.vxe-modal--resize .sest-resize,.vxe-modal--resize .swlb-resize,.vxe-modal--resize .swst-resize{width:10px;height:10px;z-index:101}.vxe-modal--resize .sest-resize,.vxe-modal--resize .swst-resize{top:-8px}.vxe-modal--resize .selb-resize,.vxe-modal--resize .swlb-resize{bottom:-8px}.vxe-modal--resize .sest-resize,.vxe-modal--resize .swlb-resize{cursor:sw-resize}.vxe-modal--resize .selb-resize,.vxe-modal--resize .swst-resize{cursor:se-resize}.vxe-modal--resize .swlb-resize,.vxe-modal--resize .swst-resize{left:-8px}.vxe-modal--resize .selb-resize,.vxe-modal--resize .sest-resize{right:-8px}.vxe-modal--resize .sb-resize,.vxe-modal--resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.vxe-modal--resize .st-resize{top:-5px}.vxe-modal--resize .sb-resize{bottom:-5px}.vxe-modal--wrapper{display:none;top:0;left:0;line-height:1.5;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);outline:0}.vxe-modal--wrapper.ctx--free{width:calc(100% + 18px);height:calc(100% + 18px);position:fixed}.vxe-modal--wrapper.ctx--free.is--mask:before,.vxe-modal--wrapper.ctx--free.lock--view:before{position:fixed}.vxe-modal--wrapper.ctx--free.type--alert .vxe-modal--box,.vxe-modal--wrapper.ctx--free.type--confirm .vxe-modal--box,.vxe-modal--wrapper.ctx--free.type--modal .vxe-modal--box{position:fixed}.vxe-modal--wrapper.ctx--within{width:100%;height:100%;position:absolute}.vxe-modal--wrapper.ctx--within.is--mask:before,.vxe-modal--wrapper.ctx--within.lock--view:before{position:absolute}.vxe-modal--wrapper.ctx--within.type--alert .vxe-modal--box,.vxe-modal--wrapper.ctx--within.type--confirm .vxe-modal--box,.vxe-modal--wrapper.ctx--within.type--modal .vxe-modal--box{position:absolute}.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 .vxe-modal--box{opacity:1;visibility:visible}.vxe-modal--wrapper:not(.lock--view){pointer-events:none}.vxe-modal--wrapper.is--draggable.zoom--minimize .vxe-modal--header-title,.vxe-modal--wrapper.is--draggable.zoom--revert .vxe-modal--header-title{cursor:move}.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sb-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .selb-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sest-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .st-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swlb-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swst-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wl-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wr-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sb-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .selb-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sest-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .st-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swlb-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swst-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wl-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wr-resize{display:none}.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box{border-radius:0}.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--header{border-radius:0;cursor:default}.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--body,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--footer{display:none}.vxe-modal--wrapper.type--alert.lock--scroll,.vxe-modal--wrapper.type--confirm.lock--scroll,.vxe-modal--wrapper.type--modal.lock--scroll{overflow:hidden}.vxe-modal--wrapper.type--alert:not(.lock--scroll),.vxe-modal--wrapper.type--confirm:not(.lock--scroll),.vxe-modal--wrapper.type--modal:not(.lock--scroll){overflow:auto}.vxe-modal--wrapper.is--mask:before,.vxe-modal--wrapper.lock--view:before{content:"";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.type--alert .vxe-modal--body,.vxe-modal--wrapper.type--confirm .vxe-modal--body,.vxe-modal--wrapper.type--message .vxe-modal--body,.vxe-modal--wrapper.type--notification .vxe-modal--body{white-space:normal;word-break:break-word}.vxe-modal--wrapper.type--message .vxe-modal--box{opacity:0;transform:translate(0,-100%)}.vxe-modal--wrapper.type--message.is--visible .vxe-modal--box{opacity:1;transform:translate(0,0)}.vxe-modal--wrapper.type--notification.pos--top-right .vxe-modal--box{opacity:0;transform:translate(100%,0)}.vxe-modal--wrapper.type--notification.pos--top-right.is--visible .vxe-modal--box{opacity:1;transform:translate(0,0)}.vxe-modal--wrapper.type--message,.vxe-modal--wrapper.type--notification{width:100%;height:100%;padding:0 var(--vxe-ui-layout-padding-double);text-align:center;transition:top .3s ease-in-out}.vxe-modal--wrapper.type--message.pos--top-left,.vxe-modal--wrapper.type--notification.pos--top-left{text-align:left}.vxe-modal--wrapper.type--message.pos--top-right,.vxe-modal--wrapper.type--notification.pos--top-right{text-align:right}.vxe-modal--wrapper.type--message .vxe-modal--box,.vxe-modal--wrapper.type--notification .vxe-modal--box{display:inline-flex;flex-direction:row;margin-top:0;width:auto;box-shadow:0 0 8px 0 rgba(0,0,0,.1);transition:all .3s ease-out}.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--body:after,.vxe-modal--wrapper.type--notification .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,.vxe-modal--wrapper.type--notification .vxe-modal--box .vxe-modal--content{max-width:800px;float:left}.vxe-modal--wrapper.type--alert.is--title-bg .vxe-modal--header,.vxe-modal--wrapper.type--confirm.is--title-bg .vxe-modal--header,.vxe-modal--wrapper.type--modal.is--title-bg .vxe-modal--header{background-color:var(--vxe-ui-modal-header-background-color)}.vxe-modal--wrapper.type--alert.is--border .vxe-modal--header,.vxe-modal--wrapper.type--confirm.is--border .vxe-modal--header,.vxe-modal--wrapper.type--modal.is--border .vxe-modal--header{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-modal--wrapper.type--alert.is--border .vxe-modal--box,.vxe-modal--wrapper.type--confirm.is--border .vxe-modal--box,.vxe-modal--wrapper.type--modal.is--border .vxe-modal--box{border:1px solid var(--vxe-ui-base-popup-border-color)}.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:row;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.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--aside{padding:.8em .6em}.vxe-modal--wrapper.is--padding .vxe-modal--body-default{padding:.8em .6em}.vxe-modal--wrapper.is--padding .vxe-modal--body-default .vxe-modal--status-wrapper{padding-right:.6em}.vxe-modal--wrapper.is--padding.type--notification .vxe-modal--body-default{padding-top:0}.vxe-modal--wrapper.type--message .vxe-modal--body-default{padding-right:1.2em}.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{--vxe-ui-modal-current-font-size:var(--vxe-ui-font-size-default)}.vxe-modal--wrapper.size--xlarge{--vxe-ui-modal-current-font-size:var(--vxe-ui-font-size-xlarge)}.vxe-modal--wrapper.size--large{--vxe-ui-modal-current-font-size:var(--vxe-ui-font-size-large)}.vxe-modal--wrapper.size--medium{--vxe-ui-modal-current-font-size:var(--vxe-ui-font-size-medium)}.vxe-modal--wrapper.size--small{--vxe-ui-modal-current-font-size:var(--vxe-ui-font-size-small)}.vxe-modal--wrapper.size--mini{--vxe-ui-modal-current-font-size:var(--vxe-ui-font-size-mini)}html[data-vxe-lock-scroll]{overflow:hidden}html[data-vxe-lock-scroll] body{overflow:hidden;width:var(--vxe-ui-modal-lock-scroll-view-width)}.vxe-modal--box{visibility:hidden;width:420px;background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);text-align:left;pointer-events:auto;opacity:0;outline:0}.vxe-modal--box.is--drag{cursor:move}.vxe-modal--box.is--drag .vxe-modal--body:after,.vxe-modal--box.is--drag .vxe-modal--footer:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%}.vxe-modal--box.is--drag .vxe-modal--body{overflow:hidden}.vxe-modal--box.is--drag .vxe-modal--body .vxe-modal--content{overflow:hidden}.vxe-modal--aside{flex-shrink:0;overflow:auto}.vxe-modal--container{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-modal--status-wrapper{flex-shrink:0;display:flex;align-items:center;font-size:1.6em}.vxe-modal--content{flex-grow:1;white-space:pre-line}.vxe-modal--body,.vxe-modal--footer,.vxe-modal--header{position:relative}.vxe-modal--body{display:flex;flex-direction:row;flex-grow:1;outline:0}.vxe-modal--body-left,.vxe-modal--body-right{flex-shrink:0;overflow:auto;outline:0}.vxe-modal--body-default{display:flex;flex-grow:1;overflow:auto;outline:0}.vxe-modal--header{display:flex;flex-direction:row;align-items:center;height:2.8em;flex-shrink:0;font-size:1.1em;font-weight:700;border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-modal--header.is--ellipsis .vxe-modal--header-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-modal--footer-wrapper{display:flex;flex-direction:row}.vxe-modal--footer-wrapper .vxe-modal--footer-left{flex-grow:1;text-align:left}.vxe-modal--footer-wrapper .vxe-modal--footer-right{flex-shrink:0}.vxe-modal--header-title{flex-grow:1;padding:.8em 0 .8em .6em}.vxe-modal--header-right{display:flex;flex-direction:row;flex-shrink:0;padding:0 .6em 0 0}.vxe-modal--close-btn,.vxe-modal--zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;margin-left:.5em;cursor:pointer}.vxe-modal--close-btn:hover,.vxe-modal--zoom-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-modal--footer{flex-shrink:0;text-align:right;padding:.4em 1em .8em 1em}.vxe-modal--resize .sb-resize,.vxe-modal--resize .selb-resize,.vxe-modal--resize .sest-resize,.vxe-modal--resize .st-resize,.vxe-modal--resize .swlb-resize,.vxe-modal--resize .swst-resize,.vxe-modal--resize .wl-resize,.vxe-modal--resize .wr-resize{position:absolute;z-index:100}.vxe-modal--resize .wl-resize,.vxe-modal--resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.vxe-modal--resize .wl-resize{left:-4px}.vxe-modal--resize .wr-resize{right:-4px}.vxe-modal--resize .selb-resize,.vxe-modal--resize .sest-resize,.vxe-modal--resize .swlb-resize,.vxe-modal--resize .swst-resize{width:10px;height:10px;z-index:101}.vxe-modal--resize .sest-resize,.vxe-modal--resize .swst-resize{top:-8px}.vxe-modal--resize .selb-resize,.vxe-modal--resize .swlb-resize{bottom:-8px}.vxe-modal--resize .sest-resize,.vxe-modal--resize .swlb-resize{cursor:sw-resize}.vxe-modal--resize .selb-resize,.vxe-modal--resize .swst-resize{cursor:se-resize}.vxe-modal--resize .swlb-resize,.vxe-modal--resize .swst-resize{left:-8px}.vxe-modal--resize .selb-resize,.vxe-modal--resize .sest-resize{right:-8px}.vxe-modal--resize .sb-resize,.vxe-modal--resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.vxe-modal--resize .st-resize{top:-4px}.vxe-modal--resize .sb-resize{bottom:-4px}.vxe-modal--wrapper{display:none;top:0;left:0;line-height:1.5;font-size:var(--vxe-ui-modal-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);outline:0}.vxe-modal--wrapper.ctx--free{width:calc(100% + 18px);height:calc(100% + 18px);position:fixed}.vxe-modal--wrapper.ctx--free.is--mask:before,.vxe-modal--wrapper.ctx--free.lock--view:before{position:fixed}.vxe-modal--wrapper.ctx--free.type--alert .vxe-modal--box,.vxe-modal--wrapper.ctx--free.type--confirm .vxe-modal--box,.vxe-modal--wrapper.ctx--free.type--modal .vxe-modal--box{position:fixed}.vxe-modal--wrapper.ctx--within{width:100%;height:100%;position:absolute}.vxe-modal--wrapper.ctx--within.is--mask:before,.vxe-modal--wrapper.ctx--within.lock--view:before{position:absolute}.vxe-modal--wrapper.ctx--within.type--alert .vxe-modal--box,.vxe-modal--wrapper.ctx--within.type--confirm .vxe-modal--box,.vxe-modal--wrapper.ctx--within.type--modal .vxe-modal--box{position:absolute}.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 .vxe-modal--box{opacity:1;visibility:visible}.vxe-modal--wrapper:not(.lock--view){pointer-events:none}.vxe-modal--wrapper.is--draggable.zoom--minimize .vxe-modal--header-title,.vxe-modal--wrapper.is--draggable.zoom--revert .vxe-modal--header-title{cursor:move}.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sb-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .selb-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sest-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .st-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swlb-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swst-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wl-resize,.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wr-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sb-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .selb-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .sest-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .st-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swlb-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .swst-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wl-resize,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--resize .wr-resize{display:none}.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box{border-radius:0}.vxe-modal--wrapper.zoom--maximize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--header{border-radius:0;cursor:default}.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--body,.vxe-modal--wrapper.zoom--minimize>.vxe-modal--box>.vxe-modal--container>.vxe-modal--footer{display:none}.vxe-modal--wrapper.type--alert.lock--scroll,.vxe-modal--wrapper.type--confirm.lock--scroll,.vxe-modal--wrapper.type--modal.lock--scroll{overflow:hidden}.vxe-modal--wrapper.type--alert:not(.lock--scroll),.vxe-modal--wrapper.type--confirm:not(.lock--scroll),.vxe-modal--wrapper.type--modal:not(.lock--scroll){overflow:auto}.vxe-modal--wrapper.is--mask:before,.vxe-modal--wrapper.lock--view:before{content:"";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.type--alert .vxe-modal--body,.vxe-modal--wrapper.type--confirm .vxe-modal--body,.vxe-modal--wrapper.type--message .vxe-modal--body,.vxe-modal--wrapper.type--notification .vxe-modal--body{white-space:normal;word-break:break-word}.vxe-modal--wrapper.type--message .vxe-modal--box{opacity:0;transform:translate(0,-100%)}.vxe-modal--wrapper.type--message.is--visible .vxe-modal--box{opacity:1;transform:translate(0,0)}.vxe-modal--wrapper.type--notification.pos--top-right .vxe-modal--box{opacity:0;transform:translate(100%,0)}.vxe-modal--wrapper.type--notification.pos--top-right.is--visible .vxe-modal--box{opacity:1;transform:translate(0,0)}.vxe-modal--wrapper.type--message,.vxe-modal--wrapper.type--notification{width:100%;height:100%;padding:0 var(--vxe-ui-layout-padding-double);text-align:center;transition:top .3s ease-in-out}.vxe-modal--wrapper.type--message.pos--top-left,.vxe-modal--wrapper.type--notification.pos--top-left{text-align:left}.vxe-modal--wrapper.type--message.pos--top-right,.vxe-modal--wrapper.type--notification.pos--top-right{text-align:right}.vxe-modal--wrapper.type--message .vxe-modal--box,.vxe-modal--wrapper.type--notification .vxe-modal--box{display:inline-flex;flex-direction:row;margin-top:0;width:auto;box-shadow:0 0 8px 0 rgba(0,0,0,.1);transition:all .3s ease-out}.vxe-modal--wrapper.type--message .vxe-modal--box .vxe-modal--body:after,.vxe-modal--wrapper.type--notification .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,.vxe-modal--wrapper.type--notification .vxe-modal--box .vxe-modal--content{max-width:800px;float:left}.vxe-modal--wrapper.type--alert.is--title-bg .vxe-modal--header,.vxe-modal--wrapper.type--confirm.is--title-bg .vxe-modal--header,.vxe-modal--wrapper.type--modal.is--title-bg .vxe-modal--header{background-color:var(--vxe-ui-modal-header-background-color)}.vxe-modal--wrapper.type--alert.is--border .vxe-modal--header,.vxe-modal--wrapper.type--confirm.is--border .vxe-modal--header,.vxe-modal--wrapper.type--modal.is--border .vxe-modal--header{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-modal--wrapper.type--alert.is--border .vxe-modal--box,.vxe-modal--wrapper.type--confirm.is--border .vxe-modal--box,.vxe-modal--wrapper.type--modal.is--border .vxe-modal--box{border:1px solid var(--vxe-ui-base-popup-border-color)}.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:row;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.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--aside{padding:.8em .6em}.vxe-modal--wrapper.is--padding .vxe-modal--body-default{padding:.8em .6em}.vxe-modal--wrapper.is--padding .vxe-modal--body-default .vxe-modal--status-wrapper{padding-right:.6em}.vxe-modal--wrapper.is--padding.type--notification .vxe-modal--body-default{padding-top:0}.vxe-modal--wrapper.type--message .vxe-modal--body-default{padding-right:1.2em}.vxe-modal--wrapper[data-effect]{overflow:hidden}

package/es/number-input/src/number-input.js

@@ -761,7 +761,7 @@ export default {
                     const inputElem = $xeNumberInput.$refs.refInputTarget;
                     const content = getText(contentMethod
                         ? contentMethod({
-                            $mumberInput: $xeNumberInput,
+                            $numberInput: $xeNumberInput,
                             type,
                             inputValue: inputElem.value,
                             value: inputValue || '',

package/es/slider/src/slider.js

@@ -1,9 +1,12 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, createEvent, renderEmptyElement } from '../../ui';
+import { VxeUI, getConfig, createEvent, renderEmptyElement } from '../../ui';
+import { getText } from '../../ui/src/utils';
 function createInternalData() {
     return {
         // _isUp: false,
+        isDragStatus: false,
+        isBtnActive: false,
         currValue: 0,
         startValue: 0,
         endValue: 0
@@ -54,7 +57,12 @@ export default {
         immediate: {
             type: Boolean,
             default: () => getConfig().slider.immediate
-        }
+        },
+        showTooltip: {
+            type: Boolean,
+            default: () => getConfig().slider.showTooltip
+        },
+        tooltipConfig: Object
     },
     inject: {
         $xeForm: {
@@ -112,6 +120,11 @@ export default {
             const props = $xeSlider;
             const { range, startValue, endValue } = props;
             return range ? `${startValue || ''}${endValue || ''}` : '';
+        },
+        computeTooltipOpts() {
+            const $xeSlider = this;
+            const props = $xeSlider;
+            return Object.assign({}, getConfig().slider.tooltipConfig, props.tooltipConfig);
         } }),
     methods: {
         //
@@ -287,6 +300,43 @@ export default {
             const raw = minNum + ratio * (maxNum - minNum);
             return Math.floor(raw);
         },
+        handleShowTip(btnElem) {
+            const $xeSlider = this;
+            const props = $xeSlider;
+            const internalData = $xeSlider.internalData;
+            const { showTooltip } = props;
+            if (showTooltip) {
+                if (VxeUI.tooltip) {
+                    const { currValue } = internalData;
+                    const tooltipOpts = $xeSlider.computeTooltipOpts;
+                    const { contentMethod } = tooltipOpts;
+                    const content = getText(contentMethod
+                        ? contentMethod({
+                            $slider: $xeSlider,
+                            value: currValue
+                        })
+                        : '' + currValue);
+                    if (content) {
+                        VxeUI.tooltip.open(btnElem, Object.assign({}, Object.assign(Object.assign({}, tooltipOpts), { content }), {
+                            contentMethod: undefined
+                        }));
+                    }
+                    else {
+                        VxeUI.tooltip.close();
+                    }
+                }
+            }
+        },
+        handleHideTip() {
+            const $xeSlider = this;
+            const props = $xeSlider;
+            const { showTooltip } = props;
+            if (showTooltip) {
+                if (VxeUI.tooltip) {
+                    VxeUI.tooltip.close();
+                }
+            }
+        },
         handleBtnMousedownEvent(evnt) {
             const $xeSlider = this;
             const props = $xeSlider;
@@ -327,10 +377,12 @@ export default {
                         $xeSlider.changeEvent(evnt);
                     }
                     $xeSlider.updateTrackStyle();
+                    $xeSlider.handleShowTip(btnElem);
                 };
                 document.onmouseup = (evnt) => {
                     document.onmousemove = null;
                     document.onmouseup = null;
+                    internalData.isDragStatus = false;
                     $xeSlider.dispatchEvent('track-dragend', {
                         currentValue: internalData.currValue,
                         startValue: internalData.startValue,
@@ -338,12 +390,35 @@ export default {
                     }, evnt);
                     $xeSlider.changeEvent(evnt);
                     $xeSlider.updateTrackStyle();
+                    if (!internalData.isBtnActive) {
+                        $xeSlider.handleHideTip();
+                    }
                 };
                 $xeSlider.dispatchEvent('track-dragstart', {
                     currentValue: internalData.currValue,
                     startValue: internalData.startValue,
                     endValue: internalData.endValue
                 }, evnt);
+                internalData.isDragStatus = false;
+            }
+        },
+        handleBtnMouseenterEvent(evnt) {
+            const $xeSlider = this;
+            const internalData = $xeSlider.internalData;
+            const { startValue, endValue } = internalData;
+            const btnElem = evnt.currentTarget;
+            const btnType = btnElem.getAttribute('data-type');
+            internalData.currValue = btnType === '1' ? startValue : endValue;
+            internalData.isBtnActive = true;
+            $xeSlider.handleShowTip(btnElem);
+        },
+        handleBtnMouseleaveEvent() {
+            const $xeSlider = this;
+            const internalData = $xeSlider.internalData;
+            const { isDragStatus } = internalData;
+            internalData.isBtnActive = false;
+            if (!isDragStatus) {
+                $xeSlider.handleHideTip();
             }
         },
         //
@@ -385,6 +460,8 @@ export default {
                                 'data-type': '1'
                             },
                             on: {
+                                mouseenter: $xeSlider.handleBtnMouseenterEvent,
+                                mouseleave: $xeSlider.handleBtnMouseleaveEvent,
                                 mousedown: $xeSlider.handleBtnMousedownEvent
                             }
                         }),
@@ -397,6 +474,8 @@ export default {
                                 'data-type': '2'
                             },
                             on: {
+                                mouseenter: $xeSlider.handleBtnMouseenterEvent,
+                                mouseleave: $xeSlider.handleBtnMouseleaveEvent,
                                 mousedown: $xeSlider.handleBtnMousedownEvent
                             }
                         })

package/es/slider/style.css

@@ -87,6 +87,7 @@
 }
 .vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active {
   transform: translate(-50%, -50%) scale(1.1);
+  cursor: grab;
 }
 .vxe-slider.is--readonly .vxe-slider--bar-wrapper,
 .vxe-slider.is--readonly .vxe-slider--inner {

package/es/slider/style.min.css

@@ -1 +1 @@
-.vxe-slider{position:relative;display:block;padding:.8em}.vxe-slider.theme--primary .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider.theme--primary .vxe-slider--bar-btn{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--success .vxe-slider--bar-track{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-lighten-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-slider.theme--success .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--info .vxe-slider--bar-track{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-lighten-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-slider.theme--info .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--warning .vxe-slider--bar-track{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-slider.theme--warning .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--danger .vxe-slider--bar-track{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-slider.theme--danger .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--error .vxe-slider--bar-track{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-slider.theme--error .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.is--disabled .vxe-slider--bar-btn{cursor:not-allowed}.vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,.vxe-slider:not(.is--disabled) .vxe-slider--inner{cursor:pointer}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover{transform:translate(-50%,-50%) scale(1.2)}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active{transform:translate(-50%,-50%) scale(1.1)}.vxe-slider.is--readonly .vxe-slider--bar-wrapper,.vxe-slider.is--readonly .vxe-slider--inner{cursor:default}.vxe-slider--inner{position:relative}.vxe-slider--bar-wrapper{background-color:#e4e7ed}.vxe-slider--bar-track{position:absolute;left:0;top:0;z-index:1;background-color:var(--vxe-ui-font-primary-color)}.vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider--bar-track:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider--bar-track,.vxe-slider--bar-wrapper{height:.3em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-slider--bar-btn{position:absolute;width:1.2em;height:1.2em;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--vxe-ui-font-primary-color);background-color:#fff;cursor:pointer;z-index:1;transition:transform .1s ease-in-out}
+.vxe-slider{position:relative;display:block;padding:.8em}.vxe-slider.theme--primary .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider.theme--primary .vxe-slider--bar-btn{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--success .vxe-slider--bar-track{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-lighten-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-slider.theme--success .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--info .vxe-slider--bar-track{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-lighten-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-slider.theme--info .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--warning .vxe-slider--bar-track{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-slider.theme--warning .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--danger .vxe-slider--bar-track{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-slider.theme--danger .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--error .vxe-slider--bar-track{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-slider.theme--error .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.is--disabled .vxe-slider--bar-btn{cursor:not-allowed}.vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,.vxe-slider:not(.is--disabled) .vxe-slider--inner{cursor:pointer}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover{transform:translate(-50%,-50%) scale(1.2)}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active{transform:translate(-50%,-50%) scale(1.1);cursor:grab}.vxe-slider.is--readonly .vxe-slider--bar-wrapper,.vxe-slider.is--readonly .vxe-slider--inner{cursor:default}.vxe-slider--inner{position:relative}.vxe-slider--bar-wrapper{background-color:#e4e7ed}.vxe-slider--bar-track{position:absolute;left:0;top:0;z-index:1;background-color:var(--vxe-ui-font-primary-color)}.vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider--bar-track:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider--bar-track,.vxe-slider--bar-wrapper{height:.3em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-slider--bar-btn{position:absolute;width:1.2em;height:1.2em;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--vxe-ui-font-primary-color);background-color:#fff;cursor:pointer;z-index:1;transition:transform .1s ease-in-out}

package/es/space/src/space.js

@@ -41,6 +41,26 @@ export default {
         align: {
             type: String,
             default: () => getConfig().space.align
+        },
+        fill: {
+            type: Boolean,
+            default: () => getConfig().space.fill
+        },
+        itemWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.itemWidth
+        },
+        itemMinWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.itemMinWidth
+        },
+        itemMaxWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.itemMaxWidth
+        },
+        separatorWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.separatorWidth
         }
     },
     data() {
@@ -100,10 +120,24 @@ export default {
             const $xeSpace = this;
             const props = $xeSpace;
             const slots = $xeSpace.$scopedSlots;
-            const { separator, itemClassName } = props;
+            const { separator, itemClassName, itemWidth, itemMinWidth, itemMaxWidth, separatorWidth } = props;
             const itemVNs = [];
             const defaultSlot = slots.default;
             const separatorSlot = slots.separator;
+            const srStys = {};
+            if (separatorWidth) {
+                srStys.width = toCssUnit(itemWidth);
+            }
+            const itemStys = {};
+            if (itemWidth) {
+                itemStys.width = toCssUnit(itemWidth);
+            }
+            if (itemMinWidth) {
+                itemStys.minWidth = toCssUnit(itemMinWidth);
+            }
+            if (itemMaxWidth) {
+                itemStys.maxWidth = toCssUnit(itemMaxWidth);
+            }
             if (defaultSlot) {
                 XEUtils.each(defaultSlot({}), (itemVN, index, items) => {
                     itemVNs.push(h('div', {
@@ -123,7 +157,7 @@ export default {
         renderVN(h) {
             const $xeSpace = this;
             const props = $xeSpace;
-            const { vertical, wrap, className } = props;
+            const { vertical, wrap, className, fill, itemWidth, itemMinWidth, itemMaxWidth } = props;
             const wrapperStyle = $xeSpace.computeWrapperStyle;
             const vSize = $xeSpace.computeSize;
             return h('div', {
@@ -131,7 +165,9 @@ export default {
                 class: ['vxe-space', getPropClass(className, {}), {
                         [`size--${vSize}`]: vSize,
                         'is--wrap': wrap,
-                        'is--vertical': vertical
+                        'is--vertical': vertical,
+                        'is--fill': fill,
+                        'is--width': itemWidth || itemMinWidth || itemMaxWidth
                     }],
                 style: wrapperStyle
             }, $xeSpace.renderItems(h));

package/es/space/style.css

@@ -34,4 +34,11 @@
 }
 .vxe-space.is--vertical {
   flex-direction: column;
+}
+.vxe-space.is--fill > .vxe-space--item {
+  flex-grow: 1;
+}
+
+.vxe-space--separator {
+  flex-shrink: 0;
 }

package/es/space/style.min.css

@@ -1 +1 @@
-.vxe-space{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-default);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-default)}.vxe-space.size--xlarge{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-xlarge);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-xlarge)}.vxe-space.size--large{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-large);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-large)}.vxe-space.size--medium{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-medium);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-medium)}.vxe-space.size--small{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-small);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-small)}.vxe-space.size--mini{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-mini);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-mini)}.vxe-space{display:inline-flex;flex-direction:row;align-items:center;gap:var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap)}.vxe-space.is--wrap{flex-wrap:wrap}.vxe-space.is--vertical{flex-direction:column}
+.vxe-space{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-default);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-default)}.vxe-space.size--xlarge{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-xlarge);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-xlarge)}.vxe-space.size--large{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-large);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-large)}.vxe-space.size--medium{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-medium);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-medium)}.vxe-space.size--small{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-small);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-small)}.vxe-space.size--mini{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-mini);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-mini)}.vxe-space{display:inline-flex;flex-direction:row;align-items:center;gap:var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap)}.vxe-space.is--wrap{flex-wrap:wrap}.vxe-space.is--vertical{flex-direction:column}.vxe-space.is--fill>.vxe-space--item{flex-grow:1}.vxe-space--separator{flex-shrink:0}