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