UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,616 lines 304 kB
var bn = Object.defineProperty; var xn = (e, t, n) => t in e ? bn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n; var te = (e, t, n) => xn(e, typeof t != "symbol" ? t + "" : t, n); import { ref as m, onMounted as K, defineComponent as q, computed as B, createVNode as s, Teleport as vt, createApp as Ge, onUnmounted as ke, Fragment as le, watch as z, nextTick as oe, onBeforeMount as Cn, watchEffect as wn, Transition as ht, shallowRef as kn, render as ze, h as Sn, cloneVNode as Fn, mergeProps as Se, inject as Z, withDirectives as Xe, vShow as Tn, createTextVNode as U, onUpdated as _e, onBeforeUnmount as gt, reactive as J, provide as bt, vModelText as Bn, vModelCheckbox as Mn, getCurrentInstance as On } from "vue"; import { LocaleService as ee } from "../locale/index.esm.js"; import { isMobilePhone as xe, getMaxZIndex as st, useGuid as En, useTouchMomentum as Dn, useTouch as In, useCommonUtils as Pe, useBem as xt, useFarrisConfig as Pn, FormSchemaEntityFieldType$Type as Be, EVENT_PROPERTY_TAB_IDS as Nn, withInstall as Ke, getCustomClass as Rn, getCustomStyle as Vn } from "../common/index.esm.js"; import { InputBaseProperty as jn } from "../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"; import Ln from "../tags/index.esm.js"; import { debounce as Je, isUndefined as An, cloneDeep as ye } from "lodash-es"; import { useInputExpand as Hn } from "../common/index.esm.js/text-box/use-input-expand"; import zn from "../popover/index.esm.js"; import $n from "../drawer/index.esm.js"; import { createPropsResolver as ve, resolveAppearance as Ze, getPropsResolverGenerator as Wn } from "../dynamic-resolver/index.esm.js"; import Ct, { FButtonEdit as wt } from "../button-edit/index.esm.js"; import qn from "../list-view/index.esm.js"; import "bignumber.js"; import Yn from "../../designer/button-edit/index.esm.js"; import { useDesignerComponent as Qe, useDragulaCommonRule as Un } from "../designer-canvas/index.esm.js"; import kt from "../tree-view/index.esm.js"; import Gn from "../event-parameter/index.esm.js"; import { FInputGroup as Xn } from "../input-group/index.esm.js"; const _n = { /** * 标记组件的唯一标识 */ id: { type: String, default: "" }, /** * 按钮内容,缺省为点击按钮图标 */ buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' }, /** * -- * @default Popup */ buttonBehavior: { type: String, default: "Popup" }, /** * 是否启用自动完成录入文本功能 * @default false */ autoComplete: { type: Boolean, default: !1 }, /** * 组件自定义样式 */ customClass: { type: String, default: "" }, /** * 将组件设置为禁用状态 * @default false */ disable: { type: Boolean, default: !1 }, /** * 是否允许在输入框编辑文本;inputType为tag时,此属性无效 * @default true */ editable: { type: Boolean, default: !0 }, /** * 是否启用清空按钮 * @default false */ enableClear: { type: Boolean, default: !1 }, /** * 组件值 */ modelValue: { type: String, default: "" }, /** * 将组件输入框设置为只读 * @default false */ readonly: { type: Boolean, default: !1 }, /** * 是否允许在禁用组件时仍然显示组件按钮 * @default false */ showButtonWhenDisabled: { type: Boolean, default: !1 }, /** * 显示扩展按钮 */ showAppendButton: { type: Boolean, default: !0 }, /** * 是否启用输入框的的提示文本 * @default false */ enableTitle: { type: Boolean, default: !1 }, /** * 'text' * @default 'text' */ inputType: { type: String, default: "text" }, /** * 是否始终显示输入框提示文本 * @default false */ 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 }, /** * 开启后,输入时自动弹出选择面板;inputType为tag时,此属性无效 * @default false */ popupOnInput: { type: Boolean, default: !1 }, /** * 开启后,点击输入框自动弹出选择面板;inputType为tag时,此属性无效 * @default false */ popupOnFocus: { type: Boolean, default: !1 }, popupOnClick: { type: Boolean, default: !1 }, /** * 样式追加到弹出窗口 */ popupClass: { type: String, default: "" }, /** * 弹出面板最小宽度 * @default 160 */ popupMinWidth: { type: Number, default: 160 }, modalOptions: { type: Object, default: {} }, wrapText: { type: Boolean, default: !1 }, /** * 是否支持多选 * @default false */ multiSelect: { type: Boolean, default: !1 }, /** * 多选分隔符 * @default , */ separator: { type: String, default: "," }, /** * 设置输入框对齐方式,缺省状况为左对齐,可选择的值包括:'left','center','right'; inputType为tag时,此属性无效 * @default 'left' */ 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 } }, Kn = { popupContentPosition: { type: Object, default: { left: 0, top: 0 } }, host: { type: Object }, backgroundColor: { type: String, default: "" } }; function Jn() { const e = m(!1); return K(() => { e.value = !0; }), e; } const Zn = /* @__PURE__ */ q({ name: "FOverlay", props: Kn, emits: ["click"], setup(e, t) { const n = m(e.popupContentPosition), a = m(e.host), l = Jn(), o = B(() => ({ backgroundColor: e.backgroundColor || "", pointerEvents: "auto" })); function i(d) { t.emit("click"), d.preventDefault(), d.stopPropagation(); } B(() => { const d = a.value; if (d) { const p = d.getBoundingClientRect(), { left: x, top: f, height: h } = p; return { left: x, top: f + h }; } return n.value; }); const v = B(() => ({ // position: 'relative', // left: `${position.value.left}px`, // top: `${position.value.top}px` })); return () => l.value ? s(vt, { to: "body" }, { default: () => { var d, p; return [s("div", { class: "overlay-container", onClick: (x) => i(x), style: o.value }, [s("div", { style: v.value }, [(p = (d = t.slots).default) == null ? void 0 : p.call(d)])])]; } }) : null; } }); function Qn(e) { if (e.content && e.content.render) return e.content.render; if (e.render && typeof e.render == "function") return e.render; } function ea(e) { const t = document.createElement("div"); t.style.display = "contents"; let n; const a = e.onClickCallback || (() => { }), l = () => { a(), n && n.unmount(); }; return n = Ge({ setup() { ke(() => { document.body.removeChild(t); }); const o = Qn(e); return () => s(Zn, { "popup-content-position": e.popupPosition, host: e.host, onClick: l, backgroundColor: e.backgroundColor }, { default: () => [o && o()] }); } }), document.body.appendChild(t), n.mount(t), n; } class ta { static show(t) { return ea(t); } } const na = { /** * 允许点击蒙层关闭对话框 * @default false */ allowClickMaskToClose: { type: Boolean, default: !1 }, /** * 关闭前事件 * @default () => { return true; } */ beforeClose: { type: Function, default: () => !0 }, /** * 自定义样式,类名以空格隔开 * @default '' */ class: { type: String, default: "" }, /** * 自定义蒙层样式,类名以空格隔开 * @default '' */ maskClass: { type: String, default: "" }, /** * 窗口标题 */ title: { type: String, default: "" }, /** * 窗口宽度 * @default 500 */ width: { type: Number, default: 500 }, /** * 窗口高度 * @default 320 */ height: { type: Number, default: 320 }, /** * 底部按钮 */ buttons: { type: Array, default: [] }, /** * 双向绑定属性是否显示窗口 * @default false */ modelValue: { type: Boolean, default: !1 }, /** * 是否模态 * @default true */ mask: { type: Boolean, default: !0 }, /** * 展示头部 * @default true */ showHeader: { type: Boolean, default: !0 }, /** * 展示默认按钮 * @default true */ showButtons: { type: Boolean, default: !0 }, /** * 自适应尺寸 * @default true */ fitContent: { type: Boolean, default: !0 }, /** * 展示右上角关闭弹窗按钮 * @default true */ showCloseButton: { type: Boolean, default: !0 }, /** * 是否在窗口右上角展示浮动关闭按钮 */ showFloatingClose: { type: Boolean, default: !1 }, /** * 展示右上角最大化按钮 * @default false */ showMaxButton: { type: Boolean, default: !1 }, minHeight: { type: Number }, maxHeight: { type: Number }, minWidth: { type: Number }, maxWidth: { type: Number }, containment: { type: Object, default: null }, /** * 可调整窗口尺寸 * @default false */ resizeable: { type: Boolean, default: !1 }, /** * 可拖拽窗口 * @default false */ draggable: { type: Boolean, default: !1 }, /** * 拖拽抓手,赋值css选择器 */ dragHandle: { type: Object, default: null }, /** * 命令式调用属性,默认关闭按钮回调事件 */ closedCallback: { type: Function, default: null }, openedCallback: { type: Function, default: null }, // 窗口打开后的回调函数 resizeHandle: { type: Function, default: null }, /** * 命令式调用属性,默认插槽,返回VNode */ 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: "" }, /** * 底部区域高度,如果设置为0,则不显示底部区域 * @default 60 */ 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 _ { 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 l = parseInt(a[4], 10), o = parseInt(a[5], 10); return { x: l, y: o }; } return { x: 0, y: 0 }; } static fromEvent(t, n = null) { if (this.isMouseEvent(t)) return new _(t.clientX, t.clientY); if (n === null || t.changedTouches.length === 1) return new _(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 _(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 _(0, 0); if (window) { const a = window.getComputedStyle(t); if (a) { const l = parseInt(a.getPropertyValue("left"), 10), o = parseInt(a.getPropertyValue("top"), 10); n.x = isNaN(l) ? 0 : l, n.y = isNaN(o) ? 0 : o; } return n; } return null; } static copy(t) { return new _(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 ce { constructor(t, n) { this.width = t, this.height = n; } static getCurrent(t) { const n = new ce(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 ce(0, 0).set(t); } set(t) { return this.width = t.width, this.height = t.height, this; } } function aa(e, t) { const n = m(), a = m(), l = m(), o = m(), i = m(), v = m(), d = m(), p = m(), x = m(), f = m(), h = m(), C = m(e.resizeable), k = m(), T = m(e.draggable), g = m(!1); function u() { const O = a.value || document.body, D = window.getComputedStyle(O); if (!D || !n.value) return; const A = _.getTransformInfo(n.value), W = {}; d.value && (W.deltaL = n.value.offsetLeft - d.value.x, W.deltaT = n.value.offsetTop - d.value.y); const G = D.getPropertyValue("position"); W.width = O.clientWidth, W.height = O.clientHeight, W.pr = parseInt(D.getPropertyValue("padding-right"), 10), W.pb = parseInt(D.getPropertyValue("padding-bottom"), 10), W.position = D.getPropertyValue("position"), G === "static" && (O.style.position = "relative"), W.translateX = A.x, W.translateY = A.y, f.value = W; } function y(O) { if (n.value) { o.value = ce.getCurrent(n.value), i.value = _.getCurrent(n.value), v.value = o.value ? ce.copy(o.value) : null, d.value = i.value ? _.copy(i.value) : null, u(); const D = O.target.getAttribute("type") || ""; p.value = { n: !!D.match(/n/), s: !!D.match(/s/), w: !!D.match(/w/), e: !!D.match(/e/) }; } } function S() { var O, D, A, W; if (n.value) { const G = n.value; p.value && ((p.value.n || p.value.s) && ((O = v.value) != null && O.height) && (G.style.height = v.value.height + "px"), (p.value.w || p.value.e) && ((D = v.value) != null && D.width) && (G.style.width = v.value.width + "px"), d.value && ((A = d.value) != null && A.x && (G.style.left = d.value.x + "px"), (W = d.value) != null && W.y && (G.style.top = d.value.y + "px"))); } } function w() { const O = e.minHeight ? e.minHeight : 1, D = e.minWidth ? e.minWidth : 1; v.value && d.value && p.value && o.value && (v.value.height < O && (v.value.height = O, p.value.n && i.value && (d.value.y = i.value.y + (o.value.height - O))), v.value.width < D && (v.value.width = D, p.value.w && i.value && (d.value.x = i.value.x + (o.value.width - D))), e.maxHeight && v.value.height > e.maxHeight && (v.value.height = e.maxHeight, i.value && p.value.n && (d.value.y = i.value.y + (o.value.height - e.maxHeight))), e.maxWidth && v.value.width > e.maxWidth && (v.value.width = e.maxWidth, p.value.w && i.value && (d.value.x = i.value.x + (o.value.width - e.maxWidth)))); } function r() { if (a.value) { const O = f.value; if (d.value && v.value && p.value && o.value) { const D = O.width - O.pr - O.deltaL - O.translateX - d.value.x, A = O.height - O.pb - O.deltaT - O.translateY - d.value.y; p.value.n && d.value.y + O.translateY < 0 && i.value && (d.value.y = -O.translateY, v.value.height = o.value.height + i.value.y + O.translateY), p.value.w && d.value.x + O.translateX < 0 && i.value && (d.value.x = -O.translateX, v.value.width = o.value.width + i.value.x + O.translateX), v.value.width > D && (v.value.width = D), v.value.height > A && (v.value.height = A); } } } function c(O) { if (!l.value || !o.value || !i.value || !p.value) return; O.subtract(l.value); const D = O.x, A = O.y; p.value.n ? (d.value.y = i.value.y + A, v.value.height = o.value.height - A) : p.value.s && (v.value.height = o.value.height + A), p.value.e ? v.value.width = o.value.width + D : p.value.w && (v.value.width = o.value.width - D, d.value.x = i.value.x + D), r(), w(), S(); } function b(O) { if (!x.value) return; const D = _.fromEvent(O); D && c(D); } function F() { if (n.value) { const { width: O, height: D, x: A, y: W } = n.value.getBoundingClientRect(), G = _.getTransformInfo(n.value); return { size: { width: O, height: D }, position: { x: A - G.x, y: W - G.y } }; } return null; } function N(O) { if (n.value) { const D = F(); h.value = D; } l.value = void 0, o.value = null, i.value = null, v.value = null, d.value = null, p.value = null, x.value = null, document.removeEventListener("mousemove", b), document.removeEventListener("mouseup", N); } function j() { document.addEventListener("mousemove", b), document.addEventListener("mouseup", N); } function R(O) { O instanceof MouseEvent && O.button === 2 || T.value && (document.body.click(), O.stopPropagation(), O.preventDefault(), l.value = _.fromEvent(O), x.value = O.target, y(O), j()); } function P(O) { return n.value = O, C.value && s(le, null, [s("div", { class: "fv-resizable-handle fv-resizable-n", type: "n", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-e", type: "e", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-s", type: "s", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-w", type: "w", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-ne", type: "ne", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal", type: "se", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-sw", type: "sw", onMousedown: (D) => R(D) }, null), s("div", { class: "fv-resizable-handle fv-resizable-nw", type: "nw", onMousedown: (D) => R(D) }, null)]); } function M(O = !0) { document.body.click(); const D = a.value || document.body, A = ce.getCurrent(D), W = n.value; O && W && (k.value = F(), k.value.transform = W.style.transform), A && W && (v.value = A, v.value.height -= 14, v.value.width -= 14, W.style.height = v.value.height + "px", W.style.width = v.value.width + "px", W.style.left = "7px", W.style.top = "7px", W.style.transform = "", h.value = { size: v.value, position: { x: 0, y: 0 } }, T.value = !1, g.value = !0); } function I() { var O, D; if (document.body.click(), k.value) { const A = { width: k.value.size.width || 0, height: k.value.size.height || 0 }, W = { x: (window.innerWidth - A.width) / 2, y: (window.innerHeight - A.height) / 2 }; (O = v.value) == null || O.set(A), (D = d.value) == null || D.set(W); const G = n.value; G.style.height = A.height + "px", G.style.width = A.width + "px", G.style.left = `${W.x}px`, G.style.top = `${W.y}px`, G.style.transform = "", h.value = { size: A, position: W }, T.value = e.draggable, g.value = !1; } } function V() { if (n.value) { const O = ce.getCurrent(n.value); if (O) { const { width: D, height: A } = O; n.value.style.left = `${(window.innerWidth - D) / 2}px`, n.value.style.top = `${(window.innerHeight - A) / 2}px`, n.value.style.transform = ""; } } } function $() { const O = () => { g.value ? M(!1) : V(), document.body.click(); }; return window.addEventListener("resize", O), () => { window.removeEventListener("resize", O); }; } const L = $(); return { renderResizeBar: P, boundingElement: a, resizedEventParam: h, maximize: M, restore: I, allowDrag: T, isMaximized: g, unWindowResizeHandle: L, moveToCenter: V }; } function la(e, t, n) { const a = m(), l = m(e.draggable), o = m(e.lockAxis), i = m(), v = m(), d = m(!1), p = m(new _(0, 0)), x = m(new _(0, 0)), f = m(new _(0, 0)), h = m(new _(0, 0)); z(() => n.value, (b) => { i.value.style.cursor = b ? "move" : "default"; }); function C(b, F) { if (F.tagName === "BUTTON") return !1; if (F === b) return !0; for (const N in F.children) if (Object.prototype.hasOwnProperty.call(F.children, N) && C(b, F.children[N])) return !0; return !1; } function k() { var j, R; let b = f.value.x + x.value.x, F = f.value.y + x.value.y; o.value === "x" ? (b = ((j = p.value) == null ? void 0 : j.x) || 0, f.value.x = 0) : o.value === "y" && (F = ((R = p.value) == null ? void 0 : R.y) || 0, f.value.y = 0); const N = `translate3d(${Math.round(b)}px, ${Math.round(F)}px, 0px)`; a.value && (a.value.style.transform = N), h.value.x = b, h.value.y = F; } function T() { if (!v.value || !a.value) return null; const b = v.value.getBoundingClientRect(), F = a.value.getBoundingClientRect(), N = { top: b.top < F.top, right: b.right > F.right, bottom: b.bottom > F.bottom, left: b.left < F.left }; return N.top || (f.value.y -= F.top - b.top), N.bottom || (f.value.y -= F.bottom - b.bottom), N.right || (f.value.x -= F.right - b.right), N.left || (f.value.x -= F.left - b.left), k(), N; } function g(b) { b && (p.value && b.subtract(p.value), f.value.set(b), k(), T()); } function u(b) { d.value && l.value && (b.stopPropagation(), b.preventDefault(), g(_.fromEvent(b, i.value))); } function y() { var b; if (d.value) { if (d.value = !1, x.value.add(f.value), f.value.reset(), (b = a.value) == null || b.classList.remove("ng-dragging"), !e.useTransform && a.value) { const { left: F, top: N } = a.value.getBoundingClientRect(); a.value.style.left = Math.ceil(F) + "px", a.value.style.top = Math.ceil(N) + "px", a.value.style.transform = "none"; } t.emit("stopMove"), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", y); } } function S() { !d.value && i.value && (d.value = !0, i.value.classList.add("ng-dragging"), document.addEventListener("mousemove", u), document.addEventListener("mouseup", y)); } function w() { if (a.value) { const b = _.getTransformInfo(a.value); x.value.set(b); return; } x.value.reset(); } function r(b) { if (!n.value || b instanceof MouseEvent && b.button === 2) return; const F = b.target || b.srcElement; i.value !== void 0 && F && !C(F, i.value) || l.value !== !1 && (document.body.click(), b.stopPropagation(), b.preventDefault(), p.value = _.fromEvent(b, a.value), w(), S()); } function c(b, F, N) { if (l.value && F) { if (b) i.value = b; else if (e.dragHandle) { if (e.dragHandle instanceof HTMLElement) i.value = e.dragHandle; else if (typeof e.dragHandle == "string") { const j = F.querySelector(e.dragHandle); j && (i.value = j); } } a.value = F, v.value = N, i.value ? (i.value.classList.add("ng-draggable"), i.value.addEventListener("mousedown", r)) : l.value = !1; } } return { registerDraggle: c, resetTranslate: w }; } function St(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 oa(e, t) { const n = m(e.enableEsc); let a = null; return n.value ? (a = St("Escape", (l) => { t.emit("esc", { event: l.event, type: "esc" }); }), { remove: a }) : null; } function ia(e, t) { const n = m(e.enableEnter); let a = null; return n.value ? (a = St("Enter", (l) => { t.emit("enter", { event: l.event, type: "enter" }); }), { remove: a }) : null; } const ge = /* @__PURE__ */ q({ name: "FModal", props: na, emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove", "buttonClick"], setup(e, t) { const n = m(e.width || 300), a = m(e.height || 200), l = m(e.modelValue), o = m(""), i = m(e.class), v = m(e.fitContent), d = m(e.showHeader), p = m(""), x = m(e.showCloseButton), f = m(e.showMaxButton), h = m(!1), C = m(e.dialogType), k = m(e.src), T = m(""), g = m(e.showButtons), u = m(e.title), y = m(e.containment || null), S = m(); u.value === "错误提示" && (u.value = ee.getLocaleValue("messageBox.errorTitle")); const w = m(!1); function r() { const E = document.querySelectorAll(".farris-modal").length; (!E || E - 1 <= 0) && S.value === document.querySelectorAll(".farris-modal")[0] && document.body.classList.remove("modal-open"), S.value && S.value.classList.remove("show"); } function c(E, H) { const Y = H ? "accept" : "cancel"; Promise.resolve().then(() => { var X; return (X = e.beforeClose) == null ? void 0 : X.call(e, { closeType: Y }); }).then((X) => { X && (l.value = !1, t.emit("update:modelValue", !1), H != null && t.emit(H ? "accept" : "cancel"), t.emit("closed", E), r()); }); } const b = [{ name: "cancel", text: ee.getLocaleValue("messageBox.cancel") || "取消", class: "btn btn-secondary", handle: (E) => { c(E, !1); } }, { name: "accept", text: ee.getLocaleValue("messageBox.ok") || "确定", class: "btn btn-primary", handle: (E) => { c(E, !0); } }], F = m(e.buttons && e.buttons.length ? e.buttons : b), N = B(() => !!p.value), j = B(() => !!g.value && !!F.value), R = m(), P = m(), M = m(e.maximized || !1), { renderResizeBar: I, maximize: V, restore: $, boundingElement: L, resizedEventParam: O, allowDrag: D, unWindowResizeHandle: A, moveToCenter: W } = aa(e), { registerDraggle: G } = la(e, t, D); function Te() { return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open"); } z(() => e.title, (E, H) => { E !== H && (u.value = E); }), z(() => e.modelValue, (E, H) => { E !== H && (l.value = E, l.value && e.draggable && oe(() => { P.value && !y.value && (y.value = P.value.parentElement, L.value = y.value, G(R.value, P.value, L.value), W()); }), E || (y.value && (y.value = null), r())), l.value ? w.value = Te() : (M.value = !1, D.value = e.draggable); }), z(() => e.showHeader, (E, H) => { E !== H && (d.value = E); }), z(() => e.showButtons, (E, H) => { E !== H && (g.value = E); }), z(() => O.value, (E, H) => { const Y = E || {}, X = H || {}; JSON.stringify(Y) !== JSON.stringify(X) && t.emit("resize", { newSize: E, oldSize: H, isMaximized: M.value }); }), z([() => e.width, () => e.height], (E, H) => { (E[0] !== H[0] || E[1] !== H[1]) && (n.value = E[0] || 500, a.value = E[1] || 600); }), z(() => e.class, (E, H) => { i.value = E; }); const fe = B(() => (l.value && document.body.classList.add("modal-open"), l.value)), je = B(() => { var Y; const E = { modal: !0, "farris-modal": !0, fade: !0, "fe-cmp-page-modal": !!e.showFloatingClose }; E["f-modal-fitContent"] = !!v.value, E.show = !!fe.value; const H = (Y = e.maskClass) == null ? void 0 : Y.split(" "); return H == null || H.reduce((X, re) => (X[re] = !0, X), E), E; }), Kt = B(() => { var Y; const E = { "modal-dialog": !0 }, H = (Y = i.value) == null ? void 0 : Y.split(" "); return H == null || H.reduce((X, re) => (X[re] = !0, X), E), E; }), Jt = () => xe() && !e.isMessager || !!e.fullscreen, Zt = B(() => { const E = document.documentElement.clientWidth, H = document.documentElement.clientHeight; if (M.value) return { position: "fixed", top: "0px", left: "0px", width: "100vw", height: "100vh", margin: "0" }; const Y = Math.min(n.value, E), X = e.position === "right" ? "100%" : v.value ? "auto" : `${Math.min(a.value, H - 10)}px`, re = `${(window.innerHeight - (X === "100%" || X === "auto" ? 0 : parseInt(X))) / 2}px`, gn = e.position === "right" ? `${window.innerWidth - Y}px` : `${(window.innerWidth - Y) / 2}px`, it = { position: "absolute", top: re, left: gn, width: xe() ? "auto" : `${Y}px`, height: X }; return e.mask || (it.pointerEvents = "auto"), it; }), lt = m(st() || 1050), Qt = B(() => { const E = { display: "block", overflow: "hidden" }; return e.mask || (E.pointerEvents = "none", E.backgroundColor = "transparent"), w.value && (E.backgroundColor = "transparent"), E.zIndex = lt.value, E; }), en = B(() => ({ "modal-content": !0, "modal-content-has-header": d.value, "is-mobile": Jt() })), tn = B(() => { const E = { display: d.value ? "" : "none" }; return E["pointer-events"] = D.value ? "auto" : "none", E; }), nn = B(() => ({ "f-icon": !0, modal_maximize: !0, modalrevert: M.value })), an = B(() => ({ "modal-body": !0, "f-utils-flex-column": C.value === "iframe", "f-utils-fill": !0 })); function ln() { return { height: `${e.footerHeight || 60}px` }; } const on = B(() => { const E = { textAlgin: T.value }, H = ln(); return Object.assign(E, H); }); function Le(E) { if (E == null || E.stopPropagation(), M.value) { M.value = !1, $(); return; } V(), M.value = !0; } async function sn(E, H) { E.handle ? await E.handle(H, E) && t.emit("closed", H) : t.emit("buttonClick", { button: E, $event: H }); } function rn(E) { E.width && (n.value = E.width), E.height && (a.value = E.height), E.buttons && (F.value = E.buttons), E.title && (u.value = E.title); } let Ae = null, He = null; Cn(() => { w.value = Te(); }), K(() => { P.value && !y.value && (y.value = P.value.parentElement, L.value = y.value, G(R.value, P.value, L.value)), fe.value && document.body.classList.add("modal-open"), Ae = oa(e, t), He = ia(e, t); }), ke(() => { A && A(), Ae && Ae.remove(), He && He.remove(); }), t.expose({ modalElementRef: P, updateModalOptions: rn, close: c, maxDialog: Le, isMaximized: M, disableButtons: (E, H = !0) => { F.value.forEach((Y) => { Y.name && E.includes(Y.name) && (Y.disabled = H); }); } }); function un() { return s("div", { class: "action-wrapper", onClick: (E) => c(E, !1) }, [s("span", { class: "close-icon" }, [s("i", { class: "f-icon f-icon-close" }, null)])]); } function cn() { return s("ul", null, [h.value && s("li", { class: "f-btn-icon f-bare" }, [s("span", { class: "f-icon modal_minimize" }, null)]), f.value && s("li", { onClick: Le, class: "f-btn-icon f-bare", style: "pointer-events: auto;" }, [s("span", { class: nn.value }, null)]), x.value && s("li", { class: "f-btn-icon f-bare", onClick: (E) => c(E, !1), style: "pointer-events: auto;" }, [s("span", { class: "f-icon modal_close" }, null)])]); } const dn = (E) => { E.preventDefault(); const H = E.currentTarget, Y = E.deltaY * 0.5; H.scrollLeft += Y; }; function fn() { return s("div", { class: "modal-footer", style: on.value }, [F.value && s("div", { class: "buttons", onWheel: dn }, [F.value.map((E) => { var X; const H = m(E.disabled), Y = E.class || ((X = E.appearance) == null ? void 0 : X.class); return s("button", { name: E.name, style: E.styles, type: "button", disabled: H.value, class: Y + (E.iconClass ? " btn-icontext" : "") + (E.visible === !1 ? "d-none" : ""), onClick: (re) => { sn(E, re); } }, [!!E.iconClass && s("i", { class: E.iconClass }, null), E.text]); })])]); } function ot(E) { f.value && Le(); } function mn() { return s(le, null, [M.value && s("div", { class: "modal-header", style: "position: absolute;background: transparent;height: 45px;width: 100%;", onDblclick: (E) => ot() }, null), s("div", { ref: R, class: "modal-header", style: tn.value, onDblclick: (E) => ot() }, [t.slots.headerTemplate ? t.slots.headerTemplate() : s("div", { class: "modal-title" }, [N.value && s("span", { class: p.value, style: "margin-right: 8px" }, null), s("span", { class: "modal-title-label" }, [u.value])]), s("div", { class: "actions" }, [cn()])])]); } function yn() { return t.slots.footerTemplate ? t.slots.footerTemplate() : j.value && fn(); } function pn(E) { if (E.stopPropagation(), e.allowClickMaskToClose) { if (E.target !== S.value) return; c(E, !1); } } function vn() { var E, H; return s("div", { id: o.value, class: Kt.value, style: Zt.value, ref: P }, [e.showFloatingClose && un(), s("div", { class: en.value }, [d.value && mn(), s("div", { class: an.value }, [(H = (E = t.slots).default) == null ? void 0 : H.call(E), C.value === "iframe" && s("iframe", { title: o.value, class: "f-utils-fill", width: "100%", frameborder: "0", src: k.value }, null)]), yn()]), !v.value && P.value && !M.value && I(P.value)]); } function hn(E) { return E || "body"; } return wn(() => { fe.value && (lt.value = st() || 1050); }), () => s(vt, { to: hn(e.host) }, { default: () => [fe.value && s(ht, { name: "fade", appear: !0 }, { default: () => [s("div", { ref: S, class: je.value, style: Qt.value, onClick: pn }, [vn()])] })] }); } }); function Ft(e) { if (e.content && e.content.render) return e.content.render; if (e.render && typeof e.render == "function") return e.render; } function sa(e) { const t = document.createElement("div"); t.style.display = "contents"; const n = Ge({ setup(a, l) { ke(() => { document.body.removeChild(t); }); const o = m(), i = m(e.class || ""), v = m(!!e.showButtons), d = m(!!e.showHeader), p = m(e.showCloseButton == null ? !0 : e.showCloseButton), x = m(!!e.showFloatingClose), f = m(!0), h = m(e.title || ""), C = e.acceptCallback || (() => { }), k = e.rejectCallback || (() => { }), T = e.closedCallback || ((w) => { }), g = e.resizeHandle || ((w) => { }), u = e.stopMoveHandle || ((w) => { }), y = Ft(e), S = (w) => { f.value = !1, n.unmount(), T(w); }; return K(() => { }), l.expose({ modalRef: o }), () => s(ge, { ref: o, class: i.value, modelValue: f.value, "onUpdate:modelValue": (w) => f.value = w, title: h.value, width: e.width, height: e.height, buttons: e.buttons, "show-header": d.value, "show-buttons": v.value, "show-close-button": p.value, "show-max-button": !1, showFloatingClose: x.value, onAccept: C, onCancel: k, fitContent: e.fitContent == null ? !0 : e.fitContent, onClosed: S, onResize: g, onStopMove: u }, { default: () => [y && y(n)] }); } }); return document.body.appendChild(t), n.use(ee.i18n), n.mount(t), n; } class Tt { // private activeModalInstance = computed(() => { // return this.modalRefs[this.activeModalIndex.value]; // }); constructor(t) { te(this, "appContext", null); te(this, "modalRef", m()); te(this, "activeModalIndex", m(0)); te(this, "modalRefs", {}); te(this, "isUseEscCloseModal", m(!1)); this.app = t, this.appContext = t ? t._context : null; } getCurrentModal() { return this.modalRefs[this.activeModalIndex.value]; } adaptToWindow(t, n) { const { width: a, height: l } = { width: window.innerWidth, height: window.innerHeight }; return a < t && (t = a - 14), l < n && (n = l - 14), { width: t, height: n }; } static show(t) { const n = Object.assign({ title: "", showButtons: !0, showHeader: !0 }, t); return sa(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 = kn(Object.assign({ title: "", showButtons: !0, showHeader: !0, maximized: !1 }, t)), l = m(!0), o = a.value.acceptCallback || (() => { }), i = a.value.rejectCallback || (() => { }), v = a.value.closedCallback || ((F, N) => { }), d = a.value.openedCallback || ((F) => { }), p = a.value.resizeHandle || ((F) => { }), x = t.stopMoveHandle || ((F) => { }); let f; const h = Ft(a.value), C = (F) => { var j; l.value = !1; const N = (j = F == null ? void 0 : F.target) == null ? void 0 : j.classList.contains("modal_close"); v(F, this.isUseEscCloseModal.value ? "esc" : N ? "icon" : "button"); }, k = (F) => { C(F), f && oe(() => { if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], ze(null, n), f = null, this.modalRef.value = null, this.modalRefs) { const N = Object.keys(this.modalRefs).map((j) => Number(j)); N.length > 0 ? this.activeModalIndex.value = Math.max(...N) : this.activeModalIndex.value = 0, this.modalRefs[this.activeModalIndex.value] && (this.modalRef.value = this.modalRefs[this.activeModalIndex.value]); } this.isUseEscCloseModal.value = !1; }); }, T = (F) => { var N; this.isUseEscCloseModal.value = !0, (N = this.getCurrentModal()) == null || N.close(F == null ? void 0 : F.event); }, { width: g, height: u } = a.value, y = this.adaptToWindow(g || 500, u || 320); Object.assign(a.value, y); const S = m(), w = () => s(ge, Se({ ref: S, modelValue: l.value, "onUpdate:modelValue": (F) => l.value = F }, a.value, { isMessager: a.value.class && a.value.class.indexOf("modal-message") > -1, onAccept: o, onCancel: i, onClosed: k, onResize: p, onEsc: T, onStopMove: x, maximized: a.value.maximized }), { default: () => [h && h(this.app)] }); f = ((F) => { const N = Sn(w, F); return N.appContext = this.appContext, ze(N, n), N; })({ ...a.value // 'onUpdate:modelValue': onUpdateModelValue, }), this.activeModalIndex.value++; const c = this.activeModalIndex.value; this.modalRefs[c] = S.value; const b = (F) => { a.value = { ...a.value, ...F }, f && ze(Fn(f, { ...a }), n); }; return oe(() => { this.modalRefs[c] = S.value, this.modalRef.value = S.value, d(new Event("opened")); }), { update: b, destroy: k, modalRef: S, close: () => { var F; (F = S.value) == null || F.close(); }, disableButtons: (F, N = !0) => { var j; (j = S.value) == null || j.disableButtons(F, N); } }; } } const be = Symbol("FModalService"); ge.install = (e) => { e.component(ge.name, ge); const t = new Tt(e); e.provide(be, t), e.provide("FModalService", t); }; function Bt(e, t) { function n() { const a = e.beforeOpen || e.beforeClickButton || null; let l = Promise.resolve(!0); if (a) { const o = a(t.value); if (typeof o > "u") return l; typeof o == "boolean" ? l = Promise.resolve(o) : l = o; } return l; } return { judgeCanOpen: n }; } function ra(e, t, n, a, l) { const o = m(e.buttonBehavior), i = m(e.popupOnInput), v = B(() => ({ "input-group-append": !0, "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable) })), { judgeCanOpen: d } = Bt(e, l), p = B(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable), x = Z(be, null), f = m(); async function h(T) { if (await d() && p.value) { const g = !!t.slots.default; if (o.value === "Modal") { const u = e.modalOptions, y = x == null ? void 0 : x.open({ ...u, render: () => t.slots.default && t.slots.default() }); f.value = y == null ? void 0 : y.modalRef; } o.value === "Overlay" && ta.show({ // host: buttonEditRef.value, host: document.body, backgroundColor: "rgba(0,0,0,.15)", render: () => t.slots.default && t.slots.default() }), g && o.value === "Popup" && a.togglePopup(!0), g && i.value && a.hidePopup(), t.emit("clickButton", { origin: T, value: e.modelValue }); } } function C(T) { t.emit("mouseEnterIcon", T); } function k(T) { t.emit("mouseLeaveIcon", T); } return { buttonGroupClass: v, onClickButton: h, onMouseEnterButton: C, onMouseLeaveButton: k, modalRef: f }; } function ua(e, t, n, a, l, o) { const i = m(!1), v = B(() => e.enableClear && !e.readonly && !e.disable && !xe()), { changeTextBoxValue: d, hasClearClass: p } = o, x = m(!1); function f(g) { i.value = g, p.value = g; } const h = B(() => v.value && !!(l != null && l.value) && x.value); z(l, () => { f(h.value); }); function C(g) { const u = !e.readonly && !e.disable && e.editable, y = !e.editable; g == null || g.stopPropagation(), (u || y) && (d(""), l.value = "", f(!i.value), t.emit("clear")); } function k(g) { if (x.value = !0, !!v.value) { if (!n.value) { f(!1); return; } !e.disable && !e.readonly && f(!0); } } function T(g) { x.value = !1, v.value && f(!1); } return { enableClearButton: v, showClearButton: i, onClearValue: C, onMouseEnterTextBox: k, onMouseLeaveTextBox: T }; } function ca(e, t, n, a, l) { const o = B(() => e.popupOnInput), i = B(() => e.popupOnFocus), { shouldPopupContent: v, closeAllPopover: d } = l, p = m(!1), x = B(() => e.enableTitle ? n.value : ""), f = B(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), h = B(() => e.readonly || !e.editable || xe()), C = m(!1), k = B(() => !e.disable && C.value), T = B(() => ({ "text-left": e.textAlign === "left", "text-center": e.textAlign === "center", "text-right": e.textAlign === "right", "form-control": !0, "f-utils-fill": !0 })), g = B(() => ({ "input-group": !0, "f-state-disabled": e.disable, "f-state-editable": e.editable && !e.disable && !e.readonly, "f-state-readonly": e.readonly, "f-state-focus": k.value, "input-group--has-clear": e.enableClear && p.value })); function u(R, P = !0) { n.value = R, P && (t.emit("change", R), t.emit("update:modelValue", R)); } function y(R) { v.value = !1, u(R, !0); } z( () => e.modelValue, (R) => { n.value = R; } ); function S(R) { C.value = !1, t.emit("blur", R), R.stopPropagation(); } function w(R) { t.emit("click", R), d(), t.slots.default && !e.disable && !e.readonly && e.popupOnClick && l.togglePopup(); } function r(R) { !e.disable && !e.readonly && (C.value = !0, h.value || (t.emit("focus", R), i.value && !v.value && l.popup())); } function c(R) { t.emit("input", R); const P = R.target.value; a.value = P, n.value !== P && u(P, e.updateOn === "change"), o.value && !v.value && l.popup(); } function b(R) { R.target.tagName !== "INPUT" && R.preventDefault(), R.stopPropagation(); } function F(R) { t.emit("keydown", R); } function N(R) { R.key === "Enter" && (o.value || i.value) && l.hidePopup(), t.emit("keyup", R); } function j(R) { const P = R.target.value; R.stopPropagation(), u(P); } return { hasFocusedTextBox: k, isTextBoxReadonly: h, textBoxClass: T, textBoxPlaceholder: f, textBoxTitle: x, inputGroupClass: g, hasClearClass: p, changeTextBoxValue: u, commitValue: y, onBlurTextBox: S, onClickTextBox: w, onFocusTextBox: r, onInput: c, onKeyDownTextBox: F, onKeyUpTextBox: N, onMouseDownTextBox: b, onTextBoxValueChange: j }; } const ue = "FarrisVue_PopoverInstancesKey"; function da(e, t, n, a) { const l = m(), o = m(!1), { judgeCanOpen: i } = Bt(e, a); z(() => l.value, (C, k) => { window[ue] = window[ue] || /* @__PURE__ */ new WeakMap(), C ? window[ue].set(n.value, C) : window[ue].delete(n.value); }); function v() { if (window[ue]) { const C = window[ue]; document.querySelectorAll(".f-button-edit,.v-popover").forEach((k) => { const T = C.get(k); T && k !== n.value && !n.value.closest(".popover-fitcontent") && T.hide(); }); } } function d() { const C = l.value; C && (C.show ? C.show(n.value) : C.open && C.open(n.value)); } async function p(C = !1) { if (!!t.slots.default) { if (!C && !o.value && !await i()) return; o.value = !o.value, o.value && (await oe(), d()); } } async function x(C = !1) { if (!!t.slots.default) { if (!C && !await i()) return; o.value = !0, await oe(), d(); } } function f() { o.value = !1; } function h() { o.value = !0, oe(() => { d(); }); } return { hidePopup: f, showPopup: h, popup: x, shouldPopupContent: o, togglePopup: p, popoverRef: l, closeAllPopover: v }; } function fa(e, t, n) { const a = m(), { isTextBoxReadonly: l, textBoxClass: o, textBoxPlaceholder: i, textBoxTitle: v, onBlurTextBox: d, onClickTextBox: p, onFocusTextBox: x, onInput: f, onKeyDownTextBox: h, onKeyUpTextBox: C, onMouseDownTextBox: k, onTextBoxValueChange: T } = n, g = m(e.id), { uuid: u } = En(), y = B(() => ({ // 'border-top-right-radius': '6px', // 'border-bottom-right-radius': '6px' })); K(() => { var b, F; e.selectOnCreated && ((b = a.value) == null || b.select()), e.focusOnCreated && ((F = a.value) == null || F.focus({ preventScroll: !0 })), g.value || (g.value = "button-edit_" + u(8)), g.value = g.value + "-textbox"; }); const S = m(!1), w = (b) => { b.preventDefault(), S.value = !0; }, r = (b) => { b.preventDefault(), S.value = !1, f(b); }; function c(b) { S.value || f(b); } return () => s("input", { id: e.id ? e.id + "-textbox" : void 0, ref: a, name: "input-group-value", autocomplete: e.autoComplete ? "on" : "off", class: o.value, style: y.value, disabled: e.disable, maxlength: e.maxLength, minlength: e.minLength, placeholder: i.value, readonly: l.value, tabindex: e.tabIndex, title: v.value, type: e.inputType, value: t.value, onBlur: d, onChange: T, onClick: p, onFocus: x, onInput: c, onKeydown: h, onKeyup: C, onMousedown: k, onCompositionend: r, onCompositionstart: w }, null); } function ma(e, t, n) { const a = m(e.separator), l = B(() => e.readonly || e.disable), { changeTextBoxValue: o, onFocusTextBox: i, onBlurTextBox: v, onClickTextBox: d, textBoxPlaceholder: p } = n, x = B(() => t.value ? t.value.split(a.value).map((k) => ({ name: k, selectable: !0 })) : []); function f(k) { o(k.map((T) => T.name).join(a.value), !0); } z(() => e.separator, (k) => { a.value = k; }); const h = m(!e.disable && !e.readonly); z([() => e.disable, () => e.readonly], ([k, T], [g, u]) => { h.value = !k && !T; }); function C(k) { d(k); } return () => s(Ln, { tabindex: e.tabIndex, onFocus: i, onBlur: v, id: `${e.id}-tag-editor`, class: "form-control", placeholder: p.value, data: x.value, showClose: !l.value, showInput: !0, disable: l.value, onChange: f, onClick: C }, null); } function ya(e, t, n, a) { const { buttonGroupClass: l, onClickButton: o, onMouseEnterButton: i, onMouseLeaveButton: v } = n