UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,368 lines 51.4 kB
var je = Object.defineProperty; var Re = (e, t, r) => t in e ? je(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r; var N = (e, t, r) => Re(e, typeof t != "symbol" ? t + "" : t, r); import { ref as k, computed as G, defineComponent as J, watch as U, createVNode as c, createTextVNode as pe, mergeProps as qe, reactive as Ue, withDirectives as Ae, resolveDirective as Ge, Fragment as me, inject as We, onMounted as le, onBeforeMount as ze } from "vue"; import { isPlainObject as se, cloneDeep as fe } from "lodash-es"; import Qe from "../accordion/index.esm.js"; import _e from "../avatar/index.esm.js"; import Je from "../button-edit/index.esm.js"; import Xe from "../button-group/index.esm.js"; import Ye from "../calendar/index.esm.js"; import Ze from "../capsule/index.esm.js"; import He from "../checkbox/index.esm.js"; import Ke from "../combo-list/index.esm.js"; import et from "../combo-tree/index.esm.js"; import tt from "../component/index.esm.js"; import rt from "../color-picker/index.esm.js"; import nt from "../content-container/index.esm.js"; import ot from "../date-picker/index.esm.js"; import it from "../data-grid/index.esm.js"; import at from "../dropdown/index.esm.js"; import lt from "../dynamic-form/index.esm.js"; import st from "../events-editor/index.esm.js"; import ut from "../filter-bar/index.esm.js"; import ct from "../field-selector/index.esm.js"; import dt from "../binding-selector/index.esm.js"; import pt from "../image-cropper/index.esm.js"; import mt from "../input-group/index.esm.js"; import ft from "../layout/index.esm.js"; import gt from "../list-nav/index.esm.js"; import yt from "../list-view/index.esm.js"; import vt from "../lookup/index.esm.js"; import ht from "../mapping-editor/index.esm.js"; import bt from "../nav/index.esm.js"; import Ft from "../number-range/index.esm.js"; import Ct from "../number-spinner/index.esm.js"; import Pt from "../order/index.esm.js"; import kt from "../page-header/index.esm.js"; import St from "../page-footer/index.esm.js"; import wt from "../pagination/index.esm.js"; import Tt from "../progress/index.esm.js"; import xt from "../query-solution/index.esm.js"; import Et from "../radio-group/index.esm.js"; import Vt from "../rate/index.esm.js"; import It from "../response-toolbar/index.esm.js"; import Nt from "../response-layout/index.esm.js"; import Bt from "../response-layout-editor/index.esm.js"; import Lt from "../search-box/index.esm.js"; import Ot from "../section/index.esm.js"; import Mt from "../smoke-detector/index.esm.js"; import Dt from "../splitter/index.esm.js"; import $t from "../step/index.esm.js"; import jt from "../switch/index.esm.js"; import Rt from "../tabs/index.esm.js"; import qt from "../tags/index.esm.js"; import Ut from "../text/index.esm.js"; import At from "../time-picker/index.esm.js"; import Gt from "../transfer/index.esm.js"; import Wt from "../tree-view/index.esm.js"; import zt from "../uploader/index.esm.js"; import Qt from "../verify-detail/index.esm.js"; import _t from "../video/index.esm.js"; import Jt from "../textarea/index.esm.js"; import Xt from "../schema-selector/index.esm.js"; import Yt from "../tree-grid/index.esm.js"; import Zt from "../event-parameter/index.esm.js"; import Ht from "../filter-condition-editor/index.esm.js"; import Kt from "../fieldset/index.esm.js"; import er from "../sort-condition-editor/index.esm.js"; import tr from "../menu-lookup/index.esm.js"; import rr from "../drawer/index.esm.js"; const nr = { width: { type: String, default: "300px" }, height: { type: Number, default: 10 }, isWidePanel: { type: Boolean, default: !1 }, /** 是否启用搜索 */ enableSearch: { type: Boolean, default: !0 }, /** 使用模式 */ mode: { type: String, default: "panel" }, /** 是否持有面板的隐藏显示状态 */ isPersitOpenState: { type: Boolean, default: !1 }, /** isPersitOpenState=true时,控制面板是否隐藏显示 */ isShowPanel: { type: Boolean, default: !1 }, /** 属性名 */ propertyName: { type: String, default: "" }, /** 属性类型 */ propertyConfig: { type: Array }, /** 属性值 */ propertyData: { type: Object, default: {} }, /** 是否展示关闭按钮 */ showCloseBtn: { type: Boolean, default: !1 }, /** 当前选中的标签页id */ selectedTabId: { type: String, default: "" }, /** 是否是白色主题 */ isWhiteTheme: { type: Boolean, default: !0 }, /** dom结构 */ schema: { type: Object, default: {} }, /** 属性变更后事件 */ propertyChanged: { type: Function } }; function or(e = {}) { function t(p, P, o, F) { if (typeof o == "number") return F[p].length === o; if (typeof o == "object") { const m = Object.keys(o)[0], C = o[m]; if (m === "not") return Number(F[p].length) !== Number(C); if (m === "moreThan") return Number(F[p].length) >= Number(C); if (m === "lessThan") return Number(F[p].length) <= Number(C); } return !1; } function r(p, P, o, F) { return F[p] && F[p].propertyValue && String(F[p].propertyValue.value) === String(o); } const n = /* @__PURE__ */ new Map([ ["length", t], ["getProperty", r] ]); Object.keys(e).reduce((p, P) => (p.set(P, e[P]), p), n); function i(p, P) { const o = p; return typeof P == "number" ? [{ target: o, operator: "length", param: null, value: Number(P) }] : typeof P == "boolean" ? [{ target: o, operator: "getProperty", param: p, value: !!P }] : typeof P == "object" ? Object.keys(P).map((F) => { if (F === "length") return { target: o, operator: "length", param: null, value: P[F] }; const m = F, C = P[F]; return { target: o, operator: "getProperty", param: m, value: C }; }) : []; } function y(p) { return Object.keys(p).reduce((o, F) => { const m = i(F, p[F]); return o.push(...m), o; }, []); } function f(p, P) { if (n.has(p.operator)) { const o = n.get(p.operator); return o && o(p.target, p.param, p.value, P) || !1; } return !1; } function S(p, P) { return y(p).reduce((m, C) => m && f(C, P), !0); } function v(p, P) { const o = Object.keys(p), F = o.includes("allOf"), m = o.includes("anyOf"), C = F || m, O = (C ? p[C ? F ? "allOf" : "anyOf" : "allOf"] : [p]).map((j) => S(j, P)); return F ? !O.includes(!1) : O.includes(!0); } return { parseValueSchema: v }; } const ee = {}, ir = {}; function ge(e) { const { properties: t, title: r, ignore: n } = e, i = n && Array.isArray(n), y = Object.keys(t).reduce((f, S) => ((!i || !n.find((v) => v === S)) && (f[S] = t[S].type === "object" && t[S].properties ? ge(t[S]) : fe(t[S].default)), f), {}); if (r && (!i || !n.find((f) => f === "id"))) { const f = r.toLowerCase().replace(/-/g, "_"); y.id = `${f}_${Math.random().toString().slice(2, 6)}`; } return y; } function te(e, t) { const r = ge(t); return Object.keys(r).reduce((n, i) => (Object.prototype.hasOwnProperty.call(e, i) && (n[i] && se(n[i]) && se(e[i] || !e[i]) ? Object.assign(n[i], e[i] || {}) : n[i] = e[i]), n), r), r; } function ye(e, t) { return Object.keys(e).filter((n) => e[n] != null).reduce((n, i) => { if (t.has(i)) { const y = t.get(i); if (typeof y == "string") n[y] = e[i]; else { const f = y(i, e[i], e); Object.assign(n, f); } } else n[i] = e[i]; return n; }, {}); } function ar(e, t, r = /* @__PURE__ */ new Map()) { const n = te(e, t); return ye(n, r); } function ve(e) { var r; const t = e.type; if (t) { const n = ee[t]; if (!n) return e; const i = te(e, n), y = ((r = e.editor) == null ? void 0 : r.type) || ""; if (y) { const f = ee[y], S = te(e.editor, f); i.editor = S; } return i; } return e; } const lr = { convertTo: (e, t, r, n) => { e.appearance || (e.appearance = {}), e.appearance[t] = r; }, convertFrom: (e, t, r) => e.appearance ? e.appearance[t] : e[t] }, sr = { convertFrom: (e, t, r) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无" }, ur = { convertTo: (e, t, r, n) => { e.editor && (e.editor[t] = r); }, convertFrom: (e, t, r) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t] }, a = { 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: "抽屉" } }, cr = { convertFrom: (e, t, r) => { var i; const n = e.editor && e.editor[t] ? e.editor[t] : e[t]; return ((i = a[n]) == null ? void 0 : i.name) || n; } }, dr = { convertTo: (e, t, r, n) => { e[t] = e[t]; }, convertFrom: (e, t, r) => e.editor ? r.getRealEditorType(e.editor.type) : "" }, pr = { convertFrom: (e, t) => e.binding ? e.binding.path : "", convertTo: (e, t, r) => { if (r && r.length > 0) { const n = r[0]; e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = n.bindingField, e.binding.field = n.id, e.binding.fullPath = n.path, e.path = n.bindingPath; } } }, mr = { convertTo: (e, t, r, n) => { e.pagination || (e.pagination = {}), e.pagination[t] = r; }, convertFrom: (e, t, r) => e.pagination ? e.pagination[t] : e[t] }, fr = { convertTo: (e, t, r, n) => { e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = r; }, convertFrom: (e, t, r) => e.rowNumber ? e.rowNumber[t] : e[t] }, gr = { convertTo: (e, t, r, n) => { e.selection || (e.selection = {}), e.selection[t] = r; }, convertFrom: (e, t, r) => e.selection ? e.selection[t] : e[t] }, yr = { convertFrom: (e, t, r) => e[t] && e[t].length ? `共 ${e[t].length} 项` : "" }, vr = { convertFrom: (e, t) => e[t] || "", convertTo: (e, t, r) => { e[t] = r; } }, ne = {}, re = /* @__PURE__ */ new Map([ ["/converter/appearance.converter", lr], ["/converter/buttons.converter", sr], ["/converter/property-editor.converter", ur], ["/converter/items-count.converter", yr], ["/converter/type.converter", cr], ["/converter/change-editor.converter", dr], ["/converter/form-group-label.converter", vr], ["/converter/field-selector.converter", pr], ["/converter/pagination.converter", mr], ["/converter/row-number.converter", fr], ["/converter/grid-selection.converter", gr] ]), hr = {}, br = /* @__PURE__ */ new Map([ ["string", { type: "input-group", enableClear: !1 }], ["boolean", { type: "combo-list", textField: "name", valueField: "value", idField: "value", enableClear: !1, editable: !1, maxHeight: 64, 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 }] ]), Fr = or(); function he(e, t) { return () => Fr.parseValueSchema(e, t); } function Cr(e, t, r) { return e.includes("visible") && t.visible !== void 0 ? typeof t.visible == "boolean" ? () => !!t.visible : t.visible === void 0 ? !0 : he(t.visible, r) : () => !0; } function Pr(e, t, r) { return e.includes("readonly") && t.readonly !== void 0 ? typeof t.readonly == "boolean" ? () => !!t.readonly : he(t.readonly, r) : () => !1; } function kr(e, t) { const r = e.$converter || t; return typeof r == "string" && r && re.has(r) ? re.get(r) || null : r || null; } function oe(e, t, r, n, i, y = "", f = "") { return Object.keys(e).map((v) => { const p = k(1), P = v, o = e[v], F = Object.keys(o), m = o.title, C = o.type, V = br.get(C) || { type: "input-group", enableClear: !1 }, E = o.editor ? Object.assign({}, V, o.editor) : Object.assign({}, V), O = Cr(F, o, t), $ = Pr(F, o, t); E.readonly = E.readonly === void 0 ? $() : E.readonly; const j = o.type === "cascade" ? oe(o.properties, t, r, n, i, y, f) : [], M = !0; let x = kr(o, f); const I = G({ get() { if (p.value) { if (["class", "style"].find((W) => W === P) && !x && (x = re.get("/converter/appearance.converter") || null), x && x.convertFrom) return x.convertFrom(r, v, i, y); const L = r[v]; return typeof L == "string" && L === "" ? o.defaultValue || "" : L; } return null; }, set(L) { p.value += 1, x && x.convertTo ? (x.convertTo(n, v, L, i, y), x.convertTo(r, v, L, i, y)) : (n[v] = L, r[v] = L); } }), { refreshPanelAfterChanged: w, description: D, isExpand: q } = o, R = { propertyID: P, propertyName: m, propertyType: C, propertyValue: I, editor: E, visible: O, readonly: $, cascadeConfig: j, hideCascadeTitle: M, refreshPanelAfterChanged: w, description: D, isExpand: q }; return t[P] = R, R; }); } function Sr(e, t, r, n, i = "") { const y = t.$ref.schema, f = t.$ref.converter, S = r[y], v = S.type, p = ve(S), P = {}, o = ne[v]; if (o && o.categories) { const F = o.categories[e], m = F == null ? void 0 : F.title; f && Object.keys(F.properties).forEach((E) => { F.properties[E].$converter = f; }); const C = (F == null ? void 0 : F.properties) || {}, V = oe(C, P, p, S, n, i); return { categoryId: e, categoryName: m, properties: V }; } return { categoryId: e, categoryName: "", properties: [] }; } function K(e, t, r, n, i) { const y = e.type, f = ve(e), S = {}; let v = i || ne[y]; if (v && Object.keys(v).length === 0 && r && r.getPropConfig && (v = r.getPropConfig(n)), v && v.categories) { const p = []; return Object.keys(v.categories).map((P) => { const o = v.categories[P]; if (o.$ref) { p.push(Sr(P, o, e, t, n)); return; } const F = o == null ? void 0 : o.title, m = o == null ? void 0 : o.tabId, C = o == null ? void 0 : o.tabName, V = o == null ? void 0 : o.hide, E = o == null ? void 0 : o.hideTitle, O = oe(o.properties || {}, S, f, e, t, n, o.$converter), { setPropertyRelates: $ } = o; p.push({ categoryId: P, categoryName: F, tabId: m, tabName: C, hide: V, properties: O, hideTitle: E, setPropertyRelates: $ }); }), p; } return []; } const wr = { /** 某一分类下的属性配置 */ // as PropType<ElementPropertyConfig> category: { type: Object, default: {} }, categoryKey: { type: String }, /** 属性值 */ propertyData: { type: Object, default: {} }, valueChanged: { type: Function }, triggerRefreshPanel: { type: Function } }, Tr = { elementConfig: { type: Object, default: {} }, category: { type: Object, default: {} } }; function xr(e, t, r = /* @__PURE__ */ new Map(), n = (f, S, v, p) => S, i = {}, y = (f) => f) { return ee[t.title] = t, ir[t.title] = n, ne[t.title] = i, hr[t.title] = y, (f = {}, S = !0) => { if (!S) return ye(f, r); const v = ar(f, t, r), p = Object.keys(e).reduce((P, o) => (P[o] = e[o].default, P), {}); return Object.assign(p, v); }; } function Er(e, t) { return { customClass: t.class, customStyle: t.style }; } const Vr = /* @__PURE__ */ new Map([ ["appearance", Er] ]), Ir = "https://json-schema.org/draft/2020-12/schema", Nr = "https://farris-design.gitee.io/form-group.schema.json", Br = "form-group", Lr = "A Farris Input Component", Or = "object", Mr = { id: { description: "The unique identifier for a form group", type: "string" }, type: { description: "The type string of form group component", type: "string", default: "form-group" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, enableLinkLabel: { description: "", type: "boolean", default: !1 }, editor: { description: "", type: "obejct", default: null }, label: { description: "", type: "string", default: "" }, lableWidth: { description: "", type: "number" }, binding: { description: "", type: "object", default: {} } }, Dr = [ "id", "type", "editor" ], $r = { $schema: Ir, $id: Nr, title: Br, description: Lr, type: Or, properties: Mr, required: Dr }, be = { id: { type: String, default: "" }, customClass: { type: String, default: "" }, customStyle: { type: String, default: "" }, /** 筛选组件配置器,具体配置项可查看各组件文档 */ editor: { type: Object, default: {} }, label: { type: String, default: "" }, /** 组件值 */ modelValue: { type: [String, Boolean, Array, Number], default: "" }, // readonly: { type: Boolean, default: false }, visible: { type: Boolean, default: !0 }, required: { type: Boolean, default: !1 }, showLabel: { type: Boolean, default: !0 }, type: { type: String, default: "input-group" }, componentId: { type: String, default: "" } }; xr( be, $r, Vr, void 0 ); const jr = { id: { type: String }, required: { type: Boolean, default: !1 }, text: { type: String, default: "" }, title: { type: String }, valid: { type: Boolean, default: !0 }, inValidTip: { type: String, default: "" } }, Rr = /* @__PURE__ */ J({ name: "FDynamicFormLabel", props: jr, emits: [], setup(e, t) { k(e.title || e.text); const r = k(e.required), n = k(e.text), i = k(e.valid), y = k(e.inValidTip); U(() => e.text, () => { n.value = e.text; }), U(() => e.required, (v, p) => { v !== p && (r.value = v); }), U([() => e.valid, () => e.inValidTip], ([v, p]) => { i.value = v, y.value = p; }); const f = G(() => i.value ? n.value : y.value), S = G(() => i.value ? "" : "color:red"); return () => n.value && c("label", { class: "col-form-label", title: f.value, style: S.value }, [!i.value && c("span", { class: "f-icon f-icon-warning mr-1", style: "color: red; min-width: 16px;", title: y.value }, null), r.value && c("span", { class: "farris-label-info text-danger" }, [pe("*")]), c("span", { class: "farris-label-text" }, [n.value])]); } }), l = {}, s = {}, u = {}, d = {}; let ue = !1; function qr() { ue || (ue = !0, _e.register(l, s, u, d), Qe.register(l, s, u, d), Je.register(l, s, u, d), Xe.register(l, s, u, d), Ye.register(l, s, u, d), Ze.register(l, s, u, d), He.register(l, s, u, d), Ke.register(l, s, u, d), et.register(l, s, u, d), tt.register(l, s, u, d), nt.register(l, s, u, d), rt.register(l, s, u, d), ot.register(l, s, u, d), it.register(l, s, u, d), at.register(l, s, u, d), lt.register(l, s, u, d), st.register(l, s, u, d), ut.register(l, s, u, d), ct.register(l, s, u, d), Ht.register(l, s, u, d), pt.register(l, s, u, d), mt.register(l, s, u, d), ft.register(l, s, u, d), yt.register(l, s, u, d), gt.register(l, s, u, d), vt.register(l, s, u, d), ht.register(l, s, u, d), bt.register(l, s, u, d), Ft.register(l, s, u, d), Ct.register(l, s, u, d), Pt.register(l, s, u, d), kt.register(l, s, u, d), St.register(l, s, u, d), wt.register(l, s, u, d), Tt.register(l, s, u, d), xt.register(l, s, u, d), Et.register(l, s, u, d), Vt.register(l, s, u, d), Nt.register(l, s, u, d), Bt.register(l, s, u, d), It.register(l, s, u, d), Xt.register(l, s, u), Lt.register(l, s, u, d), Ot.register(l, s, u, d), Mt.register(l, s, u, d), Dt.register(l, s, u, d), $t.register(l, s, u, d), jt.register(l, s, u, d), er.register(l, s, u, d), Rt.register(l, s, u, d), qt.register(l, s, u, d), Ut.register(l, s, u, d), At.register(l, s, u, d), Gt.register(l, s, u, d), Wt.register(l, s, u, d), Qt.register(l, s, u, d), zt.register(l, s, u, d), _t.register(l, s, u, d), Jt.register(l, s, u, d), Yt.register(l, s, u, d), dt.register(l, s, u, d), Zt.register(l, s, u, d), Kt.register(l, s, u, d), tr.register(l, s, u, d), rr.register(l, s, u, d)); } function Ur() { qr(); function e(f) { const S = l[f]; if (!S) throw new Error(`Could not find the editor of type '${f}'`); return S; } function t(f, S) { const v = s[f]; return v ? v(S) : {}; } function r(f) { switch (f) { case "check-box": return "onChangeValue"; case "switch": return "onModelValueChanged"; case "check-group": return "onChangeValue"; case "combo-list": case "combo-tree": return "onChange"; case "combo-lookup": return ""; case "date-picker": return "onDatePicked"; case "date-range": return ""; case "datetime-picker": return ""; case "datetime-range": return ""; case "month-picker": return ""; case "month-range": return ""; case "year-picker": return ""; case "year-range": return ""; case "input-group": return "onChange"; case "lookup": return "onUpdate:modelValue"; case "number-range": return "onValueChange"; case "number-spinner": return "onValueChange"; case "radio-group": return "onChangeValue"; case "text": return ""; case "events-editor": return "onSavedCommandListChanged"; case "grid-field-editor": case "item-collection-editor": case "response-form-layout-setting": case "response-layout-editor-setting": case "response-layout-splitter": case "menu-lookup": return "onChange"; case "field-selector": case "binding-selector": return "onFieldSelected"; case "schema-selector": return "onSchemaSelected"; case "mapping-editor": return "onMappingFieldsChanged"; case "textarea": return "onValueChange"; case "query-solution-config": case "solution-preset": return "onFieldsChanged"; } } function n(f) { switch (f) { case "combo-list": case "input-group": case "textarea": return "onClear"; } } function i(f) { switch (f) { case "input-group": return "onMousedownEvent"; } } function y(f) { switch (f) { case "input-group": return "onMouseupEvent"; } } return { resolveEditorProps: t, resolveEditorType: e, getChangeFunctionName: r, getClearFunctionName: n, getMousedownFunctionName: i, getMouseupFunctionName: y }; } const Ar = /* @__PURE__ */ J({ name: "FDynamicFormGroup", props: be, emits: ["change", "update:modelValue"], setup(e, t) { var M; const r = k(e.id), n = k(e.customClass), i = k(e.editor), y = k(e.label), f = k(e.modelValue), S = k(e.readonly), v = k(((M = e.editor) == null ? void 0 : M.required) || e.required), p = k(e.showLabel), P = k(e.visible); k(e.type); const o = k(), { resolveEditorProps: F, resolveEditorType: m, getChangeFunctionName: C, getClearFunctionName: V } = Ur(), E = G(() => ({ "form-group": !0, "farris-form-group": !0, "common-group": !0, "q-state-readonly": S.value })); function O(x, I, w) { f.value = I !== void 0 ? I : x, t.emit("update:modelValue", f.value), t.emit("change", f.value, { newValue: x, newModelValue: I, parameters: w }); } function $() { t.emit("update:modelValue", ""); } const j = G(() => { const x = i.value.type || "input-group", I = m(x), w = F(x, i.value), D = C(x), q = V(i.value.type); return q && (w[q] = $), w[D] = O, (w.id == null || w.id === "") && (w.id = r.value), x === "number-range" && i.value.onBeginValueChange && typeof i.value.onBeginValueChange == "function" ? (i.value.onBeginValueChange && typeof i.value.onBeginValueChange == "function" && (w.onBeginValueChange = i.value.onBeginValueChange), i.value.onEndValueChange && typeof i.value.onEndValueChange == "function" && (w.onEndValueChange = i.value.onEndValueChange)) : x === "lookup" && i.value["onUpdate:idValue"] && typeof i.value["onUpdate:idValue"] == "function" && (w["onUpdate:idValue"] = i.value["onUpdate:idValue"]), () => c(I, qe({ ref: o }, w, { modelValue: f.value, "onUpdate:modelValue": (R) => f.value = R }), t.slots); }); return U([() => e.id, () => e.customClass, () => e.editor, () => e.label, () => e.modelValue, () => e.readonly, () => e.required, () => e.showLabel, () => e.visible], ([x, I, w, D, q, R, L, W, Y]) => { var z; r.value = x, n.value = I, i.value = w, y.value = D, f.value = q, S.value = R, v.value = ((z = i.value) == null ? void 0 : z.required) || L, p.value = W, P.value = Y; }), t.expose({ editorRef: o }), () => P.value && c("div", { id: `${r.value}-input-group`, class: n.value, style: e.customStyle }, [c("div", { class: "farris-group-wrap" }, [c("div", { class: E.value }, [p.value && c(Rr, { id: `${r.value}-lable`, required: v.value, text: y.value, title: y.value }, null), c("div", { class: "farris-input-wrap" }, [j.value()])])])]); } }), Gr = /* @__PURE__ */ J({ name: "FPropertyPanelItem", props: Tr, emits: ["propertyChange", "triggerRefreshPanel"], setup(e, t) { var P; const r = k((P = e.category) == null ? void 0 : P.categoryId), n = k(e.elementConfig.propertyID), i = k(e.elementConfig.propertyName); k(e.elementConfig.editor); const y = k(e.elementConfig.propertyValue), f = G(() => { const o = e.elementConfig.visible; return { "farris-group-wrap": !0, "property-item": !0, "d-none": !(typeof o == "boolean" ? o : o === void 0 ? !0 : o()) }; }); U(() => { var o; return (o = e.elementConfig) == null ? void 0 : o.propertyValue; }, (o) => { y.value = o; }), U(() => { var o; return (o = e.elementConfig) == null ? void 0 : o.propertyName; }, (o) => { i.value = o; }); function S(o, F) { const { parameters: m } = F; e.elementConfig.propertyValue = o; const C = { propertyID: e.elementConfig.propertyID, propertyValue: o }; t.emit("propertyChange", C, m), e.elementConfig.refreshPanelAfterChanged && t.emit("triggerRefreshPanel"); } const v = e.elementConfig.description ? `<div style="color: gray; "> 描述 :${e.elementConfig.description}</div>` : "", p = Ue({ content: ` <div> <div style="color: black; ">${e.elementConfig.propertyName}</div> <div style="color: gray; ">ID:${e.elementConfig.propertyID}</div> ${v} </div>`, placement: "left" }); return () => c("div", { class: f.value }, [e.elementConfig.propertyName && Ae(c("label", { class: `col-form-label ${r.value}-${n.value}` }, [c("span", { class: "farris-label-text" }, [i.value])]), [[Ge("tooltip"), p]]), c(Ar, { id: n.value, showLabel: !1, editor: e.elementConfig.editor, modelValue: y.value, onChange: S, editorParams: e.elementConfig.editorParams }, null)]); } }), Wr = /* @__PURE__ */ J({ name: "FPropertyPanelItemList", props: wr, emits: ["valueChanged", "submitModal", "triggerRefreshPanel"], setup(e, t) { const r = k(e.category); function n(m) { if (!m.hideCascadeTitle) return c("div", { class: "farris-input-wrap" }, [c("input", { title: "summary", type: "input", class: "form-control form-control-sm", value: m.cascadeSummary, readonly: !0 }, null)]); } function i(m, C) { C.isExpand = !C.isExpand; } function y(m) { return c("div", { class: "landscape" }, [c("button", { title: "expand-button", class: ["btn f-btn-collapse-expand f-btn-mx px-1", { "f-state-expand": m.isExpand }], onClick: (C) => i(C, m) }, [c("span", null, null)])]); } function f(m) { return c("div", { class: `f-section-formgroup-legend ${r.value.categoryId}-${m.propertyID}` }, [c("div", { class: "f-header px-0 my-0 col-form-label", style: "font-size: inherit;" }, [c("div", { class: "wrap" }, [c("span", { class: ["f-icon mr-1", { "f-icon-arrow-60-right": !m.isExpand, "f-icon-arrow-60-down": m.isExpand }] }, null), c("span", { class: "farris-label-text" }, [m.propertyName])])])]); } function S(m) { return `${e.categoryKey}_${m.propertyID}`; } function v(m, C) { m.categoryId = r.value.categoryId, r.value.enableCascade && (m.propertyPath = r.value.parentPropertyID), r.value.setPropertyRelates && r.value.setPropertyRelates(m, e.propertyData, C), t.emit("valueChanged", { changeObject: m }); } function p() { t.emit("triggerRefreshPanel"); } function P(m) { return c("div", { class: "px-2 mb-2" }, [c(Gr, { key: S(m), elementConfig: m, category: r.value, onPropertyChange: v, onTriggerRefreshPanel: p }, null)]); } function o(m) { var C; return c("div", { class: "propertyCascadeItem farris-panel px-2 mb-2" }, [c("div", { class: ["farris-panel-item card", { hidden: !m.isExpand }] }, [c("div", { class: "card-header", onClick: (V) => i(V, m) }, [c("div", { class: "panel-item-title" }, [c("div", { class: "form-group farris-form-group line-item" }, [f(m), n(m), y(m)])])]), c("div", { class: ["card-body", { hidden: !m.isExpand }] }, [(C = m.cascadeConfig) == null ? void 0 : C.map((V) => P(V))])])]); } U(() => e.category, () => { r.value = e.category; }); function F(m) { return m.propertyType === "cascade" ? o : P; } return () => c(me, null, [r.value.properties.map((m) => F(m)(m))]); } }), ce = /* @__PURE__ */ J({ name: "FPropertyPanel", props: nr, emits: ["propertyChanged"], setup(e, t) { const r = k(e.width), n = k(e.isWidePanel), i = k(e.enableSearch), y = k(e.mode), f = k(e.isPersitOpenState), S = k(e.isShowPanel), v = k(), p = k(), P = k(e.showCloseBtn), o = k(e.selectedTabId), F = k(!0), m = k(e.isWhiteTheme); let C = [], V = []; const E = k(""), O = k(), $ = k(), j = We("SchemaService"); let M = [], x = null, I = ""; const w = k(), D = k(0); function q() { V = [], w.value && w.value.categoryList && Array.isArray(w.value.categoryList) && w.value.categoryList.length > 0 && w.value.categoryList.forEach((b) => { if (b.properties && Array.isArray(b.properties) && b.properties.length > 0) { const g = b.properties.map((T) => (T.category = b, T.propertyType === "cascade" && T.cascadeConfig && T.cascadeConfig.map((B) => { B.category = b, B.cascadeParent = T, V = V.concat(B); }), T)); V = V.concat(g); } }); } function R(h) { let b = h.offsetTop, g = h.offsetParent; for (; g !== null; ) b += g.offsetTop, g = g.offsetParent; return b; } function L(h, b) { h && b && Object.keys(b).length > 0 && Object.keys(b).forEach((g) => { var B; const T = b[g]; (B = h.style) == null || B.setProperty(g, T); }); } function W() { return V.filter((b) => { if (typeof b.visible == "function" && !b.visible() || typeof b.visible == "boolean" && !b.visible) return !1; const g = b.propertyID.toLowerCase(), T = b.propertyName.toLowerCase(); return !!(g && g.includes(E.value.toLowerCase()) || T && T.includes(E.value.toLowerCase())); }); } function Y(h, b, g) { if (h === 0) { const T = R(b), H = R(g) - T - 5; b == null || b.scroll({ top: H, behavior: "smooth" }); } } function z(h) { M && M.length > 0 && (M.forEach((g) => { g.style.cssText = ""; }), M = []); const b = document.querySelector(".panel-body"); if (!E.value) O.value && b && (b.scrollTop = 0); else if (q(), V && V.length > 0) { const g = W(); g && g.length > 0 && setTimeout(() => { g.forEach((T, B) => { T.category.status = "open", T.cascadeParent && (T.cascadeParent.isExpand = !0); const H = T.propertyType === "cascade" ? `.${T.category.categoryId}-${T.propertyID} .farris-label-text` : `.property-item .${T.category.categoryId}-${T.propertyID}.col-form-label`, X = document.querySelector(H); X && (Y(B, b, X), L(X, { color: "#5B89FE" }), M.push(X)); }); }, 50); } } function Q(h) { z(); } function Fe(h) { const { value: b } = h.target; h.key === "Enter" && Q(), E.value = b || ""; } function Ce(h) { Q(E.value); } function Pe() { f.value || (F.value = !1), t.emit("closePropertyPanel"); } function Z(h) { E.value = "", z(); } function ke(h) { !h.status || h.status === "open" ? h.status = "closed" : h.status = "open"; } function _() { var h, b; if (C = [], !v.value || v.value.length === 0) { C = [{ tabId: "default", tabName: "属性", categoryList: [] }], w.value = null; return; } if ((h = v == null ? void 0 : v.value) == null || h.forEach((g) => { if (g.tabId) { const T = C.find((B) => B.tabId === g.tabId); T ? (T.categoryList.push(g), T.hide && (T.hide = g.hide || g.properties.length === 0)) : C.push({ tabId: g.tabId, tabName: g.tabName, categoryList: [g], hide: g.hide || g.properties.length === 0 }); } else { const T = C.find((B) => B.tabId === "default"); T ? T.categoryList.push(g) : C.push({ tabId: "default", tabName: "属性", categoryList: [g] }); } }), o.value) { const g = C == null ? void 0 : C.find((T) => T.tabId === o.value && !T.hide); w.value = g || C[0]; } else w.value = C[0]; o.value = (b = w.value) == null ? void 0 : b.tabId; } U(() => [e.schema, e.isShowPanel], () => { p.value = e.schema, !e.schema || !e.schema.type ? v.value = [] : v.value = K(p.value, j, x, I), _(), Z(E.value), D.value++; }), le(() => { _(); }); function Se(h, b, g = !1) { (!p.value || b) && (p.value = b || e.schema), v.value = K(p.value, j, x, I, h), _(), Z(E.value), g && D.value++; } function we(h, b) { x = h, I = b; } function ie() { y.value = y.value === "panel" ? "sidebar" : "panel", y.value === "panel" ? (setTimeout(() => { Q(); }, 100), r.value = "300px") : r.value = "41px"; } function Te() { if (P.value) return c("div", { class: "title-actions" }, [c("div", { class: "monaco-toolbar" }, [c("div", { class: "monaco-action-bar animated" }, [c("ul", { class: "actions-container", role: "toolbar" }, [c("li", { class: "action-item", onClick: Pe }, [c("span", { class: "f-icon f-icon-close" }, null)])])])])]); } function ae() { v.value = K(p.value, j, x, I), _(); } function xe() { var h; if (i.value && ((h = w.value) == null ? void 0 : h.tabId) !== "commands") return c("div", { class: "search" }, [c("div", { class: "input-group f-state-editable border-left-0 border-right-0" }, [c("input", { class: "form-control f-utils-fill text-left pt-3 pb-3 textbox", type: "text", placeholder: "输入属性名称或编号快速定位", autocomplete: "off", onKeyup: (b) => Fe(b), value: E.value }, null), c("div", { class: "input-group-append", style: "margin-left: 0px; background:none;" }, [c("span", { class: "input-group-text input-group-clear", style: [{ display: E.value && E.value.length > 0 ? "" : "none" }], onClick: (b) => Z() }, [c("i", { class: "f-icon modal_close" }, null)]), c("span", { class: "input-group-text input-group-clear", onClick: (b) => Ce() }, [c("i", { class: "f-icon f-icon-search" }, null)])])])]); } function Ee(h) { return `${e.propertyName}_${h.categoryId}`; } function Ve(h) { t.emit("propertyChanged", { ...h, designerItem: x }); } function Ie() { var h, b; if (w.value) return c("div", { class: "panel-body", ref: $ }, [c("ul", { class: ["property-grid", { "wide-panel": n.value }] }, [(b = (h = w.value) == null ? void 0 : h.categoryList) == null ? void 0 : b.map((g) => !g.hide && c("li", { key: Ee(g), "data-category-id": g == null ? void 0 : g.categoryId }, [!g.hideTitle && c("span", { class: "group-label", onClick: () => ke(g) }, [c("span", { class: ["f-icon mr-2", { "f-legend-show": g.status === "closed" }, { "f-legend-collapse": g.status === "open" || g.status === void 0 }] }, null), g.categoryName]), c("div", { hidden: g.status === "closed" }, [c(Wr, { key: `${g == null ? void 0 : g.categoryId}-${D.value}`, category: g, propertyData: p.value, onTriggerRefreshPanel: ae, onValueChanged: Ve }, null)])]))])]); } function Ne() { if (y.value === "sidebar") return c("div", { class: "side-panel h-100", onClick: ie }, [c("i", { class: "f-icon f-icon-engineering w-100 icon" }, null), c("span", null, [pe("属性")])]); } function Be() { return { display: F.value ? "block" : "none", width: r.value }; } function Le() { return c("div", { class: "switcher" }, [c("i", { class: "f-icon f-icon-exhale-discount", style: [{ transform: y.value === "sidebar" ? "none" : "rotate(180deg)" }], onClick: ie }, null)]); } function Oe(h) { w.value.tabId !== h.tabId && (w.value = h, o.value = w.value.tabId, E.value = ""); } function Me() { return C.map((h) => c("div", { class: ["title-label", { active: w.value && w.value.tabId === h.tabId }, { hidden: h.hide }], onClick: () => Oe(h) }, [c("span", null, [h.tabName])])); } le(() => { Q(E.value); }), ze(() => { f.value && (F.value = S.value), _(), Q(E.value); }); function De() { D.value++; } function $e() { ae(); } return t.expose({ updatePropertyConfig: Se, updateDesignerItem: we, reloadPropertyPanel: De, refreshPanel: $e }), () => c(me, null, [c("div", { ref: O, class: ["property-panel", { "white-theme": m.value }], style: Be() }, [c("div", { class: "propertyPanel panel flex-column", hidden: y.value !== "panel" }, [c("div", { class: ["title d-flex", { "p-right": P.value }, { only: C.length === 1 }] }, [Me(), Te()]), xe(), Ie()]), Le(), Ne()])]); } }), zr = k(0); function Qr() { zr.value++; } const _r = k(0); class po { constructor(t, r) { N(this, "componentId"); N(this, "viewModelId"); N(this, "eventsEditorUtils"); N(this, "formSchemaUtils"); N(this, "formMetadataConverter"); N(this, "designViewModelUtils"); N(this, "designViewModelField"); N(this, "controlCreatorUtils"); N(this, "designerHostService"); N(this, "schemaService", null); N(this, "metadataService", null); N(this, "propertyConfig", { type: "object", categories: {} }); var n; this.componentId = t, this.designerHostService = r, this.eventsEditorUtils = r.eventsEditorUtils, this.formSchemaUtils = r.formSchemaUtils, this.formMetadataConverter = r.formMetadataConverter, this.viewModelId = ((n = this.formSchemaUtils) == null ? void 0 : n.getViewModelIdByComponentId(t)) || "", this.designViewModelUtils = r.designViewModelUtils, this.controlCreatorUtils = r.controlCreatorUtils, this.metadataService = r.metadataService, this.schemaService = r.schemaService; } getTableInfo() { var t; return (t = this.schemaService) == null ? void 0 : t.getTableInfoByViewModelId(this.viewModelId); } setDesignViewModelField(t) { var n; const r = t.binding && t.binding.type === "Form" && t.binding.field; if (r) { if (!this.designViewModelField) { const i = this.designViewModelUtils.getDgViewModel(this.viewModelId); this.designViewModelField = i.fields.find((y) => y.id === r); } t.updateOn = (n = this.designViewModelField) == null ? void 0 : n.updateOn; } } getBasicPropConfig(t) { 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: t.type, name: a[t.type].name }] } } } }; } getAppearanceConfig(t = 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(r, n) { if (r) switch (r && r.propertyID) { case "class": case "style": { _r.value++; break; } } } }; } /** * * @param propertyId * @param componentInstance * @returns */ updateElementByParentContainer(t, r) { const n = r && r.parent && r.parent.schema; if (!n) return; const i = n.contents.findIndex((f) => f.id === t), y = fe(n.contents[i]); n.contents.splice(i, 1), n.contents.splice(i, 0, y), Qr(); } } const A = class A { /** * 根据绑定字段类型获取可用的输入类控件 */ static getEditorTypesByMDataType(t, r = "") { let n = A.fieldControlTypeMapping[t]; if (r === "data-grid-column" && (n != null && n.length)) { const i = [a["check-group"].type, a["radio-group"].type]; n = n.filter((y) => !i.includes(y.key)); } return n; } /** * 获取所有输入类控件 */ static getAllInputTypes() { const t = []; for (const r in A.fieldControlTypeMapping) A.fieldControlTypeMapping[r].forEach((n) => { t.find((i) => i.key === n.key && i.value === n.value) || t.push({ key: n.key, value: n.value }); }); return t; } /** * 提供schema字段基础属性和DOM控件属性的映射 * @param control 控件元数据 */ static mappingDomPropAndSchemaProp(t) { var i; const r = (i = t.editor) == null ? void 0 : i.type, n = []; return (t.type === a["data-grid-column"].type || t.type === a["tree-grid-column"].type) && n.push({ domField: "title", schemaField: "name" }), n.push({ domField: "label", schemaField: "name" }), n.push({ domField: "editor.required", schemaField: "require" }), n.push({ domField: "editor.readonly", schemaField: "readonly" }), (r === a["input-group"].type || r === a.textarea.type || r === a["number-spinner"].type) && n.push({ domField: "editor.maxLength", schemaField: "type.length" }), r === a["number-spinner"].type && n.push({ domField: "editor.precision", schemaField: "type.precision" }), (t.type === a["data-grid-column"].type || t.type === a["tree-grid-column"].type) && n.push({ domField: "formatter.precision", schemaField: "type.precision" }), (r === a["combo-list"].type || r === a["radio-group"].type) && n.push({ domField: "editor.data", schemaField: "type.enumValues" }), (t.type === a["data-grid-column"].type || t.type === a["tree-grid-column"].type) && n.push({ domField: "formatter.data", schemaField: "type.enumValues" }), r === a["date-picker"].type && (n.push({ domField: "editor.displayFormat", schemaField: "editor.format" }), n.push({ domField: "editor.fieldType", schemaField: "type.name" })), r === a["number-spinner"].type && (n.push({ domField: "editor.max", schemaField: "editor.maxValue" }), n.push({ domField: "editor.min", schemaField: "editor.minValue" })), r === a.lookup.type && (n.push({ domField: "editor.dataSource", schemaField: "editor.dataSource" }), n.push({ domField: "editor.valueField", schemaField: "editor.valueField" }), n.push({ domField: "editor.textField", schemaField: "editor.textField" }), n.push({ domField: "editor.displayType", schemaField: "editor.displayType" }), n.push({ domField: "editor.mapFields", schemaField: "editor.mapFields" }), n.push({ domField: "editor.helpId", schemaField: "editor.helpId" })), n.push({ domField: "path", schemaField: "bindingPath" }), n.push({ domField: "binding.path", schemaField: "bindingField" }), n.push({ domField: "binding.fullPath", schemaField: "path" }), (t.type === a["data-grid-column"].type || t.type === a["tree-grid-column"].type) && n.push({ domField: "field", schemaField: "bindingPath" }), n; } }; /** * <字段类型,可配置的控件类型列表>的映射 */ N(A, "fieldControlTypeMapping", { String: [ { key: a["input-group"].type, value: a["input-group"].name }, { key: a.lookup.type, value: a.lookup.name }, { key: a["date-picker"].type, value: a["date-picker"].name }, { key: a["check-group"].type, value: a["check-group"].name }, { key: a["radio-group"].type, value: a["radio-group"].name }, { key: a["combo-list"].type, value: a["combo-list"].name }, { key: a.textarea.type, value: a.textarea.name }, { key: a["time-picker"].type, value: a["time-picker"].name } ], Text: [ { key: a.textarea.type, value: a.textarea.name }, { key: a.lookup.type, value: a.lookup.name } ], Decimal: [ { key: a["number-spinner"].type, value: a["number-spinner"].name } ], Integer: [ { key: a["number-spinner"].type, value: a["number-spinner"].name } ], Number: [ { key: a["number-spinner"].type, value: a["number-spinner"].name } ], BigNumber: [ { key: a["number-spinner"].type, value: a["number-spinner"].name } ], Date: [ { key: a["date-picker"].type, value: a["date-picker"].name } ], DateTime: [ { key: a["date-picker"].type, value: a["date-picker"].name } ], Boolean: [ { key: a.switch.type, value: a.switch.name }, { key: a["check-box"].type, value: a["check-box"].name } ], Enum: [ { key: a["combo-list"].type, value: a["combo-list"].name }, { key: a["radio-group"].type, value: a["radio-group"].name } ], Object: [ { key: a.lookup.type, value: a.lookup.name }, { key: a["combo-list"].type, value: a["combo-list"].name }, { key: a["radio-group"].type, value: a["radio-group"].name } ] }); let de = A; var Jr = /* @__PURE__ */ ((e) => (e.string = "string", e.boolean = "boolean", e.number = "number", e.select = "select", e.boolOrExp = "boolOrExp", e.editableSelect = "editab