vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
456 lines (455 loc) • 19.7 kB
JavaScript
import { defineComponent as ze, ref as m, computed as n, watch as xe, nextTick as oe, watchEffect as be, onMounted as Se, onUnmounted as Be, createElementBlock as r, openBlock as s, normalizeStyle as v, unref as k, createVNode as z, withDirectives as P, Transition as ae, withCtx as f, createElementVNode as a, vShow as _, withKeys as Oe, withModifiers as Me, normalizeClass as B, createCommentVNode as p, renderSlot as x, createBlock as L, resolveDynamicComponent as te, createTextVNode as i, toDisplayString as u, Fragment as ne, mergeProps as b } from "vue";
import S from "../button/index.js";
import { useInject as Te, useOptionsSupported as Le } from "../utils/index.js";
const $e = { class: "modal-body" }, Pe = {
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"
}, Ve = {
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"
}, Ee = {
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"
}, Ke = {
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"
}, Ne = { class: "modal-btns" }, De = { class: "modal-body" }, Re = {
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"
}, We = {
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"
}, Ye = {
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"
}, je = {
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"
}, Fe = {
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" }, Xe = /* @__PURE__ */ ze({
__name: "Modal",
props: {
width: { default: 420 },
icon: { type: [Object, Function], 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(se, { expose: re, emit: ce }) {
const V = se, E = m(), y = m(null), d = m(!1), $ = m(!1), h = m(!1), w = m("50% 50%"), c = m(), o = m(), { colorPalettes: ie } = Te("Modal"), { isSupported: K } = Le("capture"), O = ce, N = n(() => {
const e = t("width");
return typeof e == "number" ? `${e}px` : e;
}), ue = n(() => {
const e = t("top");
return typeof e == "number" ? `${e}px` : e;
}), D = n(() => t("centered")), de = n(() => D.value ? {
width: N.value,
transformOrigin: w.value
} : {
width: N.value,
top: ue.value,
transformOrigin: w.value
}), R = n(() => t("titleStyle")), W = n(() => t("contentStyle")), Y = n(() => t("bodyClass")), j = n(() => t("bodyStyle")), ve = n(() => t("maskStyle")), M = n(() => t("icon")), F = n(() => t("title")), H = n(() => t("content")), I = n(() => t("cancelText")), A = n(() => t("cancelProps")), U = n(() => t("okType")), X = n(() => t("okText")), q = n(() => t("okProps")), G = n(() => t("noticeText")), J = n(() => t("noticeProps")), Q = n(() => t("destroyOnClose"));
xe(
d,
async (e) => {
const l = t("blockScroll");
e ? (await oe(), 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
}
), be(() => {
h.value = V.confirmLoading;
}), Se(() => {
document.addEventListener("click", Z, K.value ? { capture: !0 } : !0);
}), Be(() => {
document.removeEventListener("click", Z, K.value ? { capture: !0 } : !0);
});
function Z(e) {
d.value || (y.value = {
x: e.clientX,
// 相对于浏览器视口左上角的 X 坐标，不页面滚动而改变
y: e.clientY
// 相对于浏览器视口左上角的 Y 坐标，不页面滚动而改变
});
}
async function me(e) {
if ($.value = !0, await oe(), t("transformOrigin") === "mouse" && y.value) {
const g = e.getBoundingClientRect();
w.value = `${y.value.x - g.left}px ${y.value.y - g.top}px`;
} else
w.value = "50% 50%";
}
function fe(e) {
if (t("transformOrigin") === "mouse" && y.value) {
const g = e.getBoundingClientRect();
w.value = `${y.value.x - g.left}px ${y.value.y - g.top}px`;
} else
w.value = "50% 50%";
}
function pe() {
$.value = !1;
}
function t(e) {
let l = V[e];
return c.value?.[e] !== void 0 && (l = c.value[e]), l;
}
function ye(e) {
o.value = "info", c.value = e, C();
}
function he(e) {
o.value = "success", c.value = e, C();
}
function ge(e) {
o.value = "error", c.value = e, C();
}
function ke(e) {
o.value = "warning", c.value = e, C();
}
function we(e) {
o.value = "confirm", c.value = e, C();
}
function Ce(e) {
o.value = "erase", c.value = e, C();
}
function C() {
d.value = !0, O("update:open", !0);
}
function T() {
c.value?.onCancel && c.value.onCancel(), d.value = !1, O("cancel");
}
async function ee() {
c.value?.onOk && (h.value = !0, await c.value.onOk(), h.value = !1), d.value = !1, O("ok");
}
function le() {
c.value?.onKnow && c.value.onKnow(), d.value = !1, O("know");
}
return re({
info: ye,
success: he,
error: ge,
warning: ke,
confirm: we,
erase: Ce
}), (e, l) => (s(), r("div", {
class: "modal-root",
style: v(`
--modal-primary-color: ${k(ie)[5]};
--modal-success-color: #52c41a;
--modal-error-color: #ff4d4f;
--modal-warning-color: #faad14;
--modal-confirm-color: #faad14;
--modal-erase-color: #faad14;
`)
}, [
z(ae, { name: "fade" }, {
default: f(() => [
P(a("div", {
class: "modal-mask",
style: v(ve.value)
}, null, 4), [
[_, d.value]
])
]),
_: 1
}),
P(a("div", {
tabindex: "-1",
ref_key: "modalWrapRef",
ref: E,
class: B(["modal-wrap", { "flex-centered": D.value }]),
onClick: l[0] || (l[0] = Me((g) => t("maskClosable") ? T() : () => !1, ["self"])),
onKeydown: l[1] || (l[1] = Oe((g) => t("keyboard") ? T() : () => !1, ["esc"]))
}, [
z(ae, {
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: me,
onBeforeLeave: fe,
onAfterLeave: pe
}, {
default: f(() => [
P(a("div", {
class: "modal-container",
style: v(de.value)
}, [
Q.value ? p("", !0) : (s(), r("div", {
key: 0,
class: B(["modal-body-wrap", Y.value]),
style: v(j.value)
}, [
a("div", $e, [
a("div", {
class: B(["modal-header", {
[`icon-${o.value}`]: ["info", "success", "error", "warning", "confirm", "erase"].includes(o.value)
}])
}, [
x(e.$slots, "icon", {}, () => [
M.value ? (s(), L(te(M.value), {
key: 0,
class: "icon-svg"
})) : o.value === "confirm" || o.value === "erase" ? (s(), r("svg", Pe, [...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", Ve, [...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", Ee, [...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", Ke, [...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: v(R.value)
}, [
x(e.$slots, "title", {}, () => [
i(u(F.value), 1)
], !0)
], 4)
], 2),
a("div", {
class: "modal-content",
style: v(W.value)
}, [
x(e.$slots, "default", {}, () => [
i(u(H.value), 1)
], !0)
], 4)
]),
a("div", Ne, [
["confirm", "erase"].includes(o.value) ? (s(), r(ne, { key: 0 }, [
z(k(S), b({
class: "mr8",
onClick: T
}, A.value), {
default: f(() => [
i(u(I.value), 1)
]),
_: 1
}, 16),
z(k(S), b({
type: U.value,
loading: h.value,
onClick: ee
}, q.value), {
default: f(() => [
i(u(X.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: h.value,
onClick: le
}, J.value), {
default: f(() => [
i(u(G.value), 1)
]),
_: 1
}, 16, ["loading"])) : p("", !0)
])
], 6)),
Q.value && d.value ? (s(), r("div", {
key: 1,
class: B(["modal-body-wrap", Y.value]),
style: v(j.value)
}, [
a("div", De, [
a("div", {
class: B(["modal-header", {
[`icon-${o.value}`]: ["info", "success", "error", "warning", "confirm", "erase"].includes(o.value)
}])
}, [
x(e.$slots, "icon", {}, () => [
M.value ? (s(), L(te(M.value), {
key: 0,
class: "icon-svg"
})) : o.value === "confirm" || o.value === "erase" ? (s(), r("svg", Re, [...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", We, [...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", Ye, [...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", je, [...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", Fe, [...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: v(R.value)
}, [
x(e.$slots, "title", {}, () => [
i(u(F.value), 1)
], !0)
], 4)
], 2),
a("div", {
class: "modal-content",
style: v(W.value)
}, [
x(e.$slots, "default", {}, () => [
i(u(H.value), 1)
], !0)
], 4)
]),
a("div", He, [
["confirm", "erase"].includes(o.value) ? (s(), r(ne, { key: 0 }, [
z(k(S), b({
class: "mr8",
onClick: T
}, A.value), {
default: f(() => [
i(u(I.value), 1)
]),
_: 1
}, 16),
z(k(S), b({
type: U.value,
loading: h.value,
onClick: ee
}, q.value), {
default: f(() => [
i(u(X.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: h.value,
onClick: le
}, J.value), {
default: f(() => [
i(u(G.value), 1)
]),
_: 1
}, 16, ["loading"])) : p("", !0)
])
], 6)) : p("", !0)
], 4), [
[_, d.value]
])
]),
_: 3
})
], 34), [
[_, $.value]
])
], 4));
}
});
export {
Xe as default
};