ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/ele-modal/util.js

@@ -1,24 +1,7 @@
-import { unref } from "vue";
 import { queryChild, getCurrentStyle } from "../utils/common";
-import { useMoveEvent } from "../utils/hook";
 const containerClass = "ele-modal-container";
 const wrapperClass = "ele-modal";
 const closedClass = "ele-modal-closed";
-const fixTop = 0.65;
-const fixLeft = 0.65;
-function getModalEl(dialogRef) {
-  var _a, _b;
-  const el = (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
-  return el;
-}
-function initModalStyle(modalEl) {
-  modalEl.style.top = modalEl.offsetTop + "px";
-  modalEl.style.left = modalEl.offsetLeft + "px";
-  modalEl.style.right = "auto";
-  modalEl.style.bottom = "auto";
-  modalEl.style.position = "absolute";
-  modalEl.style.margin = "0";
-}
 function canMoveOut(moveOut, direction) {
   if (direction && moveOut != null && Array.isArray(moveOut)) {
     return moveOut.includes(direction);
@@ -42,260 +25,44 @@ function getModalContainer(inner, multiple, appendTo, modalsEl) {
   }
   return appendTo || "body";
 }
-function useModalMove(dialogRef, props, isFullscreen) {
-  let modalEl = null;
-  let wrapEl = null;
-  let downOL = null;
-  let downOT = null;
-  const { handleMousedown, handleTouchstart } = useMoveEvent({
-    start: () => {
-      modalEl = getModalEl(dialogRef);
-      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
-      if (!modalEl || !wrapEl || !props.draggable || isFullscreen.value) {
-        return;
-      }
-      modalEl.style.userSelect = "none";
-      initModalStyle(modalEl);
-      downOL = modalEl.offsetLeft;
-      downOT = modalEl.offsetTop;
-    },
-    move: ({ distanceX, distanceY, e }) => {
-      if (!modalEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
-        return;
-      }
-      e.preventDefault();
-      let positionLeft = distanceX + downOL;
-      let positionTop = distanceY + downOT;
-      const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
-      const limitT = wrapEl.clientHeight - modalEl.clientHeight - fixTop;
-      if (!props.moveOut) {
-        if (positionLeft < 0) {
-          positionLeft = 0;
-        } else if (positionLeft > limitL) {
-          positionLeft = limitL;
-        }
-        if (positionTop > limitT) {
-          positionTop = limitT;
-        }
-        if (positionTop < 0) {
-          positionTop = 0;
-        }
-      } else {
-        if (!canMoveOut(props.moveOut, "left") && positionLeft < 0) {
-          positionLeft = 0;
-        }
-        if (!canMoveOut(props.moveOut, "right") && positionLeft > limitL) {
-          positionLeft = limitL;
-        }
-        if (!canMoveOut(props.moveOut, "bottom") && positionTop > limitT) {
-          positionTop = limitT;
-        }
-        if (!canMoveOut(props.moveOut, "top") && positionTop < 0) {
-          positionTop = 0;
-        }
-        const minLimitL = wrapEl.clientWidth - 48;
-        if (positionLeft > minLimitL) {
-          positionLeft = minLimitL;
-        }
-        const minLimitT = wrapEl.clientHeight - 48;
-        if (props.multiple && positionTop > minLimitT) {
-          positionTop = minLimitT;
-        }
-      }
-      modalEl.style.left = `${Math.floor(positionLeft)}px`;
-      modalEl.style.top = `${Math.floor(positionTop)}px`;
-    },
-    end: () => {
-      if (modalEl) {
-        modalEl.style.userSelect = "";
-      }
-      downOL = null;
-      downOT = null;
-      modalEl = null;
-      wrapEl = null;
-    },
-    touchmoveOptions: { passive: false }
-  });
-  return {
-    handleHeaderMousedown: handleMousedown,
-    handleHeaderTouchstart: handleTouchstart
-  };
-}
-function useModalResize(dialogRef, props, isFullscreen) {
-  let modalEl = null;
-  let wrapEl = null;
-  let downW = null;
-  let downH = null;
-  const { handleMousedown, handleTouchstart } = useMoveEvent({
-    start: () => {
-      modalEl = getModalEl(dialogRef);
-      wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
-      if (!modalEl || !wrapEl || !props.resizable || isFullscreen.value) {
-        return;
-      }
-      modalEl.style.userSelect = "none";
-      initModalStyle(modalEl);
-      downW = modalEl.clientWidth;
-      downH = modalEl.clientHeight;
-    },
-    move: ({ distanceX, distanceY, e }) => {
-      if (!modalEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
-        return;
-      }
-      e.preventDefault();
-      if (props.resizable !== "vertical") {
-        const w = distanceX + downW;
-        const maxW = wrapEl.clientWidth - modalEl.offsetLeft - fixLeft;
-        const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
-        modalEl.style.width = nw;
-        modalEl.style.maxWidth = nw;
-        modalEl.style.minWidth = nw;
-      }
-      if (props.resizable !== "horizontal") {
-        const h = distanceY + downH;
-        const maxH = wrapEl.clientHeight - modalEl.offsetTop - fixTop;
-        const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
-        modalEl.style.height = nh;
-        modalEl.style.maxHeight = nh;
-        modalEl.style.minHeight = nh;
-      }
-    },
-    end: () => {
-      if (modalEl) {
-        modalEl.style.userSelect = "";
-      }
-      downW = null;
-      downH = null;
-      modalEl = null;
-      wrapEl = null;
-    },
-    touchmoveOptions: { passive: false }
-  });
-  return {
-    handleResizeMousedown: handleMousedown,
-    handleResizeTouchstart: handleTouchstart
-  };
+function getPositionMargin(position) {
+  if (position == null || typeof position !== "object" || position.top == null && position.right == null && position.bottom == null && position.left == null) {
+    return;
+  }
+  return [position.top, position.right, position.bottom, position.left].map((p) => typeof p === "number" ? `${p}px` : p || "auto").join(" ");
 }
-function useModalEvent(dialogRef, props, isFullscreen) {
-  const { handleHeaderMousedown, handleHeaderTouchstart } = useModalMove(
-    dialogRef,
-    props,
-    isFullscreen
-  );
-  const { handleResizeMousedown, handleResizeTouchstart } = useModalResize(
-    dialogRef,
-    props,
-    isFullscreen
-  );
-  let isInitPosition = true;
-  const getZIndex = () => {
-    return props.zIndex ?? 2e3;
-  };
-  const topModal = (el) => {
-    var _a;
-    const modalEl = el ?? getModalEl(dialogRef);
-    const overlayEl = (_a = modalEl == null ? void 0 : modalEl.parentElement) == null ? void 0 : _a.parentElement;
-    if (!overlayEl) {
-      return;
-    }
-    const currentIndex = getCurrentStyle(overlayEl).zIndex;
-    const containerEl = overlayEl.parentElement;
-    const cls = `.${wrapperClass}:not(.${closedClass})`;
-    const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
-    let maxIndex = 0;
-    (modals ? Array.from(modals) : []).forEach((modalEl2) => {
-      const zIndex = getCurrentStyle(modalEl2).zIndex;
-      if (zIndex != null) {
-        const index = Number(zIndex);
-        if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
-          maxIndex = index + 1;
-        }
-      }
-    });
-    if (maxIndex > Number(currentIndex || getZIndex() || 0)) {
-      overlayEl.style.zIndex = String(maxIndex);
-    }
-  };
-  const mousedownListener = (event) => {
-    if (props.multiple) {
-      topModal(event.currentTarget);
-    }
-  };
-  const bindAutoTopEvent = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      modalEl.addEventListener("mousedown", mousedownListener);
-      modalEl.addEventListener("touchstart", mousedownListener);
-    }
-  };
-  const unbindAutoTopEvent = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      modalEl.removeEventListener("mousedown", mousedownListener);
-      modalEl.removeEventListener("touchstart", mousedownListener);
-    }
-  };
-  const getPositionMargin = (position) => {
-    if (position == null || typeof position !== "object" || position.top == null && position.right == null && position.bottom == null && position.left == null) {
-      return;
-    }
-    return [position.top, position.right, position.bottom, position.left].map((p) => typeof p === "number" ? `${p}px` : p || "auto").join(" ");
-  };
-  const getPosition = () => {
-    if (props.alignCenter) {
-      return "center";
-    }
-    if (props.top != null && props.top !== "") {
-      return { top: props.top };
-    }
-    return props.position;
-  };
-  const setInitPosition = () => {
-    if (isInitPosition) {
-      isInitPosition = false;
-      const modalEl = getModalEl(dialogRef);
-      const margin = getPositionMargin(getPosition());
-      if (modalEl && margin != null) {
-        modalEl.style.margin = margin;
+function getMaxZIndex(modalEl, defaultZIndex) {
+  if (!modalEl) {
+    return;
+  }
+  const overlayEl = modalEl.parentElement?.parentElement;
+  if (!overlayEl) {
+    return;
+  }
+  const currentIndex = getCurrentStyle(overlayEl).zIndex;
+  const containerEl = overlayEl.parentElement;
+  const cls = `.${wrapperClass}:not(.${closedClass})`;
+  const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
+  let maxIndex = 0;
+  (modals ? Array.from(modals) : []).forEach((modalEl2) => {
+    const zIndex = getCurrentStyle(modalEl2).zIndex;
+    if (zIndex != null) {
+      const index = Number(zIndex);
+      if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
+        maxIndex = index + 1;
       }
     }
-  };
-  const resetModalStyle = () => {
-    const modalEl = getModalEl(dialogRef);
-    if (modalEl) {
-      const w = props.width;
-      modalEl.style.margin = getPositionMargin(getPosition()) || "";
-      modalEl.style.position = "";
-      modalEl.style.top = "";
-      modalEl.style.left = "";
-      modalEl.style.right = "";
-      modalEl.style.bottom = "";
-      modalEl.style.height = "";
-      modalEl.style.maxHeight = "";
-      modalEl.style.minHeight = "";
-      modalEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
-      modalEl.style.maxWidth = "";
-      modalEl.style.minWidth = "";
-    }
-  };
-  return {
-    handleHeaderMousedown,
-    handleHeaderTouchstart,
-    handleResizeMousedown,
-    handleResizeTouchstart,
-    bindAutoTopEvent,
-    unbindAutoTopEvent,
-    topModal,
-    setInitPosition,
-    resetModalStyle
-  };
+  });
+  if (maxIndex > Number(currentIndex || (defaultZIndex ?? 2e3) || 0)) {
+    return maxIndex;
+  }
 }
 export {
+  canMoveOut,
   closedClass,
   containerClass,
+  getMaxZIndex,
   getModalContainer,
-  useModalEvent,
-  useModalMove,
-  useModalResize,
+  getPositionMargin,
   wrapperClass
 };

package/es/ele-modal-render/components/item-render.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { ModalItem, ModalItemId } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<ModalItem>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    removeItem: (_modalId?: ModalItemId | undefined) => void;
+    updateItemVisible: (_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => void;
+    updateItemProps: (_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<ModalItem>;
+        required: true;
+    };
+}>> & Readonly<{
+    onRemoveItem?: ((_modalId?: ModalItemId | undefined) => any) | undefined;
+    onUpdateItemVisible?: ((_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => any) | undefined;
+    onUpdateItemProps?: ((_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-modal-render/components/item-render.js

@@ -0,0 +1,115 @@
+import { defineComponent, computed, provide, createElementBlock, createBlock, openBlock, Fragment, createCommentVNode, resolveDynamicComponent, normalizeProps, mergeProps, createSlots, renderList, withCtx, renderSlot, guardReactiveProps } from "vue";
+import EleModal from "../../ele-modal/index";
+import EleDrawer from "../../ele-drawer/index";
+import { MODAL_HOLDER_KEY } from "../util";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ItemRender" },
+  __name: "item-render",
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    removeItem: (_modalId) => true,
+    updateItemVisible: (_modalId, _visible) => true,
+    updateItemProps: (_modalId, _opt) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleClosed = () => {
+      emit("removeItem", props.item.modalId);
+    };
+    const handleUpdateItemVisible = (visible) => {
+      emit("updateItemVisible", props.item.modalId, visible);
+    };
+    const setModalProps = (option) => {
+      emit("updateItemProps", props.item.modalId, option);
+    };
+    const closeModal = () => {
+      handleUpdateItemVisible(false);
+    };
+    const modalProps = computed(
+      () => {
+        return {
+          ...props.item.props || {},
+          isDeactivated: props.item.isDeactivated,
+          compLoading: props.item.compLoading,
+          modelValue: props.item.visible,
+          "onUpdate:modelValue": handleUpdateItemVisible,
+          onClosed: handleClosed
+        };
+      }
+    );
+    provide(MODAL_HOLDER_KEY, {
+      modalProps,
+      setModalProps,
+      closeModal
+    });
+    return (_ctx, _cache) => {
+      return __props.item.custom ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        __props.item.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.item.component), normalizeProps(mergeProps({ key: 0 }, __props.item.componentProps || {})), createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040)) : createCommentVNode("", true)
+      ], 64)) : __props.item.type === "drawer" ? (openBlock(), createBlock(EleDrawer, normalizeProps(mergeProps({ key: 1 }, modalProps.value || {})), createSlots({
+        default: withCtx(() => [
+          __props.item.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.item.component), normalizeProps(mergeProps({ key: 0 }, __props.item.componentProps || {})), createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1040)) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040)) : (openBlock(), createBlock(EleModal, normalizeProps(mergeProps({ key: 2 }, modalProps.value || {})), createSlots({
+        default: withCtx(() => [
+          __props.item.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.item.component), normalizeProps(mergeProps({ key: 0 }, __props.item.componentProps || {})), createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1040)) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-modal-render/components/modal-loading.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/ele-modal-render/components/modal-loading.js

@@ -0,0 +1,20 @@
+import { defineComponent, createBlock, openBlock, Teleport, createVNode } from "vue";
+import LoadingSpinner from "../../ele-loading/components/loading-spinner";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ModalLoading", inheritAttrs: false },
+  __name: "modal-loading",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(LoadingSpinner, {
+          plain: true,
+          loading: true,
+          class: "ele-modal-render-loading"
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-modal-render/index.d.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { ModalItem, ModalItemId } from './types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modals: PropType<ModalItem[]>;
+}>, () => any[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    removeItem: (_modalId?: ModalItemId) => true;
+    updateItemVisible: (_modalId?: ModalItemId, _visible?: boolean) => true;
+    updateItemProps: (_modalId?: ModalItemId, _opt?: Record<string, any>) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modals: PropType<ModalItem[]>;
+}>> & Readonly<{
+    onRemoveItem?: ((_modalId?: ModalItemId | undefined) => any) | undefined;
+    onUpdateItemVisible?: ((_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => any) | undefined;
+    onUpdateItemProps?: ((_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/ele-modal-render/index.js

@@ -0,0 +1,41 @@
+import { defineComponent, createVNode } from "vue";
+import ItemRender from "./components/item-render";
+const index = /* @__PURE__ */ defineComponent({
+  name: "EleModalRender",
+  props: {
+    modals: Array
+  },
+  emits: {
+    removeItem: (_modalId) => true,
+    updateItemVisible: (_modalId, _visible) => true,
+    updateItemProps: (_modalId, _opt) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const handleRemoveItem = (modalId) => {
+      emit("removeItem", modalId);
+    };
+    const handleUpdateItemVisible = (modalId, visible) => {
+      emit("updateItemVisible", modalId, visible);
+    };
+    const handleUpdateItemProps = (modalId, opt) => {
+      emit("updateItemProps", modalId, opt);
+    };
+    const renderModal = (item) => {
+      return createVNode(ItemRender, {
+        "key": item.modalId,
+        "item": item,
+        "onRemoveItem": handleRemoveItem,
+        "onUpdateItemVisible": handleUpdateItemVisible,
+        "onUpdateItemProps": handleUpdateItemProps
+      }, {
+        ...item.slots || {}
+      });
+    };
+    return () => (props.modals || []).map((item) => renderModal(item));
+  }
+});
+export {
+  index as default
+};

package/es/ele-modal-render/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-modal-render/style/index.js

@@ -0,0 +1,4 @@
+import "../../ele-modal/style/index";
+import "../../ele-drawer/style/index";
+import "../../ele-loading/style/index";
+import "./index.scss";

package/es/ele-modal-render/style/index.scss

@@ -0,0 +1,6 @@
+@use '../../style/util.scss' as *;
+
+body > .ele-modal-render-loading.ele-loading {
+  position: fixed;
+  background: none;
+}

package/es/ele-modal-render/types.d.ts

@@ -0,0 +1,119 @@
+import type { Ref, AsyncComponentLoader, AsyncComponentOptions } from 'vue';
+import type { UserComponent, SlotObject } from '../ele-app/types';
+import type {
+  EleModalPropsAndEmits,
+  EleDrawerPropsAndEmits
+} from '../ele-app/plus';
+
+/**
+ * 弹窗类型
+ */
+export type ModalItemType = 'modal' | 'drawer';
+
+/**
+ * 弹窗 id
+ */
+export type ModalItemId = string | number;
+
+/**
+ * 弹窗数据配置
+ */
+export interface ModalItemOption<T extends ModalItemType> {
+  /** 弹窗类型 */
+  type?: T;
+  /** 弹窗内容组件 */
+  component?: UserComponent;
+  /** 弹窗内容异步组件 */
+  asyncComponent?: AsyncComponentLoader;
+  /** 弹窗内容异步组件配置 */
+  asyncComponentOptions?: Partial<AsyncComponentOptions>;
+  /** 弹窗内容组件属性 */
+  componentProps?: Record<string, any>;
+  /** 弹窗属性 */
+  props?: T extends 'drawer' ? EleDrawerPropsAndEmits : EleModalPropsAndEmits;
+  /** 传递插槽 */
+  slots?: SlotObject;
+  /** 是否自定义弹窗组件 */
+  custom?: boolean;
+  /** 不为自定义弹窗组件时异步组件加载状态 */
+  compLoading?: boolean;
+  /** 弹窗打开状态 */
+  visible?: boolean;
+  /** 弹窗是否是失活状态 */
+  isDeactivated?: boolean;
+  /** 是否在页面销毁后不关闭弹窗 */
+  keepAlive?: boolean;
+  /** 弹窗 id */
+  modalId?: ModalItemId;
+}
+
+/**
+ * 打开的弹窗数据
+ */
+export type ModalItem = ModalItemOption<'drawer'> | ModalItemOption<'modal'>;
+
+/**
+ * 提供给后代组件的弹窗操作方法
+ */
+export interface ModalUtilProvider {
+  /** 打开弹窗 */
+  openModal: (option: ModalItem) => ModalItemId;
+  /** 关闭弹窗 */
+  closeModal: (modalId?: ModalItemId) => void;
+  /** 关闭所有弹窗 */
+  closeAllModal: () => void;
+  /** 修改弹窗失活状态 */
+  updateModalState: (modalId?: ModalItemId, deactivated?: boolean) => void;
+  /** 修改弹窗属性 */
+  updateModalProps: (
+    modalId?: ModalItemId,
+    option?: Record<string, any>
+  ) => void;
+}
+
+/**
+ * 弹窗操作方法
+ */
+export interface UseModalMethods {
+  /** 打开弹窗 */
+  openModal: (option: ModalItem) => ModalItemId;
+  /** 关闭所有弹窗(是否只关闭当前组件中打开的弹窗) */
+  closeAllModal: (current?: boolean) => void;
+  /** 关闭弹窗(指定弹窗 id 或者当前内容组件所在弹窗) */
+  closeModal: (modalId?: ModalItemId) => void;
+  /** 修改弹窗属性(指定弹窗 id 或者当前内容组件所在弹窗) */
+  setModalProps: (
+    modalId?: ModalItemId | Record<string, any>,
+    options?: Record<string, any>
+  ) => void;
+}
+
+/**
+ * 提供给内容组件的弹窗数据
+ */
+export interface ModalHolderProvider {
+  /** 关闭弹窗方法 */
+  closeModal: () => void;
+  /** 修改弹窗属性方法 */
+  setModalProps: (option?: Record<string, any>) => void;
+  /** 弹窗属性 */
+  modalProps: Ref<EleModalPropsAndEmits | EleDrawerPropsAndEmits>;
+}
+
+/**
+ * useModalRender 返回类型
+ */
+export interface UseModalRenderResult {
+  modals: Ref<ModalItem[]>;
+  openModal: (option: ModalItem) => ModalItemId;
+  closeModal: (modalId?: ModalItemId) => void;
+  closeAllModal: () => void;
+  removeModal: (modalId?: ModalItemId) => void;
+  removeAllModal: () => void;
+  updateModalVisible: (modalId?: ModalItemId, visible?: boolean) => void;
+  updateModalState: (modalId?: ModalItemId, deactivated?: boolean) => void;
+  updateModalProps: (
+    modalId?: ModalItemId,
+    option?: Record<string, any>
+  ) => void;
+}