UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,522 lines (1,521 loc) 49.3 kB
var Ke = Object.defineProperty; var Je = (e, t, a) => t in e ? Ke(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a; var X = (e, t, a) => Je(e, typeof t != "symbol" ? t + "" : t, a); import { ref as o, computed as b, createVNode as i, Fragment as ae, withDirectives as Ze, vModelCheckbox as Ge, defineComponent as ye, watch as Y, nextTick as ce, onBeforeMount as Qe, onMounted as we, onUnmounted as xe, watchEffect as _e, Teleport as et, Transition as tt, shallowRef as nt, render as re, h as at, cloneVNode as lt, createApp as ot, mergeProps as be, reactive as q, getCurrentInstance as st } from "vue"; import { LocaleService as Z } from "../locale/index.esm.js"; import "bignumber.js"; import "lodash-es"; import { isMobilePhone as ge, getMaxZIndex as pe } from "../common/index.esm.js"; import "../property-panel/index.esm.js"; import "../button/index.esm.js"; import "../field-selector/index.esm.js"; import "../collection-property-editor/index.esm.js/src/use-button-items.designer"; const ut = { width: { Type: Number, default: 400 }, type: { Type: String, default: "info" }, title: { Type: String, default: "" }, detail: { Type: String, default: "" }, okButtonText: { Type: String, default: "确定" }, showOkButton: { Type: Boolean, default: !0 }, showCancelButton: { Type: Boolean, default: !0 }, cancelButtonText: { Type: String, default: "取消" }, exceptionInfo: { Type: Object, default: null }, promptEditorType: { Type: String, default: "text-area" }, buttons: { type: Object, default: [] }, enableNeverShowAgain: { Type: Boolean, default: !1 } }; function de() { return new DOMException("The request is not allowed", "NotAllowedError"); } async function it(e) { if (!navigator.clipboard) throw de(); return navigator.clipboard.writeText(e); } async function rt(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 a = window.getSelection(), n = window.document.createRange(); a == null || a.removeAllRanges(), n.selectNode(t), a == null || a.addRange(n); let s = !1; try { s = window.document.execCommand("copy"); } finally { a == null || a.removeAllRanges(), window.document.body.removeChild(t); } if (!s) throw de(); } async function ct(e) { try { await it(e); } catch (t) { try { await rt(e); } catch (a) { throw a || t || de(); } } } function dt() { async function e(t) { await ct(t); } return { onCopy: e }; } function vt(e, t, a, n) { const s = o(14), u = o(140), c = o(""), r = o(n.value.length), d = b(() => n.value), p = b(() => ({ "font-size": `${s.value}px`, height: "100%" })); function C(m) { if (m.currentTarget) { const M = m.currentTarget.value || ""; r.value = M.length; } } return () => i(ae, null, [i("textarea", { title: "promptMessage", name: "promptMessage", class: "form-control", style: p.value, rows: "4", maxlength: u.value, onInput: (m) => C(m) }, [d.value]), i("span", { class: "textarea-wordcount", title: c.value, style: "position: absolute; bottom: 76px; right: 32px; cursor: pointer; text-align: right;" }, [r.value + " / " + u.value])]); } function ft(e, t, a, n) { const s = vt(e, t, a, n), u = /* @__PURE__ */ new Map([["text-area", s]]); function c(r) { return u.get(r) || null; } return { getEditorRender: c }; } function ht() { const e = o(!1), t = o("复制成功"); return { feedbackStyle: b(() => { const n = { position: "absolute", left: "50%", top: "50%", "min-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", padding: "0 10px" }; return n.opacity = e.value ? "0.8" : "0", n.display = e.value ? "" : "none", n; }), feedbackMessage: t, toShowFeedback: e }; } function mt(e, t) { const a = t.getEditorRender(e.promptEditorType); return () => a && a(); } function gt(e, t) { function a(y) { if (y == null) return 0; let B = 0; for (let T = 0; T < y.length; T++) { const S = y.charCodeAt(T); S >= 0 && S <= 128 ? B++ : B = B + 2; } return B; } function n(y, B) { if (y !== "" && y !== void 0 && y !== null) { y = "" + y; const T = y.length; let S = "", E = 0; for (let R = 0; R < T; R++) { const H = y.charAt(R); if (E++, encodeURI(H).length > 4 && E++, S = S.concat(H), E >= B) return S = S.concat("..."), S; } if (E < B) return y; } return ""; } const s = b(() => !!e.value && !!e.value.date), u = b(() => { const y = e.value && e.value.date || ""; return `${t.exception.happend} : ${y}`; }), c = b(() => !!e.value && !!e.value.detail), r = b(() => e.value ? a(e.value.detail) > 160 : !1), d = o(!1), p = b(() => d.value ? t.exception.collapse : t.exception.expand), C = b(() => { const y = t.exception.detail + " : " + (e.value && e.value.detail) || ""; return d.value ? y : n(y, 160); }), m = b(() => ({ bottom: d.value ? 0 : "2px" })); function M() { d.value = !d.value; } return () => i("div", { class: "toast-msg-detail", style: "max-height: calc(100vh - 200px);overflow: auto;" }, [s.value && i("div", null, [u.value]), c.value && i("div", { class: "exception_wrap" }, [i("div", { class: "exception_error_msg" }, [i("div", { innerHTML: C.value }, null), r.value && i("span", { class: "exception_toggle_detail", style: m.value, onClick: M }, [p.value])])])]); } function pt(e) { return () => i("p", { class: "toast-msg-detail", innerHTML: e.value, style: "max-height: calc(100vh - 200px);overflow: auto;" }, null); } function yt(e, t, a, n, s) { const u = o(e.exceptionInfo), c = b(() => { const B = t.value === "question" ? "warning" : t.value, T = { "f-icon": !0 }, S = `f-icon-${B}`; return T[S] = !0, T; }), r = b(() => a.value || u.value && u.value.message), d = b(() => n.value), p = b(() => !!n.value), C = b(() => !!u.value); function m() { return C.value ? gt(u, s) : p.value ? pt(d) : () => null; } const M = m(), y = b(() => s.locale === "en" ? { wordBreak: "keep-all", overflowWrap: "break-word" } : {}); return () => i(ae, null, [i("div", { class: "float-left modal-tips-iconwrap" }, [i("span", { class: c.value }, null)]), i("div", { class: "modal-tips-content" }, [i("p", { class: "toast-msg-title", innerHTML: r.value, style: y.value }, null), M()])]); } function wt(e, t, a, n) { const { onCopy: s } = t, { toShowFeedback: u } = a, c = o(n.exception.copySuccess || "复制成功"), r = o(n.exception.copy || "复制详细信息"), d = o(e.exceptionInfo || { date: "", message: "", detail: "" }), p = b(() => d.value && d.value.detail || ""); function C(m) { s(p.value).catch((M) => { c.value = n.exception.copyFailed || "复制失败"; }).finally(() => { u.value = !0, setTimeout(() => { u.value = !1; }, 700); }); } return () => i("span", { class: "copy-exception-info" }, [i("span", { onClick: C, style: "cursor: pointer;" }, [r.value])]); } function xt(e, t, a, n, s) { const u = o(e.type), c = o(e.buttons), r = o(e.exceptionInfo), d = o(s.ok || e.okButtonText), p = o(s.cancel || e.cancelButtonText), C = o(e.showCancelButton), m = o(e.showOkButton), M = o(s.neverShowAgain), y = o(!1), B = b(() => !!(c.value && c.value.length)), T = b(() => !!(r.value && r.value.detail)), S = b(() => !(c.value && c.value.length) && (m.value || C.value)), E = wt(e, a, n, s); d.value === "关闭" ? d.value = s.close : d.value === "知道了" && (d.value = s.exception.roger); function R(O) { u.value === "question" && t.emit("reject"), t.emit("close"); } function H(O) { u.value === "question" && t.emit("accept"), t.emit("close"); } function L(O) { y.value = !y.value, t.emit("neverShowAgain", { $event: O, neverShowAgain: y.value }); } return () => i("div", { class: "modal-footer" }, [T.value && E(), e.enableNeverShowAgain && !T.value && i("div", { class: "custom-control custom-checkbox mb-0", onClick: L, style: "position: absolute;left: 40px;" }, [Ze(i("input", { id: "lookup-include-childs-input", "onUpdate:modelValue": (O) => y.value = O, title: "checkbox-input", type: "checkbox", class: "custom-control-input" }, null), [[Ge, y.value]]), i("label", { class: "custom-control-label", style: "padding-left: 1.2rem;" }, [M.value])]), S.value && C.value && i("button", { type: "button", class: "btn btn-secondary btn-lg", onClick: R }, [p.value]), S.value && m.value && i("button", { type: "button", class: "btn btn-primary btn-lg", onClick: H }, [d.value]), B.value && c.value.length && c.value.map((O) => i("button", { type: "button", onClick: O.handle, class: O.class }, [O.iconClass && i("span", { class: O.iconClass }, null), O.text]))]); } function bt(e) { const { getLocaleValue: t } = Z, a = Z.getLocale(); function n(s, u, c) { return u === c ? t(s) : u; } return { yes: n("messageBox.yes") || "是", no: n("messageBox.no") || "否", close: n("messageBox.close") || "关闭", ok: n("messageBox.ok", e.okButtonText, "确定") || "确定", cancel: n("messageBox.cancel", e.cancelButtonText, "取消") || "取消", title: n("messageBox.title") || "系统提示", errorTitle: n("messageBox.errorTitle") || "错误提示", exception: { expand: n("messageBox.exception.expand") || "展开", collapse: n("messageBox.exception.collapse") || "收起", happend: n("messageBox.exception.happend") || "发生时间", detail: n("messageBox.exception.detail") || "详细信息", copy: n("messageBox.exception.copy") || "复制详细信息", copySuccess: n("messageBox.exception.copySuccess") || "复制成功", copyFailed: n("messageBox.exception.copyFailed") || "复制失败", roger: n("messageBox.exception.roger") || "知道了" }, locale: a, neverShowAgain: n("messageBox.neverShowAgain") || "不再提示" }; } const Ct = ["moz", "ms", "webkit"]; function Mt() { let e = 0; return (t) => { const a = (/* @__PURE__ */ new Date()).getTime(), n = Math.max(0, 16 - (a - e)), s = setTimeout(() => { t(a + n); }, n); return e = a + n, s; }; } function Bt() { if (typeof window > "u") return () => 0; if (window.requestAnimationFrame) return window.requestAnimationFrame.bind(window); const e = Ct.filter((t) => `${t}RequestAnimationFrame` in window)[0]; return e ? window[`${e}RequestAnimationFrame`] : Mt(); } Bt(); o(""); function kt() { const e = navigator.userAgent || navigator.vendor || window.opera, t = [ /iPhone/i, /iPod/i, /Android.*Mobile/i, // Android 手机通常包含 "Mobile" 字样,而平板不包含 /webOS/i, /BlackBerry/i, /IEMobile/i, /Opera Mini/i, /Harmony/i ], a = [ /iPad/i, /Android(?!.*Mobile)/i, // Android 平板通常不含 "Mobile" /Tablet/i, /PlayBook/i, /Kindle/i, /Silk/i ]; for (const r of a) if (r.test(e)) return !1; for (const r of t) if (r.test(e)) return !0; const n = "ontouchstart" in window || navigator.maxTouchPoints > 0, s = screen.width, u = screen.height, c = Math.min(s, u); return !!(n && c <= 768); } const ee = /* @__PURE__ */ ye({ name: "FMessageBox", props: ut, emits: ["accept", "reject", "close", "neverShowAgain"], setup(e, t) { const a = bt(e), n = o(e.type), s = o(e.title), u = o(e.detail), c = b(() => { const E = { "modal-tips": !0, "d-flex": !0, "flex-row": !0 }, R = `messager-type-${n.value}`; return E[R] = !0, E; }), r = b(() => { const E = { cursor: "default" }; return n.value === "prompt" ? E.padding = "0.5rem 0.5rem 1rem 1.5rem" : n.value === "error" && (E.padding = "0.5rem 1.5rem 1rem 1.5rem"), E; }), d = dt(), p = ft(e, n, s, u), C = ht(), { feedbackStyle: m, feedbackMessage: M } = C; M.value = a.exception.copySuccess; function y() { return i("div", { style: m.value }, [M.value]); } function B() { switch (n.value) { case "prompt": return mt(e, p); default: return yt(e, n, s, u, a); } } const T = B(), S = xt(e, t, d, C, a); return () => i("div", { class: ["farris-messager", kt() ? "is-mobile" : ""] }, [!e.exceptionInfo && i("div", { style: "height: 30px;width: 100%;position: absolute;", class: "messager-draggable" }, null), i("section", { class: c.value, style: r.value }, [T()]), S(), y()]); } }), Tt = { /** * 允许点击遮罩关闭对话框 */ 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 D { 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 s = parseInt(n[4], 10), u = parseInt(n[5], 10); return { x: s, y: u }; } return { x: 0, y: 0 }; } static fromEvent(t, a = null) { if (this.isMouseEvent(t)) return new D(t.clientX, t.clientY); if (a === null || t.changedTouches.length === 1) return new D(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 D(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 D(0, 0); if (window) { const n = window.getComputedStyle(t); if (n) { const s = parseInt(n.getPropertyValue("left"), 10), u = parseInt(n.getPropertyValue("top"), 10); a.x = isNaN(s) ? 0 : s, a.y = isNaN(u) ? 0 : u; } return a; } return null; } static copy(t) { return new D(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 K { constructor(t, a) { this.width = t, this.height = a; } static getCurrent(t) { const a = new K(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 K(0, 0).set(t); } set(t) { return this.width = t.width, this.height = t.height, this; } } function St(e, t) { const a = o(), n = o(), s = o(), u = o(), c = o(), r = o(), d = o(), p = o(), C = o(), m = o(), M = o(), y = o(e.resizeable), B = o(), T = o(e.draggable), S = o(!1); function E() { const f = n.value || document.body, h = window.getComputedStyle(f); if (!h || !a.value) return; const z = D.getTransformInfo(a.value), k = {}; d.value && (k.deltaL = a.value.offsetLeft - d.value.x, k.deltaT = a.value.offsetTop - d.value.y); const P = h.getPropertyValue("position"); k.width = f.clientWidth, k.height = f.clientHeight, k.pr = parseInt(h.getPropertyValue("padding-right"), 10), k.pb = parseInt(h.getPropertyValue("padding-bottom"), 10), k.position = h.getPropertyValue("position"), P === "static" && (f.style.position = "relative"), k.translateX = z.x, k.translateY = z.y, m.value = k; } function R(f) { if (a.value) { u.value = K.getCurrent(a.value), c.value = D.getCurrent(a.value), r.value = u.value ? K.copy(u.value) : null, d.value = c.value ? D.copy(c.value) : null, E(); const h = f.target.getAttribute("type") || ""; p.value = { n: !!h.match(/n/), s: !!h.match(/s/), w: !!h.match(/w/), e: !!h.match(/e/) }; } } function H() { var f, h, z, k; if (a.value) { const P = a.value; p.value && ((p.value.n || p.value.s) && ((f = r.value) != null && f.height) && (P.style.height = r.value.height + "px"), (p.value.w || p.value.e) && ((h = r.value) != null && h.width) && (P.style.width = r.value.width + "px"), d.value && ((z = d.value) != null && z.x && (P.style.left = d.value.x + "px"), (k = d.value) != null && k.y && (P.style.top = d.value.y + "px"))); } } function L() { const f = e.minHeight ? e.minHeight : 1, h = e.minWidth ? e.minWidth : 1; r.value && d.value && p.value && u.value && (r.value.height < f && (r.value.height = f, p.value.n && c.value && (d.value.y = c.value.y + (u.value.height - f))), r.value.width < h && (r.value.width = h, p.value.w && c.value && (d.value.x = c.value.x + (u.value.width - h))), e.maxHeight && r.value.height > e.maxHeight && (r.value.height = e.maxHeight, c.value && p.value.n && (d.value.y = c.value.y + (u.value.height - e.maxHeight))), e.maxWidth && r.value.width > e.maxWidth && (r.value.width = e.maxWidth, p.value.w && c.value && (d.value.x = c.value.x + (u.value.width - e.maxWidth)))); } function O() { if (n.value) { const f = m.value; if (d.value && r.value && p.value && u.value) { const h = f.width - f.pr - f.deltaL - f.translateX - d.value.x, z = f.height - f.pb - f.deltaT - f.translateY - d.value.y; p.value.n && d.value.y + f.translateY < 0 && c.value && (d.value.y = -f.translateY, r.value.height = u.value.height + c.value.y + f.translateY), p.value.w && d.value.x + f.translateX < 0 && c.value && (d.value.x = -f.translateX, r.value.width = u.value.width + c.value.x + f.translateX), r.value.width > h && (r.value.width = h), r.value.height > z && (r.value.height = z); } } } function N(f) { if (!s.value || !u.value || !c.value || !p.value) return; f.subtract(s.value); const h = f.x, z = f.y; p.value.n ? (d.value.y = c.value.y + z, r.value.height = u.value.height - z) : p.value.s && (r.value.height = u.value.height + z), p.value.e ? r.value.width = u.value.width + h : p.value.w && (r.value.width = u.value.width - h, d.value.x = c.value.x + h), O(), L(), H(); } function g(f) { if (!C.value) return; const h = D.fromEvent(f); h && N(h); } function v() { if (a.value) { const { width: f, height: h, x: z, y: k } = a.value.getBoundingClientRect(), P = D.getTransformInfo(a.value); return { size: { width: f, height: h }, position: { x: z - P.x, y: k - P.y } }; } return null; } function x(f) { if (a.value) { const h = v(); M.value = h; } s.value = void 0, u.value = null, c.value = null, r.value = null, d.value = null, p.value = null, C.value = null, document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", x); } function j() { document.addEventListener("mousemove", g), document.addEventListener("mouseup", x); } function A(f) { f instanceof MouseEvent && f.button === 2 || T.value && (document.body.click(), f.stopPropagation(), f.preventDefault(), s.value = D.fromEvent(f), C.value = f.target, R(f), j()); } function V(f) { return a.value = f, y.value && i(ae, null, [i("div", { class: "fv-resizable-handle fv-resizable-n", type: "n", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-e", type: "e", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-s", type: "s", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-w", type: "w", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-ne", type: "ne", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal", type: "se", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-sw", type: "sw", onMousedown: (h) => A(h) }, null), i("div", { class: "fv-resizable-handle fv-resizable-nw", type: "nw", onMousedown: (h) => A(h) }, null)]); } function W(f = !0) { document.body.click(); const h = n.value || document.body, z = K.getCurrent(h), k = a.value; f && k && (B.value = v(), B.value.transform = k.style.transform), z && k && (r.value = z, r.value.height -= 14, r.value.width -= 14, k.style.height = r.value.height + "px", k.style.width = r.value.width + "px", k.style.left = "7px", k.style.top = "7px", k.style.transform = "", M.value = { size: r.value, position: { x: 0, y: 0 } }, T.value = !1, S.value = !0); } function le() { var f, h; if (document.body.click(), B.value) { const z = { width: B.value.size.width || 0, height: B.value.size.height || 0 }, k = { x: (window.innerWidth - z.width) / 2, y: (window.innerHeight - z.height) / 2 }; (f = r.value) == null || f.set(z), (h = d.value) == null || h.set(k); const P = a.value; P.style.height = z.height + "px", P.style.width = z.width + "px", P.style.left = `${k.x}px`, P.style.top = `${k.y}px`, P.style.transform = "", M.value = { size: z, position: k }, T.value = e.draggable, S.value = !1; } } function Q() { if (a.value) { const f = K.getCurrent(a.value); if (f) { const { width: h, height: z } = f; a.value.style.left = `${(window.innerWidth - h) / 2}px`, a.value.style.top = `${(window.innerHeight - z) / 2}px`, a.value.style.transform = ""; } } } function oe() { const f = () => { S.value ? W(!1) : Q(), document.body.click(); }; return window.addEventListener("resize", f), () => { window.removeEventListener("resize", f); }; } const J = oe(); return { renderResizeBar: V, boundingElement: n, resizedEventParam: M, maximize: W, restore: le, allowDrag: T, isMaximized: S, unWindowResizeHandle: J, moveToCenter: Q }; } function Et(e, t, a) { const n = o(), s = o(e.draggable), u = o(e.lockAxis), c = o(), r = o(), d = o(!1), p = o(new D(0, 0)), C = o(new D(0, 0)), m = o(new D(0, 0)), M = o(new D(0, 0)); Y(() => a.value, (g) => { c.value.style.cursor = g ? "move" : "default"; }); function y(g, v) { if (v.tagName === "BUTTON") return !1; if (v === g) return !0; for (const x in v.children) if (Object.prototype.hasOwnProperty.call(v.children, x) && y(g, v.children[x])) return !0; return !1; } function B() { var j, A; let g = m.value.x + C.value.x, v = m.value.y + C.value.y; u.value === "x" ? (g = ((j = p.value) == null ? void 0 : j.x) || 0, m.value.x = 0) : u.value === "y" && (v = ((A = p.value) == null ? void 0 : A.y) || 0, m.value.y = 0); const x = `translate3d(${Math.round(g)}px, ${Math.round(v)}px, 0px)`; n.value && (n.value.style.transform = x), M.value.x = g, M.value.y = v; } function T() { if (!r.value || !n.value) return null; const g = r.value.getBoundingClientRect(), v = n.value.getBoundingClientRect(), x = { top: g.top < v.top, right: g.right > v.right, bottom: g.bottom > v.bottom, left: g.left < v.left }; return x.top || (m.value.y -= v.top - g.top), x.bottom || (m.value.y -= v.bottom - g.bottom), x.right || (m.value.x -= v.right - g.right), x.left || (m.value.x -= v.left - g.left), B(), x; } function S(g) { g && (p.value && g.subtract(p.value), m.value.set(g), B(), T()); } function E(g) { d.value && s.value && (g.stopPropagation(), g.preventDefault(), S(D.fromEvent(g, c.value))); } function R() { var g; if (d.value) { if (d.value = !1, C.value.add(m.value), m.value.reset(), (g = n.value) == null || g.classList.remove("ng-dragging"), !e.useTransform && n.value) { const { left: v, top: x } = n.value.getBoundingClientRect(); n.value.style.left = Math.ceil(v) + "px", n.value.style.top = Math.ceil(x) + "px", n.value.style.transform = "none"; } t.emit("stopMove"), document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", R); } } function H() { !d.value && c.value && (d.value = !0, c.value.classList.add("ng-dragging"), document.addEventListener("mousemove", E), document.addEventListener("mouseup", R)); } function L() { if (n.value) { const g = D.getTransformInfo(n.value); C.value.set(g); return; } C.value.reset(); } function O(g) { if (!a.value || g instanceof MouseEvent && g.button === 2) return; const v = g.target || g.srcElement; c.value !== void 0 && v && !y(v, c.value) || s.value !== !1 && (document.body.click(), g.stopPropagation(), g.preventDefault(), p.value = D.fromEvent(g, n.value), L(), H()); } function N(g, v, x) { if (s.value && v) { if (g) c.value = g; else if (e.dragHandle) { if (e.dragHandle instanceof HTMLElement) c.value = e.dragHandle; else if (typeof e.dragHandle == "string") { const j = v.querySelector(e.dragHandle); j && (c.value = j); } } n.value = v, r.value = x, c.value ? (c.value.classList.add("ng-draggable"), c.value.addEventListener("mousedown", O)) : s.value = !1; } } return { registerDraggle: N, resetTranslate: L }; } function Ce(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 zt(e, t) { const a = o(e.enableEsc); let n = null; return a.value ? (n = Ce("Escape", (s) => { t.emit("esc", { event: s.event, type: "esc" }); }), { remove: n }) : null; } function Rt(e, t) { const a = o(e.enableEnter); let n = null; return a.value ? (n = Ce("Enter", (s) => { t.emit("enter", { event: s.event, type: "enter" }); }), { remove: n }) : null; } const G = /* @__PURE__ */ ye({ name: "FModal", props: Tt, 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), s = o(e.modelValue), u = o(""), c = o(e.class), r = o(e.fitContent), d = o(e.showHeader), p = o(""), C = o(e.showCloseButton), m = o(e.showMaxButton), M = o(!1), y = o(e.dialogType), B = o(e.src), T = o(""), S = o(e.showButtons), E = o(e.title), R = o(e.containment || null), H = o(); E.value === "错误提示" && (E.value = Z.getLocaleValue("messageBox.errorTitle")); const L = o(!1); function O() { const l = document.querySelectorAll(".farris-modal").length; (!l || l - 1 <= 0) && H.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), H.value && H.value.classList.remove("show"); } function N(l, w) { const I = w ? "accept" : "cancel"; Promise.resolve().then(() => { var F; return (F = e.beforeClose) == null ? void 0 : F.call(e, { closeType: I }); }).then((F) => { F && (s.value = !1, t.emit("update:modelValue", !1), w != null && t.emit(w ? "accept" : "cancel"), t.emit("closed", l), O()); }); } const g = [{ name: "cancel", text: Z.getLocaleValue("messageBox.cancel") || "取消", class: "btn btn-secondary", handle: (l) => { N(l, !1); } }, { name: "accept", text: Z.getLocaleValue("messageBox.ok") || "确定", class: "btn btn-primary", handle: (l) => { N(l, !0); } }], v = o(e.buttons && e.buttons.length ? e.buttons : g), x = b(() => !!p.value), j = b(() => !!S.value && !!v.value), A = o(), V = o(), W = o(e.maximized || !1), { renderResizeBar: le, maximize: Q, restore: oe, boundingElement: J, resizedEventParam: f, allowDrag: h, unWindowResizeHandle: z, moveToCenter: k } = St(e), { registerDraggle: P } = Et(e, t, h); function ve() { return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open"); } Y(() => e.title, (l, w) => { l !== w && (E.value = l); }), Y(() => e.modelValue, (l, w) => { l !== w && (s.value = l, s.value && e.draggable && ce(() => { V.value && !R.value && (R.value = V.value.parentElement, J.value = R.value, P(A.value, V.value, J.value), k()); }), l || (R.value && (R.value = null), O())), s.value ? L.value = ve() : (W.value = !1, h.value = e.draggable); }), Y(() => e.showHeader, (l, w) => { l !== w && (d.value = l); }), Y(() => e.showButtons, (l, w) => { l !== w && (S.value = l); }), Y(() => f.value, (l, w) => { const I = l || {}, F = w || {}; JSON.stringify(I) !== JSON.stringify(F) && t.emit("resize", { newSize: l, oldSize: w, isMaximized: W.value }); }), Y([() => e.width, () => e.height], (l, w) => { (l[0] !== w[0] || l[1] !== w[1]) && (a.value = l[0] || 500, n.value = l[1] || 600); }), Y(() => e.class, (l, w) => { c.value = l; }); const _ = b(() => (s.value && document.body.classList.add("modal-open"), s.value)), ke = b(() => { var I; const l = { modal: !0, "farris-modal": !0, fade: !0, "fe-cmp-page-modal": !!e.showFloatingClose }; l["f-modal-fitContent"] = !!r.value, l.show = !!_.value; const w = (I = e.maskClass) == null ? void 0 : I.split(" "); return w == null || w.reduce((F, U) => (F[U] = !0, F), l), l; }), Te = b(() => { var I; const l = { "modal-dialog": !0 }, w = (I = c.value) == null ? void 0 : I.split(" "); return w == null || w.reduce((F, U) => (F[U] = !0, F), l), l; }), Se = () => ge() && !e.isMessager || !!e.fullscreen, Ee = b(() => { const l = document.documentElement.clientWidth, w = document.documentElement.clientHeight; if (W.value) return { position: "fixed", top: "0px", left: "0px", width: "100vw", height: "100vh", margin: "0" }; const I = Math.min(a.value, l), F = e.position === "right" ? "100%" : r.value ? "auto" : `${Math.min(n.value, w - 10)}px`, U = `${(window.innerHeight - (F === "100%" || F === "auto" ? 0 : parseInt(F))) / 2}px`, Xe = e.position === "right" ? `${window.innerWidth - I}px` : `${(window.innerWidth - I) / 2}px`, me = { position: "absolute", top: U, left: Xe, width: ge() ? "auto" : `${I}px`, height: F }; return e.mask || (me.pointerEvents = "auto"), me; }), fe = o(pe() || 1050), ze = b(() => { const l = { display: "block", overflow: "hidden" }; return e.mask || (l.pointerEvents = "none", l.backgroundColor = "transparent"), L.value && (l.backgroundColor = "transparent"), l.zIndex = fe.value, l; }), Re = b(() => ({ "modal-content": !0, "modal-content-has-header": d.value, "is-mobile": Se() })), He = b(() => { const l = { display: d.value ? "" : "none" }; return l["pointer-events"] = h.value ? "auto" : "none", l; }), Ie = b(() => ({ "f-icon": !0, modal_maximize: !0, modalrevert: W.value })), Fe = b(() => ({ "modal-body": !0, "f-utils-flex-column": y.value === "iframe", "f-utils-fill": !0 })); function Le() { return { height: `${e.footerHeight || 60}px` }; } const Oe = b(() => { const l = { textAlgin: T.value }, w = Le(); return Object.assign(l, w); }); function se(l) { if (l == null || l.stopPropagation(), W.value) { W.value = !1, oe(); return; } Q(), W.value = !0; } async function De(l, w) { l.handle ? await l.handle(w, l) && t.emit("closed", w) : t.emit("buttonClick", { button: l, $event: w }); } function Pe(l) { l.width && (a.value = l.width), l.height && (n.value = l.height), l.buttons && (v.value = l.buttons), l.title && (E.value = l.title); } let ue = null, ie = null; Qe(() => { L.value = ve(); }), we(() => { V.value && !R.value && (R.value = V.value.parentElement, J.value = R.value, P(A.value, V.value, J.value)), _.value && document.body.classList.add("modal-open"), ue = zt(e, t), ie = Rt(e, t); }), xe(() => { z && z(), ue && ue.remove(), ie && ie.remove(); }), t.expose({ modalElementRef: V, updateModalOptions: Pe, close: N, maxDialog: se, isMaximized: W, disableButtons: (l, w = !0) => { v.value.forEach((I) => { I.name && l.includes(I.name) && (I.disabled = w); }); } }); function je() { return i("div", { class: "action-wrapper", onClick: (l) => N(l, !1) }, [i("span", { class: "close-icon" }, [i("i", { class: "f-icon f-icon-close" }, null)])]); } function Ae() { return i("ul", null, [M.value && i("li", { class: "f-btn-icon f-bare" }, [i("span", { class: "f-icon modal_minimize" }, null)]), m.value && i("li", { onClick: se, class: "f-btn-icon f-bare", style: "pointer-events: auto;" }, [i("span", { class: Ie.value }, null)]), C.value && i("li", { class: "f-btn-icon f-bare", onClick: (l) => N(l, !1), style: "pointer-events: auto;" }, [i("span", { class: "f-icon modal_close" }, null)])]); } const Ne = (l) => { l.preventDefault(); const w = l.currentTarget, I = l.deltaY * 0.5; w.scrollLeft += I; }; function We() { return i("div", { class: "modal-footer", style: Oe.value }, [v.value && i("div", { class: "buttons", onWheel: Ne }, [v.value.map((l) => { var F; const w = o(l.disabled), I = l.class || ((F = l.appearance) == null ? void 0 : F.class); return i("button", { name: l.name, style: l.styles, type: "button", disabled: w.value, class: I + (l.iconClass ? " btn-icontext" : "") + (l.visible === !1 ? "d-none" : ""), onClick: (U) => { De(l, U); } }, [!!l.iconClass && i("i", { class: l.iconClass }, null), l.text]); })])]); } function he(l) { m.value && se(); } function Ve() { return i(ae, null, [W.value && i("div", { class: "modal-header", style: "position: absolute;background: transparent;height: 45px;width: 100%;", onDblclick: (l) => he() }, null), i("div", { ref: A, class: "modal-header", style: He.value, onDblclick: (l) => he() }, [t.slots.headerTemplate ? t.slots.headerTemplate() : i("div", { class: "modal-title" }, [x.value && i("span", { class: p.value, style: "margin-right: 8px" }, null), i("span", { class: "modal-title-label" }, [E.value])]), i("div", { class: "actions" }, [Ae()])])]); } function $e() { return t.slots.footerTemplate ? t.slots.footerTemplate() : j.value && We(); } function qe(l) { if (l.stopPropagation(), e.allowClickMaskToClose) { if (l.target !== H.value) return; N(l, !1); } } function Ye() { var l, w; return i("div", { id: u.value, class: Te.value, style: Ee.value, ref: V }, [e.showFloatingClose && je(), i("div", { class: Re.value }, [d.value && Ve(), i("div", { class: Fe.value }, [(w = (l = t.slots).default) == null ? void 0 : w.call(l), y.value === "iframe" && i("iframe", { title: u.value, class: "f-utils-fill", width: "100%", frameborder: "0", src: B.value }, null)]), $e()]), !r.value && V.value && !W.value && le(V.value)]); } function Ue(l) { return l || "body"; } return _e(() => { _.value && (fe.value = pe() || 1050); }), () => i(et, { to: Ue(e.host) }, { default: () => [_.value && i(tt, { name: "fade", appear: !0 }, { default: () => [i("div", { ref: H, class: ke.value, style: ze.value, onClick: qe }, [Ye()])] })] }); } }); function Me(e) { if (e.content && e.content.render) return e.content.render; if (e.render && typeof e.render == "function") return e.render; } function Ht(e) { const t = document.createElement("div"); t.style.display = "contents"; const a = ot({ setup(n, s) { xe(() => { document.body.removeChild(t); }); const u = o(), c = o(e.class || ""), r = o(!!e.showButtons), d = o(!!e.showHeader), p = o(e.showCloseButton == null ? !0 : e.showCloseButton), C = o(!!e.showFloatingClose), m = o(!0), M = o(e.title || ""), y = e.acceptCallback || (() => { }), B = e.rejectCallback || (() => { }), T = e.closedCallback || ((L) => { }), S = e.resizeHandle || ((L) => { }), E = e.stopMoveHandle || ((L) => { }), R = Me(e), H = (L) => { m.value = !1, a.unmount(), T(L); }; return we(() => { }), s.expose({ modalRef: u }), () => i(G, { ref: u, class: c.value, modelValue: m.value, "onUpdate:modelValue": (L) => m.value = L, title: M.value, width: e.width, height: e.height, buttons: e.buttons, "show-header": d.value, "show-buttons": r.value, "show-close-button": p.value, "show-max-button": !1, showFloatingClose: C.value, onAccept: y, onCancel: B, fitContent: e.fitContent == null ? !0 : e.fitContent, onClosed: H, onResize: S, onStopMove: E }, { default: () => [R && R(a)] }); } }); return document.body.appendChild(t), a.use(Z.i18n), a.mount(t), a; } class Be { // private activeModalInstance = computed(() => { // return this.modalRefs[this.activeModalIndex.value]; // }); constructor(t) { X(this, "appContext", null); X(this, "modalRef", o()); X(this, "activeModalIndex", o(0)); X(this, "modalRefs", {}); X(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: s } = { width: window.innerWidth, height: window.innerHeight }; return n < t && (t = n - 14), s < a && (a = s - 14), { width: t, height: a }; } static show(t) { const a = Object.assign({ title: "", showButtons: !0, showHeader: !0 }, t); return Ht(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 = nt(Object.assign({ title: "", showButtons: !0, showHeader: !0, maximized: !1 }, t)), s = o(!0), u = n.value.acceptCallback || (() => { }), c = n.value.rejectCallback || (() => { }), r = n.value.closedCallback || ((v, x) => { }), d = n.value.openedCallback || ((v) => { }), p = n.value.resizeHandle || ((v) => { }), C = t.stopMoveHandle || ((v) => { }); let m; const M = Me(n.value), y = (v) => { var j; s.value = !1; const x = (j = v == null ? void 0 : v.target) == null ? void 0 : j.classList.contains("modal_close"); r(v, this.isUseEscCloseModal.value ? "esc" : x ? "icon" : "button"); }, B = (v) => { y(v), m && ce(() => { if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], re(null, a), m = null, this.modalRef.value = null, this.modalRefs) { const x = Object.keys(this.modalRefs).map((j) => Number(j)); x.length > 0 ? this.activeModalIndex.value = Math.max(...x) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]); } this.isUseEscCloseModal.value = !1; }); }, T = (v) => { var x; this.isUseEscCloseModal.value = !0, (x = this.getCurrentModal()) == null || x.close(v == null ? void 0 : v.event); }, { width: S, height: E } = n.value, R = this.adaptToWindow(S || 500, E || 320); Object.assign(n.value, R); const H = o(), L = () => i(G, be({ ref: H, modelValue: s.value, "onUpdate:modelValue": (v) => s.value = v }, n.value, { isMessager: n.value.class && n.value.class.indexOf("modal-message") > -1, onAccept: u, onCancel: c, onClosed: B, onResize: p, onEsc: T, onStopMove: C, maximized: n.value.maximized }), { default: () => [M && M(this.app)] }); m = ((v) => { const x = at(L, v); return x.appContext = this.appContext, re(x, a), x; })({ ...n.value // 'onUpdate:modelValue': onUpdateModelValue, }), this.activeModalIndex.value++; const N = this.activeModalIndex.value; this.modalRefs[N] = H.value; const g = (v) => { n.value = { ...n.value, ...v }, m && re(lt(m, { ...n }), a); }; return ce(() => { this.modalRefs[N] = H.value, this.modalRef.value = H.value, d(new Event("opened")); }), { update: g, destroy: B, modalRef: H, close: () => { var v; (v = H.value) == null || v.close(); }, disableButtons: (v, x = !0) => { var j; (j = H.value) == null || j.disableButtons(v, x); } }; } } const te = Symbol("FModalService"); G.install = (e) => { e.component(G.name, G); const t = new Be(e); e.provide(te, t), e.provide("FModalService", t); }; const $ = class $ { static show(t, a, n) { let s; if (typeof t == "string" && a != null) { const E = { type: t, title: a, detail: "", ...n }; s = q(E); } else s = q({ ...t }); const u = !1, c = s.type === "error" || s.type === "prompt", r = s.type === "error" ? "错误提示" : s.type === "prompt" && s.title || "", d = s.acceptCallback || (() => { }), p = s.rejectCallback || (() => { }), C = st(); let m = null; if (C && C.appContext) { const { provides: T } = C.appContext; te in T && (m = T[te]); } m || (m = $.app._context.provides[te]); let M = null, y = m || new Be($.app); const B = () => { M && (M == null || M.destroy(), y = null); }; return M = y == null ? void 0 : y.open({ class: "modal-message modal-message-type-info", title: r, showButtons: u, showHeader: c, width: s.width || 400, fitContent: !0, showMaxButton: !1, draggable: !0, dragHandle: ".messager-draggable", render: () => i(ee, be(s, { onAccept: d, onReject: p, onClose: B, onNeverShowAgain: s == null ? void 0 : s.onNeverShowAgain }), null) }), y == null ? void 0 : y.getCurrentModal(); } static info(t, a) { const n = q({ type: "info", title: t, detail: a, okButtonText: "知道了", showCancelButton: !1 }); $.show(n); } static warning(t, a) { const n = q({ type: "warning", title: t, detail: a, okButtonText: "知道了", showCancelButton: !1 }); $.show(n); } static success(t, a) { const n = q({ type: "success", title: t, detail: a, okButtonText: "关闭", showCancelButton: !1 }); $.show(n); } static error(t, a, n) { const s = q({ width: 500, type: "error", okButtonText: "关闭", showCancelButton: !1, exceptionInfo: { date: n, message: t, detail: a } }); $.show(s); } static prompt(t, a) { const n = q({ type: "prompt", title: t, detail: a, okButtonText: "确定", cancelButtonText: "取消" }); $.show(n); } static question(t, a, n, s, u) { const c = q({ type: "question", title: t, detail: a, okButtonText: "确定", cancelButtonText: "取消", acceptCallback: n, rejectCallback: s, enableNeverShowAgain: (u == null ? void 0 : u.enable) || !1, onNeverShowAgain: u == null ? void 0 : u.onNeverShowAgain }); $.show(c); } static showHtmlMsg(t, a, n, s) { const u = q({ type: t, title: a, detail: n, showCancelButton: !1, okButtonText: "确定", acceptCallback: s }); $.show(u); } }; X($, "app", null); let ne = $; ee.install = (e) => { e.component(ee.name, ee), ne.app = e, e.provide("FMessageBoxService", ne); }; export { ee as FMessageBox, ne as FMessageBoxService, ee as default, ut as messageBoxProps };