UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,726 lines (1,725 loc) 98.2 kB
var qt = Object.defineProperty; var Ht = (n, e, t) => e in n ? qt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t; var H = (n, e, t) => Ht(n, typeof e != "symbol" ? e + "" : e, t); import { computed as Q, getCurrentInstance as Ut, createVNode as S, ref as O, defineComponent as me, onMounted as ye, onUnmounted as rt, watch as fe, nextTick as Re, inject as ie, provide as Wt, onBeforeUnmount as zt, withModifiers as ge, createTextVNode as Xt, Fragment as Yt, Teleport as it, Transition as Ce } from "vue"; import { isPlainObject as et, cloneDeep as _e } from "lodash-es"; import { getCustomClass as Te, withInstall as at } from "../common/index.esm.js"; import { useDesignerInnerComponent as Gt, useDesignerComponent as Qt } from "../designer-canvas/index.esm.js"; const st = {}, lt = {}; function je(n) { const { properties: e, title: t, ignore: r } = n, s = r && Array.isArray(r), a = Object.keys(e).reduce((u, g) => ((!s || !r.find((f) => f === g)) && (u[g] = e[g].type === "object" && e[g].properties ? je(e[g]) : _e(e[g].default)), u), {}); if (t && (!s || !r.find((u) => u === "id"))) { const u = t.toLowerCase().replace(/-/g, "_"); a.id = `${u}_${Math.random().toString().slice(2, 6)}`; } return a; } function Jt(n) { const { properties: e, title: t, required: r } = n; if (r && Array.isArray(r)) { const s = r.reduce((a, u) => (a[u] = e[u].type === "object" && e[u].properties ? je(e[u]) : _e(e[u].default), a), {}); if (t && r.find((a) => a === "id")) { const a = t.toLowerCase().replace(/-/g, "_"); s.id = `${a}_${Math.random().toString().slice(2, 6)}`; } return s; } return { type: t }; } function be(n, e = {}, t) { const r = st[n]; if (r) { let s = Jt(r); const a = lt[n]; return s = a ? a({ getSchemaByType: be }, s, e, t) : s, s; } return null; } function Zt(n, e) { const t = je(e); return Object.keys(t).reduce((r, s) => (Object.prototype.hasOwnProperty.call(n, s) && (r[s] && et(r[s]) && et(n[s] || !n[s]) ? Object.assign(r[s], n[s] || {}) : r[s] = n[s]), r), t), t; } function ct(n, e) { return Object.keys(n).filter((r) => n[r] != null).reduce((r, s) => { if (e.has(s)) { const a = e.get(s); if (typeof a == "string") r[a] = n[s]; else { const u = a(s, n[s], n); Object.assign(r, u); } } else r[s] = n[s]; return r; }, {}); } function Kt(n, e, t = /* @__PURE__ */ new Map()) { const r = Zt(n, e); return ct(r, t); } function en(n = {}) { function e(c, v, l, p) { if (typeof l == "number") return p[c].length === l; if (typeof l == "object") { const o = Object.keys(l)[0], i = l[o]; if (o === "not") return Number(p[c].length) !== Number(i); if (o === "moreThan") return Number(p[c].length) >= Number(i); if (o === "lessThan") return Number(p[c].length) <= Number(i); } return !1; } function t(c, v, l, p) { return p[c] && p[c].propertyValue && String(p[c].propertyValue.value) === String(l); } const r = /* @__PURE__ */ new Map([ ["length", e], ["getProperty", t] ]); Object.keys(n).reduce((c, v) => (c.set(v, n[v]), c), r); function s(c, v) { const l = c; return typeof v == "number" ? [{ target: l, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: l, operator: "getProperty", param: c, value: !!v }] : typeof v == "object" ? Object.keys(v).map((p) => { if (p === "length") return { target: l, operator: "length", param: null, value: v[p] }; const o = p, i = v[p]; return { target: l, operator: "getProperty", param: o, value: i }; }) : []; } function a(c) { return Object.keys(c).reduce((l, p) => { const o = s(p, c[p]); return l.push(...o), l; }, []); } function u(c, v) { if (r.has(c.operator)) { const l = r.get(c.operator); return l && l(c.target, c.param, c.value, v) || !1; } return !1; } function g(c, v) { return a(c).reduce((o, i) => o && u(i, v), !0); } function f(c, v) { const l = Object.keys(c), p = l.includes("allOf"), o = l.includes("anyOf"), i = p || o, R = (i ? c[i ? p ? "allOf" : "anyOf" : "allOf"] : [c]).map(($) => g($, v)); return p ? !R.includes(!1) : R.includes(!0); } return { parseValueSchema: f }; } const tn = { 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: "标签页工具栏按钮" }, "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: "抽屉" } }, nn = {}, on = {}; en(); function Ve(n, e, t = /* @__PURE__ */ new Map(), r = (u, g, f, c) => g, s = {}, a = (u) => u) { return st[e.title] = e, lt[e.title] = r, nn[e.title] = s, on[e.title] = a, (u = {}, g = !0) => { if (!g) return ct(u, t); const f = Kt(u, e, t), c = Object.keys(n).reduce((v, l) => (v[l] = n[l].default, v), {}); return Object.assign(c, f); }; } function ut(n, e) { return { customClass: e.class, customStyle: e.style }; } function rn() { function n(e, t) { const r = e.buttons; if (!r || r.length < 1) return null; const [s, a] = t.payloads, u = r.find((g) => g.id === a); return u ? u.onClick || u.click : null; } return { resolve: n }; } function an(n, e, t) { return e; } const sn = /* @__PURE__ */ new Map([ ["appearance", ut] ]), ln = "https://json-schema.org/draft/2020-12/schema", cn = "https://farris-design.gitee.io/drawer.schema.json", un = "drawer", dn = "A Farris Component", fn = "object", pn = { id: { description: "The unique identifier for drawer", type: "string" }, type: { description: "The type string of drawer", type: "string", default: "drawer" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, visible: { description: "", type: "boolean", default: !0 }, title: { description: "", type: "string", default: "标题" }, position: { description: "", type: "string", default: "right" }, width: { description: "", type: "number" }, showMask: { description: "", type: "boolean", default: !0 }, toolbar: { description: "", type: "object", properties: { appearance: { description: "", type: "object", properties: { class: { type: "string", default: "col-3" } } }, id: { description: "", type: "string" }, type: { description: "", type: "string", default: "response-toolbar" }, alignment: { description: "The alignment of Response Toolbar Button.", type: "string", default: "right" }, buttons: { description: "The items of Response Toolbar.", type: "array", default: [] } } } }, mn = [ "id", "type", "contents" ], vn = { $schema: ln, $id: cn, title: un, description: dn, type: fn, properties: pn, required: mn }, dt = { /** 标题 */ title: { type: String, default: "" }, /** 打开关闭抽屉 */ modelValue: { type: Boolean, default: !1 }, /** 从哪个位置呼出 */ position: { type: String, default: "right" }, /** 抽屉插入位置 */ appendTo: { type: String, default: "body" }, /** 是否展示打开抽屉入口 */ showEntry: { type: Boolean, default: !1 }, /** 是否展示关闭按钮 */ showClose: { type: Boolean, default: !0 }, /** 是否展示遮罩层 */ showMask: { type: Boolean, default: !0 }, /** 宽度 */ width: { type: [String, Number], default: 300 }, /** 高度 */ height: { type: [String, Number], default: 300 }, /** 背景色 */ backgroundColor: { type: String, default: "" }, /** 点击遮罩是否关闭抽屉 */ closeByMask: { type: Boolean, default: !0 }, /** 抽屉容器样式 */ wrapperClass: { type: String, default: "" }, /** 入口样式类名 */ entryClass: { type: String, default: "" }, /** 按钮组 */ buttons: { type: Array, default: [] } }, ft = Object.assign({}, dt, { componentId: { type: String, default: "" } }), pt = Ve(ft, vn, sn, an); class mt { constructor(e) { /** 工具栏项标识 */ H(this, "id", ""); /** 工具栏项自定义样式 */ H(this, "class", "btn-secondary"); /** 图标 */ H(this, "icon", ""); /** 所属分组 */ H(this, "groupId", ""); /** 收藏顺序 */ H(this, "order", -1); /** 是否作为下拉菜单的顶层按钮 */ H(this, "asDropDownTop", !1); /** 文本 */ H(this, "text", ""); /** 是否可见 */ H(this, "visible", !0); H(this, "responsed", !1); /** 是否启用提示消息 */ H(this, "tipsEnable", !1); /** 提示消息内容 */ H(this, "tipsText", ""); /** 记录宽度 */ H(this, "width", 0); H(this, "onClick", () => { }); H(this, "options"); var r, s; this.options = e; const t = [ "id", "class", "icon", "groupId", "order", "asDropDownTop", "text", "isDP", "visible", "responsed", "width", "tipsEnable", "tipsText", "onClick" ]; Object.keys(e).filter((a) => t.indexOf(a) > -1).forEach((a) => { this[a] = e[a]; }), (r = e.appearance) != null && r.class && (this.class = (s = e.appearance) == null ? void 0 : s.class); } /** 是否可用 */ get enable() { return Object.keys(this.options).indexOf("disabled") > -1 ? !this.options.disabled : Q(() => !0); } /** 设置宽度 */ setWidth(e) { this.width = parseInt(e, 10); } /** 获取宽度 */ getWidth() { return this.visible ? this.width : !1; } } class gn extends mt { constructor(e) { super(e); } } function vt() { function n(e) { const t = []; return e.reduce((r, s) => (s.children && s.children.length > 0 ? r.push(new ve(s)) : r.push(new gn(s)), r), t), t; } return { buildResponseToolbarItems: n }; } const { buildResponseToolbarItems: hn } = vt(); class ve extends mt { constructor(t) { super(t); H(this, "placement", ""); // 下拉位置 /** 下拉class */ H(this, "dropdownClass", ""); /** 下拉菜单class */ H(this, "menuClass", ""); /** 是否用分开的下拉按钮 */ H(this, "split", !1); H(this, "children", []); H(this, "expanded", !1); const r = ["isDP", "class", "dropdownClass", "menuClass", "placement", "split", "expanded"]; Object.keys(t).filter((s) => r.indexOf(s) > -1).forEach((s) => { this[s] = t[s]; }), t.children && t.children.length && (this.children = hn(t.children)); } } const yn = /* @__PURE__ */ new Map([ ["buttons", "items"], ["appearance", ut] ]); function gt(n, e, t) { return e; } const bn = "https://json-schema.org/draft/2020-12/schema", wn = "https://farris-design.gitee.io/response-toolbar.schema.json", Cn = "response-toolbar", Tn = "A Farris Toolbar Component", Sn = "object", Dn = { id: { description: "The unique identifier for a Response Toolbar", type: "string" }, type: { description: "The type string of Response Toolbar", type: "string", default: "response-toolbar" }, appearance: { description: "", type: "object", properties: { class: { type: "string", default: "" } } }, alignment: { description: "The alignment of Response Toolbar Button.", type: "string", default: "right" }, buttons: { description: "The items of Response Toolbar.", type: "array", default: [] }, buttonSize: { type: "string", default: "" } }, kn = [ "id", "type", "buttons" ], Pn = { $schema: bn, $id: wn, title: Cn, description: Tn, type: Sn, properties: Dn, required: kn }, En = "https://json-schema.org/draft/2020-12/schema", Mn = "https://farris-design.gitee.io/response-toolbar-item.schema.json", Bn = "response-toolbar-item", xn = "A Farris Toolbar Item Component", In = "object", An = { id: { description: "The unique identifier for a Response Toolbar", type: "string" }, type: { description: "The type string of Response Toolbar", type: "string", default: "response-toolbar-item" }, appearance: { description: "", type: "object", properties: { class: { type: "string", default: "btn-secondary" } } }, alignment: { description: "对齐", type: "string", default: "right" }, text: { description: "文本", type: "string", default: "按钮" }, icon: { description: "图标", type: "string", default: "" }, disabled: { description: "禁用", type: "boolean", default: !1 }, onClick: { description: "点击事件", type: "string", default: "" } }, Nn = [ "id", "type", "text" ], On = { $schema: En, $id: Mn, title: Bn, description: xn, type: In, properties: An, required: Nn }, Le = { /** 组件自定义样式 */ customClass: { type: String, default: "" }, /** 按钮尺寸 sm 小号 lg 大号 空值 默认 */ buttonSize: { type: String, default: "" }, alignment: { Type: String, default: "right" }, items: { Type: Array, default: [] } }, $n = Object.assign({}, Le, { componentId: { type: String, default: "" } }), Fe = Ve( Le, Pn, yn, gt ), ht = { id: { type: String, default: "" }, items: { type: Object, default: {} }, class: { type: String, default: "" }, text: { type: String, default: "" }, // disabled: {type: Boolean, default: false}, icon: { type: String, default: "" }, componentId: { type: String, default: "" }, alignment: { Type: String, default: "right" } }, Rn = Ve( ht, On, void 0, gt ), _n = rn(); function jn() { function n(t) { const r = { "f-icon": !0 }; if (t.icon) { const s = t.icon.trim().split(" "); s && s.length && s.reduce((a, u) => (a[u] = !0, a), r); } return r; } function e(t) { return !!(t.icon && t.icon.trim()); } return { iconClass: n, shouldShowIcon: e }; } function Vn(n, e) { function t(o) { const i = { "dropdown-menu": !0 }; if (o.class) { const b = o.menuClass.split(" "); b && b.length && b.reduce((I, R) => (I[R] = !0, I), i); } return i; } function r(o) { const i = { disabled: !o.enable, "dropdown-submenu": !0, "f-rt-dropdown": !0, "text-truncate": !0 }, b = o.dropdownClass.split(" "); return b && b.length && b.reduce((I, R) => (I[R] = !0, I), i), i; } function s(o) { const i = { disabled: !o.enable, "dropdown-item": !0, "f-rt-btn": !0, "text-truncate": !0 }, b = o.class.split(" "); return b && b.length && b.reduce((I, R) => (I[R] = !0, I), i), i; } let a; const u = /* @__PURE__ */ new Map(); function g(o, i, b) { var R; ((R = o.target) == null ? void 0 : R.id) === i.id && o.stopPropagation(); const I = b ? b.id : "__top_item__"; if (i.children && i.children.length && (i.expanded = !i.expanded, i.expanded ? u.set(I, i) : u.delete(I)), u.has(I) && u.get(I) !== i) { const j = u.get(I); j && (j.expanded = !1); } } function f(o, i) { document.body.click(), i.enable && (typeof i.onClick == "function" && i.onClick(o, i.id), n.emit("click", o, i.id)); } function c(o, i) { const b = o.target; b.className.indexOf("dropdown-item") < 0 || (b.title = b.scrollWidth > b.clientWidth ? i : ""); } function v(o) { return o.children.map((i) => i.children && i.children.length ? S("li", { class: r(i), id: i.id, onClick: (b) => i.enable && g(b, i, o) }, [S("span", { id: i.id, class: s(i), onMouseover: (b) => i.enable && g(b, i, o) }, [i.text, S("i", { class: "f-icon f-icon-arrow-chevron-right", style: "display: inline-block;float: right;line-height: 1.25rem;" }, null)]), a(i, i)]) : S("li", { class: s(i), id: i.id, onClick: (b) => f(b, i), onMouseover: (b) => i.enable && g(b, i, o), onMouseenter: (b) => c(b, i.text) }, [e.shouldShowIcon(i) && S("i", { class: e.iconClass(i) }, null), i.text])); } function l(o, i, b) { var _; const I = { display: o.expanded ? "block" : "none", position: "fixed", maxWidth: "300px", width: "180px", minWidth: "120px", zIndex: 1e4 }, R = (_ = document.getElementsByTagName("body")[0].getClientRects()[0]) == null ? void 0 : _.width, j = i, $ = j == null ? void 0 : j.getClientRects(); if (j && $ && $.length) { const { top: w, width: C, left: m, right: P, height: x } = $[0], B = Math.ceil(x + w); I.top = `${B}px`, I.left = `${m}px`; const h = o.id + "_menu", V = i ? i.querySelector("#" + h) : null; if (V) { V.style.visibility = "hidden", V.style.display = "block"; const E = V.offsetHeight; I.display === "block" && (V.style.display = "block"); const D = V.getBoundingClientRect(); if (b) { I.top = `${w - 6}px`; const y = Math.ceil(C + m); I.left = `${y}px`; } R - m - C < D.width && (I.left = `${(b ? m : P) - D.width}px`), window.innerHeight - w - x < E && (w > E ? I.top = `${w - E - 6}px` : (I.maxHeight = `${w - 16}px`, I.overflowY = "auto", w - x > window.innerHeight - w && (I.top = "10px"))), V.style.visibility = "visible"; } } return I; } a = function(o, i) { var j, $; const b = Ut(), I = i ? i.id : o.id, R = ($ = (j = b == null ? void 0 : b.exposed) == null ? void 0 : j.elementRef.value) == null ? void 0 : $.querySelector("#" + I); return S("ul", { class: t(o), style: l(o, R, i), id: o.id + "_menu" }, [v(o)]); }; function p() { u.forEach((o) => { o.expanded = !1; }), u.clear(); } return { renderDropdownMenu: a, clearAllDropDownMenu: p }; } function Ln(n, e, t) { const r = O(n.alignment), { renderDropdownMenu: s, clearAllDropDownMenu: a } = Vn(e, t); function u(l) { const p = { "btn-group": !0, "f-rt-dropdown": !0, "f-btn-ml": r.value === "right" || r.value === "center", "f-btn-mr": r.value === "left" }, o = l.dropdownClass.split(" "); return o && o.length && o.reduce((i, b) => (i[b] = !0, i), p), p; } function g(l) { const p = { btn: !0, disabled: !l.enable, "f-rt-btn": !0, "btn-icontext": !!(l.icon && l.icon.trim()) }; if (l.class) { const o = l.class.split(" "); o && o.length && o.reduce((i, b) => (i[b] = !0, i), p); } return p; } function f(l, p) { l.stopPropagation(); const o = p.expanded; document.body.click(), p.expanded = !o; } function c(l, p = !0) { return S("div", { id: l.id, class: u(l) }, [S("div", { class: g(l), style: "display: flex;padding-right: 0.1rem;border-top-right-radius: 6px;border-bottom-right-radius: 6px", onClick: (o) => l.enable && f(o, l) }, [t.shouldShowIcon(l) && S("i", { class: t.iconClass(l) }, null), S("span", null, [l.text]), S("i", { class: "f-icon f-icon-arrow-chevron-down", style: "display: inline-block;float: right;line-height: 1.25rem;margin-left: .25rem;margin-right: .25rem;" }, null)]), p && s(l)]); } function v() { a(); } return { renderToolbarDropdown: c, clearAllDropDown: v }; } const { buildResponseToolbarItems: tt } = vt(), he = /* @__PURE__ */ me({ name: "FResponseToolbar", props: Le, emits: ["click"], setup(n, e) { const t = O(tt(n.items)), r = O(), s = O(), a = O(), u = O(n.alignment), g = { id: "__more_buttons__", text: "更多" }, f = O(new ve(g)), c = { id: g.id + "width", text: g.text }, v = O(-1), l = jn(), p = Q(() => f.value.children.length > 0), o = Q(() => { const y = { "f-toolbar": !0, "f-response-toolbar": !0, "position-relative": !0, "f-response-toolbar-sm": n.buttonSize === "sm", "f-response-toolbar-lg": n.buttonSize === "lg" }; return Te(y, n.customClass); }), i = Q(() => ({ "w-100": !0, "d-flex": !0, "flex-nowrap": !0, "justify-content-end": u.value === "right", "justify-content-start": u.value === "left", "justify-content-center": u.value === "center" })), { renderToolbarDropdown: b, clearAllDropDown: I } = Ln(n, e, l); function R(y) { y && y.target.closest("ul.dropdown-menu") && y.type === "wheel" || (t.value.filter((k) => k.children && k.children.length > 0).forEach((k) => { k.expanded = !1; }), f.value.expanded = !1, I()); } function j(y, k) { var Z; const q = { btn: !0, "f-rt-btn": !0, "f-btn-ml": u.value === "right" || k > 0 && u.value === "center", "f-btn-mr": u.value === "left", "btn-icontext": !!(y.icon && y.icon.trim()) }, Y = ((Z = y == null ? void 0 : y.appearance) == null ? void 0 : Z.class) || y.class; if (Y) { const W = Y.split(" "); W && W.length && W.reduce((L, X) => (L[X] = !0, L), q); } return q; } function $(y, k) { document.body.click(), typeof k.onClick == "function" && k.onClick(y, k.id), e.emit("click", y, k.id); } function _(y, k) { return S("button", { type: "button", class: j(y, k), id: y.id, disabled: !y.enable, onClick: (q) => $(q, y) }, [l.shouldShowIcon(y) && S("i", { class: l.iconClass(y) }, null), y.text]); } let w = /* @__PURE__ */ new Map(), C = []; function m(y) { const k = y.computedStyleMap().get("margin-left"), q = y.computedStyleMap().get("margin-right"); return (k ? k.value : 0) + y.getBoundingClientRect().width + (q ? q.value : 0); } function P(y, k, q) { if (k < v.value) { let Y = q - 1; for (; Y >= 0; Y--) { const Z = y[Y], W = m(Z); if (k += W, k >= v.value) break; } q = Y; } return k -= v.value, { start: q, space: k }; } function x(y) { const k = a.value; let q = y; const Z = Array.from(k.children).filter((K) => K.id !== "__more_buttons__"), W = Z.length; let L = !1, X = 0; for (; X < W; X++) { const K = Z[X], F = m(K); if (F <= q) q -= F; else { const se = P(Z, q, X); X = se.start, q = se.space, L = !0; break; } } if (!L && C.length > 0) { const K = P(Z, q, X); X = K.start, q = K.space; } const oe = C.length > 0; for (; X < W; X++) { const K = Z[X], F = m(K); w.set(K.id, !0), C[oe ? "unshift" : "push"]({ id: K.id, width: F }); } return q; } function B(y) { let k = x(y); if (C.length) { let W = 0; for (; W < C.length; W++) { const L = n.items.find((X) => X.id === C[W].id); if (L && L.visible !== !1) { const X = C[W].width; if (k >= X || W === C.length - 1 && k + v.value >= X) k -= X; else break; } } for (let L = 0; L < W; L++) w.delete(C[L].id); C.splice(0, W - 1); } const q = Object.assign({}, f.value); q.children = []; const Y = new ve(q), Z = t.value.reduce((W, L) => { const X = n.items.find((oe) => oe.id === L.id); return w.has(L.id) ? (Y.children.push(L), L.visible = !1) : L.visible = X.visible !== !1, W.push(L), W; }, []); f.value = Y, t.value = Z; } function h(y = -1) { var Y; if (y === 0) return; y < 0 && (y = ((Y = s.value) == null ? void 0 : Y.getBoundingClientRect().width) || -1); const q = a.value.getBoundingClientRect().width; (y >= 0 && y < q || C.length) && (B(y), R()); } function V() { return v.value < 0 && S("div", { style: "position:absolute;top:-30px;visibility:hidden;" }, [b(new ve(c))]); } const E = new ResizeObserver((y) => { if (y.length) { const q = y[0].contentRect.width; h(q); } }); function D() { w = /* @__PURE__ */ new Map(), C = []; } return ye(() => { if (v.value < 0) { const k = r.value.querySelector("#" + c.id); k && (v.value = m(k)); } h(); const y = s.value; E.observe(y), document.body.addEventListener("click", R), document.body.addEventListener("wheel", R); }), rt(() => { E.disconnect(), document.body.removeEventListener("click", R), document.body.removeEventListener("wheel", R); }), fe(() => n.items, () => { t.value = tt(n.items), Re(() => { D(), h(); }); }, { deep: !0 }), e.expose({ elementRef: r }), () => S("div", { class: o.value, ref: r, style: { "overflow-y": v.value < 0 ? "hidden" : "initial" } }, [V(), S("div", { ref: s, class: i.value }, [S("div", { ref: a, class: "d-inline-block f-response-content", style: "white-space: nowrap;" }, [t.value.filter((y) => y.visible).map((y, k) => y.children && y.children.length > 0 ? b(y) : _(y, k)), p.value && b(f.value)])])]); } }), Fn = O(0); function qn() { Fn.value++; } const Se = O(0); function Hn(n, e) { const t = e.getBoundingClientRect(), r = n.getBoundingClientRect(), s = r.top >= t.top, a = r.top <= t.bottom; return s && a; } function Un(n) { const e = n.querySelector(".component-btn-group"); if (!e) return; e.style.display = ""; const t = e.getBoundingClientRect(); if (!(t.top === 0 && t.left === 0)) { const r = e.querySelector("div"); if (r) { const s = r.getBoundingClientRect(); r.style.top = t.top + "px"; let a = t.left - s.width; const u = document.querySelector(".editorDiv"); if (u) { const g = u.getBoundingClientRect(); a < g.left && ({ left: a } = n.getBoundingClientRect()); } r.style.left = a + "px"; } } } function Wn(n) { if (!window.scrollContainerList) return; const e = Array.from(window.scrollContainerList); if (e.length && e.length === 1) { const t = e[0], r = document.querySelector(`[id=${t}]`); if (r && r.contains(n)) return r; } } function yt(n) { if (!n) return; const e = n.getBoundingClientRect(); if (e.width === 0 && e.height === 0) return; const t = n.querySelector(".component-btn-group"); if (t) { let r = !0; const s = Wn(n); if (s && (r = Hn(n, s)), !r) { t.style.display = "none"; return; } Un(n); } } function zn(n) { if (!n) return; let e; n.className.includes("dgComponentSelected") ? e = n : e = n.querySelector(".dgComponentSelected"), e && yt(e); } class ke { constructor(e, t) { H(this, "componentId"); H(this, "viewModelId"); H(this, "eventsEditorUtils"); H(this, "formSchemaUtils"); H(this, "formMetadataConverter"); H(this, "designViewModelUtils"); H(this, "designViewModelField"); H(this, "controlCreatorUtils"); H(this, "designerHostService"); H(this, "schemaService", null); H(this, "metadataService", null); H(this, "propertyConfig", { type: "object", categories: {} }); var r; this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((r = this.formSchemaUtils) == null ? void 0 : r.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService; } getTableInfo() { var e; return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId); } setDesignViewModelField(e) { var r; const t = e.binding && e.binding.type === "Form" && e.binding.field; if (t) { if (!this.designViewModelField) { const s = this.designViewModelUtils.getDgViewModel(this.viewModelId); this.designViewModelField = s.fields.find((a) => a.id === t); } e.updateOn = (r = this.designViewModelField) == null ? void 0 : r.updateOn; } } getBasicPropConfig(e) { return { description: "Basic Information", title: "基本信息", properties: { id: { description: "组件标识", title: "标识", type: "string", readonly: !0 }, type: { description: "组件类型", title: "控件类型", type: "select", editor: { type: "combo-list", textField: "name", valueField: "value", editable: !1, data: [{ value: e.type, name: tn[e.type].name }] } } } }; } getAppearanceConfig(e = null) { return { title: "外观", description: "Appearance", properties: { class: { title: "class样式", type: "string", description: "组件的CSS样式", $converter: "/converter/appearance.converter" }, style: { title: "style样式", type: "string", description: "组件的样式", $converter: "/converter/appearance.converter" } }, setPropertyRelates(t, r) { if (t) switch (t && t.propertyID) { case "class": case "style": { Se.value++; break; } } } }; } /** * * @param propertyId * @param componentInstance * @returns */ updateElementByParentContainer(e, t) { const r = t && t.parent && t.parent.schema; if (!r) return; const s = r.contents.findIndex((u) => u.id === e), a = _e(r.contents[s]); r.contents.splice(s, 1), r.contents.splice(s, 0, a), qn(); } } class Xn extends ke { constructor(e, t) { super(e, t); } getPropertyConfig(e) { return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.getAppearancePropConfig(e), this.propertyConfig; } getAppearancePropConfig(e) { this.propertyConfig.categories.appearance = { title: "外观", description: "Appearance", properties: { class: { title: "class样式", type: "string", description: "组件的CSS样式", $converter: "/converter/appearance.converter" } } }; } getBehaviorProperties(e) { this.propertyConfig.categories.behavior = { title: "行为", description: "", properties: { alignment: { title: "对齐方式", description: "在工具栏区域内按钮组的位置", type: "enum", editor: { type: "combo-list", textField: "name", valueField: "value", data: [ { value: "left", name: "左对齐" }, { value: "center", name: "居中" }, { value: "right", name: "右对齐" } ] } } } }; } } function Yn(n, e) { const t = n.schema; function r(p) { return !1; } function s(p, o) { return o.text = p.label, o; } function a() { return !1; } function u() { return !1; } function g() { return !0; } function f() { return !0; } function c(p) { return new Xn(p, e).getPropertyConfig(t); } function v(p) { p && (p.stopPropagation(), p.preventDefault()); const { schema: o } = n; o.buttons || (o.buttons = []); const i = be("response-toolbar-item"); i.id = `toolbar_item_${Math.random().toString().slice(2, 6)}`, i.appearance = { class: "btn btn-secondary" }, o.buttons.push(i); } function l() { return [ { id: "appendItem", title: "新增按钮", icon: "f-icon f-icon-plus-circle text-white", onClick: (p) => v(p) } ]; } return { canAccepts: r, checkCanAddComponent: g, checkCanDeleteComponent: u, checkCanMoveComponent: a, hideNestedPaddingInDesginerView: f, onResolveNewComponentSchema: s, getPropsConfig: c, getCustomButtons: l }; } const Gn = { id: { type: String, default: "" }, componentId: { type: String, default: "" }, canAdd: { type: Boolean, default: !1 }, canDelete: { type: Boolean, default: !1 }, canMove: { type: Boolean, default: !1 }, contentKey: { type: String, default: "contents" }, childLabel: { type: String, default: "" }, childType: { type: String, default: "" }, /** * 组件值 */ modelValue: { type: Object } }; function Qn(n, e, t) { var w; const r = "", s = O(); function a() { return !0; } function u() { return !1; } function g() { return !0; } function f() { return !0; } function c() { return !0; } function v(C) { if (!C || !C.value) return null; const m = O(C == null ? void 0 : C.value.parent), P = v(m); return P || null; } function l(C = e) { const { componentInstance: m, designerItemElementRef: P } = C; return !m || !m.value ? null : m.value.canMove || m.value.canAdd || m.value.canDelete ? P : l(C.parent); } function p(C) { return !!t; } function o() { return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name); } function i() { } function b(C, m) { } function I(C) { const { componentType: m } = C, P = ie("designer-host-service"); let x = be(m, C, P); const B = m.toLowerCase().replace(/-/g, "_"); return x && !x.id && x.type === m && (x.id = `${B}_${Math.random().toString().slice(2, 6)}`), x; } function R(C) { } function j(...C) { return []; } function $() { } function _(C) { } return s.value = { canMove: a(), canSelectParent: u(), canAdd: f(), canDelete: g(), canNested: !c(), contents: [], elementRef: n, parent: (w = e.parent) == null ? void 0 : w.componentInstance, schema: e.schema, styles: r, canAccepts: p, getBelongedComponentInstance: v, getDraggableDesignItemElement: l, getDraggingDisplayText: o, getPropConfig: j, getDragScopeElement: i, onAcceptMovedChildElement: b, onChildElementMovedOut: R, addNewChildComponentSchema: I, onRemoveComponent: $, triggerBelongedComponentToMoveWhenMoved: O(!1), triggerBelongedComponentToDeleteWhenDeleted: O(!1), onPropertyChanged: _ }, s; } const bt = /* @__PURE__ */ me({ name: "FDesignerInnerItem", props: Gn, emits: ["selectionChange", "addComponent", "removeComponent"], setup(n, e) { const t = O(n.canMove), r = O(n.canAdd), s = O(n.canDelete), a = O(!1), u = O(n.contentKey), g = O(n.childType), f = O(n.childLabel), c = O(n.modelValue), v = O(""), l = O(), p = ie("canvas-dragula"), o = O(), i = ie("design-item-context"), b = { designerItemElementRef: l, componentInstance: o, schema: c.value, parent: i, setupContext: e }; Wt("design-item-context", b); const I = Q(() => ({ "farris-component": !0, // 受position-relative影响,整个容器的高度不能被撑起 "flex-fill": n.id === "root-component", "position-relative": t.value || s.value, "farris-nested": a.value, "can-move": t.value, "d-none": l.value && l.value.classList.contains("d-none") })), R = Q(() => { const E = {}; return v.value && v.value.split(";").reduce((D, y) => { const [k, q] = y.split(":"); return k && (D[k] = q), D; }, E), E; }); function j(E, D) { if (i && i.schema[u.value]) { const y = i.schema[u.value].findIndex((k) => k.id === D.id); if (y > -1) { const k = i.schema[u.value].length, q = i.schema[u.value][y % k]; i.designerItemElementRef.value.querySelector(`#${q.id}-design-item`), i.schema[u.value].splice(y, 1), Se.value++, e.emit("removeComponent"), e.emit("selectionChange"); } } } function $(E) { if (o.value.addNewChildComponentSchema) { const D = { componentType: g.value, label: f.value, parentComponentInstance: o.value, targetPosition: -1 }, y = o.value.addNewChildComponentSchema(D); c.value[u.value].push(y), e.emit("addComponent"); } } function _() { return r.value && S("div", { role: "button", class: "btn component-settings-button", title: "新增", ref: "removeComponent", onClick: (E) => { $(); } }, [S("i", { class: "f-icon f-icon-plus-circle" }, null)]); } function w(E) { return s.value && S("div", { role: "button", class: "btn component-settings-button", title: "删除", ref: "removeComponent", onClick: ge((D) => j(D, E), ["stop"]) }, [S("i", { class: "f-icon f-icon-yxs_delete" }, null)]); } function C() { return t.value && S("div", { role: "button", class: "btn component-settings-button", title: "移动", ref: "moveComponent" }, [S("i", { "data-dragging-icon": "true", class: "cmp_move f-icon f-icon-yxs_move" }, null)]); } function m(E) { return S("div", { class: "component-btn-group", "data-noattach": "true" }, [S("div", null, [_(), C(), w(E)])]); } fe(() => n.modelValue, (E) => { c.value = E, b.schema = E; }); function P(E) { window.scrollContainerList || (window.scrollContainerList = /* @__PURE__ */ new Set()); const D = E.getAttribute("id"); D && window.scrollContainerList.add(D); } function x(E) { const D = E.target; P(D), zn(D); } function B() { var E, D; (D = (E = c.value) == null ? void 0 : E.contents) != null && D.length && l.value && l.value.addEventListener("scroll", x); } function h() { const E = l.value, D = O(E.children[1]); return Qn(D, b).value; } ye(() => { if (l.value) { const E = l.value.querySelector(`[data-dragref='${c.value.id}-container']`); o.value = E && E.componentInstance ? E.componentInstance.value : h(), p && E && p.attachComponents(E, c.value), a.value = o.value.canNested !== void 0 ? o.value.canNested : a.value, r.value = o.value.canAdd !== void 0 ? o.value.canAdd : r.value, s.value = o.value.canDelete !== void 0 ? o.value.canDelete : s.value, t.value = o.value.canMove !== void 0 ? o.value.canMove : t.value, v.value = o.value.styles || "", l.value && (l.value.componentInstance = o, l.value.designItemContext = b); } B(), Se.value++; }), zt(() => { l.value && l.value.removeEventListener("scroll", x); }); function V(E) { E && (E.preventDefault(), E.stopPropagation()); let D = b.designerItemElementRef; const y = l.value; if (y) { const k = document.getElementsByClassName("dgComponentFocused"); k && k.length === 1 && k[0] === l.value || (Array.from(k).forEach((Y) => Y.classList.remove("dgComponentFocused")), Array.from(document.getElementsByClassName("dgComponentSelected")).forEach((Y) => Y.classList.remove("dgComponentSelected")), y.classList.add("dgComponentFocused"), e.emit("selectionChange", c.value.type, c.value, n.componentId, o.value), o.value.getDraggableDesignItemElement && (D = o.value.getDraggableDesignItemElement(b), D && D.value && D.value.classList.add("dgComponentSelected"))); } yt(D == null ? void 0 : D.value); } return () => S("div", { id: `${n.id}-design-item`, ref: l, class: I.value, style: R.value, onClick: V }, [m(c.value), e.slots.default && e.slots.default()]); } }); class Jn extends ke { constructor(e, t) { super(e, t); } getPropertyConfig(e) { return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.basic.properties.text = { title: "文本", type: "string", description: "", refreshPanelAfterChanged: !0 }, this.getAppearanceProperties(e), this.getbBehaviorConfig(), this.getEventPropConfig(e), this.propertyConfig; } getAppearanceProperties(e) { this.propertyConfig.categories.appearance = { title: "外观", properties: { class: { description: "组件的CSS样式", title: "class样式" }, icon: { title: "图标", type: "string", description: "" } } }; } getbBehaviorConfig() { this.propertyConfig.categories.behavior = { title: "行为", description: "Behavior", properties: { disabled: { title: "禁用", type: "boolean", description: "按钮禁用状态", refreshPanelAfterChanged: !0, editor: { enableClear: !0, editable: !0 } } } }; } getEventPropConfig(e) { const t = [ { label: "onClick", name: "点击事件" } ], r = this, s = r.eventsEditorUtils.formProperties(e, r.viewModelId, t), a = {}; a[r.viewModelId] = { type: "events-editor", editor: { initialData: s } }, this.propertyConfig.categories.eventsEditor = { title: "事件", hideTitle: !0, properties: a, // 这个属性,标记当属性变更得时候触发重新更新属性 refreshPanelAfterChanged: !0, tabId: "commands", tabName: "交互", setPropertyRelates(u, g) { const f = u.propertyValue; delete e[r.viewModelId], f && (f.setPropertyRelates = this.setPropertyRelates, r.eventsEditorUtils.saveRelatedParameters(e, r.viewModelId, f.events, f)); } }; } } class Zn extends ke { constructor(e, t) { super(e, t); } getPropertyConfig(e) { return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.basic.properties.text = { title: "文本", type: "string", description: "", refreshPanelAfterChanged: !0 }, this.getAppearanceProperties(e), this.getBehaviorConfig(), this.getEventPropConfig(e), this.propertyConfig; } getBehaviorConfig() { this.propertyConfig.categories.behavior = { title: "行为", description: "Behavior", properties: { disabled: { title: "禁用", type: "boolean", description: "按钮禁用状态", refreshPanelAfterChanged: !0, editor: { enableClear: !0, editable: !0 } } } }; } getAppearanceProperties(e) { this.propertyConfig.categories.appearance = { title: "外观", description: "Appearance", properties: { class: { title: "class样式", type: "string", description: "", $converter: "/converter/appearance.converter" }, icon: { title: "图标", type: "string", description: "" } }, setPropertyRelates(t) { if (t) switch (t && t.propertyID) { case "text": { t.needRefreshControlTree = !0; break; } } } }; } getEventPropConfig(e) { const t = [ { label: "onClick", name: "点击事件" } ], r = this, s = r.eventsEditorUtils.formProperties(e, r.viewModelId, t), a = {}; a[r.viewModelId] = { type: "events-editor", editor: { initialData: s } }, this.propertyConfig.categories.eventsEditor = { title: "事件", hideTitle: !0, properties: a, // 这个属性,标记当属性变更得时候触发重新更新属性 refreshPanelAfterChanged: !0, tabId: "commands", tabName: "交互", setPropertyRelates(u, g) { const f = u.propertyValue; delete e[r.viewModelId], f && (f.setPropertyRelates = this.setPropertyRelates, r.eventsEditorUtils.saveRelatedParameters(e, r.viewModelId, f.events, f)); } }; } } function Kn(n, e) { function t(c) { return !1; } function r() { return !1; } function s() { return !0; } function a() { return !1; } function u(c) { let v; switch (n.schema.type) { case "tab-toolbar-item": v = new Jn(c, e); break; default: v = new Zn(c, e); } return v.getPropertyConfig(n.schema); } function g() { n.designerItemElementRef.value && Re(() => { n.designerItemElementRef.value.click(); }); } function f(c) { if (!c) return; const { changeObject: v } = c; v && ["text", "icon", "class"].includes(v.propertyID) && g(); } return { canAccepts: t, checkCanMoveComponent: r, checkCanDeleteComponent: s, checkCanAddComponent: a, getPropsConfig: u, onPropertyChanged: f }; } const wt = /* @__PURE__ */ me({ name: "FResponseToolbarItemDesign", props: ht, emits: ["Click"], setup(n, e) { O(), O(); const t = O(n.alignment), r = { id: "__more_buttons__", text: "More" }, s = O(new ve(r)); Q(() => s.value.children.length > 0); const a = O(), u = ie("designer-host-service"), g = ie("design-item-context"), f = Kn(g, u), c = Gt(a, g, f); ie("toolbar-item-handler", () => { }), ye(() => { a.value.componentInstance = c; }), e.expose(c.value); function v() { const o = { "f-icon": !0 }, i = n.icon ? n.icon.trim() : ""; return Te(o, i); } function l() { return !!(n.icon && n.icon.trim()); } function p() { const o = { btn: !0, "f-rt-btn": !0, "f-btn-ml": t.value === "right" || t.value === "center", "f-btn-mr": t.value === "left", "btn-icontext": !!(n.icon && n.icon.trim()), disabled: n.disabled === !0, "no-drag": !0 }; return Te(o, n.class); } return () => S("div", { ref: a, "data-dragref": `${g.schema.id}-container`, class: "farris-component position-relative", style: "display:inline-block!important;" }, [S("button", { type: "button", class: p(), id: n.id }, [l() && S("i", { class: v() }, null), n.text])]); } }); var de = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}; function eo(n) { return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n; } function we(n) { throw new Error('Could not dynamically require "' + n + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.'); } var Ct = { exports: {} }; (function(n, e) { (function(t) { n.exports = t(); })(function() { return (/* @__PURE__ */ function() { function t(r, s, a) { function u(c, v) { if (!s[c]) { if (!r[c]) { var l = typeof we == "function" && we; if (!v && l) return l(c, !0); if (g) return g(c, !0); var p = new Error("Cannot find module '" + c + "'"); throw p.code = "MODULE_NOT_FOUND", p; } var o = s[c] = { exports: {} }; r[c][0].call(o.exports, function(i) { var b = r[c][1][i]; return u(b || i); }, o, o.exports, t, r, s, a);