@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,201 lines (1,200 loc) • 41.1 kB
JavaScript
var Ve = Object.defineProperty;
var Ne = (e, t, a) => t in e ? Ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
var $ = (e, t, a) => Ne(e, typeof t != "symbol" ? t + "" : t, a);
import { ref as o, createVNode as y, Fragment as ve, watch as A, defineComponent as $e, computed as V, nextTick as ne, onBeforeMount as Ae, onMounted as fe, onUnmounted as he, watchEffect as Ue, Teleport as Ye, Transition as Xe, shallowRef as qe, render as ae, h as Je, cloneVNode as _e, createApp as Ke, mergeProps as Ze } from "vue";
import { LocaleService as Z } from "../locale/index.esm.js";
import { isMobilePhone as re, getMaxZIndex as de, EVENT_PROPERTY_TAB_IDS as Ge } from "../common/index.esm.js";
import { BaseControlProperty as Qe } from "../property-panel/index.esm.js";
import { ButtonProperty as et } from "../button/index.esm.js";
import { FieldSelectorRepositoryToken as tt } from "../field-selector/index.esm.js";
import { useButtonItemsDesigner as lt } from "../collection-property-editor/index.esm.js/src/use-button-items.designer";
const at = {
/**
* 允许点击遮罩关闭对话框
*/
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 },
/**
* 是否在窗口右上角展示浮动关闭按钮
*/
showFloatingClose: { type: Boolean, default: !1 },
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 },
position: { type: String, default: "center" },
host: { type: Object, default: "body" },
isMessager: { type: Boolean, default: !1 },
fullscreen: { type: Boolean, default: !1 },
maximized: { type: Boolean, default: !1 },
useTransform: { type: Boolean, default: !0 }
};
class B {
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 r = parseInt(n[4], 10), v = parseInt(n[5], 10);
return { x: r, y: v };
}
return { x: 0, y: 0 };
}
static fromEvent(t, a = null) {
if (this.isMouseEvent(t))
return new B(t.clientX, t.clientY);
if (a === null || t.changedTouches.length === 1)
return new B(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 B(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 B(0, 0);
if (window) {
const n = window.getComputedStyle(t);
if (n) {
const r = parseInt(n.getPropertyValue("left"), 10), v = parseInt(n.getPropertyValue("top"), 10);
a.x = isNaN(r) ? 0 : r, a.y = isNaN(v) ? 0 : v;
}
return a;
}
return null;
}
static copy(t) {
return new B(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 X {
constructor(t, a) {
this.width = t, this.height = a;
}
static getCurrent(t) {
const a = new X(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 X(0, 0).set(t);
}
set(t) {
return this.width = t.width, this.height = t.height, this;
}
}
function nt(e, t) {
const a = o(), n = o(), r = o(), v = o(), h = o(), d = o(), f = o(), g = o(), M = o(), w = o(), F = o(), N = o(e.resizeable), S = o(), j = o(e.draggable), O = o(!1);
function R() {
const i = n.value || document.body, u = window.getComputedStyle(i);
if (!u || !a.value)
return;
const x = B.getTransformInfo(a.value), p = {};
f.value && (p.deltaL = a.value.offsetLeft - f.value.x, p.deltaT = a.value.offsetTop - f.value.y);
const P = u.getPropertyValue("position");
p.width = i.clientWidth, p.height = i.clientHeight, p.pr = parseInt(u.getPropertyValue("padding-right"), 10), p.pb = parseInt(u.getPropertyValue("padding-bottom"), 10), p.position = u.getPropertyValue("position"), P === "static" && (i.style.position = "relative"), p.translateX = x.x, p.translateY = x.y, w.value = p;
}
function k(i) {
if (a.value) {
v.value = X.getCurrent(a.value), h.value = B.getCurrent(a.value), d.value = v.value ? X.copy(v.value) : null, f.value = h.value ? B.copy(h.value) : null, R();
const u = i.target.getAttribute("type") || "";
g.value = {
n: !!u.match(/n/),
s: !!u.match(/s/),
w: !!u.match(/w/),
e: !!u.match(/e/)
};
}
}
function z() {
var i, u, x, p;
if (a.value) {
const P = a.value;
g.value && ((g.value.n || g.value.s) && ((i = d.value) != null && i.height) && (P.style.height = d.value.height + "px"), (g.value.w || g.value.e) && ((u = d.value) != null && u.width) && (P.style.width = d.value.width + "px"), f.value && ((x = f.value) != null && x.x && (P.style.left = f.value.x + "px"), (p = f.value) != null && p.y && (P.style.top = f.value.y + "px")));
}
}
function H() {
const i = e.minHeight ? e.minHeight : 1, u = e.minWidth ? e.minWidth : 1;
d.value && f.value && g.value && v.value && (d.value.height < i && (d.value.height = i, g.value.n && h.value && (f.value.y = h.value.y + (v.value.height - i))), d.value.width < u && (d.value.width = u, g.value.w && h.value && (f.value.x = h.value.x + (v.value.width - u))), e.maxHeight && d.value.height > e.maxHeight && (d.value.height = e.maxHeight, h.value && g.value.n && (f.value.y = h.value.y + (v.value.height - e.maxHeight))), e.maxWidth && d.value.width > e.maxWidth && (d.value.width = e.maxWidth, g.value.w && h.value && (f.value.x = h.value.x + (v.value.width - e.maxWidth))));
}
function U() {
if (n.value) {
const i = w.value;
if (f.value && d.value && g.value && v.value) {
const u = i.width - i.pr - i.deltaL - i.translateX - f.value.x, x = i.height - i.pb - i.deltaT - i.translateY - f.value.y;
g.value.n && f.value.y + i.translateY < 0 && h.value && (f.value.y = -i.translateY, d.value.height = v.value.height + h.value.y + i.translateY), g.value.w && f.value.x + i.translateX < 0 && h.value && (f.value.x = -i.translateX, d.value.width = v.value.width + h.value.x + i.translateX), d.value.width > u && (d.value.width = u), d.value.height > x && (d.value.height = x);
}
}
}
function L(i) {
if (!r.value || !v.value || !h.value || !g.value)
return;
i.subtract(r.value);
const u = i.x, x = i.y;
g.value.n ? (f.value.y = h.value.y + x, d.value.height = v.value.height - x) : g.value.s && (d.value.height = v.value.height + x), g.value.e ? d.value.width = v.value.width + u : g.value.w && (d.value.width = v.value.width - u, f.value.x = h.value.x + u), U(), H(), z();
}
function c(i) {
if (!M.value)
return;
const u = B.fromEvent(i);
u && L(u);
}
function s() {
if (a.value) {
const {
width: i,
height: u,
x,
y: p
} = a.value.getBoundingClientRect(), P = B.getTransformInfo(a.value);
return {
size: {
width: i,
height: u
},
position: {
x: x - P.x,
y: p - P.y
}
};
}
return null;
}
function b(i) {
if (a.value) {
const u = s();
F.value = u;
}
r.value = void 0, v.value = null, h.value = null, d.value = null, f.value = null, g.value = null, M.value = null, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", b);
}
function T() {
document.addEventListener("mousemove", c), document.addEventListener("mouseup", b);
}
function I(i) {
i instanceof MouseEvent && i.button === 2 || j.value && (document.body.click(), i.stopPropagation(), i.preventDefault(), r.value = B.fromEvent(i), M.value = i.target, k(i), T());
}
function D(i) {
return a.value = i, N.value && y(ve, null, [y("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (u) => I(u)
}, null), y("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (u) => I(u)
}, null)]);
}
function W(i = !0) {
document.body.click();
const u = n.value || document.body, x = X.getCurrent(u), p = a.value;
i && p && (S.value = s(), S.value.transform = p.style.transform), x && p && (d.value = x, d.value.height -= 14, d.value.width -= 14, p.style.height = d.value.height + "px", p.style.width = d.value.width + "px", p.style.left = "7px", p.style.top = "7px", p.style.transform = "", F.value = {
size: d.value,
position: {
x: 0,
y: 0
}
}, j.value = !1, O.value = !0);
}
function G() {
var i, u;
if (document.body.click(), S.value) {
const x = {
width: S.value.size.width || 0,
height: S.value.size.height || 0
}, p = {
x: (window.innerWidth - x.width) / 2,
y: (window.innerHeight - x.height) / 2
};
(i = d.value) == null || i.set(x), (u = f.value) == null || u.set(p);
const P = a.value;
P.style.height = x.height + "px", P.style.width = x.width + "px", P.style.left = `${p.x}px`, P.style.top = `${p.y}px`, P.style.transform = "", F.value = {
size: x,
position: p
}, j.value = e.draggable, O.value = !1;
}
}
function _() {
if (a.value) {
const i = X.getCurrent(a.value);
if (i) {
const {
width: u,
height: x
} = i;
a.value.style.left = `${(window.innerWidth - u) / 2}px`, a.value.style.top = `${(window.innerHeight - x) / 2}px`, a.value.style.transform = "";
}
}
}
function Q() {
const i = () => {
O.value ? W(!1) : _(), document.body.click();
};
return window.addEventListener("resize", i), () => {
window.removeEventListener("resize", i);
};
}
const q = Q();
return {
renderResizeBar: D,
boundingElement: n,
resizedEventParam: F,
maximize: W,
restore: G,
allowDrag: j,
isMaximized: O,
unWindowResizeHandle: q,
moveToCenter: _
};
}
function ot(e, t, a) {
const n = o(), r = o(e.draggable), v = o(e.lockAxis), h = o(), d = o(), f = o(!1), g = o(new B(0, 0)), M = o(new B(0, 0)), w = o(new B(0, 0)), F = o(new B(0, 0));
A(() => a.value, (c) => {
h.value.style.cursor = c ? "move" : "default";
});
function N(c, s) {
if (s.tagName === "BUTTON")
return !1;
if (s === c)
return !0;
for (const b in s.children)
if (Object.prototype.hasOwnProperty.call(s.children, b) && N(c, s.children[b]))
return !0;
return !1;
}
function S() {
var T, I;
let c = w.value.x + M.value.x, s = w.value.y + M.value.y;
v.value === "x" ? (c = ((T = g.value) == null ? void 0 : T.x) || 0, w.value.x = 0) : v.value === "y" && (s = ((I = g.value) == null ? void 0 : I.y) || 0, w.value.y = 0);
const b = `translate3d(${Math.round(c)}px, ${Math.round(s)}px, 0px)`;
n.value && (n.value.style.transform = b), F.value.x = c, F.value.y = s;
}
function j() {
if (!d.value || !n.value)
return null;
const c = d.value.getBoundingClientRect(), s = n.value.getBoundingClientRect(), b = {
top: c.top < s.top,
right: c.right > s.right,
bottom: c.bottom > s.bottom,
left: c.left < s.left
};
return b.top || (w.value.y -= s.top - c.top), b.bottom || (w.value.y -= s.bottom - c.bottom), b.right || (w.value.x -= s.right - c.right), b.left || (w.value.x -= s.left - c.left), S(), b;
}
function O(c) {
c && (g.value && c.subtract(g.value), w.value.set(c), S(), j());
}
function R(c) {
f.value && r.value && (c.stopPropagation(), c.preventDefault(), O(B.fromEvent(c, h.value)));
}
function k() {
var c;
if (f.value) {
if (f.value = !1, M.value.add(w.value), w.value.reset(), (c = n.value) == null || c.classList.remove("ng-dragging"), !e.useTransform && n.value) {
const { left: s, top: b } = n.value.getBoundingClientRect();
n.value.style.left = Math.ceil(s) + "px", n.value.style.top = Math.ceil(b) + "px", n.value.style.transform = "none";
}
t.emit("stopMove"), document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", k);
}
}
function z() {
!f.value && h.value && (f.value = !0, h.value.classList.add("ng-dragging"), document.addEventListener("mousemove", R), document.addEventListener("mouseup", k));
}
function H() {
if (n.value) {
const c = B.getTransformInfo(n.value);
M.value.set(c);
return;
}
M.value.reset();
}
function U(c) {
if (!a.value || c instanceof MouseEvent && c.button === 2)
return;
const s = c.target || c.srcElement;
h.value !== void 0 && s && !N(s, h.value) || r.value !== !1 && (document.body.click(), c.stopPropagation(), c.preventDefault(), g.value = B.fromEvent(c, n.value), H(), z());
}
function L(c, s, b) {
if (r.value && s) {
if (c)
h.value = c;
else if (e.dragHandle) {
if (e.dragHandle instanceof HTMLElement)
h.value = e.dragHandle;
else if (typeof e.dragHandle == "string") {
const T = s.querySelector(e.dragHandle);
T && (h.value = T);
}
}
n.value = s, d.value = b, h.value ? (h.value.classList.add("ng-draggable"), h.value.addEventListener("mousedown", U)) : r.value = !1;
}
}
return {
registerDraggle: L,
resetTranslate: H
};
}
function me(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 st(e, t) {
const a = o(e.enableEsc);
let n = null;
return a.value ? (n = me("Escape", (r) => {
t.emit("esc", { event: r.event, type: "esc" });
}), {
remove: n
}) : null;
}
function it(e, t) {
const a = o(e.enableEnter);
let n = null;
return a.value ? (n = me("Enter", (r) => {
t.emit("enter", { event: r.event, type: "enter" });
}), {
remove: n
}) : null;
}
const J = /* @__PURE__ */ $e({
name: "FModal",
props: at,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"],
setup(e, t) {
const a = o(e.width || 300), n = o(e.height || 200), r = o(e.modelValue), v = o(""), h = o(e.class), d = o(e.fitContent), f = o(e.showHeader), g = o(""), M = o(e.showCloseButton), w = o(e.showMaxButton), F = o(!1), N = o(e.dialogType), S = o(e.src), j = o(""), O = o(e.showButtons), R = o(e.title), k = o(e.containment || null), z = o();
R.value === "错误提示" && (R.value = Z.getLocaleValue("messageBox.errorTitle"));
const H = o(!1);
function U() {
const l = document.querySelectorAll(".farris-modal").length;
(!l || l - 1 <= 0) && z.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), z.value && z.value.classList.remove("show");
}
function L(l, m) {
const C = m ? "accept" : "cancel";
Promise.resolve().then(() => {
var E;
return (E = e.beforeClose) == null ? void 0 : E.call(e, {
closeType: C
});
}).then((E) => {
E && (r.value = !1, t.emit("update:modelValue", !1), m != null && t.emit(m ? "accept" : "cancel"), t.emit("closed", l), U());
});
}
const c = [{
name: "cancel",
text: Z.getLocaleValue("messageBox.cancel") || "取消",
class: "btn btn-secondary",
handle: (l) => {
L(l, !1);
}
}, {
name: "accept",
text: Z.getLocaleValue("messageBox.ok") || "确定",
class: "btn btn-primary",
handle: (l) => {
L(l, !0);
}
}], s = o(e.buttons && e.buttons.length ? e.buttons : c), b = V(() => !!g.value), T = V(() => !!O.value && !!s.value), I = o(), D = o(), W = o(e.maximized || !1), {
renderResizeBar: G,
maximize: _,
restore: Q,
boundingElement: q,
resizedEventParam: i,
allowDrag: u,
unWindowResizeHandle: x,
moveToCenter: p
} = nt(e), {
registerDraggle: P
} = ot(e, t, u);
function oe() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
A(() => e.title, (l, m) => {
l !== m && (R.value = l);
}), A(() => e.modelValue, (l, m) => {
l !== m && (r.value = l, r.value && e.draggable && ne(() => {
D.value && !k.value && (k.value = D.value.parentElement, q.value = k.value, P(I.value, D.value, q.value), p());
}), l || (k.value && (k.value = null), U())), r.value ? H.value = oe() : (W.value = !1, u.value = e.draggable);
}), A(() => e.showHeader, (l, m) => {
l !== m && (f.value = l);
}), A(() => e.showButtons, (l, m) => {
l !== m && (O.value = l);
}), A(() => i.value, (l, m) => {
const C = l || {}, E = m || {};
JSON.stringify(C) !== JSON.stringify(E) && t.emit("resize", {
newSize: l,
oldSize: m,
isMaximized: W.value
});
}), A([() => e.width, () => e.height], (l, m) => {
(l[0] !== m[0] || l[1] !== m[1]) && (a.value = l[0] || 500, n.value = l[1] || 600);
}), A(() => e.class, (l, m) => {
h.value = l;
});
const K = V(() => (r.value && document.body.classList.add("modal-open"), r.value)), ye = V(() => {
var C;
const l = {
modal: !0,
"farris-modal": !0,
fade: !0,
"fe-cmp-page-modal": !!e.showFloatingClose
};
l["f-modal-fitContent"] = !!d.value, l.show = !!K.value;
const m = (C = e.maskClass) == null ? void 0 : C.split(" ");
return m == null || m.reduce((E, Y) => (E[Y] = !0, E), l), l;
}), be = V(() => {
var C;
const l = {
"modal-dialog": !0
}, m = (C = h.value) == null ? void 0 : C.split(" ");
return m == null || m.reduce((E, Y) => (E[Y] = !0, E), l), l;
}), we = () => re() && !e.isMessager || !!e.fullscreen, pe = V(() => {
const l = document.documentElement.clientWidth, m = document.documentElement.clientHeight;
if (W.value)
return {
position: "fixed",
top: "0px",
left: "0px",
width: "100vw",
height: "100vh",
margin: "0"
};
const C = Math.min(a.value, l), E = e.position === "right" ? "100%" : d.value ? "auto" : `${Math.min(n.value, m - 10)}px`, Y = `${(window.innerHeight - (E === "100%" || E === "auto" ? 0 : parseInt(E))) / 2}px`, De = e.position === "right" ? `${window.innerWidth - C}px` : `${(window.innerWidth - C) / 2}px`, ue = {
position: "absolute",
top: Y,
left: De,
width: re() ? "auto" : `${C}px`,
height: E
};
return e.mask || (ue.pointerEvents = "auto"), ue;
}), se = o(de() || 1050), xe = V(() => {
const l = {
display: "block",
overflow: "hidden"
};
return e.mask || (l.pointerEvents = "none", l.backgroundColor = "transparent"), H.value && (l.backgroundColor = "transparent"), l.zIndex = se.value, l;
}), Ce = V(() => ({
"modal-content": !0,
"modal-content-has-header": f.value,
"is-mobile": we()
})), Me = V(() => {
const l = {
display: f.value ? "" : "none"
};
return l["pointer-events"] = u.value ? "auto" : "none", l;
}), Ee = V(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: W.value
})), ze = V(() => ({
"modal-body": !0,
"f-utils-flex-column": N.value === "iframe",
"f-utils-fill": !0
}));
function Be() {
return {
height: `${e.footerHeight || 60}px`
};
}
const ke = V(() => {
const l = {
textAlgin: j.value
}, m = Be();
return Object.assign(l, m);
});
function ee(l) {
if (l == null || l.stopPropagation(), W.value) {
W.value = !1, Q();
return;
}
_(), W.value = !0;
}
async function Pe(l, m) {
l.handle ? await l.handle(m, l) && t.emit("closed", m) : t.emit("buttonClick", {
button: l,
$event: m
});
}
function He(l) {
l.width && (a.value = l.width), l.height && (n.value = l.height), l.buttons && (s.value = l.buttons), l.title && (R.value = l.title);
}
let te = null, le = null;
Ae(() => {
H.value = oe();
}), fe(() => {
D.value && !k.value && (k.value = D.value.parentElement, q.value = k.value, P(I.value, D.value, q.value)), K.value && document.body.classList.add("modal-open"), te = st(e, t), le = it(e, t);
}), he(() => {
x && x(), te && te.remove(), le && le.remove();
}), t.expose({
modalElementRef: D,
updateModalOptions: He,
close: L,
maxDialog: ee,
isMaximized: W,
disableButtons: (l, m = !0) => {
s.value.forEach((C) => {
C.name && l.includes(C.name) && (C.disabled = m);
});
}
});
function Te() {
return y("div", {
class: "action-wrapper",
onClick: (l) => L(l, !1)
}, [y("span", {
class: "close-icon"
}, [y("i", {
class: "f-icon f-icon-close"
}, null)])]);
}
function Se() {
return y("ul", null, [F.value && y("li", {
class: "f-btn-icon f-bare"
}, [y("span", {
class: "f-icon modal_minimize"
}, null)]), w.value && y("li", {
onClick: ee,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [y("span", {
class: Ee.value
}, null)]), M.value && y("li", {
class: "f-btn-icon f-bare",
onClick: (l) => L(l, !1),
style: "pointer-events: auto;"
}, [y("span", {
class: "f-icon modal_close"
}, null)])]);
}
const Ie = (l) => {
l.preventDefault();
const m = l.currentTarget, C = l.deltaY * 0.5;
m.scrollLeft += C;
};
function Fe() {
return y("div", {
class: "modal-footer",
style: ke.value
}, [s.value && y("div", {
class: "buttons",
onWheel: Ie
}, [s.value.map((l) => {
var E;
const m = o(l.disabled), C = l.class || ((E = l.appearance) == null ? void 0 : E.class);
return y("button", {
name: l.name,
style: l.styles,
type: "button",
disabled: m.value,
class: C + (l.iconClass ? " btn-icontext" : "") + (l.visible === !1 ? "d-none" : ""),
onClick: (Y) => {
Pe(l, Y);
}
}, [!!l.iconClass && y("i", {
class: l.iconClass
}, null), l.text]);
})])]);
}
function ie(l) {
w.value && ee();
}
function Re() {
return y(ve, null, [W.value && y("div", {
class: "modal-header",
style: "position: absolute;background: transparent;height: 45px;width: 100%;",
onDblclick: (l) => ie()
}, null), y("div", {
ref: I,
class: "modal-header",
style: Me.value,
onDblclick: (l) => ie()
}, [t.slots.headerTemplate ? t.slots.headerTemplate() : y("div", {
class: "modal-title"
}, [b.value && y("span", {
class: g.value,
style: "margin-right: 8px"
}, null), y("span", {
class: "modal-title-label"
}, [R.value])]), y("div", {
class: "actions"
}, [Se()])])]);
}
function Oe() {
return t.slots.footerTemplate ? t.slots.footerTemplate() : T.value && Fe();
}
function Le(l) {
if (l.stopPropagation(), e.allowClickMaskToClose) {
if (l.target !== z.value)
return;
L(l, !1);
}
}
function We() {
var l, m;
return y("div", {
id: v.value,
class: be.value,
style: pe.value,
ref: D
}, [e.showFloatingClose && Te(), y("div", {
class: Ce.value
}, [f.value && Re(), y("div", {
class: ze.value
}, [(m = (l = t.slots).default) == null ? void 0 : m.call(l), N.value === "iframe" && y("iframe", {
title: v.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: S.value
}, null)]), Oe()]), !d.value && D.value && !W.value && G(D.value)]);
}
function je(l) {
return l || "body";
}
return Ue(() => {
K.value && (se.value = de() || 1050);
}), () => y(Ye, {
to: je(e.host)
}, {
default: () => [K.value && y(Xe, {
name: "fade",
appear: !0
}, {
default: () => [y("div", {
ref: z,
class: ye.value,
style: xe.value,
onClick: Le
}, [We()])]
})]
});
}
});
function ge(e) {
if (e.content && e.content.render)
return e.content.render;
if (e.render && typeof e.render == "function")
return e.render;
}
function ut(e) {
const t = document.createElement("div");
t.style.display = "contents";
const a = Ke({
setup(n, r) {
he(() => {
document.body.removeChild(t);
});
const v = o(), h = o(e.class || ""), d = o(!!e.showButtons), f = o(!!e.showHeader), g = o(e.showCloseButton == null ? !0 : e.showCloseButton), M = o(!!e.showFloatingClose), w = o(!0), F = o(e.title || ""), N = e.acceptCallback || (() => {
}), S = e.rejectCallback || (() => {
}), j = e.closedCallback || ((H) => {
}), O = e.resizeHandle || ((H) => {
}), R = e.stopMoveHandle || ((H) => {
}), k = ge(e), z = (H) => {
w.value = !1, a.unmount(), j(H);
};
return fe(() => {
}), r.expose({
modalRef: v
}), () => y(J, {
ref: v,
class: h.value,
modelValue: w.value,
"onUpdate:modelValue": (H) => w.value = H,
title: F.value,
width: e.width,
height: e.height,
buttons: e.buttons,
"show-header": f.value,
"show-buttons": d.value,
"show-close-button": g.value,
"show-max-button": !1,
showFloatingClose: M.value,
onAccept: N,
onCancel: S,
fitContent: e.fitContent == null ? !0 : e.fitContent,
onClosed: z,
onResize: O,
onStopMove: R
}, {
default: () => [k && k(a)]
});
}
});
return document.body.appendChild(t), a.use(Z.i18n), a.mount(t), a;
}
class rt {
// private activeModalInstance = computed(() => {
// return this.modalRefs[this.activeModalIndex.value];
// });
constructor(t) {
$(this, "appContext", null);
$(this, "modalRef", o());
$(this, "activeModalIndex", o(0));
$(this, "modalRefs", {});
$(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: r
} = {
width: window.innerWidth,
height: window.innerHeight
};
return n < t && (t = n - 14), r < a && (a = r - 14), {
width: t,
height: a
};
}
static show(t) {
const a = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, t);
return ut(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 = qe(Object.assign({
title: "",
showButtons: !0,
showHeader: !0,
maximized: !1
}, t)), r = o(!0), v = n.value.acceptCallback || (() => {
}), h = n.value.rejectCallback || (() => {
}), d = n.value.closedCallback || ((s, b) => {
}), f = n.value.openedCallback || ((s) => {
}), g = n.value.resizeHandle || ((s) => {
}), M = t.stopMoveHandle || ((s) => {
});
let w;
const F = ge(n.value), N = (s) => {
var T;
r.value = !1;
const b = (T = s == null ? void 0 : s.target) == null ? void 0 : T.classList.contains("modal_close");
d(s, this.isUseEscCloseModal.value ? "esc" : b ? "icon" : "button");
}, S = (s) => {
N(s), w && ne(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ae(null, a), w = 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.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]);
}
this.isUseEscCloseModal.value = !1;
});
}, j = (s) => {
var b;
this.isUseEscCloseModal.value = !0, (b = this.getCurrentModal()) == null || b.close(s == null ? void 0 : s.event);
}, {
width: O,
height: R
} = n.value, k = this.adaptToWindow(O || 500, R || 320);
Object.assign(n.value, k);
const z = o(), H = () => y(J, Ze({
ref: z,
modelValue: r.value,
"onUpdate:modelValue": (s) => r.value = s
}, n.value, {
isMessager: n.value.class && n.value.class.indexOf("modal-message") > -1,
onAccept: v,
onCancel: h,
onClosed: S,
onResize: g,
onEsc: j,
onStopMove: M,
maximized: n.value.maximized
}), {
default: () => [F && F(this.app)]
});
w = ((s) => {
const b = Je(H, s);
return b.appContext = this.appContext, ae(b, a), b;
})({
...n.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++;
const L = this.activeModalIndex.value;
this.modalRefs[L] = z.value;
const c = (s) => {
n.value = {
...n.value,
...s
}, w && ae(_e(w, {
...n
}), a);
};
return ne(() => {
this.modalRefs[L] = z.value, this.modalRef.value = z.value, f(new Event("opened"));
}), {
update: c,
destroy: S,
modalRef: z,
close: () => {
var s;
(s = z.value) == null || s.close();
},
disableButtons: (s, b = !0) => {
var T;
(T = z.value) == null || T.disableButtons(s, b);
}
};
}
}
const dt = [
{
label: "beforeClose",
name: "关闭前事件"
},
{
label: "onAccept",
name: "确定事件"
},
{
label: "onCancel",
name: "取消事件"
}
], ce = (e) => e && e.length ? e.map((t) => `${t.name}[${t.bindingPath}]`).join(",") : "";
class pt extends Qe {
constructor(a, n) {
super(a, n);
$(this, "numberEditor", {
type: "number-spinner",
useThousands: !1
});
$(this, "buttonProperty", new et(this.componentId, this.designerHostService, !1));
}
getPropertyConfig(a) {
const n = this.getEventPropConfig(a);
return this.propertyConfig.categories.dialog = this.getDialogPropertyConfig(a), this.propertyConfig.categories.eventsEditor = n, this.propertyConfig;
}
getToDataSource() {
const a = this.designViewModelUtils.getAllFields2TreeByVMId(this.viewModelId), n = this.schemaService.getPrimaryField();
return n ? a.filter((r) => r.data.bindingPath !== n) : a;
}
getModalButtons(a) {
const n = this.formSchemaUtils.getExternalComponents().find((r) => r.id === a);
return n ? n.buttons || [] : [];
}
setModalButtons(a, n) {
const r = this.formSchemaUtils.getExternalComponents().find((v) => v.id === a);
r && (r.buttons = n);
}
getDialogPropertyConfig(a) {
const n = this.getModalButtons(a.id);
return {
description: "窗口尺寸配置",
title: "窗口",
parentPropertyID: "dialog",
properties: {
showHeader: {
description: "是否展示头部",
title: "是否展示头部",
type: "boolean",
refreshPanelAfterChanged: !0
},
title: {
description: "标题",
title: "标题",
type: "string",
visible: !!a.showHeader
},
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
},
mapFields: {
description: "弹出表单选中的数据映射到表单字段",
title: "映射字段",
type: "string",
visible: !1,
editor: {
type: "mapping-editor",
modalWidth: 800,
modalHeight: 600,
editable: !1,
beforeOpen: ({ fromDataSource: r, toDataSource: v, gridColumns: h, repository: d }) => {
if (!a.contents || !a.contents.length || !a.contents[0].externalComponent)
return { open: !1, messager: "请选择一个表单" };
const { id: f, relativePath: g } = a.contents[0].externalComponent;
return v.value = this.getToDataSource(), h[1].editor.data = v.value, this.metadataService.getRefMetadata(g, f).then((M) => {
let w = JSON.parse(M.data.content).Contents;
typeof w == "string" && (w = JSON.parse(w)), r.value = d.buildTreeData(w.module.entity[0]), h[0].editor.data = v.value;
}), !0;
},
fromData: {
editable: !0,
formatter: (r, v) => `${v.raw.name} [${v.raw.bindingPath}]`,
idField: "bindingPath",
textField: "name",
valueField: "bindingPath",
searchFields: ["name", "bindingPath"],
repositoryToken: tt,
displayFormatter: ce
},
toData: {
editable: !1,
idField: "bindingPath",
textField: "name",
valueField: "bindingPath",
searchFields: ["name", "bindingPath"],
formatter: (r, v) => `${v.raw.name} [${v.raw.bindingPath}]`,
displayFormatter: ce
}
}
},
showButtons: {
description: "是否显示底部按钮组",
title: "显示底部按钮组",
type: "boolean",
refreshPanelAfterChanged: !0,
visible: !0
},
buttons: {
description: "弹窗底部自定义按钮, 未设置时使用默认按钮，显示取消、确定",
title: "按钮组",
type: "array",
defaultValue: `共 ${n.length} 项`,
visible: !1,
// propertyData.showButtons == null || propertyData.showButtons === true,
$converter: {
convertFrom: () => `共 ${n.length} 项`
},
editor: {
type: "button-edit",
editable: !1,
enableClear: !0,
buttonContent: '<i class="f-icon f-icon-lookup"></i>',
onClear: () => {
const { messagerService: r } = this.designerHostService;
r.question("您确定要清空所有按钮吗？", "", () => {
this.setModalButtons(a.id, []), this.getFormDesignerInstance().reloadPropertyPanel();
}, () => {
this.getFormDesignerInstance().reloadPropertyPanel();
});
},
onClickButton: () => {
lt(this.designerHostService, {
buttons: n,
modalPropertyData: a,
componentId: this.componentId,
viewModelId: this.viewModelId,
forModalFooter: !0
}).show(() => {
this.getFormDesignerInstance().reloadPropertyPanel();
});
}
}
}
}
};
}
getEventPropConfig(a) {
const n = this, r = dt, v = n.eventsEditorUtils.formProperties(a, n.viewModelId, r);
return {
title: "事件",
hideTitle: !0,
properties: n.createBaseEventProperty(v),
refreshPanelAfterChanged: !0,
tabId: Ge,
tabName: "交互",
setPropertyRelates(d, f) {
const g = d.propertyValue;
delete a[n.viewModelId], g && n.eventsEditorUtils.saveRelatedParameters(a, n.viewModelId, g.events, g), r.forEach((M) => {
f[M.label] = a[M.label];
});
}
};
}
}
const ct = Symbol("FModalService");
J.install = (e) => {
e.component(J.name, J);
const t = new rt(e);
e.provide(ct, t), e.provide("FModalService", t);
};
export {
J as FModal,
rt as FModalService,
ct as F_MODAL_SERVICE_TOKEN,
pt as ModalProperty,
J as default,
at as modalProps,
ot as useDraggable,
nt as useResizeable
};