@gopowerteam/modal-render 0.0.2 → 0.0.4

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

@@ -2,14 +2,14 @@ import type { Component } from 'vue';
 import type { SizeOptions } from '../interfaces';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id: string;
-    formId?: string;
+    form?: string;
     component: Component;
     componentProps: Record<string, any>;
     width?: number | string;
     maxWidth?: number | string;
     maxHeight?: number | string;
     sizes: SizeOptions;
-    size: 'small' | 'middle' | 'large';
+    size: 'small' | 'middle' | 'large' | 'fullscreen';
     title?: string;
     header?: boolean;
     footer?: boolean;
@@ -17,6 +17,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     esc?: boolean;
     maskClosable?: boolean;
     draggable?: boolean;
+    mode?: 'dialog' | 'drawer';
 }>, {
     header: boolean;
     closeable: boolean;
@@ -26,18 +27,19 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: string;
     esc: boolean;
     draggable: boolean;
+    mode: string;
 }>, {}, 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;
-    formId?: string;
+    form?: string;
     component: Component;
     componentProps: Record<string, any>;
     width?: number | string;
     maxWidth?: number | string;
     maxHeight?: number | string;
     sizes: SizeOptions;
-    size: 'small' | 'middle' | 'large';
+    size: 'small' | 'middle' | 'large' | 'fullscreen';
     title?: string;
     header?: boolean;
     footer?: boolean;
@@ -45,6 +47,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     esc?: boolean;
     maskClosable?: boolean;
     draggable?: boolean;
