@gopowerteam/modal-render 0.0.5 → 0.0.7

package/dist/cjs/components/modal-container.vue.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     maskClosable?: boolean | undefined;
     draggable?: boolean | undefined;
     mode?: "dialog" | "drawer" | undefined;
+    type?: string | undefined;
 }>, {
     header: boolean;
     closeable: boolean;
@@ -29,7 +30,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     esc: boolean;
     draggable: boolean;
     mode: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    showLoading: () => () => void;
+    hideLoading: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id: string;
@@ -50,6 +54,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     maskClosable?: boolean | undefined;
     draggable?: boolean | undefined;
     mode?: "dialog" | "drawer" | undefined;
+    type?: string | undefined;
 }>, {
     header: boolean;
     closeable: boolean;

package/dist/cjs/components/modal-dialog.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    type: 'confirm' | 'success' | 'error' | 'warning' | 'info';
+    title?: string | undefined;
+    content: string;
+    okText?: string | undefined;
+    cancelText?: string | undefined;
+    onOk?: (() => Promise<void> | void) | undefined;
+    onCancel?: (() => Promise<void> | void) | undefined;
+    footer?: (() => JSX.Element) | undefined;
+}>, {
+    okText: string;
+    cancelText: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    type: 'confirm' | 'success' | 'error' | 'warning' | 'info';
+    title?: string | undefined;
+    content: string;
+    okText?: string | undefined;
+    cancelText?: string | undefined;
+    onOk?: (() => Promise<void> | void) | undefined;
+    onCancel?: (() => Promise<void> | void) | undefined;
+    footer?: (() => JSX.Element) | undefined;
+}>, {
+    okText: string;
+    cancelText: string;
+}>>>, {
+    okText: string;
+    cancelText: string;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};

package/dist/cjs/hooks/use-modal.d.ts

@@ -1,7 +1,26 @@
 import type { Component } from 'vue';
 import type { OpenModalOptions } from '../interfaces';
 export declare function useModal(): {
-    open(component: Component, props?: Record<string, any>, options?: OpenModalOptions): Promise<any>;
+    open: {
+        (component: 'confirm', props: {
+            title?: string;
+            content: string;
+            footer?: () => JSX.Element;
+        }): Promise<any> & {
+            close: () => void;
+        };
+        (component: 'info' | 'warning' | 'error' | 'sucess', props: {
+            title?: string;
+            content: string;
+        }): Promise<any> & {
+            close: () => void;
+        };
+        (component: Component, props?: Record<string, any>, options?: OpenModalOptions): Promise<any> & {
+            close: () => void;
+        };
+    };
     close(data?: any): void;
     closeAll(): void;
+    showLoading(): void;
+    hideLoading(): void;
 };

