UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,545 lines 416 kB
var Br = Object.defineProperty; var Pr = (t, n, e) => n in t ? Br(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e; var H = (t, n, e) => Pr(t, typeof n != "symbol" ? n + "" : n, e); import { defineComponent as rt, ref as w, computed as j, createVNode as O, Teleport as Zn, createApp as Tn, onUnmounted as Xt, Fragment as Gt, watch as Me, nextTick as Nt, onBeforeMount as Vr, onMounted as Bt, Transition as eo, shallowRef as Nr, render as pn, h as Rr, cloneVNode as Hr, mergeProps as Rt, inject as xt, withDirectives as to, vShow as jr, onBeforeUnmount as kn, createTextVNode as St, reactive as Mt, resolveDirective as Wr, provide as Lr, triggerRef as $r, isVNode as no, Comment as Ar } from "vue"; import oo from "../tags/index.esm.js"; import Gr from "../popover/index.esm.js"; import { withInstall as Fn, useGuid as qr, resolveField as mt, FormSchemaEntityFieldTypeName as Wn, getCustomClass as hn, useCommonUtils as zr, useDateFormat as Yr, useNumberFormat as Ur, setFieldValue as bn } from "../common/index.esm.js"; import { useResizeObserver as En } from "@vueuse/core"; import "../modal/index.esm.js"; import Xr from "../transfer/index.esm.js"; import Qr from "../tabs/index.esm.js"; import Kr from "../order/index.esm.js"; import "../condition/index.esm.js"; import { FCheckbox as Jr } from "../checkbox/index.esm.js"; import Zr from "../filter-bar/index.esm.js"; import Ln from "../tooltip/index.esm.js"; import { isUndefined as gt, cloneDeep as Dt, isPlainObject as $n, throttle as ea } from "lodash-es"; import ta from "../pagination/index.esm.js"; import na from "../button/index.esm.js"; import oa from "../search-box/index.esm.js"; import ra, { FDynamicFormGroup as aa, FDynamicFormInput as ia } from "../dynamic-form/index.esm.js"; import { createPropsResolver as la } from "../dynamic-resolver/index.esm.js"; import "../designer-canvas/index.esm.js"; import "../property-panel/index.esm.js"; import sa from "../accordion/index.esm.js"; import ua from "../avatar/index.esm.js"; import ca from "../../designer/button-edit/index.esm.js"; import da from "../button-group/index.esm.js"; import fa from "../calendar/index.esm.js"; import ma from "../capsule/index.esm.js"; import An from "../../designer/checkbox/index.esm.js"; import Gn from "../../designer/checkbox-group/index.esm.js"; import wn from "../combo-list/index.esm.js"; import pa from "../combo-tree/index.esm.js"; import ha from "../component/index.esm.js"; import va from "../color-picker/index.esm.js"; import ga from "../content-container/index.esm.js"; import ya from "../date-picker/index.esm.js"; import ba from "../../designer/data-grid/index.esm.js"; import wa from "../dropdown/index.esm.js"; import Ca from "../events-editor/index.esm.js"; import xa from "../field-selector/index.esm.js"; import _a from "../binding-selector/index.esm.js"; import Sa from "../image-cropper/index.esm.js"; import Ta from "../../designer/input-group/index.esm.js"; import ka from "../layout/index.esm.js"; import Fa from "../list-nav/index.esm.js"; import Ea from "../list-view/index.esm.js"; import Oa from "../lookup/index.esm.js"; import Ma from "../mapping-editor/index.esm.js"; import Ia from "../nav/index.esm.js"; import Da from "../number-range/index.esm.js"; import Ba from "../number-spinner/index.esm.js"; import Pa from "../page-header/index.esm.js"; import Va from "../page-footer/index.esm.js"; import Na from "../progress/index.esm.js"; import Ra from "../query-solution/index.esm.js"; import Ha from "../../designer/radio-group/index.esm.js"; import ja from "../rate/index.esm.js"; import Wa from "../response-toolbar/index.esm.js"; import La from "../response-layout/index.esm.js"; import $a from "../response-layout-editor/index.esm.js"; import Aa from "../section/index.esm.js"; import Ga from "../smoke-detector/index.esm.js"; import qa from "../splitter/index.esm.js"; import za from "../step/index.esm.js"; import Ya from "../switch/index.esm.js"; import Ua from "../text/index.esm.js"; import Xa from "../time-picker/index.esm.js"; import Qa from "../tree-view/index.esm.js"; import Ka from "../uploader/index.esm.js"; import Ja from "../verify-detail/index.esm.js"; import Za from "../video/index.esm.js"; import ei from "../textarea/index.esm.js"; import ti from "../schema-selector/index.esm.js"; import ni from "../tree-grid/index.esm.js"; import oi from "../event-parameter/index.esm.js"; import ri from "../filter-condition-editor/index.esm.js"; import ai from "../fieldset/index.esm.js"; import ii from "../sort-condition-editor/index.esm.js"; import li from "../menu-lookup/index.esm.js"; import si from "../drawer/index.esm.js"; import ui from "../json-editor/index.esm.js"; import ci from "../property-editor/index.esm.js"; import di from "../expression-editor/index.esm.js"; import fi from "../code-editor/index.esm.js"; import mi from "../html-template/index.esm.js"; import "../external-container/index.esm.js"; import { useIdentify as ro, useGroupData as ao, useFilter as io, useHierarchy as lo, useLoading as so, useDataView as uo, useSelection as co, useSelectHierarchyItem as pi, useDataViewContainerStyle as fo, useCommandColumn as mo, useColumn as po, useSort as ho, useGroupColumn as vo, useRow as go, useEdit as yo, useVisualDataBound as bo, useVisualDataCell as wo, useVisualDataRow as Co, useVisualData as xo, useCellPosition as _o, useSidebar as So, useVirtualScroll as To, useFitColumn as ko, useFilterHistory as Fo, useColumnFilter as Eo, useDragColumn as Oo, getColumnHeader as Mo, getSidebar as Io, getDisableMask as Do, getHorizontalScrollbar as Bo, getVerticalScrollbar as Po, getEmpty as Vo, usePagination as hi, useVisualGroupRow as vi, useVisualSummaryRow as gi, useCellContentStyle as yi, getPagination as bi, getSummary as wi, getFilterPanel as Ci, getGroupPanel as xi, useNavigation as _i } from "../data-view/index.esm.js"; import "../notify/index.esm.js"; const Si = { /** * 组件标识 */ id: String, /** * 扩展按钮显示内容,这是一段现在扩展按钮中的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 }, /** * 鼠标悬停在组件上时显示文本框内容。 */ enableTitle: { type: Boolean, default: !1 }, /** * 输入框类型 */ inputType: { type: String, default: "text" }, /** * 显示输入框提示信息 */ forcePlaceholder: { type: Boolean, default: !1 }, /** * 输入框提示文本 */ placeholder: { type: String, default: "" }, /** * 输入框最小长度 */ minLength: Number, /** * 输入框最大长度 */ maxLength: Number, /** * 输入框Tab键索引 */ tabIndex: Number, popupHost: { type: Object }, popupRightBoundary: { type: Object }, popupOffsetX: { type: Object }, 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" } }, Ti = { popupContentPosition: { type: Object, default: { left: 0, top: 0 } }, host: { type: Object }, backgroundColor: { type: String, default: "" } }, ki = /* @__PURE__ */ rt({ name: "FOverlay", props: Ti, emits: ["click"], setup(t, n) { const e = w(t.popupContentPosition), o = w(t.host), r = j(() => ({ backgroundColor: t.backgroundColor || "", pointerEvents: "auto" })); function a(l) { n.emit("click"), l.preventDefault(), l.stopPropagation(); } j(() => { const l = o.value; if (l) { const s = l.getBoundingClientRect(), { left: u, top: c, height: d } = s; return { left: u, top: c + d }; } return e.value; }); const i = j(() => ({ // position: 'relative', // left: `${position.value.left}px`, // top: `${position.value.top}px` })); return () => O(Zn, { to: "body" }, { default: () => { var l, s; return [O("div", { class: "overlay-container", onClick: (u) => a(u), style: r.value }, [O("div", { style: i.value }, [(s = (l = n.slots).default) == null ? void 0 : s.call(l)])])]; } }); } }); function Fi(t) { if (t.content && t.content.render) return t.content.render; if (t.render && typeof t.render == "function") return t.render; } function Ei(t) { const n = document.createElement("div"); n.style.display = "contents"; let e; const o = t.onClickCallback || (() => { }), r = () => { o(), e && e.unmount(); }; return e = Tn({ setup() { Xt(() => { document.body.removeChild(n); }); const a = Fi(t); return () => O(ki, { "popup-content-position": t.popupPosition, host: t.host, onClick: r, backgroundColor: t.backgroundColor }, { default: () => [a && a()] }); } }), document.body.appendChild(n), e.mount(n), e; } class Oi { static show(n) { return Ei(n); } } const Mi = { /** * 允许点击遮罩关闭对话框 */ allowClickMaskToClose: { type: Boolean, default: !1 }, /** * 关闭对话框前事件, 是个函数,返回true或者false */ beforeClose: { type: Function, default: () => !0 }, /** * 自定义类 */ class: { type: String, default: "" }, /** * 自定义遮罩类 */ maskClass: { type: String, default: "" }, /** * 模态框标题 */ title: { type: String, default: "" }, /** * 模态框宽度 */ width: { type: Number, default: 500 }, /** * 模态框高度 */ height: { type: Number, default: 320 }, /** * 自定义按钮列表 */ buttons: { type: Array, default: [] }, /** * 是否展示模态框 */ modelValue: { type: Boolean, default: !1 }, /** * 是否模态 */ mask: { type: Boolean, default: !0 }, /** * 是否展示头部 */ showHeader: { type: Boolean, default: !0 }, /** * 是否展示默认按钮 */ showButtons: { type: Boolean, default: !0 }, /** * 是否启用自适应样式 */ fitContent: { type: Boolean, default: !0 }, /** * 是否展示右上角按钮 */ showCloseButton: { type: Boolean, default: !0 }, showMaxButton: { type: Boolean, default: !1 }, minHeight: { type: Number }, maxHeight: { type: Number }, minWidth: { type: Number }, maxWidth: { type: Number }, containment: { type: Object, default: null }, resizeable: { type: Boolean, default: !1 }, draggable: { type: Boolean, default: !1 }, dragHandle: { type: Object, default: null }, closedCallback: { type: Function, default: null }, resizeHandle: { type: Function, default: null }, render: { type: Function, default: null }, acceptCallback: { type: Function, default: null }, rejectCallback: { type: Function, default: null }, enableEsc: { type: Boolean, default: !0 }, enableEnter: { type: Boolean, default: !1 }, dialogType: { type: String, default: "" }, src: { type: String, default: "" }, footerHeight: { type: Number, default: 60 } }; class Xe { constructor(n, e) { this.x = n, this.y = e; } static getTransformInfo(n) { const o = window.getComputedStyle(n).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(","); if (o.length >= 6) { const r = parseInt(o[4], 10), a = parseInt(o[5], 10); return { x: r, y: a }; } return { x: 0, y: 0 }; } static fromEvent(n, e = null) { if (this.isMouseEvent(n)) return new Xe(n.clientX, n.clientY); if (e === null || n.changedTouches.length === 1) return new Xe(n.changedTouches[0].clientX, n.changedTouches[0].clientY); for (let o = 0; o < n.changedTouches.length; o++) if (n.changedTouches[o].target === e) return new Xe(n.changedTouches[o].clientX, n.changedTouches[o].clientY); } static isMouseEvent(n) { return Object.prototype.toString.apply(n).indexOf("MouseEvent") === 8; } static isIPosition(n) { return !!n && "x" in n && "y" in n; } static getCurrent(n) { const e = new Xe(0, 0); if (window) { const o = window.getComputedStyle(n); if (o) { const r = parseInt(o.getPropertyValue("left"), 10), a = parseInt(o.getPropertyValue("top"), 10); e.x = isNaN(r) ? 0 : r, e.y = isNaN(a) ? 0 : a; } return e; } return null; } static copy(n) { return new Xe(0, 0).set(n); } get value() { return { x: this.x, y: this.y }; } add(n) { return this.x += n.x, this.y += n.y, this; } subtract(n) { return this.x -= n.x, this.y -= n.y, this; } multiply(n) { this.x *= n, this.y *= n; } divide(n) { this.x /= n, this.y /= n; } reset() { return this.x = 0, this.y = 0, this; } set(n) { return this.x = n.x, this.y = n.y, this; } } class At { constructor(n, e) { this.width = n, this.height = e; } static getCurrent(n) { const e = new At(0, 0); if (window) { const o = window.getComputedStyle(n); return o && (e.width = parseInt(o.getPropertyValue("width"), 10), e.height = parseInt(o.getPropertyValue("height"), 10)), e; } return null; } static copy(n) { return new At(0, 0).set(n); } set(n) { return this.width = n.width, this.height = n.height, this; } } function Ii(t, n) { const e = w(), o = w(), r = w(), a = w(), i = w(), l = w(), s = w(), u = w(), c = w(), d = w(), f = w(), m = w(t.resizeable), v = w(), M = w(t.draggable), x = w(!1); function g() { const P = o.value || document.body, W = window.getComputedStyle(P); if (!W || !e.value) return; const K = Xe.getTransformInfo(e.value), R = {}; s.value && (R.deltaL = e.value.offsetLeft - s.value.x, R.deltaT = e.value.offsetTop - s.value.y); const V = W.getPropertyValue("position"); R.width = P.clientWidth, R.height = P.clientHeight, R.pr = parseInt(W.getPropertyValue("padding-right"), 10), R.pb = parseInt(W.getPropertyValue("padding-bottom"), 10), R.position = W.getPropertyValue("position"), V === "static" && (P.style.position = "relative"), R.translateX = K.x, R.translateY = K.y, d.value = R; } function C(P) { if (e.value) { a.value = At.getCurrent(e.value), i.value = Xe.getCurrent(e.value), l.value = a.value ? At.copy(a.value) : null, s.value = i.value ? Xe.copy(i.value) : null, g(); const W = P.target.getAttribute("type") || ""; u.value = { n: !!W.match(/n/), s: !!W.match(/s/), w: !!W.match(/w/), e: !!W.match(/e/) }; } } function y() { var P, W, K, R; if (e.value) { const V = e.value; u.value && ((u.value.n || u.value.s) && ((P = l.value) != null && P.height) && (V.style.height = l.value.height + "px"), (u.value.w || u.value.e) && ((W = l.value) != null && W.width) && (V.style.width = l.value.width + "px"), s.value && ((K = s.value) != null && K.x && (V.style.left = s.value.x + "px"), (R = s.value) != null && R.y && (V.style.top = s.value.y + "px"))); } } function b() { const P = t.minHeight ? t.minHeight : 1, W = t.minWidth ? t.minWidth : 1; l.value && s.value && u.value && a.value && (l.value.height < P && (l.value.height = P, u.value.n && i.value && (s.value.y = i.value.y + (a.value.height - P))), l.value.width < W && (l.value.width = W, u.value.w && i.value && (s.value.x = i.value.x + (a.value.width - W))), t.maxHeight && l.value.height > t.maxHeight && (l.value.height = t.maxHeight, i.value && u.value.n && (s.value.y = i.value.y + (a.value.height - t.maxHeight))), t.maxWidth && l.value.width > t.maxWidth && (l.value.width = t.maxWidth, u.value.w && i.value && (s.value.x = i.value.x + (a.value.width - t.maxWidth)))); } function k() { if (o.value) { const P = d.value; if (s.value && l.value && u.value && a.value) { const W = P.width - P.pr - P.deltaL - P.translateX - s.value.x, K = P.height - P.pb - P.deltaT - P.translateY - s.value.y; u.value.n && s.value.y + P.translateY < 0 && i.value && (s.value.y = -P.translateY, l.value.height = a.value.height + i.value.y + P.translateY), u.value.w && s.value.x + P.translateX < 0 && i.value && (s.value.x = -P.translateX, l.value.width = a.value.width + i.value.x + P.translateX), l.value.width > W && (l.value.width = W), l.value.height > K && (l.value.height = K); } } } function F(P) { if (!r.value || !a.value || !i.value || !u.value) return; P.subtract(r.value); const W = P.x, K = P.y; u.value.n ? (s.value.y = i.value.y + K, l.value.height = a.value.height - K) : u.value.s && (l.value.height = a.value.height + K), u.value.e ? l.value.width = a.value.width + W : u.value.w && (l.value.width = a.value.width - W, s.value.x = i.value.x + W), k(), b(), y(); } function p(P) { if (!c.value) return; const W = Xe.fromEvent(P); W && F(W); } function S() { if (e.value) { const { width: P, height: W, x: K, y: R } = e.value.getBoundingClientRect(), V = Xe.getTransformInfo(e.value); return { size: { width: P, height: W }, position: { x: K - V.x, y: R - V.y } }; } return null; } function _(P) { if (e.value) { const W = S(); f.value = W; } r.value = void 0, a.value = null, i.value = null, l.value = null, s.value = null, u.value = null, c.value = null, document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", _); } function E() { document.addEventListener("mousemove", p), document.addEventListener("mouseup", _); } function h(P) { P instanceof MouseEvent && P.button === 2 || M.value && (document.body.click(), P.stopPropagation(), P.preventDefault(), r.value = Xe.fromEvent(P), c.value = P.target, C(P), E()); } function B(P) { return e.value = P, m.value && O(Gt, null, [O("div", { class: "fv-resizable-handle fv-resizable-n", type: "n", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-e", type: "e", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-s", type: "s", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-w", type: "w", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-ne", type: "ne", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal", type: "se", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-sw", type: "sw", onMousedown: (W) => h(W) }, null), O("div", { class: "fv-resizable-handle fv-resizable-nw", type: "nw", onMousedown: (W) => h(W) }, null)]); } function N(P = !0) { document.body.click(); const W = o.value || document.body, K = At.getCurrent(W), R = e.value; P && R && (v.value = S(), v.value.transform = R.style.transform), K && R && (l.value = K, l.value.height -= 14, l.value.width -= 14, R.style.height = l.value.height + "px", R.style.width = l.value.width + "px", R.style.left = "7px", R.style.top = "7px", R.style.transform = "", f.value = { size: l.value, position: { x: 0, y: 0 } }, M.value = !1, x.value = !0); } function T() { var P, W; if (document.body.click(), v.value) { const K = { width: v.value.size.width || 0, height: v.value.size.height || 0 }, R = { x: (window.innerWidth - K.width) / 2, y: (window.innerHeight - K.height) / 2 }; (P = l.value) == null || P.set(K), (W = s.value) == null || W.set(R); const V = e.value; V.style.height = K.height + "px", V.style.width = K.width + "px", V.style.left = `${R.x}px`, V.style.top = `${R.y}px`, V.style.transform = "", f.value = { size: K, position: R }, M.value = t.draggable, x.value = !1; } } function I() { if (e.value) { const P = At.getCurrent(e.value); if (P) { const { width: W, height: K } = P; e.value.style.left = `${(window.innerWidth - W) / 2}px`, e.value.style.top = `${(window.innerHeight - K) / 2}px`, e.value.style.transform = ""; } } } function G() { const P = () => { x.value ? N(!1) : I(), document.body.click(); }; return window.addEventListener("resize", P), () => { window.removeEventListener("resize", P); }; } const A = G(); return { renderResizeBar: B, boundingElement: o, resizedEventParam: f, maximize: N, restore: T, allowDrag: M, isMaximized: x, unWindowResizeHandle: A }; } function Di(t, n, e) { const o = w(), r = w(t.draggable), a = w(t.lockAxis), i = w(), l = w(), s = w(!1), u = w(new Xe(0, 0)), c = w(new Xe(0, 0)), d = w(new Xe(0, 0)), f = w(new Xe(0, 0)); Me(() => e.value, (p) => { i.value.style.cursor = p ? "move" : "default"; }); function m(p, S) { if (S.tagName === "BUTTON") return !1; if (S === p) return !0; for (const _ in S.children) if (Object.prototype.hasOwnProperty.call(S.children, _) && m(p, S.children[_])) return !0; return !1; } function v() { var E, h; let p = d.value.x + c.value.x, S = d.value.y + c.value.y; a.value === "x" ? (p = ((E = u.value) == null ? void 0 : E.x) || 0, d.value.x = 0) : a.value === "y" && (S = ((h = u.value) == null ? void 0 : h.y) || 0, d.value.y = 0); const _ = `translate3d(${Math.round(p)}px, ${Math.round(S)}px, 0px)`; o.value && (o.value.style.transform = _), f.value.x = p, f.value.y = S; } function M() { if (!l.value || !o.value) return null; const p = l.value.getBoundingClientRect(), S = o.value.getBoundingClientRect(), _ = { top: p.top < S.top, right: p.right > S.right, bottom: p.bottom > S.bottom, left: p.left < S.left }; return _.top || (d.value.y -= S.top - p.top), _.bottom || (d.value.y -= S.bottom - p.bottom), _.right || (d.value.x -= S.right - p.right), _.left || (d.value.x -= S.left - p.left), v(), _; } function x(p) { p && (u.value && p.subtract(u.value), d.value.set(p), v(), M()); } function g(p) { s.value && r.value && (p.stopPropagation(), p.preventDefault(), x(Xe.fromEvent(p, i.value))); } function C() { var p; s.value && (s.value = !1, c.value.add(d.value), d.value.reset(), (p = o.value) == null || p.classList.remove("ng-dragging"), n.emit("stopMove"), document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", C)); } function y() { !s.value && i.value && (s.value = !0, i.value.classList.add("ng-dragging"), document.addEventListener("mousemove", g), document.addEventListener("mouseup", C)); } function b() { if (o.value) { const p = Xe.getTransformInfo(o.value); c.value.set(p); return; } c.value.reset(); } function k(p) { if (!e.value || p instanceof MouseEvent && p.button === 2) return; const S = p.target || p.srcElement; i.value !== void 0 && S && !m(S, i.value) || r.value !== !1 && (document.body.click(), p.stopPropagation(), p.preventDefault(), u.value = Xe.fromEvent(p, o.value), b(), y()); } function F(p, S, _) { if (r.value && S) { if (p) i.value = p; else if (t.dragHandle) { if (t.dragHandle instanceof HTMLElement) i.value = t.dragHandle; else if (typeof t.dragHandle == "string") { const E = S.querySelector(t.dragHandle); E && (i.value = E); } } o.value = S, l.value = _, i.value ? (i.value.classList.add("ng-draggable"), i.value.addEventListener("mousedown", k)) : r.value = !1; } } return { registerDraggle: F, resetTranslate: b }; } function No(t, n) { if (t) { const e = (o) => { o.key.toLowerCase() === t.toLowerCase() && n({ event: o, key: t }); }; return document.addEventListener("keydown", e), () => { document.removeEventListener("keydown", e); }; } } function Bi(t, n) { const e = w(t.enableEsc); let o = null; return e.value ? (o = No("Escape", (r) => { n.emit("esc", { event: r.event, type: "esc" }); }), { remove: o }) : null; } function Pi(t, n) { const e = w(t.enableEnter); let o = null; return e.value ? (o = No("Enter", (r) => { n.emit("enter", { event: r.event, type: "enter" }); }), { remove: o }) : null; } const en = /* @__PURE__ */ rt({ name: "FModal", props: Mi, emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove"], setup(t, n) { const e = w(t.width || 300), o = w(t.height || 200), r = w(t.modelValue), a = w(""), i = w(t.class), l = w(t.fitContent), s = w(t.showHeader), u = w(""), c = w(t.showCloseButton), d = w(t.showMaxButton), f = w(!1), m = w(t.dialogType), v = w(t.src), M = w(""), x = w(t.showButtons), g = w(t.title), C = w(t.containment || null), y = w(), b = w(!1); function k(D, ie) { Promise.resolve().then(() => { var we; return (we = t.beforeClose) == null ? void 0 : we.call(t); }).then((we) => { we && (r.value = !1, n.emit("update:modelValue", !1), ie != null && n.emit(ie ? "accept" : "cancel"), n.emit("closed", D)); }); } const F = [{ name: "cancel", text: "取消", class: "btn btn-secondary", handle: (D) => { k(D, !1); } }, { name: "accept", text: "确定", class: "btn btn-primary", handle: (D) => { k(D, !0); } }], p = w(t.buttons && t.buttons.length ? t.buttons : F), S = j(() => !!u.value), _ = j(() => !!x.value && !!p.value), E = w(), h = w(), B = w(!1), { renderResizeBar: N, maximize: T, restore: I, boundingElement: G, resizedEventParam: A, allowDrag: P, unWindowResizeHandle: W } = Ii(t), { registerDraggle: K } = Di(t, n, P); function R() { return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open"); } function V() { const D = document.querySelectorAll(".farris-modal").length; (!D || D - 1 <= 0) && document.body.classList.remove("modal-open"), y.value && y.value.classList.remove("show"); } Me(() => t.title, (D, ie) => { D !== ie && (g.value = D); }), Me(() => t.modelValue, (D, ie) => { D !== ie && (r.value = D, r.value && t.draggable && Nt(() => { h.value && !C.value && (C.value = h.value.parentElement, G.value = C.value, K(E.value, h.value, G.value)); }), D || (C.value && (C.value = null), V())), r.value && (b.value = R()); }), Me(() => t.showHeader, (D, ie) => { D !== ie && (s.value = D); }), Me(() => t.showButtons, (D, ie) => { D !== ie && (x.value = D); }), Me(() => A.value, (D, ie) => { const we = D || {}, ce = ie || {}; JSON.stringify(we) !== JSON.stringify(ce) && n.emit("resize", { newSize: D, oldSize: ie, isMaximized: B.value }); }); const Q = j(() => (r.value && document.body.classList.add("modal-open"), r.value)), q = j(() => { var we; const D = { modal: !0, "farris-modal": !0, fade: !0 }; D["f-modal-fitContent"] = !!l.value, D.show = !!Q.value; const ie = (we = t.maskClass) == null ? void 0 : we.split(" "); return ie == null || ie.reduce((ce, Ee) => (ce[Ee] = !0, ce), D), D; }), L = j(() => { var we; const D = { "modal-dialog": !0 }, ie = (we = i.value) == null ? void 0 : we.split(" "); return ie == null || ie.reduce((ce, Ee) => (ce[Ee] = !0, ce), D), D; }), U = j(() => { const D = { position: "absolute", top: `${(window.innerHeight - o.value) / 2}px`, left: `${(window.innerWidth - e.value) / 2}px`, width: `${e.value}px`, height: l.value ? "auto" : `${o.value}px` }; return t.mask || (D.pointerEvents = "auto"), D; }), J = j(() => { const D = { display: "block" }; return t.mask || (D.pointerEvents = "none", D.backgroundColor = "transparent"), b.value && (D.backgroundColor = "transparent"), D; }), oe = j(() => ({ "modal-content": !0, "modal-content-has-header": s.value })), Z = j(() => { const D = { display: s.value ? "" : "none" }; return D["pointer-events"] = P.value ? "auto" : "none", D; }), me = j(() => ({ "f-icon": !0, modal_maximize: !0, modalrevert: B.value })), be = j(() => ({ "modal-body": !0, "f-utils-flex-column": m.value === "iframe", "f-utils-fill": !0 })); function Se() { return { height: `${t.footerHeight || 60}px` }; } const Ve = j(() => { const D = { textAlgin: M.value }, ie = Se(); return Object.assign(D, ie); }); function Re(D) { if (D.stopPropagation(), B.value) { B.value = !1, I(); return; } T(), B.value = !0; } async function Y(D, ie) { D.handle && await D.handle(ie, D) && n.emit("closed", ie); } function le(D) { D.width && (e.value = D.width), D.height && (o.value = D.height), D.buttons && (p.value = D.buttons), D.title && (g.value = D.title); } let z = null, te = null; Vr(() => { b.value = R(); }), Bt(() => { h.value && !C.value && (C.value = h.value.parentElement, G.value = C.value, K(E.value, h.value, G.value)), Q.value && document.body.classList.add("modal-open"), z = Bi(t, n), te = Pi(t, n); }), Xt(() => { W && W(), z && z.remove(), te && te.remove(); }), n.expose({ modalElementRef: h, updateModalOptions: le, close: k, maxDialog: Re, isMaximized: B }); function ye() { return O("ul", null, [f.value && O("li", { class: "f-btn-icon f-bare" }, [O("span", { class: "f-icon modal_minimize" }, null)]), d.value && O("li", { onClick: Re, class: "f-btn-icon f-bare", style: "pointer-events: auto;" }, [O("span", { class: me.value }, null)]), c.value && O("li", { class: "f-btn-icon f-bare", onClick: (D) => k(D, !1), style: "pointer-events: auto;" }, [O("span", { class: "f-icon modal_close" }, null)])]); } function Fe() { return O("div", { class: "modal-footer", style: Ve.value }, [p.value && p.value.map((D) => { const ie = w(D.disabled); return O("button", { name: D.name, type: "button", disabled: ie.value, class: D.class + (D.iconClass ? " btn-icontext" : ""), onClick: (we) => { Y(D, we); } }, [!!D.iconClass && O("i", { class: D.iconClass }, null), D.text]); })]); } function De() { return O("div", { ref: E, class: "modal-header", style: Z.value }, [n.slots.headerTemplate ? n.slots.headerTemplate() : O("div", { class: "modal-title" }, [S.value && O("span", { class: u.value, style: "margin-right: 8px" }, null), O("span", { class: "modal-title-label" }, [g.value])]), O("div", { class: "actions" }, [ye()])]); } function Ke() { return n.slots.footerTemplate ? n.slots.footerTemplate() : _.value && Fe(); } function at(D) { if (D.stopPropagation(), t.allowClickMaskToClose) { if (D.target !== y.value) return; k(D, !1); } } function it() { var D, ie; return O("div", { id: a.value, class: L.value, style: U.value, ref: h }, [O("div", { class: oe.value }, [s.value && De(), O("div", { class: be.value }, [(ie = (D = n.slots).default) == null ? void 0 : ie.call(D), m.value === "iframe" && O("iframe", { title: a.value, class: "f-utils-fill", width: "100%", frameborder: "0", src: v.value }, null)]), Ke()]), !l.value && h.value && !B.value && N(h.value)]); } return () => O(Zn, { to: "body" }, { default: () => [Q.value && O(eo, { name: "fade", appear: !0 }, { default: () => [O("div", { ref: y, class: q.value, style: J.value, onClick: at }, [it()])] })] }); } }); function Ro(t) { if (t.content && t.content.render) return t.content.render; if (t.render && typeof t.render == "function") return t.render; } function Vi(t) { const n = document.createElement("div"); n.style.display = "contents"; const e = Tn({ setup(o, r) { Xt(() => { document.body.removeChild(n); }); const a = w(), i = w(t.class || ""), l = w(!!t.showButtons), s = w(!!t.showHeader), u = w(t.showCloseButton == null ? !0 : t.showCloseButton), c = w(!0), d = w(t.title || ""), f = t.acceptCallback || (() => { }), m = t.rejectCallback || (() => { }), v = t.closedCallback || ((y) => { }), M = t.resizeHandle || ((y) => { }), x = t.stopMoveHandle || ((y) => { }), g = Ro(t), C = (y) => { c.value = !1, e.unmount(), v(y); }; return Bt(() => { }), r.expose({ modalRef: a }), () => O(en, { ref: a, class: i.value, modelValue: c.value, "onUpdate:modelValue": (y) => c.value = y, title: d.value, width: t.width, height: t.height, buttons: t.buttons, "show-header": s.value, "show-buttons": l.value, "show-close-button": u.value, "show-max-button": !1, onAccept: f, onCancel: m, fitContent: t.fitContent == null ? !0 : t.fitContent, onClosed: C, onResize: M, onStopMove: x }, { default: () => [g && g(e)] }); } }); return document.body.appendChild(n), e.mount(n), e; } class Ho { constructor(n) { H(this, "appContext", null); H(this, "modalRef", w()); H(this, "activeModalIndex", w(0)); H(this, "modalRefs", {}); H(this, "isUseEscCloseModal", w(!1)); H(this, "activeModalInstance", j(() => this.modalRefs[this.activeModalIndex.value])); this.app = n, this.appContext = n ? n._context : null; } getCurrentModal() { return this.activeModalInstance.value; } adaptToWindow(n, e) { const { width: o, height: r } = { width: window.innerWidth, height: window.innerHeight }; return o < n && (n = o - 14), r < e && (e = r - 14), { width: n, height: e }; } static show(n) { const e = Object.assign({ title: "", showButtons: !0, showHeader: !0 }, n); return Vi(e); } close(n) { var e, o; n ? (o = n.value) == null || o.close() : (e = this.getCurrentModal()) == null || e.close(); } open(n) { const e = document.createDocumentFragment(); n.showMaxButton && n.fitContent && (n.showMaxButton = !1); const o = Nr(Object.assign({ title: "", showButtons: !0, showHeader: !0 }, n)), r = w(!0), a = o.value.acceptCallback || (() => { }), i = o.value.rejectCallback || (() => { }), l = o.value.closedCallback || ((k, F) => { }), s = o.value.resizeHandle || ((k) => { }), u = n.stopMoveHandle || ((k) => { }); let c; const d = Ro(o.value), f = (k) => { var p; r.value = !1; const F = (p = k == null ? void 0 : k.target) == null ? void 0 : p.classList.contains("modal_close"); l(k, this.isUseEscCloseModal.value ? "esc" : F ? "icon" : "button"); }, m = (k) => { f(k), c && Nt(() => { if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], pn(null, e), c = null, this.modalRef.value = null, this.modalRefs) { const F = Object.keys(this.modalRefs).map((p) => Number(p)); F.length > 0 ? this.activeModalIndex.value = Math.max(...F) : this.activeModalIndex.value = 0; } this.isUseEscCloseModal.value = !1; }); }, v = (k) => { var F; this.isUseEscCloseModal.value = !0, this.activeModalInstance && ((F = this.activeModalInstance.value) == null || F.close(k == null ? void 0 : k.event)); }, { width: M, height: x } = o.value, g = this.adaptToWindow(M || 500, x || 320); Object.assign(o.value, g); const C = () => O(en, Rt({ ref: this.modalRef, modelValue: r.value, "onUpdate:modelValue": (k) => r.value = k }, o.value, { onAccept: a, onCancel: i, onClosed: m, onResize: s, onEsc: v, onStopMove: u }), { default: () => [d && d(this.app)] }); return c = ((k) => { const F = Rr(C, k); return F.appContext = this.appContext, pn(F, e), F; })({ ...o.value // 'onUpdate:modelValue': onUpdateModelValue, }), this.activeModalIndex.value++, this.modalRefs[this.activeModalIndex.value] = this.modalRef.value, { update: (k) => { o.value = { ...o.value, ...k }, c && pn(Hr(c, { ...o }), e); }, destroy: m, modalRef: this.activeModalInstance, close: this.close }; } } const jo = Symbol("FModalService"); en.install = (t) => { t.component(en.name, en); const n = new Ho(t); t.provide(jo, n), t.provide("FModalService", n); }; function Wo(t, n) { function e() { const o = t.beforeOpen || t.beforeClickButton || null; let r = Promise.resolve(!0); if (o) { const a = o(n.value); if (typeof a > "u") return r; typeof a == "boolean" ? r = Promise.resolve(a) : r = a; } return r; } return { judgeCanOpen: e }; } function Ni(t, n, e, o, r) { const a = w(t.buttonBehavior), i = w(t.popupOnInput), l = j(() => ({ "input-group-append": !0, "append-force-show": t.showButtonWhenDisabled && (t.readonly || t.disable) })), { judgeCanOpen: s } = Wo(t, r), u = j(() => t.showButtonWhenDisabled || (!t.editable || !t.readonly) && !t.disable), c = xt(jo, null), d = w(); async function f(M) { if (await s() && u.value) { const x = !!n.slots.default; if (a.value === "Modal") { const g = t.modalOptions, C = c == null ? void 0 : c.open({ ...g, render: () => n.slots.default && n.slots.default() }); d.value = C == null ? void 0 : C.modalRef; } a.value === "Overlay" && Oi.show({ // host: buttonEditRef.value, host: document.body, backgroundColor: "rgba(0,0,0,.15)", render: () => n.slots.default && n.slots.default() }), x && a.value === "Popup" && o.togglePopup(!0), x && i.value && o.hidePopup(), n.emit("clickButton", { origin: M, value: t.modelValue }); } } function m(M) { n.emit("mouseEnterIcon", M); } function v(M) { n.emit("mouseLeaveIcon", M); } return { buttonGroupClass: l, onClickButton: f, onMouseEnterButton: m, onMouseLeaveButton: v, modalRef: d }; } function Ri(t, n, e, o, r, a) { const i = w(!1), l = j(() => t.enableClear && !t.readonly && !t.disable), { changeTextBoxValue: s, hasClearClass: u } = a; function c(v) { i.value = v, u.value = v; } Me(r, () => { c(!!r.value); }); function d(v) { const M = !t.readonly && !t.disable && t.editable, x = !t.editable; v.stopPropagation(), (M || x) && (s(""), c(!i.value), n.emit("clear")); } function f(v) { if (l.value) { if (!e.value) { c(!1); return; } !t.disable && !t.readonly && c(!0); } } function m(v) { l.value && c(!1); } return { enableClearButton: l, showClearButton: i, onClearValue: d, onMouseEnterTextBox: f, onMouseLeaveTextBox: m }; } function Hi(t, n, e, o, r) { const a = j(() => t.popupOnInput), i = j(() => t.popupOnFocus), { shouldPopupContent: l, closeAllPopover: s } = r, u = w(!1), c = j(() => t.enableTitle ? e.value : ""), d = j(() => (t.disable || t.readonly) && !t.forcePlaceholder ? "" : t.placeholder), f = j(() => t.readonly || !t.editable), m = w(!1), v = j(() => !t.disable && m.value), M = j(() => ({ "text-left": t.textAlign === "left", "text-center": t.textAlign === "center", "text-right": t.textAlign === "right", "form-control": !0, "f-utils-fill": !0 })), x = j(() => ({ "input-group": !0, "f-state-disabled": t.disable, "f-state-editable": t.editable && !t.disable && !t.readonly, "f-state-readonly": t.readonly && !t.disable, "f-state-focus": v.value, "input-group--has-clear": t.enableClear && u.value })); function g(h, B = !0) { e.value = h, B && (n.emit("change", h), n.emit("update:modelValue", h)); } function C(h) { l.value = !1, g(h, !0); } Me( () => t.modelValue, (h) => { e.value = h; } ); function y(h) { m.value = !1, n.emit("blur", h), h.stopPropagation(); } function b(h) { n.emit("click", h), s(), n.slots.default && !t.disable && !t.readonly && t.popupOnClick && r.togglePopup(); } function k(h) { t.disable || (m.value = !0, f.value || (n.emit("focus", h), i.value && !l.value && r.popup())); } function F(h) { n.emit("input", h.target.value); const B = h.target.value; o.value = B, e.value !== B && g(B, t.updateOn === "change"), a.value && !l.value && r.popup(); } function p(h) { h.target.tagName !== "INPUT" && h.preventDefault(), h.stopPropagation(); } function S(h) { n.emit("keydown", h); } function _(h) { h.key === "Enter" && (a.value || i.value) && r.hidePopup(), n.emit("keyup", h); } function E(h) { const B = h.target.value; h.stopPropagation(), g(B); } return { hasFocusedTextBox: v, isTextBoxReadonly: f, textBoxClass: M, textBoxPlaceholder: d, textBoxTitle: c, inputGroupClass: x, hasClearClass: u, changeTextBoxValue: g, commitValue: C, onBlurTextBox: y, onClickTextBox: b, onFocusTextBox: k, onInput: F, onKeyDownTextBox: S, onKeyUpTextBox: _, onMouseDownTextBox: p, onTextBoxValueChange: E }; } const Lt = "FarrisVue_PopoverInstancesKey"; function ji(t, n, e, o) { const r = w(), a = w(!1), { judgeCanOpen: i } = Wo(t, o); Me(() => r.value, (m, v) => { window[Lt] = window[Lt] || /* @__PURE__ */ new WeakMap(), m ? window[Lt].set(e.value, m) : window[Lt].delete(e.value); }); function l() { if (window[Lt]) { const m = window[Lt]; document.querySelectorAll(".f-button-edit,.v-popover").forEach((v) => { m.get(v) && v !== e.value && m.get(v).hide(); }); } } function s() { const m = r.value; m && m.show(e.value); } async function u(m = !1) { if (!!n.slots.default) { if (!m && !a.value && !await i()) return; a.value = !a.value, await Nt(), s(); } } async function c(m = !1) { if (!!n.slots.default) { if (!m && !await i()) return; a.value = !0, await Nt(), s(); } } function d() { a.value = !1; } function f() { a.value = !0, Nt(() => { s(); }); } return { hidePopup: d, showPopup: f, popup: c, shouldPopupContent: a, togglePopup: u, popoverRef: r, closeAllPopover: l }; } function Wi(t, n, e) { const o = w(), { isTextBoxReadonly: r, textBoxClass: a, textBoxPlaceholder: i, textBoxTitle: l, onBlurTextBox: s, onClickTextBox: u, onFocusTextBox: c, onInput: d, onKeyDownTextBox: f, onKeyUpTextBox: m, onMouseDownTextBox: v, onTextBoxValueChange: M } = e; return Bt(() => { var x, g; t.selectOnCreated && ((x = o.value) == null || x.select()), t.focusOnCreated && ((g = o.value) == null || g.focus({ preventScroll: !0 })); }), () => O("input", { ref: o, name: "input-group-value", autocomplete: t.autoComplete ? "on" : "off", class: a.value, disabled: t.disable, maxlength: t.maxLength, minlength: t.minLength, placeholder: i.value, readonly: r.value, tabindex: t.tabIndex, title: l.value, type: t.inputType, value: n.value, onBlur: s, onChange: M, onClick: u, onFocus: c, onInput: d, onKeydown: f, onKeyup: m, onMousedown: v }, null); } function Li(t, n, e) { const o = w(t.separator), { changeTextBoxValue: r } = e, a = j(() => t.readonly || t.disable), i = j(() => n.value ? n.value.split(o.value).map((s) => ({ name: s, selectable: !0 })) : []); function l(s) { r(s.map((u) => u.name).join(o.value), !0); } return () => O(oo, { id: `${t.id}-tag-editor`, class: "form-control", data: i.value, showClose: !a.value, disable: a.value, showInput: !0, onChange: l }, null); } function $i(t, n, e, o) { const { buttonGroupClass: r, onClickButton: a, onMouseEnterButton: i, onMouseLeaveButton: l } = e, { enableClearButton: s, showClearButton: u, onClearValue: c } = o, d = w(); return { renderButtonGroup: () => O("div", { id: `${t.id}-button-group`, class: r.value }, [s.value && to(O("span", { class: "input-group-text input-group-clear", onClick: c }, [O("i", { class: "f-icon modal_close" }, null)]), [[jr, u.value]]), n.slots.buttonContent ? O("span", { class: "input-group-text input-group-append-button", onClick: a, onMouseenter: i, onMouseleave: l }, [n.slots.buttonContent()]) : t.buttonContent ? O("span", { class: "input-group-text input-group-append-button", innerHTML: t.buttonContent, ref: d, onClick: a, onMouseenter: i, onMouseleave: l }, null) : null]), buttonHandleElement: d }; } function Ai(t, n, e) { const o = w(t.popupMinWidth), { hidePopup: r, popoverRef: a } = e; return () => O(Gr, { id: `${t.id}-popover`, ref: a, placement: t.placement, host: t.popupHost, "keep-width-with-reference": t.keepWidthWithReference, fitContent: !0, "right-boundary": t.popupRightBoundary, minWidth: o.value, class: t.popupClass, offsetX: t.popupOffsetX, onHidden: r }, { default: () => { var i, l; return [(l = (i = n.slots).default) == null ? void 0 : l.call(i)]; } }); } const Lo = /* @__PURE__ */ rt({ name: "FButtonEdit", props: Si, emits: ["updateExtendInfo", "clear", "change", "click", "clickButton", "blur", "focus", "mouseEnterIcon", "mouseLeaveIcon", "keyup", "keydown", "inputClick", "input", "update:modelValue"], setup(t, n) { const e = w(), o = w(t.customClass), r = w(t.modelValue), a = ji(t, n, e, r), { shouldPopupContent: i, hidePopup: l, showPopup: s, togglePopup: u } = a, c = Ni(t, n, e, a, r), d = w(""), f = Hi(t, n, r, d, a), { hasFocusedTextBox: m, commitValue: v, inputGroupClass: M } = f, x = Ri(t, n, r, m, d, f), { onMouseEnterTextBox: g, onMouseLeaveTextBox: C } = x, y = j(() => { const E = { "f-button-edit": !0, "f-cmp-inputgroup": !0, "f-button-edit-nowrap": !t.wrapText }; return o.value && o.value.split(" ").reduce((h, B) => (h[B] = !0, h), E), E; }); function b() { return t.multiSelect && t.inputType === "tag" ? Li(t, r, f) : Wi(t, r, f); } let k = b(); Me([() => t.multiSelect, () => t.inputType], () => { k = b(); }); const { renderButtonGroup: F, buttonHandleElement: p } = $i(t, n, c, x), S = Ai(t, n, a), _ = { commitValue: v, elementRef: e, hidePopup: l, showPopup: s, popoverRef: a.popoverRef, shouldPopupContent: i, togglePopup: u, openDialog: () => { p.value && t.buttonBehavior === "Modal" && p.value.click(); }, getModal: () => { var E; return t.buttonBehavior === "Modal" ? (E = c.modalRef.value) == null ? void 0 : E.value : null; } }; return Bt(() => { e.value.componentInstance = _, window.onresize = () => { document.body.click(); }; }), kn(() => { var E; window.onresize = null,