@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,063 lines (1,062 loc) • 35.2 kB
JavaScript
var Le = Object.defineProperty;
var Oe = (e, t, a) => t in e ? Le(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
var Y = (e, t, a) => Oe(e, typeof t != "symbol" ? t + "" : t, a);
import { ref as o, createVNode as y, Fragment as re, watch as X, defineComponent as We, computed as D, nextTick as ne, onBeforeMount as je, onMounted as ce, onUnmounted as de, watchEffect as De, Teleport as Fe, Transition as Ne, shallowRef as Ve, render as ae, h as Ae, cloneVNode as Xe, createApp as Ye, mergeProps as $e } from "vue";
import { LocaleService as _ } from "../locale/index.esm.js";
import { isMobilePhone as Ue, getMaxZIndex as ue } from "../common/index.esm.js";
import { BaseControlProperty as qe } from "../property-panel/index.esm.js";
const Ke = {
/**
* 允许点击遮罩关闭对话框
*/
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 },
openedCallback: { 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 },
host: { type: Object, default: "body" },
isMessager: { type: Boolean, default: !1 },
maximized: { type: Boolean, default: !1 }
};
class k {
constructor(t, a) {
this.x = t, this.y = a;
}
static getTransformInfo(t) {
const n = window.getComputedStyle(t).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
if (n.length >= 6) {
const h = parseInt(n[4], 10), g = parseInt(n[5], 10);
return { x: h, y: g };
}
return { x: 0, y: 0 };
}
static fromEvent(t, a = null) {
if (this.isMouseEvent(t))
return new k(t.clientX, t.clientY);
if (a === null || t.changedTouches.length === 1)
return new k(t.changedTouches[0].clientX, t.changedTouches[0].clientY);
for (let n = 0; n < t.changedTouches.length; n++)
if (t.changedTouches[n].target === a)
return new k(t.changedTouches[n].clientX, t.changedTouches[n].clientY);
}
static isMouseEvent(t) {
return Object.prototype.toString.apply(t).indexOf("MouseEvent") === 8;
}
static isIPosition(t) {
return !!t && "x" in t && "y" in t;
}
static getCurrent(t) {
const a = new k(0, 0);
if (window) {
const n = window.getComputedStyle(t);
if (n) {
const h = parseInt(n.getPropertyValue("left"), 10), g = parseInt(n.getPropertyValue("top"), 10);
a.x = isNaN(h) ? 0 : h, a.y = isNaN(g) ? 0 : g;
}
return a;
}
return null;
}
static copy(t) {
return new k(0, 0).set(t);
}
get value() {
return { x: this.x, y: this.y };
}
add(t) {
return this.x += t.x, this.y += t.y, this;
}
subtract(t) {
return this.x -= t.x, this.y -= t.y, this;
}
multiply(t) {
this.x *= t, this.y *= t;
}
divide(t) {
this.x /= t, this.y /= t;
}
reset() {
return this.x = 0, this.y = 0, this;
}
set(t) {
return this.x = t.x, this.y = t.y, this;
}
}
class $ {
constructor(t, a) {
this.width = t, this.height = a;
}
static getCurrent(t) {
const a = new $(0, 0);
if (window) {
const n = window.getComputedStyle(t);
return n && (a.width = parseInt(n.getPropertyValue("width"), 10), a.height = parseInt(n.getPropertyValue("height"), 10)), a;
}
return null;
}
static copy(t) {
return new $(0, 0).set(t);
}
set(t) {
return this.width = t.width, this.height = t.height, this;
}
}
function Je(e, t) {
const a = o(), n = o(), h = o(), g = o(), v = o(), c = o(), d = o(), m = o(), M = o(), x = o(), P = o(), F = o(e.resizeable), S = o(), O = o(e.draggable), L = o(!1);
function I() {
const s = n.value || document.body, i = window.getComputedStyle(s);
if (!i || !a.value)
return;
const p = k.getTransformInfo(a.value), w = {};
d.value && (w.deltaL = a.value.offsetLeft - d.value.x, w.deltaT = a.value.offsetTop - d.value.y);
const B = i.getPropertyValue("position");
w.width = s.clientWidth, w.height = s.clientHeight, w.pr = parseInt(i.getPropertyValue("padding-right"), 10), w.pb = parseInt(i.getPropertyValue("padding-bottom"), 10), w.position = i.getPropertyValue("position"), B === "static" && (s.style.position = "relative"), w.translateX = p.x, w.translateY = p.y, x.value = w;
}
function H(s) {
if (a.value) {
g.value = $.getCurrent(a.value), v.value = k.getCurrent(a.value), c.value = g.value ? $.copy(g.value) : null, d.value = v.value ? k.copy(v.value) : null, I();
const i = s.target.getAttribute("type") || "";
m.value = {
n: !!i.match(/n/),
s: !!i.match(/s/),
w: !!i.match(/w/),
e: !!i.match(/e/)
};
}
}
function E() {
var s, i, p, w;
if (a.value) {
const B = a.value;
m.value && ((m.value.n || m.value.s) && ((s = c.value) != null && s.height) && (B.style.height = c.value.height + "px"), (m.value.w || m.value.e) && ((i = c.value) != null && i.width) && (B.style.width = c.value.width + "px"), d.value && ((p = d.value) != null && p.x && (B.style.left = d.value.x + "px"), (w = d.value) != null && w.y && (B.style.top = d.value.y + "px")));
}
}
function N() {
const s = e.minHeight ? e.minHeight : 1, i = e.minWidth ? e.minWidth : 1;
c.value && d.value && m.value && g.value && (c.value.height < s && (c.value.height = s, m.value.n && v.value && (d.value.y = v.value.y + (g.value.height - s))), c.value.width < i && (c.value.width = i, m.value.w && v.value && (d.value.x = v.value.x + (g.value.width - i))), e.maxHeight && c.value.height > e.maxHeight && (c.value.height = e.maxHeight, v.value && m.value.n && (d.value.y = v.value.y + (g.value.height - e.maxHeight))), e.maxWidth && c.value.width > e.maxWidth && (c.value.width = e.maxWidth, m.value.w && v.value && (d.value.x = v.value.x + (g.value.width - e.maxWidth))));
}
function V() {
if (n.value) {
const s = x.value;
if (d.value && c.value && m.value && g.value) {
const i = s.width - s.pr - s.deltaL - s.translateX - d.value.x, p = s.height - s.pb - s.deltaT - s.translateY - d.value.y;
m.value.n && d.value.y + s.translateY < 0 && v.value && (d.value.y = -s.translateY, c.value.height = g.value.height + v.value.y + s.translateY), m.value.w && d.value.x + s.translateX < 0 && v.value && (d.value.x = -s.translateX, c.value.width = g.value.width + v.value.x + s.translateX), c.value.width > i && (c.value.width = i), c.value.height > p && (c.value.height = p);
}
}
}
function W(s) {
if (!h.value || !g.value || !v.value || !m.value)
return;
s.subtract(h.value);
const i = s.x, p = s.y;
m.value.n ? (d.value.y = v.value.y + p, c.value.height = g.value.height - p) : m.value.s && (c.value.height = g.value.height + p), m.value.e ? c.value.width = g.value.width + i : m.value.w && (c.value.width = g.value.width - i, d.value.x = v.value.x + i), V(), N(), E();
}
function r(s) {
if (!M.value)
return;
const i = k.fromEvent(s);
i && W(i);
}
function u() {
if (a.value) {
const {
width: s,
height: i,
x: p,
y: w
} = a.value.getBoundingClientRect(), B = k.getTransformInfo(a.value);
return {
size: {
width: s,
height: i
},
position: {
x: p - B.x,
y: w - B.y
}
};
}
return null;
}
function b(s) {
if (a.value) {
const i = u();
P.value = i;
}
h.value = void 0, g.value = null, v.value = null, c.value = null, d.value = null, m.value = null, M.value = null, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", b);
}
function T() {
document.addEventListener("mousemove", r), document.addEventListener("mouseup", b);
}
function C(s) {
s instanceof MouseEvent && s.button === 2 || O.value && (document.body.click(), s.stopPropagation(), s.preventDefault(), h.value = k.fromEvent(s), M.value = s.target, H(s), T());
}
function j(s) {
return a.value = s, F.value && y(re, null, [y("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (i) => C(i)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (i) => C(i)
}, null)]);
}
function K(s = !0) {
document.body.click();
const i = n.value || document.body, p = $.getCurrent(i), w = a.value;
s && w && (S.value = u(), S.value.transform = w.style.transform), p && w && (c.value = p, c.value.height -= 14, c.value.width -= 14, w.style.height = c.value.height + "px", w.style.width = c.value.width + "px", w.style.left = "7px", w.style.top = "7px", w.style.transform = "", P.value = {
size: c.value,
position: {
x: 0,
y: 0
}
}, O.value = !1, L.value = !0);
}
function G() {
var s, i;
if (document.body.click(), S.value) {
const p = {
width: S.value.size.width || 0,
height: S.value.size.height || 0
}, w = {
x: (window.innerWidth - p.width) / 2,
y: (window.innerHeight - p.height) / 2
};
(s = c.value) == null || s.set(p), (i = d.value) == null || i.set(w);
const B = a.value;
B.style.height = p.height + "px", B.style.width = p.width + "px", B.style.left = `${w.x}px`, B.style.top = `${w.y}px`, B.style.transform = "", P.value = {
size: p,
position: w
}, O.value = e.draggable, L.value = !1;
}
}
function J() {
if (a.value) {
const s = $.getCurrent(a.value);
if (s) {
const {
width: i,
height: p
} = s;
a.value.style.left = `${(window.innerWidth - i) / 2}px`, a.value.style.top = `${(window.innerHeight - p) / 2}px`, a.value.style.transform = "";
}
}
}
function U() {
const s = () => {
L.value ? K(!1) : J(), document.body.click();
};
return window.addEventListener("resize", s), () => {
window.removeEventListener("resize", s);
};
}
const Q = U();
return {
renderResizeBar: j,
boundingElement: n,
resizedEventParam: P,
maximize: K,
restore: G,
allowDrag: O,
isMaximized: L,
unWindowResizeHandle: Q,
moveToCenter: J
};
}
function Ze(e, t, a) {
const n = o(), h = o(e.draggable), g = o(e.lockAxis), v = o(), c = o(), d = o(!1), m = o(new k(0, 0)), M = o(new k(0, 0)), x = o(new k(0, 0)), P = o(new k(0, 0));
X(() => a.value, (r) => {
v.value.style.cursor = r ? "move" : "default";
});
function F(r, u) {
if (u.tagName === "BUTTON")
return !1;
if (u === r)
return !0;
for (const b in u.children)
if (Object.prototype.hasOwnProperty.call(u.children, b) && F(r, u.children[b]))
return !0;
return !1;
}
function S() {
var T, C;
let r = x.value.x + M.value.x, u = x.value.y + M.value.y;
g.value === "x" ? (r = ((T = m.value) == null ? void 0 : T.x) || 0, x.value.x = 0) : g.value === "y" && (u = ((C = m.value) == null ? void 0 : C.y) || 0, x.value.y = 0);
const b = `translate3d(${Math.round(r)}px, ${Math.round(u)}px, 0px)`;
n.value && (n.value.style.transform = b), P.value.x = r, P.value.y = u;
}
function O() {
if (!c.value || !n.value)
return null;
const r = c.value.getBoundingClientRect(), u = n.value.getBoundingClientRect(), b = {
top: r.top < u.top,
right: r.right > u.right,
bottom: r.bottom > u.bottom,
left: r.left < u.left
};
return b.top || (x.value.y -= u.top - r.top), b.bottom || (x.value.y -= u.bottom - r.bottom), b.right || (x.value.x -= u.right - r.right), b.left || (x.value.x -= u.left - r.left), S(), b;
}
function L(r) {
r && (m.value && r.subtract(m.value), x.value.set(r), S(), O());
}
function I(r) {
d.value && h.value && (r.stopPropagation(), r.preventDefault(), L(k.fromEvent(r, v.value)));
}
function H() {
var r;
d.value && (d.value = !1, M.value.add(x.value), x.value.reset(), (r = n.value) == null || r.classList.remove("ng-dragging"), t.emit("stopMove"), document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", H));
}
function E() {
!d.value && v.value && (d.value = !0, v.value.classList.add("ng-dragging"), document.addEventListener("mousemove", I), document.addEventListener("mouseup", H));
}
function N() {
if (n.value) {
const r = k.getTransformInfo(n.value);
M.value.set(r);
return;
}
M.value.reset();
}
function V(r) {
if (!a.value || r instanceof MouseEvent && r.button === 2)
return;
const u = r.target || r.srcElement;
v.value !== void 0 && u && !F(u, v.value) || h.value !== !1 && (document.body.click(), r.stopPropagation(), r.preventDefault(), m.value = k.fromEvent(r, n.value), N(), E());
}
function W(r, u, b) {
if (h.value && u) {
if (r)
v.value = r;
else if (e.dragHandle) {
if (e.dragHandle instanceof HTMLElement)
v.value = e.dragHandle;
else if (typeof e.dragHandle == "string") {
const T = u.querySelector(e.dragHandle);
T && (v.value = T);
}
}
n.value = u, c.value = b, v.value ? (v.value.classList.add("ng-draggable"), v.value.addEventListener("mousedown", V)) : h.value = !1;
}
}
return {
registerDraggle: W,
resetTranslate: N
};
}
function ve(e, t) {
if (e) {
const a = (n) => {
n.key.toLowerCase() === e.toLowerCase() && t({ event: n, key: e });
};
return document.addEventListener("keydown", a), () => {
document.removeEventListener("keydown", a);
};
}
}
function _e(e, t) {
const a = o(e.enableEsc);
let n = null;
return a.value ? (n = ve("Escape", (h) => {
t.emit("esc", { event: h.event, type: "esc" });
}), {
remove: n
}) : null;
}
function Ge(e, t) {
const a = o(e.enableEnter);
let n = null;
return a.value ? (n = ve("Enter", (h) => {
t.emit("enter", { event: h.event, type: "enter" });
}), {
remove: n
}) : null;
}
const q = /* @__PURE__ */ We({
name: "FModal",
props: Ke,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove"],
setup(e, t) {
const a = o(e.width || 300), n = o(e.height || 200), h = o(e.modelValue), g = o(""), v = o(e.class), c = o(e.fitContent), d = o(e.showHeader), m = o(""), M = o(e.showCloseButton), x = o(e.showMaxButton), P = o(!1), F = o(e.dialogType), S = o(e.src), O = o(""), L = o(e.showButtons), I = o(e.title), H = o(e.containment || null), E = o();
I.value === "错误提示" && (I.value = _.getLocaleValue("messageBox.errorTitle"));
const N = o(!1);
function V(l, f) {
const z = f ? "accept" : "cancel";
Promise.resolve().then(() => {
var R;
return (R = e.beforeClose) == null ? void 0 : R.call(e, {
closeType: z
});
}).then((R) => {
R && (h.value = !1, t.emit("update:modelValue", !1), f != null && t.emit(f ? "accept" : "cancel"), t.emit("closed", l));
});
}
const W = [{
name: "cancel",
text: _.getLocaleValue("messageBox.cancel") || "取消",
class: "btn btn-secondary",
handle: (l) => {
V(l, !1);
}
}, {
name: "accept",
text: _.getLocaleValue("messageBox.ok") || "确定",
class: "btn btn-primary",
handle: (l) => {
V(l, !0);
}
}], r = o(e.buttons && e.buttons.length ? e.buttons : W), u = D(() => !!m.value), b = D(() => !!L.value && !!r.value), T = o(), C = o(), j = o(e.maximized || !1), {
renderResizeBar: K,
maximize: G,
restore: J,
boundingElement: U,
resizedEventParam: Q,
allowDrag: s,
unWindowResizeHandle: i,
moveToCenter: p
} = Je(e), {
registerDraggle: w
} = Ze(e, t, s);
function B() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
function he() {
const l = document.querySelectorAll(".farris-modal").length;
(!l || l - 1 <= 0) && document.body.classList.remove("modal-open"), E.value && E.value.classList.remove("show");
}
X(() => e.title, (l, f) => {
l !== f && (I.value = l);
}), X(() => e.modelValue, (l, f) => {
l !== f && (h.value = l, h.value && e.draggable && ne(() => {
C.value && !H.value && (H.value = C.value.parentElement, U.value = H.value, w(T.value, C.value, U.value), p());
}), l || (H.value && (H.value = null), he())), h.value ? N.value = B() : (j.value = !1, s.value = e.draggable);
}), X(() => e.showHeader, (l, f) => {
l !== f && (d.value = l);
}), X(() => e.showButtons, (l, f) => {
l !== f && (L.value = l);
}), X(() => Q.value, (l, f) => {
const z = l || {}, R = f || {};
JSON.stringify(z) !== JSON.stringify(R) && t.emit("resize", {
newSize: l,
oldSize: f,
isMaximized: j.value
});
}), X([() => e.width, () => e.height], (l, f) => {
(l[0] !== f[0] || l[1] !== f[1]) && (a.value = l[0] || 500, n.value = l[1] || 600);
}), X(() => e.class, (l, f) => {
v.value = l;
});
const Z = D(() => (h.value && document.body.classList.add("modal-open"), h.value)), me = D(() => {
var z;
const l = {
modal: !0,
"farris-modal": !0,
fade: !0
};
l["f-modal-fitContent"] = !!c.value, l.show = !!Z.value;
const f = (z = e.maskClass) == null ? void 0 : z.split(" ");
return f == null || f.reduce((R, A) => (R[A] = !0, R), l), l;
}), ge = D(() => {
var z;
const l = {
"modal-dialog": !0
}, f = (z = v.value) == null ? void 0 : z.split(" ");
return f == null || f.reduce((R, A) => (R[A] = !0, R), l), l;
}), oe = () => Ue() && !e.isMessager, ye = D(() => {
const l = document.documentElement.clientWidth, f = document.documentElement.clientHeight;
if (j.value)
return {
position: "fixed",
top: "0px",
left: "0px",
width: "100vw",
height: "100vh",
margin: "0"
};
const z = Math.min(a.value, l), R = c.value ? "auto" : `${Math.min(n.value, f - 10)}px`, A = {
position: "absolute",
top: `${(window.innerHeight - parseInt(R === "auto" ? "0" : R)) / 2}px`,
left: `${(window.innerWidth - z) / 2}px`,
width: `${z}px`,
height: R
};
return oe() && (A.top = "0px", A.left = "0px", A.width = `${window.innerWidth}px`, A.height = `${window.innerHeight}px`), e.mask || (A.pointerEvents = "auto"), A;
}), se = o(ue() || 1050), be = D(() => {
const l = {
display: "block",
overflow: "hidden"
};
return e.mask || (l.pointerEvents = "none", l.backgroundColor = "transparent"), N.value && (l.backgroundColor = "transparent"), l.zIndex = se.value, l;
}), we = D(() => ({
"modal-content": !0,
"modal-content-has-header": d.value,
"is-mobile": oe()
})), pe = D(() => {
const l = {
display: d.value ? "" : "none"
};
return l["pointer-events"] = s.value ? "auto" : "none", l;
}), xe = D(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: j.value
})), Ce = D(() => ({
"modal-body": !0,
"f-utils-flex-column": F.value === "iframe",
"f-utils-fill": !0
}));
function Me() {
return {
height: `${e.footerHeight || 60}px`
};
}
const Ee = D(() => {
const l = {
textAlgin: O.value
}, f = Me();
return Object.assign(l, f);
});
function ee(l) {
if (l == null || l.stopPropagation(), j.value) {
j.value = !1, J();
return;
}
G(), j.value = !0;
}
async function ze(l, f) {
l.handle && await l.handle(f, l) && t.emit("closed", f);
}
function ke(l) {
l.width && (a.value = l.width), l.height && (n.value = l.height), l.buttons && (r.value = l.buttons), l.title && (I.value = l.title);
}
let te = null, le = null;
je(() => {
N.value = B();
}), ce(() => {
C.value && !H.value && (H.value = C.value.parentElement, U.value = H.value, w(T.value, C.value, U.value)), Z.value && document.body.classList.add("modal-open"), te = _e(e, t), le = Ge(e, t);
}), de(() => {
i && i(), te && te.remove(), le && le.remove();
}), t.expose({
modalElementRef: C,
updateModalOptions: ke,
close: V,
maxDialog: ee,
isMaximized: j,
disableButtons: (l, f = !0) => {
r.value.forEach((z) => {
z.name && l.includes(z.name) && (z.disabled = f);
});
}
});
function Be() {
return y("ul", null, [P.value && y("li", {
class: "f-btn-icon f-bare"
}, [y("span", {
class: "f-icon modal_minimize"
}, null)]), x.value && y("li", {
onClick: ee,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [y("span", {
class: xe.value
}, null)]), M.value && y("li", {
class: "f-btn-icon f-bare",
onClick: (l) => V(l, !1),
style: "pointer-events: auto;"
}, [y("span", {
class: "f-icon modal_close"
}, null)])]);
}
function He() {
return y("div", {
class: "modal-footer",
style: Ee.value
}, [r.value && r.value.map((l) => {
const f = o(l.disabled);
return y("button", {
name: l.name,
style: l.styles,
type: "button",
disabled: f.value,
class: l.class + (l.iconClass ? " btn-icontext" : ""),
onClick: (z) => {
ze(l, z);
}
}, [!!l.iconClass && y("i", {
class: l.iconClass
}, null), l.text]);
})]);
}
function ie(l) {
x.value && ee();
}
function Te() {
return y(re, null, [j.value && y("div", {
class: "modal-header",
style: "position: absolute;background: transparent;height: 45px;width: 100%;",
onDblclick: (l) => ie()
}, null), y("div", {
ref: T,
class: "modal-header",
style: pe.value,
onDblclick: (l) => ie()
}, [t.slots.headerTemplate ? t.slots.headerTemplate() : y("div", {
class: "modal-title"
}, [u.value && y("span", {
class: m.value,
style: "margin-right: 8px"
}, null), y("span", {
class: "modal-title-label"
}, [I.value])]), y("div", {
class: "actions"
}, [Be()])])]);
}
function Re() {
return t.slots.footerTemplate ? t.slots.footerTemplate() : b.value && He();
}
function Se(l) {
if (l.stopPropagation(), e.allowClickMaskToClose) {
if (l.target !== E.value)
return;
V(l, !1);
}
}
function Ie() {
var l, f;
return y("div", {
id: g.value,
class: ge.value,
style: ye.value,
ref: C
}, [y("div", {
class: we.value
}, [d.value && Te(), y("div", {
class: Ce.value
}, [(f = (l = t.slots).default) == null ? void 0 : f.call(l), F.value === "iframe" && y("iframe", {
title: g.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: S.value
}, null)]), Re()]), !c.value && C.value && !j.value && K(C.value)]);
}
function Pe(l) {
return l || "body";
}
return De(() => {
Z.value && (se.value = ue() || 1050);
}), () => y(Fe, {
to: Pe(e.host)
}, {
default: () => [Z.value && y(Ne, {
name: "fade",
appear: !0
}, {
default: () => [y("div", {
ref: E,
class: me.value,
style: be.value,
onClick: Se
}, [Ie()])]
})]
});
}
});
function fe(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function Qe(e) {
const t = document.createElement("div");
t.style.display = "contents";
const a = Ye({
setup(n, h) {
de(() => {
document.body.removeChild(t);
});
const g = o(), v = o(e.class || ""), c = o(!!e.showButtons), d = o(!!e.showHeader), m = o(e.showCloseButton == null ? !0 : e.showCloseButton), M = o(!0), x = o(e.title || ""), P = e.acceptCallback || (() => {
}), F = e.rejectCallback || (() => {
}), S = e.closedCallback || ((E) => {
}), O = e.resizeHandle || ((E) => {
}), L = e.stopMoveHandle || ((E) => {
}), I = fe(e), H = (E) => {
M.value = !1, a.unmount(), S(E);
};
return ce(() => {
}), h.expose({
modalRef: g
}), () => y(q, {
ref: g,
class: v.value,
modelValue: M.value,
"onUpdate:modelValue": (E) => M.value = E,
title: x.value,
width: e.width,
height: e.height,
buttons: e.buttons,
"show-header": d.value,
"show-buttons": c.value,
"show-close-button": m.value,
"show-max-button": !1,
onAccept: P,
onCancel: F,
fitContent: e.fitContent == null ? !0 : e.fitContent,
onClosed: H,
onResize: O,
onStopMove: L
}, {
default: () => [I && I(a)]
});
}
});
return document.body.appendChild(t), a.use(_.i18n), a.mount(t), a;
}
class et {
// private activeModalInstance = computed(() => {
// return this.modalRefs[this.activeModalIndex.value];
// });
constructor(t) {
Y(this, "appContext", null);
Y(this, "modalRef", o());
Y(this, "activeModalIndex", o(0));
Y(this, "modalRefs", {});
Y(this, "isUseEscCloseModal", o(!1));
this.app = t, this.appContext = t ? t._context : null;
}
getCurrentModal() {
return this.modalRefs[this.activeModalIndex.value];
}
adaptToWindow(t, a) {
const {
width: n,
height: h
} = {
width: window.innerWidth,
height: window.innerHeight
};
return n < t && (t = n - 14), h < a && (a = h - 14), {
width: t,
height: a
};
}
static show(t) {
const a = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, t);
return Qe(a);
}
close(t) {
var a, n;
t ? (n = t.value) == null || n.close() : (a = this.getCurrentModal()) == null || a.close();
}
open(t) {
const a = document.createDocumentFragment();
t.showMaxButton && t.fitContent && (t.showMaxButton = !1);
const n = Ve(Object.assign({
title: "",
showButtons: !0,
showHeader: !0,
maximized: !1
}, t)), h = o(!0), g = n.value.acceptCallback || (() => {
}), v = n.value.rejectCallback || (() => {
}), c = n.value.closedCallback || ((u, b) => {
}), d = n.value.openedCallback || ((u) => {
}), m = n.value.resizeHandle || ((u) => {
}), M = t.stopMoveHandle || ((u) => {
});
let x;
const P = fe(n.value), F = (u) => {
var T;
h.value = !1;
const b = (T = u == null ? void 0 : u.target) == null ? void 0 : T.classList.contains("modal_close");
c(u, this.isUseEscCloseModal.value ? "esc" : b ? "icon" : "button");
}, S = (u) => {
F(u), x && ne(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ae(null, a), x = null, this.modalRef.value = null, this.modalRefs) {
const b = Object.keys(this.modalRefs).map((T) => Number(T));
b.length > 0 ? this.activeModalIndex.value = Math.max(...b) : this.activeModalIndex.value = 0;
}
this.isUseEscCloseModal.value = !1;
});
}, O = (u) => {
var b;
this.isUseEscCloseModal.value = !0, (b = this.getCurrentModal()) == null || b.close(u == null ? void 0 : u.event);
}, {
width: L,
height: I
} = n.value, H = this.adaptToWindow(L || 500, I || 320);
Object.assign(n.value, H);
const E = o(), N = () => y(q, $e({
ref: E,
modelValue: h.value,
"onUpdate:modelValue": (u) => h.value = u
}, n.value, {
isMessager: n.value.class && n.value.class.indexOf("modal-message") > -1,
onAccept: g,
onCancel: v,
onClosed: S,
onResize: m,
onEsc: O,
onStopMove: M,
maximized: n.value.maximized
}), {
default: () => [P && P(this.app)]
});
x = ((u) => {
const b = Ae(N, u);
return b.appContext = this.appContext, ae(b, a), b;
})({
...n.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++;
const W = this.activeModalIndex.value;
this.modalRefs[W] = E.value;
const r = (u) => {
n.value = {
...n.value,
...u
}, x && ae(Xe(x, {
...n
}), a);
};
return ne(() => {
this.modalRefs[W] = E.value, this.modalRef.value = E.value, d(new Event("opened"));
}), {
update: r,
destroy: S,
modalRef: this.modalRef,
close: () => {
this.modalRefs[W] && this.modalRefs[W].close();
},
disableButtons: (u, b = !0) => {
this.modalRefs[W] && this.modalRefs[W].disableButtons(u, b);
}
};
}
}
const tt = [
{
label: "beforeClose",
name: "关闭前事件"
},
{
label: "onAccept",
name: "确定事件"
},
{
label: "onCancel",
name: "取消事件"
}
];
class ut extends qe {
constructor(a, n) {
super(a, n);
Y(this, "numberEditor", {
type: "number-spinner",
useThousands: !1
});
}
getPropertyConfig(a) {
const n = this.getEventPropConfig(a);
return this.propertyConfig.categories.dialog = this.getDialogPropertyConfig(a), this.propertyConfig.categories.eventsEditor = n, this.propertyConfig;
}
getDialogPropertyConfig(a) {
return {
description: "窗口尺寸配置",
title: "窗口",
parentPropertyID: "dialog",
properties: {
title: {
description: "标题",
title: "标题",
type: "string",
visible: !0
},
width: {
description: "窗口宽度，单位：px，最小值：300px，最大值：3000px",
title: "宽度",
type: "number",
editor: {
...this.numberEditor,
min: 300,
max: 3e3
}
},
height: {
description: "窗口高度，单位：px，最小值：200px，最大值：2000px",
title: "高度",
type: "number",
editor: {
...this.numberEditor,
min: 200,
max: 2e3
}
},
resizeable: {
description: "允许鼠标拖拽窗口边缘调整尺寸",
title: "允许调整窗口尺寸",
type: "boolean",
visible: !0
},
enableEsc: {
description: "允许ESC关闭",
title: "允许ESC关闭",
type: "boolean",
visible: !1
},
showMaxButton: {
description: "显示最大化按钮",
title: "显示最大化按钮",
type: "boolean",
visible: !0
},
showCloseButton: {
description: "显示关闭按钮",
title: "显示关闭按钮",
type: "boolean",
visible: !0
},
showButtons: {
description: "是否显示底部按钮组",
title: "显示底部按钮组",
type: "boolean",
refreshPanelAfterChanged: !0,
visible: !0
}
}
};
}
getEventPropConfig(a) {
const n = this, h = tt, g = n.eventsEditorUtils.formProperties(a, n.viewModelId, h);
return {
title: "事件",
hideTitle: !0,
properties: n.createBaseEventProperty(g),
refreshPanelAfterChanged: !0,
tabId: "commands",
tabName: "交互",
setPropertyRelates(c, d) {
const m = c.propertyValue;
delete a[n.viewModelId], m && n.eventsEditorUtils.saveRelatedParameters(a, n.viewModelId, m.events, m), h.forEach((M) => {
d[M.label] = a[M.label];
});
}
};
}
}
const lt = Symbol("FModalService");
q.install = (e) => {
e.component(q.name, q);
const t = new et(e);
e.provide(lt, t), e.provide("FModalService", t);
};
export {
q as FModal,
et as FModalService,
lt as F_MODAL_SERVICE_TOKEN,
ut as ModalProperty,
q as default,
Ke as modalProps,
Ze as useDraggable,
Je as useResizeable
};