UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,468 lines 174 kB
var Cn = Object.defineProperty; var xn = (t, e, n) => e in t ? Cn(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n; var Z = (t, e, n) => xn(t, typeof e != "symbol" ? e + "" : e, n); import { ref as w, createVNode as x, Fragment as rt, watch as xe, defineComponent as Ge, computed as A, nextTick as It, onBeforeMount as Sn, onMounted as at, onUnmounted as mt, Teleport as Tn, Transition as qt, shallowRef as En, createApp as Wt, render as Bt, h as Mn, cloneVNode as kn, mergeProps as Pt, reactive as Ve, createTextVNode as Fn, inject as Bn } from "vue"; import { resolveAppearance as On, createPropsResolver as Gt, getSchemaByTypeForDesigner as Rn } from "../dynamic-resolver/index.esm.js"; import { useI18n as Nt } from "vue-i18n"; import { LocaleService as vt } from "../locale/index.esm.js"; import { cloneDeep as ft, isPlainObject as Lt, isUndefined as je } from "lodash-es"; import "../accordion/index.esm.js"; import "../avatar/index.esm.js"; import "../../designer/button-edit/index.esm.js"; import "../button-group/index.esm.js"; import "../calendar/index.esm.js"; import "../capsule/index.esm.js"; import "../../designer/checkbox/index.esm.js"; import "../../designer/checkbox-group/index.esm.js"; import "../combo-list/index.esm.js"; import "../combo-tree/index.esm.js"; import "../component/index.esm.js"; import "../color-picker/index.esm.js"; import "../content-container/index.esm.js"; import "../date-picker/index.esm.js"; import "../../designer/data-grid/index.esm.js"; import "../dropdown/index.esm.js"; import "../dynamic-form/index.esm.js"; import "../events-editor/index.esm.js"; import "../filter-bar/index.esm.js"; import "../field-selector/index.esm.js"; import "../binding-selector/index.esm.js"; import "../image-cropper/index.esm.js"; import "../../designer/input-group/index.esm.js"; import "../layout/index.esm.js"; import "../list-nav/index.esm.js"; import "../../designer/list-view/index.esm.js"; import "../lookup/index.esm.js"; import "../mapping-editor/index.esm.js"; import "../nav/index.esm.js"; import "../number-range/index.esm.js"; import "../number-spinner/index.esm.js"; import "../order/index.esm.js"; import "../page-header/index.esm.js"; import "../page-footer/index.esm.js"; import "../pagination/index.esm.js"; import "../progress/index.esm.js"; import "../query-solution/index.esm.js"; import "../../designer/radio-group/index.esm.js"; import "../rate/index.esm.js"; import "../response-toolbar/index.esm.js"; import "../response-layout/index.esm.js"; import "../response-layout-editor/index.esm.js"; import "../search-box/index.esm.js"; import "../section/index.esm.js"; import "../smoke-detector/index.esm.js"; import "../splitter/index.esm.js"; import "../step/index.esm.js"; import "../switch/index.esm.js"; import "../tabs/index.esm.js"; import "../tags/index.esm.js"; import "../text/index.esm.js"; import "../time-picker/index.esm.js"; import "../transfer/index.esm.js"; import "../tree-view/index.esm.js"; import "../uploader/index.esm.js"; import "../verify-detail/index.esm.js"; import "../video/index.esm.js"; import "../textarea/index.esm.js"; import "../schema-selector/index.esm.js"; import "../../designer/tree-grid/index.esm.js"; import "../event-parameter/index.esm.js"; import "../filter-condition-editor/index.esm.js"; import "../fieldset/index.esm.js"; import "../sort-condition-editor/index.esm.js"; import "../menu-lookup/index.esm.js"; import "../../designer/drawer/index.esm.js"; import "../json-editor/index.esm.js"; import "../property-editor/index.esm.js"; import "../expression-editor/index.esm.js"; import "../code-editor/index.esm.js"; import "../html-template/index.esm.js"; import "../collection-property-editor/index.esm.js"; import "../modal/index.esm.js"; import "../external-container/index.esm.js"; import "../language-textbox/index.esm.js"; import "../designer-canvas/index.esm.js"; import { getCustomClass as Ot, withInstall as In, FormSchemaEntityField$Type as At, FormSchemaEntityFieldTypeName as Ut } from "../common/index.esm.js"; import { useResizeObserver as Pn } from "@vueuse/core"; import { getHierarchyRow as Nn, useIdentify as jn, useGroupData as Dn, useFilter as Vn, useHierarchy as $n, useLoading as Hn, useDataView as zn, useSelection as Ln, useSelectHierarchyItem as An, usePagination as Un, useDataViewContainerStyle as _n, useCommandColumn as qn, useSettingColumn as Wn, useColumn as Gn, useSort as Yn, useGroupColumn as Xn, useRow as Jn, useEdit as Qn, useVisualDataBound as Zn, useVisualDataCell as Kn, useVisualDataRow as eo, useVisualData as to, useCellPosition as no, useSidebar as oo, useVirtualScroll as io, useFitColumn as ro, useFilterHistory as ao, useColumnFilter as so, useDragColumn as lo, getColumnHeader as co, getSidebar as uo, getDisableMask as fo, getHorizontalScrollbar as po, getVerticalScrollbar as mo, getEmpty as vo, getPagination as ho, getSummary as go } from "../data-view/index.esm.js"; import "../property-panel/index.esm.js"; import "../notify/index.esm.js"; const yo = "https://json-schema.org/draft/2020-12/schema", bo = "https://farris-design.gitee.io/modal.schema.json", wo = "modal", Co = "弹窗组件", xo = "object", So = { id: { description: "组件唯一标识", type: "string" }, type: { description: "组件类型", type: "string", default: "modal" }, appearance: { description: "组件外观", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, name: { description: "名称", type: "string", default: null }, title: { description: "标题", type: "string" }, width: { description: "窗口宽度", type: "number", default: 900 }, height: { description: "窗口高度", type: "number", default: 600 }, contents: { description: "弹窗子组件集合", type: "array", default: [] }, modelValue: { description: "是否显示", type: "boolean", default: !1 }, showCloseButton: { description: "显示关闭按钮", type: "boolean", default: !0 }, showMaxButton: { description: "显示最大化按钮", type: "boolean", default: !0 }, enableEsc: { description: "允许ESC关闭", type: "boolean", default: !0 }, resizeable: { description: "允许调整窗口尺寸", type: "boolean", default: !0 }, fitContent: { description: "是否自适应", type: "boolean", default: !1 }, showButtons: { description: "是否显示底部按钮", type: "boolean", default: !0 }, mask: { description: "是否模态", type: "boolean", default: !0 }, draggable: { description: "是否允许拖拽调整位置", type: "boolean", default: !0 }, onAccept: { description: "确定事件", type: "object", default: null }, onCancel: { description: "取消事件", type: "object", default: null }, beforeClose: { description: "关闭前回调", type: "object", default: null } }, To = [ "id", "type" ], Eo = { onAccept: "确定事件", onCancel: "取消事件", beforeClose: "关闭前回调" }, Mo = { $schema: yo, $id: bo, title: wo, description: Co, type: xo, properties: So, required: To, events: Eo }, ko = /* @__PURE__ */ new Map([ ["appearance", On] ]); function Fo(t, e, n) { return e; } function Bo() { function t(e, n) { const o = {}; return o.beforeClose = (i) => n.call("beforeClose", [i, e]), o; } return { resolve: t }; } const Yt = { /** * 允许点击遮罩关闭对话框 */ 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 }, host: { type: Object, default: "body" } }, Oo = Gt(Yt, Mo, ko, Fo), Ro = Bo(); class re { constructor(e, n) { this.x = e, this.y = n; } static getTransformInfo(e) { const o = window.getComputedStyle(e).getPropertyValue("transform").replace(/[^-\d,]/g, "").split(","); if (o.length >= 6) { const i = parseInt(o[4], 10), a = parseInt(o[5], 10); return { x: i, y: a }; } return { x: 0, y: 0 }; } static fromEvent(e, n = null) { if (this.isMouseEvent(e)) return new re(e.clientX, e.clientY); if (n === null || e.changedTouches.length === 1) return new re(e.changedTouches[0].clientX, e.changedTouches[0].clientY); for (let o = 0; o < e.changedTouches.length; o++) if (e.changedTouches[o].target === n) return new re(e.changedTouches[o].clientX, e.changedTouches[o].clientY); } static isMouseEvent(e) { return Object.prototype.toString.apply(e).indexOf("MouseEvent") === 8; } static isIPosition(e) { return !!e && "x" in e && "y" in e; } static getCurrent(e) { const n = new re(0, 0); if (window) { const o = window.getComputedStyle(e); if (o) { const i = parseInt(o.getPropertyValue("left"), 10), a = parseInt(o.getPropertyValue("top"), 10); n.x = isNaN(i) ? 0 : i, n.y = isNaN(a) ? 0 : a; } return n; } return null; } static copy(e) { return new re(0, 0).set(e); } get value() { return { x: this.x, y: this.y }; } add(e) { return this.x += e.x, this.y += e.y, this; } subtract(e) { return this.x -= e.x, this.y -= e.y, this; } multiply(e) { this.x *= e, this.y *= e; } divide(e) { this.x /= e, this.y /= e; } reset() { return this.x = 0, this.y = 0, this; } set(e) { return this.x = e.x, this.y = e.y, this; } } class qe { constructor(e, n) { this.width = e, this.height = n; } static getCurrent(e) { const n = new qe(0, 0); if (window) { const o = window.getComputedStyle(e); return o && (n.width = parseInt(o.getPropertyValue("width"), 10), n.height = parseInt(o.getPropertyValue("height"), 10)), n; } return null; } static copy(e) { return new qe(0, 0).set(e); } set(e) { return this.width = e.width, this.height = e.height, this; } } function Io(t, e) { const n = w(), o = w(), i = w(), a = w(), r = w(), c = w(), s = w(), l = w(), f = w(), u = w(), m = w(), d = w(t.resizeable), p = w(), g = w(t.draggable), T = w(!1); function B() { const j = o.value || document.body, R = window.getComputedStyle(j); if (!R || !n.value) return; const G = re.getTransformInfo(n.value), z = {}; s.value && (z.deltaL = n.value.offsetLeft - s.value.x, z.deltaT = n.value.offsetTop - s.value.y); const te = R.getPropertyValue("position"); z.width = j.clientWidth, z.height = j.clientHeight, z.pr = parseInt(R.getPropertyValue("padding-right"), 10), z.pb = parseInt(R.getPropertyValue("padding-bottom"), 10), z.position = R.getPropertyValue("position"), te === "static" && (j.style.position = "relative"), z.translateX = G.x, z.translateY = G.y, u.value = z; } function N(j) { if (n.value) { a.value = qe.getCurrent(n.value), r.value = re.getCurrent(n.value), c.value = a.value ? qe.copy(a.value) : null, s.value = r.value ? re.copy(r.value) : null, B(); const R = j.target.getAttribute("type") || ""; l.value = { n: !!R.match(/n/), s: !!R.match(/s/), w: !!R.match(/w/), e: !!R.match(/e/) }; } } function U() { var j, R, G, z; if (n.value) { const te = n.value; l.value && ((l.value.n || l.value.s) && ((j = c.value) != null && j.height) && (te.style.height = c.value.height + "px"), (l.value.w || l.value.e) && ((R = c.value) != null && R.width) && (te.style.width = c.value.width + "px"), s.value && ((G = s.value) != null && G.x && (te.style.left = s.value.x + "px"), (z = s.value) != null && z.y && (te.style.top = s.value.y + "px"))); } } function S() { const j = t.minHeight ? t.minHeight : 1, R = t.minWidth ? t.minWidth : 1; c.value && s.value && l.value && a.value && (c.value.height < j && (c.value.height = j, l.value.n && r.value && (s.value.y = r.value.y + (a.value.height - j))), c.value.width < R && (c.value.width = R, l.value.w && r.value && (s.value.x = r.value.x + (a.value.width - R))), t.maxHeight && c.value.height > t.maxHeight && (c.value.height = t.maxHeight, r.value && l.value.n && (s.value.y = r.value.y + (a.value.height - t.maxHeight))), t.maxWidth && c.value.width > t.maxWidth && (c.value.width = t.maxWidth, l.value.w && r.value && (s.value.x = r.value.x + (a.value.width - t.maxWidth)))); } function v() { if (o.value) { const j = u.value; if (s.value && c.value && l.value && a.value) { const R = j.width - j.pr - j.deltaL - j.translateX - s.value.x, G = j.height - j.pb - j.deltaT - j.translateY - s.value.y; l.value.n && s.value.y + j.translateY < 0 && r.value && (s.value.y = -j.translateY, c.value.height = a.value.height + r.value.y + j.translateY), l.value.w && s.value.x + j.translateX < 0 && r.value && (s.value.x = -j.translateX, c.value.width = a.value.width + r.value.x + j.translateX), c.value.width > R && (c.value.width = R), c.value.height > G && (c.value.height = G); } } } function h(j) { if (!i.value || !a.value || !r.value || !l.value) return; j.subtract(i.value); const R = j.x, G = j.y; l.value.n ? (s.value.y = r.value.y + G, c.value.height = a.value.height - G) : l.value.s && (c.value.height = a.value.height + G), l.value.e ? c.value.width = a.value.width + R : l.value.w && (c.value.width = a.value.width - R, s.value.x = r.value.x + R), v(), S(), U(); } function M(j) { if (!f.value) return; const R = re.fromEvent(j); R && h(R); } function E() { if (n.value) { const { width: j, height: R, x: G, y: z } = n.value.getBoundingClientRect(), te = re.getTransformInfo(n.value); return { size: { width: j, height: R }, position: { x: G - te.x, y: z - te.y } }; } return null; } function C(j) { if (n.value) { const R = E(); m.value = R; } i.value = void 0, a.value = null, r.value = null, c.value = null, s.value = null, l.value = null, f.value = null, document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", C); } function O() { document.addEventListener("mousemove", M), document.addEventListener("mouseup", C); } function b(j) { j instanceof MouseEvent && j.button === 2 || g.value && (document.body.click(), j.stopPropagation(), j.preventDefault(), i.value = re.fromEvent(j), f.value = j.target, N(j), O()); } function k(j) { return n.value = j, d.value && x(rt, null, [x("div", { class: "fv-resizable-handle fv-resizable-n", type: "n", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-e", type: "e", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-s", type: "s", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-w", type: "w", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-ne", type: "ne", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-se fv-resizable-diagonal", type: "se", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-sw", type: "sw", onMousedown: (R) => b(R) }, null), x("div", { class: "fv-resizable-handle fv-resizable-nw", type: "nw", onMousedown: (R) => b(R) }, null)]); } function I(j = !0) { document.body.click(); const R = o.value || document.body, G = qe.getCurrent(R), z = n.value; j && z && (p.value = E(), p.value.transform = z.style.transform), G && z && (c.value = G, c.value.height -= 14, c.value.width -= 14, z.style.height = c.value.height + "px", z.style.width = c.value.width + "px", z.style.left = "7px", z.style.top = "7px", z.style.transform = "", m.value = { size: c.value, position: { x: 0, y: 0 } }, g.value = !1, T.value = !0); } function P() { var j, R; if (document.body.click(), p.value) { const G = { width: p.value.size.width || 0, height: p.value.size.height || 0 }, z = { x: (window.innerWidth - G.width) / 2, y: (window.innerHeight - G.height) / 2 }; (j = c.value) == null || j.set(G), (R = s.value) == null || R.set(z); const te = n.value; te.style.height = G.height + "px", te.style.width = G.width + "px", te.style.left = `${z.x}px`, te.style.top = `${z.y}px`, te.style.transform = "", m.value = { size: G, position: z }, g.value = t.draggable, T.value = !1; } } function $() { if (n.value) { const j = qe.getCurrent(n.value); if (j) { const { width: R, height: G } = j; n.value.style.left = `${(window.innerWidth - R) / 2}px`, n.value.style.top = `${(window.innerHeight - G) / 2}px`, n.value.style.transform = ""; } } } function W() { const j = () => { T.value ? I(!1) : $(), document.body.click(); }; return window.addEventListener("resize", j), () => { window.removeEventListener("resize", j); }; } const ee = W(); return { renderResizeBar: k, boundingElement: o, resizedEventParam: m, maximize: I, restore: P, allowDrag: g, isMaximized: T, unWindowResizeHandle: ee, moveToCenter: $ }; } function Po(t, e, n) { const o = w(), i = w(t.draggable), a = w(t.lockAxis), r = w(), c = w(), s = w(!1), l = w(new re(0, 0)), f = w(new re(0, 0)), u = w(new re(0, 0)), m = w(new re(0, 0)); xe(() => n.value, (M) => { r.value.style.cursor = M ? "move" : "default"; }); function d(M, E) { if (E.tagName === "BUTTON") return !1; if (E === M) return !0; for (const C in E.children) if (Object.prototype.hasOwnProperty.call(E.children, C) && d(M, E.children[C])) return !0; return !1; } function p() { var O, b; let M = u.value.x + f.value.x, E = u.value.y + f.value.y; a.value === "x" ? (M = ((O = l.value) == null ? void 0 : O.x) || 0, u.value.x = 0) : a.value === "y" && (E = ((b = l.value) == null ? void 0 : b.y) || 0, u.value.y = 0); const C = `translate3d(${Math.round(M)}px, ${Math.round(E)}px, 0px)`; o.value && (o.value.style.transform = C), m.value.x = M, m.value.y = E; } function g() { if (!c.value || !o.value) return null; const M = c.value.getBoundingClientRect(), E = o.value.getBoundingClientRect(), C = { top: M.top < E.top, right: M.right > E.right, bottom: M.bottom > E.bottom, left: M.left < E.left }; return C.top || (u.value.y -= E.top - M.top), C.bottom || (u.value.y -= E.bottom - M.bottom), C.right || (u.value.x -= E.right - M.right), C.left || (u.value.x -= E.left - M.left), p(), C; } function T(M) { M && (l.value && M.subtract(l.value), u.value.set(M), p(), g()); } function B(M) { s.value && i.value && (M.stopPropagation(), M.preventDefault(), T(re.fromEvent(M, r.value))); } function N() { var M; s.value && (s.value = !1, f.value.add(u.value), u.value.reset(), (M = o.value) == null || M.classList.remove("ng-dragging"), e.emit("stopMove"), document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", N)); } function U() { !s.value && r.value && (s.value = !0, r.value.classList.add("ng-dragging"), document.addEventListener("mousemove", B), document.addEventListener("mouseup", N)); } function S() { if (o.value) { const M = re.getTransformInfo(o.value); f.value.set(M); return; } f.value.reset(); } function v(M) { if (!n.value || M instanceof MouseEvent && M.button === 2) return; const E = M.target || M.srcElement; r.value !== void 0 && E && !d(E, r.value) || i.value !== !1 && (document.body.click(), M.stopPropagation(), M.preventDefault(), l.value = re.fromEvent(M, o.value), S(), U()); } function h(M, E, C) { if (i.value && E) { if (M) r.value = M; else if (t.dragHandle) { if (t.dragHandle instanceof HTMLElement) r.value = t.dragHandle; else if (typeof t.dragHandle == "string") { const O = E.querySelector(t.dragHandle); O && (r.value = O); } } o.value = E, c.value = C, r.value ? (r.value.classList.add("ng-draggable"), r.value.addEventListener("mousedown", v)) : i.value = !1; } } return { registerDraggle: h, resetTranslate: S }; } function Xt(t, e) { if (t) { const n = (o) => { o.key.toLowerCase() === t.toLowerCase() && e({ event: o, key: t }); }; return document.addEventListener("keydown", n), () => { document.removeEventListener("keydown", n); }; } } function No(t, e) { const n = w(t.enableEsc); let o = null; return n.value ? (o = Xt("Escape", (i) => { e.emit("esc", { event: i.event, type: "esc" }); }), { remove: o }) : null; } function jo(t, e) { const n = w(t.enableEnter); let o = null; return n.value ? (o = Xt("Enter", (i) => { e.emit("enter", { event: i.event, type: "enter" }); }), { remove: o }) : null; } const We = /* @__PURE__ */ Ge({ name: "FModal", props: Yt, emits: ["update:modelValue", "accept", "cancel", "closed", "resize", "esc", "enter", "stopMove"], setup(t, e) { const n = w(t.width || 300), o = w(t.height || 200), i = w(t.modelValue), a = w(""), r = w(t.class), c = w(t.fitContent), s = w(t.showHeader), l = w(""), f = w(t.showCloseButton), u = w(t.showMaxButton), m = w(!1), d = w(t.dialogType), p = w(t.src), g = w(""), T = w(t.showButtons), B = w(t.title), N = w(t.containment || null), U = w(), { t: S } = Nt(); B.value === "错误提示" && (B.value = S("messageBox.errorTitle")); const v = w(!1); function h(F, J) { const ae = J ? "accept" : "cancel"; Promise.resolve().then(() => { var se; return (se = t.beforeClose) == null ? void 0 : se.call(t, { closeType: ae }); }).then((se) => { se && (i.value = !1, e.emit("update:modelValue", !1), J != null && e.emit(J ? "accept" : "cancel"), e.emit("closed", F)); }); } const M = [{ name: "cancel", text: S("messageBox.cancel") || "取消", class: "btn btn-secondary", handle: (F) => { h(F, !1); } }, { name: "accept", text: S("messageBox.ok") || "确定", class: "btn btn-primary", handle: (F) => { h(F, !0); } }], E = w(t.buttons && t.buttons.length ? t.buttons : M), C = A(() => !!l.value), O = A(() => !!T.value && !!E.value), b = w(), k = w(), I = w(!1), { renderResizeBar: P, maximize: $, restore: W, boundingElement: ee, resizedEventParam: j, allowDrag: R, unWindowResizeHandle: G, moveToCenter: z } = Io(t), { registerDraggle: te } = Po(t, e, R); function ve() { return !!document.querySelectorAll(".farris-modal").length && document.body.classList.contains("modal-open"); } function he() { const F = document.querySelectorAll(".farris-modal").length; (!F || F - 1 <= 0) && document.body.classList.remove("modal-open"), U.value && U.value.classList.remove("show"); } xe(() => t.title, (F, J) => { F !== J && (B.value = F); }), xe(() => t.modelValue, (F, J) => { F !== J && (i.value = F, i.value && t.draggable && It(() => { k.value && !N.value && (N.value = k.value.parentElement, ee.value = N.value, te(b.value, k.value, ee.value), z()); }), F || (N.value && (N.value = null), he())), i.value ? v.value = ve() : (I.value = !1, R.value = t.draggable); }), xe(() => t.showHeader, (F, J) => { F !== J && (s.value = F); }), xe(() => t.showButtons, (F, J) => { F !== J && (T.value = F); }), xe(() => j.value, (F, J) => { const ae = F || {}, se = J || {}; JSON.stringify(ae) !== JSON.stringify(se) && e.emit("resize", { newSize: F, oldSize: J, isMaximized: I.value }); }); const X = A(() => (i.value && document.body.classList.add("modal-open"), i.value)), ie = A(() => { var ae; const F = { modal: !0, "farris-modal": !0, fade: !0 }; F["f-modal-fitContent"] = !!c.value, F.show = !!X.value; const J = (ae = t.maskClass) == null ? void 0 : ae.split(" "); return J == null || J.reduce((se, Ne) => (se[Ne] = !0, se), F), F; }), le = A(() => { var ae; const F = { "modal-dialog": !0 }, J = (ae = r.value) == null ? void 0 : ae.split(" "); return J == null || J.reduce((se, Ne) => (se[Ne] = !0, se), F), F; }), ne = A(() => { const F = { position: "absolute", top: `${(window.innerHeight - o.value) / 2}px`, left: `${(window.innerWidth - n.value) / 2}px`, width: `${n.value}px`, height: c.value ? "auto" : `${o.value}px` }; return t.mask || (F.pointerEvents = "auto"), F; }), _ = A(() => { const F = { display: "block" }; return t.mask || (F.pointerEvents = "none", F.backgroundColor = "transparent"), v.value && (F.backgroundColor = "transparent"), F; }), oe = A(() => ({ "modal-content": !0, "modal-content-has-header": s.value })), $e = A(() => { const F = { display: s.value ? "" : "none" }; return F["pointer-events"] = R.value ? "auto" : "none", F; }), Be = A(() => ({ "f-icon": !0, modal_maximize: !0, modalrevert: I.value })), Se = A(() => ({ "modal-body": !0, "f-utils-flex-column": d.value === "iframe", "f-utils-fill": !0 })); function Ye() { return { height: `${t.footerHeight || 60}px` }; } const He = A(() => { const F = { textAlgin: g.value }, J = Ye(); return Object.assign(F, J); }); function ze(F) { if (F == null || F.stopPropagation(), I.value) { I.value = !1, W(); return; } $(), I.value = !0; } async function ce(F, J) { F.handle && await F.handle(J, F) && e.emit("closed", J); } function Ze(F) { F.width && (n.value = F.width), F.height && (o.value = F.height), F.buttons && (E.value = F.buttons), F.title && (B.value = F.title); } let Te = null, Oe = null; Sn(() => { v.value = ve(); }), at(() => { k.value && !N.value && (N.value = k.value.parentElement, ee.value = N.value, te(b.value, k.value, ee.value)), X.value && document.body.classList.add("modal-open"), Te = No(t, e), Oe = jo(t, e); }), mt(() => { G && G(), Te && Te.remove(), Oe && Oe.remove(); }), e.expose({ modalElementRef: k, updateModalOptions: Ze, close: h, maxDialog: ze, isMaximized: I }); function Re() { return x("ul", null, [m.value && x("li", { class: "f-btn-icon f-bare" }, [x("span", { class: "f-icon modal_minimize" }, null)]), u.value && x("li", { onClick: ze, class: "f-btn-icon f-bare", style: "pointer-events: auto;" }, [x("span", { class: Be.value }, null)]), f.value && x("li", { class: "f-btn-icon f-bare", onClick: (F) => h(F, !1), style: "pointer-events: auto;" }, [x("span", { class: "f-icon modal_close" }, null)])]); } function Ie() { return x("div", { class: "modal-footer", style: He.value }, [E.value && E.value.map((F) => { const J = w(F.disabled); return x("button", { name: F.name, type: "button", disabled: J.value, class: F.class + (F.iconClass ? " btn-icontext" : ""), onClick: (ae) => { ce(F, ae); } }, [!!F.iconClass && x("i", { class: F.iconClass }, null), F.text]); })]); } function Ke() { return x("div", { ref: b, class: "modal-header", style: $e.value }, [e.slots.headerTemplate ? e.slots.headerTemplate() : x("div", { class: "modal-title" }, [C.value && x("span", { class: l.value, style: "margin-right: 8px" }, null), x("span", { class: "modal-title-label" }, [B.value])]), x("div", { class: "actions" }, [Re()])]); } function Le() { return e.slots.footerTemplate ? e.slots.footerTemplate() : O.value && Ie(); } function Fe(F) { if (F.stopPropagation(), t.allowClickMaskToClose) { if (F.target !== U.value) return; h(F, !1); } } function Pe() { var F, J; return x("div", { id: a.value, class: le.value, style: ne.value, ref: k }, [x("div", { class: oe.value }, [s.value && Ke(), x("div", { class: Se.value }, [(J = (F = e.slots).default) == null ? void 0 : J.call(F), d.value === "iframe" && x("iframe", { title: a.value, class: "f-utils-fill", width: "100%", frameborder: "0", src: p.value }, null)]), Le()]), !c.value && k.value && !I.value && P(k.value)]); } function Xe(F) { return F || "body"; } return () => x(Tn, { to: Xe(t.host) }, { default: () => [X.value && x(qt, { name: "fade", appear: !0 }, { default: () => [x("div", { ref: U, class: ie.value, style: _.value, onClick: Fe }, [Pe()])] })] }); } }); function Jt(t) { if (t.content && t.content.render) return t.content.render; if (t.render && typeof t.render == "function") return t.render; } function Do(t) { const e = document.createElement("div"); e.style.display = "contents"; const n = Wt({ setup(o, i) { mt(() => { document.body.removeChild(e); }); const a = w(), r = w(t.class || ""), c = w(!!t.showButtons), s = w(!!t.showHeader), l = w(t.showCloseButton == null ? !0 : t.showCloseButton), f = w(!0), u = w(t.title || ""), m = t.acceptCallback || (() => { }), d = t.rejectCallback || (() => { }), p = t.closedCallback || ((U) => { }), g = t.resizeHandle || ((U) => { }), T = t.stopMoveHandle || ((U) => { }), B = Jt(t), N = (U) => { f.value = !1, n.unmount(), p(U); }; return at(() => { }), i.expose({ modalRef: a }), () => x(We, { ref: a, class: r.value, modelValue: f.value, "onUpdate:modelValue": (U) => f.value = U, title: u.value, width: t.width, height: t.height, buttons: t.buttons, "show-header": s.value, "show-buttons": c.value, "show-close-button": l.value, "show-max-button": !1, onAccept: m, onCancel: d, fitContent: t.fitContent == null ? !0 : t.fitContent, onClosed: N, onResize: g, onStopMove: T }, { default: () => [B && B(n)] }); } }); return document.body.appendChild(e), n.use(vt.i18n), n.mount(e), n; } class Qt { constructor(e) { Z(this, "appContext", null); Z(this, "modalRef", w()); Z(this, "activeModalIndex", w(0)); Z(this, "modalRefs", {}); Z(this, "isUseEscCloseModal", w(!1)); Z(this, "activeModalInstance", A(() => this.modalRefs[this.activeModalIndex.value])); this.app = e, this.appContext = e ? e._context : null; } getCurrentModal() { return this.activeModalInstance.value; } adaptToWindow(e, n) { const { width: o, height: i } = { width: window.innerWidth, height: window.innerHeight }; return o < e && (e = o - 14), i < n && (n = i - 14), { width: e, height: n }; } static show(e) { const n = Object.assign({ title: "", showButtons: !0, showHeader: !0 }, e); return Do(n); } close(e) { var n, o; e ? (o = e.value) == null || o.close() : (n = this.getCurrentModal()) == null || n.close(); } open(e) { const n = document.createDocumentFragment(); e.showMaxButton && e.fitContent && (e.showMaxButton = !1); const o = En(Object.assign({ title: "", showButtons: !0, showHeader: !0 }, e)), i = w(!0), a = o.value.acceptCallback || (() => { }), r = o.value.rejectCallback || (() => { }), c = o.value.closedCallback || ((v, h) => { }), s = o.value.resizeHandle || ((v) => { }), l = e.stopMoveHandle || ((v) => { }); let f; const u = Jt(o.value), m = (v) => { var M; i.value = !1; const h = (M = v == null ? void 0 : v.target) == null ? void 0 : M.classList.contains("modal_close"); c(v, this.isUseEscCloseModal.value ? "esc" : h ? "icon" : "button"); }, d = (v) => { m(v), f && It(() => { if (this.modalRefs[this.activeModalIndex.value] && delete this.modalRefs[this.activeModalIndex.value], Bt(null, n), f = null, this.modalRef.value = null, this.modalRefs) { const h = Object.keys(this.modalRefs).map((M) => Number(M)); h.length > 0 ? this.activeModalIndex.value = Math.max(...h) : this.activeModalIndex.value = 0; } this.isUseEscCloseModal.value = !1; }); }, p = (v) => { var h; this.isUseEscCloseModal.value = !0, this.activeModalInstance && ((h = this.activeModalInstance.value) == null || h.close(v == null ? void 0 : v.event)); }, { width: g, height: T } = o.value, B = this.adaptToWindow(g || 500, T || 320); Object.assign(o.value, B); const N = () => x(We, Pt({ ref: this.modalRef, modelValue: i.value, "onUpdate:modelValue": (v) => i.value = v }, o.value, { onAccept: a, onCancel: r, onClosed: d, onResize: s, onEsc: p, onStopMove: l }), { default: () => [u && u(this.app)] }); return f = ((v) => { const h = Mn(N, v); return h.appContext = this.appContext, Bt(h, n), h; })({ ...o.value // 'onUpdate:modelValue': onUpdateModelValue, }), this.activeModalIndex.value++, this.modalRefs[this.activeModalIndex.value] = this.modalRef.value, { update: (v) => { o.value = { ...o.value, ...v }, f && Bt(kn(f, { ...o }), n); }, destroy: d, modalRef: this.activeModalInstance, close: () => this.close() }; } } function Vo(t = {}) { function e(l, f, u, m) { if (typeof u == "number") return m[l].length === u; if (typeof u == "object") { const d = Object.keys(u)[0], p = u[d]; if (d === "not") return Number(m[l].length) !== Number(p); if (d === "moreThan") return Number(m[l].length) >= Number(p); if (d === "lessThan") return Number(m[l].length) <= Number(p); } return !1; } function n(l, f, u, m) { return m[l] && m[l].propertyValue && String(m[l].propertyValue.value) === String(u); } const o = /* @__PURE__ */ new Map([ ["length", e], ["getProperty", n] ]); Object.keys(t).reduce((l, f) => (l.set(f, t[f]), l), o); function i(l, f) { const u = l; return typeof f == "number" ? [{ target: u, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: u, operator: "getProperty", param: l, value: !!f }] : typeof f == "object" ? Object.keys(f).map((m) => { if (m === "length") return { target: u, operator: "length", param: null, value: f[m] }; const d = m, p = f[m]; return { target: u, operator: "getProperty", param: d, value: p }; }) : []; } function a(l) { return Object.keys(l).reduce((u, m) => { const d = i(m, l[m]); return u.push(...d), u; }, []); } function r(l, f) { if (o.has(l.operator)) { const u = o.get(l.operator); return u && u(l.target, l.param, l.value, f) || !1; } return !1; } function c(l, f) { return a(l).reduce((d, p) => d && r(p, f), !0); } function s(l, f) { const u = Object.keys(l), m = u.includes("allOf"), d = u.includes("anyOf"), p = m || d, B = (p ? l[p ? m ? "allOf" : "anyOf" : "allOf"] : [l]).map((U) => c(U, f)); return m ? !B.includes(!1) : B.includes(!0); } return { parseValueSchema: s }; } const $o = { convertTo: (t, e, n, o) => { t.appearance || (t.appearance = {}), t.appearance[e] = n; }, convertFrom: (t, e, n) => t.appearance ? t.appearance[e] : t[e] }, Ho = { convertFrom: (t, e, n) => t.buttons && t.buttons.length ? `共 ${t.buttons.length} 项` : "无" }, zo = { convertTo: (t, e, n, o) => { t.editor && (t.editor[e] = n); }, convertFrom: (t, e, n) => t.editor && Object.prototype.hasOwnProperty.call(t.editor, e) ? t.editor[e] : t[e] }, V = { button: { type: "button", name: "按钮" }, "response-toolbar": { type: "response-toolbar", name: "工具栏" }, "response-toolbar-item": { type: "response-toolbar-item", name: "按钮" }, "content-container": { type: "content-container", name: "容器" }, "input-group": { type: "input-group", name: "文本" }, textarea: { type: "textarea", name: "多行文本" }, lookup: { type: "lookup", name: "帮助" }, "number-spinner": { type: "number-spinner", name: "数值" }, "date-picker": { type: "date-picker", name: "日期" }, switch: { type: "switch", name: "开关" }, "radio-group": { type: "radio-group", name: "单选组" }, "check-box": { type: "check-box", name: "复选框" }, "check-group": { type: "check-group", name: "复选框组" }, "combo-list": { type: "combo-list", name: "下拉列表" }, "response-form": { type: "response-form", name: "卡片面板" }, "response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" }, "response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" }, "tree-grid": { type: "tree-grid", name: "树表格" }, "tree-grid-column": { type: "tree-grid-column", name: "树表格列" }, "data-grid": { type: "data-grid", name: "表格" }, "data-grid-column": { type: "data-grid-column", name: "表格列" }, module: { type: "Module", name: "模块" }, component: { type: "component", name: "组件" }, tabs: { type: "tabs", name: "标签页" }, "tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" }, "tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" }, "html-template": { type: "html-template", name: "模板容器" }, "time-picker": { type: "time-picker", name: "时间选择" }, section: { type: "section", name: "分组面板" }, "section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" }, "section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" }, splitter: { type: "splitter", name: "分栏面板" }, "splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" }, "component-ref": { type: "component-ref", name: "组件引用节点" }, uploader: { type: "uploader", name: "附件上传" }, "page-header": { type: "page-header", name: "页头" }, "page-footer": { type: "page-footer", name: "页脚" }, "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" }, fieldset: { type: "fieldset", name: "分组" }, "query-solution": { type: "query-solution", name: "筛选方案" }, drawer: { type: "drawer", name: "抽屉" }, "external-container": { type: "external-container", name: "外部容器", icon: "content-container" }, "list-nav": { type: "list-nav", name: "列表导航" }, "list-view": { type: "list-view", name: "列表" }, "filter-bar": { type: "filter-bar", name: "筛选条" }, "language-textbox": { type: "language-textbox", name: "多语输入框" } }, Lo = { convertFrom: (t, e, n) => { var i; const o = t.editor && t.editor[e] ? t.editor[e] : t[e]; return ((i = V[o]) == null ? void 0 : i.name) || o; } }, Ao = { convertTo: (t, e, n, o) => { t[e] = t[e]; }, convertFrom: (t, e, n) => t.editor ? n.getRealEditorType(t.editor.type) : "" }, Uo = { convertTo: (t, e, n, o) => { (t.type === "data-grid-column" || t.type === "tree-grid-column") && (t.formatter ? t.formatter[e] = n : t.formatter = { [e]: n }); }, convertFrom: (t, e, n) => { if (t.formatter) { if (e === "trueText") return t.formatter.trueText; if (e === "falseText") return t.formatter.falseText; if (e === "prefix") return t.formatter.prefix; if (e === "suffix") return t.formatter.suffix; if (e === "precision") return t.formatter.precision; if (e === "decimal") return t.formatter.decimal; if (e === "thousand") return t.formatter.thousand; if (e === "tempDateFormat") return t.formatter.dateFormat === "yyyy年MM月dd日" ? "yearMonthDay" : t.formatter.dateFormat === "yyyy-MM-dd HH:mm:ss" ? "yyyy-MM-ddTHH:mm:ss" : t.formatter.dateFormat === "yyyy/MM/dd HH:mm:ss" ? "yyyy/MM/ddTHH:mm:ss" : t.formatter.dateFormat === "yyyy年MM月dd日 HH时mm分ss秒" ? "yearMonthDayHourMinuteSecond" : t.formatter.tempDateFormat || t.formatter.dateFormat || "yyyy-MM-dd"; if (e === "customFormat") return t.formatter.customFormat; if (e === "type") return t.formatter.type || "none"; } return "none"; } }, _o = { convertTo: (t, e, n, o) => { t.command ? t.command[e] = n : t.command = { [e]: n }, e === "enable" && n && (t.command.commands || (t.command.commands = [ { text: "编辑", type: "primary", command: "edit" }, { text: "删除", type: "danger", command: "remove" } ])); }, convertFrom: (t, e, n) => t.command && e === "enable" ? t.command.enable : "" }, qo = { convertTo: (t, e, n, o) => { t.column ? t.column[e] = n : t.column = { [e]: n }, e === "fitColumns" && n && (t.column.fitMode || (t.column.fitMode = "average")); }, convertFrom: (t, e, n) => { if (t.column) { if (e === "fitColumns") return t.column.fitColumns; if (e === "fitMode") return t.column.fitMode; } return ""; } }, Wo = { convertTo: (t, e, n, o) => { t.summary ? t.summary[e] = n : t.summary = { [e]: n }, e === "enable" && n && (t.summary ? t.summary.groupFields || (t.summary.groupFields = []) : t.summary = { enable: n, groupFields: [] }); }, convertFrom: (t, e, n) => t.summary && e === "enable" ? t.summary.enable : t.type === "data-grid-column" ? t.enableSummary === void 0 ? !1 : t.enableSummary : "" }, Go = { convertTo: (t, e, n, o) => { t.group ? t.group[e] = n : t.group = { [e]: n }, e === "enable" && n && (t.group ? t.group.groupFields || (t.group.groupFields = []) : t.group = { enable: n, groupFields: [], showSummary: !1 }); }, convertFrom: (t, e, n) => { if (t.group) { if (e === "enable") return t.group.enable; if (e === "showSummary") return t.group.showSummary; } } }, Yo = { convertFrom: (t, e) => t.binding ? t.binding.path : "", convertTo: (t, e, n) => { if (n && n.length > 0) { const o = n[0]; t.binding || (t.binding = {}), t.binding.type = "Form", t.binding.path = o.bindingField, t.binding.field = o.id, t.binding.fullPath = o.path, t.path = o.bindingPath; } } }, Xo = { convertTo: (t, e, n, o) => { t.pagination || (t.pagination = {}), t.pagination[e] = n; }, convertFrom: (t, e, n) => t.pagination ? t.pagination[e] : t[e] }, Jo = { convertTo: (t, e, n, o) => { t.rowNumber || (t.rowNumber = {}), t.rowNumber[e] = n; }, convertFrom: (t, e, n) => t.rowNumber ? t.rowNumber[e] : t[e] }, Qo = { convertTo: (t, e, n, o) => { t.selection || (t.selection = {}), t.selection[e] = n; }, convertFrom: (t, e, n) => t.selection ? t.selection[e] : t[e] }, Zo = { convertFrom: (t, e, n) => t[e] && t[e].length ? `共 ${t[e].length} 项` : "" }, Ko = { convertFrom: (t, e) => t[e] || "", convertTo: (t, e, n) => { t[e] = n; } }, ei = { convertTo: (t, e, n, o) => { t.size || (t.size = {}), t.size[e] = n; }, convertFrom: (t, e, n) => t.size ? t.size[e] : t[e] }, ti = { convertFrom: (t, e, n) => { var o, i; return (o = t.formatter) != null && o.data && e === "formatterEnumData" && !t.formatterEnumData ? (i = t.formatter) == null ? void 0 : i.data : t.formatterEnumData; } }, ni = { convertTo: (t, e, n, o) => { t.sort || (t.sort = {}), t.sort[e] = n; }, convertFrom: (t, e, n) => { var o, i; if (e === "mode") return ((o = t.sort) == null ? void 0 : o.mode) || "client"; if (e === "multiSort") return !!((i = t.sort) != null && i.multiSort); } }, oi = { convertTo: (t, e, n, o) => { t.filter || (t.filter = {}), t.filter[e] = n; }, convertFrom: (t, e, n) => { var o; if (e === "mode") return ((o = t.filter) == null ? void 0 : o.mode) || "client"; } }, ii = { convertTo: (t, e, n, o) => { t.rowOption ? t.rowOption[e] = n : t.rowOption = { [e]: n }; }, convertFrom: (t, e, n) => { if (t.rowOption) { if (e === "customRowStyle") return t.rowOption.customRowStyle; if (e === "customCellStyle") return t.rowOption.customCellStyle; } return ""; } }; function Zt(t, e, n) { const o = /* @__PURE__ */ new Map([ ["/converter/appearance.converter", $o], ["/converter/buttons.converter", Ho], ["/converter/property-editor.converter", zo], ["/converter/items-count.converter", Zo], ["/converter/type.converter", Lo], ["/converter/change-editor.converter", Ao], ["/converter/change-formatter.converter", Uo], ["/converter/column-command.converter", _o], ["/converter/column-option.converter", qo], ["/converter/summary.converter", Wo], ["/converter/group.converter", Go], ["/converter/form-group-label.converter", Ko], ["/converter/field-selector.converter", Yo], ["/converter/pagination.converter", Xo], ["/converter/row-number.converter", Jo], ["/converter/grid-selection.converter", Qo], ["/converter/size.converter", ei], ["/converter/change-formatter-enum.converter", ti], ["/converter/grid-sort.converter", ni], ["/converter/grid-filter.converter", oi], ["/converter/row-option.converter", ii] ]), i = /* @__PURE__ */ new Map([ ["string", { type: "input-group", enableClear: !1 }], ["boolean", { type: "combo-list", textField: "name", valueField: "value", idField: "value", enableClear: !1, editable: !1, data: [ { value: !0, name: "是" }, { value: !1, name: "否" } ] }], ["enum", { type: "combo-list", maxHeight: 128, enableClear: !1, editable: !1 }], ["array", { type: "button-edit" }], ["number", { type: "number-spinner", placeholder: "" }], ["events-editor", { type: "events-editor", hide: !0 }] ]), a = Vo(); function r(p, g) { return () => a.parseValueSchema(p, g); } function c(p, g, T) { return p.includes("visible") && g.visible !== void 0 ? typeof g.visible == "boolean" ? () => !!g.visible : g.visible === void 0 ? !0 : r(g.visible, T) : () => !0; } function s(p, g, T) { return p.includes("readonly") && g.readonly !== void 0 ? typeof g.readonly == "boolean" ? () => !!g.readonly : r(g.readonly, T) : () => !1; } function l(p, g) { const T = p.$converter || g; return typeof T == "string" && T && o.has(T) ? o.get(T) || null : T || null; } function f(p, g, T, B, N, U = "", S = "") { return Object.keys(p).map((h) => { const M = w(1), E = h, C = p[h], O = Object.keys(C), b = C.title, k = C.type, I = i.get(k) || { type: "input-group", enableClear: !1 }, P = C.editor ? Object.assign({}, I, C.editor) : Object.assign({}, I), $ = c(O, C, g), W = s(O, C, g); P.readonly = P.readonly === void 0 ? W() : P.readonly; const ee = C.type === "cascade" ? f(C.properties, g, T, B, N, U, S) : [], j = !0; let R = l(C, S); const G = A({ get() { if (M.value) { if (["class", "style"].find((le) => le === E) && !R && (R = o.get("/converter/