vxe-pc-ui 4.20.24 → 4.20.26

package/lib/modal/src/modal.js

@@ -36,14 +36,14 @@ var import_comp = require("../../ui/src/comp");
 var import_xe_utils = __toESM(require("xe-utils"));
 var import_dom = require("../../ui/src/dom");
 var import_utils = require("../../ui/src/utils");
-var import_ui = require("../../ui");
+var import_core = require("@vxe-ui/core");
 var import_vn = require("../../ui/src/vn");
 var import_log = require("../../ui/src/log");
 var import_store = require("./store");
 var import_button = __toESM(require("../../button"));
 var import_loading = __toESM(require("../../loading"));
 var import_scrollbar = __toESM(require("../../scrollbar"));
-const { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } = import_ui.VxeUI;
+const { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } = import_core.VxeUI;
 const { warnLog, errLog } = (0, import_log.createComponentLog)("modal");
 function createInternalData() {
   return {
@@ -268,18 +268,7 @@ var modal_default = (0, import_comp.defineVxeComponent)({
       default: () => getConfig().modal.animat
     }
   },
-  emits: [
-    "update:modelValue",
-    "show",
-    "hide",
-    "before-hide",
-    "close",
-    "confirm",
-    "cancel",
-    "zoom",
-    "resize",
-    "move"
-  ],
+  emits: ["update:modelValue", "show", "hide", "before-hide", "close", "confirm", "cancel", "zoom", "resize", "move"],
   setup(props, context) {
     const { slots, emit } = context;
     const xID = import_xe_utils.default.uniqueId();
@@ -580,17 +569,7 @@ var modal_default = (0, import_comp.defineVxeComponent)({
           return;
         }
         const posStorageMap = getStorageMap(storageKey);
-        posStorageMap[id] = [
-          boxElem.style.left,
-          boxElem.style.top,
-          boxElem.clientWidth,
-          boxElem.clientHeight
-        ].concat(revertLocat ? [
-          revertLocat.left,
-          revertLocat.top,
-          revertLocat.width,
-          revertLocat.height
-        ] : []).map((val) => val ? import_xe_utils.default.toNumber(val) : "").join(",");
+        posStorageMap[id] = [boxElem.style.left, boxElem.style.top, boxElem.clientWidth, boxElem.clientHeight].concat(revertLocat ? [revertLocat.left, revertLocat.top, revertLocat.width, revertLocat.height] : []).map((val) => val ? import_xe_utils.default.toNumber(val) : "").join(",");
         localStorage.setItem(storageKey, import_xe_utils.default.toJSONString(posStorageMap));
       }
     };
@@ -614,8 +593,8 @@ var modal_default = (0, import_comp.defineVxeComponent)({
       });
       const mList = isHorizontalLayout ? hlMList : vlMList;
       if (minimizeMaxSize && mList.length >= minimizeMaxSize) {
-        if (import_ui.VxeUI.modal) {
-          import_ui.VxeUI.modal.message({
+        if (import_core.VxeUI.modal) {
+          import_core.VxeUI.modal.message({
             status: "error",
             content: getI18n("vxe.modal.miniMaxSize", [minimizeMaxSize])
           });
@@ -882,7 +861,10 @@ var modal_default = (0, import_comp.defineVxeComponent)({
     const handleGlobalKeydownEvent = (evnt) => {
       const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
       if (isEsc) {
-        const lastModal = import_xe_utils.default.max(import_store.allActiveModals.filter((item) => item.reactData.zoomStatus !== "minimize"), (item) => item.reactData.modalZindex);
+        const lastModal = import_xe_utils.default.max(
+          import_store.allActiveModals.filter((item) => item.reactData.zoomStatus !== "minimize"),
+          (item) => item.reactData.modalZindex
+        );
         if (lastModal) {
           setTimeout(() => {
             if (lastModal === $xeModal && lastModal.props.escClosable) {
@@ -1277,47 +1259,73 @@ var modal_default = (0, import_comp.defineVxeComponent)({
       const isMinimizeStatus = computeIsMinimizeStatus.value;
       const isMaximizeStatus = computeIsMaximizeStatus.value;
       return [
-        (0, import_vue.h)("div", {
-          class: "vxe-modal--header-title"
-        }, titleSlot ? (0, import_vn.getSlotVNs)(titleSlot({
-          $modal: $xeModal,
-          minimized: isMinimizeStatus,
-          maximized: isMaximizeStatus
-        })) : title ? (0, import_utils.getFuncText)(title) : getI18n("vxe.alert.title")),
-        (0, import_vue.h)("div", {
-          class: "vxe-modal--header-right"
-        }, [
-          cornerSlot && !isMinimizeStatus ? (0, import_vue.h)("div", {
-            class: "vxe-modal--corner-wrapper"
-          }, (0, import_vn.getSlotVNs)(cornerSlot({ $modal: $xeModal }))) : renderEmptyElement($xeModal),
-          (import_xe_utils.default.isBoolean(showMinimize) ? showMinimize : showZoom) ? (0, import_vue.h)("div", {
-            class: ["vxe-modal--zoom-btn", "trigger--btn"],
-            title: getI18n(`vxe.modal.zoom${zoomStatus === "minimize" ? "Out" : "Min"}`),
-            onClick: toggleZoomMinEvent
-          }, [
-            (0, import_vue.h)("i", {
-              class: zoomStatus === "minimize" ? getIcon().MODAL_ZOOM_REVERT : getIcon().MODAL_ZOOM_MIN
-            })
-          ]) : renderEmptyElement($xeModal),
-          (import_xe_utils.default.isBoolean(showMaximize) ? showMaximize : showZoom) && zoomStatus !== "minimize" ? (0, import_vue.h)("div", {
-            class: ["vxe-modal--zoom-btn", "trigger--btn"],
-            title: getI18n(`vxe.modal.zoom${zoomStatus === "maximize" ? "Out" : "In"}`),
-            onClick: toggleZoomMaxEvent
-          }, [
-            (0, import_vue.h)("i", {
-              class: zoomStatus === "maximize" ? getIcon().MODAL_ZOOM_OUT : getIcon().MODAL_ZOOM_IN
-            })
-          ]) : renderEmptyElement($xeModal),
-          showClose ? (0, import_vue.h)("div", {
-            class: ["vxe-modal--close-btn", "trigger--btn"],
-            title: getI18n("vxe.modal.close"),
-            onClick: closeEvent
-          }, [
-            (0, import_vue.h)("i", {
-              class: getIcon().MODAL_CLOSE
+        (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-modal--header-title"
+          },
+          titleSlot ? (0, import_vn.getSlotVNs)(
+            titleSlot({
+              $modal: $xeModal,
+              minimized: isMinimizeStatus,
+              maximized: isMaximizeStatus
             })
-          ]) : renderEmptyElement($xeModal)
-        ])
+          ) : title ? (0, import_utils.getFuncText)(title) : getI18n("vxe.alert.title")
+        ),
+        (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-modal--header-right"
+          },
+          [
+            cornerSlot && !isMinimizeStatus ? (0, import_vue.h)(
+              "div",
+              {
+                class: "vxe-modal--corner-wrapper"
+              },
+              (0, import_vn.getSlotVNs)(cornerSlot({ $modal: $xeModal }))
+            ) : renderEmptyElement($xeModal),
+            (import_xe_utils.default.isBoolean(showMinimize) ? showMinimize : showZoom) ? (0, import_vue.h)(
+              "div",
+              {
+                class: ["vxe-modal--zoom-btn", "trigger--btn"],
+                title: getI18n(`vxe.modal.zoom${zoomStatus === "minimize" ? "Out" : "Min"}`),
+                onClick: toggleZoomMinEvent
+              },
+              [
+                (0, import_vue.h)("i", {
+                  class: zoomStatus === "minimize" ? getIcon().MODAL_ZOOM_REVERT : getIcon().MODAL_ZOOM_MIN
+                })
+              ]
+            ) : renderEmptyElement($xeModal),
+            (import_xe_utils.default.isBoolean(showMaximize) ? showMaximize : showZoom) && zoomStatus !== "minimize" ? (0, import_vue.h)(
+              "div",
+              {
+                class: ["vxe-modal--zoom-btn", "trigger--btn"],
+                title: getI18n(`vxe.modal.zoom${zoomStatus === "maximize" ? "Out" : "In"}`),
+                onClick: toggleZoomMaxEvent
+              },
+              [
+                (0, import_vue.h)("i", {
+                  class: zoomStatus === "maximize" ? getIcon().MODAL_ZOOM_OUT : getIcon().MODAL_ZOOM_IN
+                })
+              ]
+            ) : renderEmptyElement($xeModal),
+            showClose ? (0, import_vue.h)(
+              "div",
+              {
+                class: ["vxe-modal--close-btn", "trigger--btn"],
+                title: getI18n("vxe.modal.close"),
+                onClick: closeEvent
+              },
+              [
+                (0, import_vue.h)("i", {
+                  class: getIcon().MODAL_CLOSE
+                })
+              ]
+            ) : renderEmptyElement($xeModal)
+          ]
+        )
       ];
     };
     const renderHeader = () => {
@@ -1331,13 +1339,20 @@ var modal_default = (0, import_comp.defineVxeComponent)({
         if ((import_xe_utils.default.isBoolean(showMaximize) ? showMaximize : showZoom) && props.dblclickZoom && props.type === "modal") {
           headerOns.onDblclick = toggleZoomMaxEvent;
         }
-        return (0, import_vue.h)("div", {
-          ref: refHeaderElem,
-          class: ["vxe-modal--header", {
-            "is--ellipsis": props.showTitleOverflow
-          }],
-          ...headerOns
-        }, headerSlot ? (0, import_vn.getSlotVNs)(headerSlot({ $modal: $xeModal })) : renderTitles());
+        return (0, import_vue.h)(
+          "div",
+          {
+            ref: refHeaderElem,
+            class: [
+              "vxe-modal--header",
+              {
+                "is--ellipsis": props.showTitleOverflow
+              }
+            ],
+            ...headerOns
+          },
+          headerSlot ? (0, import_vn.getSlotVNs)(headerSlot({ $modal: $xeModal })) : renderTitles()
+        );
       }
       return renderEmptyElement($xeModal);
     };
@@ -1353,31 +1368,39 @@ var modal_default = (0, import_comp.defineVxeComponent)({
       const contVNs = [];
       if (!isMsg && (status || iconStatus)) {
         contVNs.push(
-          (0, import_vue.h)("div", {
-            class: "vxe-modal--status-wrapper"
-          }, [
-            (0, import_vue.h)("i", {
-              class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
-            })
-          ])
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-modal--status-wrapper"
+            },
+            [
+              (0, import_vue.h)("i", {
+                class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
+              })
+            ]
+          )
         );
       }
       if (useHtml && !defaultSlot) {
         contVNs.push(
-          isVScrollbar ? (0, import_vue.h)(import_scrollbar.default, {
-            key: "shc",
-            class: "vxe-modal--scrollbar-content",
-            ...scrollbarProps
-          }, {
-            default() {
-              return [
-                (0, import_vue.h)("div", {
-                  class: "vxe-modal--scrollbar-content-html",
-                  innerHTML: (0, import_utils.getFuncText)(content)
-                })
-              ];
+          isVScrollbar ? (0, import_vue.h)(
+            import_scrollbar.default,
+            {
+              key: "shc",
+              class: "vxe-modal--scrollbar-content",
+              ...scrollbarProps
+            },
+            {
+              default() {
+                return [
+                  (0, import_vue.h)("div", {
+                    class: "vxe-modal--scrollbar-content-html",
+                    innerHTML: (0, import_utils.getFuncText)(content)
+                  })
+                ];
+              }
             }
-          }) : (0, import_vue.h)("div", {
+          ) : (0, import_vue.h)("div", {
             key: "hc",
             class: "vxe-modal--content",
             innerHTML: (0, import_utils.getFuncText)(content)
@@ -1385,35 +1408,59 @@ var modal_default = (0, import_comp.defineVxeComponent)({
         );
       } else {
         contVNs.push(
-          isVScrollbar ? (0, import_vue.h)(import_scrollbar.default, {
-            key: "sdc",
-            class: "vxe-modal--scrollbar-content",
-            ...scrollbarProps
-          }, {
-            default: () => defaultSlot ? (0, import_vn.getSlotVNs)(defaultSlot({ $modal: $xeModal })) : (0, import_utils.getFuncText)(content)
-          }) : (0, import_vue.h)("div", {
-            key: "dc",
-            class: "vxe-modal--content"
-          }, defaultSlot ? (0, import_vn.getSlotVNs)(defaultSlot({ $modal: $xeModal })) : (0, import_utils.getFuncText)(content))
+          isVScrollbar ? (0, import_vue.h)(
+            import_scrollbar.default,
+            {
+              key: "sdc",
+              class: "vxe-modal--scrollbar-content",
+              ...scrollbarProps
+            },
+            {
+              default: () => defaultSlot ? (0, import_vn.getSlotVNs)(defaultSlot({ $modal: $xeModal })) : (0, import_utils.getFuncText)(content)
+            }
+          ) : (0, import_vue.h)(
+            "div",
+            {
+              key: "dc",
+              class: "vxe-modal--content"
+            },
+            defaultSlot ? (0, import_vn.getSlotVNs)(defaultSlot({ $modal: $xeModal })) : (0, import_utils.getFuncText)(content)
+          )
         );
       }
-      return (0, import_vue.h)("div", {
-        class: "vxe-modal--body"
-      }, [
-        leftSlot ? (0, import_vue.h)("div", {
-          class: "vxe-modal--body-left"
-        }, (0, import_vn.getSlotVNs)(leftSlot({ $modal: $xeModal }))) : renderEmptyElement($xeModal),
-        (0, import_vue.h)("div", {
-          class: "vxe-modal--body-default"
-        }, contVNs),
-        rightSlot ? (0, import_vue.h)("div", {
-          class: "vxe-modal--body-right"
-        }, (0, import_vn.getSlotVNs)(rightSlot({ $modal: $xeModal }))) : renderEmptyElement($xeModal),
-        isMsg ? renderEmptyElement($xeModal) : (0, import_vue.h)(import_loading.default, {
-          class: "vxe-modal--loading",
-          modelValue: props.loading
-        })
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: "vxe-modal--body"
+        },
+        [
+          leftSlot ? (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-modal--body-left"
+            },
+            (0, import_vn.getSlotVNs)(leftSlot({ $modal: $xeModal }))
+          ) : renderEmptyElement($xeModal),
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-modal--body-default"
+            },
+            contVNs
+          ),
+          rightSlot ? (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-modal--body-right"
+            },
+            (0, import_vn.getSlotVNs)(rightSlot({ $modal: $xeModal }))
+          ) : renderEmptyElement($xeModal),
+          isMsg ? renderEmptyElement($xeModal) : (0, import_vue.h)(import_loading.default, {
+            class: "vxe-modal--loading",
+            modelValue: props.loading
+          })
+        ]
+      );
     };
     const renderDefaultFooter = () => {
       const { slots: propSlots = {}, showCancelButton, showConfirmButton, type, loading } = props;
@@ -1442,24 +1489,40 @@ var modal_default = (0, import_comp.defineVxeComponent)({
           })
         );
       }
-      return (0, import_vue.h)("div", {
-        class: "vxe-modal--footer-wrapper"
-      }, [
-        (0, import_vue.h)("div", {
-          class: "vxe-modal--footer-left"
-        }, lfSlot ? (0, import_vn.getSlotVNs)(lfSlot({ $modal: $xeModal })) : []),
-        (0, import_vue.h)("div", {
-          class: "vxe-modal--footer-right"
-        }, rfSlot ? (0, import_vn.getSlotVNs)(rfSlot({ $modal: $xeModal })) : btnVNs)
-      ]);
+      return (0, import_vue.h)(
+        "div",
+        {
+          class: "vxe-modal--footer-wrapper"
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-modal--footer-left"
+            },
+            lfSlot ? (0, import_vn.getSlotVNs)(lfSlot({ $modal: $xeModal })) : []
+          ),
+          (0, import_vue.h)(
+            "div",
+            {
+              class: "vxe-modal--footer-right"
+            },
+            rfSlot ? (0, import_vn.getSlotVNs)(rfSlot({ $modal: $xeModal })) : btnVNs
+          )
+        ]
+      );
     };
     const renderFooter = () => {
       const { slots: propSlots = {} } = props;
       const footerSlot = slots.footer || propSlots.footer;
       if (props.showFooter) {
-        return (0, import_vue.h)("div", {
-          class: "vxe-modal--footer"
-        }, footerSlot ? (0, import_vn.getSlotVNs)(footerSlot({ $modal: $xeModal })) : [renderDefaultFooter()]);
+        return (0, import_vue.h)(
+          "div",
+          {
+            class: "vxe-modal--footer"
+          },
+          footerSlot ? (0, import_vn.getSlotVNs)(footerSlot({ $modal: $xeModal })) : [renderDefaultFooter()]
+        );
       }
       return renderEmptyElement($xeModal);
     };
@@ -1476,85 +1539,120 @@ var modal_default = (0, import_comp.defineVxeComponent)({
         ons.onMouseover = selfMouseoverEvent;
         ons.onMouseout = selfMouseoutEvent;
       }
-      return (0, import_vue.h)(import_vue.Teleport, {
-        to: (0, import_dom.getPopupContainer)(appendTo),
-        disabled: btnTransfer ? !initialized : true
-      }, [
-        (0, import_vue.h)("div", {
-          ref: refElem,
-          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,
-            "is--border": border,
-            "is--title-bg": showTitleBackground,
-            "is--animat": animat,
-            "lock--scroll": lockScroll,
-            "lock--view": lockView,
-            "is--draggable": draggable,
-            "is--resize": resize,
-            "is--mask": mask,
-            "is--visible": contentVisible,
-            "is--active": visible,
-            "is--loading": loading
-          }],
-          style: {
-            zIndex: reactData.modalZindex,
-            top: modalTop ? `${modalTop}px` : null
-          },
-          onClick: selfClickEvent,
-          ...ons
-        }, [
-          (0, import_vue.h)("div", {
-            ref: refModalBox,
-            class: "vxe-modal--box",
-            onMousedown: boxMousedownEvent
-          }, [
-            (isMsg || asideSlot) && !isMinimizeStatus ? (0, import_vue.h)(
-              "div",
-              {
-                class: "vxe-modal--aside"
+      return (0, import_vue.h)(
+        import_vue.Teleport,
+        {
+          to: (0, import_dom.getPopupContainer)(appendTo),
+          disabled: btnTransfer ? !initialized : true
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              ref: refElem,
+              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,
+                  "is--border": border,
+                  "is--title-bg": showTitleBackground,
+                  "is--animat": animat,
+                  "lock--scroll": lockScroll,
+                  "lock--view": lockView,
+                  "is--draggable": draggable,
+                  "is--resize": resize,
+                  "is--mask": mask,
+                  "is--visible": contentVisible,
+                  "is--active": visible,
+                  "is--loading": loading
+                }
+              ],
+              style: {
+                zIndex: reactData.modalZindex,
+                top: modalTop ? `${modalTop}px` : null
               },
-              asideSlot ? (0, import_vn.getSlotVNs)(asideSlot({ $modal: $xeModal })) : [
-                status || iconStatus ? (0, import_vue.h)("div", {
-                  class: "vxe-modal--status-wrapper"
-                }, [
-                  (0, import_vue.h)("i", {
-                    class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
-                  })
-                ]) : renderEmptyElement($xeModal)
-              ]
-            ) : renderEmptyElement($xeModal),
-            (0, import_vue.h)("div", {
-              class: "vxe-modal--container"
-            }, !reactData.initialized || destroyOnClose && !reactData.visible ? [] : [
-              renderHeader(),
-              renderBody(),
-              renderFooter(),
-              !isMsg && resize ? (0, import_vue.h)("span", {
-                class: "vxe-modal--resize"
-              }, ["wl", "wr", "swst", "sest", "st", "swlb", "selb", "sb"].map((type2) => {
-                return (0, import_vue.h)("span", {
-                  class: `${type2}-resize`,
-                  "data-type": type2,
-                  onMousedown: dragEvent
-                });
-              })) : renderEmptyElement($xeModal)
-            ])
-          ])
-        ])
-      ]);
+              onClick: selfClickEvent,
+              ...ons
+            },
+            [
+              (0, import_vue.h)(
+                "div",
+                {
+                  ref: refModalBox,
+                  class: "vxe-modal--box",
+                  onMousedown: boxMousedownEvent
+                },
+                [
+                  (isMsg || asideSlot) && !isMinimizeStatus ? (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-modal--aside"
+                    },
+                    asideSlot ? (0, import_vn.getSlotVNs)(asideSlot({ $modal: $xeModal })) : [
+                      status || iconStatus ? (0, import_vue.h)(
+                        "div",
+                        {
+                          class: "vxe-modal--status-wrapper"
+                        },
+                        [
+                          (0, import_vue.h)("i", {
+                            class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
+                          })
+                        ]
+                      ) : renderEmptyElement($xeModal)
+                    ]
+                  ) : renderEmptyElement($xeModal),
+                  (0, import_vue.h)(
+                    "div",
+                    {
+                      class: "vxe-modal--container"
+                    },
+                    !reactData.initialized || destroyOnClose && !reactData.visible ? [] : [
+                      renderHeader(),
+                      renderBody(),
+                      renderFooter(),
+                      !isMsg && resize ? (0, import_vue.h)(
+                        "span",
+                        {
+                          class: "vxe-modal--resize"
+                        },
+                        ["wl", "wr", "swst", "sest", "st", "swlb", "selb", "sb"].map((type2) => {
+                          return (0, import_vue.h)("span", {
+                            class: `${type2}-resize`,
+                            "data-type": type2,
+                            onMousedown: dragEvent
+                          });
+                        })
+                      ) : renderEmptyElement($xeModal)
+                    ]
+                  )
+                ]
+              )
+            ]
+          )
+        ]
+      );
     };
     $xeModal.renderVN = renderVN;
     (0, import_vue.watch)(() => props.width, recalculate);
     (0, import_vue.watch)(() => props.height, recalculate);
-    (0, import_vue.watch)(() => props.modelValue, (value) => {
-      if (value) {
-        openModal();
-      } else {
-        closeModal("model");
+    (0, import_vue.watch)(
+      () => props.modelValue,
+      (value) => {
+        if (value) {
+          openModal();
+        } else {
+          closeModal("model");
+        }
       }
-    });
+    );
     (0, import_vue.onMounted)(() => {
       if (props.type === "modal" && props.showFooter && !(props.showConfirmButton || props.showCancelButton || slots.footer)) {
         warnLog("vxe.modal.footPropErr");