@gopowerteam/modal-render 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +1 -1
- package/dist/es/index.mjs +76 -76
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -1 +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,
|
|
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,s,d,p)=>(c.addEventListener(s,d,p),()=>c.removeEventListener(s,d,p)),v=e.watch(()=>[F(i),g(r)],([c,s])=>{if(y(),!c)return;const d=T(s)?{...s}:s;u.push(...t.flatMap(p=>l.map(_=>m(c,p,_,d))))},{immediate:!0,flush:"post"}),a=()=>{v(),y()};return O(a),a}function I(n,i={}){var t,l;const{pointerTypes:r,preventDefault:u,stopPropagation:y,exact:m,onMove:v,onEnd:a,onStart:c,initialValue:s,axis:d="both",draggingElement:p=N,containerElement:_,handle:B=n}=i,h=e.ref((t=g(s))!=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,a==null||a(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(),a=e.shallowRef(),{x:c,y:s}=I(a,{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,o.borderRadius=0),t.draggable&&!t.fullscreen&&t.mode==="dialog"&&(o.transform=`translate3d(${c.value-u}px, ${s.value-y}px, 0px)`),t.mode==="drawer"&&(o.borderRadius=0),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="unset",o.height=`calc(100vh - ${(t.header?50:0)+(t.footer?50:0)}px)`),t.fullscreen&&(o.maxHeight="unset",o.height=`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:a,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 R=(n,i)=>{const t=n.__vccOpts||n;for(const[l,r]of i)t[l]=r;return t},V=R(G,[["__scopeId","data-v-5a470d86"]]),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(a,c,s){const d=e.defineAsyncComponent(()=>Promise.resolve(a));return new Promise(p=>{t.value.push({id:Math.random().toString(32).slice(2),component:d,props:c,options:s,resolve:p,onSubmit:e.ref(null)}),e.triggerRef(t)})}function u(a,c){const s=t.value.findIndex(p=>p.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);console.log(c,111),s&&(s.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}),(a,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(a.$slots,"default",{},void 0,!0),l.value?(e.openBlock(),e.createElementBlock("div",U,[(e.openBlock(),e.createBlock(e.Teleport,{disabled:!a.appendToBody,to:typeof a.appendToBody=="string"?a.appendToBody:"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(V,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","to"]))])):e.createCommentVNode("",!0)],64))}});const Z=R(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=V;exports.ModalKey=C;exports.ModalProvider=Z;exports.onSubmit=te;exports.useModal=ee;
|
package/dist/es/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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
|
|
1
|
+
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 W, 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 se, createCommentVNode as $, createBlock as R, resolveDynamicComponent as le, normalizeProps as ae, guardReactiveProps as ue, triggerRef as M, provide as de, Fragment as F, 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 Y } from "vue";
|
|
2
2
|
const z = Symbol("__MODAL__");
|
|
3
3
|
function _e(o) {
|
|
4
4
|
return ee() ? (te(o), !0) : !1;
|
|
@@ -46,21 +46,21 @@ function H(...o) {
|
|
|
46
46
|
Array.isArray(e) || (e = [e]), Array.isArray(r) || (r = [r]);
|
|
47
47
|
const u = [], v = () => {
|
|
48
48
|
u.forEach((a) => a()), u.length = 0;
|
|
49
|
-
}, p = (a,
|
|
49
|
+
}, p = (a, l, d, f) => (a.addEventListener(l, d, f), () => a.removeEventListener(l, d, f)), m = oe(
|
|
50
50
|
() => [Se(i), h(n)],
|
|
51
|
-
([a,
|
|
51
|
+
([a, l]) => {
|
|
52
52
|
if (v(), !a)
|
|
53
53
|
return;
|
|
54
|
-
const
|
|
54
|
+
const d = be(l) ? { ...l } : l;
|
|
55
55
|
u.push(
|
|
56
|
-
...e.flatMap((f) => r.map((C) => p(a, f, C,
|
|
56
|
+
...e.flatMap((f) => r.map((C) => p(a, f, C, d)))
|
|
57
57
|
);
|
|
58
58
|
},
|
|
59
59
|
{ immediate: !0, flush: "post" }
|
|
60
|
-
),
|
|
60
|
+
), s = () => {
|
|
61
61
|
m(), v();
|
|
62
62
|
};
|
|
63
|
-
return _e(
|
|
63
|
+
return _e(s), s;
|
|
64
64
|
}
|
|
65
65
|
function Ee(o, i = {}) {
|
|
66
66
|
var e, r;
|
|
@@ -70,36 +70,36 @@ function Ee(o, i = {}) {
|
|
|
70
70
|
stopPropagation: v,
|
|
71
71
|
exact: p,
|
|
72
72
|
onMove: m,
|
|
73
|
-
onEnd:
|
|
73
|
+
onEnd: s,
|
|
74
74
|
onStart: a,
|
|
75
|
-
initialValue:
|
|
76
|
-
axis:
|
|
75
|
+
initialValue: l,
|
|
76
|
+
axis: d = "both",
|
|
77
77
|
draggingElement: f = q,
|
|
78
78
|
containerElement: C,
|
|
79
79
|
handle: L = o
|
|
80
80
|
} = i, y = B(
|
|
81
|
-
(e = h(
|
|
81
|
+
(e = h(l)) != null ? e : { x: 0, y: 0 }
|
|
82
82
|
), _ = B(), S = (t) => n ? n.includes(t.pointerType) : !0, E = (t) => {
|
|
83
83
|
h(u) && t.preventDefault(), h(v) && t.stopPropagation();
|
|
84
84
|
}, D = (t) => {
|
|
85
|
-
var
|
|
85
|
+
var c;
|
|
86
86
|
if (!S(t) || h(p) && t.target !== h(o))
|
|
87
87
|
return;
|
|
88
|
-
const
|
|
89
|
-
x: t.clientX -
|
|
90
|
-
y: t.clientY -
|
|
88
|
+
const N = ((c = h(C)) != null ? c : h(o)).getBoundingClientRect(), V = {
|
|
89
|
+
x: t.clientX - N.left,
|
|
90
|
+
y: t.clientY - N.top
|
|
91
91
|
};
|
|
92
92
|
(a == null ? void 0 : a(V, t)) !== !1 && (_.value = V, E(t));
|
|
93
93
|
}, O = (t) => {
|
|
94
94
|
if (!S(t) || !_.value)
|
|
95
95
|
return;
|
|
96
|
-
let { x:
|
|
97
|
-
(
|
|
98
|
-
x:
|
|
96
|
+
let { x: c, y: k } = y.value;
|
|
97
|
+
(d === "x" || d === "both") && (c = t.clientX - _.value.x), (d === "y" || d === "both") && (k = t.clientY - _.value.y), y.value = {
|
|
98
|
+
x: c,
|
|
99
99
|
y: k
|
|
100
100
|
}, m == null || m(y.value, t), E(t);
|
|
101
101
|
}, T = (t) => {
|
|
102
|
-
S(t) && _.value && (_.value = void 0,
|
|
102
|
+
S(t) && _.value && (_.value = void 0, s == null || s(y.value, t), E(t));
|
|
103
103
|
};
|
|
104
104
|
if (K) {
|
|
105
105
|
const t = { capture: (r = i.capture) != null ? r : !0 };
|
|
@@ -144,12 +144,12 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
|
|
|
144
144
|
},
|
|
145
145
|
emits: ["submit"],
|
|
146
146
|
setup(o, { emit: i }) {
|
|
147
|
-
const e = o, r = i, n =
|
|
147
|
+
const e = o, r = i, n = W(z);
|
|
148
148
|
let u = 0, v = 0;
|
|
149
|
-
const p = P(), m = P(),
|
|
149
|
+
const p = P(), m = P(), s = P(), { x: a, y: l } = Ee(s, {
|
|
150
150
|
initialValue: { x: 0, y: 0 }
|
|
151
151
|
});
|
|
152
|
-
function
|
|
152
|
+
function d() {
|
|
153
153
|
n == null || n.close(e.id);
|
|
154
154
|
}
|
|
155
155
|
function f(t) {
|
|
@@ -163,24 +163,24 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
|
|
|
163
163
|
return e.mode === "dialog" && (t.justifyContent = "center"), e.mode === "drawer" && (t.justifyContent = "flex-end"), t;
|
|
164
164
|
}), L = x(() => {
|
|
165
165
|
const t = {};
|
|
166
|
-
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, ${
|
|
166
|
+
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, t.borderRadius = 0), e.draggable && !e.fullscreen && e.mode === "dialog" && (t.transform = `translate3d(${a.value - u}px, ${l.value - v}px, 0px)`), e.mode === "drawer" && (t.borderRadius = 0), t;
|
|
167
167
|
}), y = x(() => {
|
|
168
168
|
const t = {};
|
|
169
169
|
return e.draggable && !e.fullscreen && e.mode === "dialog" && (t.cursor = "move"), t;
|
|
170
170
|
}), _ = x(() => {
|
|
171
|
-
var
|
|
171
|
+
var c;
|
|
172
172
|
const t = {};
|
|
173
|
-
return e.maxHeight && (t.maxHeight = `calc(${(
|
|
173
|
+
return e.maxHeight && (t.maxHeight = `calc(${(c = f(e.maxHeight)) == null ? void 0 : c.replace("%", "vh")} - 50px)`), e.mode === "drawer" && (t.maxHeight = "unset", t.height = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), e.fullscreen && (t.maxHeight = "unset", t.height = `calc(100vh - ${(e.header ? 50 : 0) + (e.footer ? 50 : 0)}px)`), t;
|
|
174
174
|
});
|
|
175
175
|
function S() {
|
|
176
176
|
const t = m.value;
|
|
177
177
|
if (e.form && t) {
|
|
178
|
-
const
|
|
179
|
-
|
|
178
|
+
const c = t.querySelector(`form[name="${e.form}"]`);
|
|
179
|
+
c && c.dispatchEvent(new Event("submit"));
|
|
180
180
|
}
|
|
181
181
|
r("submit", {
|
|
182
182
|
open: n == null ? void 0 : n.open,
|
|
183
|
-
close: (
|
|
183
|
+
close: (c) => n == null ? void 0 : n.close(e.id, c)
|
|
184
184
|
});
|
|
185
185
|
}
|
|
186
186
|
function E() {
|
|
@@ -193,8 +193,8 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
|
|
|
193
193
|
}
|
|
194
194
|
function O() {
|
|
195
195
|
if (e.closeable && e.esc) {
|
|
196
|
-
const t = ({ key:
|
|
197
|
-
|
|
196
|
+
const t = ({ key: c }) => {
|
|
197
|
+
c === "Escape" && (n == null || n.close(e.id), window.removeEventListener("keydown", t));
|
|
198
198
|
};
|
|
199
199
|
window.addEventListener("keydown", t);
|
|
200
200
|
}
|
|
@@ -205,12 +205,12 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
|
|
|
205
205
|
return X(() => {
|
|
206
206
|
O(), D();
|
|
207
207
|
}), ne(() => {
|
|
208
|
-
}), (t,
|
|
208
|
+
}), (t, c) => (g(), w("div", {
|
|
209
209
|
ref_key: "wrapperRef",
|
|
210
210
|
ref: p,
|
|
211
211
|
class: "modal-wrapper",
|
|
212
212
|
style: A(C.value),
|
|
213
|
-
onClick:
|
|
213
|
+
onClick: c[0] || (c[0] = re((k) => t.maskClosable && d(), ["self"]))
|
|
214
214
|
}, [
|
|
215
215
|
b("div", {
|
|
216
216
|
ref_key: "contentRef",
|
|
@@ -221,17 +221,17 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
|
|
|
221
221
|
t.header ? (g(), w("div", {
|
|
222
222
|
key: 0,
|
|
223
223
|
ref_key: "headerRef",
|
|
224
|
-
ref:
|
|
224
|
+
ref: s,
|
|
225
225
|
class: "modal-header",
|
|
226
226
|
style: A(y.value),
|
|
227
227
|
onMousedown: T
|
|
228
228
|
}, [
|
|
229
|
-
b("div", Me,
|
|
229
|
+
b("div", Me, se(t.title), 1),
|
|
230
230
|
b("div", ke, [
|
|
231
231
|
t.closeable ? (g(), w("div", {
|
|
232
232
|
key: 0,
|
|
233
233
|
class: "i-icon-park-outline:close block cursor-pointer",
|
|
234
|
-
onClick:
|
|
234
|
+
onClick: d
|
|
235
235
|
})) : $("", !0)
|
|
236
236
|
])
|
|
237
237
|
], 36)) : $("", !0),
|
|
@@ -239,7 +239,7 @@ const Me = { class: "title font-bold" }, ke = { class: "action" }, Ae = {
|
|
|
239
239
|
class: "modal-body",
|
|
240
240
|
style: A(_.value)
|
|
241
241
|
}, [
|
|
242
|
-
(g(),
|
|
242
|
+
(g(), R(le(t.component), ae(ue(t.componentProps)), null, 16))
|
|
243
243
|
], 4),
|
|
244
244
|
t.footer ? (g(), w("div", Ae, [
|
|
245
245
|
b("button", {
|
|
@@ -263,7 +263,7 @@ const G = (o, i) => {
|
|
|
263
263
|
for (const [r, n] of i)
|
|
264
264
|
e[r] = n;
|
|
265
265
|
return e;
|
|
266
|
-
}, ze = /* @__PURE__ */ G(Be, [["__scopeId", "data-v-
|
|
266
|
+
}, ze = /* @__PURE__ */ G(Be, [["__scopeId", "data-v-5a470d86"]]), Le = {
|
|
267
267
|
key: 0,
|
|
268
268
|
class: "modal-teleport"
|
|
269
269
|
}, De = {
|
|
@@ -283,41 +283,41 @@ const G = (o, i) => {
|
|
|
283
283
|
},
|
|
284
284
|
setup(o, { expose: i }) {
|
|
285
285
|
const e = P([]), r = B(!1);
|
|
286
|
-
async function n(
|
|
287
|
-
const
|
|
288
|
-
() => Promise.resolve(
|
|
286
|
+
async function n(s, a, l) {
|
|
287
|
+
const d = ge(
|
|
288
|
+
() => Promise.resolve(s)
|
|
289
289
|
);
|
|
290
290
|
return new Promise((f) => {
|
|
291
291
|
e.value.push({
|
|
292
292
|
id: Math.random().toString(32).slice(2),
|
|
293
|
-
component:
|
|
293
|
+
component: d,
|
|
294
294
|
props: a,
|
|
295
|
-
options:
|
|
295
|
+
options: l,
|
|
296
296
|
resolve: f,
|
|
297
297
|
onSubmit: B(null)
|
|
298
298
|
}), M(e);
|
|
299
299
|
});
|
|
300
300
|
}
|
|
301
|
-
function u(
|
|
302
|
-
const
|
|
303
|
-
if (
|
|
301
|
+
function u(s, a) {
|
|
302
|
+
const l = e.value.findIndex((f) => f.id === s);
|
|
303
|
+
if (l < 0)
|
|
304
304
|
return;
|
|
305
|
-
const
|
|
306
|
-
|
|
305
|
+
const d = e.value[l];
|
|
306
|
+
d == null || d.resolve(a), e.value.splice(l, 1), M(e);
|
|
307
307
|
}
|
|
308
308
|
function v() {
|
|
309
|
-
e.value.forEach((
|
|
310
|
-
|
|
309
|
+
e.value.forEach((s) => {
|
|
310
|
+
s.resolve();
|
|
311
311
|
}), e.value = [], M(e);
|
|
312
312
|
}
|
|
313
|
-
function p(
|
|
314
|
-
return e.value.find((a) => a.id ===
|
|
313
|
+
function p(s) {
|
|
314
|
+
return e.value.find((a) => a.id === s);
|
|
315
315
|
}
|
|
316
|
-
function m(
|
|
317
|
-
const
|
|
318
|
-
console.log(a, 111),
|
|
316
|
+
function m(s, a) {
|
|
317
|
+
const l = e.value.find((d) => d.id === s);
|
|
318
|
+
console.log(a, 111), l && (l.onSubmit.value = a);
|
|
319
319
|
}
|
|
320
|
-
return
|
|
320
|
+
return de(z, {
|
|
321
321
|
open: n,
|
|
322
322
|
close: u,
|
|
323
323
|
closeAll: v,
|
|
@@ -327,25 +327,25 @@ const G = (o, i) => {
|
|
|
327
327
|
elements: e
|
|
328
328
|
}), X(() => {
|
|
329
329
|
r.value = !0;
|
|
330
|
-
}), (
|
|
331
|
-
|
|
330
|
+
}), (s, a) => (g(), w(F, null, [
|
|
331
|
+
ce(s.$slots, "default", {}, void 0, !0),
|
|
332
332
|
r.value ? (g(), w("div", Le, [
|
|
333
|
-
(g(),
|
|
334
|
-
disabled: !
|
|
335
|
-
to: typeof
|
|
333
|
+
(g(), R(fe, {
|
|
334
|
+
disabled: !s.appendToBody,
|
|
335
|
+
to: typeof s.appendToBody == "string" ? s.appendToBody : "body"
|
|
336
336
|
}, [
|
|
337
337
|
pe(me, { name: "modal-fade" }, {
|
|
338
338
|
default: ve(() => [
|
|
339
|
-
(g(!0), w(F, null, ye(e.value, (
|
|
340
|
-
id:
|
|
341
|
-
key:
|
|
342
|
-
component:
|
|
343
|
-
"component-props":
|
|
344
|
-
"max-height":
|
|
345
|
-
"max-width":
|
|
346
|
-
sizes:
|
|
347
|
-
},
|
|
348
|
-
onSubmit:
|
|
339
|
+
(g(!0), w(F, null, ye(e.value, (l) => (g(), R(ze, he({
|
|
340
|
+
id: l.id,
|
|
341
|
+
key: l.id,
|
|
342
|
+
component: l.component,
|
|
343
|
+
"component-props": l.props,
|
|
344
|
+
"max-height": s.maxHeight,
|
|
345
|
+
"max-width": s.maxWidth,
|
|
346
|
+
sizes: s.sizes
|
|
347
|
+
}, l.options, {
|
|
348
|
+
onSubmit: l.onSubmit.value
|
|
349
349
|
}), null, 16, ["id", "component", "component-props", "max-height", "max-width", "sizes", "onSubmit"]))), 128))
|
|
350
350
|
]),
|
|
351
351
|
_: 1
|
|
@@ -363,8 +363,8 @@ function U(o, i) {
|
|
|
363
363
|
e = e.parent;
|
|
364
364
|
return ((n = e == null ? void 0 : e.type) == null ? void 0 : n.name) === i ? e : null;
|
|
365
365
|
}
|
|
366
|
-
function
|
|
367
|
-
const o =
|
|
366
|
+
function Re() {
|
|
367
|
+
const o = W(z), i = Y();
|
|
368
368
|
return {
|
|
369
369
|
open(e, r, n) {
|
|
370
370
|
if (!o)
|
|
@@ -387,15 +387,15 @@ function We() {
|
|
|
387
387
|
}
|
|
388
388
|
};
|
|
389
389
|
}
|
|
390
|
-
function
|
|
390
|
+
function We(o) {
|
|
391
391
|
var u;
|
|
392
|
-
const i =
|
|
392
|
+
const i = W(z), e = Y(), r = U(e, "ModalContainer"), n = (u = r == null ? void 0 : r.props) == null ? void 0 : u.id;
|
|
393
393
|
i && n && i.addSubmitListener(n, o);
|
|
394
394
|
}
|
|
395
395
|
export {
|
|
396
396
|
ze as ModalContainer,
|
|
397
397
|
z as ModalKey,
|
|
398
398
|
He as ModalProvider,
|
|
399
|
-
|
|
400
|
-
|
|
399
|
+
We as onSubmit,
|
|
400
|
+
Re as useModal
|
|
401
401
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +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-
|
|
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-5a470d86]{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-5a470d86]{background:#ffffff;border-radius:5px}.modal-header[data-v-5a470d86]{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-5a470d86]{padding:20px 10px;box-sizing:border-box;max-height:10vw;overflow:auto}.modal-footer[data-v-5a470d86]{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-5a470d86]{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-5a470d86]{color:#fff;background-color:rgb(var(--primary-6, 45, 106, 251))}.modal-footer button.submit-button[data-v-5a470d86]:hover{background-color:rgb(var(--primary-5, 28, 76, 207))}.modal-footer button.cancel-button[data-v-5a470d86]{color:rgb(var(--color-text-2, 78, 89, 105));background-color:var(--color-fill-1, #f5f5f5)}.modal-footer button.cancel-button[data-v-5a470d86]: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)}
|