UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,537 lines 385 kB
var zr = Object.defineProperty; var Yr = (e, n, t) => n in e ? zr(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t; var R = (e, n, t) => Yr(e, typeof n != "symbol" ? n + "" : n, t); import { ref as T, computed as X, watch as ue, defineComponent as Me, onBeforeUnmount as To, withDirectives as Ot, createVNode as x, resolveDirective as $t, onMounted as tt, reactive as Un, createTextVNode as On, mergeProps as zt, inject as Ke, Fragment as lt, Teleport as Eo, createApp as Oo, onUnmounted as Sn, nextTick as pt, onBeforeMount as Gr, watchEffect as Qr, Transition as Xr, shallowRef as Jr, render as un, h as Zr, cloneVNode as Kr, vShow as ea, onUpdated as ta } from "vue"; import { resolveAppearance as Yt, createPropsResolver as vt, schemaResolverMap as na, propertyEffectMap as oa, propertyConfigSchemaMap as ra, schemaMap as aa, getSchemaByType as _n, getPropsResolverGenerator as Pn } from "../dynamic-resolver/index.esm.js"; import { LocaleService as Le } from "../locale/index.esm.js"; import { FDynamicFormGroup as ia } from "../dynamic-form/index.esm.js"; import { cloneDeep as se, mergeWith as sa, merge as la, isPlainObject as Wn, debounce as ua } from "lodash-es"; import { useDateFormat as So, resolveField as ca, useNumberFormat as da, FormSchemaEntityField$Type as yn, FormSchemaEntityFieldTypeName as zn, getCustomClass as Po, useThirdComponent as Mo, isMobilePhone as Gt, useGuid as rt, getMaxZIndex as Yn } from "../common/index.esm.js"; import { loadRegister as fa, useComponentManager as ma, useBindingData as pa, useEntityState as ha, useDynamicViewUtils as ga, componentMap as cn, resolverMap as va, componentPropsConverter as ya } from "../dynamic-view/index.esm.js"; import ba from "../section/index.esm.js"; import wa from "../accordion/index.esm.js"; import Ca from "../avatar/index.esm.js"; import Fa from "../../designer/button-edit/index.esm.js"; import ka from "../button-group/index.esm.js"; import xa from "../calendar/index.esm.js"; import Ta from "../../designer/capsule/index.esm.js"; import Gn from "../../designer/checkbox/index.esm.js"; import Qn from "../../designer/checkbox-group/index.esm.js"; import bn from "../combo-list/index.esm.js"; import Ea from "../combo-tree/index.esm.js"; import Oa from "../component/index.esm.js"; import Sa from "../color-picker/index.esm.js"; import Pa from "../content-container/index.esm.js"; import Ma from "../../designer/date-picker/index.esm.js"; import Ra from "../../designer/data-grid/index.esm.js"; import Ia from "../dropdown/index.esm.js"; import La from "../../designer/dynamic-form/index.esm.js"; import Na from "../events-editor/index.esm.js"; import Va from "../filter-bar/index.esm.js"; import Ba from "../field-selector/index.esm.js"; import Aa from "../binding-selector/index.esm.js"; import qa from "../image-cropper/index.esm.js"; import ja from "../../designer/input-group/index.esm.js"; import Da from "../layout/index.esm.js"; import $a from "../list-nav/index.esm.js"; import Ha from "../../designer/list-view/index.esm.js"; import Ua, { getLookupEditorCommonProperties as _a, getLookupDialogCommonProperties as Wa, getLookupPaginationProperties as za } from "../lookup/index.esm.js"; import Ya from "../mapping-editor/index.esm.js"; import Ga from "../nav/index.esm.js"; import Qa from "../number-range/index.esm.js"; import Xa from "../../designer/number-spinner/index.esm.js"; import Ja from "../order/index.esm.js"; import Za from "../page-header/index.esm.js"; import Ka from "../page-footer/index.esm.js"; import ei from "../pagination/index.esm.js"; import ti from "../progress/index.esm.js"; import ni from "../query-solution/index.esm.js"; import oi from "../../designer/radio-group/index.esm.js"; import ri from "../../designer/rate/index.esm.js"; import ai from "../../designer/response-toolbar/index.esm.js"; import ii from "../response-layout/index.esm.js"; import si from "../../designer/response-layout-editor/index.esm.js"; import li from "../search-box/index.esm.js"; import ui from "../../designer/section/index.esm.js"; import ci from "../smoke-detector/index.esm.js"; import di from "../splitter/index.esm.js"; import fi from "../step/index.esm.js"; import mi from "../../designer/switch/index.esm.js"; import pi from "../../designer/tabs/index.esm.js"; import hi from "../../designer/tags/index.esm.js"; import gi from "../text/index.esm.js"; import vi from "../../designer/time-picker/index.esm.js"; import Ro, { FTransfer as Io } from "../transfer/index.esm.js"; import yi from "../tree-view/index.esm.js"; import bi from "../uploader/index.esm.js"; import wi from "../verify-detail/index.esm.js"; import Ci from "../video/index.esm.js"; import Fi from "../../designer/textarea/index.esm.js"; import ki from "../schema-selector/index.esm.js"; import xi from "../../designer/tree-grid/index.esm.js"; import Ti from "../event-parameter/index.esm.js"; import Ei from "../filter-condition-editor/index.esm.js"; import Oi from "../fieldset/index.esm.js"; import Si from "../sort-condition-editor/index.esm.js"; import Pi from "../menu-lookup/index.esm.js"; import Mi from "../../designer/drawer/index.esm.js"; import Ri from "../json-editor/index.esm.js"; import Ii from "../property-editor/index.esm.js"; import Li from "../expression-editor/index.esm.js"; import Ni from "../code-editor/index.esm.js"; import Vi from "../html-template/index.esm.js"; import Bi from "../collection-property-editor/index.esm.js"; import Ai from "../../designer/modal/index.esm.js"; import qi from "../external-container/index.esm.js"; import ji from "../language-textbox/index.esm.js"; import Di from "../image/index.esm.js"; import $i from "../comment/index.esm.js"; import { DgControl as U, useDesignerComponent as Hi } from "../designer-canvas/index.esm.js"; import { InputBaseProperty as Ui, FPropertyPanel as _i } from "../property-panel/index.esm.js"; import { useConditionValue as Wi, FConditionList as zi, FConditionFields as Xn, FConditionFieldsDesign as Yi } from "../condition/index.esm.js"; import { FNotifyService as Lo } from "../notify/index.esm.js"; import { F_MODAL_SERVICE_TOKEN as No } from "../modal/index.esm.js"; import { FInputGroup as Gi } from "../input-group/index.esm.js"; import Qi, { FRadioGroup as Xi } from "../radio-group/index.esm.js"; import { FDataGrid as Ji } from "../data-grid/index.esm.js"; import { FTooltip as Zi } from "../tooltip/index.esm.js"; import { FCheckboxGroup as Ki } from "../checkbox-group/index.esm.js"; import { DgControl as es } from "../designer-canvas/index.esm.js/"; import { DATE_FORMATS as ts } from "../date-picker/index.esm.js"; import { FMessageBoxService as ns } from "../message-box/index.esm.js"; import os from "../tags/index.esm.js"; import rs from "../popover/index.esm.js"; import { FButtonEdit as as } from "../button-edit/index.esm.js"; function is() { const { getLocaleValue: e } = Le; return { conditionListLocale: { // 添加条件 add: e("condition.add"), // 生成条件组 create: e("condition.create"), // 重置 reset: e("condition.reset"), and: e("condition.and"), or: e("condition.or") } }; } function ss() { const { getLocaleValue: e } = Le; return { operatorsLocale: { equal: e("operators.equal"), notEqual: e("operators.notEqual"), greater: e("operators.greater"), greaterOrEqual: e("operators.greaterOrEqual"), lessOrEqual: e("operators.lessOrEqual"), less: e("operators.less"), contains: e("operators.contains"), startWith: e("operators.startWith"), endWith: e("operators.endWith") } }; } var Mn = /* @__PURE__ */ ((e) => (e.Equal = "0", e.NotEqual = "1", e.Greater = "2", e.GreaterOrEqual = "3", e.Less = "4", e.LessOrEqual = "5", e.Like = "6", e.LikeStartWith = "7", e.LikeEndWith = "8", e.In = "9", e.NotIn = "10", e))(Mn || {}); function ls() { const { operatorsLocale: e } = ss(); return [ { value: "0", name: e.equal // 等于 }, { value: "1", name: e.equal // 不等于 }, { value: "2", name: e.equal // 大于 }, { value: "3", name: e.equal // 大于等于 }, { value: "4", name: e.less // 小于 }, { value: "5", name: e.lessOrEqual // 小于等于 }, { value: "6", name: e.contains // 包含 }, { value: "7", name: e.startWith // 开始是 }, { value: "8", name: e.endWith // 结束是 } ]; } const us = { "button-edit": ["0", "1", " 6", "7", "8"], "check-box": ["0"], "combo-list": ["0", "1"], "combo-lookup": ["0", "1", " 6", "7", "8"], "date-picker": ["0", "1", "2", "3", "4", "5"], "date-range": [], "datetime-picker": ["0", "1", "2", "3", "4", "5"], "datetime-range": [], "month-picker": ["0", "1", "2", "3", "4", "5"], "month-range": [], "year-picker": ["0", "1", "2", "3", "4", "5"], "year-range": [], "input-group": ["0", "1", "6", "7", "8"], lookup: ["0", "1"], "number-range": [], "number-spinner": ["0", " 1", "2", "3", "4", "5"], "radio-group": ["0"], text: ["0", "1", " 6", "7", "8"] }; function cs(e, n, t) { const { fieldMap: o } = t; function r(i) { const a = o.get(i.fieldCode); if (!a) return []; const u = a.editor.type, d = new Set(us[u]); return ls().filter((l) => d.has(l.value)); } return { getCompareOperators: r }; } const Vo = { conditions: { type: Array, default: [] }, fields: { type: Array, default: [] }, key: { type: String, default: "" }, /** * 控件标签同行展示 */ isControlInline: { type: [Boolean, String], default: "auto", validator: (e) => [!0, !1, "auto"].includes(e) }, /** * 条件项统一的样式 */ itemClass: { type: Boolean, default: "col-12 col-md-6 col-xl-3 col-el-2" } }; class ds { constructor(n = { value: [] }, t) { R(this, "editorType", "check-box"); R(this, "value"); R(this, "valueType", "boolean"); // 编辑器配置 R(this, "editiorConfig"); const r = (Array.isArray(n.value) ? n.value : typeof n.value == "string" ? n.value.split(",") : []).map((i) => JSON.parse(i)); this.value = r, this.editiorConfig = Object.assign({}, t); } clear() { this.value = []; } setValue(n) { this.value = n; } getValue() { return this.value; } getDisplayText() { return this.value.map((n) => n ? "是" : "否").join(","); } isEmpty() { return this.value.length === 0; } } class fs { constructor(n = { textValue: "", value: "", valueField: "" }, t) { R(this, "editorType", "combo-lookup"); R(this, "textValue"); R(this, "value"); R(this, "valueField"); R(this, "valueType", "text"); // 编辑器配置 R(this, "editiorConfig"); this.textValue = n == null ? void 0 : n.textValue, this.value = n == null ? void 0 : n.value, this.editiorConfig = Object.assign({}, t), this.valueField = n == null ? void 0 : n.valueField; } clear() { this.value = "", this.valueField = "", this.textValue = ""; } getPropValue(n, t) { if (t.length > 1) { const o = t.shift(); return n[o] ? this.getPropValue(n[o], t) : null; } return n[t[0]]; } getTextValue(n) { const t = n.split("."), o = this.value.split(",").map((r) => this.getPropValue(r, se(t))); return o && o.length ? o.join(",") : ""; } getValue() { const n = this.valueField.split("."), t = this.value.split(",").map((o) => this.getPropValue(o, se(n))); return t && t.length ? t.join(",") : ""; } getDisplayText() { return this.getValue(); } setValue(n) { throw new Error("Method not implemented."); } isEmpty() { return !this.valueField; } } class Qt { constructor(n = { value: "", displayFormat: "", valueFormat: "" }, t) { R(this, "editorType", "date-picker"); R(this, "value"); R(this, "valueType", "datetime"); R(this, "displayFormat", ""); R(this, "valueFormat", ""); // 编辑器配置 R(this, "editiorConfig"); this.value = n == null ? void 0 : n.value, this.editiorConfig = Object.assign({}, t), this.displayFormat = (n == null ? void 0 : n.displayFormat) || (t == null ? void 0 : t.displayFormat) || "", this.valueFormat = (n == null ? void 0 : n.valueFormat) || (t == null ? void 0 : t.valueFormat) || ""; } formatValue() { const { formatTo: n, parseToDate: t } = So(); if (!this.value) return ""; const o = t(this.value, this.valueFormat); return n(o, this.displayFormat); } setValue(n) { this.value = n; } getValue() { return this.value; } getDisplayText() { return this.formatValue(); } isEmpty() { return !this.value; } clear() { this.value = void 0; } } class Rn { constructor(n = { begin: "", end: "", displayFormat: "", valueFormat: "" }, t = {}) { R(this, "editorType", "date-range"); R(this, "begin", ""); R(this, "end", ""); R(this, "valueType", "datetime"); R(this, "value", ""); // 编辑器配置 R(this, "editiorConfig"); R(this, "displayFormat", ""); R(this, "valueFormat", ""); this.begin = (n == null ? void 0 : n.begin) || "", this.end = (n == null ? void 0 : n.end) || "", this.editiorConfig = Object.assign({}, t, { delimiter: "~" }), this.displayFormat = (n == null ? void 0 : n.displayFormat) || (t == null ? void 0 : t.displayFormat) || "", this.valueFormat = (n == null ? void 0 : n.valueFormat) || (t == null ? void 0 : t.valueFormat) || "", this.value = (this.begin === null ? "" : this.begin) + "~" + (this.end === null ? "" : this.end); } clear() { this.begin = "", this.end = "", this.value = ""; } formatValue(n) { const { formatTo: t, parseToDate: o } = So(); if (!n) return ""; const r = o(n, this.valueFormat); return t(r, this.displayFormat); } getValue() { return { begin: this.begin, end: this.end }; } // TODO getDisplayText() { return !this.begin && !this.end ? "" : (this.begin === null ? "" : this.formatValue(this.begin)) + "~" + (this.end === null ? "" : this.formatValue(this.end)); } setValue(n) { if (n) { const t = n.split(this.editiorConfig.delimiter); this.begin = t[0] || "", this.end = t[1] || "", this.value = n; } else this.clear(); } isEmpty() { return !this.begin && !this.end; } } class Bo { constructor(n = { value: "", valueList: [] }, t) { R(this, "editorType", "combo-list"); R(this, "value"); R(this, "valueType", "enum"); R(this, "valueList", []); // 编辑器配置 R(this, "editiorConfig"); this.value = n == null ? void 0 : n.value, this.editiorConfig = Object.assign({}, t), this.editiorConfig.data && this.editiorConfig.data.length ? this.valueList = this.editiorConfig.data : this.valueList = (n == null ? void 0 : n.valueList) || []; } clear() { const n = typeof this.value; this.value = n === "string" ? "" : void 0; } /** * 更新数据源 */ updateData(n) { this.valueList = [...n]; } getValue() { return this.value; } getDisplayText() { var r, i; const n = typeof this.value; let t = "", o = []; switch (n) { case "string": o = this.value.split(",") || [], t = this.valueList.filter((a) => o.indexOf(a.value + "") > -1).map((a) => a.name).join(","); break; case "boolean": t = ((r = this.valueList.find((a) => a.value === this.value)) == null ? void 0 : r.name) || ""; break; case "number": t = ((i = this.valueList.find((a) => a.value === this.value)) == null ? void 0 : i.name) || ""; break; } return t; } // setValue(data: { value: string; displayText: string }) { // // this.displayText = data.dispalyText; // const enumValues = getEnumValues(data); // this.value = enumValues; // return this.displayText; // } setValue(n) { this.value = n.value; } isEmpty() { return !this.value && this.value !== !1 && this.value !== 0; } } class ms { constructor(n = { value: "", displayText: "", displayField: "", isInputText: !1 }, t) { R(this, "editorType", "input-group"); // 通过弹窗返回的若干个值对象构成的数组 R(this, "value"); R(this, "valueType", "text"); // 控件内显示的值 R(this, "displayText"); // 弹窗模式下,取列表中哪个字段的值映射到当前字段 R(this, "valueField"); // 是否是手动输入的值 R(this, "isInputText"); // 编辑器配置 R(this, "editiorConfig"); this.value = n == null ? void 0 : n.value, this.displayText = n == null ? void 0 : n.displayText, this.valueField = n == null ? void 0 : n.displayField, this.isInputText = n == null ? void 0 : n.isInputText, this.editiorConfig = Object.assign({}, t); } clear() { this.value = "", this.displayText = "", this.valueField = ""; } getPropValue(n, t) { if (t.length > 1) { const o = t.shift(); return n[o] ? this.getPropValue(n[o], t) : ""; } return n[t[0]]; } getTextValue(n) { const t = n.split("."), o = this.value.map((r) => this.getPropValue(r, se(t))); return o && o.length ? o.join(",") : ""; } getValue() { return this.value; } getDisplayText() { return this.getValue(); } setValue(n) { throw new Error("Method not implemented."); } isEmpty() { var n; return !this.displayText && (this.value == null || !((n = this.value) != null && n.length)); } } class ps { constructor(n = { mapFields: [], value: "", valueField: "", isInputText: !1, helpId: "" }, t) { R(this, "editorType", "lookup"); R(this, "helpId"); R(this, "mapFields"); R(this, "value"); R(this, "valueField"); R(this, "valueType", "text"); // 帮助的值是否为手动输入的任意值,对应帮助的任意输入属性nosearch R(this, "isInputText"); // 编辑器配置 R(this, "editiorConfig"); this.editiorConfig = Object.assign({}, t), this.value = (n == null ? void 0 : n.value) || "", this.valueField = (n == null ? void 0 : n.valueField) || (t == null ? void 0 : t.valueField), this.mapFields = n.mapFields, this.isInputText = (n == null ? void 0 : n.isInputText) || (t == null ? void 0 : t.isInputText), this.helpId = (n == null ? void 0 : n.helpId) || (t == null ? void 0 : t.helpId); } clear() { this.value = "", this.mapFields = []; } getValue() { return this.mapFields.map((n) => ca(n, this.valueField || "id")).join(","); } getDisplayText() { return this.value; } setValue(n) { throw new Error("Method not implemented."); } isEmpty() { return !this.mapFields.length; } } class hs extends Qt { constructor(t = { value: "", displayFormat: "", valueFormat: "" }, o) { super(t, o); R(this, "editorType", "month-picker"); } } class gs extends Rn { constructor(t = { begin: "", end: "", displayFormat: "", valueFormat: "" }, o) { super(t, o); R(this, "editorType", "month-range"); } } class vs { constructor(n = { begin: null, end: null }, t) { R(this, "editorType", "number-range"); R(this, "begin"); R(this, "end"); R(this, "valueType", "number"); // 编辑器配置 R(this, "editiorConfig"); this.editiorConfig = Object.assign({}, t), this.begin = (n == null ? void 0 : n.begin) == null ? null : parseFloat(n.begin), this.end = (n == null ? void 0 : n.end) == null ? null : parseFloat(n.end); } clear() { this.begin = null, this.end = null; } getValue() { return { begin: this.begin, end: this.end }; } getDisplayText() { return this.begin === null && this.end === null ? "" : (this.begin === null ? "" : this.begin) + "~" + (this.end === null ? "" : this.end); } setValue(n) { this.begin = n.begin == null ? null : parseFloat(n.begin), this.end = n.end == null ? null : parseFloat(n.end); } isEmpty() { return this.begin == null && this.end == null; } } class ys { constructor(n = { value: "" }, t) { R(this, "editorType", "number-spinner"); R(this, "value"); R(this, "valueType", "number"); // 编辑器配置 R(this, "editiorConfig"); this.editiorConfig = Object.assign({}, t); const o = parseFloat(n.value); this.value = isNaN(o) ? null : o; } clear() { this.value = null; } getValue() { return this.value; } getDisplayText() { if (this.isEmpty()) return ""; const { formatTo: n } = da(); return n(this.value, this.editiorConfig); } setValue(n) { this.value = isNaN(parseFloat(n)) ? null : n; } isEmpty() { return this.value == null || isNaN(this.value); } } class bs { constructor(n = { value: null, valueList: [] }, t) { R(this, "editorType", "radio-group"); R(this, "value"); R(this, "valueType", "enum"); R(this, "valueList", []); // 编辑器配置 R(this, "editiorConfig"); this.editiorConfig = Object.assign({}, t), this.value = n == null ? void 0 : n.value, this.editiorConfig.data && this.editiorConfig.data.length ? this.valueList = this.editiorConfig.data : this.valueList = (n == null ? void 0 : n.valueList) || []; } clear() { this.value = void 0, this.valueList = []; } getValue() { return this.value; } getDisplayText() { var n; return ((n = this.valueList.find((t) => t.value === this.value)) == null ? void 0 : n.name) || ""; } setValue(n) { this.value = n; } isEmpty() { return !this.value && this.value !== 0 && this.value !== !1; } } class ws extends Qt { constructor(t = { value: "", displayFormat: "", valueFormat: "" }, o) { super(t, o); R(this, "editorType", "year-picker"); } } class Ao { constructor(n = { value: "" }, t) { R(this, "editorType", "text"); R(this, "value"); R(this, "valueType", "text"); // 编辑器配置 R(this, "editiorConfig"); this.value = n.value; } clear() { this.value = void 0; } getValue() { return this.value; } getDisplayText() { return this.getValue(); } setValue(n) { this.value = n; } isEmpty() { return !this.value; } } class Cs extends Qt { constructor(t = { value: "", displayFormat: "", valueFormat: "" }, o) { super(t, o); R(this, "editorType", "datetime-picker"); } } class Fs extends Rn { constructor(t = { begin: "", end: "", displayFormat: "", valueFormat: "" }, o = {}) { super(t, o); // 这个属性会在后面进行比对 R(this, "editorType", "datetime-range"); R(this, "valueType", "datetime"); } } class ks extends Bo { constructor(t = { value: "", valueList: [] }, o) { super(t, o); R(this, "editorType", "check-group"); } } function qo() { function e(n, t, o) { switch (n) { case "check-box": return new ds(t, o); case "combo-list": return new Bo(t, o); case "combo-lookup": return new fs(t, o); case "input-group": return new ms(t, o); case "year-picker": return new ws(t, o); case "date-picker": return new Qt(t, o); case "datetime-range": return new Fs(t, o); case "date-range": return new Rn(t, o); case "datetime-picker": return new Cs(t, o); case "lookup": return new ps(t, o); case "month-picker": return new hs(t, o); case "month-range": return new gs(t, o); case "number-range": return new vs(t, o); case "number-spinner": return new ys(t, o); case "radio-group": return new bs(t, o); case "check-group": return new ks(t, o); default: return new Ao(t, o); } } return { createConditionValue: e }; } function jo(e = "query-solution") { function n(a) { let u = "input-group"; switch (a) { case "year-picker": case "month-picker": case "month-range": case "date-range": case "datetime-range": case "datetime-picker": u = "date-picker"; break; default: u = a; } return u; } function t(a) { const u = a.editor ? a.editor.type : "input-group"; return a.editor.type = n(u), a.editor.type === "date-picker" ? (u.indexOf("range") > -1 && (a.editor.enablePeriod = !0), u.indexOf("datetime") > -1 && (a.editor.showTime = !0), u.indexOf("year") > -1 && (a.editor.selectMode = "year"), u.indexOf("month") > -1 && (a.editor.selectMode = "month"), a.editor.weekSelect && (a.editor.selectMode = "week")) : a.editor.type === "number-spinner" || a.editor.type === "number-range" ? (a.editor.showZero = !0, a.editor.nullable = !0, a.editor.needValid = !0) : a.editor.type === "check-group" && e === "filter-bar" ? a.editor.direction = "vertical" : (a.editor.type === "lookup" || a.editor.type === "combo-list") && (a.editor.enableClear = Object.prototype.hasOwnProperty.call(a.editor, "enableClear") ? a.editor.enableClear : !0), u === "input-group" && !a.editor.placeholder && (a.editor.placeholder = Le.getLocaleValue("input-group.placeholder")), a.editor; } function o(a) { return a.map((d) => Object.assign({}, d)).map((d) => (d.visible = Object.prototype.hasOwnProperty.call(d, "visible") ? d.visible : !0, d.editor = t(d), d)); } function r(a, u, d, s) { switch (a.value.editorType) { case "combo-list": s.newValue && (a.value.valueList = s.newValue.map((l) => ({ name: l.name, value: l.value }))); break; case "radio-group": a.value.valueList = [d.data.find((l) => l.value === u)]; break; case "year-range": case "month-range": case "date-range": case "datetime-range": a.value.setValue(u); break; } } function i(a, u, d) { var f, c, p, y, k, v, b; const s = se((f = a.get(u.fieldCode)) == null ? void 0 : f.editor), l = (c = a.get(u.fieldCode)) == null ? void 0 : c.id, m = Object.prototype.hasOwnProperty.call(u, "visible") ? u.visible : (p = a.get(u.fieldCode)) == null ? void 0 : p.visible; let h = !0; if (((y = u.value) == null ? void 0 : y.editorType) === "lookup" && s) { s.idValue = (k = u.value.mapFields) == null ? void 0 : k.map((q) => q.id).join(","); const { onClear: P } = s; s.onClear = (q) => { u.value.mapFields = [], d(u, ""), P && P(q); }, s["onUpdate:dataMapping"] = (q) => { u.value.mapFields = q.items || [], d(u, u.value.getValue()); }, h = !1; } else ((v = u.value) == null ? void 0 : v.editorType) === "number-range" && s ? (s.beginValue = u.value.begin, s.onBeginValueChange = (P) => { u.value.begin = P, d(u, P); }, s.endValue = u.value.end, s.onEndValueChange = (P) => { u.value.end = P, d(u, P); }, h = !1) : s && ["year-range", "month-range", "date-range", "datetime-range"].find((P) => { var q; return P === ((q = u.value) == null ? void 0 : q.editorType); }) ? (s.beginValue = u.value.begin, s.endValue = u.value.end) : ((b = u.value) == null ? void 0 : b.editorType) === "combo-list" && s && (s.onDataChanged = (P) => { var j; const q = (j = a.get(u.fieldCode)) == null ? void 0 : j.editor; q && (q.data = P), u.value.updateData(P); }); return Object.prototype.hasOwnProperty.call(u, "disabled") && (s.disabled = u.disabled), { id: l, editor: s, visible: m, needEmitChange: h }; } return { getSingleControlType: t, convertToControls: o, conditionChangeHandler: r, renderFieldConditionEditor: i }; } function Do(e, n, t = "query-solution") { const { convertToControls: o } = jo(t), r = T(e.fields), i = T([]), a = /* @__PURE__ */ new Map(), { createConditionValue: u } = qo(); function d(l = !0) { l && (r.value = o(r.value)), r.value.reduce((m, h) => (m.set(h.labelCode, h), m), a); } function s(l) { return l.forEach((m) => { if (m) { const h = a.get(m.fieldCode); h.controlType && (m.value = u(h.controlType, m.value, h.editor)); } }), l; } return { convertToControls: o, fields: r, fieldMap: a, fieldConditions: i, loadFieldConfigs: d, initialConditionValue: s }; } function xs(e, n, t) { const o = T(null), r = T(t), i = T(0); function a(l, m) { let h = null; return function() { const f = arguments; h ? (clearTimeout(h), h = setTimeout(() => { h = null, l(...f); }, 200)) : (l(...f), h = setTimeout(() => { h = null; }, 200)); }; } function u() { r.value && (o.value = new ResizeObserver(a((l) => { const m = l[0]; i.value = m.contentRect.width; })), o.value.observe(r.value)); } function d(l) { let h = "col-12"; return l > 250 * 6 ? h = "col-2" : l > 250 * 4 ? h = "col-3" : l > 250 * 3 ? h = "col-4" : l > 250 * 2 && (h = "col-6"), h; } const s = X(() => d(i.value)); return ue([t], ([l]) => { r.value = l, u(); }), { conditionClass: s, resizeObserver: o }; } const Jn = /* @__PURE__ */ Me({ name: "FConditionFields", props: Vo, emits: ["valueChange", "blur", "focus", "click", "input"], setup(e, n) { const t = T(), o = Le.getLocale(), r = T(e.key), i = T(e.conditions), { renderFieldConditionEditor: a, conditionChangeHandler: u } = jo(), d = Do(e), { initialConditionValue: s, fieldMap: l, loadFieldConfigs: m } = d, h = xs(e, n, t), { resizeObserver: f } = h; m(!0), s(i.value), To(() => { var k; (k = f.value) == null || k.unobserve(t.value); }), ue(() => e.fields, () => { m(!0); }), ue(() => e.conditions, () => { i.value = e.conditions, s(i.value); }); const c = X(() => ({ // row: true, "f-utils-flex-row-wrap": !0, "farris-form": !0, "condition-div": !0, "farris-form-controls-inline": !o || e.isControlInline === !0 || e.isControlInline === "auto" && o !== "en" })); function p(k, v, b, P) { u(k, v, b, P), n.emit("valueChange", v, k); } function y() { return i.value.map((k) => { var O; const { id: v, editor: b, needEmitChange: P, visible: q } = a(l, k, p); let j = ((O = b == null ? void 0 : b.appearance) == null ? void 0 : O.class) || e.itemClass; return b != null && b.multiLineLabel && (j = j + " farris-group-multi-label"), x(ia, { id: v, key: v, visible: q, customClass: j, label: (b == null ? void 0 : b.showLabel) === !1 ? " " : k.fieldName, editor: b, required: b == null ? void 0 : b.required, modelValue: k.value.value, "onUpdate:modelValue": (M) => k.value.value = M, onChange: (M, C) => { P && p(k, M, b, C); } }, null); }); } return () => Ot(x("div", { class: c.value, key: r.value, ref: t }, [y()]), [[$t("area-response")]]); } }), Ts = "root-viewmodel"; class Es { constructor(n, t) { R(this, "formSchemaUtils"); R(this, "controlCreatorUtils"); R(this, "designViewModelUtils"); this.resolver = n, this.designerHostService = t, this.formSchemaUtils = this.designerHostService.formSchemaUtils, this.controlCreatorUtils = this.designerHostService.controlCreatorUtils, this.designViewModelUtils = this.designerHostService.designViewModelUtils; } createComponent(n) { const t = this.createComponentRefNode(n), o = this.createComponentNode(n), r = this.createViewModeNode(n), i = this.formSchemaUtils.getFormSchema(); return i.module.viewmodels.push(r), i.module.components.push(o), this.designViewModelUtils.assembleDesignViewModel(), t; } createComponentRefNode(n) { const t = this.resolver.getSchemaByType("component-ref"); return Object.assign(t, { id: `${n.componentId}-component-ref`, component: `${n.componentId}-component` }), t; } createComponentNode(n) { const t = this.resolver.getSchemaByType("component"), o = this.createFormComponentContents(n); return Object.assign(t, { id: `${n.componentId}-component`, viewModel: `${n.componentId}-component-viewmodel`, componentType: n.componentType, appearance: { class: this.getFormComponentClass(n) }, formColumns: n.formColumns, contents: o }), t; } /** * 获取卡片组件层级的class样式 */ getFormComponentClass(n) { var o, r; const { templateId: t } = this.formSchemaUtils.getFormSchema().module; if (t === "double-list-in-tab-template" && ((r = (o = n.parentComponentInstance) == null ? void 0 : o.schema) == null ? void 0 : r.type) === "tab-page") { const i = n.parentComponentInstance.parent && n.parentComponentInstance.parent.schema; if ((i == null ? void 0 : i.type) === "tabs" && (i == null ? void 0 : i.fill) === !0) return "f-struct-wrapper f-utils-fill-flex-column"; } return "f-struct-wrapper"; } createFormComponentContents(n) { var u, d; const t = this.resolver.getSchemaByType("section"); Object.assign(t, { id: n.componentId + "-form-section", appearance: { class: "f-section-form f-section-in-mainsubcard" }, mainTitle: n.componentName }); const o = this.resolver.getSchemaByType("response-form"), r = []; Object.assign(o, { id: n.componentId + "-form", appearance: { class: "f-form-layout farris-form farris-form-controls-inline" }, contents: r, controlsInline: !0 }), t.contents = [o]; const { selectedFields: i } = n; i == null || i.forEach((s) => { if (s.$type === yn.SimpleField) { const l = se(s), m = this.resolveControlClassByFormColumns(n), h = this.controlCreatorUtils.setFormFieldProperty(l, "", m); h && r.push(h); } }); const { templateId: a } = this.formSchemaUtils.getFormSchema().module; if (a === "double-list-in-tab-template" && ((d = (u = n.parentComponentInstance) == null ? void 0 : u.schema) == null ? void 0 : d.type) === "tab-page") { const s = n.parentComponentInstance.parent && n.parentComponentInstance.parent.schema; (s == null ? void 0 : s.type) === "tabs" && (s == null ? void 0 : s.fill) === !0 && (t.appearance.class = "f-section-grid f-section-in-main px-0 pt-0", t.fill = !0); } return [t]; } resolveControlClassByFormColumns(n) { let t = ""; switch (n.formColumns) { case 1: { t = "col-12 col-md-12 col-xl-12 col-el-12"; break; } case 2: { t = "col-12 col-md-6 col-xl-6 col-el-6"; break; } case 3: { t = "col-12 col-md-6 col-xl-4 col-el-4"; break; } case 4: { t = "col-12 col-md-6 col-xl-3 col-el-2"; break; } } return t; } /** * 添加viewModel节点 */ createViewModeNode(n) { return { id: `${n.componentId}-component-viewmodel`, code: `${n.componentId}-component-viewmodel`, name: n.componentName, bindTo: n.bindTo, parent: Ts, fields: this.assembleViewModelFields(n), commands: [], states: [], enableValidation: !0 }; } /** * 组装viewModel fields 节点 */ assembleViewModelFields(n) { const t = [], { selectedFields: o } = n; return o == null || o.forEach((r) => { if (r.$type === yn.SimpleField) { let i = "blur"; const a = r.type.name; (a === zn.Enum || a === zn.Boolean) && (i = "change"), t.push({ type: "Form", id: r.id, fieldName: r.bindingField, groupId: null, groupName: null, updateOn: i, fieldSchema: {} }); } }), t; } } function $o(e, n, t, o) { var i, a, u, d, s, l; const r = t.parentComponentInstance; if (r && o) { const m = (i = r.schema) == null ? void 0 : i.type, f = { componentId: `form-${Math.random().toString(36).slice(2, 6)}`, componentName: ((a = t.bindingSourceContext) == null ? void 0 : a.entityTitle) || ((d = (u = t.bindingSourceContext) == null ? void 0 : u.bindingEntity) == null ? void 0 : d.name) || "标题", componentType: "form", formColumns: m === "splitter-pane" ? 1 : 4, parentContainerId: r.schema.id, parentComponentInstance: r, bindTo: ((s = t.bindingSourceContext) == null ? void 0 : s.bindTo) || "/", selectedFields: (l = t.bindingSourceContext) == null ? void 0 : l.bindingEntityFields }; return new Es(e, o).createComponent(f); } else return n; } const Os = "https://json-schema.org/draft/2020-12/schema", Ss = "https://farris-design.gitee.io/response-form.schema.json", Ps = "response-form", Ms = "A Farris Data Collection Component", Rs = "object", Is = { id: { description: "The unique identifier for a form group", type: "string" }, type: { description: "The type string of form group component", type: "string", default: "response-form" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, contents: { description: "", type: "array", default: [] }, visible: { description: "", type: "boolean", default: !0 }, labelAutoOverflow: { description: "", type: "boolean", default: !1 }, adaptForLanguage: { description: "", type: "boolean", default: !0 }, layout: { description: "", type: "string", default: "col-12 col-md-6 col-xl-3 col-el-2" }, fields: { description: "", type: "array" }, formData: { description: "", type: "object" }, formType: { description: "", type: "string", default: "static" } }, Ls = [ "id", "type", "contents" ], Ns = { $schema: Os, $id: Ss, title: Ps, description: Ms, type: Rs, properties: Is, required: Ls }, Ho = /* @__PURE__ */ new Map([ ["appearance", Yt] ]), Vs = "https://json-schema.org/draft/2020-12/schema", Bs = "https://farris-design.gitee.io/dynamic-form.schema.json", As = "dynamic-form", qs = "A Farris Data Collection Component", js = "object", Ds = { id: { description: "The unique identifier for a form group", type: "string" }, type: { description: "The type string of form group component", type: "string", default: "dynamic-form" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, contents: { description: "", type: "array", default: [] }, visible: { description: "", type: "boolean", default: !0 }, labelAutoOverflow: { description: "", type: "boolean", default: !1 }, adaptForLanguage: { description: "", type: "boolean", default: !0 }, formType: { description: "", type: "string", default: "dynamic" }, layout: { description: "", type: "string", default: "col-12 col-md-6 col-xl-3 col-el-2" }, fields: { description: "", type: "array" }, formData: { description: "", type: "object" }, headerTitleRenderFunction: { description: "", type: "function", default: null }, headerContentRenderFunction: { description: "", type: "function", default: null }, footerRenderFunction: { description: "", type: "function", default: null }, mode: { description: "", type: "string", default: "quick" }, footerStyle: { description: "", type: "string", default: "" }, headerStyle: { description: "", type: "string", default: "" }, toolbar: { description: "", type: "array", default: [] }, moreButtonClass: { description: "", type: "string", default: "btn-link" }, onClick: { description: "", type: "string", default: "" } }, $s = [ "id", "type", "contents" ], Hs = { onClick: "点击事件", "onUpdate:modelValue": "值变更事件", event: "事件" }, Us = { $schema: Vs, $id: Bs, title: As, description: qs, type: js, properties: Ds, required: $s, events: Hs }; var Tt = /* @__PURE__ */ ((e) => (e.Header = "header", e.Footer = "footer", e))(Tt || {}), Ht = /* @__PURE__ */ ((e) => (e.QUICK = "quick", e.FULL = "full", e))(Ht || {}); const Xt = { customClass: { type: String, default: "" }, customStyle: { type: String, defaut: "" }, /** 控制是否可见 */ visible: { type: Boolean, default: !0 }, /** 内部控件布局是否响应国际化 */ adaptForLanguage: { type: Boolean, default: !0 }, /** 绑定动态字段 */ fields: { type: Array, default: [] }, /** 绑定动态字段的值*/ formData: { type: Object, default: null }, /** 为动态字段指定样式*/ layout: { type: String, default: "col-12 col-md-6 col-xl-3 col-el-2" } }, _s = Object.assign({}, Xt, { // 是否渲染form层级 canRenderForm: { type: Boolean, default: !0 }, /** * 回调方法 * @param methodName 是回调方法名称 * @param viewSchema 是当前组件的视图配置 * @param eventParams 是回调方法接收的参数 * @param editorSchema 是当前组件的编辑器配置 */ callback: { type: Function }, /** 设置Section的主标题 */ mainTitle: { type: String, default: "" }, /** 设置是否显示头部区域 */ showHeader: { type: Boolean, default: !1 }, /** 设置头部标题渲染函数 */ headerTitleRenderFunction: { type: Function }, /** 设置头部内容渲染函数 */ headerContentRenderFunction: { type: Function }, /** 设置底部内容渲染函数 */ footerRenderFunction: { type: Function }, /** 显示底部区域 */ showFooter: { type: Boolean, default: !1 }, /** 展开文本 */ expandLabel: { type: String, default: "展开" }, /** 收起文本 */ collapseLabel: { type: String, default: "收起" }, enableAccordion: { type: Boolean, default: !0 }, /** 模式 **/ mode: { type: String, default: Ht.QUICK }, /** 工具栏 */ toolbar: { type: [Array, Function], default: [] }, /** 设置头部的样式 */ headerStyle: { type: [String, Function], default: "" }, /** 设置底部样式 */ footerStyle: { type: [String, Function], default: "" }, /** 更多按钮样式 */ moreButtonClass: { type: String, default: "btn-link" } }); vt(Xt, Ns, Ho, $o); vt(Xt, Us, Ho, $o); const At = /* @__PURE__ */ Me({ name: "FDynamicForm", props: _s, emits: ["update:modelValue", "event", "click"], setup(e, n) { const t = T(e.fields), o = /* @__PURE__ */ new Map(), r = T(e.callback); fa(); const i = ma(), a = T(e.formData || {}), u = pa(a, n); ha(t.value).setup(); const s = /* @__PURE__ */ new Map(), l = T(e.canRenderForm); let m = [], h = [], f = []; const c = e.mode === Ht.FULL ? "contents" : "fields", { mergeArray: p, resolveCallbacks: y, resolveEvents: k } = ga(), v = X(() => { const V = Le.getLocale(), K = e.fields && e.fields.length > 0; let ee = { "f-form-layout": K, "farris-form": K, "f-dynamic-form": !(e.showHeader || e.showFooter) }; return ee = Po(ee, e.customClass), e.adaptForLanguage && V && (ee["farris-form-controls-inline"] = V !== "en"), ee; }); function b() { function V(K, ee) { const { id: oe } = K || {}, { field: fe } = K.binding || {}; return { modelValue: ee.getValue(oe), "onUpdate:modelValue": (Ve) => { ee.setValue(oe, fe || oe, Ve); } }; } return { resolve: V }; } function P(V) { const K = b(); return u.getValue(V.id) === void 0 && Object.hasOwnProperty.call(V, "modelValue") && u.setValue(V.id, void 0, V.modelValue), K.resolve(V, u); } function q(V) { const K = {}; return V && Object.entries(V).forEach(([ee, oe]) => { K[ee] = () => Array.isArray(oe) ? oe.map((fe) => g(fe)) : g(oe); }), K; } function j(V) { return V.type ? V.type : V[c] ? "fieldset" : "form-group"; } function O(V) { const K = j(V), ee = V.customClass || ""; return ee || (K === "fieldset" ? "col-12 px-0" : m.length === 0 && h.length === 0 || V.id && f.find((oe) => oe[c] ? oe[c].find((fe) => fe.id === V.id) : oe.id === V.id) ? e.layout : "unset-item"); } function M(V) { const K = j(V); let ee = {}, oe = "", fe = {}, Ve = {}; if (e.mode === Ht.FULL) { fe = { ...k(V, n, K) }, Ve = { ...y(V, r, K) }; const ge = ya[K]; ee = ge ? ge(V) : {}, oe = O(ee); } else { oe = O(V); const { fields: ge, customClass: Re, ...Ie } = V; ee = Ie; } return { props: { ...{ ...ee, customClass: oe, ...P(V) }, key: V.id, ref: (ge) => { if (ge && V.id && !i.has(V.id)) { i.register(V.id, ge); const Re = { token: V.id, name: "component:ready", type: j(V), payloads: [T(ge)], schema: V }; n.emit("event", Re); } }, onVnodeUnmounted: (ge) => { if (V.id && i.has(V.id)) { i.remove(V.id); const Re = { token: V.id, name: "component:unmounted", type: j(V), payloads: [ge], schema: V }; n.emit("event", Re); } } }, eventProps: fe, callbackProps: Ve }; } function C(V, K) { return Array.isArray(V) ? V.map((ee) => K(ee)) : K(V); } function g(V, K) { var Be; const ee = j(V), oe = cn[ee]; if (V.id && o.set(V.id, V), !oe) return null; const fe = () => V[c] ? V[c].map((ge) => g(ge)) : null, Ve = (ge, Re, Ie) => { let $e; return Ie && Ie.length > 0 ? $e = x(ge, { ...Re }, Ie) : $e = x(ge, { ...Re }, null), $e; }, _e = ((Be = s.get(V.id)) == null ? void 0 : Be.props) || {}; return V[c] && V[c].length > 0 ? Ve(oe, _e, [fe()]) : V.slots ? Ve(oe, _e, [...Object.values(q(V.slots))]) : Ve(oe, _e); } function w(V) { const K = j(V); if (!cn[K]) return; const { props: oe, eventProps: fe, callbackProps: Ve } = M(V), _e = va[K], Be = _e ? _e.editorResolver : null, { componentEventProps: ge, editorEventProps: Re } = fe, { componentCallbackProps: Ie, editorCallbackProps: $e } = Ve; if (ge && Object.keys(ge).length > 0 && Object.assign(oe, ge), Ie && Object.keys(Ie).length > 0 && Object.assign(oe, Ie), Be && Re && Object.keys(Re).length > 0) { const Ae = Be.resolve(V); Object.assign(Ae, Re); } if (Be && $e && Object.keys($e).length > 0) { const Ae = Be.resolve(V); Object.assign(Ae, $e); } if (oe && Object.keys(oe).length > 0) { const Ae = s.get(V.id); Ae ? la(Ae == null ? void 0 : Ae.props, oe) : s.set(V.id, Un({ props: oe })); } !V[c] || !Array.isArray(V[c]) || V[c].forEach((Ae) => w(Ae)); } function F(V) { const K = j(V); cn[K] && (E(V), !(!V[c] || !Array.isArray(V[c])) && V[c].forEach((oe) => F(oe))); } function E(V) { const K = P(V); if (K && Object.keys(K).length > 0) { const ee = s.get(V.id); if (!ee) s.set(V.id, Un({ props: K })); else { const oe = { ...ee == null ? void 0 : ee.props }; Object.keys(K).forEach((fe) => { oe[fe] = K[fe]; }), Object.assign(ee == null ? void 0 : ee.props, oe); } } } tt(() => { }), ue(() => e.formData, (V) => { a.value = V; }), ue(() => a.value, () => { C(t.value, F); }, { deep: !0 }); function S(V, K = "") { return K ? V.filter((ee) => ee.position === K) : V.filter((ee) => !ee.position || [Tt.Header, Tt.Footer].indexOf(ee.position) < 0); } function B(V) { V && (m = S(V, Tt.Header), m.length && C(m, w), h = S(V, Tt.Footer), h.length && C(h, w), f = S(V), f.length && C(f, w)); } ue(() => e.fields, (V) => { o.clear(), i.clear(), a.value = e.formData || {}, s.clear(), t.value = V, B(V); }), B(e.fields); function A(V) { V.$forceUpdate && V.$forceUpdate(); } function H(V) { return u.getValue(V); } function L() { return a.value; } function N(V, K) { u.setValue(V, void 0, K); const ee = o.get(V); ee && E(ee); } function $(V) { var K; return (K = s.get(V)) == null ? void 0 : K.props; } function Q(V, K) { const ee = s.get(V); sa(ee == null ? void 0 : ee.props, K, p); } n.expose({ componentManager: i, rerender: A, getProps: $, setProps: Q, getControlValue: H, setControlValue: N, getValues: L }); function _(V = []) { return V.length > 0 && C(V, g); } function te(V) { return Ot(x("div", { class: v.value, style: e.customStyle }, [n.slots.default && n.slots.default(), V.length > 0 && C(V, g)]), [[$t("area-response")]]); } function ie() { const V = {}; let K = "f-dynamic-form-section--header-content", ee = "f-dynamic-form-section--footer"; return e.showHeader && (n.slots.headerTitle && (V.headerTitle = () => { var oe, fe; return (fe = (oe = n.slots).headerTitle) == null ? void 0 : fe.call(oe); }), K += e.headerContentRenderFunction || n.slots.headerContent ? " f-dynamic-form-section--header-cotnent-tmpl" : "", n.slots.headerContent ? V.headerContent = () => { var oe, fe; return (fe = (oe = n.slots).headerContent) == null ? void 0 : fe.call(oe); } : !e.headerContentRenderFunction && m.length > 0 && (V.headerContent = () => Ot(x("div", { class: "f-form-layout farris-form farris-form-controls-inline f-dynamic-form-section--fields" }, [_(m)]), [[$t("area-response")]]))), e.showFooter && (ee += e.footerRenderFunction || n.slots.footer ? " f-dynamic-form-section--footer-tmpl"