+    mode?: 'dialog' | 'drawer';
 }>, {
     header: boolean;
     closeable: boolean;
@@ -54,6 +57,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: string;
     esc: boolean;
     draggable: boolean;
+    mode: string;
 }>>> & {
     onSubmit?: (...args: any[]) => any;
 }, {
@@ -61,9 +65,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     closeable: boolean;
     footer: boolean;
     maskClosable: boolean;
-    size: 'small' | 'middle' | 'large';
+    size: 'small' | 'middle' | 'large' | 'fullscreen';
     esc: boolean;
     draggable: boolean;
+    mode: 'dialog' | 'drawer';
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");const B=Symbol("__MODAL__");function R(o){return e.getCurrentScope()?(e.onScopeDispose(o),!0):!1}function g(o){return typeof o=="function"?o():e.unref(o)}const V=typeof window<"u"&&typeof document<"u",W=Object.prototype.toString,D=o=>W.call(o)==="[object Object]",T=()=>{};function F(o,a={}){if(!e.isRef(o))return e.toRefs(o);const t=Array.isArray(o.value)?Array.from({length:o.value.length}):{};for(const n in o.value)t[n]=e.customRef(()=>({get(){return o.value[n]},set(r){var u;if((u=g(a.replaceRef))!=null?u:!0)if(Array.isArray(o.value)){const p=[...o.value];p[n]=r,o.value=p}else{const p={...o.value,[n]:r};Object.setPrototypeOf(p,Object.getPrototypeOf(o.value)),o.value=p}else o.value[n]=r}}));return t}function H(o){var a;const t=g(o);return(a=t==null?void 0:t.$el)!=null?a:t}const z=V?window:void 0;function A(...o){let a,t,n,r;if(typeof o[0]=="string"||Array.isArray(o[0])?([t,n,r]=o,a=z):[a,t,n,r]=o,!a)return T;Array.isArray(t)||(t=[t]),Array.isArray(n)||(n=[n]);const u=[],v=()=>{u.forEach(d=>d()),u.length=0},p=(d,c,f,m)=>(d.addEventListener(c,f,m),()=>d.removeEventListener(c,f,m)),_=e.watch(()=>[H(a),g(r)],([d,c])=>{if(v(),!d)return;const f=D(c)?{...c}:c;u.push(...t.flatMap(m=>n.map(w=>p(d,m,w,f))))},{immediate:!0,flush:"post"}),s=()=>{_(),v()};return R(s),s}function I(o,a={}){var t,n;const{pointerTypes:r,preventDefault:u,stopPropagation:v,exact:p,onMove:_,onEnd:s,onStart:d,initialValue:c,axis:f="both",draggingElement:m=z,containerElement:w,handle:M=o}=a,y=e.ref((t=g(c))!=null?t:{x:0,y:0}),b=e.ref(),k=l=>r?r.includes(l.pointerType):!0,E=l=>{g(u)&&l.preventDefault(),g(v)&&l.stopPropagation()},S=l=>{var h;if(!k(l)||g(p)&&l.target!==g(o))return;const N=((h=g(w))!=null?h:g(o)).getBoundingClientRect(),O={x:l.clientX-N.left,y:l.clientY-N.top};(d==null?void 0:d(O,l))!==!1&&(b.value=O,E(l))},x=l=>{if(!k(l)||!b.value)return;let{x:h,y:C}=y.value;(f==="x"||f==="both")&&(h=l.clientX-b.value.x),(f==="y"||f==="both")&&(C=l.clientY-b.value.y),y.value={x:h,y:C},_==null||_(y.value,l),E(l)},i=l=>{k(l)&&b.value&&(b.value=void 0,s==null||s(y.value,l),E(l))};if(V){const l={capture:(n=a.capture)!=null?n:!0};A(M,"pointerdown",S,l),A(m,"pointermove",x,l),A(m,"pointerup",i,l)}return{...F(y),position:y,isDragging:e.computed(()=>!!b.value),style:e.computed(()=>`left:${y.value.x}px;top:${y.value.y}px;`)}}const X={class:"modal-container"},Y={class:"title font-bold"},K={class:"action"},q={key:1,class:"modal-footer space-x-2"},G=["form"],U={name:"ModalContainer",inheritAttrs:!0},J=e.defineComponent({...U,props:{id:{},formId:{},component:{},componentProps:{},width:{},maxWidth:{},maxHeight:{},sizes:{},size:{default:"middle"},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}},emits:["submit"],setup(o,{emit:a}){const t=o,n=a,r=e.inject(B);let u=0,v=0,p;const _=e.shallowRef(),s=e.shallowRef(),{x:d,y:c}=I(s,{initialValue:{x:0,y:0}});function f(){r==null||r.close(t.id)}function m(i){if(typeof i=="number")return`${i}px`;if(typeof i=="string")return i}const w=e.computed(()=>{const i={};return t.size&&(i.width=m(t.sizes[t.size])),t.width&&(i.width=m(t.width)),t.maxWidth&&(i.maxWidth=m(t.maxWidth)),t.draggable&&(i.transform=`translate(${d.value-u}px, ${c.value-v}px)`),i}),M=e.computed(()=>{const i={};return t.draggable&&(i.cursor="move"),i}),y=e.computed(()=>{var l;const i={};return t.maxHeight&&(i.maxHeight=`calc(${(l=m(t.maxWidth))==null?void 0:l.replace("%","vh")} - 50px)`),i});function b(){n("submit")}function k(){r==null||r.close(t.id)}function E(){window&&window.addEventListener("resize",()=>{e.triggerRef(_),e.triggerRef(s),u=s.value.offsetLeft,v=s.value.offsetTop})}function S(){if(t.closeable&&t.esc){const i=({key:l})=>{l==="Escape"&&(r==null||r.close(t.id),window.removeEventListener("keydown",i))};window.addEventListener("keydown",i)}}function x(){p=new MutationObserver(i=>{i.forEach(l=>{const h=s.value.offsetLeft,C=s.value.offsetTop;h!==u&&(u=h),C!==v&&(v=h)})}),p.observe(s.value,{attributes:!0,attributeFilter:["style","offsetHeight","offsetWidth","clientHeight","clientWidth"],attributeOldValue:!0})}return e.onMounted(()=>{S(),x(),E()}),e.onUnmounted(()=>{p&&(p.disconnect(),p.takeRecords())}),(i,l)=>(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{ref_key:"wrapperRef",ref:_,class:"modal-wrapper",onClick:l[0]||(l[0]=e.withModifiers(h=>i.maskClosable&&f(),["self"]))},[e.createElementVNode("div",{ref_key:"contentRef",ref:s,class:"modal-content",style:e.normalizeStyle(w.value)},[i.header?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"",class:"modal-header",style:e.normalizeStyle(M.value)},[e.createElementVNode("div",Y,e.toDisplayString(i.title),1),e.createElementVNode("div",K,[i.closeable?(e.openBlock(),e.createElementBlock("div",{key:0,class:"i-icon-park-outline:close block cursor-pointer",onClick:f})):e.createCommentVNode("",!0)])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"modal-body",style:e.normalizeStyle(y.value)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.component),e.normalizeProps(e.guardReactiveProps(i.componentProps)),null,16))],4),i.footer?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("button",{class:"submit-button",form:i.formId,type:"submit",onClick:b}," 确定 ",8,G),e.createElementVNode("button",{class:"cancel-button",type:"button",onClick:k}," 取消 ")])):e.createCommentVNode("",!0)],4)],512)]))}});const L=(o,a)=>{const t=o.__vccOpts||o;for(const[n,r]of a)t[n]=r;return t},$=L(J,[["__scopeId","data-v-e6f6653f"]]),Q={key:0,class:"modal-teleport"},Z={name:"ModalProvider",inheritAttrs:!0},j=e.defineComponent({...Z,props:{appendToBody:{type:Boolean,default:!1},sizes:{default:()=>({small:520,middle:860,large:1190})},maxWidth:{default:"80%"},maxHeight:{default:"80%"}},setup(o,{expose:a}){const t=e.shallowRef([]),n=e.ref(!1);async function r(s,d,c){const f=e.defineAsyncComponent(()=>Promise.resolve(s));return new Promise(m=>{t.value.push({id:Math.random().toString(32).slice(2),component:f,props:d,options:c,resolve:m,onSubmit:e.ref(()=>{})}),e.triggerRef(t)})}function u(s,d){const c=t.value.findIndex(m=>m.id===s);if(c<0)return;const f=t.value[c];f==null||f.resolve(d),t.value.splice(c,1),e.triggerRef(t)}function v(){t.value.forEach(s=>{s.resolve()}),t.value=[],e.triggerRef(t)}function p(s){return t.value.find(d=>d.id===s)}function _(s,d){const c=t.value.find(f=>f.id===s);c&&(c.onSubmit.value=d)}return e.provide(B,{open:r,close:u,closeAll:v,getElement:p,addSubmitListener:_}),a({elements:t}),e.onMounted(()=>{n.value=!0}),(s,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(s.$slots,"default",{},void 0,!0),n.value?(e.openBlock(),e.createElementBlock("div",Q,[(e.openBlock(),e.createBlock(e.Teleport,{disabled:!s.appendToBody,to:"body"},[e.createVNode(e.TransitionGroup,{name:"modal-fade"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,c=>(e.openBlock(),e.createBlock($,e.mergeProps({id:c.id,key:c.id,component:c.component,"component-props":c.props,"max-height":s.maxHeight,"max-width":s.maxWidth,sizes:s.sizes},c.options,{onSubmit:c.onSubmit.value}),null,16,["id","component","component-props","max-height","max-width","sizes","onSubmit"]))),128))]),_:1})],8,["disabled"]))])):e.createCommentVNode("",!0)],64))}});const ee=L(j,[["__scopeId","data-v-171d9bdd"]]);function P(o,a){var n,r;let t=o==null?void 0:o.parent;for(;t&&((n=t==null?void 0:t.type)==null?void 0:n.name)!==a;)t=t.parent;return((r=t==null?void 0:t.type)==null?void 0:r.name)===a?t:null}function te(){const o=e.inject(B),a=e.getCurrentInstance();return{open(t,n,r){if(!o)throw new Error("Not Found Modal Provider Component");return o.open(t,n||{},r||{})},close(t){var u;if(!o)throw new Error("Not Found Modal Provider Component");const n=P(a,"ModalContainer"),r=(u=n==null?void 0:n.props)==null?void 0:u.id;if(!r)throw new Error("Not Found Current Modal Container");o.close(r,t)},closeAll(){if(!o)throw new Error("Not Found Modal Provider Component");o.closeAll()},onSubmit(t){const n=P(a,"ModalContainer");if(!(n==null?void 0:n.props.id))throw new Error("Not Found Current Modal Container")}}}function oe(o){var u;const a=e.inject(B),t=e.getCurrentInstance(),n=P(t,"ModalContainer"),r=(u=n==null?void 0:n.props)==null?void 0:u.id;a&&r&&a.addSubmitListener(r,o)}exports.ModalContainer=$;exports.ModalProvider=ee;exports.onSubmit=oe;exports.useModal=te;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");const E=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 V=typeof window<"u"&&typeof document<"u",D=Object.prototype.toString,H=n=>D.call(n)==="[object Object]",T=()=>{};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 r in n.value)t[r]=e.customRef(()=>({get(){return n.value[r]},set(l){var u;if((u=g(i.replaceRef))!=null?u:!0)if(Array.isArray(n.value)){const m=[...n.value];m[r]=l,n.value=m}else{const m={...n.value,[r]:l};Object.setPrototypeOf(m,Object.getPrototypeOf(n.value)),n.value=m}else n.value[r]=l}}));return t}function F(n){var i;const t=g(n);return(i=t==null?void 0:t.$el)!=null?i:t}const $=V?window:void 0;function z(...n){let i,t,r,l;if(typeof n[0]=="string"||Array.isArray(n[0])?([t,r,l]=n,i=$):[i,t,r,l]=n,!i)return T;Array.isArray(t)||(t=[t]),Array.isArray(r)||(r=[r]);const u=[],y=()=>{u.forEach(c=>c()),u.length=0},m=(c,s,d,f)=>(c.addEventListener(s,d,f),()=>c.removeEventListener(s,d,f)),v=e.watch(()=>[F(i),g(l)],([c,s])=>{if(y(),!c)return;const d=H(s)?{...s}:s;u.push(...t.flatMap(f=>r.map(w=>m(c,f,w,d))))},{immediate:!0,flush:"post"}),a=()=>{v(),y()};return O(a),a}function I(n,i={}){var t,r;const{pointerTypes:l,preventDefault:u,stopPropagation:y,exact:m,onMove:v,onEnd:a,onStart:c,initialValue:s,axis:d="both",draggingElement:f=$,containerElement:w,handle:x=n}=i,h=e.ref((t=g(s))!=null?t:{x:0,y:0}),_=e.ref(),b=o=>l?l.includes(o.pointerType):!0,k=o=>{g(u)&&o.preventDefault(),g(y)&&o.stopPropagation()},S=o=>{var p;if(!b(o)||g(m)&&o.target!==g(n))return;const P=((p=g(w))!=null?p:g(n)).getBoundingClientRect(),N={x:o.clientX-P.left,y:o.clientY-P.top};(c==null?void 0:c(N,o))!==!1&&(_.value=N,k(o))},M=o=>{if(!b(o)||!_.value)return;let{x:p,y:C}=h.value;(d==="x"||d==="both")&&(p=o.clientX-_.value.x),(d==="y"||d==="both")&&(C=o.clientY-_.value.y),h.value={x:p,y:C},v==null||v(h.value,o),k(o)},B=o=>{b(o)&&_.value&&(_.value=void 0,a==null||a(h.value,o),k(o))};if(V){const o={capture:(r=i.capture)!=null?r:!0};z(x,"pointerdown",S,o),z(f,"pointermove",M,o),z(f,"pointerup",B,o)}return{...W(h),position:h,isDragging:e.computed(()=>!!_.value),style:e.computed(()=>`left:${h.value.x}px;top:${h.value.y}px;`)}}const X={class:"modal-container fixed inset-0"},Y={class:"title font-bold"},q={class:"action"},K={key:1,class:"modal-footer space-x-2"},j=["form"],G={name:"ModalContainer",inheritAttrs:!0},U=e.defineComponent({...G,props:{id:{},form:{},component:{},componentProps:{},width:{},maxWidth:{},maxHeight:{},sizes:{},size:{default:"middle"},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,r=i,l=e.inject(E);let u=0,y=0;const m=e.shallowRef(),v=e.shallowRef(),a=e.shallowRef(),{x:c,y:s}=I(a,{initialValue:{x:0,y:0}});function d(){l==null||l.close(t.id)}function f(o){if(typeof o=="number")return`${o}px`;if(typeof o=="string")return o}const w=e.computed(()=>{const o={};return t.mode==="dialog"&&(o.justifyContent="center"),t.mode==="drawer"&&(o.justifyContent="flex-end"),o}),x=e.computed(()=>{const o={};return t.size&&(o.width=f(t.sizes[t.size])),t.width&&(o.width=f(t.width)),t.maxWidth&&(o.maxWidth=f(t.maxWidth)),t.size==="fullscreen"&&(o.maxWidth="unset",o.position="fixed",o.top=0,o.left=0,o.bottom=0,o.right=0),t.draggable&&t.size!=="fullscreen"&&t.mode==="dialog"&&(o.transform=`translate3d(${c.value-u}px, ${s.value-y}px, 0px)`),o}),h=e.computed(()=>{const o={};return t.draggable&&t.size!=="fullscreen"&&t.mode==="dialog"&&(o.cursor="move"),o}),_=e.computed(()=>{var p;const o={};return t.maxHeight&&(o.maxHeight=`calc(${(p=f(t.maxHeight))==null?void 0:p.replace("%","vh")} - 50px)`),t.mode==="drawer"&&(o.maxHeight=`calc(100vh - ${(t.header?50:0)+(t.footer?50:0)}px)`),t.size==="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 p=o.querySelector(`form[name="${t.form}"]`);p&&p.dispatchEvent(new Event("submit"))}r("submit")}function k(){l==null||l.close(t.id)}function S(){window&&window.addEventListener("resize",()=>{e.triggerRef(m),e.triggerRef(v),u=v.value.offsetLeft,y=v.value.offsetTop})}function M(){if(t.closeable&&t.esc){const o=({key:p})=>{p==="Escape"&&(l==null||l.close(t.id),window.removeEventListener("keydown",o))};window.addEventListener("keydown",o)}}function B(){u=v.value.offsetLeft,y=v.value.offsetTop}return e.onMounted(()=>{M(),S()}),e.onUnmounted(()=>{}),(o,p)=>(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{ref_key:"wrapperRef",ref:m,class:"modal-wrapper",style:e.normalizeStyle(w.value),onClick:p[0]||(p[0]=e.withModifiers(C=>o.maskClosable&&d(),["self"]))},[e.createElementVNode("div",{ref_key:"contentRef",ref:v,class:e.normalizeClass(["modal-content",{[`${o.mode}-mode`]:!0}]),style:e.normalizeStyle(x.value)},[o.header?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"headerRef",ref:a,class:"modal-header",style:e.normalizeStyle(h.value),onMousedown:B},[e.createElementVNode("div",Y,e.toDisplayString(o.title),1),e.createElementVNode("div",q,[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(_.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",K,[e.createElementVNode("button",{class:"submit-button",form:o.form,type:"submit",onClick:b}," 确定 ",8,j),e.createElementVNode("button",{class:"cancel-button",type:"button",onClick:k}," 取消 ")])):e.createCommentVNode("",!0)],6)],4)]))}});const R=(n,i)=>{const t=n.__vccOpts||n;for(const[r,l]of i)t[r]=l;return t},L=R(U,[["__scopeId","data-v-581eba51"]]),J={key:0,class:"modal-teleport"},Q={name:"ModalProvider",inheritAttrs:!0},Z=e.defineComponent({...Q,props:{appendToBody:{type:Boolean,default:!1},sizes:{default:()=>({small:520,middle:860,large:1190})},maxWidth:{default:"80%"},maxHeight:{default:"80%"}},setup(n,{expose:i}){const t=e.shallowRef([]),r=e.ref(!1);async function l(a,c,s){const d=e.defineAsyncComponent(()=>Promise.resolve(a));return new Promise(f=>{t.value.push({id:Math.random().toString(32).slice(2),component:d,props:c,options:s,resolve:f,onSubmit:e.ref(()=>{})}),e.triggerRef(t)})}function u(a,c){const s=t.value.findIndex(f=>f.id===a);if(s<0)return;const d=t.value[s];d==null||d.resolve(c),t.value.splice(s,1),e.triggerRef(t)}function y(){t.value.forEach(a=>{a.resolve()}),t.value=[],e.triggerRef(t)}function m(a){return t.value.find(c=>c.id===a)}function v(a,c){const s=t.value.find(d=>d.id===a);s&&(s.onSubmit.value=c)}return e.provide(E,{open:l,close:u,closeAll:y,getElement:m,addSubmitListener:v}),i({elements:t}),e.onMounted(()=>{r.value=!0}),(a,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(a.$slots,"default",{},void 0,!0),r.value?(e.openBlock(),e.createElementBlock("div",J,[(e.openBlock(),e.createBlock(e.Teleport,{disabled:!a.appendToBody,to:"body"},[e.createVNode(e.TransitionGroup,{name:"modal-fade"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,s=>(e.openBlock(),e.createBlock(L,e.mergeProps({id:s.id,key:s.id,component:s.component,"component-props":s.props,"max-height":a.maxHeight,"max-width":a.maxWidth,sizes:a.sizes},s.options,{onSubmit:s.onSubmit.value}),null,16,["id","component","component-props","max-height","max-width","sizes","onSubmit"]))),128))]),_:1})],8,["disabled"]))])):e.createCommentVNode("",!0)],64))}});const ee=R(Z,[["__scopeId","data-v-1ef03c20"]]);function A(n,i){var r,l;let t=n==null?void 0:n.parent;for(;t&&((r=t==null?void 0:t.type)==null?void 0:r.name)!==i;)t=t.parent;return((l=t==null?void 0:t.type)==null?void 0:l.name)===i?t:null}function te(){const n=e.inject(E),i=e.getCurrentInstance();return{open(t,r,l){if(!n)throw new Error("Not Found Modal Provider Component");return n.open(t,r||{},l||{})},close(t){var u;if(!n)throw new Error("Not Found Modal Provider Component");const r=A(i,"ModalContainer"),l=(u=r==null?void 0:r.props)==null?void 0:u.id;if(!l)throw new Error("Not Found Current Modal Container");n.close(l,t)},closeAll(){if(!n)throw new Error("Not Found Modal Provider Component");n.closeAll()},onSubmit(t){const r=A(i,"ModalContainer");if(!(r==null?void 0:r.props.id))throw new Error("Not Found Current Modal Container")}}}function oe(n){var u;const i=e.inject(E),t=e.getCurrentInstance(),r=A(t,"ModalContainer"),l=(u=r==null?void 0:r.props)==null?void 0:u.id;i&&l&&i.addSubmitListener(l,n)}exports.ModalContainer=L;exports.ModalProvider=ee;exports.onSubmit=oe;exports.useModal=te;

