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