@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
470 lines (469 loc) • 16.6 kB
JavaScript
import { defineComponent as ke, useSlots as Ce, toRef as Ee, ref as w, reactive as N, computed as c, watch as $, nextTick as O, shallowReadonly as Fe, openBlock as S, createBlock as He, unref as o, normalizeClass as d, withCtx as b, withDirectives as Re, createElementVNode as W, normalizeStyle as X, createVNode as m, createElementBlock as B, renderSlot as z, normalizeProps as k, guardReactiveProps as C, createTextVNode as Y, toDisplayString as Z, withModifiers as q, mergeProps as Me, createCommentVNode as D, vShow as _e } from "vue";
import "../button/index.mjs";
import "../icon/index.mjs";
import "../masker/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import { useNameHelper as Te, useProps as Pe, createSizeProp as Ne, useLocale as Oe, useIcons as We, emitEvent as s } from "@vexip-ui/config";
import { useMoving as ne } from "@vexip-ui/hooks";
import { isNull as le, isValidNumber as Be, toNumber as De, getGlobalCount as Ie, isPromise as Ve } from "@vexip-ui/utils";
import { modalProps as Le, positionProp as x } from "./props.mjs";
import je from "../masker/masker.vue2.mjs";
import Ae from "../resize-observer/resize-observer.mjs";
import E from "../renderer/renderer.mjs";
import Ge from "../icon/icon.mjs";
import se from "../button/button.mjs";
const Ue = ["aria-modal", "aria-labelledby", "aria-describedby"], Xe = ["id"], Ye = ["id"], ut = /* @__PURE__ */ ke({
name: "Modal",
__name: "modal",
props: Le,
emits: ["update:active"],
setup(de, { expose: fe, emit: ue }) {
const i = Te("modal"), t = Pe("modal", de, {
locale: null,
transfer: !1,
active: {
default: !1,
static: !0
},
width: x,
height: x,
top: x,
left: x,
right: x,
bottom: x,
title: "",
closable: !0,
inner: !1,
maskClose: !0,
modalClass: null,
modalStyle: null,
noFooter: !1,
hideMask: !1,
draggable: !1,
resizable: !1,
onBeforeClose: {
default: null,
isFunc: !0
},
loading: !1,
minWidth: 150,
minHeight: 120,
transitionName: () => i.ns("ease"),
confirmText: null,
cancelText: null,
autoRemove: !1,
confirmType: "primary",
cancelType: "default",
actionSize: Ne("small"),
undivided: !1,
xOffset: 0,
yOffset: 0,
disableEsc: !1,
slots: () => ({})
}), ce = ue, J = Ce(), K = Oe("modal", Ee(t, "locale")), Q = We();
function f(e) {
return !le(e) && e !== "auto";
}
function p(e) {
return Be(e, !0) ? `${De(e)}px` : le(e) ? "auto" : String(e);
}
const h = w(t.active), r = N({
top: p(t.top),
right: p(t.right),
bottom: p(t.bottom),
left: p(t.left),
width: p(t.width),
height: p(t.height)
}), F = N({ width: 0, height: 0 }), g = N({ width: 0, height: 0 }), ee = `${Ie()}`, H = w(!1), R = w(), l = w(), M = w(), I = c(() => t.top === "auto" && f(t.bottom) && f(t.height)), V = c(() => t.left === "auto" && f(t.right) && f(t.width)), { target: _, moving: L } = ne({
capture: !1,
onStart: (e, a) => {
if (!l.value || !t.draggable || a.button > 0)
return !1;
ie(!1), H.value = !0, e.xStart = parseFloat(r.left), e.yStart = parseFloat(r.top), s(t.onDragStart, {
top: e.yStart,
left: e.xStart
});
},
onMove: (e) => {
r.left = `${e.xEnd}px`, r.top = `${e.yEnd}px`, s(t.onDragMove, {
top: e.yEnd,
left: e.xEnd
});
},
onEnd: (e) => {
s(t.onDragEnd, {
top: e.yEnd,
left: e.xEnd
});
}
}), { target: te, moving: T } = ne({
onStart: (e, a) => {
if (!l.value || !t.resizable || a.button > 0)
return !1;
ie();
let n = 32;
_.value && (n += _.value.offsetHeight), M.value && (n += M.value.offsetHeight), H.value = !0, e.xStart = parseFloat(r.width), e.yStart = parseFloat(r.height), e.minHeight = Math.max(n, t.minHeight), s(t.onResizeStart, {
width: e.xStart,
height: e.yStart
});
},
onMove: (e) => {
const a = Math.max(t.minWidth, e.xEnd, 32), n = Math.max(e.minHeight, e.yEnd);
r.width = `${a}px`, r.height = `${n}px`, s(t.onResizeMove, { width: a, height: n });
},
onEnd: (e) => {
const a = Math.max(t.minWidth, e.xEnd, 32), n = Math.max(e.minHeight, e.yEnd);
s(t.onResizeEnd, { width: a, height: n });
}
}), pe = c(() => [
i.b(),
i.bs("vars"),
{
[i.bm("inherit")]: t.inherit,
[i.bm("inner")]: t.inner,
[i.bm("draggable")]: t.draggable,
[i.bm("resizable")]: t.resizable,
[i.bm("undivided")]: t.undivided
}
]), he = c(() => [
i.be("wrapper"),
{
[i.bem("wrapper", "closable")]: t.closable,
[i.bem("wrapper", "dragging")]: L.value,
[i.bem("wrapper", "resizing")]: T.value
},
t.modalClass
]), me = c(() => {
const e = [];
return t.xOffset && e.push(`translateX(${p(t.xOffset)})`), t.yOffset && e.push(`translateY(${p(t.yOffset)})`), e.length && e.push("translateZ(0)"), e.length ? e.join(" ") : void 0;
}), ge = c(() => [
t.modalStyle,
{
...r,
height: r.height !== "auto" ? r.height : void 0,
transform: me.value
}
]), be = c(() => {
const e = { x: "50%", y: "50%" };
if (H.value)
e.x = `${parseFloat(r.left) + 0.5 * g.width}px`, e.y = `${parseFloat(r.top) + 0.5 * g.height}px`;
else {
if (I.value)
e.y = `calc(100% - ${parseFloat(r.bottom) + 0.5 * parseFloat(r.height)}px)`;
else if (f(t.top)) {
const a = parseFloat(r.top);
if (f(t.height))
e.y = `${a + 0.5 * parseFloat(r.height)}px`;
else if (f(t.bottom)) {
const n = parseFloat(r.bottom), y = F.height - a - n;
e.y = `${a + 0.5 * y}px`;
} else
e.y = `${parseFloat(r.top) + 0.5 * g.height}px`;
}
if (V.value)
e.x = `calc(100% - ${parseFloat(r.right) + 0.5 * parseFloat(r.width)}px)`;
else if (f(t.left)) {
const a = parseFloat(r.left);
if (f(t.width))
e.x = `${a + 0.5 * parseFloat(r.width)}px`;
else if (f(t.right)) {
const n = parseFloat(r.right), y = F.width - a - n;
e.x = `${a + 0.5 * y}px`;
} else
e.x = `${parseFloat(r.left) + 0.5 * g.width}px`;
}
}
return `${e.x} ${e.y}`;
}), ve = c(() => !!(J.header || J.title || t.title || t.slots.header || t.slots.title)), j = c(() => `${i.bs(ee)}__title`), A = c(() => `${i.bs(ee)}__body`);
for (const e of Object.keys(r))
$(
() => t[e],
(a) => {
r[e] = p(a);
}
);
$(
() => t.active,
(e) => {
h.value = e;
}
), $(h, (e) => {
t.hideMask && e && P();
}), $([() => t.top, () => t.bottom, () => t.height], () => {
h.value && O(ae);
}), $([() => t.left, () => t.right, () => t.width], () => {
h.value && O(re);
});
const P = () => {
var e;
h.value && !H.value && O(() => {
ae(), re();
}), (e = R.value) != null && e.wrapper && (F.width = R.value.wrapper.offsetWidth, F.height = R.value.wrapper.offsetHeight);
};
fe({
dragging: L,
resizing: T,
titleId: j,
bodyId: A,
wrapper: l,
header: _,
footer: M,
resizer: te,
handleResize: P,
handleConfirm: G,
handleCancel: U,
handleClose: v
});
const u = Fe(
N({
dragging: L,
resizing: T,
handleResize: P,
handleConfirm: G,
handleCancel: U,
handleClose: v
})
);
function ye(e) {
h.value !== e && (h.value = e, ce("update:active", e), s(t.onToggle, e));
}
function oe() {
if (!l.value) return document.body;
let e = l.value.parentElement;
for (; e && e !== document.body; ) {
if (getComputedStyle(e).position !== "static")
return e;
e = e.parentElement;
}
return e;
}
function ae() {
if (!l.value || t.top !== "auto" || I.value) return;
const e = l.value.offsetHeight;
t.inner ? r.top = `${(oe().offsetHeight - e) / 2}px` : r.top = `${(window.innerHeight - e) / 2 - 20}px`;
}
function re() {
if (!l.value || t.left !== "auto" || V.value) return;
const e = l.value.offsetWidth;
t.inner ? r.left = `${(oe().offsetWidth - e) / 2}px` : r.left = `${(window.innerWidth - e) / 2}px`;
}
function ie(e = !0) {
if (!l.value) return;
const { offsetWidth: a, offsetHeight: n, offsetTop: y, offsetLeft: ze } = l.value;
!e && (!I.value && t.bottom !== "auto" || !V.value && t.right !== "auto") && (e = !0), Object.assign(
r,
{
top: `${y}px`,
right: "auto",
bottom: "auto",
left: `${ze}px`
},
e ? {
width: `${a}px`,
height: `${n}px`
} : {}
);
}
function G() {
v(!0), s(t.onConfirm);
}
function U() {
v(!1), s(t.onCancel);
}
async function v(e = !1) {
let a = !0;
return typeof t.onBeforeClose == "function" && (a = t.onBeforeClose(e), Ve(a) && (a = await a)), a !== !1 && await O(() => {
ye(!1), s(t.onClose);
}), a;
}
function xe() {
s(t.onShow);
}
function we() {
s(t.onHide);
}
function $e() {
if (t.maskClose)
return v(!1);
}
function Se(e) {
var n;
const a = (n = e.borderBoxSize) == null ? void 0 : n[0];
a ? (g.width = a.inlineSize, g.height = a.blockSize) : (g.width = e.contentRect.width, g.height = e.contentRect.height);
}
return (e, a) => (S(), He(o(je), {
ref_key: "masker",
ref: R,
active: h.value,
"onUpdate:active": a[4] || (a[4] = (n) => h.value = n),
inherit: o(t).inherit,
class: d(pe.value),
inner: o(t).inner,
"transition-name": o(t).transitionName,
closable: o(t).maskClose,
disabled: o(t).hideMask,
"on-before-close": $e,
transfer: o(t).transfer,
"auto-remove": o(t).autoRemove,
"disable-esc": o(t).disableEsc,
onShow: xe,
onHide: we,
onResize: P
}, {
default: b(({ show: n }) => [
Re(W("section", {
class: d(o(i).be("transform")),
style: X({ transformOrigin: be.value })
}, [
m(o(Ae), { onResize: Se }, {
default: b(() => [
W("div", {
ref_key: "wrapper",
ref: l,
class: d(he.value),
role: "dialog",
style: X(ge.value),
"aria-modal": n ? "true" : void 0,
"aria-labelledby": j.value,
"aria-describedby": A.value
}, [
ve.value ? (S(), B("div", {
key: 0,
ref_key: "header",
ref: _,
class: d(o(i).be("header"))
}, [
z(e.$slots, "header", k(C(o(u))), () => [
m(o(E), {
renderer: o(t).slots.header,
data: o(u)
}, {
default: b(() => [
W("div", {
id: j.value,
class: d(o(i).be("title"))
}, [
z(e.$slots, "title", k(C(o(u))), () => [
m(o(E), {
renderer: o(t).slots.title,
data: o(u)
}, {
default: b(() => [
Y(Z(o(t).title), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 10, Xe),
o(t).closable ? (S(), B("button", {
key: 0,
type: "button",
class: d(o(i).be("close")),
onPointerdown: a[0] || (a[0] = q(() => {
}, ["stop"])),
onMousedown: a[1] || (a[1] = q(() => {
}, ["stop"])),
onTouchstart: a[2] || (a[2] = q(() => {
}, ["stop"])),
onClick: a[3] || (a[3] = (y) => v(!1))
}, [
z(e.$slots, "close", k(C(o(u))), () => [
m(o(E), {
renderer: o(t).slots.close,
data: o(u)
}, {
default: b(() => [
m(o(Ge), Me(o(Q).close, {
scale: +(o(Q).close.scale || 1) * 1.2,
label: "close"
}), null, 16, ["scale"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 34)) : D("", !0)
]),
_: 3
}, 8, ["renderer", "data"])
])
], 2)) : D("", !0),
W("div", {
id: A.value,
class: d(o(i).be("content")),
style: X({
overflow: o(T) ? "hidden" : void 0
})
}, [
z(e.$slots, "default", k(C(o(u))), () => [
m(o(E), {
renderer: o(t).slots.default,
data: o(u)
}, null, 8, ["renderer", "data"])
])
], 14, Ye),
o(t).noFooter ? D("", !0) : (S(), B("div", {
key: 1,
ref_key: "footer",
ref: M,
class: d(o(i).be("footer"))
}, [
z(e.$slots, "footer", k(C(o(u))), () => [
m(o(E), {
renderer: o(t).slots.footer,
data: o(u)
}, {
default: b(() => [
m(o(se), {
class: d([o(i).be("button"), o(i).bem("button", "cancel")]),
inherit: "",
text: "",
type: o(t).cancelType,
size: o(t).actionSize,
onClick: U
}, {
default: b(() => [
Y(Z(o(t).cancelText || o(K).cancel), 1)
]),
_: 1
}, 8, ["class", "type", "size"]),
m(o(se), {
class: d([o(i).be("button"), o(i).bem("button", "confirm")]),
inherit: "",
type: o(t).confirmType,
size: o(t).actionSize,
loading: o(t).loading,
onClick: G
}, {
default: b(() => [
Y(Z(o(t).confirmText || o(K).confirm), 1)
]),
_: 1
}, 8, ["class", "type", "size", "loading"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)),
o(t).resizable ? (S(), B("div", {
key: 2,
ref_key: "resizer",
ref: te,
class: d(o(i).be("resizer"))
}, null, 2)) : D("", !0)
], 14, Ue)
]),
_: 2
}, 1024)
], 6), [
[_e, n]
])
]),
_: 3
}, 8, ["active", "inherit", "class", "inner", "transition-name", "closable", "disabled", "transfer", "auto-remove", "disable-esc"]));
}
});
export {
ut as default
};
//# sourceMappingURL=modal.vue2.mjs.map