@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
837 lines (836 loc) • 27.8 kB
JavaScript
var ze = Object.defineProperty;
var Ee = (t, e, l) => e in t ? ze(t, e, { enumerable: !0, configurable: !0, writable: !0, value: l }) : t[e] = l;
var D = (t, e, l) => Ee(t, typeof e != "symbol" ? e + "" : e, l);
import { ref as s, createVNode as g, Fragment as He, watch as Y, defineComponent as Be, computed as O, onBeforeMount as ke, onMounted as le, onUnmounted as ae, Teleport as Te, Transition as Re, shallowRef as Ie, createApp as Se, nextTick as Oe, render as Z, h as Le, cloneVNode as je, mergeProps as Pe } from "vue";
const We = {
/**
* 自定义类
*/
class: { type: String, default: "" },
/**
* 模态框标题
*/
title: { type: String, default: "" },
/**
* 模态框宽度
*/
width: { type: Number, default: 500 },
/**
* 模态框高度
*/
height: { type: Number, default: 320 },
/**
* 自定义按钮列表
*/
buttons: {
type: Array,
default: []
},
/**
* 是否展示模态框
*/
modelValue: { type: Boolean, default: !1 },
/**
* 是否展示头部
*/
showHeader: { type: Boolean, default: !0 },
/**
* 是否展示默认按钮
*/
showButtons: { type: Boolean, default: !0 },
/**
* 是否启用自适应样式
*/
fitContent: { type: Boolean, default: !0 },
/**
* 是否展示右上角按钮
*/
showCloseButton: { type: Boolean, default: !0 },
showMaxButton: { type: Boolean, default: !1 },
minHeight: { type: Number },
maxHeight: { type: Number },
minWidth: { type: Number },
maxWidth: { type: Number },
containment: { type: Object, default: null },
resizeable: { type: Boolean, default: !1 },
draggable: { type: Boolean, default: !1 },
dragHandle: { type: Object, default: null },
closedCallback: { type: Function, default: null },
resizeHandle: { type: Function, default: null },
render: { type: Function, default: null },
acceptCallback: { type: Function, default: null },
rejectCallback: { type: Function, default: null },
enableEsc: { type: Boolean, default: !0 },
enableEnter: { type: Boolean, default: !1 },
dialogType: { type: String, default: "" },
src: { type: String, default: "" },
footerHeight: { type: Number, default: 60 }
};
class M {
constructor(e, l) {
this.x = e, this.y = l;
}
static getTransformInfo(e) {
const n = window.getComputedStyle(e).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
if (n.length >= 6) {
const f = parseInt(n[4], 10), h = parseInt(n[5], 10);
return { x: f, y: h };
}
return { x: 0, y: 0 };
}
static fromEvent(e, l = null) {
if (this.isMouseEvent(e))
return new M(e.clientX, e.clientY);
if (l === null || e.changedTouches.length === 1)
return new M(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
for (let n = 0; n < e.changedTouches.length; n++)
if (e.changedTouches[n].target === l)
return new M(e.changedTouches[n].clientX, e.changedTouches[n].clientY);
}
static isMouseEvent(e) {
return Object.prototype.toString.apply(e).indexOf("MouseEvent") === 8;
}
static isIPosition(e) {
return !!e && "x" in e && "y" in e;
}
static getCurrent(e) {
const l = new M(0, 0);
if (window) {
const n = window.getComputedStyle(e);
if (n) {
const f = parseInt(n.getPropertyValue("left"), 10), h = parseInt(n.getPropertyValue("top"), 10);
l.x = isNaN(f) ? 0 : f, l.y = isNaN(h) ? 0 : h;
}
return l;
}
return null;
}
static copy(e) {
return new M(0, 0).set(e);
}
get value() {
return { x: this.x, y: this.y };
}
add(e) {
return this.x += e.x, this.y += e.y, this;
}
subtract(e) {
return this.x -= e.x, this.y -= e.y, this;
}
multiply(e) {
this.x *= e, this.y *= e;
}
divide(e) {
this.x /= e, this.y /= e;
}
reset() {
return this.x = 0, this.y = 0, this;
}
set(e) {
return this.x = e.x, this.y = e.y, this;
}
}
class X {
constructor(e, l) {
this.width = e, this.height = l;
}
static getCurrent(e) {
const l = new X(0, 0);
if (window) {
const n = window.getComputedStyle(e);
return n && (l.width = parseInt(n.getPropertyValue("width"), 10), l.height = parseInt(n.getPropertyValue("height"), 10)), l;
}
return null;
}
static copy(e) {
return new X(0, 0).set(e);
}
set(e) {
return this.width = e.width, this.height = e.height, this;
}
}
function Ne(t, e) {
const l = s(), n = s(), f = s(), h = s(), d = s(), r = s(), c = s(), v = s(), z = s(), p = s(), T = s(), k = s(), I = s(t.draggable), L = s(!1);
function P() {
const o = n.value || document.body, u = window.getComputedStyle(o);
if (!u || !l.value)
return;
const w = M.getTransformInfo(l.value), y = {};
c.value && (y.deltaL = l.value.offsetLeft - c.value.x, y.deltaT = l.value.offsetTop - c.value.y);
const E = u.getPropertyValue("position");
y.width = o.clientWidth, y.height = o.clientHeight, y.pr = parseInt(u.getPropertyValue("padding-right"), 10), y.pb = parseInt(u.getPropertyValue("padding-bottom"), 10), y.position = u.getPropertyValue("position"), E === "static" && (o.style.position = "relative"), y.translateX = w.x, y.translateY = w.y, p.value = y;
}
function j(o) {
if (l.value) {
h.value = X.getCurrent(l.value), d.value = M.getCurrent(l.value), r.value = h.value ? X.copy(h.value) : null, c.value = d.value ? M.copy(d.value) : null, P();
const u = o.target.getAttribute("type") || "";
v.value = {
n: !!u.match(/n/),
s: !!u.match(/s/),
w: !!u.match(/w/),
e: !!u.match(/e/)
};
}
}
function S() {
var o, u, w, y;
if (l.value) {
const E = l.value;
v.value && ((v.value.n || v.value.s) && ((o = r.value) != null && o.height) && (E.style.height = r.value.height + "px"), (v.value.w || v.value.e) && ((u = r.value) != null && u.width) && (E.style.width = r.value.width + "px"), c.value && ((w = c.value) != null && w.x && (E.style.left = c.value.x + "px"), (y = c.value) != null && y.y && (E.style.top = c.value.y + "px")));
}
}
function N() {
const o = t.minHeight ? t.minHeight : 1, u = t.minWidth ? t.minWidth : 1;
r.value && c.value && v.value && h.value && (r.value.height < o && (r.value.height = o, v.value.n && d.value && (c.value.y = d.value.y + (h.value.height - o))), r.value.width < u && (r.value.width = u, v.value.w && d.value && (c.value.x = d.value.x + (h.value.width - u))), t.maxHeight && r.value.height > t.maxHeight && (r.value.height = t.maxHeight, d.value && v.value.n && (c.value.y = d.value.y + (h.value.height - t.maxHeight))), t.maxWidth && r.value.width > t.maxWidth && (r.value.width = t.maxWidth, v.value.w && d.value && (c.value.x = d.value.x + (h.value.width - t.maxWidth))));
}
function b() {
if (n.value) {
const o = p.value;
if (c.value && r.value && v.value && h.value) {
const u = o.width - o.pr - o.deltaL - o.translateX - c.value.x, w = o.height - o.pb - o.deltaT - o.translateY - c.value.y;
v.value.n && c.value.y + o.translateY < 0 && d.value && (c.value.y = -o.translateY, r.value.height = h.value.height + d.value.y + o.translateY), v.value.w && c.value.x + o.translateX < 0 && d.value && (c.value.x = -o.translateX, r.value.width = h.value.width + d.value.x + o.translateX), r.value.width > u && (r.value.width = u), r.value.height > w && (r.value.height = w);
}
}
}
function C(o) {
if (!f.value || !h.value || !d.value || !v.value)
return;
o.subtract(f.value);
const u = o.x, w = o.y;
v.value.n ? (c.value.y = d.value.y + w, r.value.height = h.value.height - w) : v.value.s && (r.value.height = h.value.height + w), v.value.e ? r.value.width = h.value.width + u : v.value.w && (r.value.width = h.value.width - u, c.value.x = d.value.x + u), b(), N(), S();
}
function R(o) {
if (!z.value)
return;
const u = M.fromEvent(o);
u && C(u);
}
function i() {
if (l.value) {
const {
width: o,
height: u,
x: w,
y
} = l.value.getBoundingClientRect(), E = M.getTransformInfo(l.value);
return {
size: {
width: o,
height: u
},
position: {
x: w - E.x,
y: y - E.y
}
};
}
return null;
}
function m(o) {
if (l.value) {
const u = i();
T.value = u;
}
f.value = void 0, h.value = null, d.value = null, r.value = null, c.value = null, v.value = null, z.value = null, document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", m);
}
function H() {
document.addEventListener("mousemove", R), document.addEventListener("mouseup", m);
}
function B(o) {
o instanceof MouseEvent && o.button === 2 || I.value && (document.body.click(), o.stopPropagation(), o.preventDefault(), f.value = M.fromEvent(o), z.value = o.target, j(o), H());
}
function V(o) {
return l.value = o, g(He, null, [g("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (u) => B(u)
}, null), g("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (u) => B(u)
}, null)]);
}
function W(o = !0) {
document.body.click();
const u = n.value || document.body, w = X.getCurrent(u), y = l.value;
o && y && (k.value = i(), k.value.transform = y.style.transform), w && y && (r.value = w, y.style.height = r.value.height - 14 + "px", y.style.width = r.value.width - 14 + "px", y.style.left = "7px", y.style.top = "7px", y.style.transform = "", T.value = {
size: r.value,
position: {
x: 0,
y: 0
}
}, I.value = !1, L.value = !0);
}
function F() {
var o, u;
if (document.body.click(), k.value) {
const w = {
width: k.value.size.width || 0,
height: k.value.size.height || 0
}, y = {
x: (window.innerWidth - w.width) / 2,
y: (window.innerHeight - w.height) / 2
};
(o = r.value) == null || o.set(w), (u = c.value) == null || u.set(y);
const E = l.value;
E.style.height = w.height + "px", E.style.width = w.width + "px", E.style.left = `${y.x}px`, E.style.top = `${y.y}px`, E.style.transform = "", T.value = {
size: w,
position: y
}, I.value = t.draggable, L.value = !1;
}
}
function q() {
if (l.value) {
const o = X.getCurrent(l.value);
if (o) {
const {
width: u,
height: w
} = o;
l.value.style.left = `${(window.innerWidth - u) / 2}px`, l.value.style.top = `${(window.innerHeight - w) / 2}px`, l.value.style.transform = "";
}
}
}
function K() {
const o = () => {
L.value ? W(!1) : q(), document.body.click();
};
return window.addEventListener("resize", o), () => {
window.removeEventListener("resize", o);
};
}
const J = K();
return {
renderResizeBar: V,
boundingElement: n,
resizedEventParam: T,
maximize: W,
restore: F,
allowDrag: I,
isMaximized: L,
unWindowResizeHandle: J
};
}
function Ve(t, e, l) {
const n = s(), f = s(t.draggable), h = s(t.lockAxis), d = s(), r = s(), c = s(!1), v = s(new M(0, 0)), z = s(new M(0, 0)), p = s(new M(0, 0)), T = s(new M(0, 0));
Y(() => l.value, (i) => {
d.value.style.cursor = i ? "move" : "default";
});
function k(i, m) {
if (m.tagName === "BUTTON")
return !1;
if (m === i)
return !0;
for (const H in m.children)
if (Object.prototype.hasOwnProperty.call(m.children, H) && k(i, m.children[H]))
return !0;
return !1;
}
function I() {
var B, V;
let i = p.value.x + z.value.x, m = p.value.y + z.value.y;
h.value === "x" ? (i = ((B = v.value) == null ? void 0 : B.x) || 0, p.value.x = 0) : h.value === "y" && (m = ((V = v.value) == null ? void 0 : V.y) || 0, p.value.y = 0);
const H = `translate3d(${Math.round(i)}px, ${Math.round(m)}px, 0px)`;
n.value && (n.value.style.transform = H), T.value.x = i, T.value.y = m;
}
function L() {
if (!r.value || !n.value)
return null;
const i = r.value.getBoundingClientRect(), m = n.value.getBoundingClientRect(), H = {
top: i.top < m.top,
right: i.right > m.right,
bottom: i.bottom > m.bottom,
left: i.left < m.left
};
return H.top || (p.value.y -= m.top - i.top), H.bottom || (p.value.y -= m.bottom - i.bottom), H.right || (p.value.x -= m.right - i.right), H.left || (p.value.x -= m.left - i.left), I(), H;
}
function P(i) {
i && (v.value && i.subtract(v.value), p.value.set(i), I(), L());
}
function j(i) {
c.value && f.value && (i.stopPropagation(), i.preventDefault(), P(M.fromEvent(i, d.value)));
}
function S() {
var i;
c.value && (c.value = !1, z.value.add(p.value), p.value.reset(), (i = n.value) == null || i.classList.remove("ng-dragging"), document.removeEventListener("mousemove", j), document.removeEventListener("mouseup", S));
}
function N() {
!c.value && d.value && (c.value = !0, d.value.classList.add("ng-dragging"), document.addEventListener("mousemove", j), document.addEventListener("mouseup", S));
}
function b() {
if (n.value) {
const i = M.getTransformInfo(n.value);
z.value.set(i);
return;
}
z.value.reset();
}
function C(i) {
if (!l.value || i instanceof MouseEvent && i.button === 2)
return;
const m = i.target || i.srcElement;
d.value !== void 0 && m && !k(m, d.value) || f.value !== !1 && (document.body.click(), i.stopPropagation(), i.preventDefault(), v.value = M.fromEvent(i, n.value), b(), N());
}
function R(i, m, H) {
if (f.value && m) {
if (i)
d.value = i;
else if (t.dragHandle) {
if (t.dragHandle instanceof HTMLElement)
d.value = t.dragHandle;
else if (typeof t.dragHandle == "string") {
const B = m.querySelector(t.dragHandle);
B && (d.value = B);
}
}
n.value = m, r.value = H, d.value ? (d.value.classList.add("ng-draggable"), d.value.addEventListener("mousedown", C)) : f.value = !1;
}
}
return {
registerDraggle: R,
resetTranslate: b
};
}
function ne(t, e) {
if (t) {
const l = (n) => {
n.key.toLowerCase() === t.toLowerCase() && e({ event: n, key: t });
};
return document.addEventListener("keydown", l), () => {
document.removeEventListener("keydown", l);
};
}
}
function Fe(t, e) {
const l = s(t.enableEsc);
let n = null;
return l.value ? (n = ne("Escape", (f) => {
e.emit("esc", { event: f.event, type: "esc" });
}), {
remove: n
}) : null;
}
function De(t, e) {
const l = s(t.enableEnter);
let n = null;
return l.value ? (n = ne("Enter", (f) => {
e.emit("enter", { event: f.event, type: "enter" });
}), {
remove: n
}) : null;
}
const $ = /* @__PURE__ */ Be({
name: "FModal",
props: We,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter"],
setup(t, e) {
const l = s(t.width || 300), n = s(t.height || 200), f = s(t.modelValue), h = s(""), d = s(t.class), r = s(t.fitContent), c = s(t.showHeader), v = s(""), z = s(t.showCloseButton), p = s(t.showMaxButton), T = s(!1), k = s(t.dialogType), I = s(t.src), L = s(""), P = s(t.showButtons), j = s(t.title), S = s(t.resizeable), N = s(t.containment || null), b = s(), C = s(!1);
function R(a, x) {
f.value = !1, e.emit("update:modelValue", !1), x != null && e.emit(x ? "accept" : "cancel"), e.emit("closed", a);
}
const i = [{
name: "cancel",
text: "取消",
class: "btn btn-secondary",
handle: (a) => {
R(a, !1);
}
}, {
name: "accept",
text: "确定",
class: "btn btn-primary",
handle: (a) => {
R(a, !0);
}
}], m = s(t.buttons && t.buttons.length ? t.buttons : i), H = O(() => !!v.value), B = O(() => !!P.value && !!m.value), V = s(), W = s(), F = s(!1), {
renderResizeBar: q,
maximize: K,
restore: J,
boundingElement: o,
resizedEventParam: u,
allowDrag: w,
unWindowResizeHandle: y
} = Ne(t), {
registerDraggle: E
} = Ve(t, e, w);
function ee() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
function se() {
const a = document.querySelectorAll(".farris-modal").length;
(!a || a - 1 <= 0) && document.body.classList.remove("modal-open"), b.value && b.value.classList.remove("show");
}
Y(() => t.title, (a, x) => {
a !== x && (j.value = a);
}), Y(() => t.modelValue, (a, x) => {
a !== x && (f.value = a, a || se()), f.value && (C.value = ee());
}), Y(() => t.showHeader, (a, x) => {
a !== x && (c.value = a);
}), Y(() => t.showButtons, (a, x) => {
a !== x && (P.value = a);
}), Y(() => u.value, (a, x) => {
const A = a || {}, U = x || {};
JSON.stringify(A) !== JSON.stringify(U) && e.emit("resize", {
newSize: a,
oldSize: x
});
});
const _ = O(() => (f.value && document.body.classList.add("modal-open"), f.value)), ue = O(() => {
const a = {
modal: !0,
"farris-modal": !0,
fade: !0
};
return a["f-modal-fitContent"] = !!r.value, a.show = !!_.value, a;
}), ie = O(() => {
var A;
const a = {
"modal-dialog": !0
}, x = (A = d.value) == null ? void 0 : A.split(" ");
return x == null || x.reduce((U, Me) => (U[Me] = !0, U), a), a;
}), re = O(() => ({
position: "absolute",
top: `${(window.innerHeight - n.value) / 2}px`,
left: `${(window.innerWidth - l.value) / 2}px`,
width: `${l.value}px`,
height: r.value ? "auto" : `${n.value}px`
})), ce = O(() => ({
"modal-content": !0,
"modal-content-has-header": c.value
})), de = O(() => {
const a = {
display: c.value ? "" : "none"
};
return a["pointer-events"] = w.value ? "auto" : "none", a;
}), ve = O(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: F.value
})), fe = O(() => ({
"modal-body": !0,
"f-utils-flex-column": k.value === "iframe",
"f-utils-fill": !0
}));
function he() {
return {
height: `${t.footerHeight || 60}px`
};
}
const me = O(() => {
const a = {
textAlgin: L.value
}, x = he();
return Object.assign(a, x);
});
function te(a) {
if (a.stopPropagation(), F.value) {
F.value = !1, J();
return;
}
K(), F.value = !0;
}
async function ge(a, x) {
a.handle && await a.handle(x, a) && e.emit("closed", x);
}
function ye(a) {
a.width && (l.value = a.width), a.height && (n.value = a.height), a.buttons && (m.value = a.buttons), a.title && (j.value = a.title);
}
const we = O(() => {
const a = {
display: "inline-block"
};
return C.value && (a["background-color"] = "transparent"), a;
});
let G = null, Q = null;
ke(() => {
C.value = ee();
}), le(() => {
W.value && !N.value && (N.value = W.value.parentElement, o.value = N.value, E(V.value, W.value, o.value)), _.value && document.body.classList.add("modal-open"), G = Fe(t, e), Q = De(t, e);
}), ae(() => {
y && y(), G && G.remove(), Q && Q.remove();
}), e.expose({
modalElementRef: W,
updateModalOptions: ye,
close: R,
maxDialog: te
});
function be() {
return g("ul", null, [T.value && g("li", {
class: "f-btn-icon f-bare"
}, [g("span", {
class: "f-icon modal_minimize"
}, null)]), p.value && g("li", {
onClick: te,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [g("span", {
class: ve.value
}, null)]), z.value && g("li", {
class: "f-btn-icon f-bare",
onClick: (a) => R(a, !1),
style: "pointer-events: auto;"
}, [g("span", {
class: "f-icon modal_close"
}, null)])]);
}
function xe() {
return g("div", {
class: "modal-footer",
style: me.value
}, [m.value && m.value.map((a) => g("button", {
name: a.name,
type: "button",
class: a.class + (a.iconClass ? " btn-icontext" : ""),
onClick: (x) => {
ge(a, x);
}
}, [!!a.iconClass && g("i", {
class: a.iconClass
}, null), a.text]))]);
}
function pe() {
return g("div", {
ref: V,
class: "modal-header",
style: de.value
}, [g("div", {
class: "modal-title"
}, [H.value && g("span", {
class: v.value,
style: "margin-right: 8px"
}, null), g("span", {
class: "modal-title-label"
}, [j.value])]), g("div", {
class: "actions"
}, [be()])]);
}
function Ce(a) {
a.stopPropagation();
}
return () => g(Te, {
to: "body"
}, {
default: () => [_.value && g(Re, {
name: "fade",
appear: !0
}, {
default: () => {
var a, x;
return [g("div", {
class: ue.value,
style: we.value,
ref: b,
onClick: Ce
}, [g("div", {
id: h.value,
class: ie.value,
style: re.value,
ref: W
}, [g("div", {
class: ce.value
}, [c.value && pe(), g("div", {
class: fe.value
}, [(x = (a = e.slots).default) == null ? void 0 : x.call(a), k.value === "iframe" && g("iframe", {
title: h.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: I.value
}, null)]), B.value && xe()]), !r.value && S.value && W.value && !F.value && q(W.value)])])];
}
})]
});
}
});
function oe(t) {
if (t.content && t.content.render)
return t.content.render;
if (t.render && typeof t.render == "function")
return t.render;
}
function Xe(t) {
const e = document.createElement("div");
e.style.display = "contents";
const l = Se({
setup(n, f) {
ae(() => {
document.body.removeChild(e);
});
const h = s(), d = s(t.class || ""), r = s(!!t.showButtons), c = s(!!t.showHeader), v = s(t.showCloseButton == null ? !0 : t.showCloseButton), z = s(!0), p = s(t.title || ""), T = t.acceptCallback || (() => {
}), k = t.rejectCallback || (() => {
}), I = t.closedCallback || ((S) => {
}), L = t.resizeHandle || ((S) => {
}), P = oe(t), j = (S) => {
z.value = !1, l.unmount(), I(S);
};
return le(() => {
}), f.expose({
modalRef: h
}), () => g($, {
ref: h,
class: d.value,
modelValue: z.value,
"onUpdate:modelValue": (S) => z.value = S,
title: p.value,
width: t.width,
height: t.height,
buttons: t.buttons,
"show-header": c.value,
"show-buttons": r.value,
"show-close-button": v.value,
"show-max-button": !1,
onAccept: T,
onCancel: k,
fitContent: t.fitContent == null ? !0 : t.fitContent,
onClosed: j,
onResize: L
}, {
default: () => [P && P(l)]
});
}
});
return document.body.appendChild(e), l.mount(e), l;
}
class Ye {
constructor(e) {
D(this, "appContext", null);
D(this, "modalRef", s());
D(this, "activeModalIndex", s(0));
D(this, "modalRefs", {});
D(this, "isUseEscCloseModal", s(!1));
D(this, "activeModalInstance", O(() => this.modalRefs[this.activeModalIndex.value]));
this.app = e, this.appContext = e ? e._context : null;
}
getCurrentModal() {
return this.activeModalInstance.value;
}
adaptToWindow(e, l) {
const {
width: n,
height: f
} = {
width: window.innerWidth,
height: window.innerHeight
};
return n < e && (e = n), f < l && (l = f), {
width: e,
height: l
};
}
static show(e) {
const l = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, e);
return Xe(l);
}
close(e) {
var l, n;
e ? (n = e.value) == null || n.close() : (l = this.getCurrentModal()) == null || l.close();
}
open(e) {
const l = document.createDocumentFragment();
e.showMaxButton && e.fitContent && (e.showMaxButton = !1);
const n = Ie(Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, e)), f = s(!0), h = n.value.acceptCallback || (() => {
}), d = n.value.rejectCallback || (() => {
}), r = n.value.closedCallback || ((b, C) => {
}), c = n.value.resizeHandle || ((b) => {
});
let v;
const z = oe(n.value), p = (b) => {
var R;
f.value = !1;
const C = (R = b == null ? void 0 : b.target) == null ? void 0 : R.classList.contains("modal_close");
r(b, this.isUseEscCloseModal.value ? "esc" : C ? "icon" : "button");
}, T = (b) => {
p(b), v && Oe(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], Z(null, l), v = null, this.modalRef.value = null, this.modalRefs) {
const C = Object.keys(this.modalRefs).map((R) => Number(R));
C.length > 0 ? this.activeModalIndex.value = Math.max(...C) : this.activeModalIndex.value = 0;
}
this.isUseEscCloseModal.value = !1;
});
}, k = (b) => {
var C;
this.isUseEscCloseModal.value = !0, this.activeModalInstance && ((C = this.activeModalInstance.value) == null || C.close(b == null ? void 0 : b.event));
}, {
width: I,
height: L
} = n.value, P = this.adaptToWindow(I || 500, L || 320);
Object.assign(n.value, P);
const j = () => g($, Pe({
ref: this.modalRef,
modelValue: f.value,
"onUpdate:modelValue": (b) => f.value = b
}, n.value, {
onAccept: h,
onCancel: d,
onClosed: T,
onResize: c,
onEsc: k
}), {
default: () => [z && z(this.app)]
});
return v = ((b) => {
const C = Le(j, b);
return C.appContext = this.appContext, Z(C, l), C;
})({
...n.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++, this.modalRefs[this.activeModalIndex.value] = this.modalRef.value, {
update: (b) => {
n.value = {
...n.value,
...b
}, v && Z(je(v, {
...n
}), l);
},
destroy: T,
modalRef: this.activeModalInstance,
close: this.close
};
}
}
const Ae = Symbol("FModalService");
$.install = (t) => {
t.component($.name, $);
const e = new Ye(t);
t.provide(Ae, e), t.provide("FModalService", e);
};
export {
$ as FModal,
Ye as FModalService,
Ae as F_MODAL_SERVICE_TOKEN,
$ as default,
We as modalProps
};