UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,699 lines 51.2 kB
var Ke = Object.defineProperty; var Je = (e, t, l) => t in e ? Ke(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l; var G = (e, t, l) => Je(e, typeof t != "symbol" ? t + "" : t, l); import { isMobilePhone as pe, getMaxZIndex as he, withInstall as _e } from "../../components/common/index.esm.js"; import { resolveAppearance as Ze, createPropsResolver as Qe } from "../../components/dynamic-resolver/index.esm.js"; import et, { buttonEditProps as tt } from "../../components/button-edit/index.esm.js"; import { defineComponent as se, ref as o, computed as O, createVNode as v, Teleport as me, createApp as ge, onUnmounted as ie, Fragment as ye, watch as N, nextTick as K, onBeforeMount as nt, onMounted as re, watchEffect as lt, Transition as at, shallowRef as ot, render as ue, h as ut, cloneVNode as st, mergeProps as be, inject as we } from "vue"; import { LocaleService as Q } from "../../components/locale/index.esm.js"; import "../../components/property-panel/index.esm.js"; import "../../components/button/index.esm.js"; import "../../components/field-selector/index.esm.js"; import "../../components/collection-property-editor/index.esm.js/src/use-button-items.designer"; import { useDesignerComponent as it } from "../../components/designer-canvas/index.esm.js"; const rt = { /** * 组件标识 */ id: { type: String, default: "" }, /** * 扩展按钮显示内容,这是一段现在扩展按钮中的html标签 */ buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' }, buttonBehavior: { type: String, default: "Popup" }, /** * 启用输入框自动完成功能 */ autoComplete: { type: Boolean, default: !1 }, /** * 组件自定义样式 */ customClass: { type: String, default: "" }, /** * 禁用组件,既不允许在输入框中录入,也不允许点击扩展按钮。 */ disable: { type: Boolean, default: !1 }, /** * 允许在输入框中录入文本。 */ editable: { type: Boolean, default: !0 }, /** * 显示清空文本按钮 */ enableClear: { type: Boolean, default: !1 }, /** * 组件值 */ modelValue: { type: String, default: "" }, /** * 将组件设置为只读,既不允许在输入框中录入,也不允许点击扩展按钮,但是允许复制输入框中的内容。 */ readonly: { type: Boolean, default: !1 }, /** * 禁用组件时,是否显示扩展按钮 */ showButtonWhenDisabled: { type: Boolean, default: !1 }, /** * 显示扩展按钮 */ showAppendButton: { type: Boolean, default: !0 }, /** * 鼠标悬停在组件上时显示文本框内容。 */ enableTitle: { type: Boolean, default: !1 }, /** * 输入框类型 */ inputType: { type: String, default: "text" }, /** * 显示输入框提示信息 */ forcePlaceholder: { type: Boolean, default: !1 }, /** * 输入框提示文本 */ placeholder: { type: String, default: "" }, /** * 输入框最小长度 */ minLength: Number, /** * 输入框最大长度 */ maxLength: { type: Number }, /** * 输入框Tab键索引 */ tabIndex: Number, popupHost: { type: Object }, popupRightBoundary: { type: Object }, popupOffsetX: { type: Object, default: 0 }, popupOffsetY: { type: Object, default: 0 }, popupOnInput: { type: Boolean, default: !1 }, popupOnFocus: { type: Boolean, default: !1 }, popupOnClick: { type: Boolean, default: !1 }, /** * 样式追加到弹出窗口 */ popupClass: { type: String, default: "" }, popupMinWidth: { type: Number, default: 160 }, modalOptions: { type: Object, default: {} }, wrapText: { type: Boolean, default: !1 }, /** * 可选,是否支持多选 * 默认`false` */ multiSelect: { type: Boolean, default: !1 }, /** * 可选,分隔符 * 默认`,` */ separator: { type: String, default: "," }, /** 对齐方式 */ textAlign: { type: String, default: "left" }, /** * 废弃 */ beforeClickButton: { type: Function, default: null }, /** * 作为内嵌编辑器被创建后默认获得焦点 */ focusOnCreated: { type: Boolean, default: !1 }, /** * 作为内嵌编辑器被创建后默认选中文本 */ selectOnCreated: { type: Boolean, default: !1 }, /** * 打开前 */ beforeOpen: { type: Function, default: null }, /** 更新方式 blur | change */ updateOn: { type: String, default: "change" }, keepWidthWithReference: { type: Boolean, default: !0 }, placement: { type: String, default: "bottom-left" }, /** * 根据空间大小重新调整,原下拉面板内容指定的高度 */ limitContentBySpace: { type: Boolean, default: !1 }, beforeClosePopup: { type: Function, default: null }, /** 是否可扩展 */ expandable: { type: Boolean, default: !1 }, /** 扩展模式 text | button */ expandMode: { type: String, default: "text" }, /** 扩展文本内容 */ expandContent: { type: String, default: "" }, /** 扩展按钮是否禁用 */ expandDisabled: { type: Boolean, default: !1 } }, ct = { popupContentPosition: { type: Object, default: { left: 0, top: 0 } }, host: { type: Object }, backgroundColor: { type: String, default: "" } }, dt = /* @__PURE__ */ se({ name: "FOverlay", props: ct, emits: ["click"], setup(e, t) { const l = o(e.popupContentPosition), a = o(e.host), d = O(() => ({ backgroundColor: e.backgroundColor || "", pointerEvents: "auto" })); function s(i) { t.emit("click"), i.preventDefault(), i.stopPropagation(); } O(() => { const i = a.value; if (i) { const f = i.getBoundingClientRect(), { left: m, top: k, height: y } = f; return { left: m, top: k + y }; } return l.value; }); const p = O(() => ({ // position: 'relative', // left: `${position.value.left}px`, // top: `${position.value.top}px` })); return () => v(me, { to: "body" }, { default: () => { var i, f; return [v("div", { class: "overlay-container", onClick: (m) => s(m), style: d.value }, [v("div", { style: p.value }, [(f = (i = t.slots).default) == null ? void 0 : f.call(i)])])]; } }); } }); function ft(e) { if (e.content && e.content.render) return e.content.render; if (e.render && typeof e.render == "function") return e.render; } function vt(e) { const t = document.createElement("div"); t.style.display = "contents"; let l; const a = e.onClickCallback || (() => { }), d = () => { a(), l && l.unmount(); }; return l = ge({ setup() { ie(() => { document.body.removeChild(t); }); const s = ft(e); return () => v(dt, { "popup-content-position": e.popupPosition, host: e.host, onClick: d, backgroundColor: e.backgroundColor }, { default: () => [s && s()] }); } }), document.body.appendChild(t), l.mount(t), l; } class pt { static show(t) { return vt(t); } } const ht = { /** * 允许点击遮罩关闭对话框 */ 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 T { constructor(t, l) { this.x = t, this.y = l; } static getTransformInfo(t) { const a = window.getComputedStyle(t).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(","); if (a.length >= 6) { const d = parseInt(a[4], 10), s = parseInt(a[5], 10); return { x: d, y: s }; } return { x: 0, y: 0 }; } static fromEvent(t, l = null) { if (this.isMouseEvent(t)) return new T(t.clientX, t.clientY); if (l === null || t.changedTouches.length === 1) return new T(t.changedTouches[0].clientX, t.changedTouches[0].clientY); for (let a = 0; a < t.changedTouches.length; a++) if (t.changedTouches[a].target === l) return new T(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 l = new T(0, 0); if (window) { const a = window.getComputedStyle(t); if (a) { const d = parseInt(a.getPropertyValue("left"), 10), s = parseInt(a.getPropertyValue("top"), 10); l.x = isNaN(d) ? 0 : d, l.y = isNaN(s) ? 0 : s; } return l; } return null; } static copy(t) { return new T(0, 0).set(t); } get value() { return { x: this.x, y: this.y }; } add(t) { return this.x += t.x, this.y += t.y, this; } subtract(t) { return this.x -= t.x, this.y -= t.y, this; } multiply(t) { this.x *= t, this.y *= t; } divide(t) { this.x /= t, this.y /= t; } reset() { return this.x = 0, this.y = 0, this; } set(t) { return this.x = t.x, this.y = t.y, this; } } class X { constructor(t, l) { this.width = t, this.height = l; } static getCurrent(t) { const l = new X(0, 0); if (window) { const a = window.getComputedStyle(t); return a && (l.width = parseInt(a.getPropertyValue("width"), 10), l.height = parseInt(a.getPropertyValue("height"), 10)), l; } return null; } static copy(t) { return new X(0, 0).set(t); } set(t) { return this.width = t.width, this.height = t.height, this; } } function mt(e, t) { const l = o(), a = o(), d = o(), s = o(), p = o(), i = o(), f = o(), m = o(), k = o(), y = o(), S = o(), C = o(e.resizeable), B = o(), M = o(e.draggable), R = o(!1); function F() { const r = a.value || document.body, c = window.getComputedStyle(r); if (!c || !l.value) return; const x = T.getTransformInfo(l.value), w = {}; f.value && (w.deltaL = l.value.offsetLeft - f.value.x, w.deltaT = l.value.offsetTop - f.value.y); const P = c.getPropertyValue("position"); w.width = r.clientWidth, w.height = r.clientHeight, w.pr = parseInt(c.getPropertyValue("padding-right"), 10), w.pb = parseInt(c.getPropertyValue("padding-bottom"), 10), w.position = c.getPropertyValue("position"), P === "static" && (r.style.position = "relative"), w.translateX = x.x, w.translateY = x.y, y.value = w; } function E(r) { if (l.value) { s.value = X.getCurrent(l.value), p.value = T.getCurrent(l.value), i.value = s.value ? X.copy(s.value) : null, f.value = p.value ? T.copy(p.value) : null, F(); const c = r.target.getAttribute("type") || ""; m.value = { n: !!c.match(/n/), s: !!c.match(/s/), w: !!c.match(/w/), e: !!c.match(/e/) }; } } function H() { var r, c, x, w; if (l.value) { const P = l.value; m.value && ((m.value.n || m.value.s) && ((r = i.value) != null && r.height) && (P.style.height = i.value.height + "px"), (m.value.w || m.value.e) && ((c = i.value) != null && c.width) && (P.style.width = i.value.width + "px"), f.value && ((x = f.value) != null && x.x && (P.style.left = f.value.x + "px"), (w = f.value) != null && w.y && (P.style.top = f.value.y + "px"))); } } function j() { const r = e.minHeight ? e.minHeight : 1, c = e.minWidth ? e.minWidth : 1; i.value && f.value && m.value && s.value && (i.value.height < r && (i.value.height = r, m.value.n && p.value && (f.value.y = p.value.y + (s.value.height - r))), i.value.width < c && (i.value.width = c, m.value.w && p.value && (f.value.x = p.value.x + (s.value.width - c))), e.maxHeight && i.value.height > e.maxHeight && (i.value.height = e.maxHeight, p.value && m.value.n && (f.value.y = p.value.y + (s.value.height - e.maxHeight))), e.maxWidth && i.value.width > e.maxWidth && (i.value.width = e.maxWidth, m.value.w && p.value && (f.value.x = p.value.x + (s.value.width - e.maxWidth)))); } function $() { if (a.value) { const r = y.value; if (f.value && i.value && m.value && s.value) { const c = r.width - r.pr - r.deltaL - r.translateX - f.value.x, x = r.height - r.pb - r.deltaT - r.translateY - f.value.y; m.value.n && f.value.y + r.translateY < 0 && p.value && (f.value.y = -r.translateY, i.value.height = s.value.height + p.value.y + r.translateY), m.value.w && f.value.x + r.translateX < 0 && p.value && (f.value.x = -r.translateX, i.value.width = s.value.width + p.value.x + r.translateX), i.value.width > c && (i.value.width = c), i.value.height > x && (i.value.height = x); } } } function D(r) { if (!d.value || !s.value || !p.value || !m.value) return; r.subtract(d.value); const c = r.x, x = r.y; m.value.n ? (f.value.y = p.value.y + x, i.value.height = s.value.height - x) : m.value.s && (i.value.height = s.value.height + x), m.value.e ? i.value.width = s.value.width + c : m.value.w && (i.value.width = s.value.width - c, f.value.x = p.value.x + c), $(), j(), H(); } function h(r) { if (!k.value) return; const c = T.fromEvent(r); c && D(c); } function u() { if (l.value) { const { width: r, height: c, x, y: w } = l.value.getBoundingClientRect(), P = T.getTransformInfo(l.value); return { size: { width: r, height: c }, position: { x: x - P.x, y: w - P.y } }; } return null; } function b(r) { if (l.value) { const c = u(); S.value = c; } d.value = void 0, s.value = null, p.value = null, i.value = null, f.value = null, m.value = null, k.value = null, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", b); } function L() { document.addEventListener("mousemove", h), document.addEventListener("mouseup", b); } function W(r) { r instanceof MouseEvent && r.button === 2 || M.value && (document.body.click(), r.stopPropagation(), r.preventDefault(), d.value = T.fromEvent(r), k.value = r.target, E(r), L()); } function A(r) { return l.value = r, C.value && v(ye, null, [v("div", { class: "fv-resizable-handle fv-resizable-n", type: "n", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-e", type: "e", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-s", type: "s", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-w", type: "w", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-ne", type: "ne", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal", type: "se", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-sw", type: "sw", onMousedown: (c) => W(c) }, null), v("div", { class: "fv-resizable-handle fv-resizable-nw", type: "nw", onMousedown: (c) => W(c) }, null)]); } function V(r = !0) { document.body.click(); const c = a.value || document.body, x = X.getCurrent(c), w = l.value; r && w && (B.value = u(), B.value.transform = w.style.transform), x && w && (i.value = x, i.value.height -= 14, i.value.width -= 14, w.style.height = i.value.height + "px", w.style.width = i.value.width + "px", w.style.left = "7px", w.style.top = "7px", w.style.transform = "", S.value = { size: i.value, position: { x: 0, y: 0 } }, M.value = !1, R.value = !0); } function te() { var r, c; 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 }; (r = i.value) == null || r.set(x), (c = f.value) == null || c.set(w); const P = l.value; P.style.height = x.height + "px", P.style.width = x.width + "px", P.style.left = `${w.x}px`, P.style.top = `${w.y}px`, P.style.transform = "", S.value = { size: x, position: w }, M.value = e.draggable, R.value = !1; } } function _() { if (l.value) { const r = X.getCurrent(l.value); if (r) { const { width: c, height: x } = r; l.value.style.left = `${(window.innerWidth - c) / 2}px`, l.value.style.top = `${(window.innerHeight - x) / 2}px`, l.value.style.transform = ""; } } } function ne() { const r = () => { R.value ? V(!1) : _(), document.body.click(); }; return window.addEventListener("resize", r), () => { window.removeEventListener("resize", r); }; } const q = ne(); return { renderResizeBar: A, boundingElement: a, resizedEventParam: S, maximize: V, restore: te, allowDrag: M, isMaximized: R, unWindowResizeHandle: q, moveToCenter: _ }; } function gt(e, t, l) { const a = o(), d = o(e.draggable), s = o(e.lockAxis), p = o(), i = o(), f = o(!1), m = o(new T(0, 0)), k = o(new T(0, 0)), y = o(new T(0, 0)), S = o(new T(0, 0)); N(() => l.value, (h) => { p.value.style.cursor = h ? "move" : "default"; }); function C(h, u) { if (u.tagName === "BUTTON") return !1; if (u === h) return !0; for (const b in u.children) if (Object.prototype.hasOwnProperty.call(u.children, b) && C(h, u.children[b])) return !0; return !1; } function B() { var L, W; let h = y.value.x + k.value.x, u = y.value.y + k.value.y; s.value === "x" ? (h = ((L = m.value) == null ? void 0 : L.x) || 0, y.value.x = 0) : s.value === "y" && (u = ((W = m.value) == null ? void 0 : W.y) || 0, y.value.y = 0); const b = `translate3d(${Math.round(h)}px, ${Math.round(u)}px, 0px)`; a.value && (a.value.style.transform = b), S.value.x = h, S.value.y = u; } function M() { if (!i.value || !a.value) return null; const h = i.value.getBoundingClientRect(), u = a.value.getBoundingClientRect(), b = { top: h.top < u.top, right: h.right > u.right, bottom: h.bottom > u.bottom, left: h.left < u.left }; return b.top || (y.value.y -= u.top - h.top), b.bottom || (y.value.y -= u.bottom - h.bottom), b.right || (y.value.x -= u.right - h.right), b.left || (y.value.x -= u.left - h.left), B(), b; } function R(h) { h && (m.value && h.subtract(m.value), y.value.set(h), B(), M()); } function F(h) { f.value && d.value && (h.stopPropagation(), h.preventDefault(), R(T.fromEvent(h, p.value))); } function E() { var h; if (f.value) { if (f.value = !1, k.value.add(y.value), y.value.reset(), (h = a.value) == null || h.classList.remove("ng-dragging"), !e.useTransform && a.value) { const { left: u, top: b } = a.value.getBoundingClientRect(); a.value.style.left = Math.ceil(u) + "px", a.value.style.top = Math.ceil(b) + "px", a.value.style.transform = "none"; } t.emit("stopMove"), document.removeEventListener("mousemove", F), document.removeEventListener("mouseup", E); } } function H() { !f.value && p.value && (f.value = !0, p.value.classList.add("ng-dragging"), document.addEventListener("mousemove", F), document.addEventListener("mouseup", E)); } function j() { if (a.value) { const h = T.getTransformInfo(a.value); k.value.set(h); return; } k.value.reset(); } function $(h) { if (!l.value || h instanceof MouseEvent && h.button === 2) return; const u = h.target || h.srcElement; p.value !== void 0 && u && !C(u, p.value) || d.value !== !1 && (document.body.click(), h.stopPropagation(), h.preventDefault(), m.value = T.fromEvent(h, a.value), j(), H()); } function D(h, u, b) { if (d.value && u) { if (h) p.value = h; else if (e.dragHandle) { if (e.dragHandle instanceof HTMLElement) p.value = e.dragHandle; else if (typeof e.dragHandle == "string") { const L = u.querySelector(e.dragHandle); L && (p.value = L); } } a.value = u, i.value = b, p.value ? (p.value.classList.add("ng-draggable"), p.value.addEventListener("mousedown", $)) : d.value = !1; } } return { registerDraggle: D, resetTranslate: j }; } function Ce(e, t) { if (e) { const l = (a) => { a.key.toLowerCase() === e.toLowerCase() && t({ event: a, key: e }); }; return document.addEventListener("keydown", l), () => { document.removeEventListener("keydown", l); }; } } function yt(e, t) { const l = o(e.enableEsc); let a = null; return l.value ? (a = Ce("Escape", (d) => { t.emit("esc", { event: d.event, type: "esc" }); }), { remove: a }) : null; } function bt(e, t) { const l = o(e.enableEnter); let a = null; return l.value ? (a = Ce("Enter", (d) => { t.emit("enter", { event: d.event, type: "enter" }); }), { remove: a }) : null; } const J = /* @__PURE__ */ se({ name: "FModal", props: ht, emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"], setup(e, t) { const l = o(e.width || 300), a = o(e.height || 200), d = o(e.modelValue), s = o(""), p = o(e.class), i = o(e.fitContent), f = o(e.showHeader), m = o(""), k = o(e.showCloseButton), y = o(e.showMaxButton), S = o(!1), C = o(e.dialogType), B = o(e.src), M = o(""), R = o(e.showButtons), F = o(e.title), E = o(e.containment || null), H = o(); F.value === "错误提示" && (F.value = Q.getLocaleValue("messageBox.errorTitle")); const j = o(!1); function $() { const n = document.querySelectorAll(".farris-modal").length; (!n || n - 1 <= 0) && H.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), H.value && H.value.classList.remove("show"); } function D(n, g) { const z = g ? "accept" : "cancel"; Promise.resolve().then(() => { var I; return (I = e.beforeClose) == null ? void 0 : I.call(e, { closeType: z }); }).then((I) => { I && (d.value = !1, t.emit("update:modelValue", !1), g != null && t.emit(g ? "accept" : "cancel"), t.emit("closed", n), $()); }); } const h = [{ name: "cancel", text: Q.getLocaleValue("messageBox.cancel") || "取消", class: "btn btn-secondary", handle: (n) => { D(n, !1); } }, { name: "accept", text: Q.getLocaleValue("messageBox.ok") || "确定", class: "btn btn-primary", handle: (n) => { D(n, !0); } }], u = o(e.buttons && e.buttons.length ? e.buttons : h), b = O(() => !!m.value), L = O(() => !!R.value && !!u.value), W = o(), A = o(), V = o(e.maximized || !1), { renderResizeBar: te, maximize: _, restore: ne, boundingElement: q, resizedEventParam: r, allowDrag: c, unWindowResizeHandle: x, moveToCenter: w } = mt(e), { registerDraggle: P } = gt(e, t, c); function ce() { return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open"); } N(() => e.title, (n, g) => { n !== g && (F.value = n); }), N(() => e.modelValue, (n, g) => { n !== g && (d.value = n, d.value && e.draggable && K(() => { A.value && !E.value && (E.value = A.value.parentElement, q.value = E.value, P(W.value, A.value, q.value), w()); }), n || (E.value && (E.value = null), $())), d.value ? j.value = ce() : (V.value = !1, c.value = e.draggable); }), N(() => e.showHeader, (n, g) => { n !== g && (f.value = n); }), N(() => e.showButtons, (n, g) => { n !== g && (R.value = n); }), N(() => r.value, (n, g) => { const z = n || {}, I = g || {}; JSON.stringify(z) !== JSON.stringify(I) && t.emit("resize", { newSize: n, oldSize: g, isMaximized: V.value }); }), N([() => e.width, () => e.height], (n, g) => { (n[0] !== g[0] || n[1] !== g[1]) && (l.value = n[0] || 500, a.value = n[1] || 600); }), N(() => e.class, (n, g) => { p.value = n; }); const Z = O(() => (d.value && document.body.classList.add("modal-open"), d.value)), Ee = O(() => { var z; const n = { modal: !0, "farris-modal": !0, fade: !0, "fe-cmp-page-modal": !!e.showFloatingClose }; n["f-modal-fitContent"] = !!i.value, n.show = !!Z.value; const g = (z = e.maskClass) == null ? void 0 : z.split(" "); return g == null || g.reduce((I, Y) => (I[Y] = !0, I), n), n; }), ze = O(() => { var z; const n = { "modal-dialog": !0 }, g = (z = p.value) == null ? void 0 : z.split(" "); return g == null || g.reduce((I, Y) => (I[Y] = !0, I), n), n; }), Oe = () => pe() && !e.isMessager || !!e.fullscreen, Se = O(() => { const n = document.documentElement.clientWidth, g = document.documentElement.clientHeight; if (V.value) return { position: "fixed", top: "0px", left: "0px", width: "100vw", height: "100vh", margin: "0" }; const z = Math.min(l.value, n), I = e.position === "right" ? "100%" : i.value ? "auto" : `${Math.min(a.value, g - 10)}px`, Y = `${(window.innerHeight - (I === "100%" || I === "auto" ? 0 : parseInt(I))) / 2}px`, Ue = e.position === "right" ? `${window.innerWidth - z}px` : `${(window.innerWidth - z) / 2}px`, ve = { position: "absolute", top: Y, left: Ue, width: pe() ? "auto" : `${z}px`, height: I }; return e.mask || (ve.pointerEvents = "auto"), ve; }), de = o(he() || 1050), Ie = O(() => { const n = { display: "block", overflow: "hidden" }; return e.mask || (n.pointerEvents = "none", n.backgroundColor = "transparent"), j.value && (n.backgroundColor = "transparent"), n.zIndex = de.value, n; }), He = O(() => ({ "modal-content": !0, "modal-content-has-header": f.value, "is-mobile": Oe() })), Te = O(() => { const n = { display: f.value ? "" : "none" }; return n["pointer-events"] = c.value ? "auto" : "none", n; }), Re = O(() => ({ "f-icon": !0, modal_maximize: !0, modalrevert: V.value })), Pe = O(() => ({ "modal-body": !0, "f-utils-flex-column": C.value === "iframe", "f-utils-fill": !0 })); function je() { return { height: `${e.footerHeight || 60}px` }; } const Le = O(() => { const n = { textAlgin: M.value }, g = je(); return Object.assign(n, g); }); function le(n) { if (n == null || n.stopPropagation(), V.value) { V.value = !1, ne(); return; } _(), V.value = !0; } async function Fe(n, g) { n.handle ? await n.handle(g, n) && t.emit("closed", g) : t.emit("buttonClick", { button: n, $event: g }); } function We(n) { n.width && (l.value = n.width), n.height && (a.value = n.height), n.buttons && (u.value = n.buttons), n.title && (F.value = n.title); } let ae = null, oe = null; nt(() => { j.value = ce(); }), re(() => { A.value && !E.value && (E.value = A.value.parentElement, q.value = E.value, P(W.value, A.value, q.value)), Z.value && document.body.classList.add("modal-open"), ae = yt(e, t), oe = bt(e, t); }), ie(() => { x && x(), ae && ae.remove(), oe && oe.remove(); }), t.expose({ modalElementRef: A, updateModalOptions: We, close: D, maxDialog: le, isMaximized: V, disableButtons: (n, g = !0) => { u.value.forEach((z) => { z.name && n.includes(z.name) && (z.disabled = g); }); } }); function De() { return v("div", { class: "action-wrapper", onClick: (n) => D(n, !1) }, [v("span", { class: "close-icon" }, [v("i", { class: "f-icon f-icon-close" }, null)])]); } function Ve() { return v("ul", null, [S.value && v("li", { class: "f-btn-icon f-bare" }, [v("span", { class: "f-icon modal_minimize" }, null)]), y.value && v("li", { onClick: le, class: "f-btn-icon f-bare", style: "pointer-events: auto;" }, [v("span", { class: Re.value }, null)]), k.value && v("li", { class: "f-btn-icon f-bare", onClick: (n) => D(n, !1), style: "pointer-events: auto;" }, [v("span", { class: "f-icon modal_close" }, null)])]); } const Ae = (n) => { n.preventDefault(); const g = n.currentTarget, z = n.deltaY * 0.5; g.scrollLeft += z; }; function Ne() { return v("div", { class: "modal-footer", style: Le.value }, [u.value && v("div", { class: "buttons", onWheel: Ae }, [u.value.map((n) => { var I; const g = o(n.disabled), z = n.class || ((I = n.appearance) == null ? void 0 : I.class); return v("button", { name: n.name, style: n.styles, type: "button", disabled: g.value, class: z + (n.iconClass ? " btn-icontext" : "") + (n.visible === !1 ? "d-none" : ""), onClick: (Y) => { Fe(n, Y); } }, [!!n.iconClass && v("i", { class: n.iconClass }, null), n.text]); })])]); } function fe(n) { y.value && le(); } function $e() { return v(ye, null, [V.value && v("div", { class: "modal-header", style: "position: absolute;background: transparent;height: 45px;width: 100%;", onDblclick: (n) => fe() }, null), v("div", { ref: W, class: "modal-header", style: Te.value, onDblclick: (n) => fe() }, [t.slots.headerTemplate ? t.slots.headerTemplate() : v("div", { class: "modal-title" }, [b.value && v("span", { class: m.value, style: "margin-right: 8px" }, null), v("span", { class: "modal-title-label" }, [F.value])]), v("div", { class: "actions" }, [Ve()])])]); } function Ye() { return t.slots.footerTemplate ? t.slots.footerTemplate() : L.value && Ne(); } function Xe(n) { if (n.stopPropagation(), e.allowClickMaskToClose) { if (n.target !== H.value) return; D(n, !1); } } function qe() { var n, g; return v("div", { id: s.value, class: ze.value, style: Se.value, ref: A }, [e.showFloatingClose && De(), v("div", { class: He.value }, [f.value && $e(), v("div", { class: Pe.value }, [(g = (n = t.slots).default) == null ? void 0 : g.call(n), C.value === "iframe" && v("iframe", { title: s.value, class: "f-utils-fill", width: "100%", frameborder: "0", src: B.value }, null)]), Ye()]), !i.value && A.value && !V.value && te(A.value)]); } function Ge(n) { return n || "body"; } return lt(() => { Z.value && (de.value = he() || 1050); }), () => v(me, { to: Ge(e.host) }, { default: () => [Z.value && v(at, { name: "fade", appear: !0 }, { default: () => [v("div", { ref: H, class: Ee.value, style: Ie.value, onClick: Xe }, [qe()])] })] }); } }); function xe(e) { if (e.content && e.content.render) return e.content.render; if (e.render && typeof e.render == "function") return e.render; } function wt(e) { const t = document.createElement("div"); t.style.display = "contents"; const l = ge({ setup(a, d) { ie(() => { document.body.removeChild(t); }); const s = o(), p = o(e.class || ""), i = o(!!e.showButtons), f = o(!!e.showHeader), m = o(e.showCloseButton == null ? !0 : e.showCloseButton), k = o(!!e.showFloatingClose), y = o(!0), S = o(e.title || ""), C = e.acceptCallback || (() => { }), B = e.rejectCallback || (() => { }), M = e.closedCallback || ((j) => { }), R = e.resizeHandle || ((j) => { }), F = e.stopMoveHandle || ((j) => { }), E = xe(e), H = (j) => { y.value = !1, l.unmount(), M(j); }; return re(() => { }), d.expose({ modalRef: s }), () => v(J, { ref: s, class: p.value, modelValue: y.value, "onUpdate:modelValue": (j) => y.value = j, title: S.value, width: e.width, height: e.height, buttons: e.buttons, "show-header": f.value, "show-buttons": i.value, "show-close-button": m.value, "show-max-button": !1, showFloatingClose: k.value, onAccept: C, onCancel: B, fitContent: e.fitContent == null ? !0 : e.fitContent, onClosed: H, onResize: R, onStopMove: F }, { default: () => [E && E(l)] }); } }); return document.body.appendChild(t), l.use(Q.i18n), l.mount(t), l; } class Ct { // private activeModalInstance = computed(() => { // return this.modalRefs[this.activeModalIndex.value]; // }); constructor(t) { G(this, "appContext", null); G(this, "modalRef", o()); G(this, "activeModalIndex", o(0)); G(this, "modalRefs", {}); G(this, "isUseEscCloseModal", o(!1)); this.app = t, this.appContext = t ? t._context : null; } getCurrentModal() { return this.modalRefs[this.activeModalIndex.value]; } adaptToWindow(t, l) { const { width: a, height: d } = { width: window.innerWidth, height: window.innerHeight }; return a < t && (t = a - 14), d < l && (l = d - 14), { width: t, height: l }; } static show(t) { const l = Object.assign({ title: "", showButtons: !0, showHeader: !0 }, t); return wt(l); } close(t) { var l, a; t ? (a = t.value) == null || a.close() : (l = this.getCurrentModal()) == null || l.close(); } open(t) { const l = document.createDocumentFragment(); t.showMaxButton && t.fitContent && (t.showMaxButton = !1); const a = ot(Object.assign({ title: "", showButtons: !0, showHeader: !0, maximized: !1 }, t)), d = o(!0), s = a.value.acceptCallback || (() => { }), p = a.value.rejectCallback || (() => { }), i = a.value.closedCallback || ((u, b) => { }), f = a.value.openedCallback || ((u) => { }), m = a.value.resizeHandle || ((u) => { }), k = t.stopMoveHandle || ((u) => { }); let y; const S = xe(a.value), C = (u) => { var L; d.value = !1; const b = (L = u == null ? void 0 : u.target) == null ? void 0 : L.classList.contains("modal_close"); i(u, this.isUseEscCloseModal.value ? "esc" : b ? "icon" : "button"); }, B = (u) => { C(u), y && K(() => { if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ue(null, l), y = null, this.modalRef.value = null, this.modalRefs) { const b = Object.keys(this.modalRefs).map((L) => Number(L)); b.length > 0 ? this.activeModalIndex.value = Math.max(...b) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]); } this.isUseEscCloseModal.value = !1; }); }, M = (u) => { var b; this.isUseEscCloseModal.value = !0, (b = this.getCurrentModal()) == null || b.close(u == null ? void 0 : u.event); }, { width: R, height: F } = a.value, E = this.adaptToWindow(R || 500, F || 320); Object.assign(a.value, E); const H = o(), j = () => v(J, be({ ref: H, modelValue: d.value, "onUpdate:modelValue": (u) => d.value = u }, a.value, { isMessager: a.value.class && a.value.class.indexOf("modal-message") > -1, onAccept: s, onCancel: p, onClosed: B, onResize: m, onEsc: M, onStopMove: k, maximized: a.value.maximized }), { default: () => [S && S(this.app)] }); y = ((u) => { const b = ut(j, u); return b.appContext = this.appContext, ue(b, l), b; })({ ...a.value // 'onUpdate:modelValue': onUpdateModelValue, }), this.activeModalIndex.value++; const D = this.activeModalIndex.value; this.modalRefs[D] = H.value; const h = (u) => { a.value = { ...a.value, ...u }, y && ue(st(y, { ...a }), l); }; return K(() => { this.modalRefs[D] = H.value, this.modalRef.value = H.value, f(new Event("opened")); }), { update: h, destroy: B, modalRef: H, close: () => { var u; (u = H.value) == null || u.close(); }, disableButtons: (u, b = !0) => { var L; (L = H.value) == null || L.disableButtons(u, b); } }; } } const Be = Symbol("FModalService"); J.install = (e) => { e.component(J.name, J); const t = new Ct(e); e.provide(Be, t), e.provide("FModalService", t); }; function Me(e, t) { function l() { const a = e.beforeOpen || e.beforeClickButton || null; let d = Promise.resolve(!0); if (a) { const s = a(t.value); if (typeof s > "u") return d; typeof s == "boolean" ? d = Promise.resolve(s) : d = s; } return d; } return { judgeCanOpen: l }; } function xt(e, t, l, a, d) { const s = o(e.buttonBehavior), p = o(e.popupOnInput), i = O(() => ({ "input-group-append": !0, "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable) })), { judgeCanOpen: f } = Me(e, d), m = O(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable), k = we(Be, null), y = o(); async function S(M) { if (await f() && m.value) { const R = !!t.slots.default; if (s.value === "Modal") { const F = e.modalOptions, E = k == null ? void 0 : k.open({ ...F, render: () => t.slots.default && t.slots.default() }); y.value = E == null ? void 0 : E.modalRef; } s.value === "Overlay" && pt.show({ // host: buttonEditRef.value, host: document.body, backgroundColor: "rgba(0,0,0,.15)", render: () => t.slots.default && t.slots.default() }), R && s.value === "Popup" && a.togglePopup(!0), R && p.value && a.hidePopup(), t.emit("clickButton", { origin: M, value: e.modelValue }); } } function C(M) { t.emit("mouseEnterIcon", M); } function B(M) { t.emit("mouseLeaveIcon", M); } return { buttonGroupClass: i, onClickButton: S, onMouseEnterButton: C, onMouseLeaveButton: B, modalRef: y }; } const U = "FarrisVue_PopoverInstancesKey"; function Bt(e, t, l, a) { const d = o(), s = o(!1), { judgeCanOpen: p } = Me(e, a); N(() => d.value, (C, B) => { window[U] = window[U] || /* @__PURE__ */ new WeakMap(), C ? window[U].set(l.value, C) : window[U].delete(l.value); }); function i() { if (window[U]) { const C = window[U]; document.querySelectorAll(".f-button-edit,.v-popover").forEach((B) => { const M = C.get(B); M && B !== l.value && !l.value.closest(".popover-fitcontent") && M.hide(); }); } } function f() { const C = d.value; C && (C.show ? C.show(l.value) : C.open && C.open(l.value)); } async function m(C = !1) { if (!!t.slots.default) { if (!C && !s.value && !await p()) return; s.value = !s.value, s.value && (await K(), f()); } } async function k(C = !1) { if (!!t.slots.default) { if (!C && !await p()) return; s.value = !0, await K(), f(); } } function y() { s.value = !1; } function S() { s.value = !0, K(() => { f(); }); } return { hidePopup: y, showPopup: S, popup: k, shouldPopupContent: s, togglePopup: m, popoverRef: d, closeAllPopover: i }; } function Mt(e, t, l) { const { buttonGroupClass: a } = l, d = o(), s = O(() => ({ "input-group-append input-append-wrapper": !0, "input-append-button": e.expandMode === "button", "input-append-text": e.expandMode === "text" })); return { renderButtonGroup: () => v("div", { id: e.id ? `${e.id}-button-group` : void 0, class: a.value }, [t.slots.buttonContent ? v("span", { class: "input-group-text input-group-append-button" }, [t.slots.buttonContent()]) : e.buttonContent ? v("span", { class: "input-group-text input-group-append-button", innerHTML: e.buttonContent, ref: d }, null) : null, e.expandable && e.expandContent && v("div", { class: s.value }, [v("div", { class: "input-group-text", innerHTML: e.expandContent }, null)])]), buttonHandleElement: d }; } const ee = /* @__PURE__ */ se({ name: "FButtonEdit", props: rt, emits: ["updateExtendInfo", "clear", "change", "click", "clickButton", "blur", "focus", "mouseEnterIcon", "mouseLeaveIcon", "keyup", "keydown", "inputClick", "input", "update:modelValue"], setup(e, t) { const l = o(), a = we("design-item-context"), d = it(l, a), s = o(e.customClass), p = o(e.modelValue), i = Bt(e, t, l, p), f = xt(e, t, l, i, p), m = o(), k = O(() => ({ "f-cmp-inputgroup": !0, "input-group": !0, "f-state-disabled": !0, "f-state-editable": !1, "f-state-readonly": !0 })); re(() => { l.value.componentInstance = d; }), t.expose(d.value); const y = O(() => { const B = { "f-button-edit": !0, "f-cmp-inputgroup": !0, "f-button-edit-nowrap": !e.wrapText }; return s.value && s.value.split(" ").reduce((M, R) => (M[R] = !0, M), B), B; }), S = O(() => ({ "text-left": e.textAlign === "left", "text-center": e.textAlign === "center", "text-right": e.textAlign === "right", "form-control": !0, "f-utils-fill": !0 })), { renderButtonGroup: C } = Mt(e, t, f); return () => v("div", be(t.attrs, { ref: l, class: y.value, id: e.id ? e.id : void 0, style: "pointer-events: none;" }), [v("div", { class: k.value }, [v("input", { ref: m, class: S.value, readonly: !0, placeholder: e.placeholder }, null), C()])]); } }), kt = /* @__PURE__ */ new Map([ ["appearance", Ze] ]); function Et(e, t, l) { return t; } const zt = "https://json-schema.org/draft/2020-12/schema", Ot = "https://farris-design.gitee.io/button-edit.schema.json", St = "button-edit", It = "A Farris Input Component", Ht = "object", Tt = { id: { description: "The unique identifier for a Input Group", type: "string" }, type: { description: "The type string of Input Group component", type: "string", default: "button-edit" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, binding: { description: "", type: "object", default: {} }, disable: { type: "string", default: !1 }, editable: { description: "", type: "boolean", default: !0 }, enableLinkLabel: { description: "", type: "boolean", default: !1 }, label: { description: "", type: "string", default: "" }, lableWidth: { description: "", type: "number" }, placeholder: { description: "", type: "string", default: "" }, forcePlaceholder: { description: "", type: "boolean", default: !1 }, readonly: { description: "", type: "boolean", default: !1 }, require: { description: "", type: "boolean", default: !1 }, tabindex: { description: "", type: "number", default: -1 }, textAlign: { description: "", type: "string", enum: [ "left", "middle", "right" ], default: "left" }, visible: { description: "", type: "boolean", default: !0 }, onBlur: { description: "", type: "string", default: "" }, onClickLinkLabel: { description: "", type: "string", default: "" }, autoComplete: { description: "", type: "boolean", default: !1 }, buttonContent: { description: "", type: "string", default: "" }, enableClear: { description: "", type: "boolean", default: !0 }, inputType: { description: "", type: "string", enum: [ "text", "tag" ], default: "text" }, multiSelect: { description: "", type: "boolean", default: !1 }, popup: { description: "", type: "object", properties: { footerButtons: { type: "array", default: [] }, height: { type: "number", default: 600 }, dataMapping: { type: "object" }, contents: { type: "array", default: [] }, showMaxButton: { type: "boolean", default: !0 }, showCloseButton: { type: "boolean", default: !0 }, showFooter: { type: "boolean", default: !0 }, title: { type: "string", default: "" }, width: { type: "number", default: 800 } } }, popupClass: { description: "", type: "string", default: "" }, separator: { type: "string", default: "," }, showButtonWhenDisabled: { description: "", type: "boolean", default: !1 }, showAppendButton: { description: "", type: "boolean", default: !0 }, wrapText: { type: "boolean", default: !1 }, onClear: { description: "", type: "string", default: "" }, onClickButton: { description: "", type: "string", default: "" }, modelValue: { description: "", type: "string", default: "" } }, Rt = [ "id", "type" ], Pt = { $schema: zt, $id: Ot, title: St, description: It, type: Ht, properties: Tt, required: Rt }, jt = "buttonEdit", Lt = "A Farris Component", Ft = "object", Wt = { basic: { description: "Basic Infomation", title: "基本信息", properties: { id: { description: "组件标识", title: "标识", type: "string", readonly: !0 }, type: { description: "组件类型", title: "控件类型", type: "select", editor: { type: "waiting for modification", enum: [] } } } }, behavior: { description: "Basic Infomation", title: "行为", properties: { editable: { description: "", title: "允许编辑", type: "boolean" }, readonly: { description: "", title: "只读", type: "string" }, required: { description: "", title: "必填", type: "boolean" }, visible: { description: "", title: "可见", type: "boolean" }, placeholder: { description: "", title: "提示文本", type: "string" }, tabindex: { description: "", title: "tab索引", type: "number" }, textAlign: { description: "", title: "对齐方式", type: "enum", editor: { type: "combo-list", textField: "name", valueField: "value", data: [ { value: "left", name: "左对齐" }, { value: "center", name: "居中" }, { value: "right", name: "右对齐" } ] } } } } }, Dt = { title: jt, description: Lt, type: Ft, categories: Wt }, ke = Qe( tt, Pt, kt, Et, Dt ); ee.register = (e, t, l, a) => { e["button-edit"] = et, t["button-edit"] = ke; }; ee.registerDesigner = (e, t, l) => { e["button-edit"] = ee, t[