vxe-pc-ui 4.17.25 → 4.17.27

package/dist/all.esm.js

@@ -1,5 +1,5 @@
 import * as core from '@vxe-ui/core';
-import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$3, createEvent, getIcon as getIcon$2, renderEmptyElement, useSize, usePermission, permission, globalEvents, renderer, getI18n as getI18n$2, globalResize, menus as menus$3, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
+import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$3, createEvent, getIcon as getIcon$2, renderEmptyElement, useSize, globalEvents, usePermission, permission, renderer, getI18n as getI18n$2, globalResize, menus as menus$3, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
 export * from '@vxe-ui/core';
 import { defineComponent, ref, reactive, h, createCommentVNode, createApp, inject, computed, watch, onMounted, onUnmounted, provide, nextTick, onBeforeUnmount, resolveComponent, Teleport, onActivated, onDeactivated, TransitionGroup } from 'vue';
 import XEUtils from 'xe-utils';
@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.17.25"}`;
+const uiVersion = `ui v${"4.17.27"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -115,7 +115,7 @@ function createComponentLog(name) {
 const warnLog$i = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.17.25";
+const version = "4.17.27";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -2014,8 +2014,7 @@ function updatePanelPlacement(targetElem, panelElem, options) {
     const stys = {};
     if (panelElem && targetElem) {
         const bodyEl = document.body;
-        const parentEl = panelElem.parentElement;
-        const parentWrapperEl = parentEl === bodyEl ? document.documentElement : parentEl;
+        const parentWrapperEl = getPopupWrapperElement(panelElem);
         if (parentWrapperEl) {
             const targetWidth = targetElem.offsetWidth;
             const targetHeight = targetElem.offsetHeight;
@@ -2139,6 +2138,14 @@ function updatePanelPlacement(targetElem, panelElem, options) {
         placement: panelPlacement
     };
 }
+function getPopupWrapperElement(panelElem) {
+    if (!panelElem) {
+        return null;
+    }
+    const bodyEl = document.body;
+    const parentEl = panelElem.parentElement;
+    return (parentEl === bodyEl ? document.documentElement : parentEl) || null;
+}
 function getPopupContainer(appendTo) {
     const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo;
     return selectElem || 'body';
@@ -2889,7 +2896,7 @@ var VxeTooltipComponent = defineVxeComponent({
             tipStore.placement = 'top';
             tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex };
             tipStore.arrowStyle = { left: '50%' };
-            return tooltipMethods.updatePlacement();
+            return $xeTooltip.updatePlacement();
         };
         const handleDelayFn = () => {
             internalData.showDelayTip = XEUtils.debounce(() => {
@@ -3029,6 +3036,14 @@ var VxeTooltipComponent = defineVxeComponent({
         const wheelEvent = (evnt) => {
             evnt.stopPropagation();
         };
+        const handleGlobalScrollEvent = () => {
+            if (reactData.visible) {
+                $xeTooltip.updatePlacement();
+            }
+        };
+        const handleGlobalBlurEvent = () => {
+            $xeTooltip.close();
+        };
         const tooltipPrivateMethods = {
             handleCloseEvent: targetMouseleaveEvent
         };
@@ -3151,6 +3166,8 @@ var VxeTooltipComponent = defineVxeComponent({
                     }
                 }
             });
+            globalEvents.on($xeTooltip, 'blur', handleGlobalBlurEvent);
+            globalEvents.on($xeTooltip, 'scroll', handleGlobalScrollEvent);
         });
         onBeforeUnmount(() => {
             const { target } = reactData;
@@ -3170,8 +3187,8 @@ var VxeTooltipComponent = defineVxeComponent({
                     parentNode.removeChild(panelElem);
                 }
             }
-        });
-        onUnmounted(() => {
+            globalEvents.off($xeTooltip, 'blur');
+            globalEvents.off($xeTooltip, 'scroll');
             XEUtils.assign(reactData, createReactData$n());
             XEUtils.assign(internalData, createInternalData$m());
         });
@@ -9172,6 +9189,10 @@ var VxeInputComponent = defineVxeComponent({
             type: String,
             default: () => getConfig$3().input.floatContent
         },
+        floatAlign: {
+            type: String,
+            default: () => getConfig$3().input.floatAlign
+        },
         maxLength: {
             type: [String, Number],
             default: () => getConfig$3().input.maxLength
@@ -11701,7 +11722,7 @@ var VxeInputComponent = defineVxeComponent({
             return createCommentVNode();
         };
         const renderVN = () => {
-            const { className, inputClassName, controls, type, title, floatContent, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props;
+            const { className, inputClassName, controls, type, title, floatContent, align, showWordCount, countMethod, name, autoComplete, autocomplete, floatAlign } = props;
             const { inputValue, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
@@ -11725,7 +11746,7 @@ var VxeInputComponent = defineVxeComponent({
             const floatSlot = slots.float;
             return h('div', {
                 ref: refElem,
-                class: ['vxe-input', `type--${type}`, className, {
+                class: ['vxe-input', `type--${type}`, floatContent ? (`fla--${floatAlign || 'center'}`) : '', className, {
                         [`size--${vSize}`]: vSize,
                         [`is--${align}`]: align,
                         'is--controls': controls,
@@ -11762,14 +11783,14 @@ var VxeInputComponent = defineVxeComponent({
                         onChange: changeEvent,
                         onFocus: focusEvent,
                         onBlur: blurEvent
-                    })
+                    }),
+                    floatContent || floatSlot
+                        ? h('span', {
+                            class: 'vxe-input--float-wrapper'
+                        }, floatSlot ? floatSlot({}) : getText(floatContent))
+                        : renderEmptyElement($xeInput)
                 ]),
                 suffix || createCommentVNode(),
-                floatContent || floatSlot
-                    ? h('span', {
-                        class: 'vxe-input--float-wrapper'
-                    }, floatSlot ? floatSlot({}) : getText(floatContent))
-                    : renderEmptyElement($xeInput),
                 // 下拉面板
                 renderPanel(),
                 // 字数统计
@@ -15288,6 +15309,10 @@ var VxeNumberInputComponent = defineVxeComponent({
             type: String,
             default: () => getConfig$3().numberInput.floatContent
         },
+        floatAlign: {
+            type: String,
+            default: () => getConfig$3().numberInput.floatAlign
+        },
         maxLength: {
             type: [String, Number],
             default: () => getConfig$3().numberInput.maxLength
@@ -15674,7 +15699,6 @@ var VxeNumberInputComponent = defineVxeComponent({
                 reactData.inputValue = eqEmptyValue(inputValue) ? '' : `${XEUtils.toNumber(inputValue)}`;
                 reactData.isFocus = true;
                 reactData.isActivated = true;
-                handleShowTip();
                 triggerEvent(evnt);
             }
         };
@@ -15813,13 +15837,11 @@ var VxeNumberInputComponent = defineVxeComponent({
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
+        const mouseenterEvent = () => {
+            handleShowTip();
+        };
         const mouseleaveEvent = () => {
-            const { showTooltip } = props;
-            if (showTooltip) {
-                if (VxeUI.tooltip) {
-                    VxeUI.tooltip.close();
-                }
-            }
+            handleHideTip();
         };
         // 数值
         const numberChange = (isPlus, evnt) => {
@@ -15882,7 +15904,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             }
         };
         const handleShowTip = () => {
-            const { showTooltip } = props;
+            const { type, showTooltip } = props;
             const { inputValue } = reactData;
             if (showTooltip) {
                 if (VxeUI.tooltip) {
@@ -15892,6 +15914,8 @@ var VxeNumberInputComponent = defineVxeComponent({
                     const inputElem = refInputTarget.value;
                     const content = getText(contentMethod
                         ? contentMethod({
+                            $mumberInput: $xeNumberInput,
+                            type,
                             inputValue: inputElem.value,
                             value: inputValue || '',
                             label: numLabel
@@ -15908,6 +15932,14 @@ var VxeNumberInputComponent = defineVxeComponent({
                 }
             }
         };
+        const handleHideTip = () => {
+            const { showTooltip } = props;
+            if (showTooltip) {
+                if (VxeUI.tooltip) {
+                    VxeUI.tooltip.close();
+                }
+            }
+        };
         const keydownEvent = (evnt) => {
             const { type, negative, exponential, controls } = props;
             const controlOpts = computeControlOpts.value;
@@ -16057,6 +16089,7 @@ var VxeNumberInputComponent = defineVxeComponent({
                         handleChange(value, handleNumberString(inputValue), evnt);
                     }
                     afterCheckValue();
+                    handleHideTip();
                 }
             }
         };
@@ -16223,7 +16256,8 @@ var VxeNumberInputComponent = defineVxeComponent({
                         onChange: changeEvent,
                         onFocus: focusEvent,
                         onBlur: blurEvent
-                    })
+                    }),
+                    renderFloat()
                 ]),
                 renderSuffixIcon()
             ]);
@@ -16286,7 +16320,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             return renderEmptyElement($xeNumberInput);
         };
         const renderVN = () => {
-            const { className, controls, type, align, prefixIcon, suffixIcon } = props;
+            const { className, controls, type, align, prefixIcon, suffixIcon, floatContent, floatAlign } = props;
             const { inputValue, isActivated } = reactData;
             const vSize = computeSize.value;
             const controlOpts = computeControlOpts.value;
@@ -16307,7 +16341,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             const isControls = isEnableConf(controlOpts) && (controls === false ? controls : showButton);
             return h('div', {
                 ref: refElem,
-                class: ['vxe-number-input', `type--${type}`, isControls ? (`ctl--${layout === 'right' || layout === 'left' ? layout : 'default'}`) : '', className, {
+                class: ['vxe-number-input', `type--${type}`, isControls ? (`ctl--${layout === 'right' || layout === 'left' ? layout : 'default'}`) : '', floatContent ? (`fla--${floatAlign || 'center'}`) : '', className, {
                         [`size--${vSize}`]: vSize,
                         [`is--${align}`]: align,
                         'is--controls': isControls && !inputReadonly,
@@ -16318,29 +16352,26 @@ var VxeNumberInputComponent = defineVxeComponent({
                         'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
                 spellcheck: false,
+                onMouseenter: mouseenterEvent,
                 onMouseleave: mouseleaveEvent
             }, isControls
                 ? (layout === 'right'
                     ? [
                         renderInput(),
-                        renderSideControl(),
-                        renderFloat()
+                        renderSideControl()
                     ]
                     : (layout === 'left'
                         ? [
                             renderSideControl(),
-                            renderInput(),
-                            renderFloat()
+                            renderInput()
                         ]
                         : [
                             renderMinusBtn(),
                             renderInput(),
-                            renderPlusBtn(),
-                            renderFloat()
+                            renderPlusBtn()
                         ]))
                 : [
-                    renderInput(),
-                    renderFloat()
+                    renderInput()
                 ]);
         };
         $xeNumberInput.renderVN = renderVN;
@@ -29892,6 +29923,10 @@ var VxeModalComponent = defineVxeComponent({
             type: [String, Function],
             default: () => getConfig$3().modal.appendTo
         },
+        isWithinAppendTo: {
+            type: Boolean,
+            default: () => getConfig$3().modal.isWithinAppendTo
+        },
         storage: {
             type: Boolean,
             default: () => getConfig$3().modal.storage
@@ -30046,14 +30081,20 @@ var VxeModalComponent = defineVxeComponent({
         };
         const updatePosition = () => {
             return nextTick().then(() => {
-                const { position } = props;
-                const marginSize = XEUtils.toNumber(props.marginSize);
+                const { position, isWithinAppendTo } = props;
+                const btnTransfer = computeBtnTransfer.value;
+                const el = refElem.value;
                 const boxElem = getBox();
                 if (!boxElem) {
                     return;
                 }
-                const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth;
-                const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight;
+                const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo && btnTransfer ? el : document.body);
+                if (!parentWrapperEl) {
+                    return;
+                }
+                const clientVisibleWidth = parentWrapperEl.clientWidth;
+                const clientVisibleHeight = parentWrapperEl.clientHeight;
+                const marginSize = XEUtils.toNumber(props.marginSize);
                 const isPosCenter = position === 'center';
                 const { top, left } = XEUtils.isString(position) ? { top: position, left: position } : Object.assign({}, position);
                 const topCenter = isPosCenter || top === 'center';
@@ -30232,6 +30273,8 @@ var VxeModalComponent = defineVxeComponent({
             }
         };
         const handleMinimize = () => {
+            const { isWithinAppendTo } = props;
+            const btnTransfer = computeBtnTransfer.value;
             const zoomOpts = computeZoomOpts.value;
             const { minimizeLayout, minimizeMaxSize, minimizeHorizontalOffset, minimizeVerticalOffset, minimizeOffsetMethod } = zoomOpts;
             const isHorizontalLayout = minimizeLayout === 'horizontal';
@@ -30265,6 +30308,7 @@ var VxeModalComponent = defineVxeComponent({
             reactData.prevZoomStatus = prevZoomStatus;
             reactData.zoomStatus = 'minimize';
             return nextTick().then(() => {
+                const el = refElem.value;
                 const boxElem = getBox();
                 if (!boxElem) {
                     return {
@@ -30277,7 +30321,13 @@ var VxeModalComponent = defineVxeComponent({
                         status: false
                     };
                 }
-                const { visibleHeight } = getDomNode();
+                const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo && btnTransfer ? el : document.body);
+                if (!parentWrapperEl) {
+                    return {
+                        status: false
+                    };
+                }
+                const visibleHeight = parentWrapperEl.clientHeight;
                 // 如果当前处于复原状态
                 if (!prevZoomStatus) {
                     reactData.revertLocat = {
@@ -30333,6 +30383,8 @@ var VxeModalComponent = defineVxeComponent({
             });
         };
         const handleMaximize = () => {
+            const { isWithinAppendTo } = props;
+            const btnTransfer = computeBtnTransfer.value;
             const prevZoomStatus = reactData.zoomStatus;
             reactData.prevZoomStatus = prevZoomStatus;
             reactData.zoomStatus = 'maximize';
@@ -30341,9 +30393,16 @@ var VxeModalComponent = defineVxeComponent({
                 if (boxElem) {
                     // 如果当前处于复原状态
                     if (!prevZoomStatus) {
+                        const el = refElem.value;
+                        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo && btnTransfer ? el : document.body);
+                        if (!parentWrapperEl) {
+                            return {
+                                status: false
+                            };
+                        }
+                        const clientVisibleWidth = parentWrapperEl.clientWidth;
+                        const clientVisibleHeight = parentWrapperEl.clientHeight;
                         const marginSize = XEUtils.toNumber(props.marginSize);
-                        const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth;
-                        const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight;
                         reactData.revertLocat = {
                             top: Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2),
                             left: Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2),
@@ -30616,8 +30675,9 @@ var VxeModalComponent = defineVxeComponent({
             }
         };
         const mousedownEvent = (evnt) => {
-            const { storage } = props;
+            const { resize, storage, isWithinAppendTo } = props;
             const { zoomStatus } = reactData;
+            const btnTransfer = computeBtnTransfer.value;
             const marginSize = XEUtils.toNumber(props.marginSize);
             const boxElem = getBox();
             if (!boxElem) {
@@ -30625,9 +30685,15 @@ var VxeModalComponent = defineVxeComponent({
             }
             if (zoomStatus !== 'maximize' && evnt.button === 0 && !getEventTargetNode(evnt, boxElem, 'trigger--btn').flag) {
                 evnt.preventDefault();
+                const el = refElem.value;
+                const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo && btnTransfer ? el : document.body);
+                if (!parentWrapperEl) {
+                    return;
+                }
+                const visibleWidth = parentWrapperEl.clientWidth - (resize && isWithinAppendTo ? 8 : 0);
+                const visibleHeight = parentWrapperEl.clientHeight - (resize && isWithinAppendTo ? 8 : 0);
                 const disX = evnt.clientX - boxElem.offsetLeft;
                 const disY = evnt.clientY - boxElem.offsetTop;
-                const { visibleHeight, visibleWidth } = getDomNode();
                 document.onmousemove = evnt => {
                     evnt.preventDefault();
                     const offsetWidth = boxElem.offsetWidth;
@@ -30673,8 +30739,15 @@ var VxeModalComponent = defineVxeComponent({
         };
         const dragEvent = (evnt) => {
             evnt.preventDefault();
-            const { storage } = props;
-            const { visibleHeight, visibleWidth } = getDomNode();
+            const { resize, storage, isWithinAppendTo } = props;
+            const btnTransfer = computeBtnTransfer.value;
+            const el = refElem.value;
+            const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo && btnTransfer ? el : document.body);
+            if (!parentWrapperEl) {
+                return;
+            }
+            const visibleWidth = parentWrapperEl.clientWidth - (resize && isWithinAppendTo ? 8 : 0);
+            const visibleHeight = parentWrapperEl.clientHeight - (resize && isWithinAppendTo ? 8 : 0);
             const marginSize = XEUtils.toNumber(props.marginSize);
             const targetElem = evnt.target;
             const type = targetElem.getAttribute('data-type');
@@ -31039,7 +31112,7 @@ var VxeModalComponent = defineVxeComponent({
             return renderEmptyElement($xeModal);
         };
         const renderVN = () => {
-            const { slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize, appendTo } = props;
+            const { slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize, appendTo, isWithinAppendTo } = props;
             const { initialized, modalTop, contentVisible, visible, zoomStatus } = reactData;
             const asideSlot = slots.aside || propSlots.aside;
             const vSize = computeSize.value;
@@ -31055,7 +31128,7 @@ var VxeModalComponent = defineVxeComponent({
                 to: getPopupContainer(appendTo),
                 disabled: btnTransfer ? !initialized : true
             }, [
-                h('div', Object.assign({ ref: refElem, class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, className || '', position ? `pos--${position}` : '', {
+                h('div', Object.assign({ ref: refElem, class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, className || '', position ? `pos--${position}` : '', isWithinAppendTo ? 'ctx--within' : 'ctx--free', {
                             [`size--${vSize}`]: vSize,
                             [`status--${status}`]: status,
                             'is--padding': padding,
@@ -34068,6 +34141,10 @@ var VxePasswordInputComponent = defineVxeComponent({
             type: String,
             default: () => getConfig$3().passwordInput.floatContent
         },
+        floatAlign: {
+            type: String,
+            default: () => getConfig$3().passwordInput.floatAlign
+        },
         autoComplete: {
             type: String,
             default: 'off'
@@ -34378,7 +34455,7 @@ var VxePasswordInputComponent = defineVxeComponent({
                 : null;
         };
         const renderVN = () => {
-            const { className, inputClassName, name, readonly, floatContent, autocomplete, autoComplete, maxLength } = props;
+            const { className, inputClassName, name, readonly, floatContent, autocomplete, autoComplete, maxLength, floatAlign } = props;
             const { inputValue, isActivated } = reactData;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
@@ -34398,7 +34475,7 @@ var VxePasswordInputComponent = defineVxeComponent({
             const floatSlot = slots.float;
             return h('div', {
                 ref: refElem,
-                class: ['vxe-password-input', className, {
+                class: ['vxe-password-input', floatContent ? (`fla--${floatAlign || 'center'}`) : '', className, {
                         [`size--${vSize}`]: vSize,
                         'is--prefix': !!prefix,
                         'is--suffix': !!suffix,
@@ -34428,14 +34505,14 @@ var VxePasswordInputComponent = defineVxeComponent({
                         onChange: changeEvent,
                         onFocus: focusEvent,
                         onBlur: blurEvent
-                    })
+                    }),
+                    floatContent || floatSlot
+                        ? h('span', {
+                            class: 'vxe-password-input--float-wrapper'
+                        }, floatSlot ? floatSlot({}) : getText(floatContent))
+                        : renderEmptyElement($xePasswordInput)
                 ]),
-                suffix || renderEmptyElement($xePasswordInput),
-                floatContent || floatSlot
-                    ? h('span', {
-                        class: 'vxe-password-input--float-wrapper'
-                    }, floatSlot ? floatSlot({}) : getText(floatContent))
-                    : renderEmptyElement($xePasswordInput)
+                suffix || renderEmptyElement($xePasswordInput)
             ]);
         };
         watch(() => props.modelValue, (val) => {