vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
460 lines (459 loc) • 19.6 kB
JavaScript
import { defineComponent as Ce, ref as f, computed as n, watch as ze, nextTick as le, watchEffect as xe, onMounted as be, onUnmounted as Se, createElementBlock as r, openBlock as s, normalizeStyle as m, unref as k, createVNode as z, withDirectives as P, Transition as oe, withCtx as y, createElementVNode as a, vShow as _, withKeys as Be, withModifiers as Me, normalizeClass as B, createCommentVNode as p, renderSlot as x, createBlock as L, resolveDynamicComponent as ae, createTextVNode as u, toDisplayString as d, Fragment as te, mergeProps as b } from "vue";
import S from "../button/index.js";
import { useInject as Oe } from "../utils/index.js";
const Te = { class: "modal-body" }, Le = {
key: 1,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, $e = {
key: 2,
class: "icon-svg",
focusable: "false",
"data-icon": "info-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Pe = {
key: 3,
class: "icon-svg",
focusable: "false",
"data-icon": "check-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, _e = {
key: 4,
class: "icon-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
"fill-rule": "evenodd",
viewBox: "64 64 896 896"
}, Ve = {
key: 5,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Ee = { class: "modal-btns" }, Ke = { class: "modal-body" }, Ne = {
key: 1,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, De = {
key: 2,
class: "icon-svg",
focusable: "false",
"data-icon": "info-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Re = {
key: 3,
class: "icon-svg",
focusable: "false",
"data-icon": "check-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, We = {
key: 4,
class: "icon-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
"fill-rule": "evenodd",
viewBox: "64 64 896 896"
}, Ye = {
key: 5,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, He = { class: "modal-btns" }, Fe = /* @__PURE__ */ Ce({
__name: "Modal",
props: {
width: { default: 420 },
icon: { default: void 0 },
title: { default: void 0 },
titleStyle: { default: () => ({}) },
content: { default: void 0 },
contentStyle: { default: () => ({}) },
bodyClass: { default: void 0 },
bodyStyle: { default: () => ({}) },
cancelText: { default: "取消" },
cancelProps: { default: () => ({}) },
okText: { default: "确定" },
okType: { default: "primary" },
okProps: { default: () => ({}) },
noticeText: { default: "知道了" },
noticeProps: { default: () => ({}) },
destroyOnClose: { type: Boolean, default: !1 },
centered: { type: Boolean, default: !1 },
top: { default: 100 },
transformOrigin: { default: "mouse" },
confirmLoading: { type: Boolean, default: !1 },
blockScroll: { type: Boolean, default: !0 },
keyboard: { type: Boolean, default: !0 },
maskClosable: { type: Boolean, default: !0 },
maskStyle: { default: () => ({}) }
},
emits: ["update:open", "cancel", "ok", "know"],
setup(ne, { expose: se, emit: re }) {
const V = ne, E = f(), h = f(null), v = f(!1), $ = f(!1), g = f(!1), w = f("50% 50%"), c = f(), o = f(), { colorPalettes: ce } = Oe("Modal"), M = re, K = n(() => {
const e = t("width");
return typeof e == "number" ? `${e}px` : e;
}), ie = n(() => {
const e = t("top");
return typeof e == "number" ? `${e}px` : e;
}), N = n(() => t("centered")), ue = n(() => N.value ? {
width: K.value,
transformOrigin: w.value
} : {
width: K.value,
top: ie.value,
transformOrigin: w.value
}), D = n(() => t("titleStyle")), R = n(() => t("contentStyle")), W = n(() => t("bodyClass")), Y = n(() => t("bodyStyle")), de = n(() => t("maskStyle")), O = n(() => t("icon")), H = n(() => t("title")), I = n(() => t("content")), j = n(() => t("cancelText")), A = n(() => t("cancelProps")), F = n(() => t("okType")), U = n(() => t("okText")), X = n(() => t("okProps")), q = n(() => t("noticeText")), G = n(() => t("noticeProps")), J = n(() => t("destroyOnClose"));
ze(
v,
async (e) => {
const l = t("blockScroll");
e ? (await le(), E.value.focus(), l && (document.documentElement.style.overflowY = "hidden", document.body.style.overflowY = "hidden")) : l && (document.documentElement.style.removeProperty("overflow-y"), document.body.style.removeProperty("overflow-y"));
},
{
immediate: !0
}
), xe(() => {
g.value = V.confirmLoading;
}), be(() => {
document.addEventListener("click", Q, !0);
}), Se(() => {
document.removeEventListener("click", Q, !0);
});
function Q(e) {
v.value || (h.value = {
x: e.clientX,
// 相对于浏览器视口左上角的 X 坐标，不页面滚动而改变
y: e.clientY
// 相对于浏览器视口左上角的 Y 坐标，不页面滚动而改变
});
}
async function ve(e) {
if ($.value = !0, await le(), t("transformOrigin") === "mouse" && h.value) {
const i = e.getBoundingClientRect();
w.value = `${h.value.x - i.left}px ${h.value.y - i.top}px`;
} else
w.value = "50% 50%";
}
function me(e) {
if (t("transformOrigin") === "mouse" && h.value) {
const i = e.getBoundingClientRect();
w.value = `${h.value.x - i.left}px ${h.value.y - i.top}px`;
} else
w.value = "50% 50%";
}
function fe() {
$.value = !1;
}
function t(e) {
var i;
let l = V[e];
return ((i = c.value) == null ? void 0 : i[e]) !== void 0 && (l = c.value[e]), l;
}
function ye(e) {
o.value = "info", c.value = e, C();
}
function pe(e) {
o.value = "success", c.value = e, C();
}
function he(e) {
o.value = "error", c.value = e, C();
}
function ge(e) {
o.value = "warning", c.value = e, C();
}
function ke(e) {
o.value = "confirm", c.value = e, C();
}
function we(e) {
o.value = "erase", c.value = e, C();
}
function C() {
v.value = !0, M("update:open", !0);
}
function T() {
var e;
(e = c.value) != null && e.onCancel && c.value.onCancel(), v.value = !1, M("cancel");
}
async function Z() {
var e;
(e = c.value) != null && e.onOk && (g.value = !0, await c.value.onOk(), g.value = !1), v.value = !1, M("ok");
}
function ee() {
var e;
(e = c.value) != null && e.onKnow && c.value.onKnow(), v.value = !1, M("know");
}
return se({
info: ye,
success: pe,
error: he,
warning: ge,
confirm: ke,
erase: we
}), (e, l) => (s(), r("div", {
class: "m-modal-root",
style: m(`
--modal-primary-color: ${k(ce)[5]};
--modal-success-color: #52c41a;
--modal-error-color: #ff4d4f;
--modal-warning-color: #faad14;
--modal-confirm-color: #faad14;
--modal-erase-color: #faad14;
`)
}, [
z(oe, { name: "fade" }, {
default: y(() => [
P(a("div", {
class: "modal-mask",
style: m(de.value)
}, null, 4), [
[_, v.value]
])
]),
_: 1
}),
P(a("div", {
tabindex: "-1",
ref_key: "modalWrapRef",
ref: E,
class: B(["m-modal-wrap", { "flex-centered": N.value }]),
onClick: l[0] || (l[0] = Me((i) => t("maskClosable") ? T() : () => !1, ["self"])),
onKeydown: l[1] || (l[1] = Be((i) => t("keyboard") ? T() : () => !1, ["esc"]))
}, [
z(oe, {
name: "zoom",
"enter-from-class": "zoom-enter",
"enter-active-class": "zoom-enter",
"enter-to-class": "zoom-enter zoom-enter-active",
"leave-from-class": "zoom-leave",
"leave-active-class": "zoom-leave zoom-leave-active",
"leave-to-class": "zoom-leave zoom-leave-active",
onBeforeEnter: ve,
onBeforeLeave: me,
onAfterLeave: fe
}, {
default: y(() => [
P(a("div", {
class: "m-modal",
style: m(ue.value)
}, [
J.value ? p("", !0) : (s(), r("div", {
key: 0,
class: B(["modal-body-wrap", W.value]),
style: m(Y.value)
}, [
a("div", Te, [
a("div", {
class: B(["modal-header", {
[`icon-${o.value}`]: ["info", "success", "error", "warning", "confirm", "erase"].includes(o.value)
}])
}, [
x(e.$slots, "icon", {}, () => [
O.value ? (s(), L(ae(O.value), {
key: 0,
class: "icon-svg"
})) : o.value === "confirm" || o.value === "erase" ? (s(), r("svg", Le, l[2] || (l[2] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, null, -1),
a("path", { d: "M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" }, null, -1)
]))) : o.value === "info" ? (s(), r("svg", $e, l[3] || (l[3] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }, null, -1)
]))) : o.value === "success" ? (s(), r("svg", Pe, l[4] || (l[4] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }, null, -1)
]))) : o.value === "error" ? (s(), r("svg", _e, l[5] || (l[5] = [
a("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }, null, -1)
]))) : o.value === "warning" ? (s(), r("svg", Ve, l[6] || (l[6] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }, null, -1)
]))) : p("", !0)
], !0),
a("div", {
class: "modal-title",
style: m(D.value)
}, [
x(e.$slots, "title", {}, () => [
u(d(H.value), 1)
], !0)
], 4)
], 2),
a("div", {
class: "modal-content",
style: m(R.value)
}, [
x(e.$slots, "default", {}, () => [
u(d(I.value), 1)
], !0)
], 4)
]),
a("div", Ee, [
["confirm", "erase"].includes(o.value) ? (s(), r(te, { key: 0 }, [
z(k(S), b({
class: "mr8",
onClick: T
}, A.value), {
default: y(() => [
u(d(j.value), 1)
]),
_: 1
}, 16),
z(k(S), b({
type: F.value,
loading: g.value,
onClick: Z
}, X.value), {
default: y(() => [
u(d(U.value), 1)
]),
_: 1
}, 16, ["type", "loading"])
], 64)) : p("", !0),
["info", "success", "error", "warning"].includes(o.value) ? (s(), L(k(S), b({
key: 1,
type: "primary",
loading: g.value,
onClick: ee
}, G.value), {
default: y(() => [
u(d(q.value), 1)
]),
_: 1
}, 16, ["loading"])) : p("", !0)
])
], 6)),
J.value && v.value ? (s(), r("div", {
key: 1,
class: B(["modal-body-wrap", W.value]),
style: m(Y.value)
}, [
a("div", Ke, [
a("div", {
class: B(["modal-header", {
[`icon-${o.value}`]: ["info", "success", "error", "warning", "confirm", "erase"].includes(o.value)
}])
}, [
x(e.$slots, "icon", {}, () => [
O.value ? (s(), L(ae(O.value), {
key: 0,
class: "icon-svg"
})) : o.value === "confirm" || o.value === "erase" ? (s(), r("svg", Ne, l[7] || (l[7] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, null, -1),
a("path", { d: "M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" }, null, -1)
]))) : o.value === "info" ? (s(), r("svg", De, l[8] || (l[8] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }, null, -1)
]))) : o.value === "success" ? (s(), r("svg", Re, l[9] || (l[9] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }, null, -1)
]))) : o.value === "error" ? (s(), r("svg", We, l[10] || (l[10] = [
a("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }, null, -1)
]))) : o.value === "warning" ? (s(), r("svg", Ye, l[11] || (l[11] = [
a("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }, null, -1)
]))) : p("", !0)
], !0),
a("div", {
class: "modal-title",
style: m(D.value)
}, [
x(e.$slots, "title", {}, () => [
u(d(H.value), 1)
], !0)
], 4)
], 2),
a("div", {
class: "modal-content",
style: m(R.value)
}, [
x(e.$slots, "default", {}, () => [
u(d(I.value), 1)
], !0)
], 4)
]),
a("div", He, [
["confirm", "erase"].includes(o.value) ? (s(), r(te, { key: 0 }, [
z(k(S), b({
class: "mr8",
onClick: T
}, A.value), {
default: y(() => [
u(d(j.value), 1)
]),
_: 1
}, 16),
z(k(S), b({
type: F.value,
loading: g.value,
onClick: Z
}, X.value), {
default: y(() => [
u(d(U.value), 1)
]),
_: 1
}, 16, ["type", "loading"])
], 64)) : p("", !0),
["info", "success", "error", "warning"].includes(o.value) ? (s(), L(k(S), b({
key: 1,
type: "primary",
loading: g.value,
onClick: ee
}, G.value), {
default: y(() => [
u(d(q.value), 1)
]),
_: 1
}, 16, ["loading"])) : p("", !0)
])
], 6)) : p("", !0)
], 4), [
[_, v.value]
])
]),
_: 3
})
], 34), [
[_, $.value]
])
], 4));
}
});
export {
Fe as default
};