vxe-pc-ui 4.16.17 → 4.16.18

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.16.17"}`;
+const uiVersion = `ui v${"4.16.18"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$h = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.16.17";
+const version = "4.16.18";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -2046,6 +2046,9 @@ function updatePanelPlacement(targetElem, panelElem, options) {
         placement: panelPlacement
     };
 }
+function getPopupContainer(appendTo) {
+    return appendTo ? ((XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo) || 'body') : 'body';
+}
 
 function assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink) {
     const staticLinks = $xeAnchor.reactData.staticLinks;
@@ -3691,6 +3694,7 @@ const VxeButtonComponent = defineVxeComponent({
             const downBtnList = computeDownBtnList.value;
             const popupOpts = computePopupOpts.value;
             const vSize = computeSize.value;
+            const { appendTo } = popupOpts;
             const dropdownsSlot = slots.dropdowns;
             const ppClassName = popupOpts.className || props.popupClassName;
             if (!permissionInfo.visible) {
@@ -3753,7 +3757,7 @@ const VxeButtonComponent = defineVxeComponent({
                             ]
                             : [])),
                     h(Teleport, {
-                        to: 'body',
+                        to: getPopupContainer(appendTo),
                         disabled: btnTransfer ? !initialized : true
                     }, [
                         h('div', Object.assign({ ref: refBtnPanel, class: ['vxe-button--dropdown-panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $button: $xeButton }) : ppClassName) : '', {
@@ -16813,6 +16817,8 @@ var VxeColorPickerComponent = defineVxeComponent({
             const isDisabled = computeIsDisabled.value;
             const btnTransfer = computeBtnTransfer.value;
             const formReadonly = computeFormReadonly.value;
+            const popupOpts = computePopupOpts.value;
+            const { appendTo } = popupOpts;
             if (formReadonly) {
                 return h('div', {
                     ref: refElem,
@@ -16854,7 +16860,7 @@ var VxeColorPickerComponent = defineVxeComponent({
                     })
                 ]),
                 h(Teleport, {
-                    to: 'body',
+                    to: getPopupContainer(appendTo),
                     disabled: btnTransfer ? !initialized : true
                 }, [
                     h('div', {
@@ -21170,6 +21176,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             const timeOpts = computeTimeOpts.value;
             const dateStartDate = computeDateStartDate.value;
             const dateEndDate = computeDateEndDate.value;
+            const { appendTo } = popupOpts;
             const { position } = shortcutOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -21182,7 +21189,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || multiple) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? (isClearable && showConfirmBtn && type !== 'time') : showClearButton);
             return h(Teleport, {
-                to: 'body',
+                to: getPopupContainer(appendTo),
                 disabled: btnTransfer ? !initialized : true
             }, [
                 h('div', {
@@ -22645,6 +22652,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             const defaultDates = computeDefaultDates.value;
             const defaultTimes = computeDefaultTimes.value;
             const timeOpts = computeTimeOpts.value;
+            const { appendTo } = popupOpts;
             const { startLabel, endLabel } = panelLabelObj;
             const { position } = shortcutOpts;
             const headerSlot = slots.header;
@@ -22660,7 +22668,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || !autoClose) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? isClearable : showClearButton);
             return h(Teleport, {
-                to: 'body',
+                to: getPopupContainer(appendTo),
                 disabled: btnTransfer ? !initialized : true
             }, [
                 h('div', {
@@ -23104,6 +23112,10 @@ var VxeDrawerComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().drawer.transfer
         },
+        appendTo: {
+            type: [String, Function],
+            default: () => getConfig$3().drawer.appendTo
+        },
         padding: {
             type: Boolean,
             default: () => getConfig$3().drawer.padding
@@ -23526,14 +23538,14 @@ var VxeDrawerComponent = defineVxeComponent({
             return renderEmptyElement($xeDrawer);
         };
         const renderVN = () => {
-            const { slots: propSlots = {}, className, position, loading, lockScroll, padding, lockView, mask, resize, destroyOnClose } = props;
+            const { slots: propSlots = {}, className, position, loading, lockScroll, padding, lockView, mask, resize, appendTo, destroyOnClose } = props;
             const { initialized, contentVisible, visible } = reactData;
             const asideSlot = slots.aside || propSlots.aside;
             const vSize = computeSize.value;
             const dragType = computeDragType.value;
             const btnTransfer = computeBtnTransfer.value;
             return h(Teleport, {
-                to: 'body',
+                to: getPopupContainer(appendTo),
                 disabled: btnTransfer ? !initialized : true
             }, [
                 h('div', {
@@ -26653,6 +26665,7 @@ var VxeIconPickerComponent = defineVxeComponent({
             const inpPlaceholder = computeInpPlaceholder.value;
             const wrapperStyle = computeWrapperStyle.value;
             const popupOpts = computePopupOpts.value;
+            const { appendTo } = popupOpts;
             const ppClassName = popupOpts.className || props.popupClassName;
             if (formReadonly) {
                 return h('div', {
@@ -26710,7 +26723,7 @@ var VxeIconPickerComponent = defineVxeComponent({
                     ])
                 ]),
                 h(Teleport, {
-                    to: 'body',
+                    to: getPopupContainer(appendTo),
                     disabled: btnTransfer ? !initialized : true
                 }, [
                     h('div', {
@@ -28505,7 +28518,11 @@ var VxeMenuComponent = defineVxeComponent({
             type: String,
             default: () => getConfig$1().menu.size || getConfig$1().size
         },
-        menuConfig: Object
+        menuConfig: Object,
+        appendTo: {
+            type: [String, Function],
+            default: () => getConfig$1().menu.appendTo
+        }
     },
     emits: [
         'update:modelValue',
@@ -29034,7 +29051,7 @@ var VxeMenuComponent = defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { loading, collapseFixed } = props;
+            const { loading, collapseFixed, appendTo } = props;
             const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData;
             const vSize = computeSize.value;
             const isCollapsed = computeIsCollapsed.value;
@@ -29073,7 +29090,7 @@ var VxeMenuComponent = defineVxeComponent({
                     }, footerSlot(stParams))
                     : renderEmptyElement($xeMenu),
                 h(Teleport, {
-                    to: 'body',
+                    to: getPopupContainer(appendTo),
                     disabled: !initialized
                 }, [
                     h('div', Object.assign({ ref: refCollapseElem, class: ['vxe-menu--collapse-wrapper', {
@@ -29317,6 +29334,10 @@ var VxeModalComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().modal.transfer
         },
+        appendTo: {
+            type: [String, Function],
+            default: () => getConfig$3().modal.appendTo
+        },
         storage: {
             type: Boolean,
             default: () => getConfig$3().modal.storage
@@ -30102,7 +30123,7 @@ var VxeModalComponent = defineVxeComponent({
             const { visibleHeight, visibleWidth } = getDomNode();
             const marginSize = XEUtils.toNumber(props.marginSize);
             const targetElem = evnt.target;
-            const type = targetElem.getAttribute('type');
+            const type = targetElem.getAttribute('data-type');
             const minWidth = XEUtils.toNumber(props.minWidth);
             const minHeight = XEUtils.toNumber(props.minHeight);
             const maxWidth = visibleWidth;
@@ -30464,7 +30485,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 } = props;
+            const { slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize, appendTo } = props;
             const { initialized, modalTop, contentVisible, visible, zoomStatus } = reactData;
             const asideSlot = slots.aside || propSlots.aside;
             const vSize = computeSize.value;
@@ -30477,7 +30498,7 @@ var VxeModalComponent = defineVxeComponent({
                 ons.onMouseout = selfMouseoutEvent;
             }
             return h(Teleport, {
-                to: 'body',
+                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}` : '', {
@@ -30533,7 +30554,7 @@ var VxeModalComponent = defineVxeComponent({
                                     }, ['wl', 'wr', 'swst', 'sest', 'st', 'swlb', 'selb', 'sb'].map(type => {
                                         return h('span', {
                                             class: `${type}-resize`,
-                                            type: type,
+                                            'data-type': type,
                                             onMousedown: dragEvent
                                         });
                                     }))
@@ -32512,6 +32533,7 @@ var VxeSelectComponent = defineVxeComponent({
             const inpPlaceholder = computeInpPlaceholder.value;
             const popupWrapperStyle = computePopupWrapperStyle.value;
             const popupOpts = computePopupOpts.value;
+            const { appendTo } = popupOpts;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -32571,7 +32593,7 @@ var VxeSelectComponent = defineVxeComponent({
                     }
                     : {}),
                 h(Teleport, {
-                    to: 'body',
+                    to: getPopupContainer(appendTo),
                     disabled: btnTransfer ? !initialized : true
                 }, [
                     h('div', {
@@ -38411,6 +38433,7 @@ var VxeTableSelectComponent = defineVxeComponent({
             const selectGridOpts = computeSelectGridOpts.value;
             const rowOpts = computeRowOpts.value;
             const popupWrapperStyle = computePopupWrapperStyle.value;
+            const { appendTo } = popupOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const prefixSlot = slots.prefix;
@@ -38456,7 +38479,7 @@ var VxeTableSelectComponent = defineVxeComponent({
                     }
                     : {}),
                 h(Teleport, {
-                    to: 'body',
+                    to: getPopupContainer(appendTo),
                     disabled: btnTransfer ? !initialized : true
                 }, [
                     h('div', {
@@ -44863,6 +44886,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             const footerSlot = slots.footer;
             const prefixSlot = slots.prefix;
             const popupOpts = computePopupOpts.value;
+            const { appendTo } = popupOpts;
             const ppClassName = popupOpts.className || props.popupClassName;
             if (formReadonly) {
                 return h('div', {
@@ -44935,7 +44959,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     }
                     : {}),
                 h(Teleport, {
-                    to: 'body',
+                    to: getPopupContainer(appendTo),
                     disabled: btnTransfer ? !initialized : true
                 }, [
                     h('div', {