@gopowerteam/modal-render 0.0.1

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

@@ -0,0 +1,82 @@
+import type { Component } from 'vue';
+import type { SizeOptions } from '../interfaces';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string;
+    formId?: string;
+    component: Component;
+    componentProps: Record<string, any>;
+    width?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    sizes: SizeOptions;
+    size: 'small' | 'middle' | 'large';
+    title?: string;
+    header?: boolean;
+    footer?: boolean;
+    closeable?: boolean;
+    esc?: boolean;
+    maskClosable?: boolean;
+    draggable?: boolean;
+}>, {
+    header: boolean;
+    closeable: boolean;
+    footer: boolean;
+    keyboard: boolean;
+    maskClosable: boolean;
+    size: string;
+    esc: boolean;
+    draggable: boolean;
+}>, {}, 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;
+    component: Component;
+    componentProps: Record<string, any>;
+    width?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    sizes: SizeOptions;
+    size: 'small' | 'middle' | 'large';
+    title?: string;
+    header?: boolean;
+    footer?: boolean;
+    closeable?: boolean;
+    esc?: boolean;
+    maskClosable?: boolean;
+    draggable?: boolean;
+}>, {
+    header: boolean;
+    closeable: boolean;
+    footer: boolean;
+    keyboard: boolean;
+    maskClosable: boolean;
+    size: string;
+    esc: boolean;
+    draggable: boolean;
+}>>> & {
+    onSubmit?: (...args: any[]) => any;
+}, {
+    header: boolean;
+    closeable: boolean;
+    footer: boolean;
+    maskClosable: boolean;
+    size: 'small' | 'middle' | 'large';
+    esc: boolean;
+    draggable: boolean;
+}, {}>;
+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/components/modal-provider.vue.d.ts

@@ -0,0 +1,59 @@
+import type { ModalElement, SizeOptions } from '../interfaces';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    appendToBody: boolean;
+    sizes: SizeOptions;
+    maxWidth: string | number;
+    maxHeight: string | number;
+}>, {
+    appendToBody: boolean;
+    maxWidth: string;
+    maxHeight: string;
+    sizes: () => {
+        small: number;
+        middle: number;
+        large: number;
+    };
+}>, {
+    elements: import("vue").ShallowRef<ModalElement[]>;
+}, 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<{
+    appendToBody: boolean;
+    sizes: SizeOptions;
+    maxWidth: string | number;
+    maxHeight: string | number;
+}>, {
+    appendToBody: boolean;
+    maxWidth: string;
+    maxHeight: string;
+    sizes: () => {
+        small: number;
+        middle: number;
+        large: number;
+    };
+}>>>, {
+    maxWidth: string | number;
+    maxHeight: string | number;
+    sizes: SizeOptions;
+    appendToBody: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+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];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+import type { ModalActions } from './interfaces';
+export declare const ModalKey: InjectionKey<ModalActions>;

package/dist/hooks/on-submit.d.ts

@@ -0,0 +1 @@
+export declare function onSubmit(callback: () => void): void;

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

@@ -0,0 +1,8 @@
+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>;
+    close(data?: any): void;
+    closeAll(): void;
+    onSubmit(fun: () => void): void;
+};

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import ModalProvider from './components/modal-provider.vue';
+import ModalContainer from './components/modal-container.vue';
+import { useModal } from './hooks/use-modal';
+export { onSubmit } from './hooks/on-submit';
+export * from './interfaces';
+export { ModalContainer, ModalProvider, useModal, };

package/dist/index.js

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

package/dist/interfaces.d.ts

@@ -0,0 +1,33 @@
+import type { Component, Ref } from 'vue';
+export interface SizeOptions {
+    small: number;
+    middle: number;
+    large: number;
+}
+export interface OpenModalOptions {
+    closeable?: boolean;
+    esc?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    title?: string;
+    header?: boolean;
+    footer?: boolean;
+    width?: number | string;
+    size?: 'large' | 'middle' | 'small';
+    draggable?: boolean;
+}
+export interface ModalElement extends OpenModalOptions {
+    id: string;
+    resolve: (data?: any) => void;
+    component: Component;
+    props: Record<string, any>;
+    options: OpenModalOptions;
+    onSubmit: Ref<() => void>;
+}
+export interface ModalActions {
+    open: (component: Component, props: Record<string, any>, options: OpenModalOptions) => Promise<any | void>;
+    close: (id: string, data?: any) => void;
+    closeAll: () => void;
+    getElement: (id: string) => ModalElement | undefined;
+    addSubmitListener: (id: string, fun: () => void) => void;
+}

package/dist/style.css

@@ -0,0 +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-16717585]{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-16717585]{background:#ffffff;border-radius:5px}.modal-header[data-v-16717585]{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-16717585]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-16717585]{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-16717585]{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-16717585]{color:#fff;background-color:var(--primary-6, #2D6AFB)}.modal-footer button.submit-button[data-v-16717585]:hover{background-color:var(--primary-5, #1C4CCF)}.modal-footer button.cancel-button[data-v-16717585]{color:var(--color-text-2, #4E5969);background-color:var(--color-fill-1, #F5F5F5)}.modal-footer button.cancel-button[data-v-16717585]:hover{background-color:var(--color-fill-4, #C9CDD4)}.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}

package/dist/utils/find-container.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInternalInstance } from 'vue';
+export declare function findContainer(ctx: ComponentInternalInstance | null, name: 'ModalContainer' | 'ModalProvider'): ComponentInternalInstance;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@gopowerteam/modal-render",
+  "type": "module",
+  "version": "0.0.1",
+  "author": {
+    "name": "zhuchentong",
+    "email": "2037630@gmail.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/gopowerteam/x-render",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gopowerteam/x-render.git"
+  },
+  "bugs": {
+    "url": "https://github.com/gopowerteam/x-render/issues"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./dist/": "./dist/"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@iconify-json/icon-park-outline": "^1.1.12",
+    "@types/node": "18.16.0",
+    "@unocss/preset-icons": "^0.57.1",
+    "@unocss/preset-uno": "^0.57.1",
+    "@vitejs/plugin-vue": "4.4.0",
+    "@vue/compiler-sfc": "3.3.7",
+    "@vueuse/core": "^10.5.0",
+    "less": "^4.2.0",
+    "typescript": "5.2.2",
+    "unocss": "^0.57.1",
+    "vite": "4.5.0",
+    "vite-plugin-dts": "^3.6.1",
+    "vue": "3.3.7",
+    "vue-tsc": "1.8.21"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "npm:publish": "npm run build && npm publish --access publish"
+  }
+}