package/dist/cjs/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");const C=Symbol("__MODAL__");function O(n){return e.getCurrentScope()?(e.onScopeDispose(n),!0):!1}function g(n){return typeof n=="function"?n():e.unref(n)}const $=typeof window<"u"&&typeof document<"u",D=Object.prototype.toString,T=n=>D.call(n)==="[object Object]",H=()=>{};function W(n,i={}){if(!e.isRef(n))return e.toRefs(n);const t=Array.isArray(n.value)?Array.from({length:n.value.length}):{};for(const l in n.value)t[l]=e.customRef(()=>({get(){return n.value[l]},set(r){var u;if((u=g(i.replaceRef))!=null?u:!0)if(Array.isArray(n.value)){const m=[...n.value];m[l]=r,n.value=m}else{const m={...n.value,[l]:r};Object.setPrototypeOf(m,Object.getPrototypeOf(n.value)),n.value=m}else n.value[l]=r}}));return t}function F(n){var i;const t=g(n);return(i=t==null?void 0:t.$el)!=null?i:t}const N=$?window:void 0;function A(...n){let i,t,l,r;if(typeof n[0]=="string"||Array.isArray(n[0])?([t,l,r]=n,i=N):[i,t,l,r]=n,!i)return H;Array.isArray(t)||(t=[t]),Array.isArray(l)||(l=[l]);const u=[],y=()=>{u.forEach(c=>c()),u.length=0},m=(c,a,d,p)=>(c.addEventListener(a,d,p),()=>c.removeEventListener(a,d,p)),v=e.watch(()=>[F(i),g(r)],([c,a])=>{if(y(),!c)return;const d=T(a)?{...a}:a;u.push(...t.flatMap(p=>l.map(_=>m(c,p,_,d))))},{immediate:!0,flush:"post"}),s=()=>{v(),y()};return O(s),s}function I(n,i={}){var t,l;const{pointerTypes:r,preventDefault:u,stopPropagation:y,exact:m,onMove:v,onEnd:s,onStart:c,initialValue:a,axis:d="both",draggingElement:p=N,containerElement:_,handle:B=n}=i,h=e.ref((t=g(a))!=null?t:{x:0,y:0}),w=e.ref(),b=o=>r?r.includes(o.pointerType):!0,k=o=>{g(u)&&o.preventDefault(),g(y)&&o.stopPropagation()},S=o=>{var f;if(!b(o)||g(m)&&o.target!==g(n))return;const P=((f=g(_))!=null?f:g(n)).getBoundingClientRect(),z={x:o.clientX-P.left,y:o.clientY-P.top};(c==null?void 0:c(z,o))!==!1&&(w.value=z,k(o))},x=o=>{if(!b(o)||!w.value)return;let{x:f,y:E}=h.value;(d==="x"||d==="both")&&(f=o.clientX-w.value.x),(d==="y"||d==="both")&&(E=o.clientY-w.value.y),h.value={x:f,y:E},v==null||v(h.value,o),k(o)},M=o=>{b(o)&&w.value&&(w.value=void 0,s==null||s(h.value,o),k(o))};if($){const o={capture:(l=i.capture)!=null?l:!0};A(B,"pointerdown",S,o),A(p,"pointermove",x,o),A(p,"pointerup",M,o)}return{...W(h),position:h,isDragging:e.computed(()=>!!w.value),style:e.computed(()=>`left:${h.value.x}px;top:${h.value.y}px;`)}}const K={class:"title font-bold"},X={class:"action"},Y={key:1,class:"modal-footer space-x-2"},q=["form"],j={name:"ModalContainer",inheritAttrs:!0},G=e.defineComponent({...j,props:{id:{},form:{},component:{},componentProps:{},width:{},maxWidth:{},maxHeight:{},sizes:{},size:{default:"middle"},fullscreen:{type:Boolean},title:{},header:{type:Boolean,default:!0},footer:{type:Boolean,default:!1},closeable:{type:Boolean,default:!0},esc:{type:Boolean,default:!1},maskClosable:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},mode:{default:"dialog"}},emits:["submit"],setup(n,{emit:i}){const t=n,l=i,r=e.inject(C);let u=0,y=0;const m=e.shallowRef(),v=e.shallowRef(),s=e.shallowRef(),{x:c,y:a}=I(s,{initialValue:{x:0,y:0}});function d(){r==null||r.close(t.id)}function p(o){if(typeof o=="number")return`${o}px`;if(typeof o=="string")return o}const _=e.computed(()=>{const o={};return t.mode==="dialog"&&(o.justifyContent="center"),t.mode==="drawer"&&(o.justifyContent="flex-end"),o}),B=e.computed(()=>{const o={};return t.size&&(o.width=p(t.sizes[t.size])),t.width&&(o.width=p(t.width)),t.maxWidth&&(o.maxWidth=p(t.maxWidth)),t.fullscreen&&(o.maxWidth="unset",o.width="100%",o.position="fixed",o.top=0,o.left=0,o.bottom=0,o.right=0),t.draggable&&!t.fullscreen&&t.mode==="dialog"&&(o.transform=`translate3d(${c.value-u}px, ${a.value-y}px, 0px)`),o}),h=e.computed(()=>{const o={};return t.draggable&&!t.fullscreen&&t.mode==="dialog"&&(o.cursor="move"),o}),w=e.computed(()=>{var f;const o={};return t.maxHeight&&(o.maxHeight=`calc(${(f=p(t.maxHeight))==null?void 0:f.replace("%","vh")} - 50px)`),t.mode==="drawer"&&(o.maxHeight=`calc(100vh - ${(t.header?50:0)+(t.footer?50:0)}px)`),t.fullscreen&&(o.maxHeight=`calc(100vh - ${(t.header?50:0)+(t.footer?50:0)}px)`),o});function b(){const o=v.value;if(t.form&&o){const f=o.querySelector(`form[name="${t.form}"]`);f&&f.dispatchEvent(new Event("submit"))}l("submit",{open:r==null?void 0:r.open,close:f=>r==null?void 0:r.close(t.id,f)})}function k(){r==null||r.close(t.id)}function S(){window&&window.addEventListener("resize",()=>{e.triggerRef(m),e.triggerRef(v),u=v.value.offsetLeft,y=v.value.offsetTop})}function x(){if(t.closeable&&t.esc){const o=({key:f})=>{f==="Escape"&&(r==null||r.close(t.id),window.removeEventListener("keydown",o))};window.addEventListener("keydown",o)}}function M(){u=v.value.offsetLeft,y=v.value.offsetTop}return e.onMounted(()=>{x(),S()}),e.onUnmounted(()=>{}),(o,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapperRef",ref:m,class:"modal-wrapper",style:e.normalizeStyle(_.value),onClick:f[0]||(f[0]=e.withModifiers(E=>o.maskClosable&&d(),["self"]))},[e.createElementVNode("div",{ref_key:"contentRef",ref:v,class:e.normalizeClass(["modal-content",{[`${o.mode}-mode`]:!0}]),style:e.normalizeStyle(B.value)},[o.header?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"headerRef",ref:s,class:"modal-header",style:e.normalizeStyle(h.value),onMousedown:M},[e.createElementVNode("div",K,e.toDisplayString(o.title),1),e.createElementVNode("div",X,[o.closeable?(e.openBlock(),e.createElementBlock("div",{key:0,class:"i-icon-park-outline:close block cursor-pointer",onClick:d})):e.createCommentVNode("",!0)])],36)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"modal-body",style:e.normalizeStyle(w.value)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),e.normalizeProps(e.guardReactiveProps(o.componentProps)),null,16))],4),o.footer?(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("button",{class:"submit-button",form:o.form,type:"submit",onClick:b}," 确定 ",8,q),e.createElementVNode("button",{class:"cancel-button",type:"button",onClick:k}," 取消 ")])):e.createCommentVNode("",!0)],6)],4))}});const V=(n,i)=>{const t=n.__vccOpts||n;for(const[l,r]of i)t[l]=r;return t},R=V(G,[["__scopeId","data-v-33b22316"]]),U={key:0,class:"modal-teleport"},J={name:"ModalProvider",inheritAttrs:!0},Q=e.defineComponent({...J,props:{appendToBody:{type:[Boolean,String],default:!1},sizes:{default:()=>({small:520,middle:860,large:1190})},maxWidth:{default:"80%"},maxHeight:{default:"80%"}},setup(n,{expose:i}){const t=e.shallowRef([]),l=e.ref(!1);async function r(s,c,a){const d=e.defineAsyncComponent(()=>Promise.resolve(s));return new Promise(p=>{t.value.push({id:Math.random().toString(32).slice(2),component:d,props:c,options:a,resolve:p,onSubmit:e.ref(null)}),e.triggerRef(t)})}function u(s,c){const a=t.value.findIndex(p=>p.id===s);if(a<0)return;const d=t.value[a];d==null||d.resolve(c),t.value.splice(a,1),e.triggerRef(t)}function y(){t.value.forEach(s=>{s.resolve()}),t.value=[],e.triggerRef(t)}function m(s){return t.value.find(c=>c.id===s)}function v(s,c){const a=t.value.find(d=>d.id===s);console.log(c,111),a&&(a.onSubmit.value=c)}return e.provide(C,{open:r,close:u,closeAll:y,getElement:m,addSubmitListener:v}),i({elements:t}),e.onMounted(()=>{l.value=!0}),(s,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(s.$slots,"default",{},void 0,!0),l.value?(e.openBlock(),e.createElementBlock("div",U,[(e.openBlock(),e.createBlock(e.Teleport,{disabled:!s.appendToBody,to:typeof s.appendToBody=="string"?s.appendToBody:"body"},[e.createVNode(e.TransitionGroup,{name:"modal-fade"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,a=>(e.openBlock(),e.createBlock(R,e.mergeProps({id:a.id,key:a.id,component:a.component,"component-props":a.props,"max-height":s.maxHeight,"max-width":s.maxWidth,sizes:s.sizes},a.options,{onSubmit:a.onSubmit.value}),null,16,["id","component","component-props","max-height","max-width","sizes","onSubmit"]))),128))]),_:1})],8,["disabled","to"]))])):e.createCommentVNode("",!0)],64))}});const Z=V(Q,[["__scopeId","data-v-cec9e05a"]]);function L(n,i){var l,r;let t=n==null?void 0:n.parent;for(;t&&((l=t==null?void 0:t.type)==null?void 0:l.name)!==i;)t=t.parent;return((r=t==null?void 0:t.type)==null?void 0:r.name)===i?t:null}function ee(){const n=e.inject(C),i=e.getCurrentInstance();return{open(t,l,r){if(!n)throw new Error("Not Found Modal Provider Component");return n.open(t,l||{},r||{})},close(t){var u;if(!n)throw new Error("Not Found Modal Provider Component");const l=L(i,"ModalContainer"),r=(u=l==null?void 0:l.props)==null?void 0:u.id;if(!r)throw new Error("Not Found Current Modal Container");n.close(r,t)},closeAll(){if(!n)throw new Error("Not Found Modal Provider Component");n.closeAll()}}}function te(n){var u;const i=e.inject(C),t=e.getCurrentInstance(),l=L(t,"ModalContainer"),r=(u=l==null?void 0:l.props)==null?void 0:u.id;i&&r&&i.addSubmitListener(r,n)}exports.ModalContainer=R;exports.ModalKey=C;exports.ModalProvider=Z;exports.onSubmit=te;exports.useModal=ee;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");const S=Symbol("__MODAL__");function R(o){return e.getCurrentScope()?(e.onScopeDispose(o),!0):!1}function C(o){return typeof o=="function"?o():e.unref(o)}const A=typeof window<"u"&&typeof document<"u",F=Object.prototype.toString,I=o=>F.call(o)==="[object Object]",H=()=>{};function W(o,s={}){if(!e.isRef(o))return e.toRefs(o);const n=Array.isArray(o.value)?Array.from({length:o.value.length}):{};for(const t in o.value)n[t]=e.customRef(()=>({get(){return o.value[t]},set(a){var i;if((i=C(s.replaceRef))!=null?i:!0)if(Array.isArray(o.value)){const y=[...o.value];y[t]=a,o.value=y}else{const y={...o.value,[t]:a};Object.setPrototypeOf(y,Object.getPrototypeOf(o.value)),o.value=y}else o.value[t]=a}}));return n}function j(o){var s;const n=C(o);return(s=n==null?void 0:n.$el)!=null?s:n}const D=A?window:void 0;function P(...o){let s,n,t,a;if(typeof o[0]=="string"||Array.isArray(o[0])?([n,t,a]=o,s=D):[s,n,t,a]=o,!s)return H;Array.isArray(n)||(n=[n]),Array.isArray(t)||(t=[t]);const i=[],f=()=>{i.forEach(m=>m()),i.length=0},y=(m,g,l,u)=>(m.addEventListener(g,l,u),()=>m.removeEventListener(g,l,u)),_=e.watch(()=>[j(s),C(a)],([m,g])=>{if(f(),!m)return;const l=I(g)?{...g}:g;i.push(...n.flatMap(u=>t.map(c=>y(m,u,c,l))))},{immediate:!0,flush:"post"}),w=()=>{_(),f()};return R(w),w}function K(o,s={}){var n,t;const{pointerTypes:a,preventDefault:i,stopPropagation:f,exact:y,onMove:_,onEnd:w,onStart:m,initialValue:g,axis:l="both",draggingElement:u=D,containerElement:c,handle:v=o}=s,p=e.ref((n=C(g))!=null?n:{x:0,y:0}),h=e.ref(),E=d=>a?a.includes(d.pointerType):!0,B=d=>{C(i)&&d.preventDefault(),C(f)&&d.stopPropagation()},V=d=>{var b;if(!E(d)||C(y)&&d.target!==C(o))return;const x=((b=C(c))!=null?b:C(o)).getBoundingClientRect(),r={x:d.clientX-x.left,y:d.clientY-x.top};(m==null?void 0:m(r,d))!==!1&&(h.value=r,B(d))},L=d=>{if(!E(d)||!h.value)return;let{x:b,y:M}=p.value;(l==="x"||l==="both")&&(b=d.clientX-h.value.x),(l==="y"||l==="both")&&(M=d.clientY-h.value.y),p.value={x:b,y:M},_==null||_(p.value,d),B(d)},$=d=>{E(d)&&h.value&&(h.value=void 0,w==null||w(p.value,d),B(d))};if(A){const d={capture:(t=s.capture)!=null?t:!0};P(v,"pointerdown",V,d),P(u,"pointermove",L,d),P(u,"pointerup",$,d)}return{...W(p),position:p,isDragging:e.computed(()=>!!h.value),style:e.computed(()=>`left:${p.value.x}px;top:${p.value.y}px;`)}}const X=o=>(e.pushScopeId("data-v-450bcc09"),o=o(),e.popScopeId(),o),Y={class:"title font-bold"},q={class:"action"},G={key:1,class:"modal-footer space-x-2"},U=["form"],J={key:2,class:"modal-loading"},Q=X(()=>e.createElementVNode("div",{class:"lds-ring"},[e.createElementVNode("div"),e.createElementVNode("div"),e.createElementVNode("div"),e.createElementVNode("div")],-1)),Z=[Q],ee={name:"ModalContainer",inheritAttrs:!0},te=e.defineComponent({...ee,props:{id:{},form:{},component:{},componentProps:{},width:{},maxWidth:{},maxHeight:{},sizes:{},size:{default:"middle"},fullscreen:{type:Boolean},title:{},header:{type:Boolean,default:!0},footer:{type:Boolean,default:!1},closeable:{type:Boolean,default:!0},esc:{type:Boolean,default:!1},maskClosable:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},mode:{default:"dialog"},type:{}},emits:["submit"],setup(o,{expose:s,emit:n}){const t=o,a=n,i=e.inject(S),f=e.ref(!1);let y=0,_=0;const w=e.shallowRef(),m=e.shallowRef(),g=e.shallowRef(),{x:l,y:u}=K(g,{initialValue:{x:0,y:0}});function c(){i==null||i.close(t.id)}function v(r){if(typeof r=="number")return`${r}px`;if(typeof r=="string")return r}const p=e.computed(()=>{const r={};return t.mode==="dialog"&&(r.justifyContent="center"),t.mode==="drawer"&&(r.justifyContent="flex-end"),r}),h=e.computed(()=>{const r={};return t.size&&(r.width=v(t.sizes[t.size])),t.width&&(r.width=v(t.width)),t.maxWidth&&(r.maxWidth=v(t.maxWidth)),t.fullscreen&&(r.maxWidth="unset",r.width="100%",r.position="fixed",r.top=0,r.left=0,r.bottom=0,r.right=0,r.borderRadius=0),t.draggable&&!t.fullscreen&&t.mode==="dialog"&&(r.transform=`translate3d(${l.value-y}px, ${u.value-_}px, 0px)`),t.mode==="drawer"&&(r.borderRadius=0),r}),E=e.computed(()=>{const r={};return t.draggable&&!t.fullscreen&&t.mode==="dialog"&&(r.cursor="move"),r}),B=e.computed(()=>{var k;const r={};return t.maxHeight&&(r.maxHeight=`calc(${(k=v(t.maxHeight))==null?void 0:k.replace("%","vh")} - 50px)`),t.mode==="drawer"&&(r.maxHeight="unset",r.height=`calc(100vh - ${(t.header?50:0)+(t.footer?50:0)}px)`),t.fullscreen&&(r.maxHeight="unset",r.height=`calc(100vh - ${(t.header?50:0)+(t.footer?50:0)}px)`),t.type!=="component"&&(r.padding="0"),r});function V(){const r=m.value;if(t.form&&r){const k=r.querySelector(`form[name="${t.form}"]`);k&&k.dispatchEvent(new Event("submit"))}a("submit")}function L(){i==null||i.close(t.id)}function $(){window&&window.addEventListener("resize",()=>{e.triggerRef(w),e.triggerRef(m),y=m.value.offsetLeft,_=m.value.offsetTop})}function d(){if(t.closeable&&t.esc){const r=({key:k})=>{k==="Escape"&&(i==null||i.close(t.id),window.removeEventListener("keydown",r))};window.addEventListener("keydown",r)}}function b(){y=m.value.offsetLeft,_=m.value.offsetTop}e.onMounted(()=>{d(),$()}),e.onUnmounted(()=>{});function M(){return f.value=!0,()=>x()}function x(){f.value=!1}return s({showLoading:M,hideLoading:x}),(r,k)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapperRef",ref:w,class:"modal-wrapper",style:e.normalizeStyle(p.value),onClick:k[0]||(k[0]=e.withModifiers(pe=>r.maskClosable&&c(),["self"]))},[e.createElementVNode("div",{ref_key:"contentRef",ref:m,class:e.normalizeClass(["modal-content",{[`${r.mode}-mode`]:!0}]),style:e.normalizeStyle(h.value)},[r.header?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"headerRef",ref:g,class:"modal-header",style:e.normalizeStyle(E.value),onMousedown:b},[e.createElementVNode("div",Y,e.toDisplayString(r.title),1),e.createElementVNode("div",q,[r.closeable?(e.openBlock(),e.createElementBlock("div",{key:0,class:"i-icon-park-outline:close block cursor-pointer",onClick:c})):e.createCommentVNode("",!0)])],36)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"modal-body",style:e.normalizeStyle(B.value)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.component),e.normalizeProps(e.guardReactiveProps(r.componentProps)),null,16))],4),r.footer?(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("button",{class:"submit-button",form:r.form,type:"submit",onClick:V}," 确定 ",8,U),e.createElementVNode("button",{class:"cancel-button",type:"button",onClick:L}," 取消 ")])):e.createCommentVNode("",!0),f.value?(e.openBlock(),e.createElementBlock("div",J,Z)):e.createCommentVNode("",!0)],6)],4))}});const z=(o,s)=>{const n=o.__vccOpts||o;for(const[t,a]of s)n[t]=a;return n},O=z(te,[["__scopeId","data-v-450bcc09"]]),oe={class:"modal-dialog"},ne={class:"dialog-body"},re={class:"dialog-title"},le={class:"dialog-content"},ie=e.defineComponent({__name:"modal-dialog",props:{type:{},title:{},content:{},okText:{default:"确定"},cancelText:{default:"取消"},onOk:{},onCancel:{},footer:{}},setup(o){const s=o,n=T(),t=e.computed(()=>s.title?s.title:{confirm:"提示",info:"提示",warning:"警告",error:"错误",success:"成功"}[s.type]);async function a(){s.onOk&&await s.onOk(),n.close()}async function i(){s.onCancel&&await s.onCancel(),n.close()}return(f,y)=>(e.openBlock(),e.createElementBlock("section",oe,[e.createElementVNode("div",ne,[e.createElementVNode("div",re,e.toDisplayString(t.value),1),e.createElementVNode("div",le,e.toDisplayString(f.content),1)]),e.createElementVNode("div",{class:"dialog-footer space-x-2",style:e.normalizeStyle(f.type==="confirm"?{"justify-content":"end"}:{"border-top":"none"})},[f.footer?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.footer),{key:0})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"submit-button",type:"submit",onClick:a},e.toDisplayString(f.okText),1),f.type==="confirm"?(e.openBlock(),e.createElementBlock("button",{key:0,class:"cancel-button",type:"button",onClick:i},e.toDisplayString(f.cancelText),1)):e.createCommentVNode("",!0)],64))],4)]))}});const se=z(ie,[["__scopeId","data-v-8326e5a5"]]),ae={key:0,class:"modal-teleport"},ce={name:"ModalProvider",inheritAttrs:!0},de=e.defineComponent({...ce,props:{appendToBody:{type:[Boolean,String],default:!1},sizes:{default:()=>({small:520,middle:860,large:1190})},maxWidth:{default:"80%"},maxHeight:{default:"80%"}},setup(o,{expose:s}){const n=e.shallowRef([]),t=e.ref(!1),a=e.getCurrentInstance();function i(l,u={},c={}){const v=e.defineAsyncComponent(()=>Promise.resolve(typeof l=="string"?se:l));typeof l=="string"&&(u.type=l,c.size="small",c.fullscreen=!1,c.mode="dialog",c.footer=!1,c.header=!1);const p=Math.random().toString(32).slice(2),h=new Promise(E=>{n.value.push({id:p,component:v,props:u||{},options:{...c,type:typeof l=="string"?l:"component"},resolve:E,listeners:[]}),e.triggerRef(n)});return Object.assign(h,{close:()=>f(p)})}function f(l,u){const c=n.value.findIndex(p=>p.id===l);if(c<0)return;const v=n.value[c];v==null||v.resolve(u),n.value.splice(c,1),e.triggerRef(n)}function y(){n.value.forEach(l=>{l.resolve()}),n.value=[],e.triggerRef(n)}function _(l,u){const c=n.value.find(p=>p.id===l);if(!c)return;const v=c.listeners.find(p=>p.event===u);v&&v.callback({open:i,close:()=>f(c.id),closeAll:y,showLoading:()=>w(c.id),hideLoading:()=>m(c.id)})}function w(l){if(!a)return;const[u]=a.refs[`modal-container_${l}`];if(u)return u.showLoading()}function m(l){if(!a)return;const[u]=a.refs[`modal-container_${l}`];if(u)return u.hideLoading()}function g(l,u,c){const v=n.value.find(p=>p.id===l);v&&v.listeners.push({event:u,callback:c})}return e.provide(S,{open:i,close:f,closeAll:y,addEventListener:g}),s({elements:n}),e.onMounted(()=>{t.value=!0}),(l,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(l.$slots,"default",{},void 0,!0),t.value?(e.openBlock(),e.createElementBlock("div",ae,[(e.openBlock(),e.createBlock(e.Teleport,{disabled:!l.appendToBody,to:typeof l.appendToBody=="string"?l.appendToBody:"body"},[e.createVNode(e.TransitionGroup,{name:"modal-fade"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,c=>(e.openBlock(),e.createBlock(O,e.mergeProps({id:c.id,key:c.id,ref_for:!0,ref:`modal-container_${c.id}`,component:c.component,"component-props":c.props,"max-height":l.maxHeight,"max-width":l.maxWidth,sizes:l.sizes},c.options,{onSubmit:()=>_(c.id,"submit")}),null,16,["id","component","component-props","max-height","max-width","sizes","onSubmit"]))),128))]),_:1})],8,["disabled","to"]))])):e.createCommentVNode("",!0)],64))}});const ue=z(de,[["__scopeId","data-v-09133e47"]]);function N(o,s){var t,a;let n=o==null?void 0:o.parent;for(;n&&((t=n==null?void 0:n.type)==null?void 0:t.name)!==s;)n=n.parent;return((a=n==null?void 0:n.type)==null?void 0:a.name)===s?n:null}function T(){const o=e.inject(S),s=e.getCurrentInstance();function n(t,a,i){if(!o)throw new Error("Not Found Modal Provider Component");return o.open(t,a,i)}return{open:n,close(t){var f;if(!o)throw new Error("Not Found Modal Provider Component");const a=N(s,"ModalContainer"),i=(f=a==null?void 0:a.props)==null?void 0:f.id;if(!i)throw new Error("Not Found Current Modal Container");o.close(i,t)},closeAll(){if(!o)throw new Error("Not Found Modal Provider Component");o.closeAll()},showLoading(){var i;if(!o)throw new Error("Not Found Modal Provider Component");const t=N(s,"ModalContainer");if(!((i=t==null?void 0:t.props)==null?void 0:i.id))throw new Error("Not Found Current Modal Container");t!=null&&t.exposed&&(t==null||t.exposed.showLoading())},hideLoading(){var i;if(!o)throw new Error("Not Found Modal Provider Component");const t=N(s,"ModalContainer");if(!((i=t==null?void 0:t.props)==null?void 0:i.id))throw new Error("Not Found Current Modal Container");t!=null&&t.exposed&&(t==null||t.exposed.hideLoading())}}}function fe(o){var i;const s=e.inject(S),n=e.getCurrentInstance(),t=N(n,"ModalContainer"),a=(i=t==null?void 0:t.props)==null?void 0:i.id;s&&a&&s.addEventListener(a,"submit",o)}exports.ModalContainer=O;exports.ModalKey=S;exports.ModalProvider=ue;exports.onSubmit=fe;exports.useModal=T;

