jv3-alert
Version:
easy alert from assign by route by cdnagroup
180 lines (179 loc) • 10.1 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var d=document.createElement("style");d.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css?family=Montserrat:400,800";.modal-mask[data-v-d46ed5de]{color:#000;font-family:Montserrat,sans-serif;position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:table;transition:opacity .3s ease}.modal-mask .modal-wrapper[data-v-d46ed5de]{display:table-cell;vertical-align:middle}.modal-mask .modal-wrapper .modal-container[data-v-d46ed5de]{max-width:70vw;width:fit-content;margin:0 auto;padding:0;background-color:#fff;border-radius:2px;box-shadow:0 2px 8px #00000054;transition:all .3s ease;font-family:Helvetica,Arial,sans-serif}.modal-mask .modal-wrapper .modal-container .modal-header[data-v-d46ed5de]{margin-top:0;padding:10px 20px;font-size:20px;font-weight:700;text-align:center}.modal-mask .modal-wrapper .modal-container .modal-footer[data-v-d46ed5de]{overflow:hidden;display:flex;justify-content:stretch}.modal-mask .modal-wrapper .modal-container .modal-body[data-v-d46ed5de]{margin:5px 0;max-height:50vh;min-height:100px;overflow-y:auto}.modal-mask .modal-wrapper .modal-container .modal-body pre[data-v-d46ed5de]{white-space:pre;word-break:normal;margin:0;padding:0 10px;font-family:monospace;font-size:16px;line-height:1.5;color:#333;overflow-x:auto;overflow-y:auto}.modal-mask .modal-wrapper .modal-container button[data-v-d46ed5de]{float:right;flex-grow:1;width:100%;padding:10px 20px;border:none;border-radius:2px;cursor:pointer;transition:background-color .3s ease}.modal-mask .modal-wrapper .modal-container .modal-enter-active[data-v-d46ed5de],.modal-mask .modal-wrapper .modal-container .modal-leave-active[data-v-d46ed5de]{transition:opacity .5s ease}.modal-mask .modal-wrapper .modal-container .modal-enter-from[data-v-d46ed5de],.modal-mask .modal-wrapper .modal-container .modal-leave-to[data-v-d46ed5de]{opacity:0}.modal-mask .modal-wrapper .modal-container .modal-enter-from .modal-container[data-v-d46ed5de],.modal-mask .modal-wrapper .modal-container .modal-leave-to .modal-container[data-v-d46ed5de]{transform:scale(.8)}.modal-mask .modal-wrapper .modal-container .modal-enter-to .modal-container[data-v-d46ed5de],.modal-mask .modal-wrapper .modal-container .modal-leave-from .modal-container[data-v-d46ed5de]{transform:scale(1)}.success[data-v-d46ed5de]{background-color:#4caf50}.success[data-v-d46ed5de]:hover,.success[data-v-d46ed5de]:focus,.success[data-v-d46ed5de]:active{background-color:#43a047}.info[data-v-d46ed5de]{background-color:#2196f3}.info[data-v-d46ed5de]:hover,.info[data-v-d46ed5de]:focus,.info[data-v-d46ed5de]:active{background-color:#1976d2}.warning[data-v-d46ed5de]{background-color:#ff9800}.warning[data-v-d46ed5de]:hover,.warning[data-v-d46ed5de]:focus,.warning[data-v-d46ed5de]:active{background-color:#f57c00}.error[data-v-d46ed5de]{background-color:#f44336}.error[data-v-d46ed5de]:hover,.error[data-v-d46ed5de]:focus,.error[data-v-d46ed5de]:active{background-color:#d32f2f}.red[data-v-d46ed5de]{background-color:#f44336}.red[data-v-d46ed5de]:hover,.red[data-v-d46ed5de]:focus,.red[data-v-d46ed5de]:active{background-color:#d32f2f}.purple[data-v-d46ed5de]{background-color:#9c27b0}.purple[data-v-d46ed5de]:hover,.purple[data-v-d46ed5de]:focus,.purple[data-v-d46ed5de]:active{background-color:#7b1fa2}.blue[data-v-d46ed5de]{background-color:#2196f3}.blue[data-v-d46ed5de]:hover,.blue[data-v-d46ed5de]:focus,.blue[data-v-d46ed5de]:active{background-color:#1976d2}.green[data-v-d46ed5de]{background-color:#4caf50}.green[data-v-d46ed5de]:hover,.green[data-v-d46ed5de]:focus,.green[data-v-d46ed5de]:active{background-color:#43a047}.yellow[data-v-d46ed5de]{background-color:#ffeb3b;color:#000}.yellow[data-v-d46ed5de]:hover,.yellow[data-v-d46ed5de]:focus,.yellow[data-v-d46ed5de]:active{background-color:#fbc02d}.orange[data-v-d46ed5de]{background-color:#ff9800}.orange[data-v-d46ed5de]:hover,.orange[data-v-d46ed5de]:focus,.orange[data-v-d46ed5de]:active{background-color:#f57c00}.grey[data-v-d46ed5de]{background-color:#9e9e9e}.grey[data-v-d46ed5de]:hover,.grey[data-v-d46ed5de]:focus,.grey[data-v-d46ed5de]:active{background-color:#616161}.black[data-v-d46ed5de]{background-color:#000;color:#fff}.black[data-v-d46ed5de]:hover,.black[data-v-d46ed5de]:focus,.black[data-v-d46ed5de]:active{background-color:#1a1a1a}.white[data-v-d46ed5de]{background-color:#fff;color:#000}.white[data-v-d46ed5de]:hover,.white[data-v-d46ed5de]:focus,.white[data-v-d46ed5de]:active{background-color:#f5f5f5}')),document.head.appendChild(d)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
import { defineComponent as b, useAttrs as k, onMounted as w, onUnmounted as D, openBlock as u, createElementBlock as f, unref as d, createElementVNode as c, normalizeClass as m, toDisplayString as y, renderSlot as C, createCommentVNode as p, createApp as g, inject as j } from "vue/dist/vue.esm-bundler.js";
const A = ["v-bind"], E = { class: "modal-wrapper" }, _ = { class: "modal-container" }, J = { class: "modal-body" }, S = { class: "modal-footer" }, F = /* @__PURE__ */ b({
__name: "DialogField",
props: {
title: {
type: String,
default: "Alert !!"
},
message: {
type: String,
default: "Default Message"
},
type: {
type: String,
default: "info",
validator: (o) => ["info", "error", "prompt", "alert", "confirm"].includes(o)
}
},
setup(o) {
const t = k(), e = o, r = (n) => {
n.preventDefault(), n.key === "Escape" && t.onClose && t.onClose(!1), n.key === "Enter" && t.onClose && t.onClose(!0);
};
return w(() => {
window.addEventListener("keydown", r);
}), D(() => {
window.removeEventListener("keydown", r);
}), (n, i) => {
var l;
return u(), f("div", {
class: "modal-mask",
"v-bind": d(t),
transition: "modal"
}, [
c("div", E, [
c("div", _, [
c("div", {
class: m(["modal-header", ((l = d(t)) == null ? void 0 : l.color) ?? "info"])
}, y(o.title), 3),
c("div", J, [
C(n.$slots, "default", {}, () => [
c("pre", null, y(o.message), 1)
], !0)
]),
c("div", S, [
C(n.$slots, "actions", {}, () => {
var s;
return [
(e == null ? void 0 : e.type) === "confirm" ? (u(), f("button", {
key: 0,
class: m(["modal-default-button", "success"]),
onClick: i[0] || (i[0] = (a) => d(t).onClose(!0))
}, " Confirm ")) : p("", !0),
(e == null ? void 0 : e.type) === "confirm" ? (u(), f("button", {
key: 1,
class: m(["modal-default-button", "red"]),
onClick: i[1] || (i[1] = (a) => d(t).onClose(!1))
}, " Cancel ")) : p("", !0),
(e == null ? void 0 : e.type) !== "confirm" ? (u(), f("button", {
key: 2,
class: m(["modal-default-button", ((s = d(t)) == null ? void 0 : s.color) ?? "info"]),
onClick: i[2] || (i[2] = //@ts-ignore
(...a) => d(t).onClose && d(t).onClose(...a))
}, " Close ", 2)) : p("", !0)
];
}, !0)
])
])
])
], 8, A);
};
}
}), V = (o, t) => {
const e = o.__vccOpts || o;
for (const [r, n] of t)
e[r] = n;
return e;
}, v = /* @__PURE__ */ V(F, [["__scopeId", "data-v-d46ed5de"]]);
class h {
constructor(t) {
Object.assign(this, {
...t
});
}
dialog(t, e = {}, r = `
<DialogField v-bind="options"></DialogField>
`) {
return new Promise((n, i) => {
const l = document.createElement("div");
document.body.appendChild(l), typeof t != "string" && (t = JSON.stringify(t, null, 2));
const s = g({
components: { DialogField: v },
template: r,
data() {
return {
options: {
message: t,
onClose: this.handleDialogClose,
...e
// Merge with any additional options
}
};
},
methods: {
handleDialogClose(a) {
s.unmount(), l.remove(), n(a);
}
}
});
s.mount(l);
});
}
alert(t, e = {}) {
return this.dialog(t, { color: "info", title: "Alert", ...e });
}
error(t, e = {}) {
return this.dialog(t, {
color: "error",
title: "Error",
...e
});
}
info(t, e = {}) {
return this.dialog(t, {
color: "info",
title: "Info",
...e
});
}
confirm(t, e, r = {}) {
return new Promise((n, i) => {
const l = document.createElement("div");
document.body.appendChild(l), typeof t != "string" && (t = JSON.stringify(t, null, 2));
const s = g({
components: { DialogField: v },
template: `
<DialogField v-bind="options"></DialogField>
`,
data() {
return {
options: {
message: t,
color: "warning",
type: "confirm",
title: "Confirm",
onClose: this.handleDialogClose,
...r
// Merge with any additional options
}
};
},
methods: {
handleDialogClose(a) {
e(a), s.unmount(), l.remove(), n();
}
}
});
s.mount(l);
});
}
}
const $ = {};
async function O(o, t = {}) {
const e = new h({ ...$, ...t });
o.config.globalProperties.$jalert = e, o.provide("jalert", e);
}
function I() {
const o = j("jalert");
if (!o)
throw new Error("JV3Alert not provided. Make sure to call JV3Alert(app) in your main.js or main.ts.");
return o;
}
const M = new h({});
export {
O as JV3Alert,
M as JV3AlertInstant,
O as default,
I as useJAlert
};