package/dist/index.js

@@ -1,130 +1,130 @@
-import { unref as J, isRef as Q, toRefs as Z, customRef as j, getCurrentScope as ee, onScopeDispose as te, ref as O, computed as k, watch as ne, defineComponent as X, inject as V, shallowRef as H, onMounted as Y, onUnmounted as oe, openBlock as _, createElementBlock as C, createElementVNode as w, withModifiers as re, normalizeStyle as W, toDisplayString as ie, createCommentVNode as P, createBlock as N, resolveDynamicComponent as se, normalizeProps as le, guardReactiveProps as ae, triggerRef as A, provide as ue, Fragment as R, renderSlot as ce, Teleport as de, createVNode as fe, TransitionGroup as pe, withCtx as ve, renderList as me, mergeProps as ye, defineAsyncComponent as he, getCurrentInstance as K } from "vue";
-const z = Symbol("__MODAL__");
-function _e(t) {
-  return ee() ? (te(t), !0) : !1;
+import { unref as J, isRef as Q, toRefs as Z, customRef as j, getCurrentScope as ee, onScopeDispose as te, ref as $, computed as x, watch as oe, defineComponent as X, inject as R, shallowRef as A, onMounted as Y, onUnmounted as ne, openBlock as g, createElementBlock as b, createElementVNode as w, normalizeStyle as z, withModifiers as re, normalizeClass as ie, toDisplayString as se, createCommentVNode as P, createBlock as N, resolveDynamicComponent as le, normalizeProps as ae, guardReactiveProps as ue, triggerRef as S, provide as de, Fragment as I, renderSlot as ce, Teleport as fe, createVNode as pe, TransitionGroup as me, withCtx as ve, renderList as ye, mergeProps as he, defineAsyncComponent as ge, getCurrentInstance as K } from "vue";
+const B = Symbol("__MODAL__");
+function _e(o) {
+  return ee() ? (te(o), !0) : !1;
 }
-function h(t) {
-  return typeof t == "function" ? t() : J(t);
+function h(o) {
+  return typeof o == "function" ? o() : J(o);
 }
-const G = typeof window < "u" && typeof document < "u", ge = Object.prototype.toString, be = (t) => ge.call(t) === "[object Object]", we = () => {
+const q = typeof window < "u" && typeof document < "u", we = Object.prototype.toString, be = (o) => we.call(o) === "[object Object]", xe = () => {
 };
-function Ce(t, l = {}) {
-  if (!Q(t))
-    return Z(t);
-  const e = Array.isArray(t.value) ? Array.from({ length: t.value.length }) : {};
-  for (const n in t.value)
+function Ce(o, i = {}) {
+  if (!Q(o))
+    return Z(o);
+  const e = Array.isArray(o.value) ? Array.from({ length: o.value.length }) : {};
+  for (const n in o.value)
     e[n] = j(() => ({
       get() {
-        return t.value[n];
+        return o.value[n];
       },
-      set(o) {
+      set(r) {
         var u;
-        if ((u = h(l.replaceRef)) != null ? u : !0)
-          if (Array.isArray(t.value)) {
-            const f = [...t.value];
-            f[n] = o, t.value = f;
+        if ((u = h(i.replaceRef)) != null ? u : !0)
+          if (Array.isArray(o.value)) {
+            const p = [...o.value];
+            p[n] = r, o.value = p;
           } else {
-            const f = { ...t.value, [n]: o };
-            Object.setPrototypeOf(f, Object.getPrototypeOf(t.value)), t.value = f;
+            const p = { ...o.value, [n]: r };
+            Object.setPrototypeOf(p, Object.getPrototypeOf(o.value)), o.value = p;
           }
         else
-          t.value[n] = o;
+          o.value[n] = r;
       }
     }));
   return e;
 }
-function xe(t) {
-  var l;
-  const e = h(t);
-  return (l = e == null ? void 0 : e.$el) != null ? l : e;
+function Ee(o) {
+  var i;
+  const e = h(o);
+  return (i = e == null ? void 0 : e.$el) != null ? i : e;
 }
-const U = G ? window : void 0;
-function D(...t) {
-  let l, e, n, o;
-  if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([e, n, o] = t, l = U) : [l, e, n, o] = t, !l)
-    return we;
+const G = q ? window : void 0;
+function W(...o) {
+  let i, e, n, r;
+  if (typeof o[0] == "string" || Array.isArray(o[0]) ? ([e, n, r] = o, i = G) : [i, e, n, r] = o, !i)
+    return xe;
   Array.isArray(e) || (e = [e]), Array.isArray(n) || (n = [n]);
   const u = [], v = () => {
-    u.forEach((c) => c()), u.length = 0;
-  }, f = (c, a, d, p) => (c.addEventListener(a, d, p), () => c.removeEventListener(a, d, p)), g = ne(
-    () => [xe(l), h(o)],
-    ([c, a]) => {
-      if (v(), !c)
+    u.forEach((a) => a()), u.length = 0;
+  }, p = (a, s, d, c) => (a.addEventListener(s, d, c), () => a.removeEventListener(s, d, c)), m = oe(
+    () => [Ee(i), h(r)],
+    ([a, s]) => {
+      if (v(), !a)
         return;
-      const d = be(a) ? { ...a } : a;
+      const d = be(s) ? { ...s } : s;
       u.push(
-        ...e.flatMap((p) => n.map((x) => f(c, p, x, d)))
+        ...e.flatMap((c) => n.map((C) => p(a, c, C, d)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), s = () => {
-    g(), v();
+  ), l = () => {
+    m(), v();
   };
-  return _e(s), s;
+  return _e(l), l;
 }
-function Ee(t, l = {}) {
+function Me(o, i = {}) {
   var e, n;
   const {
-    pointerTypes: o,
+    pointerTypes: r,
     preventDefault: u,
     stopPropagation: v,
-    exact: f,
-    onMove: g,
-    onEnd: s,
-    onStart: c,
-    initialValue: a,
+    exact: p,
+    onMove: m,
+    onEnd: l,
+    onStart: a,
+    initialValue: s,
     axis: d = "both",
-    draggingElement: p = U,
-    containerElement: x,
-    handle: B = t
-  } = l, m = O(
-    (e = h(a)) != null ? e : { x: 0, y: 0 }
-  ), b = O(), E = (r) => o ? o.includes(r.pointerType) : !0, M = (r) => {
-    h(u) && r.preventDefault(), h(v) && r.stopPropagation();
-  }, $ = (r) => {
-    var y;
-    if (!E(r) || h(f) && r.target !== h(t))
+    draggingElement: c = G,
+    containerElement: C,
+    handle: L = o
+  } = i, y = $(
+    (e = h(s)) != null ? e : { x: 0, y: 0 }
+  ), _ = $(), E = (t) => r ? r.includes(t.pointerType) : !0, M = (t) => {
+    h(u) && t.preventDefault(), h(v) && t.stopPropagation();
+  }, D = (t) => {
+    var f;
+    if (!E(t) || h(p) && t.target !== h(o))
       return;
-    const F = ((y = h(x)) != null ? y : h(t)).getBoundingClientRect(), I = {
-      x: r.clientX - F.left,
-      y: r.clientY - F.top
+    const V = ((f = h(C)) != null ? f : h(o)).getBoundingClientRect(), F = {
+      x: t.clientX - V.left,
+      y: t.clientY - V.top
     };
-    (c == null ? void 0 : c(I, r)) !== !1 && (b.value = I, M(r));
-  }, L = (r) => {
-    if (!E(r) || !b.value)
+    (a == null ? void 0 : a(F, t)) !== !1 && (_.value = F, M(t));
+  }, O = (t) => {
+    if (!E(t) || !_.value)
       return;
-    let { x: y, y: S } = m.value;
-    (d === "x" || d === "both") && (y = r.clientX - b.value.x), (d === "y" || d === "both") && (S = r.clientY - b.value.y), m.value = {
-      x: y,
-      y: S
-    }, g == null || g(m.value, r), M(r);
-  }, i = (r) => {
-    E(r) && b.value && (b.value = void 0, s == null || s(m.value, r), M(r));
+    let { x: f, y: k } = y.value;
+    (d === "x" || d === "both") && (f = t.clientX - _.value.x), (d === "y" || d === "both") && (k = t.clientY - _.value.y), y.value = {
+      x: f,
+      y: k
+    }, m == null || m(y.value, t), M(t);
+  }, H = (t) => {
+    E(t) && _.value && (_.value = void 0, l == null || l(y.value, t), M(t));
   };
-  if (G) {
-    const r = { capture: (n = l.capture) != null ? n : !0 };
-    D(B, "pointerdown", $, r), D(p, "pointermove", L, r), D(p, "pointerup", i, r);
+  if (q) {
+    const t = { capture: (n = i.capture) != null ? n : !0 };
+    W(L, "pointerdown", D, t), W(c, "pointermove", O, t), W(c, "pointerup", H, t);
   }
   return {
-    ...Ce(m),
-    position: m,
-    isDragging: k(() => !!b.value),
-    style: k(
-      () => `left:${m.value.x}px;top:${m.value.y}px;`
+    ...Ce(y),
+    position: y,
+    isDragging: x(() => !!_.value),
+    style: x(
+      () => `left:${y.value.x}px;top:${y.value.y}px;`
     )
   };
 }
-const Me = { class: "modal-container" }, Se = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
+const Se = { class: "modal-container fixed inset-0" }, ke = { class: "title font-bold" }, ze = { class: "action" }, Ae = {
   key: 1,
   class: "modal-footer space-x-2"
-}, Pe = ["form"], Oe = {
+}, Pe = ["form"], $e = {
   name: "ModalContainer",
   inheritAttrs: !0
-}, ze = /* @__PURE__ */ X({
-  ...Oe,
+}, Be = /* @__PURE__ */ X({
+  ...$e,
   props: {
     id: {},
-    formId: {},
+    form: {},
     component: {},
     componentProps: {},
     width: {},
@@ -138,135 +138,137 @@ const Me = { class: "modal-container" }, Se = { class: "title font-bold" }, ke =
     closeable: { type: Boolean, default: !0 },
     esc: { type: Boolean, default: !1 },
     maskClosable: { type: Boolean, default: !1 },
-    draggable: { type: Boolean, default: !1 }
+    draggable: { type: Boolean, default: !1 },
+    mode: { default: "dialog" }
   },
   emits: ["submit"],
-  setup(t, { emit: l }) {
-    const e = t, n = l, o = V(z);
-    let u = 0, v = 0, f;
-    const g = H(), s = H(), { x: c, y: a } = Ee(s, {
+  setup(o, { emit: i }) {
+    const e = o, n = i, r = R(B);
+    let u = 0, v = 0;
+    const p = A(), m = A(), l = A(), { x: a, y: s } = Me(l, {
       initialValue: { x: 0, y: 0 }
     });
     function d() {
-      o == null || o.close(e.id);
+      r == null || r.close(e.id);
     }
-    function p(i) {
-      if (typeof i == "number")
-        return `${i}px`;
-      if (typeof i == "string")
-        return i;
+    function c(t) {
+      if (typeof t == "number")
+        return `${t}px`;
+      if (typeof t == "string")
+        return t;
     }
-    const x = k(() => {
-      const i = {};
-      return e.size && (i.width = p(e.sizes[e.size])), e.width && (i.width = p(e.width)), e.maxWidth && (i.maxWidth = p(e.maxWidth)), e.draggable && (i.transform = `translate(${c.value - u}px, ${a.value - v}px)`), i;
-    }), B = k(() => {
-      const i = {};
-      return e.draggable && (i.cursor = "move"), i;
-    }), m = k(() => {
-      var r;
-      const i = {};
-      return e.maxHeight && (i.maxHeight = `calc(${(r = p(e.maxWidth)) == null ? void 0 : r.replace("%", "vh")} - 50px)`), i;
+    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 = c(e.sizes[e.size])), e.width && (t.width = c(e.width)), e.maxWidth && (t.maxWidth = c(e.maxWidth)), e.size === "fullscreen" && (t.maxWidth = "unset", t.position = "fixed", t.top = 0, t.left = 0, t.bottom = 0, t.right = 0), e.draggable && e.size !== "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.size !== "fullscreen" && e.mode === "dialog" && (t.cursor = "move"), t;
+    }), _ = x(() => {
+      var f;
+      const t = {};
+      return e.maxHeight && (t.maxHeight = `calc(${(f = c(e.maxHeight)) == null ? void 0 : f.replace("%", "vh")} - 50px)`), e.mode === "drawer" && (t.maxHeight = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), e.size === "fullscreen" && (t.maxHeight = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), t;
     });
-    function b() {
-      n("submit");
-    }
     function E() {
-      o == null || o.close(e.id);
+      const t = m.value;
+      if (e.form && t) {
+        const f = t.querySelector(`form[name="${e.form}"]`);
+        f && f.dispatchEvent(new Event("submit"));
+      }
+      n("submit");
     }
     function M() {
+      r == null || r.close(e.id);
+    }
+    function D() {
       window && window.addEventListener("resize", () => {
-        A(g), A(s), u = s.value.offsetLeft, v = s.value.offsetTop;
+        S(p), S(m), u = m.value.offsetLeft, v = m.value.offsetTop;
       });
     }
-    function $() {
+    function O() {
       if (e.closeable && e.esc) {
-        const i = ({ key: r }) => {
-          r === "Escape" && (o == null || o.close(e.id), window.removeEventListener("keydown", i));
+        const t = ({ key: f }) => {
+          f === "Escape" && (r == null || r.close(e.id), window.removeEventListener("keydown", t));
         };
-        window.addEventListener("keydown", i);
+        window.addEventListener("keydown", t);
       }
     }
-    function L() {
-      f = new MutationObserver((i) => {
-        i.forEach((r) => {
-          const y = s.value.offsetLeft, S = s.value.offsetTop;
-          y !== u && (u = y), S !== v && (v = y);
-        });
-      }), f.observe(s.value, {
-        attributes: !0,
-        attributeFilter: ["style", "offsetHeight", "offsetWidth", "clientHeight", "clientWidth"],
-        attributeOldValue: !0
-      });
+    function H() {
+      u = m.value.offsetLeft, v = m.value.offsetTop;
     }
     return Y(() => {
-      $(), L(), M();
-    }), oe(() => {
-      f && (f.disconnect(), f.takeRecords());
-    }), (i, r) => (_(), C("div", Me, [
+      O(), D();
+    }), ne(() => {
+    }), (t, f) => (g(), b("div", Se, [
       w("div", {
         ref_key: "wrapperRef",
-        ref: g,
+        ref: p,
         class: "modal-wrapper",
-        onClick: r[0] || (r[0] = re((y) => i.maskClosable && d(), ["self"]))
+        style: z(C.value),
+        onClick: f[0] || (f[0] = re((k) => t.maskClosable && d(), ["self"]))
       }, [
         w("div", {
           ref_key: "contentRef",
-          ref: s,
-          class: "modal-content",
-          style: W(x.value)
+          ref: m,
+          class: ie(["modal-content", { [`${t.mode}-mode`]: !0 }]),
+          style: z(L.value)
         }, [
-          i.header ? (_(), C("div", {
+          t.header ? (g(), b("div", {
             key: 0,
-            ref: "",
+            ref_key: "headerRef",
+            ref: l,
             class: "modal-header",
-            style: W(B.value)
+            style: z(y.value),
+            onMousedown: H
           }, [
-            w("div", Se, ie(i.title), 1),
-            w("div", ke, [
-              i.closeable ? (_(), C("div", {
+            w("div", ke, se(t.title), 1),
+            w("div", ze, [
+              t.closeable ? (g(), b("div", {
                 key: 0,
                 class: "i-icon-park-outline:close block cursor-pointer",
                 onClick: d
               })) : P("", !0)
             ])
-          ], 4)) : P("", !0),
+          ], 36)) : P("", !0),
           w("div", {
             class: "modal-body",
-            style: W(m.value)
+            style: z(_.value)
           }, [
-            (_(), N(se(i.component), le(ae(i.componentProps)), null, 16))
+            (g(), N(le(t.component), ae(ue(t.componentProps)), null, 16))
           ], 4),
-          i.footer ? (_(), C("div", Ae, [
+          t.footer ? (g(), b("div", Ae, [
             w("button", {
               class: "submit-button",
-              form: i.formId,
+              form: t.form,
               type: "submit",
-              onClick: b
+              onClick: E
             }, " 确定 ", 8, Pe),
             w("button", {
               class: "cancel-button",
               type: "button",
-              onClick: E
+              onClick: M
             }, " 取消 ")
           ])) : P("", !0)
-        ], 4)
-      ], 512)
+        ], 6)
+      ], 4)
     ]));
   }
 });
-const q = (t, l) => {
-  const e = t.__vccOpts || t;
-  for (const [n, o] of l)
-    e[n] = o;
+const U = (o, i) => {
+  const e = o.__vccOpts || o;
+  for (const [n, r] of i)
+    e[n] = r;
   return e;
-}, Be = /* @__PURE__ */ q(ze, [["__scopeId", "data-v-e6f6653f"]]), $e = {
+}, Le = /* @__PURE__ */ U(Be, [["__scopeId", "data-v-581eba51"]]), De = {
   key: 0,
   class: "modal-teleport"
-}, Le = {
+}, Oe = {
   name: "ModalProvider",
   inheritAttrs: !0
-}, We = /* @__PURE__ */ X({
-  ...Le,
+}, He = /* @__PURE__ */ X({
+  ...Oe,
   props: {
     appendToBody: { type: Boolean, default: !1 },
     sizes: { default: () => ({
@@ -277,72 +279,72 @@ const q = (t, l) => {
     maxWidth: { default: "80%" },
     maxHeight: { default: "80%" }
   },
-  setup(t, { expose: l }) {
-    const e = H([]), n = O(!1);
-    async function o(s, c, a) {
-      const d = he(
-        () => Promise.resolve(s)
+  setup(o, { expose: i }) {
+    const e = A([]), n = $(!1);
+    async function r(l, a, s) {
+      const d = ge(
+        () => Promise.resolve(l)
       );
-      return new Promise((p) => {
+      return new Promise((c) => {
         e.value.push({
           id: Math.random().toString(32).slice(2),
           component: d,
-          props: c,
-          options: a,
-          resolve: p,
-          onSubmit: O(() => {
+          props: a,
+          options: s,
+          resolve: c,
+          onSubmit: $(() => {
           })
-        }), A(e);
+        }), S(e);
       });
     }
-    function u(s, c) {
-      const a = e.value.findIndex((p) => p.id === s);
-      if (a < 0)
+    function u(l, a) {
+      const s = e.value.findIndex((c) => c.id === l);
+      if (s < 0)
         return;
-      const d = e.value[a];
-      d == null || d.resolve(c), e.value.splice(a, 1), A(e);
+      const d = e.value[s];
+      d == null || d.resolve(a), e.value.splice(s, 1), S(e);
     }
     function v() {
-      e.value.forEach((s) => {
-        s.resolve();
-      }), e.value = [], A(e);
+      e.value.forEach((l) => {
+        l.resolve();
+      }), e.value = [], S(e);
     }
-    function f(s) {
-      return e.value.find((c) => c.id === s);
+    function p(l) {
+      return e.value.find((a) => a.id === l);
     }
-    function g(s, c) {
-      const a = e.value.find((d) => d.id === s);
-      a && (a.onSubmit.value = c);
+    function m(l, a) {
+      const s = e.value.find((d) => d.id === l);
+      s && (s.onSubmit.value = a);
     }
-    return ue(z, {
-      open: o,
+    return de(B, {
+      open: r,
       close: u,
       closeAll: v,
-      getElement: f,
-      addSubmitListener: g
-    }), l({
+      getElement: p,
+      addSubmitListener: m
+    }), i({
       elements: e
     }), Y(() => {
       n.value = !0;
-    }), (s, c) => (_(), C(R, null, [
-      ce(s.$slots, "default", {}, void 0, !0),
-      n.value ? (_(), C("div", $e, [
-        (_(), N(de, {
-          disabled: !s.appendToBody,
+    }), (l, a) => (g(), b(I, null, [
+      ce(l.$slots, "default", {}, void 0, !0),
+      n.value ? (g(), b("div", De, [
+        (g(), N(fe, {
+          disabled: !l.appendToBody,
           to: "body"
         }, [
-          fe(pe, { name: "modal-fade" }, {
+          pe(me, { name: "modal-fade" }, {
             default: ve(() => [
-              (_(!0), C(R, null, me(e.value, (a) => (_(), N(Be, ye({
-                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
+              (g(!0), b(I, null, ye(e.value, (s) => (g(), N(Le, 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
               }), null, 16, ["id", "component", "component-props", "max-height", "max-width", "sizes", "onSubmit"]))), 128))
             ]),
             _: 1
@@ -352,51 +354,51 @@ const q = (t, l) => {
     ], 64));
   }
 });
-const He = /* @__PURE__ */ q(We, [["__scopeId", "data-v-171d9bdd"]]);
-function T(t, l) {
-  var n, o;
-  let e = t == null ? void 0 : t.parent;
-  for (; e && ((n = e == null ? void 0 : e.type) == null ? void 0 : n.name) !== l; )
+const Ne = /* @__PURE__ */ U(He, [["__scopeId", "data-v-1ef03c20"]]);
+function T(o, i) {
+  var n, r;
+  let e = o == null ? void 0 : o.parent;
+  for (; e && ((n = e == null ? void 0 : e.type) == null ? void 0 : n.name) !== i; )
     e = e.parent;
-  return ((o = e == null ? void 0 : e.type) == null ? void 0 : o.name) === l ? e : null;
+  return ((r = e == null ? void 0 : e.type) == null ? void 0 : r.name) === i ? e : null;
 }
-function Ne() {
-  const t = V(z), l = K();
+function Te() {
+  const o = R(B), i = K();
   return {
-    open(e, n, o) {
-      if (!t)
+    open(e, n, r) {
+      if (!o)
         throw new Error("Not Found Modal Provider Component");
-      return t.open(e, n || {}, o || {});
+      return o.open(e, n || {}, r || {});
     },
     close(e) {
       var u;
-      if (!t)
-        throw new Error("Not Found Modal Provider Component");
-      const n = T(l, "ModalContainer"), o = (u = n == null ? void 0 : n.props) == null ? void 0 : u.id;
       if (!o)
+        throw new Error("Not Found Modal Provider Component");
+      const n = T(i, "ModalContainer"), r = (u = n == null ? void 0 : n.props) == null ? void 0 : u.id;
+      if (!r)
         throw new Error("Not Found Current Modal Container");
-      t.close(o, e);
+      o.close(r, e);
     },
     closeAll() {
-      if (!t)
+      if (!o)
         throw new Error("Not Found Modal Provider Component");
-      t.closeAll();
+      o.closeAll();
     },
     onSubmit(e) {
-      const n = T(l, "ModalContainer");
+      const n = T(i, "ModalContainer");
       if (!(n == null ? void 0 : n.props.id))
         throw new Error("Not Found Current Modal Container");
     }
   };
 }
-function Te(t) {
+function Re(o) {
   var u;
-  const l = V(z), e = K(), n = T(e, "ModalContainer"), o = (u = n == null ? void 0 : n.props) == null ? void 0 : u.id;
-  l && o && l.addSubmitListener(o, t);
+  const i = R(B), e = K(), n = T(e, "ModalContainer"), r = (u = n == null ? void 0 : n.props) == null ? void 0 : u.id;
+  i && r && i.addSubmitListener(r, o);
 }
 export {
-  Be as ModalContainer,
-  He as ModalProvider,
-  Te as onSubmit,
-  Ne as useModal
+  Le as ModalContainer,
+  Ne as ModalProvider,
+  Re as onSubmit,
+  Te as useModal
 };

package/dist/interfaces.d.ts

@@ -13,8 +13,10 @@ export interface OpenModalOptions {
     header?: boolean;
     footer?: boolean;
     width?: number | string;
-    size?: 'large' | 'middle' | 'small';
+    size?: 'large' | 'middle' | 'small' | 'fullscreen';
     draggable?: boolean;
+    form?: string;
+    mode?: 'dialog' | 'drawer';
 }
 export interface ModalElement extends OpenModalOptions {
     id: string;

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}.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-e6f6653f]{z-index:1000;position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.3)}.modal-content[data-v-e6f6653f]{background:#ffffff;border-radius:5px}.modal-header[data-v-e6f6653f]{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-e6f6653f]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-e6f6653f]{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-e6f6653f]{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-e6f6653f]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-e6f6653f]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-e6f6653f]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:rgb(var(--color-fill-1, 245, 245, 245))}.modal-footer button.cancel-button[data-v-e6f6653f]:hover{background-color:rgb(var(--color-fill-4, 201, 205, 212))}.modal-fade-enter-active[data-v-171d9bdd],.modal-fade-leave-active[data-v-171d9bdd]{transition:all .5s ease}.modal-fade-enter-from[data-v-171d9bdd],.modal-fade-leave-to[data-v-171d9bdd]{opacity: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}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.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-581eba51]{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-581eba51]{background:#ffffff;border-radius:5px}.modal-header[data-v-581eba51]{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-581eba51]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-581eba51]{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-581eba51]{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-581eba51]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-581eba51]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-581eba51]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.modal-footer button.cancel-button[data-v-581eba51]:hover{background-color:var(--color-fill-4, #c9cdd4)}.modal-fade-enter-active[data-v-1ef03c20],.modal-fade-leave-active[data-v-1ef03c20]{transition:opacity .5s ease}.modal-fade-enter-active[data-v-1ef03c20] .modal-content.drawer-mode,.modal-fade-leave-active[data-v-1ef03c20] .modal-content.drawer-mode{transition:transform .5s ease}.modal-fade-enter-from[data-v-1ef03c20],.modal-fade-leave-to[data-v-1ef03c20]{opacity:0}.modal-fade-enter-from[data-v-1ef03c20] .modal-content.drawer-mode,.modal-fade-leave-to[data-v-1ef03c20] .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.2",
+  "version": "0.0.4",
   "author": {
     "name": "zhuchentong",
     "email": "2037630@gmail.com"