@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,191 lines (1,190 loc) • 37.8 kB
JavaScript
var Oe = Object.defineProperty;
var Ie = (t, e, n) => e in t ? Oe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var A = (t, e, n) => Ie(t, typeof e != "symbol" ? e + "" : e, n);
import { ref as l, computed as p, createVNode as c, Fragment as ae, defineComponent as ue, watch as Y, onBeforeMount as je, onMounted as ie, onUnmounted as re, Teleport as Le, Transition as Fe, shallowRef as De, createApp as Pe, nextTick as We, render as ne, h as Ne, cloneVNode as Ve, mergeProps as ce, reactive as $ } from "vue";
const Ae = {
width: { Type: Number, default: 400 },
type: { Type: String, default: "info" },
title: { Type: String, default: "" },
detail: { Type: String, default: "" },
okButtonText: { Type: String, default: "确定" },
cancelButtonText: { Type: String, default: "取消" },
exceptionInfo: { Type: Object, default: null },
promptEditorType: { Type: String, default: "text-area" },
buttons: { type: Object, default: [] }
};
function le() {
return new DOMException("The request is not allowed", "NotAllowedError");
}
async function $e(t) {
if (!navigator.clipboard)
throw le();
return navigator.clipboard.writeText(t);
}
async function Xe(t) {
const e = document.createElement("span");
e.textContent = t, e.style.whiteSpace = "pre", e.style.webkitUserSelect = "auto", e.style.userSelect = "all", document.body.appendChild(e);
const n = window.getSelection(), a = window.document.createRange();
n == null || n.removeAllRanges(), a.selectNode(e), n == null || n.addRange(a);
let s = !1;
try {
s = window.document.execCommand("copy");
} finally {
n == null || n.removeAllRanges(), window.document.body.removeChild(e);
}
if (!s)
throw le();
}
async function Ye(t) {
try {
await $e(t);
} catch (e) {
try {
await Xe(t);
} catch (n) {
throw n || e || le();
}
}
}
function Ue() {
async function t(e) {
await Ye(e);
}
return { onCopy: t };
}
function qe(t, e, n, a) {
const s = l(14), d = l(140), v = l(""), u = l(a.value.length), r = p(() => a.value), f = p(() => ({
"font-size": `${s.value}px`,
height: "100%"
}));
function b(g) {
if (g.currentTarget) {
const T = g.currentTarget.value || "";
u.value = T.length;
}
}
return () => c(ae, null, [c("textarea", {
title: "promptMessage",
name: "promptMessage",
class: "form-control",
style: f.value,
rows: "4",
maxlength: d.value,
onInput: (g) => b(g)
}, [r.value]), c("span", {
class: "textarea-wordcount",
title: v.value,
style: "position: absolute; bottom: 76px; right: 32px; cursor: pointer; text-align: right;"
}, [u.value + " / " + d.value])]);
}
function Ke(t, e, n, a) {
const s = qe(t, e, n, a), d = /* @__PURE__ */ new Map([["text-area", s]]);
function v(u) {
return d.get(u) || null;
}
return { getEditorRender: v };
}
function Je() {
const t = l(!1), e = l("复制成功");
return {
feedbackStyle: p(() => {
const a = {
position: "absolute",
left: "50%",
top: "50%",
width: "100px",
height: "40px",
background: "#303C53",
"line-height": "40px",
"text-align": "center",
"margin-left": "-30px",
"margin-top": "-50px",
"border-radius": "10px",
"box-shadow": "0px 2px 8px 0px",
color: "#fff",
transition: "all .3s ease"
};
return a.opacity = t.value ? "0.8" : "0", a.display = t.value ? "" : "none", a;
}),
feedbackMessage: e,
toShowFeedback: t
};
}
function _e(t, e) {
const n = e.getEditorRender(t.promptEditorType);
return () => n && n();
}
function Ge(t) {
const e = p(() => !!t.value && !!t.value.date), n = p(() => `发生时间 : ${t.value && t.value.date || ""}`), a = p(() => !!t.value && !!t.value.detail), s = p(() => "详细信息 : " + (t.value && t.value.detail || "")), d = "exp_switch_" + (/* @__PURE__ */ new Date()).getTime();
return () => c("div", {
class: "toast-msg-detail"
}, [e.value && c("div", null, [n.value]), a.value && /* <div id="exception_error_msg" class="exception_error_msg" ref="exceptionMessageRef" style={exceptionMessageStyle.value}>
<input type="checkbox" id="exp_switch" class="d-none exp_switch" />
<div>详细信息:
<label class="swith" for="exp_switch"></label>
<span v-html={safeExceptionMessage.value}></span>
</div>
</div> */
c("div", {
class: "exception_wrap"
}, [c("input", {
type: "checkbox",
id: d,
class: "d-none exp_switch"
}, null), c("div", {
class: "exception_error_msg"
}, [c("label", {
class: "swith",
htmlFor: d
}, null), c("div", {
innerHTML: s.value
}, null)])])]);
}
function Qe(t) {
return () => c("p", {
class: "toast-msg-detail",
innerHTML: t.value
}, null);
}
function Ze(t, e, n, a) {
const s = l(t.exceptionInfo), d = p(() => {
const T = {
"f-icon": !0
}, B = `f-icon-${e.value}`;
return T[B] = !0, T;
}), v = p(() => n.value || s.value && s.value.message), u = p(() => a.value), r = p(() => !!a.value), f = p(() => !!s.value);
function b() {
return f.value ? Ge(s) : r.value ? Qe(u) : () => null;
}
const g = b();
return () => c(ae, null, [c("div", {
class: "float-left modal-tips-iconwrap"
}, [c("span", {
class: d.value
}, null)]), c("div", {
class: "modal-tips-content"
}, [c("p", {
class: "toast-msg-title",
innerHTML: v.value
}, null), g()])]);
}
function et(t, e, n) {
const {
onCopy: a
} = e, {
toShowFeedback: s
} = n, d = l("复制成功"), v = l("复制详细信息"), u = l(t.exceptionInfo || {
date: "",
message: "",
detail: ""
}), r = p(() => u.value && u.value.detail || "");
function f(b) {
a(r.value).catch((g) => {
d.value = "复制失败";
}).finally(() => {
s.value = !0, setTimeout(() => {
s.value = !1;
}, 700);
});
}
return () => c("span", {
style: "width: 100%;color: #2A87FF;padding-left: 37px;"
}, [c("span", {
onClick: f,
style: "cursor: pointer;"
}, [v.value])]);
}
function tt(t, e, n, a) {
const s = l(t.type), d = l(t.buttons), v = l(t.exceptionInfo), u = l(t.okButtonText), r = l(t.cancelButtonText), f = l(!0), b = l(!0), g = p(() => !!(d.value && d.value.length)), T = p(() => v.value && v.value.date && v.value.message && v.value.detail), B = p(() => !(d.value && d.value.length) && (u.value || r.value)), S = p(() => b.value && u.value), H = p(() => f.value && r.value), k = et(t, n, a);
function O(I) {
s.value === "question" && e.emit("reject"), e.emit("close");
}
function F(I) {
s.value === "question" && e.emit("accept"), e.emit("close");
}
return () => c("div", {
class: "modal-footer"
}, [T.value && k(), B.value && H.value && c("button", {
type: "button",
class: "btn btn-secondary btn-lg",
onClick: O
}, [r.value]), B.value && S.value && c("button", {
type: "button",
class: "btn btn-primary btn-lg",
onClick: F
}, [u.value]), g.value && d.value.length && d.value.map((I) => c("button", {
type: "button",
onClick: I.handle,
class: I.class
}, [I.iconClass && c("span", {
class: I.iconClass
}, null), I.text]))]);
}
const J = /* @__PURE__ */ ue({
name: "FMessageBox",
props: Ae,
emits: ["accept", "reject", "close"],
setup(t, e) {
const n = l(t.type), a = l(t.title), s = l(t.detail), d = p(() => {
const k = {
"modal-tips": !0,
"d-flex": !0,
"flex-row": !0
}, O = `messager-type-${n.value}`;
return k[O] = !0, k;
}), v = p(() => {
const k = {};
return n.value === "prompt" ? k.padding = "0.5rem 0.5rem 1rem 1.5rem" : n.value === "error" && (k.padding = "0.5rem 1.5rem 1rem 1.5rem"), k;
}), u = Ue(), r = Ke(t, n, a, s), f = Je(), {
feedbackStyle: b,
feedbackMessage: g
} = f;
function T() {
return c("div", {
style: b.value
}, [g.value]);
}
function B() {
switch (n.value) {
case "prompt":
return _e(t, r);
default:
return Ze(t, n, a, s);
}
}
const S = B(), H = tt(t, e, u, f);
return () => c("div", {
class: "farris-messager"
}, [c("section", {
class: d.value,
style: v.value
}, [S()]), H(), T()]);
}
}), nt = {
/**
* 自定义类
*/
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 z {
constructor(e, n) {
this.x = e, this.y = n;
}
static getTransformInfo(e) {
const a = window.getComputedStyle(e).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(",");
if (a.length >= 6) {
const s = parseInt(a[4], 10), d = parseInt(a[5], 10);
return { x: s, y: d };
}
return { x: 0, y: 0 };
}
static fromEvent(e, n = null) {
if (this.isMouseEvent(e))
return new z(e.clientX, e.clientY);
if (n === null || e.changedTouches.length === 1)
return new z(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
for (let a = 0; a < e.changedTouches.length; a++)
if (e.changedTouches[a].target === n)
return new z(e.changedTouches[a].clientX, e.changedTouches[a].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 n = new z(0, 0);
if (window) {
const a = window.getComputedStyle(e);
if (a) {
const s = parseInt(a.getPropertyValue("left"), 10), d = parseInt(a.getPropertyValue("top"), 10);
n.x = isNaN(s) ? 0 : s, n.y = isNaN(d) ? 0 : d;
}
return n;
}
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 X {
constructor(e, n) {
this.width = e, this.height = n;
}
static getCurrent(e) {
const n = new X(0, 0);
if (window) {
const a = window.getComputedStyle(e);
return a && (n.width = parseInt(a.getPropertyValue("width"), 10), n.height = parseInt(a.getPropertyValue("height"), 10)), n;
}
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 at(t, e) {
const n = l(), a = l(), s = l(), d = l(), v = l(), u = l(), r = l(), f = l(), b = l(), g = l(), T = l(), B = l(), S = l(t.draggable), H = l(!1);
function k() {
const i = a.value || document.body, h = window.getComputedStyle(i);
if (!h || !n.value)
return;
const x = z.getTransformInfo(n.value), w = {};
r.value && (w.deltaL = n.value.offsetLeft - r.value.x, w.deltaT = n.value.offsetTop - r.value.y);
const R = h.getPropertyValue("position");
w.width = i.clientWidth, w.height = i.clientHeight, w.pr = parseInt(h.getPropertyValue("padding-right"), 10), w.pb = parseInt(h.getPropertyValue("padding-bottom"), 10), w.position = h.getPropertyValue("position"), R === "static" && (i.style.position = "relative"), w.translateX = x.x, w.translateY = x.y, g.value = w;
}
function O(i) {
if (n.value) {
d.value = X.getCurrent(n.value), v.value = z.getCurrent(n.value), u.value = d.value ? X.copy(d.value) : null, r.value = v.value ? z.copy(v.value) : null, k();
const h = i.target.getAttribute("type") || "";
f.value = {
n: !!h.match(/n/),
s: !!h.match(/s/),
w: !!h.match(/w/),
e: !!h.match(/e/)
};
}
}
function F() {
var i, h, x, w;
if (n.value) {
const R = n.value;
f.value && ((f.value.n || f.value.s) && ((i = u.value) != null && i.height) && (R.style.height = u.value.height + "px"), (f.value.w || f.value.e) && ((h = u.value) != null && h.width) && (R.style.width = u.value.width + "px"), r.value && ((x = r.value) != null && x.x && (R.style.left = r.value.x + "px"), (w = r.value) != null && w.y && (R.style.top = r.value.y + "px")));
}
}
function I() {
const i = t.minHeight ? t.minHeight : 1, h = t.minWidth ? t.minWidth : 1;
u.value && r.value && f.value && d.value && (u.value.height < i && (u.value.height = i, f.value.n && v.value && (r.value.y = v.value.y + (d.value.height - i))), u.value.width < h && (u.value.width = h, f.value.w && v.value && (r.value.x = v.value.x + (d.value.width - h))), t.maxHeight && u.value.height > t.maxHeight && (u.value.height = t.maxHeight, v.value && f.value.n && (r.value.y = v.value.y + (d.value.height - t.maxHeight))), t.maxWidth && u.value.width > t.maxWidth && (u.value.width = t.maxWidth, f.value.w && v.value && (r.value.x = v.value.x + (d.value.width - t.maxWidth))));
}
function C() {
if (a.value) {
const i = g.value;
if (r.value && u.value && f.value && d.value) {
const h = i.width - i.pr - i.deltaL - i.translateX - r.value.x, x = i.height - i.pb - i.deltaT - i.translateY - r.value.y;
f.value.n && r.value.y + i.translateY < 0 && v.value && (r.value.y = -i.translateY, u.value.height = d.value.height + v.value.y + i.translateY), f.value.w && r.value.x + i.translateX < 0 && v.value && (r.value.x = -i.translateX, u.value.width = d.value.width + v.value.x + i.translateX), u.value.width > h && (u.value.width = h), u.value.height > x && (u.value.height = x);
}
}
}
function E(i) {
if (!s.value || !d.value || !v.value || !f.value)
return;
i.subtract(s.value);
const h = i.x, x = i.y;
f.value.n ? (r.value.y = v.value.y + x, u.value.height = d.value.height - x) : f.value.s && (u.value.height = d.value.height + x), f.value.e ? u.value.width = d.value.width + h : f.value.w && (u.value.width = d.value.width - h, r.value.x = v.value.x + h), C(), I(), F();
}
function D(i) {
if (!b.value)
return;
const h = z.fromEvent(i);
h && E(h);
}
function m() {
if (n.value) {
const {
width: i,
height: h,
x,
y: w
} = n.value.getBoundingClientRect(), R = z.getTransformInfo(n.value);
return {
size: {
width: i,
height: h
},
position: {
x: x - R.x,
y: w - R.y
}
};
}
return null;
}
function y(i) {
if (n.value) {
const h = m();
T.value = h;
}
s.value = void 0, d.value = null, v.value = null, u.value = null, r.value = null, f.value = null, b.value = null, document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", y);
}
function j() {
document.addEventListener("mousemove", D), document.addEventListener("mouseup", y);
}
function L(i) {
i instanceof MouseEvent && i.button === 2 || S.value && (document.body.click(), i.stopPropagation(), i.preventDefault(), s.value = z.fromEvent(i), b.value = i.target, O(i), j());
}
function N(i) {
return n.value = i, c(ae, null, [c("div", {
class: "fv-resizable-handle fv-resizable-n",
type: "n",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-e",
type: "e",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-s",
type: "s",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-w",
type: "w",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-ne",
type: "ne",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal",
type: "se",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-sw",
type: "sw",
onMousedown: (h) => L(h)
}, null), c("div", {
class: "fv-resizable-handle fv-resizable-nw",
type: "nw",
onMousedown: (h) => L(h)
}, null)]);
}
function P(i = !0) {
document.body.click();
const h = a.value || document.body, x = X.getCurrent(h), w = n.value;
i && w && (B.value = m(), B.value.transform = w.style.transform), x && w && (u.value = x, w.style.height = u.value.height - 14 + "px", w.style.width = u.value.width - 14 + "px", w.style.left = "7px", w.style.top = "7px", w.style.transform = "", T.value = {
size: u.value,
position: {
x: 0,
y: 0
}
}, S.value = !1, H.value = !0);
}
function V() {
var i, h;
if (document.body.click(), B.value) {
const x = {
width: B.value.size.width || 0,
height: B.value.size.height || 0
}, w = {
x: (window.innerWidth - x.width) / 2,
y: (window.innerHeight - x.height) / 2
};
(i = u.value) == null || i.set(x), (h = r.value) == null || h.set(w);
const R = n.value;
R.style.height = x.height + "px", R.style.width = x.width + "px", R.style.left = `${w.x}px`, R.style.top = `${w.y}px`, R.style.transform = "", T.value = {
size: x,
position: w
}, S.value = t.draggable, H.value = !1;
}
}
function _() {
if (n.value) {
const i = X.getCurrent(n.value);
if (i) {
const {
width: h,
height: x
} = i;
n.value.style.left = `${(window.innerWidth - h) / 2}px`, n.value.style.top = `${(window.innerHeight - x) / 2}px`, n.value.style.transform = "";
}
}
}
function G() {
const i = () => {
H.value ? P(!1) : _(), document.body.click();
};
return window.addEventListener("resize", i), () => {
window.removeEventListener("resize", i);
};
}
const Q = G();
return {
renderResizeBar: N,
boundingElement: a,
resizedEventParam: T,
maximize: P,
restore: V,
allowDrag: S,
isMaximized: H,
unWindowResizeHandle: Q
};
}
function lt(t, e, n) {
const a = l(), s = l(t.draggable), d = l(t.lockAxis), v = l(), u = l(), r = l(!1), f = l(new z(0, 0)), b = l(new z(0, 0)), g = l(new z(0, 0)), T = l(new z(0, 0));
Y(() => n.value, (m) => {
v.value.style.cursor = m ? "move" : "default";
});
function B(m, y) {
if (y.tagName === "BUTTON")
return !1;
if (y === m)
return !0;
for (const j in y.children)
if (Object.prototype.hasOwnProperty.call(y.children, j) && B(m, y.children[j]))
return !0;
return !1;
}
function S() {
var L, N;
let m = g.value.x + b.value.x, y = g.value.y + b.value.y;
d.value === "x" ? (m = ((L = f.value) == null ? void 0 : L.x) || 0, g.value.x = 0) : d.value === "y" && (y = ((N = f.value) == null ? void 0 : N.y) || 0, g.value.y = 0);
const j = `translate3d(${Math.round(m)}px, ${Math.round(y)}px, 0px)`;
a.value && (a.value.style.transform = j), T.value.x = m, T.value.y = y;
}
function H() {
if (!u.value || !a.value)
return null;
const m = u.value.getBoundingClientRect(), y = a.value.getBoundingClientRect(), j = {
top: m.top < y.top,
right: m.right > y.right,
bottom: m.bottom > y.bottom,
left: m.left < y.left
};
return j.top || (g.value.y -= y.top - m.top), j.bottom || (g.value.y -= y.bottom - m.bottom), j.right || (g.value.x -= y.right - m.right), j.left || (g.value.x -= y.left - m.left), S(), j;
}
function k(m) {
m && (f.value && m.subtract(f.value), g.value.set(m), S(), H());
}
function O(m) {
r.value && s.value && (m.stopPropagation(), m.preventDefault(), k(z.fromEvent(m, v.value)));
}
function F() {
var m;
r.value && (r.value = !1, b.value.add(g.value), g.value.reset(), (m = a.value) == null || m.classList.remove("ng-dragging"), document.removeEventListener("mousemove", O), document.removeEventListener("mouseup", F));
}
function I() {
!r.value && v.value && (r.value = !0, v.value.classList.add("ng-dragging"), document.addEventListener("mousemove", O), document.addEventListener("mouseup", F));
}
function C() {
if (a.value) {
const m = z.getTransformInfo(a.value);
b.value.set(m);
return;
}
b.value.reset();
}
function E(m) {
if (!n.value || m instanceof MouseEvent && m.button === 2)
return;
const y = m.target || m.srcElement;
v.value !== void 0 && y && !B(y, v.value) || s.value !== !1 && (document.body.click(), m.stopPropagation(), m.preventDefault(), f.value = z.fromEvent(m, a.value), C(), I());
}
function D(m, y, j) {
if (s.value && y) {
if (m)
v.value = m;
else if (t.dragHandle) {
if (t.dragHandle instanceof HTMLElement)
v.value = t.dragHandle;
else if (typeof t.dragHandle == "string") {
const L = y.querySelector(t.dragHandle);
L && (v.value = L);
}
}
a.value = y, u.value = j, v.value ? (v.value.classList.add("ng-draggable"), v.value.addEventListener("mousedown", E)) : s.value = !1;
}
}
return {
registerDraggle: D,
resetTranslate: C
};
}
function de(t, e) {
if (t) {
const n = (a) => {
a.key.toLowerCase() === t.toLowerCase() && e({ event: a, key: t });
};
return document.addEventListener("keydown", n), () => {
document.removeEventListener("keydown", n);
};
}
}
function ot(t, e) {
const n = l(t.enableEsc);
let a = null;
return n.value ? (a = de("Escape", (s) => {
e.emit("esc", { event: s.event, type: "esc" });
}), {
remove: a
}) : null;
}
function st(t, e) {
const n = l(t.enableEnter);
let a = null;
return n.value ? (a = de("Enter", (s) => {
e.emit("enter", { event: s.event, type: "enter" });
}), {
remove: a
}) : null;
}
const q = /* @__PURE__ */ ue({
name: "FModal",
props: nt,
emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter"],
setup(t, e) {
const n = l(t.width || 300), a = l(t.height || 200), s = l(t.modelValue), d = l(""), v = l(t.class), u = l(t.fitContent), r = l(t.showHeader), f = l(""), b = l(t.showCloseButton), g = l(t.showMaxButton), T = l(!1), B = l(t.dialogType), S = l(t.src), H = l(""), k = l(t.showButtons), O = l(t.title), F = l(t.resizeable), I = l(t.containment || null), C = l(), E = l(!1);
function D(o, M) {
s.value = !1, e.emit("update:modelValue", !1), M != null && e.emit(M ? "accept" : "cancel"), e.emit("closed", o);
}
const m = [{
name: "cancel",
text: "取消",
class: "btn btn-secondary",
handle: (o) => {
D(o, !1);
}
}, {
name: "accept",
text: "确定",
class: "btn btn-primary",
handle: (o) => {
D(o, !0);
}
}], y = l(t.buttons && t.buttons.length ? t.buttons : m), j = p(() => !!f.value), L = p(() => !!k.value && !!y.value), N = l(), P = l(), V = l(!1), {
renderResizeBar: _,
maximize: G,
restore: Q,
boundingElement: i,
resizedEventParam: h,
allowDrag: x,
unWindowResizeHandle: w
} = at(t), {
registerDraggle: R
} = lt(t, e, x);
function oe() {
return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open");
}
function he() {
const o = document.querySelectorAll(".farris-modal").length;
(!o || o - 1 <= 0) && document.body.classList.remove("modal-open"), C.value && C.value.classList.remove("show");
}
Y(() => t.title, (o, M) => {
o !== M && (O.value = o);
}), Y(() => t.modelValue, (o, M) => {
o !== M && (s.value = o, o || he()), s.value && (E.value = oe());
}), Y(() => t.showHeader, (o, M) => {
o !== M && (r.value = o);
}), Y(() => t.showButtons, (o, M) => {
o !== M && (k.value = o);
}), Y(() => h.value, (o, M) => {
const U = o || {}, K = M || {};
JSON.stringify(U) !== JSON.stringify(K) && e.emit("resize", {
newSize: o,
oldSize: M
});
});
const Z = p(() => (s.value && document.body.classList.add("modal-open"), s.value)), me = p(() => {
const o = {
modal: !0,
"farris-modal": !0,
fade: !0
};
return o["f-modal-fitContent"] = !!u.value, o.show = !!Z.value, o;
}), ge = p(() => {
var U;
const o = {
"modal-dialog": !0
}, M = (U = v.value) == null ? void 0 : U.split(" ");
return M == null || M.reduce((K, He) => (K[He] = !0, K), o), o;
}), ye = p(() => ({
position: "absolute",
top: `${(window.innerHeight - a.value) / 2}px`,
left: `${(window.innerWidth - n.value) / 2}px`,
width: `${n.value}px`,
height: u.value ? "auto" : `${a.value}px`
})), pe = p(() => ({
"modal-content": !0,
"modal-content-has-header": r.value
})), we = p(() => {
const o = {
display: r.value ? "" : "none"
};
return o["pointer-events"] = x.value ? "auto" : "none", o;
}), be = p(() => ({
"f-icon": !0,
modal_maximize: !0,
modalrevert: V.value
})), xe = p(() => ({
"modal-body": !0,
"f-utils-flex-column": B.value === "iframe",
"f-utils-fill": !0
}));
function Ce() {
return {
height: `${t.footerHeight || 60}px`
};
}
const Me = p(() => {
const o = {
textAlgin: H.value
}, M = Ce();
return Object.assign(o, M);
});
function se(o) {
if (o.stopPropagation(), V.value) {
V.value = !1, Q();
return;
}
G(), V.value = !0;
}
async function Te(o, M) {
o.handle && await o.handle(M, o) && e.emit("closed", M);
}
function Be(o) {
o.width && (n.value = o.width), o.height && (a.value = o.height), o.buttons && (y.value = o.buttons), o.title && (O.value = o.title);
}
const ke = p(() => {
const o = {
display: "inline-block"
};
return E.value && (o["background-color"] = "transparent"), o;
});
let ee = null, te = null;
je(() => {
E.value = oe();
}), ie(() => {
P.value && !I.value && (I.value = P.value.parentElement, i.value = I.value, R(N.value, P.value, i.value)), Z.value && document.body.classList.add("modal-open"), ee = ot(t, e), te = st(t, e);
}), re(() => {
w && w(), ee && ee.remove(), te && te.remove();
}), e.expose({
modalElementRef: P,
updateModalOptions: Be,
close: D,
maxDialog: se
});
function Ee() {
return c("ul", null, [T.value && c("li", {
class: "f-btn-icon f-bare"
}, [c("span", {
class: "f-icon modal_minimize"
}, null)]), g.value && c("li", {
onClick: se,
class: "f-btn-icon f-bare",
style: "pointer-events: auto;"
}, [c("span", {
class: be.value
}, null)]), b.value && c("li", {
class: "f-btn-icon f-bare",
onClick: (o) => D(o, !1),
style: "pointer-events: auto;"
}, [c("span", {
class: "f-icon modal_close"
}, null)])]);
}
function ze() {
return c("div", {
class: "modal-footer",
style: Me.value
}, [y.value && y.value.map((o) => c("button", {
name: o.name,
type: "button",
class: o.class + (o.iconClass ? " btn-icontext" : ""),
onClick: (M) => {
Te(o, M);
}
}, [!!o.iconClass && c("i", {
class: o.iconClass
}, null), o.text]))]);
}
function Se() {
return c("div", {
ref: N,
class: "modal-header",
style: we.value
}, [c("div", {
class: "modal-title"
}, [j.value && c("span", {
class: f.value,
style: "margin-right: 8px"
}, null), c("span", {
class: "modal-title-label"
}, [O.value])]), c("div", {
class: "actions"
}, [Ee()])]);
}
function Re(o) {
o.stopPropagation();
}
return () => c(Le, {
to: "body"
}, {
default: () => [Z.value && c(Fe, {
name: "fade",
appear: !0
}, {
default: () => {
var o, M;
return [c("div", {
class: me.value,
style: ke.value,
ref: C,
onClick: Re
}, [c("div", {
id: d.value,
class: ge.value,
style: ye.value,
ref: P
}, [c("div", {
class: pe.value
}, [r.value && Se(), c("div", {
class: xe.value
}, [(M = (o = e.slots).default) == null ? void 0 : M.call(o), B.value === "iframe" && c("iframe", {
title: d.value,
class: "f-utils-fill",
width: "100%",
frameborder: "0",
src: S.value
}, null)]), L.value && ze()]), !u.value && F.value && P.value && !V.value && _(P.value)])])];
}
})]
});
}
});
function ve(t) {
if (t.content && t.content.render)
return t.content.render;
if (t.render && typeof t.render == "function")
return t.render;
}
function ut(t) {
const e = document.createElement("div");
e.style.display = "contents";
const n = Pe({
setup(a, s) {
re(() => {
document.body.removeChild(e);
});
const d = l(), v = l(t.class || ""), u = l(!!t.showButtons), r = l(!!t.showHeader), f = l(t.showCloseButton == null ? !0 : t.showCloseButton), b = l(!0), g = l(t.title || ""), T = t.acceptCallback || (() => {
}), B = t.rejectCallback || (() => {
}), S = t.closedCallback || ((F) => {
}), H = t.resizeHandle || ((F) => {
}), k = ve(t), O = (F) => {
b.value = !1, n.unmount(), S(F);
};
return ie(() => {
}), s.expose({
modalRef: d
}), () => c(q, {
ref: d,
class: v.value,
modelValue: b.value,
"onUpdate:modelValue": (F) => b.value = F,
title: g.value,
width: t.width,
height: t.height,
buttons: t.buttons,
"show-header": r.value,
"show-buttons": u.value,
"show-close-button": f.value,
"show-max-button": !1,
onAccept: T,
onCancel: B,
fitContent: t.fitContent == null ? !0 : t.fitContent,
onClosed: O,
onResize: H
}, {
default: () => [k && k(n)]
});
}
});
return document.body.appendChild(e), n.mount(e), n;
}
class fe {
constructor(e) {
A(this, "appContext", null);
A(this, "modalRef", l());
A(this, "activeModalIndex", l(0));
A(this, "modalRefs", {});
A(this, "isUseEscCloseModal", l(!1));
A(this, "activeModalInstance", p(() => this.modalRefs[this.activeModalIndex.value]));
this.app = e, this.appContext = e ? e._context : null;
}
getCurrentModal() {
return this.activeModalInstance.value;
}
adaptToWindow(e, n) {
const {
width: a,
height: s
} = {
width: window.innerWidth,
height: window.innerHeight
};
return a < e && (e = a), s < n && (n = s), {
width: e,
height: n
};
}
static show(e) {
const n = Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, e);
return ut(n);
}
close(e) {
var n, a;
e ? (a = e.value) == null || a.close() : (n = this.getCurrentModal()) == null || n.close();
}
open(e) {
const n = document.createDocumentFragment();
e.showMaxButton && e.fitContent && (e.showMaxButton = !1);
const a = De(Object.assign({
title: "",
showButtons: !0,
showHeader: !0
}, e)), s = l(!0), d = a.value.acceptCallback || (() => {
}), v = a.value.rejectCallback || (() => {
}), u = a.value.closedCallback || ((C, E) => {
}), r = a.value.resizeHandle || ((C) => {
});
let f;
const b = ve(a.value), g = (C) => {
var D;
s.value = !1;
const E = (D = C == null ? void 0 : C.target) == null ? void 0 : D.classList.contains("modal_close");
u(C, this.isUseEscCloseModal.value ? "esc" : E ? "icon" : "button");
}, T = (C) => {
g(C), f && We(() => {
if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ne(null, n), f = null, this.modalRef.value = null, this.modalRefs) {
const E = Object.keys(this.modalRefs).map((D) => Number(D));
E.length > 0 ? this.activeModalIndex.value = Math.max(...E) : this.activeModalIndex.value = 0;
}
this.isUseEscCloseModal.value = !1;
});
}, B = (C) => {
var E;
this.isUseEscCloseModal.value = !0, this.activeModalInstance && ((E = this.activeModalInstance.value) == null || E.close(C == null ? void 0 : C.event));
}, {
width: S,
height: H
} = a.value, k = this.adaptToWindow(S || 500, H || 320);
Object.assign(a.value, k);
const O = () => c(q, ce({
ref: this.modalRef,
modelValue: s.value,
"onUpdate:modelValue": (C) => s.value = C
}, a.value, {
onAccept: d,
onCancel: v,
onClosed: T,
onResize: r,
onEsc: B
}), {
default: () => [b && b(this.app)]
});
return f = ((C) => {
const E = Ne(O, C);
return E.appContext = this.appContext, ne(E, n), E;
})({
...a.value
// 'onUpdate:modelValue': onUpdateModelValue,
}), this.activeModalIndex.value++, this.modalRefs[this.activeModalIndex.value] = this.modalRef.value, {
update: (C) => {
a.value = {
...a.value,
...C
}, f && ne(Ve(f, {
...a
}), n);
},
destroy: T,
modalRef: this.activeModalInstance,
close: this.close
};
}
}
const it = Symbol("FModalService");
q.install = (t) => {
t.component(q.name, q);
const e = new fe(t);
t.provide(it, e), t.provide("FModalService", e);
};
class W {
static show(e) {
const n = $({
...e
}), a = !1, s = n.type === "error" || n.type === "prompt", d = n.type === "error" ? "错误提示" : n.type === "prompt" && n.title || "", v = n.acceptCallback || (() => {
}), u = n.rejectCallback || (() => {
});
let r = null, f = new fe(r);
const b = () => {
r && (r == null || r.destroy(), f = null);
};
return r = f == null ? void 0 : f.open({
class: "modal-message modal-message-type-info",
title: d,
showButtons: a,
showHeader: s,
width: n.width || 400,
fitContent: !0,
showMaxButton: !1,
draggable: !0,
render: () => c(J, ce(n, {
onAccept: v,
onReject: u,
onClose: b
}), null)
}), f == null ? void 0 : f.getCurrentModal();
}
static info(e, n) {
const a = $({
type: "info",
title: e,
detail: n,
okButtonText: "知道了",
cancelButtonText: ""
});
W.show(a);
}
static warning(e, n) {
const a = $({
type: "warning",
title: e,
detail: n,
okButtonText: "知道了",
cancelButtonText: ""
});
W.show(a);
}
static success(e, n) {
const a = $({
type: "success",
title: e,
detail: n,
okButtonText: "关闭",
cancelButtonText: ""
});
W.show(a);
}
static error(e, n, a) {
const s = $({
width: 500,
type: "error",
okButtonText: "关闭",
cancelButtonText: "",
exceptionInfo: {
date: a,
message: e,
detail: n
}
});
W.show(s);
}
static prompt(e, n) {
const a = $({
type: "prompt",
title: e,
detail: n,
okButtonText: "确定",
cancelButtonText: "取消"
});
W.show(a);
}
static question(e, n, a, s) {
const d = $({
type: "question",
title: e,
detail: n,
okButtonText: "确定",
cancelButtonText: "取消",
acceptCallback: a,
rejectCallback: s
});
W.show(d);
}
}
J.install = (t) => {
t.component(J.name, J), t.provide("FMessageBoxService", W);
};
export {
J as FMessageBox,
W as FMessageBoxService,
J as default,
Ae as messageBoxProps
};