@kolirt/vue-modal
Version:
Simple Vue3 modal package
289 lines (288 loc) • 12.3 kB
JavaScript
(function(){var a;"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=(a=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:a.content,e.appendChild(document.createTextNode(`.vue-modal[data-v-31076951]{position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:auto;opacity:0;visibility:hidden;display:flex;justify-content:center;flex-wrap:wrap}.vue-modal.vue-modal--slideDown[data-v-31076951]{transform:translateY(-40px)}.vue-modal.vue-modal--slideUp[data-v-31076951]{transform:translateY(40px)}.vue-modal.vue-modal--slideLeft[data-v-31076951]{transform:translate(-40px)}.vue-modal.vue-modal--slideRight[data-v-31076951]{transform:translate(40px)}.vue-modal.vue-modal--center[data-v-31076951]{align-items:center}.vue-modal.vue-modal--top[data-v-31076951]{align-items:flex-start}.vue-modal.vue-modal--active[data-v-31076951]:not(.vue-modal--hide){transform:translate(0);opacity:1;visibility:visible}.vue-modals[data-v-33aecfee]{width:0}.vue-modals[data-v-33aecfee] *{box-sizing:border-box}.vue-modals-overlay[data-v-33aecfee]{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden}.vue-modals-overlay.active[data-v-33aecfee]{opacity:1;visibility:visible}.vue-modal-content[data-v-08977c6b]{background:#fff;border-radius:.5rem;font-family:inherit}.vue-modal-content.size-sm[data-v-08977c6b]{width:100%;max-width:576px}.vue-modal-content.size-md[data-v-08977c6b]{width:100%;max-width:768px}.vue-modal-content.size-lg[data-v-08977c6b]{width:100%;max-width:992px}.vue-modal-content.size-xl[data-v-08977c6b]{width:100%;max-width:1200px}.vue-modal-content.size-xxl[data-v-08977c6b]{width:100%;max-width:1400px}.vue-modal-header[data-v-08977c6b]{padding:1rem;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.vue-modal-title[data-v-08977c6b]{font-size:1.25rem;font-weight:500;margin:0}.vue-modal-btn-close[data-v-08977c6b]{opacity:.5;width:2rem;height:2rem;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:none;padding:0;cursor:pointer;transition:opacity .2s ease}.vue-modal-btn-close[data-v-08977c6b]:hover{opacity:1}.vue-modal-body[data-v-08977c6b]{padding:1rem}.vue-modal-footer[data-v-08977c6b]{padding:1rem;display:flex;flex-wrap:wrap;justify-content:flex-end;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;border-top:1px solid #dee2e6;gap:.25rem}`)),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { reactive as D, computed as v, markRaw as U, ref as M, defineComponent as z, onMounted as N, onBeforeUnmount as H, openBlock as c, createElementBlock as f, normalizeClass as x, normalizeStyle as V, renderSlot as T, Fragment as j, renderList as q, createBlock as R, withCtx as A, resolveDynamicComponent as G, normalizeProps as J, guardReactiveProps as K, createCommentVNode as b, useSlots as Q, toDisplayString as X, unref as W, createElementVNode as Y } from "vue";
import Z from "js-event-bus";
const m = D({
modals: []
}), $ = v(() => m.modals[m.modals.length - 1]), fe = v(() => m.modals), pe = v(() => m.modals.length > 0);
function w(e) {
e.options.group = e.options.group || "default", m.modals.push(U(e));
}
function O() {
m.modals.pop();
}
const E = new Z();
function h(e, ...o) {
E.emit(e, null, ...o);
}
function p(e, o) {
E.on(e, o);
}
function _(e, o) {
E.detach(e, o);
}
var a = /* @__PURE__ */ ((e) => (e.Open = "open", e.Opened = "opened", e.Close = "close", e.Closed = "closed", e))(a || {});
async function ge(e, o, t) {
t != null && t.force && m.modals.length && await ee(!1);
const l = m.modals.length;
return w({
id: l,
component: e,
props: o,
options: t || {}
}), h(a.Open), new Promise((n, r) => {
function u(g) {
g.id === l && (_(a.Closed, u), g.success ? n(g.data) : r("Modal closed."));
}
p(a.Closed, u);
});
}
function _e(e) {
return new Promise((o) => {
function t(l) {
_(a.Closed, t), o(l.data);
}
p(a.Closed, t), h(a.Close, { success: !0, data: e });
});
}
function F() {
return new Promise((e) => {
function o() {
_(a.Closed, o), e();
}
p(a.Closed, o), h(a.Close, { success: !1 });
});
}
function ee(e = !0) {
return new Promise((o) => {
function t() {
_(a.Closed, t);
for (let l = m.modals.length - 1; l >= 0; l--)
m.modals.splice(l, 1), h(a.Closed, {
id: l,
success: !1
});
o();
}
p(a.Closed, t), h(a.Close, { success: !1, forceCloseAll: e });
});
}
function oe() {
var e;
try {
const o = document.createElement("div");
o.style.visibility = "hidden", o.style.overflow = "scroll", document.body.appendChild(o);
const t = document.createElement("div");
o.appendChild(t);
const l = o.offsetWidth - t.offsetWidth;
return (e = o.parentNode) == null || e.removeChild(o), l;
} catch {
return 0;
}
}
function te() {
const e = M(oe());
function o() {
document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > document.documentElement.clientHeight && (document.body.style.paddingRight = `${e.value}px`);
}
function t() {
document.documentElement.style.overflow = "auto", document.body.style.paddingRight = "0px";
}
function l(n) {
n ? o() : t();
}
return {
paddingSize: e,
toggleLock: l
};
}
const d = D({
transitionTime: 200,
animationType: "slideDown",
modalStyle: {
padding: void 0,
align: "center",
"z-index": 201
},
overlayStyle: {
"background-color": "rgba(0, 0, 0, 0.9)",
"z-index": 200
}
});
function le(e) {
var o, t, l, n, r, u;
e != null && e.transitionTime && (d.transitionTime = e.transitionTime), e != null && e.animationType && (d.animationType = e.animationType), e != null && e.modalStyle && ((o = e.modalStyle) != null && o.padding && (d.modalStyle.padding = e.modalStyle.padding), (t = e.modalStyle) != null && t.align && (d.modalStyle.align = e.modalStyle.align), (l = e.modalStyle) != null && l["z-index"] && (d.modalStyle["z-index"] = e.modalStyle["z-index"])), (n = e == null ? void 0 : e.overlayStyle) != null && n["z-index"] && (d.overlayStyle["z-index"] = e.overlayStyle["z-index"]), (r = e == null ? void 0 : e.overlayStyle) != null && r["background-color"] && (d.overlayStyle["background-color"] = e.overlayStyle["background-color"]), (u = e == null ? void 0 : e.overlayStyle) != null && u["backdrop-filter"] && (d.overlayStyle["backdrop-filter"] = e.overlayStyle["backdrop-filter"]);
}
function ae(e) {
return "key" in e ? e.key === "Escape" || e.key === "Esc" : e.keyCode === 27;
}
const ne = /* @__PURE__ */ z({
__name: "BaseModal",
props: {
group: { default: "default" },
item: {}
},
setup(e) {
const o = e, t = M(!1), l = v(() => o.item.id !== $.value.id), n = v(() => d.animationType !== "none" && d.transitionTime || 0), r = v(() => {
var s, y, i, S, C, L, P, I;
return {
padding: ((i = (y = (s = o.item) == null ? void 0 : s.options) == null ? void 0 : y.modalStyle) == null ? void 0 : i.padding) ?? ((S = d.modalStyle) == null ? void 0 : S.padding),
"z-index": ((P = (L = (C = o.item) == null ? void 0 : C.options) == null ? void 0 : L.modalStyle) == null ? void 0 : P["z-index"]) ?? ((I = d.modalStyle) == null ? void 0 : I["z-index"]),
transition: `opacity ${n.value}ms ease, visibility ${n.value}ms ease, transform ${n.value}ms ease`
};
}), u = v(() => {
var s, y, i, S;
return [
{
"vue-modal--active": t.value,
"vue-modal--hide": l.value
},
`vue-modal--${((i = (y = (s = o.item) == null ? void 0 : s.options) == null ? void 0 : y.modalStyle) == null ? void 0 : i.align) ?? ((S = d.modalStyle) == null ? void 0 : S.align)}`,
`vue-modal--${d.animationType}`
];
});
function g(s) {
$.value.id === o.item.id && (t.value = !1, setTimeout(h, n.value, a.Closed, {
id: o.item.id,
success: s.success,
data: s.data
}));
}
function k(s) {
ae(s) && $.value.id === o.item.id && F();
}
return N(() => {
setTimeout(
() => {
t.value = !0;
},
o.item.id > 0 ? n.value : 0
), p(a.Close, g), document.addEventListener("keydown", k), h(a.Opened);
}), H(() => {
_(a.Close, g), document.removeEventListener("keydown", k);
}), (s, y) => (c(), f("div", {
class: x([u.value, "vue-modal"]),
style: V(r.value)
}, [
T(s.$slots, "default", {}, void 0, !0)
], 6));
}
});
const B = (e, o) => {
const t = e.__vccOpts || e;
for (const [l, n] of o)
t[l] = n;
return t;
}, de = /* @__PURE__ */ B(ne, [["__scopeId", "data-v-31076951"]]), se = /* @__PURE__ */ z({
__name: "ModalTarget",
props: {
group: { default: "default" },
withoutOverlay: { type: Boolean, default: !1 }
},
setup(e) {
const o = e, t = te(), l = d.animationType !== "none" && d.transitionTime || 0, n = v(() => ({
...(d == null ? void 0 : d.overlayStyle) || {},
transition: `opacity ${l}ms ease, visibility ${l}ms ease`
})), r = M(!1), u = v(() => m.modals.filter((i) => i.options.group === o.group)), g = v(() => u.value.length && !r.value && $.value.options.group === o.group);
function k({ forceCloseAll: i }) {
(u.value.length === 1 && i !== !1 || i) && (r.value = !0, setTimeout(() => {
r.value = !1;
}, l));
}
function s() {
t.toggleLock(!1);
}
function y() {
t.toggleLock(!0);
}
return N(() => {
p(a.Close, k), p(a.Closed, s), p(a.Open, y);
}), H(() => {
_(a.Close, k), _(a.Closed, s), _(a.Open, y);
}), (i, S) => (c(), f("div", {
class: x([[`vue-modals-${o.group}-group`], "vue-modals"])
}, [
(c(!0), f(j, null, q(u.value, (C) => (c(), R(de, {
item: C,
key: `${o.group}-${C.id}`
}, {
default: A(() => [
(c(), R(G(C.component), J(K(C.props)), null, 16))
]),
_: 2
}, 1032, ["item"]))), 128)),
i.withoutOverlay ? b("", !0) : (c(), f("div", {
key: 0,
style: V(n.value),
class: x([{ active: g.value }, "vue-modals-overlay"])
}, null, 6))
], 2));
}
});
const Ce = /* @__PURE__ */ B(se, [["__scopeId", "data-v-33aecfee"]]), ie = {
key: 0,
class: "vue-modal-header"
}, re = {
key: 0,
class: "vue-modal-title"
}, ue = { class: "vue-modal-body" }, ce = {
key: 1,
class: "vue-modal-footer"
}, me = /* @__PURE__ */ z({
__name: "SimpleModal",
props: {
title: {},
showClose: { type: Boolean, default: !0 },
size: {
type: String,
default: "sm",
validator(e) {
return ["sm", "md", "lg", "xl", "xxl"].includes(e);
}
}
},
setup(e) {
const o = e, t = Q();
return (l, n) => (c(), f("div", {
class: x([`size-${o.size}`, "vue-modal-content"])
}, [
o.title || o.showClose ? (c(), f("div", ie, [
o.title ? (c(), f("h1", re, X(o.title), 1)) : b("", !0),
o.showClose ? (c(), f("button", {
key: 1,
onClick: n[0] || (n[0] = (r) => W(F)()),
class: "vue-modal-btn-close",
"aria-label": "Close"
})) : b("", !0)
])) : b("", !0),
Y("div", ue, [
T(l.$slots, "default", {}, void 0, !0)
]),
W(t).footer ? (c(), f("div", ce, [
T(l.$slots, "footer", {}, void 0, !0)
])) : b("", !0)
], 2));
}
});
const he = /* @__PURE__ */ B(me, [["__scopeId", "data-v-08977c6b"]]);
function Se(e) {
return {
install() {
le(e || {}), p(a.Closed, O);
}
};
}
export {
_ as $off,
p as $on,
a as Events,
Ce as ModalTarget,
he as SimpleModal,
ee as closeAllModals,
F as closeModal,
_e as confirmModal,
Se as createModal,
pe as isOpened,
fe as modals,
ge as openModal,
te as useLock
};