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