package/dist/cjs/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { Component, Ref } from 'vue';
+import type { Component } from 'vue';
 import type { useModal } from './hooks/use-modal';
 export interface SizeOptions {
     small: number;
@@ -25,13 +25,19 @@ export interface ModalElement extends OpenModalOptions {
     resolve: (data?: any) => void;
     component: Component;
     props: Record<string, any>;
-    options: OpenModalOptions;
-    onSubmit: Ref<((actions: ReturnType<typeof useModal>) => void) | null>;
+    options: OpenModalOptions & {
+        type?: string;
+    };
+    listeners: {
+        event: string;
+        callback: (actions: ReturnType<typeof useModal>) => void;
+    }[];
 }
 export interface ModalActions {
-    open: (component: Component, props: Record<string, any>, options: OpenModalOptions) => Promise<any | void>;
+    open: (component: Component | 'confirm' | 'info' | 'warning' | 'error' | 'sucess', props?: Record<string, any>, options?: OpenModalOptions) => Promise<any> & {
+        close: () => void;
+    };
     close: (id: string, data?: any) => void;
     closeAll: () => void;
-    getElement: (id: string) => ModalElement | undefined;
-    addSubmitListener: (id: string, fun: (modal: ReturnType<typeof useModal>) => void) => void;
+    addEventListener: (id: string, event: 'submit', callback: (modal: ReturnType<typeof useModal>) => void) => void;
 }

package/dist/es/components/modal-container.vue.d.ts

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     maskClosable?: boolean | undefined;
     draggable?: boolean | undefined;
     mode?: "dialog" | "drawer" | undefined;
+    type?: string | undefined;
 }>, {
     header: boolean;
     closeable: boolean;
@@ -29,7 +30,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     esc: boolean;
     draggable: boolean;
     mode: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    showLoading: () => () => void;
+    hideLoading: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id: string;
@@ -50,6 +54,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     maskClosable?: boolean | undefined;
     draggable?: boolean | undefined;
     mode?: "dialog" | "drawer" | undefined;
+    type?: string | undefined;
 }>, {
     header: boolean;
     closeable: boolean;

package/dist/es/components/modal-dialog.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    type: 'confirm' | 'success' | 'error' | 'warning' | 'info';
+    title?: string | undefined;
+    content: string;
+    okText?: string | undefined;
+    cancelText?: string | undefined;
+    onOk?: (() => Promise<void> | void) | undefined;
+    onCancel?: (() => Promise<void> | void) | undefined;
+    footer?: (() => JSX.Element) | undefined;
+}>, {
+    okText: string;
+    cancelText: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    type: 'confirm' | 'success' | 'error' | 'warning' | 'info';
+    title?: string | undefined;
+    content: string;
+    okText?: string | undefined;
+    cancelText?: string | undefined;
+    onOk?: (() => Promise<void> | void) | undefined;
+    onCancel?: (() => Promise<void> | void) | undefined;
+    footer?: (() => JSX.Element) | undefined;
+}>, {
+    okText: string;
+    cancelText: string;
+}>>>, {
+    okText: string;
+    cancelText: string;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};

package/dist/es/hooks/use-modal.d.ts

@@ -1,7 +1,26 @@
 import type { Component } from 'vue';
 import type { OpenModalOptions } from '../interfaces';
 export declare function useModal(): {
-    open(component: Component, props?: Record<string, any>, options?: OpenModalOptions): Promise<any>;
+    open: {
+        (component: 'confirm', props: {
+            title?: string;
+            content: string;
+            footer?: () => JSX.Element;
+        }): Promise<any> & {
+            close: () => void;
+        };
+        (component: 'info' | 'warning' | 'error' | 'sucess', props: {
+            title?: string;
+            content: string;
+        }): Promise<any> & {
+            close: () => void;
+        };
+        (component: Component, props?: Record<string, any>, options?: OpenModalOptions): Promise<any> & {
+            close: () => void;
+        };
+    };
     close(data?: any): void;
     closeAll(): void;
+    showLoading(): void;
+    hideLoading(): void;
 };

package/dist/es/index.mjs

@@ -1,127 +1,137 @@
-import { unref as J, isRef as Q, toRefs as Z, customRef as j, getCurrentScope as ee, onScopeDispose as te, ref as B, computed as x, watch as oe, defineComponent as I, inject as N, shallowRef as P, onMounted as X, onUnmounted as ne, openBlock as g, createElementBlock as w, normalizeStyle as A, withModifiers as re, createElementVNode as b, normalizeClass as ie, toDisplayString as le, createCommentVNode as $, createBlock as W, resolveDynamicComponent as se, normalizeProps as ae, guardReactiveProps as ue, triggerRef as M, provide as ce, Fragment as F, renderSlot as de, Teleport as fe, createVNode as pe, TransitionGroup as me, withCtx as ve, renderList as ye, mergeProps as he, defineAsyncComponent as ge, getCurrentInstance as Y } from "vue";
-const z = Symbol("__MODAL__");
-function _e(o) {
-  return ee() ? (te(o), !0) : !1;
+import { unref as Z, isRef as ee, toRefs as te, customRef as oe, getCurrentScope as ne, onScopeDispose as ie, ref as N, computed as S, watch as re, defineComponent as Y, inject as K, shallowRef as T, onMounted as U, onUnmounted as se, openBlock as h, createElementBlock as w, normalizeStyle as z, withModifiers as le, createElementVNode as y, normalizeClass as ae, toDisplayString as B, createCommentVNode as $, createBlock as F, resolveDynamicComponent as j, normalizeProps as de, guardReactiveProps as ce, triggerRef as O, pushScopeId as ue, popScopeId as fe, Fragment as X, getCurrentInstance as q, provide as pe, renderSlot as me, Teleport as ve, createVNode as ye, TransitionGroup as he, withCtx as ge, renderList as _e, mergeProps as we, defineAsyncComponent as be } from "vue";
+const H = Symbol("__MODAL__");
+function Ce(t) {
+  return ne() ? (ie(t), !0) : !1;
 }
-function h(o) {
-  return typeof o == "function" ? o() : J(o);
+function x(t) {
+  return typeof t == "function" ? t() : Z(t);
 }
-const K = typeof window < "u" && typeof document < "u", we = Object.prototype.toString, be = (o) => we.call(o) === "[object Object]", xe = () => {
+const J = typeof window < "u" && typeof document < "u", ke = Object.prototype.toString, xe = (t) => ke.call(t) === "[object Object]", Me = () => {
 };
-function Ce(o, i = {}) {
-  if (!Q(o))
-    return Z(o);
-  const e = Array.isArray(o.value) ? Array.from({ length: o.value.length }) : {};
-  for (const r in o.value)
-    e[r] = j(() => ({
+function Ee(t, s = {}) {
+  if (!ee(t))
+    return te(t);
+  const o = Array.isArray(t.value) ? Array.from({ length: t.value.length }) : {};
+  for (const e in t.value)
+    o[e] = oe(() => ({
       get() {
-        return o.value[r];
+        return t.value[e];
       },
-      set(n) {
-        var u;
-        if ((u = h(i.replaceRef)) != null ? u : !0)
-          if (Array.isArray(o.value)) {
-            const p = [...o.value];
-            p[r] = n, o.value = p;
+      set(l) {
+        var r;
+        if ((r = x(s.replaceRef)) != null ? r : !0)
+          if (Array.isArray(t.value)) {
+            const v = [...t.value];
+            v[e] = l, t.value = v;
           } else {
-            const p = { ...o.value, [r]: n };
-            Object.setPrototypeOf(p, Object.getPrototypeOf(o.value)), o.value = p;
+            const v = { ...t.value, [e]: l };
+            Object.setPrototypeOf(v, Object.getPrototypeOf(t.value)), t.value = v;
           }
         else
-          o.value[r] = n;
+          t.value[e] = l;
       }
     }));
-  return e;
+  return o;
 }
-function Se(o) {
-  var i;
-  const e = h(o);
-  return (i = e == null ? void 0 : e.$el) != null ? i : e;
+function Se(t) {
+  var s;
+  const o = x(t);
+  return (s = o == null ? void 0 : o.$el) != null ? s : o;
 }
-const q = K ? window : void 0;
-function H(...o) {
-  let i, e, r, n;
-  if (typeof o[0] == "string" || Array.isArray(o[0]) ? ([e, r, n] = o, i = q) : [i, e, r, n] = o, !i)
-    return xe;
-  Array.isArray(e) || (e = [e]), Array.isArray(r) || (r = [r]);
-  const u = [], v = () => {
-    u.forEach((a) => a()), u.length = 0;
-  }, p = (a, s, c, f) => (a.addEventListener(s, c, f), () => a.removeEventListener(s, c, f)), m = oe(
-    () => [Se(i), h(n)],
-    ([a, s]) => {
-      if (v(), !a)
+const Q = J ? window : void 0;
+function V(...t) {
+  let s, o, e, l;
+  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([o, e, l] = t, s = Q) : [s, o, e, l] = t, !s)
+    return Me;
+  Array.isArray(o) || (o = [o]), Array.isArray(e) || (e = [e]);
+  const r = [], u = () => {
+    r.forEach((p) => p()), r.length = 0;
+  }, v = (p, g, i, c) => (p.addEventListener(g, i, c), () => p.removeEventListener(g, i, c)), b = re(
+    () => [Se(s), x(l)],
+    ([p, g]) => {
+      if (u(), !p)
         return;
-      const c = be(s) ? { ...s } : s;
-      u.push(
-        ...e.flatMap((f) => r.map((C) => p(a, f, C, c)))
+      const i = xe(g) ? { ...g } : g;
+      r.push(
+        ...o.flatMap((c) => e.map((a) => v(p, c, a, i)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), l = () => {
-    m(), v();
+  ), C = () => {
+    b(), u();
   };
-  return _e(l), l;
+  return Ce(C), C;
 }
-function Ee(o, i = {}) {
-  var e, r;
+function $e(t, s = {}) {
+  var o, e;
   const {
-    pointerTypes: n,
-    preventDefault: u,
-    stopPropagation: v,
-    exact: p,
-    onMove: m,
-    onEnd: l,
-    onStart: a,
-    initialValue: s,
-    axis: c = "both",
-    draggingElement: f = q,
-    containerElement: C,
-    handle: L = o
-  } = i, y = B(
-    (e = h(s)) != null ? e : { x: 0, y: 0 }
-  ), _ = B(), S = (t) => n ? n.includes(t.pointerType) : !0, E = (t) => {
-    h(u) && t.preventDefault(), h(v) && t.stopPropagation();
-  }, D = (t) => {
-    var d;
-    if (!S(t) || h(p) && t.target !== h(o))
+    pointerTypes: l,
+    preventDefault: r,
+    stopPropagation: u,
+    exact: v,
+    onMove: b,
+    onEnd: C,
+    onStart: p,
+    initialValue: g,
+    axis: i = "both",
+    draggingElement: c = Q,
+    containerElement: a,
+    handle: m = t
+  } = s, f = N(
+    (o = x(g)) != null ? o : { x: 0, y: 0 }
+  ), _ = N(), M = (d) => l ? l.includes(d.pointerType) : !0, L = (d) => {
+    x(r) && d.preventDefault(), x(u) && d.stopPropagation();
+  }, R = (d) => {
+    var E;
+    if (!M(d) || x(v) && d.target !== x(t))
       return;
-    const R = ((d = h(C)) != null ? d : h(o)).getBoundingClientRect(), V = {
-      x: t.clientX - R.left,
-      y: t.clientY - R.top
+    const P = ((E = x(a)) != null ? E : x(t)).getBoundingClientRect(), n = {
+      x: d.clientX - P.left,
+      y: d.clientY - P.top
     };
-    (a == null ? void 0 : a(V, t)) !== !1 && (_.value = V, E(t));
-  }, O = (t) => {
-    if (!S(t) || !_.value)
+    (p == null ? void 0 : p(n, d)) !== !1 && (_.value = n, L(d));
+  }, W = (d) => {
+    if (!M(d) || !_.value)
       return;
-    let { x: d, y: k } = y.value;
-    (c === "x" || c === "both") && (d = t.clientX - _.value.x), (c === "y" || c === "both") && (k = t.clientY - _.value.y), y.value = {
-      x: d,
-      y: k
-    }, m == null || m(y.value, t), E(t);
-  }, T = (t) => {
-    S(t) && _.value && (_.value = void 0, l == null || l(y.value, t), E(t));
+    let { x: E, y: A } = f.value;
+    (i === "x" || i === "both") && (E = d.clientX - _.value.x), (i === "y" || i === "both") && (A = d.clientY - _.value.y), f.value = {
+      x: E,
+      y: A
+    }, b == null || b(f.value, d), L(d);
+  }, I = (d) => {
+    M(d) && _.value && (_.value = void 0, C == null || C(f.value, d), L(d));
   };
-  if (K) {
-    const t = { capture: (r = i.capture) != null ? r : !0 };
-    H(L, "pointerdown", D, t), H(f, "pointermove", O, t), H(f, "pointerup", T, t);
+  if (J) {
+    const d = { capture: (e = s.capture) != null ? e : !0 };
+    V(m, "pointerdown", R, d), V(c, "pointermove", W, d), V(c, "pointerup", I, d);
   }
   return {
-    ...Ce(y),
-    position: y,
-    isDragging: x(() => !!_.value),
-    style: x(
-      () => `left:${y.value.x}px;top:${y.value.y}px;`
+    ...Ee(f),
+    position: f,
+    isDragging: S(() => !!_.value),
+    style: S(
+      () => `left:${f.value.x}px;top:${f.value.y}px;`
     )
   };
 }
-const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
+const Le = (t) => (ue("data-v-450bcc09"), t = t(), fe(), t), Ae = { class: "title font-bold" }, Pe = { class: "action" }, ze = {
   key: 1,
   class: "modal-footer space-x-2"
-}, Pe = ["form"], $e = {
+}, Be = ["form"], Oe = {
+  key: 2,
+  class: "modal-loading"
+}, Te = /* @__PURE__ */ Le(() => /* @__PURE__ */ y("div", { class: "lds-ring" }, [
+  /* @__PURE__ */ y("div"),
+  /* @__PURE__ */ y("div"),
+  /* @__PURE__ */ y("div"),
+  /* @__PURE__ */ y("div")
+], -1)), De = [
+  Te
+], Ne = {
   name: "ModalContainer",
   inheritAttrs: !0
-}, Be = /* @__PURE__ */ I({
-  ...$e,
+}, Fe = /* @__PURE__ */ Y({
+  ...Ne,
   props: {
     id: {},
     form: {},
@@ -140,137 +150,198 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
     esc: { type: Boolean, default: !1 },
     maskClosable: { type: Boolean, default: !1 },
     draggable: { type: Boolean, default: !1 },
-    mode: { default: "dialog" }
+    mode: { default: "dialog" },
+    type: {}
   },
   emits: ["submit"],
-  setup(o, { emit: i }) {
-    const e = o, r = i, n = N(z);
-    let u = 0, v = 0;
-    const p = P(), m = P(), l = P(), { x: a, y: s } = Ee(l, {
+  setup(t, { expose: s, emit: o }) {
+    const e = t, l = o, r = K(H), u = N(!1);
+    let v = 0, b = 0;
+    const C = T(), p = T(), g = T(), { x: i, y: c } = $e(g, {
       initialValue: { x: 0, y: 0 }
     });
-    function c() {
-      n == null || n.close(e.id);
+    function a() {
+      r == null || r.close(e.id);
     }
-    function f(t) {
-      if (typeof t == "number")
-        return `${t}px`;
-      if (typeof t == "string")
-        return t;
+    function m(n) {
+      if (typeof n == "number")
+        return `${n}px`;
+      if (typeof n == "string")
+        return n;
     }
-    const C = x(() => {
-      const t = {};
-      return e.mode === "dialog" && (t.justifyContent = "center"), e.mode === "drawer" && (t.justifyContent = "flex-end"), t;
-    }), L = x(() => {
-      const t = {};
-      return e.size && (t.width = f(e.sizes[e.size])), e.width && (t.width = f(e.width)), e.maxWidth && (t.maxWidth = f(e.maxWidth)), e.fullscreen && (t.maxWidth = "unset", t.width = "100%", t.position = "fixed", t.top = 0, t.left = 0, t.bottom = 0, t.right = 0), e.draggable && !e.fullscreen && e.mode === "dialog" && (t.transform = `translate3d(${a.value - u}px, ${s.value - v}px, 0px)`), t;
-    }), y = x(() => {
-      const t = {};
-      return e.draggable && !e.fullscreen && e.mode === "dialog" && (t.cursor = "move"), t;
-    }), _ = x(() => {
-      var d;
-      const t = {};
-      return e.maxHeight && (t.maxHeight = `calc(${(d = f(e.maxHeight)) == null ? void 0 : d.replace("%", "vh")} - 50px)`), e.mode === "drawer" && (t.maxHeight = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), e.fullscreen && (t.maxHeight = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), t;
+    const f = S(() => {
+      const n = {};
+      return e.mode === "dialog" && (n.justifyContent = "center"), e.mode === "drawer" && (n.justifyContent = "flex-end"), n;
+    }), _ = S(() => {
+      const n = {};
+      return e.size && (n.width = m(e.sizes[e.size])), e.width && (n.width = m(e.width)), e.maxWidth && (n.maxWidth = m(e.maxWidth)), e.fullscreen && (n.maxWidth = "unset", n.width = "100%", n.position = "fixed", n.top = 0, n.left = 0, n.bottom = 0, n.right = 0, n.borderRadius = 0), e.draggable && !e.fullscreen && e.mode === "dialog" && (n.transform = `translate3d(${i.value - v}px, ${c.value - b}px, 0px)`), e.mode === "drawer" && (n.borderRadius = 0), n;
+    }), M = S(() => {
+      const n = {};
+      return e.draggable && !e.fullscreen && e.mode === "dialog" && (n.cursor = "move"), n;
+    }), L = S(() => {
+      var k;
+      const n = {};
+      return e.maxHeight && (n.maxHeight = `calc(${(k = m(e.maxHeight)) == null ? void 0 : k.replace("%", "vh")} - 50px)`), e.mode === "drawer" && (n.maxHeight = "unset", n.height = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), e.fullscreen && (n.maxHeight = "unset", n.height = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), e.type !== "component" && (n.padding = "0"), n;
     });
-    function S() {
-      const t = m.value;
-      if (e.form && t) {
-        const d = t.querySelector(`form[name="${e.form}"]`);
-        d && d.dispatchEvent(new Event("submit"));
+    function R() {
+      const n = p.value;
+      if (e.form && n) {
+        const k = n.querySelector(`form[name="${e.form}"]`);
+        k && k.dispatchEvent(new Event("submit"));
       }
-      r("submit", {
-        open: n == null ? void 0 : n.open,
-        close: (d) => n == null ? void 0 : n.close(e.id, d)
-      });
+      l("submit");
     }
-    function E() {
-      n == null || n.close(e.id);
+    function W() {
+      r == null || r.close(e.id);
     }
-    function D() {
+    function I() {
       window && window.addEventListener("resize", () => {
-        M(p), M(m), u = m.value.offsetLeft, v = m.value.offsetTop;
+        O(C), O(p), v = p.value.offsetLeft, b = p.value.offsetTop;
       });
     }
-    function O() {
+    function d() {
       if (e.closeable && e.esc) {
-        const t = ({ key: d }) => {
-          d === "Escape" && (n == null || n.close(e.id), window.removeEventListener("keydown", t));
+        const n = ({ key: k }) => {
+          k === "Escape" && (r == null || r.close(e.id), window.removeEventListener("keydown", n));
         };
-        window.addEventListener("keydown", t);
+        window.addEventListener("keydown", n);
       }
     }
-    function T() {
-      u = m.value.offsetLeft, v = m.value.offsetTop;
+    function E() {
+      v = p.value.offsetLeft, b = p.value.offsetTop;
+    }
+    U(() => {
+      d(), I();
+    }), se(() => {
+    });
+    function A() {
+      return u.value = !0, () => P();
     }
-    return X(() => {
-      O(), D();
-    }), ne(() => {
-    }), (t, d) => (g(), w("div", {
+    function P() {
+      u.value = !1;
+    }
+    return s({
+      showLoading: A,
+      hideLoading: P
+    }), (n, k) => (h(), w("div", {
       ref_key: "wrapperRef",
-      ref: p,
+      ref: C,
       class: "modal-wrapper",
-      style: A(C.value),
-      onClick: d[0] || (d[0] = re((k) => t.maskClosable && c(), ["self"]))
+      style: z(f.value),
+      onClick: k[0] || (k[0] = le((je) => n.maskClosable && a(), ["self"]))
     }, [
-      b("div", {
+      y("div", {
         ref_key: "contentRef",
-        ref: m,
-        class: ie(["modal-content", { [`${t.mode}-mode`]: !0 }]),
-        style: A(L.value)
+        ref: p,
+        class: ae(["modal-content", { [`${n.mode}-mode`]: !0 }]),
+        style: z(_.value)
       }, [
-        t.header ? (g(), w("div", {
+        n.header ? (h(), w("div", {
           key: 0,
           ref_key: "headerRef",
-          ref: l,
+          ref: g,
           class: "modal-header",
-          style: A(y.value),
-          onMousedown: T
+          style: z(M.value),
+          onMousedown: E
         }, [
-          b("div", Me, le(t.title), 1),
-          b("div", ke, [
-            t.closeable ? (g(), w("div", {
+          y("div", Ae, B(n.title), 1),
+          y("div", Pe, [
+            n.closeable ? (h(), w("div", {
               key: 0,
               class: "i-icon-park-outline:close block cursor-pointer",
-              onClick: c
+              onClick: a
             })) : $("", !0)
           ])
         ], 36)) : $("", !0),
-        b("div", {
+        y("div", {
           class: "modal-body",
-          style: A(_.value)
+          style: z(L.value)
         }, [
-          (g(), W(se(t.component), ae(ue(t.componentProps)), null, 16))
+          (h(), F(j(n.component), de(ce(n.componentProps)), null, 16))
         ], 4),
-        t.footer ? (g(), w("div", Ae, [
-          b("button", {
+        n.footer ? (h(), w("div", ze, [
+          y("button", {
             class: "submit-button",
-            form: t.form,
+            form: n.form,
             type: "submit",
-            onClick: S
-          }, " 确定 ", 8, Pe),
-          b("button", {
+            onClick: R
+          }, " 确定 ", 8, Be),
+          y("button", {
             class: "cancel-button",
             type: "button",
-            onClick: E
+            onClick: W
           }, " 取消 ")
-        ])) : $("", !0)
+        ])) : $("", !0),
+        u.value ? (h(), w("div", Oe, De)) : $("", !0)
       ], 6)
     ], 4));
   }
 });
-const G = (o, i) => {
-  const e = o.__vccOpts || o;
-  for (const [r, n] of i)
-    e[r] = n;
-  return e;
-}, ze = /* @__PURE__ */ G(Be, [["__scopeId", "data-v-33b22316"]]), Le = {
+const G = (t, s) => {
+  const o = t.__vccOpts || t;
+  for (const [e, l] of s)
+    o[e] = l;
+  return o;
+}, He = /* @__PURE__ */ G(Fe, [["__scopeId", "data-v-450bcc09"]]), Re = { class: "modal-dialog" }, We = { class: "dialog-body" }, Ie = { class: "dialog-title" }, Ve = { class: "dialog-content" }, Xe = /* @__PURE__ */ Y({
+  __name: "modal-dialog",
+  props: {
+    type: {},
+    title: {},
+    content: {},
+    okText: { default: "确定" },
+    cancelText: { default: "取消" },
+    onOk: {},
+    onCancel: {},
+    footer: {}
+  },
+  setup(t) {
+    const s = t, o = Ue(), e = S(() => s.title ? s.title : {
+      confirm: "提示",
+      info: "提示",
+      warning: "警告",
+      error: "错误",
+      success: "成功"
+    }[s.type]);
+    async function l() {
+      s.onOk && await s.onOk(), o.close();
+    }
+    async function r() {
+      s.onCancel && await s.onCancel(), o.close();
+    }
+    return (u, v) => (h(), w("section", Re, [
+      y("div", We, [
+        y("div", Ie, B(e.value), 1),
+        y("div", Ve, B(u.content), 1)
+      ]),
+      y("div", {
+        class: "dialog-footer space-x-2",
+        style: z(u.type === "confirm" ? { "justify-content": "end" } : { "border-top": "none" })
+      }, [
+        u.footer ? (h(), F(j(u.footer), { key: 0 })) : (h(), w(X, { key: 1 }, [
+          y("button", {
+            class: "submit-button",
+            type: "submit",
+            onClick: l
+          }, B(u.okText), 1),
+          u.type === "confirm" ? (h(), w("button", {
+            key: 0,
+            class: "cancel-button",
+            type: "button",
+            onClick: r
+          }, B(u.cancelText), 1)) : $("", !0)
+        ], 64))
+      ], 4)
+    ]));
+  }
+});
+const Ye = /* @__PURE__ */ G(Xe, [["__scopeId", "data-v-8326e5a5"]]), Ke = {
   key: 0,
   class: "modal-teleport"
-}, De = {
+}, qe = {
   name: "ModalProvider",
   inheritAttrs: !0
-}, Oe = /* @__PURE__ */ I({
-  ...De,
+}, Ge = /* @__PURE__ */ Y({
+  ...qe,
   props: {
     appendToBody: { type: [Boolean, String], default: !1 },
     sizes: { default: () => ({
@@ -281,71 +352,106 @@ const G = (o, i) => {
     maxWidth: { default: "80%" },
     maxHeight: { default: "80%" }
   },
-  setup(o, { expose: i }) {
-    const e = P([]), r = B(!1);
-    async function n(l, a, s) {
-      const c = ge(
-        () => Promise.resolve(l)
+  setup(t, { expose: s }) {
+    const o = T([]), e = N(!1), l = q();
+    function r(i, c = {}, a = {}) {
+      const m = be(
+        () => Promise.resolve(typeof i == "string" ? Ye : i)
       );
-      return new Promise((f) => {
-        e.value.push({
-          id: Math.random().toString(32).slice(2),
-          component: c,
-          props: a,
-          options: s,
-          resolve: f,
-          onSubmit: B(null)
-        }), M(e);
+      typeof i == "string" && (c.type = i, a.size = "small", a.fullscreen = !1, a.mode = "dialog", a.footer = !1, a.header = !1);
+      const f = Math.random().toString(32).slice(2), _ = new Promise((M) => {
+        o.value.push({
+          id: f,
+          component: m,
+          props: c || {},
+          options: {
+            ...a,
+            type: typeof i == "string" ? i : "component"
+          },
+          resolve: M,
+          listeners: []
+        }), O(o);
+      });
+      return Object.assign(_, {
+        close: () => u(f)
       });
     }
-    function u(l, a) {
-      const s = e.value.findIndex((f) => f.id === l);
-      if (s < 0)
+    function u(i, c) {
+      const a = o.value.findIndex((f) => f.id === i);
+      if (a < 0)
         return;
-      const c = e.value[s];
-      c == null || c.resolve(a), e.value.splice(s, 1), M(e);
+      const m = o.value[a];
+      m == null || m.resolve(c), o.value.splice(a, 1), O(o);
     }
     function v() {
-      e.value.forEach((l) => {
-        l.resolve();
-      }), e.value = [], M(e);
+      o.value.forEach((i) => {
+        i.resolve();
+      }), o.value = [], O(o);
     }
-    function p(l) {
-      return e.value.find((a) => a.id === l);
+    function b(i, c) {
+      const a = o.value.find((f) => f.id === i);
+      if (!a)
+        return;
+      const m = a.listeners.find((f) => f.event === c);
+      m && m.callback({
+        open: r,
+        close: () => u(a.id),
+        closeAll: v,
+        showLoading: () => C(a.id),
+        hideLoading: () => p(a.id)
+      });
     }
-    function m(l, a) {
-      const s = e.value.find((c) => c.id === l);
-      console.log(a, 111), s && (s.onSubmit.value = a);
+    function C(i) {
+      if (!l)
+        return;
+      const [c] = l.refs[`modal-container_${i}`];
+      if (c)
+        return c.showLoading();
     }
-    return ce(z, {
-      open: n,
+    function p(i) {
+      if (!l)
+        return;
+      const [c] = l.refs[`modal-container_${i}`];
+      if (c)
+        return c.hideLoading();
+    }
+    function g(i, c, a) {
+      const m = o.value.find((f) => f.id === i);
+      m && m.listeners.push({
+        event: c,
+        callback: a
+      });
+    }
+    return pe(H, {
+      open: r,
       close: u,
       closeAll: v,
-      getElement: p,
-      addSubmitListener: m
-    }), i({
-      elements: e
-    }), X(() => {
-      r.value = !0;
-    }), (l, a) => (g(), w(F, null, [
-      de(l.$slots, "default", {}, void 0, !0),
-      r.value ? (g(), w("div", Le, [
-        (g(), W(fe, {
-          disabled: !l.appendToBody,
-          to: typeof l.appendToBody == "string" ? l.appendToBody : "body"
+      addEventListener: g
+    }), s({
+      elements: o
+    }), U(() => {
+      e.value = !0;
+    }), (i, c) => (h(), w(X, null, [
+      me(i.$slots, "default", {}, void 0, !0),
+      e.value ? (h(), w("div", Ke, [
+        (h(), F(ve, {
+          disabled: !i.appendToBody,
+          to: typeof i.appendToBody == "string" ? i.appendToBody : "body"
         }, [
-          pe(me, { name: "modal-fade" }, {
-            default: ve(() => [
-              (g(!0), w(F, null, ye(e.value, (s) => (g(), W(ze, he({
-                id: s.id,
-                key: s.id,
-                component: s.component,
-                "component-props": s.props,
-                "max-height": l.maxHeight,
-                "max-width": l.maxWidth,
-                sizes: l.sizes
-              }, s.options, {
-                onSubmit: s.onSubmit.value
+          ye(he, { name: "modal-fade" }, {
+            default: ge(() => [
+              (h(!0), w(X, null, _e(o.value, (a) => (h(), F(He, we({
+                id: a.id,
+                key: a.id,
+                ref_for: !0,
+                ref: `modal-container_${a.id}`,
+                component: a.component,
+                "component-props": a.props,
+                "max-height": i.maxHeight,
+                "max-width": i.maxWidth,
+                sizes: i.sizes
+              }, a.options, {
+                onSubmit: () => b(a.id, "submit")
               }), null, 16, ["id", "component", "component-props", "max-height", "max-width", "sizes", "onSubmit"]))), 128))
             ]),
             _: 1
@@ -355,47 +461,66 @@ const G = (o, i) => {
     ], 64));
   }
 });
-const He = /* @__PURE__ */ G(Oe, [["__scopeId", "data-v-cec9e05a"]]);
-function U(o, i) {
-  var r, n;
-  let e = o == null ? void 0 : o.parent;
-  for (; e && ((r = e == null ? void 0 : e.type) == null ? void 0 : r.name) !== i; )
-    e = e.parent;
-  return ((n = e == null ? void 0 : e.type) == null ? void 0 : n.name) === i ? e : null;
+const Qe = /* @__PURE__ */ G(Ge, [["__scopeId", "data-v-09133e47"]]);
+function D(t, s) {
+  var e, l;
+  let o = t == null ? void 0 : t.parent;
+  for (; o && ((e = o == null ? void 0 : o.type) == null ? void 0 : e.name) !== s; )
+    o = o.parent;
+  return ((l = o == null ? void 0 : o.type) == null ? void 0 : l.name) === s ? o : null;
 }
-function We() {
-  const o = N(z), i = Y();
+function Ue() {
+  const t = K(H), s = q();
+  function o(e, l, r) {
+    if (!t)
+      throw new Error("Not Found Modal Provider Component");
+    return t.open(e, l, r);
+  }
   return {
-    open(e, r, n) {
-      if (!o)
-        throw new Error("Not Found Modal Provider Component");
-      return o.open(e, r || {}, n || {});
-    },
+    open: o,
     close(e) {
       var u;
-      if (!o)
+      if (!t)
         throw new Error("Not Found Modal Provider Component");
-      const r = U(i, "ModalContainer"), n = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
-      if (!n)
+      const l = D(s, "ModalContainer"), r = (u = l == null ? void 0 : l.props) == null ? void 0 : u.id;
+      if (!r)
         throw new Error("Not Found Current Modal Container");
-      o.close(n, e);
+      t.close(r, e);
     },
     closeAll() {
-      if (!o)
+      if (!t)
+        throw new Error("Not Found Modal Provider Component");
+      t.closeAll();
+    },
+    showLoading() {
+      var r;
+      if (!t)
         throw new Error("Not Found Modal Provider Component");
-      o.closeAll();
+      const e = D(s, "ModalContainer");
+      if (!((r = e == null ? void 0 : e.props) == null ? void 0 : r.id))
+        throw new Error("Not Found Current Modal Container");
+      e != null && e.exposed && (e == null || e.exposed.showLoading());
+    },
+    hideLoading() {
+      var r;
+      if (!t)
+        throw new Error("Not Found Modal Provider Component");
+      const e = D(s, "ModalContainer");
+      if (!((r = e == null ? void 0 : e.props) == null ? void 0 : r.id))
+        throw new Error("Not Found Current Modal Container");
+      e != null && e.exposed && (e == null || e.exposed.hideLoading());
     }
   };
 }
-function Ne(o) {
-  var u;
-  const i = N(z), e = Y(), r = U(e, "ModalContainer"), n = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
-  i && n && i.addSubmitListener(n, o);
+function Ze(t) {
+  var r;
+  const s = K(H), o = q(), e = D(o, "ModalContainer"), l = (r = e == null ? void 0 : e.props) == null ? void 0 : r.id;
+  s && l && s.addEventListener(l, "submit", t);
 }
 export {
-  ze as ModalContainer,
-  z as ModalKey,
-  He as ModalProvider,
-  Ne as onSubmit,
-  We as useModal
+  He as ModalContainer,
+  H as ModalKey,
+  Qe as ModalProvider,
+  Ze as onSubmit,
+  Ue as useModal
 };

package/dist/es/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { Component, Ref } from 'vue';
+import type { Component } from 'vue';
 import type { useModal } from './hooks/use-modal';
 export interface SizeOptions {
     small: number;
@@ -25,13 +25,19 @@ export interface ModalElement extends OpenModalOptions {
     resolve: (data?: any) => void;
     component: Component;
     props: Record<string, any>;
-    options: OpenModalOptions;
-    onSubmit: Ref<((actions: ReturnType<typeof useModal>) => void) | null>;
+    options: OpenModalOptions & {
+        type?: string;
+    };
+    listeners: {
+        event: string;
+        callback: (actions: ReturnType<typeof useModal>) => void;
+    }[];
 }
 export interface ModalActions {
-    open: (component: Component, props: Record<string, any>, options: OpenModalOptions) => Promise<any | void>;
+    open: (component: Component | 'confirm' | 'info' | 'warning' | 'error' | 'sucess', props?: Record<string, any>, options?: OpenModalOptions) => Promise<any> & {
+        close: () => void;
+    };
     close: (id: string, data?: any) => void;
     closeAll: () => void;
-    getElement: (id: string) => ModalElement | undefined;
-    addSubmitListener: (id: string, fun: (modal: ReturnType<typeof useModal>) => void) => void;
+    addEventListener: (id: string, event: 'submit', callback: (modal: ReturnType<typeof useModal>) => void) => void;
 }

package/dist/style.css

@@ -1 +1 @@
-*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-icon-park-outline\:close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 48 48' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m8 8l32 32M8 40L40 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em}.fixed{position:fixed}.block{display:block}.flex{display:flex}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.resize{resize:both}.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(.5rem * var(--un-space-x-reverse))}.px{padding-left:1rem;padding-right:1rem}.font-bold{font-weight:700}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease{transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-wrapper[data-v-33b22316]{z-index:1000;position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;background:rgba(0,0,0,.3)}.modal-content[data-v-33b22316]{background:#ffffff;border-radius:5px}.modal-header[data-v-33b22316]{box-sizing:border-box;padding:10px;height:50px;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1px var(--color-border-1, #e8e8e8)}.modal-body[data-v-33b22316]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-33b22316]{box-sizing:border-box;height:50px;border-top:solid 1px var(--color-border-1, #e8e8e8);display:flex;justify-content:end;padding:10px}.modal-footer button[data-v-33b22316]{height:28px;line-height:28px;width:80px;outline:none;border-color:transparent;font-size:14px;border-radius:4px;padding:0;box-sizing:content-box}.modal-footer button.submit-button[data-v-33b22316]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-33b22316]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-33b22316]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.modal-footer button.cancel-button[data-v-33b22316]:hover{background-color:var(--color-fill-4, #c9cdd4)}.modal-fade-enter-active[data-v-cec9e05a],.modal-fade-leave-active[data-v-cec9e05a]{transition:opacity .5s ease}.modal-fade-enter-active[data-v-cec9e05a] .modal-content.drawer-mode,.modal-fade-leave-active[data-v-cec9e05a] .modal-content.drawer-mode{transition:transform .5s ease}.modal-fade-enter-from[data-v-cec9e05a],.modal-fade-leave-to[data-v-cec9e05a]{opacity:0}.modal-fade-enter-from[data-v-cec9e05a] .modal-content.drawer-mode,.modal-fade-leave-to[data-v-cec9e05a] .modal-content.drawer-mode{transform:translate3d(100%,0,0)}
+*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.i-icon-park-outline\:close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 48 48' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m8 8l32 32M8 40L40 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.resize{resize:both}.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(.5rem * var(--un-space-x-reverse))}.border{border-width:1px}.px{padding-left:1rem;padding-right:1rem}.font-bold{font-weight:700}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease{transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-wrapper[data-v-450bcc09]{z-index:1000;position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;background:rgba(0,0,0,.3)}.modal-content[data-v-450bcc09]{background:#ffffff;border-radius:5px;position:relative}.modal-header[data-v-450bcc09]{box-sizing:border-box;padding:10px;height:50px;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1px var(--color-border-1, #e8e8e8)}.modal-body[data-v-450bcc09]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-450bcc09]{box-sizing:border-box;height:50px;border-top:solid 1px var(--color-border-1, #e8e8e8);display:flex;justify-content:end;padding:10px}.modal-footer button[data-v-450bcc09]{height:28px;line-height:28px;width:80px;outline:none;border-color:transparent;font-size:14px;border-radius:4px;padding:0;box-sizing:content-box}.modal-footer button.submit-button[data-v-450bcc09]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-450bcc09]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-450bcc09]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.modal-footer button.cancel-button[data-v-450bcc09]:hover{background-color:var(--color-fill-4, #c9cdd4)}.modal-loading[data-v-450bcc09]{position:absolute;z-index:1001;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#0000001a}.modal-loading .lds-ring[data-v-450bcc09]{display:inline-block;position:relative;width:80px;height:80px}.modal-loading .lds-ring div[data-v-450bcc09]{box-sizing:border-box;display:block;position:absolute;width:48px;height:48px;margin:8px;border:5px solid #fff;border-radius:50%;animation:lds-ring-450bcc09 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#fff transparent transparent transparent}.modal-loading .lds-ring div[data-v-450bcc09]:nth-child(1){animation-delay:-.45s}.modal-loading .lds-ring div[data-v-450bcc09]:nth-child(2){animation-delay:-.3s}.modal-loading .lds-ring div[data-v-450bcc09]:nth-child(3){animation-delay:-.15s}@keyframes lds-ring-450bcc09{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dialog-body[data-v-8326e5a5]{padding:20px 10px 10px}.dialog-title[data-v-8326e5a5]{padding:5px;font-weight:700;font-size:16px}.dialog-content[data-v-8326e5a5]{padding:5px}.dialog-footer[data-v-8326e5a5]{box-sizing:border-box;height:50px;border-top:solid 1px var(--color-border-1, #e8e8e8);display:flex;justify-content:center;align-items:center;padding:0 10px}.dialog-footer button[data-v-8326e5a5]{height:28px;line-height:28px;width:80px;outline:none;border-color:transparent;font-size:14px;border-radius:4px;padding:0;box-sizing:content-box}.dialog-footer button.submit-button[data-v-8326e5a5]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.dialog-footer button.submit-button[data-v-8326e5a5]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.dialog-footer button.cancel-button[data-v-8326e5a5]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.dialog-footer button.cancel-button[data-v-8326e5a5]:hover{background-color:var(--color-fill-4, #c9cdd4)}.modal-fade-enter-active[data-v-09133e47],.modal-fade-leave-active[data-v-09133e47]{transition:opacity .5s ease}.modal-fade-enter-active[data-v-09133e47] .modal-content.drawer-mode,.modal-fade-leave-active[data-v-09133e47] .modal-content.drawer-mode{transition:transform .5s ease}.modal-fade-enter-from[data-v-09133e47],.modal-fade-leave-to[data-v-09133e47]{opacity:0}.modal-fade-enter-from[data-v-09133e47] .modal-content.drawer-mode,.modal-fade-leave-to[data-v-09133e47] .modal-content.drawer-mode{transform:translate3d(100%,0,0)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gopowerteam/modal-render",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": {
     "name": "zhuchentong",
     "email": "2037630@gmail.com"