@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,365 lines • 59.3 kB
JavaScript
var j = Object.defineProperty;
var K = (p, n, e) => n in p ? j(p, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[n] = e;
var y = (p, n, e) => K(p, typeof n != "symbol" ? n + "" : n, e);
import { ref as F, computed as E, defineComponent as R, createVNode as C, nextTick as Z, inject as B, onMounted as z } from "vue";
import { resolveAppearance as $, createPropsResolver as J } from "../dynamic-resolver/index.esm.js";
import "../locale/index.esm.js";
import { DgControl as l, canvasChanged as M, refreshCanvas as X, useDesignerComponent as Y } from "../designer-canvas/index.esm.js";
import { cloneDeep as D } from "lodash-es";
import { FormSchemaEntityField$Type as L, FormSchemaEntityFieldType$Type as _, withInstall as ee } from "../common/index.esm.js";
function te(p, n, e) {
return n;
}
const ie = /* @__PURE__ */ new Map([
["appearance", $]
]), ne = "https://json-schema.org/draft/2020-12/schema", se = "https://farris-design.gitee.io/avatar.schema.json", re = "avatar", oe = "A Farris Component", ae = "object", le = {
id: {
description: "The unique identifier for avatar",
type: "string"
},
type: {
description: "The type string of avatar",
type: "string",
default: "avatar"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disabled: {
type: "boolean",
default: !1
},
avatarWidth: {
description: "",
type: "number",
default: 100
},
avatarHeight: {
description: "",
type: "number",
default: 100
},
readonly: {
description: "",
type: "boolean",
default: !1
},
cover: {
description: "",
type: "string",
default: ""
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, de = [
"id",
"type"
], ce = [
"id",
"appearance",
"binding",
"visible"
], ue = {
$schema: ne,
$id: se,
title: re,
description: oe,
type: ae,
properties: le,
required: de,
ignore: ce
}, T = {
/**
* 头像宽度
*/
avatarWidth: { type: Number, default: 100 },
/**
* 头像高度
*/
avatarHeight: { type: Number, default: 100 },
/**
* 组件标识
*/
cover: { type: String },
/**
* 只读
*/
readonly: { type: Boolean, default: !1 },
/**
* 头像形状
*/
shape: { type: String, default: "circle" },
/**
* 头像最大尺寸, 单位MB
*/
maxSize: { type: Number, default: 1 },
/**
* 组件值
*/
modelValue: { type: String, default: "" },
/**
* 头像标题
*/
title: { type: String, default: "" },
/**
* 支持的头像类型
*/
imageType: { type: Array, default: ["jpeg"] }
}, U = J(T, ue, ie, te);
function q(p, n, e, t) {
const i = "data:image/jpeg;base64,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", s = F(p.readonly);
function r(g) {
return g.match(/\.(jpeg|jpg|gif|png|svg|bmp|webp)$/) != null;
}
function c(g) {
return g.indexOf("data:image/") > -1;
}
function a(g) {
return "data:image/jpeg;base64," + g;
}
const u = E(() => {
var m;
if (!p.imageType || !p.imageType.length)
return "";
const g = (m = p.imageType) == null ? void 0 : m.map((h) => (h === "jpg" && (h = "jpeg"), `image/${h}`));
return !g || !g.length ? "image/*" : g.join(",");
}), d = E(() => {
const g = t.value || p.cover || i;
return r(g) || c(g) ? g : a(g);
}), o = E(() => s.value ? "" : p.title);
function f() {
s.value || e && e.value && e.value.click();
}
return { acceptTypes: u, imageSource: d, imageTitle: o, onClickImage: f };
}
const P = /* @__PURE__ */ R({
name: "FAvatar",
props: T,
emits: ["change", "update:modelValue"],
setup(p, n) {
const e = E(() => ({
"f-avatar": !0,
"f-avatar-readonly": p.readonly,
"f-avatar-circle": p.shape === "circle",
"f-avatar-square": p.shape === "square"
})), t = F(p.modelValue), i = E(() => ({
width: p.avatarWidth + "px",
height: p.avatarHeight + "px"
})), s = !1;
function r() {
return "";
}
function c() {
}
const a = F(null), {
acceptTypes: u,
imageSource: d,
onClickImage: o
} = q(p, n, a, t);
return () => C("div", {
class: e.value,
style: i.value,
onClick: o
}, [s, C("img", {
title: p.title,
class: "f-avatar-image",
src: d.value,
onError: r
}, null), !p.readonly && C("div", {
class: "f-avatar-icon"
}, [C("span", {
class: "f-icon f-icon-camera"
}, null)]), C("input", {
ref: "file",
name: "file-input",
type: "file",
class: "f-avatar-upload",
accept: u.value,
onChange: c,
style: "display: none;"
}, null)]);
}
});
function pe(p) {
const { formSchemaUtils: n, formStateMachineUtils: e } = p;
function t(a, u = "") {
return {
path: u + a.code,
field: a.id,
fullPath: a.code
};
}
function i(a, u = "") {
const d = n.getViewModelById(a);
return d ? d.states.map((o) => t(o, u)) : [];
}
function s(a) {
const u = n.getRootViewModelId(), d = i(a);
if (a === u)
return d;
const o = i(u, "root-component.");
return [...d, ...o];
}
function r(a) {
return a.binding && a.binding.path || a.id || "";
}
function c() {
return e && e.getRenderStates() || [];
}
return { getVariables: s, getControlName: r, getStateMachines: c };
}
class ge {
constructor(n) {
y(this, "sessionVariables", [
{
key: "CurrentSysOrgName",
name: "当前组织Name",
description: "当前组织Name"
},
// {
// key: "CurrentSysOrgCode",
// name: "当前组织Code",
// description: "当前组织Code"
// },
{
key: "CurrentSysOrgId",
name: "当前组织Id",
description: "当前组织Id"
},
{
key: "CurrentUserName",
name: "当前用户Name",
description: "当前用户Name"
},
{
key: "CurrentUserCode",
name: "当前用户Code",
description: "当前用户Code"
},
{
key: "CurrentUserId",
name: "当前用户Id",
description: "当前用户Id"
},
{
key: "CurrentLanguage",
name: "当前语言编号",
description: "当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'"
}
]);
y(this, "expressionNames", {
compute: "计算表达式",
dependency: "依赖表达式",
validate: "验证表达式",
dataPicking: "帮助前表达式",
visible: "可见表达式",
readonly: "只读表达式",
required: "必填表达式"
});
y(this, "getExpressionConverter", (n, e) => ({
convertFrom: (t, i, s, r) => {
const c = s.getExpressionRuleValue(n, e || i);
return c && c.value || "";
},
convertTo: (t, i, s, r, c) => {
var a;
if (i === "dataPicking" && (s != null && s.target)) {
const u = `${s.target}_dataPicking`;
((a = s.rules) == null ? void 0 : a.some(
(o) => o.id === u && o.value
)) ? t.dictPickingExpressionId = u : delete t.dictPickingExpressionId;
}
r.updateExpression(s);
}
}));
this.formSchemaService = n;
}
getExpressionRule(n, e) {
const t = this.getExpressionData();
if (!t)
return "";
const i = t.find((r) => r.target === n);
if (!i)
return "";
const s = i.rules.find((r) => r.type === e);
return s || "";
}
// 获取上下文表单变量
getContextFormVariables() {
const { module: n } = this.formSchemaService.getFormSchema();
if (!n.viewmodels || n.viewmodels.length === 0)
return [];
const e = this.formSchemaService.getRootViewModelId(), t = this.formSchemaService.getViewModelById(e);
if (!t || !t.states || t.states.length === 0)
return [];
const i = [];
return t.states.filter((s) => s.category === "remote").forEach((s) => {
i.push({
key: s.code,
name: s.name,
description: s.name,
category: s.category
});
}), i;
}
createTreeNode(n, e, t = "label") {
return {
id: n.id,
name: n.name,
bindingPath: n[t],
parents: e,
type: "field"
};
}
buildEntityFieldsTreeData(n = null, e) {
const t = [];
return n == null || n.forEach((i) => {
var c;
const s = this.createTreeNode(i, e);
let r = [];
(c = i.type) != null && c.fields && (r = this.buildEntityFieldsTreeData(i.type.fields, [...e, i.label])), t.push({
data: s,
children: r,
expanded: !0
});
}), t;
}
buildChildEntityTreeData(n = null, e) {
const t = [];
return n == null || n.forEach((i) => {
var a, u;
const s = this.createTreeNode(i, e);
s.type = "entity";
const r = this.buildEntityFieldsTreeData((a = i.type) == null ? void 0 : a.fields, [...e, i.label]), c = this.buildChildEntityTreeData((u = i.type) == null ? void 0 : u.entities, [...e, i.label]);
c != null && c.length && (r == null || r.push(...c)), t.push({
data: s,
children: r || [],
// 空值回退
expanded: !0
});
}), t;
}
getEntitiesTreeData() {
const n = this.formSchemaService.getSchemaEntities();
if (!(n != null && n.length))
return [];
const e = n[0];
if (!(e != null && e.type))
return [];
const t = this.buildEntityFieldsTreeData(e.type.fields, [e.code]), i = this.buildChildEntityTreeData(e.type.entities, [e.code]);
return i != null && i.length && (t == null || t.push(...i)), {
entityCode: e.code,
fields: [{
data: this.createTreeNode(e, [], "code"),
children: t || []
}]
};
}
getEntitiesAndVariables() {
return {
entities: this.getEntitiesTreeData(),
variables: {
session: {
name: "系统变量",
items: this.sessionVariables,
visible: !1
},
forms: {
name: "表单变量",
items: this.getContextFormVariables(),
visible: !0
}
}
};
}
onBeforeOpenExpression(n, e, t) {
const i = t === "Field" ? n.binding.field : n.id, s = this.getExpressionRule(i, e), r = this.getEntitiesAndVariables(), c = {
message: ["validate", "required", "dataPicking"].includes(e) && s ? s.message : "",
...r
};
return s.messageType != null && (c.messageType = s.messageType), c;
}
buildRule(n, e, t, i) {
const { expression: s, message: r, messageType: c } = e, a = {
id: `${n}_${t}`,
type: t,
value: s
};
return (t === "validate" || t === "dataPicking" || t === "required") && (a.message = r), t === "dataPicking" && (a.messageType = c), t === "validate" && i && (a.elementId = i), a;
}
getExpressionData() {
const { expressions: n } = this.formSchemaService.getFormSchema().module;
return n || [];
}
updateExpression(n, e, t, i) {
const s = e === "Field" ? n.binding.field : n.id, r = this.buildRule(s, t, i, n.type === "form-group" ? n.id : "");
let a = this.getExpressionData().find((d) => d.targetType === e && d.target === s);
const u = (d) => d.value.trim() === "";
if (a) {
const d = a.rules.find((o) => o.id === r.id);
if (d)
u(r) ? a.rules = a.rules.filter((o) => o.id !== r.id) : (Object.assign(d, r), i === "validate" && n.type === "form-group" && (d.elementId = n.id));
else {
if (u(r))
return null;
a.rules = a.rules || [], a.rules.push(r);
}
} else {
if (u(r))
return null;
a = {
target: `${s}`,
rules: [r],
targetType: e
};
}
return a;
}
getExpressionEditorOptions(n, e, t, i) {
return t.reduce((s, r) => {
var a, u;
const c = e === "Field" ? (a = n == null ? void 0 : n.binding) == null ? void 0 : a.field : n.id;
return s[r] = {
hide: e === "Field" ? !!((u = n == null ? void 0 : n.binding) != null && u.field) : !1,
description: "",
title: this.expressionNames[r],
type: "string",
$converter: this.getExpressionConverter(c),
refreshPanelAfterChanged: !0,
editor: {
type: "expression-editor",
singleExpand: !1,
dialogTitle: `${this.expressionNames[r]}编辑器`,
showMessage: r === "validate" || r === "dataPicking" || r === "required",
showMessageType: r === "dataPicking",
beforeOpen: () => this.onBeforeOpenExpression(n, r, e),
onSubmitModal: (d) => {
const o = this.updateExpression(n, e, d, r);
if (i) {
const f = this.buildRule(c, d, r);
i(f);
}
return o;
}
}
}, s;
}, {});
}
getExpressionInfo(n, e, t) {
const i = e === "Field" ? n.binding.field : n.id, s = this.getExpressionRule(i, t), r = {
value: s && s.value,
targetId: i,
targetType: e,
expressionType: t
};
return s && s.message && (r.message = s.message), r;
}
getExpressionConfig(n, e, t = ["compute", "dependency", "validate"], i) {
return {
description: "表达式",
title: "表达式",
hide: !n.binding,
properties: {
...this.getExpressionEditorOptions(n, e, t, i)
}
};
}
getExpressionOptions(n, e, t) {
const i = this.getExpressionInfo(n, e, t);
return {
dialogTitle: `${this.expressionNames[t] || "表达式"}编辑器`,
singleExpand: !1,
showMessage: t === "required",
beforeOpen: () => this.onBeforeOpenExpression(n, t, e),
expressionInfo: i
};
}
}
class me {
constructor(n, e) {
y(this, "componentId");
y(this, "viewModelId");
y(this, "eventsEditorUtils");
y(this, "formSchemaUtils");
y(this, "formMetadataConverter");
y(this, "designViewModelUtils");
y(this, "designViewModelField");
y(this, "controlCreatorUtils");
y(this, "designerHostService");
y(this, "designerContext");
y(this, "modalService", null);
/** 表单规则 */
y(this, "formRule", null);
y(this, "schemaService", null);
y(this, "metadataService", null);
y(this, "propertyConfig", {
type: "object",
categories: {}
});
y(this, "expressionProperty");
var t;
this.componentId = n, this.designerHostService = e, this.eventsEditorUtils = e.eventsEditorUtils, this.formSchemaUtils = e.formSchemaUtils, this.formMetadataConverter = e.formMetadataConverter, this.viewModelId = ((t = this.formSchemaUtils) == null ? void 0 : t.getViewModelIdByComponentId(n)) || "", this.designViewModelUtils = e.designViewModelUtils, this.controlCreatorUtils = e.controlCreatorUtils, this.metadataService = e.metadataService, this.schemaService = e.schemaService, this.designerContext = e.designerContext, this.modalService = e.modalService, this.expressionProperty = new ge(this.formSchemaUtils);
}
getFormDesignerInstance() {
var n, e;
return (e = (n = this.designerContext) == null ? void 0 : n.instances) == null ? void 0 : e.formDesigner.value;
}
getTableInfo() {
var n;
return (n = this.schemaService) == null ? void 0 : n.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(n) {
var t;
const e = n.binding && n.binding.type === "Form" && n.binding.field;
if (e) {
if (!this.designViewModelField) {
const i = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = i.fields.find((s) => s.id === e);
}
n.updateOn = (t = this.designViewModelField) == null ? void 0 : t.updateOn;
}
}
getBasicPropConfig(n) {
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",
idField: "value",
editable: !1,
data: [{ value: n.type, name: l[n.type] && l[n.type].name }]
}
}
}
};
}
getAppearanceConfig(n = null, e = {}, t) {
const i = {
title: "外观",
description: "Appearance"
}, s = {
class: {
title: "class样式",
type: "string",
description: "组件的CSS样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
},
style: {
title: "style样式",
type: "string",
description: "组件的样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
}
};
for (const r in e)
s[r] = Object.assign(s[r] || {}, e[r]);
return {
...i,
properties: { ...s },
setPropertyRelates(r, c) {
if (r) {
switch (r && r.propertyID) {
case "class":
case "style": {
M.value++;
break;
}
}
t && t(r, n, c);
}
}
};
}
/**
*
* @param propertyData
* @param propertyTypes
* @param propertyName
* @param constInfos
* @param variableInfos
* @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
* @returns
*/
getPropertyEditorParams(n, e = [], t = "visible", i = {}, s = {}, r = "") {
const { getVariables: c, getControlName: a, getStateMachines: u } = pe(this.designerHostService), d = this.getRealTargetType(n), o = e && e.length > 0 ? e : ["Const", "Variable", "StateMachine", "Expression"], f = {
type: "property-editor",
propertyTypes: o
};
return o.map((g) => {
switch (g) {
case "Const":
Object.assign(f, {
constType: "enum",
constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
}, i);
break;
case "Expression":
f.expressionConfig = this.getExpressionOptions(n, d, r || t);
break;
case "StateMachine":
f.stateMachines = u();
break;
case "Variable":
Object.assign(f, {
controlName: a(n),
newVariablePrefix: "is",
newVariableType: "Boolean",
variables: c(this.viewModelId),
parentComponentId: this.componentId === "root-component" ? "" : "root-component",
onBeforeOpenVariables: (m) => {
m.value = c(this.viewModelId);
}
}, s), this.designerContext.designerMode === "PC_RTC" && (f.newVariablePrefix = "ext_" + f.newVariablePrefix);
break;
}
}), f;
}
getVisibleProperty(n, e = "") {
var s;
let t = ["Const", "Variable", "StateMachine", "Expression"];
return e === "gridFieldEditor" ? t = ["Const", "Expression"] : e === "form-group" && !((s = n.binding) != null && s.field) && (t = ["Const", "Variable", "StateMachine"]), {
visible: {
title: "是否可见",
type: "boolean",
description: "运行时组件是否可见",
editor: this.getPropertyEditorParams(n, t, "visible")
}
};
}
/**
* 获取行为
* @param propertyData
* @param viewModelId
* @returns
*/
getBehaviorConfig(n, e = "", t = {}, i) {
const s = {
title: "行为",
description: ""
}, r = this.getVisibleProperty(n, e);
for (const a in t)
r[a] = Object.assign(r[a] || {}, t[a]);
const c = this;
return {
...s,
properties: { ...r },
setPropertyRelates(a, u) {
if (a) {
switch (a.propertyID) {
case "disabled":
case "readonly":
case "visible":
c.afterMutilEditorChanged(n, a);
break;
}
i && i(a, u);
}
}
};
}
/**
* 当多值编辑器变更时
* @param propertyData
* @param changeObject
*/
afterMutilEditorChanged(n, e) {
this.addNewVariableToViewModel(e, this.viewModelId), this.updateExpressionValue(e, n), this.clearExpression(e, n);
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(n, e) {
const t = e && e.parent && e.parent.schema;
if (!t)
return;
const i = t.contents.findIndex((r) => r.id === n), s = D(t.contents[i]);
t.contents.splice(i, 1), t.contents.splice(i, 0, s), X();
}
/**
* 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
* @param changeObject
* @param viewModelId
* @returns
*/
addNewVariableToViewModel(n, e) {
const t = n.propertyValue;
if (!(t && typeof t == "object") || !(t.type === "Variable" && t.isNewVariable))
return;
const r = {
id: t.field,
category: "locale",
code: t.fullPath,
name: t.fullPath,
type: t.newVariableType || "String",
isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
};
delete t.newVariableType, delete t.isNewVariable, this.formSchemaUtils.getVariableByCode(r.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(r);
}
getExpressions() {
let n = [];
return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], n = this.formRule.expressions || []) : n = this.formSchemaUtils.getExpressions(), n;
}
/**
* 更新表达式到expressions节点
* @param changeObject
*/
updateExpressionValue(n, e) {
const t = n.propertyValue;
if (!((t && t.type) === "Expression" && t.expressionInfo))
return;
const { expressionId: r, expressionInfo: c } = t, { targetId: a, targetType: u, expressionType: d, value: o, message: f } = c, g = this.getExpressions();
let m = g.find((A) => A.target === a);
m || (m = { target: a, rules: [], targetType: u }, g.push(m));
const h = m.rules.find((A) => A.type === d);
if (h)
h.value = o, h.message = f, (d === "minDate" || d === "maxDate" || d === "defaultTime") && (h.elementId = e.id);
else {
const A = { id: r, type: d, value: o, message: f, elementId: e.id };
m.rules.push(A);
}
delete t.expressionInfo;
}
/**
* 属性类型切换为非表达式后，清除原表达式
* @param changeObject
* @param propertyData
* @returns
*/
clearExpression(n, e) {
const t = n.propertyValue;
if (t && t.type === "Expression")
return;
const s = n.propertyID, r = this.getExpressions(), c = e.binding ? e.binding.field : e.id, a = r.find((u) => u.target === c);
!a || !a.rules || (a.rules = a.rules.filter((u) => u.type !== s));
}
getExpressionOptions(n, e, t) {
return this.expressionProperty.getExpressionOptions(n, e, t);
}
getRealTargetType(n) {
return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(n.type) > -1 ? "Button" : n.binding && n.binding.field ? "Field" : "Container";
}
createBaseEventProperty(n) {
const e = {};
return e[this.viewModelId] = {
type: "events-editor",
editor: {
initialData: n,
viewSourceHandle: (t) => {
var i;
((i = t.controller) == null ? void 0 : i.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(t);
}
}
}, e;
}
}
const I = class I {
/**
* 根据绑定字段类型获取可用的输入类控件
*/
static getEditorTypesByMDataType(n, e = !1, t = "") {
if (e)
return [{ key: l["language-textbox"].type, value: l["language-textbox"].name }];
let i = I.fieldControlTypeMapping[n];
if (t === "data-grid-column" && (i != null && i.length)) {
const s = [l["check-group"].type, l["radio-group"].type, l.image.type, l["rich-text-editor"].type];
i = i.filter((r) => !s.includes(r.key));
}
return i;
}
/**
* 获取所有输入类控件
*/
static getAllInputTypes() {
const n = [];
for (const e in I.fieldControlTypeMapping)
I.fieldControlTypeMapping[e].forEach((t) => {
n.find((i) => i.key === t.key && i.value === t.value) || n.push({ key: t.key, value: t.value });
});
return n;
}
/**
* 提供schema字段基础属性和DOM控件属性的映射
* @param control 控件元数据
*/
static mappingDomPropAndSchemaProp(n, e) {
var s;
const t = (s = n.editor) == null ? void 0 : s.type, i = [];
return (n.type === l["data-grid-column"].type || n.type === l["tree-grid-column"].type) && e && e.categoryId && e.categoryId.indexOf("gridFieldEditor") < 0 && i.push({ domField: "title", schemaField: "name" }), i.push({ domField: "label", schemaField: "name" }), i.push({ domField: "editor.required", schemaField: "require" }), i.push({ domField: "editor.readonly", schemaField: "readonly" }), (t === l["input-group"].type || t === l.textarea.type || t === l["number-spinner"].type) && i.push({ domField: "editor.maxLength", schemaField: "type.length" }), t === l["number-spinner"].type && i.push({ domField: "editor.precision", schemaField: "type.precision" }), (n.type === l["data-grid-column"].type || n.type === l["tree-grid-column"].type) && i.push({ domField: "formatter.precision", schemaField: "type.precision" }), (t === l["combo-list"].type || t === l["radio-group"].type) && i.push({ domField: "editor.data", schemaField: "type.enumValues" }), (n.type === l["data-grid-column"].type || n.type === l["tree-grid-column"].type) && i.push({ domField: "formatter.data", schemaField: "type.enumValues" }), t === l["date-picker"].type && (i.push({ domField: "editor.displayFormat", schemaField: "editor.format" }), i.push({ domField: "editor.fieldType", schemaField: "type.name" })), t === l["number-spinner"].type && (i.push({ domField: "editor.max", schemaField: "editor.maxValue" }), i.push({ domField: "editor.min", schemaField: "editor.minValue" })), t === l.lookup.type && (i.push({ domField: "editor.dataSource", schemaField: "editor.dataSource" }), i.push({ domField: "editor.valueField", schemaField: "editor.valueField" }), i.push({ domField: "editor.textField", schemaField: "editor.textField" }), i.push({ domField: "editor.displayType", schemaField: "editor.displayType" }), i.push({ domField: "editor.mapFields", schemaField: "editor.mapFields" }), i.push({ domField: "editor.helpId", schemaField: "editor.helpId" })), i.push({ domField: "path", schemaField: "bindingPath" }), i.push({ domField: "binding.path", schemaField: "bindingField" }), i.push({ domField: "binding.fullPath", schemaField: "path" }), (n.type === l["data-grid-column"].type || n.type === l["tree-grid-column"].type) && i.push({ domField: "field", schemaField: "bindingPath" }), i;
}
};
/**
* <字段类型,可配置的控件类型列表>的映射
*/
y(I, "fieldControlTypeMapping", {
String: [
{ key: l["input-group"].type, value: l["input-group"].name },
{ key: l.lookup.type, value: l.lookup.name },
{ key: l.image.type, value: l.image.name },
{ key: l["date-picker"].type, value: l["date-picker"].name },
{ key: l.switch.type, value: l.switch.name },
{ key: l["check-box"].type, value: l["check-box"].name },
{ key: l["check-group"].type, value: l["check-group"].name },
{ key: l["radio-group"].type, value: l["radio-group"].name },
{ key: l["combo-list"].type, value: l["combo-list"].name },
{ key: l.textarea.type, value: l.textarea.name },
{ key: l["time-picker"].type, value: l["time-picker"].name }
],
Text: [
{ key: l.textarea.type, value: l.textarea.name },
{ key: l.lookup.type, value: l.lookup.name },
{ key: l.image.type, value: l.image.name },
{ key: l["rich-text-editor"].type, value: l["rich-text-editor"].name }
],
Decimal: [
{ key: l["number-spinner"].type, value: l["number-spinner"].name }
],
Integer: [
{ key: l["number-spinner"].type, value: l["number-spinner"].name }
],
Number: [
{ key: l["number-spinner"].type, value: l["number-spinner"].name },
{ key: l.switch.type, value: l.switch.name },
{ key: l["check-box"].type, value: l["check-box"].name }
],
BigNumber: [
{ key: l["number-spinner"].type, value: l["number-spinner"].name }
],
Date: [
{ key: l["date-picker"].type, value: l["date-picker"].name }
],
DateTime: [
{ key: l["date-picker"].type, value: l["date-picker"].name }
],
Boolean: [
{ key: l.switch.type, value: l.switch.name },
{ key: l["check-box"].type, value: l["check-box"].name }
],
Enum: [
{ key: l["combo-list"].type, value: l["combo-list"].name },
{ key: l["radio-group"].type, value: l["radio-group"].name }
],
Object: [
{ key: l.lookup.type, value: l.lookup.name },
{ key: l["combo-list"].type, value: l["combo-list"].name },
{ key: l["radio-group"].type, value: l["radio-group"].name }
]
});
let S = I;
var V = /* @__PURE__ */ ((p) => (p.Form = "Form", p.Variable = "Variable", p))(V || {});
class N {
constructor() {
/** 控件标题 */
y(this, "label", "");
/** 控件id */
y(this, "id", "");
/** 每个控件占用的栅格数 */
y(this, "columnInSM", 12);
y(this, "columnInMD", 6);
y(this, "columnInLG", 3);
y(this, "columnInEL", 2);
/** 每个控件占用的列数 */
y(this, "displayWidthInSM", 1);
y(this, "displayWidthInMD", 1);
y(this, "displayWidthInLG", 1);
y(this, "displayWidthInEL", 1);
/** 编辑器内部默认显示的屏幕大小-----可以去掉 */
y(this, "displayColumnCountAtBreakPoint", "md");
/** 控件所在行，传0即可-----编辑器内部使用 */
y(this, "tagRow", 0);
/** 控件是否显示上方空白：传0即可-----编辑器内部使用 */
y(this, "showTopBorder", 0);
/** 区域，从1开始。卡片内的控件从上往下，从左往右划分区域，遇到分组fieldSet时group+1，分组结束后group+1 */
y(this, "group", 1);
/** 控件是否符合标准的class配置(设计器用的) */
y(this, "isSupportedClass", !0);
/** 控件所在分组id(设计器用的) */
y(this, "fieldSetId", "");
}
}
function fe(p) {
let n, e;
const t = /* @__PURE__ */ new Map();
let i = [];
function s(d, o) {
const g = ((d == null ? void 0 : d.split(" ")) || []).filter((b) => b.startsWith("col-"));
if (g.length === 0) {
o.isSupportedClass = !1;
return;
}
let m = g.find((b) => /^col-([1-9]|10|11|12)$/.test(b)), h = g.find((b) => /^col-md-([1-9]|10|11|12)$/.test(b)), A = g.find((b) => /^col-xl-([1-9]|10|11|12)$/.test(b)), v = g.find((b) => /^col-el-([1-9]|10|11|12)$/.test(b));
m = m || "col-12", o.columnInSM = parseInt(m.replace("col-", ""), 10), o.displayWidthInSM = o.columnInSM / 12, o.displayWidthInSM !== 1 && (o.isSupportedClass = !1), h = h || "col-md-" + o.columnInSM, o.columnInMD = parseInt(h.replace("col-md-", ""), 10), o.displayWidthInMD = o.columnInMD / 6, [1, 2].includes(o.displayWidthInMD) || (o.isSupportedClass = !1), A = A || "col-xl-" + o.columnInMD, o.columnInLG = parseInt(A.replace("col-xl-", ""), 10), o.displayWidthInLG = o.columnInLG / 3, [1, 2, 3, 4].includes(o.displayWidthInLG) || (o.isSupportedClass = !1), v = v || "col-el-" + o.columnInLG, o.columnInEL = parseInt(v.replace("col-el-", ""), 10), o.displayWidthInEL = o.columnInEL / 2, [1, 2, 3, 4, 5, 6].includes(o.displayWidthInEL) || (o.isSupportedClass = !1);
}
function r(d, o, f, g = !1) {
let m = !1;
if (!d.contents || d.contents.length === 0) {
const h = new N();
s(d.layout, h), o.push(h);
return;
}
d.contents.forEach((h) => {
if (h.type === "fieldset") {
f += 1, r(h, o, f, !0), m = !0;
return;
}
if (h.type === "dynamic-form")
return;
m && (f += 1, m = !1);
const A = h.appearance && h.appearance.class, v = new N();
A ? s(A, v) : v.isSupportedClass = !1, v.label = h.label || h.id, v.id = h.id, v.group = f, g && (v.fieldSetId = d.id), e === h.id && (n = f), t.set(h.id, h), o.push(v);
});
}
function c(d) {
const o = p.getComponentById(d);
if (!o || !o.componentType || !o.componentType.startsWith("form"))
return { result: !1, message: "只可以在响应式表单组件中调整响应式布局配置" };
const f = p.selectNode(o, (g) => g.type === l["response-form"].type);
return !f || !f.contents || f.contents.length === 0 ? { result: !1, message: "Form区域内没有控件，请先添加控件" } : { result: !0, message: "", formNode: f };
}
function a(d, o) {
o = o || d.id;
const { result: f, message: g, formNode: m } = c(o);
if (!f)
return { result: f, message: g };
e = d.id, i = [], t.clear();
const h = m.contents[0].type === l.fieldset.type ? 0 : 1;
r(m, i, h);
const A = i.find((b) => !b.isSupportedClass);
return {
defaultState: {
defaultGroupNumber: n || 1,
model: A ? "customize" : "standard"
},
importData: i
};
}
function u(d, o) {
o = o;
const { result: f, formNode: g } = c(o);
if (!f)
return "";
const m = [];
return d.forEach((h) => {
var b;
const A = t.get(h.id), v = A.appearance && A.appearance.class;
if (v) {
const x = v.split(" ").filter((O) => !O.startsWith("col-")), w = "col-" + h.columnInSM, H = "col-md-" + h.columnInMD, G = "col-xl-" + h.columnInLG, W = "col-el-" + h.columnInEL, Q = [w, H, G, W].concat(x);
A.appearance.class = Q.join(" ");
}
if (h.fieldSetId) {
const k = g.contents.find((w) => w.id === h.fieldSetId), x = m.find((w) => w.id === h.fieldSetId);
x ? (b = x.contents) == null || b.push(A) : (m.push(k), k.contents = [A]);
} else
m.push(A);
}), g.contents = m, g.id;
}
return {
checkCanFindFormNode: c,
checkCanOpenLayoutEditor: a,
changeFormControlsByResponseLayoutConfig: u,
getResonseFormLayoutConfig: r
};
}
class he extends me {
constructor(e, t) {
super(e, t);
y(this, "responseLayoutEditorFunction");
/** 控件绑定的变量 */
y(this, "bindingVarible");
y(this, "formGroupEvents", [
// {
// label: 'fieldValueChanging',
// name: '绑定字段值变化前事件',
// },
// {
// label: 'fieldValueChanged',
// name: '绑定字段值变化后事件',
// },
{
label: "onClickLabel",
name: "标签点击事件"
}
]);
y(this, "numberEditorOptions", {
type: "number-spinner",
useThousands: !1,
keyboard: !1,
showButton: !1
});
y(this, "showCustomValue", (e) => {
var i;
const t = this.designViewModelField != null && ((i = this.designViewModelField) == null ? void 0 : i.type.name) !== "Boolean";
return this.formRule ? e.dataType !== "boolean" : t;
});
this.responseLayoutEditorFunction = fe(this.formSchemaUtils);
}
getCommonPropertyConfig(e, t, i = "Card") {
this.propertyConfig.categories.basic = this.getBasicProperties(e, t, i), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e, t), this.propertyConfig.categories.behavior = this.getBehaviorConfig(e, "form-group");
}
getPropertyConfig(e, t) {
return this.getCommonPropertyConfig(e, t, "Card"), this.propertyConfig.categories.editor = this.getEditorProperties(e), this.propertyConfig.categories.expressions = this.getExpressionConfig(e, "Field"), this.propertyConfig.categories.eventsEditor = this.getEventPropertyConfig(e), this.propertyConfig;
}
getGridFieldEdtiorPropConfig(e, t) {
return this.propertyConfig.categories = {}, this.getCommonPropertyConfig(e, t, "Grid"), this.getGridFieldEdtiorProperties ? this.propertyConfig.categories.editor = this.getGridFieldEdtiorProperties(e) : this.propertyConfig.categories.editor = this.getEditorProperties(e), this.propertyConfig.categories.expressons = this.getExpressionConfig(e, "Field"), this.propertyConfig.categories;
}
getBasicProperties(e, t, i = "Card") {
var d;
const s = this;
this.setDesignViewModelField(e);
const { canChangeControlType: r, editorTypeList: c } = this.getAvailableEditorType(e);
let a = c;
this.formRule && (a = c.filter((o) => o.key !== "image" && o.key !== "rich-text-editor"));
const u = {
description: "Basic Information",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "编辑器类型",
title: "编辑器类型",
type: "string",
$converter: "/converter/change-editor.converter",
parentPropertyID: "editor",
editor: {
type: "combo-list",
textField: "value",
valueField: "key",
idField: "key",
editable: !1,
data: a,
readonly: !r
}
},
label: {
title: "标签",
type: "string",
$converter: "/converter/form-group-label.converter"
},
showLabelType: {
description: "标签显示方式：1、显示：显示标签 2、占位：保留标签空间，但不显示文本 3、不显示：不显示标签",
title: "标签显示",
type: "enum",
editor: {
data: [{ id: "visible", name: "显示" }, { id: "reserve-space", name: "占位" }, { id: "none", name: "不显示" }]
},
defaultValue: ((d = e.editor) == null ? void 0 : d.type) === "image" ? "none" : "visible"
},
binding: {
description: "绑定的表单字段",
title: "绑定",
editor: {
type: "binding-selector",
bindingType: { enable: !1 },
editorParams: {
componentSchema: e,
needSyncToViewModel: !0,
viewModelId: this.viewModelId,
designerHostService: this.designerHostService,
disableOccupiedFields: !0
},
textField: "bindingField"
},
refreshPanelAfterChanged: !0,
readonly: this.formSchemaUtils.designerMode === "PC_RTC" && !e.isRtcControl
}
},
setPropertyRelates(o, f, g) {
if (o)
switch (o && o.propertyID) {
case "type": {
s.changeControlType(e, o, t);
break;
}
case "label": {
o.needRefreshControlTree = !0;
break;
}
case "binding": {
s.changeBindingField(e, o, g);
break;
}
}
}
};
return i.toLocaleLowerCase() !== "card" && delete u.properties.showLabelType, u;
}
/**
* 校验控件是否支持切换类型
* @param control 控件
*/
checkCanChangeControlType(e, t) {
if (!e.binding)
return !1;
if (e.binding.type === "Variable") {
if (this.bindingVarible = this.formSchemaUtils.getVariableById(e.binding.field), !this.bindingVarible)
return !1;
} else if (!this.designViewModelField || this.designViewModelField.$type !== L.SimpleField)
return !1;
return !0;
}
/**
* 获取可选的编辑器类型
*/
getAvailableEditorType(e) {
var s, r;
const t = this.checkCanChangeControlType(e, this.viewModelId);
if (!t)
return {
canChangeControlType: !1,
editorTypeList: [{
key: e.editor.type,
value: ((s = l[e.editor.type]) == null ? void 0 : s.name) || e.editor.type
}]
};
let i = [];
return this.designViewModelField && this.designViewModelField.$type === L.SimpleField ? i = S.getEditorTypesByMDataType(this.designViewModelField.type.name, this.designViewModelField.multiLanguage) : this.bindingVarible && (i = S.getEditorTypesByMDataType(this.bindingVarible.type, !!((r = this.designViewModelField) != null && r.multiLanguage))), { canChangeControlType: t, editorTypeList: i };
}
changeBindingField(e, t, i) {
t.needRefreshEntityTree = !0;
}
getAppearanceProperties(e, t) {
const i = this;
return {
title: "外观",
description: "Appearance",
properties: {
class: {
title: "class样式",
type: "string",
description: "组件的CSS样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
},
style: {
title: "style样式",
type: "string",
description: "组件的内联样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
},
fill: {
title: "填充宽度",
description: "启用后，控件占满父容器宽度",
type: "boolean",
parentPropertyID: "appearance",
defaultValue: !1
},
responseLayout: {
description: "响应式列宽",
title: "响应式列宽",
type: "boolean",
visible: !i.formRule,
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
editor: {
type: "response-layout-editor-setting",
beforeOpen: () => i.responseLayoutEditorFunction.checkCanOpenLayoutEditor(e, i.componentId)
}
}
},
setPropertyRelates(s, r) {
if (s)
switch (s && s.propertyID) {
case "responseLayout":
i.responseLayoutEditorFunction.changeFormControlsByResponseLayoutConfig(s.propertyValue, i.componentId || e.id), i.updateUnifiedLayoutAfterResponseLayoutChanged(i.componentId), i.updateElementByParentContainer(e.id, t), delete e.responseLayout;
break;
case "class":
i.updateUnifiedLayoutAfterControlChanged(s.propertyValue, e.id, this.componentId), M.value++;
break;
case "style": {
M.value++;
break;
}
}
}
};
}
getEditorProperties(e) {
return this.getComponentConfig(e);
}
/**
* 卡片控件：切换控件类型后事件
* @param propertyData 控件DOM属性
* @param newControlType 新控件类型
*/
changeControlType(e, t, i) {
const s = t.propertyValue, r = i && i.parent && i.parent.schema;
if (!r)
return;
const c = r.contents.findIndex((d) => d.id === e.id);
if (c === -1)
return;
const a = r.contents[c];
let u;
if (this.designViewModelField) {
const f = this.formSchemaUtils.getViewModelById(this.viewModelId).fields.find((m) => m.id === this.designViewModelField.id).fieldSchema || {};
f.editor || (f.editor = {}), f.editor.$type = s, this.designViewModelUtils.getDgViewModel(this.viewModelId).changeField(this.designViewModelField.id, f, !1), u = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, s);
}
u || (u = this.controlCreatorUtils.createFormGroupWithoutField(s)), Object.assign(u, {
id: a.id,
appearance: a.appearance,
size: a.size,
label: a.label,
binding: a.binding
}), Object.prototype.hasOwnProperty.call(a, "visible") && Object.assign(u, { visible: a.visible }), a.editor && ["readonly", "required", "placeholder"].map((d) => {
Object.prototype.hasOwnProperty.call(a.editor, d) && (u.editor[d] = a.editor[d]);
}), i != null && i.updateContextSchema ? i.updateContextSchema(u) : (i.schema = Object.assign(a, u), Object.assign(e, u)), Array.from(document.getElementsByClassName("dgComponentSelected")).forEach(
(d) => d.classList.remove("dgComponentSelected")
), Array.from(document.getElementsByClassName("dgComponentFocused")).forEach(
(d) => d.classList.remove("dgComponentFocused")
), M.value++, Z(() => {
this.getFormDesignerInstance().reloadPropertyPanel();
});
}
getComponentConfig(e, t = {}, i = {}, s) {
var f, g;
const r = Object.assign({
description: "编辑器",
title: "编辑器",
type: "input-group",
$converter: "/converter/property-editor.converter",
parentPropertyID: "editor"
}, t), c = (f = e.binding) != null && f.field ? [] : ["Const", "Variable", "StateMachine"], a = this.getPropertyEditorParams(e, c, "readonly"), u = this.getPropertyEditorParams(e, c, "required"), d = {
readonly: {
description: "",
title: "只读",
editor: a
},
required: {
description: "",
title: "必填",
type: "boolean",
editor: u,
visible: !!((g = e.binding) != null && g.field)
},
placeholder: {
description: "当控件没有值时在输入框中显示的文本",
title: "提示文本",
type: "string"
}
};
for (const m in i)
d[m] = Object.assign(d[m] || {}, i[m]);
const o = this;
return {
...r,
properties: { ...d },
setPropertyRelates(m, h) {
if (m) {
switch (m.propertyID) {
case "readonly":
case "required":
o.afterMutilEditorChanged(e, m);
break;
}
s && s.bind(o)(m, e, h);
}
}
};
}
/**
* 修改某一输入控件的样式后更新Form的统一布局配置
* @param controlClass 控件样式
* @param controlId 控件Id
* @param componentId 控件所在组件id
*/
updateUnifiedLayoutAfterControlChanged(e, t, i) {
const s = e.split(" ");
let r = s.find((o) => /^col-([1-9]|10|11|12)$/.test(o)), c = s.find((o) => /^col-md-([1-9]|10|11|12)$/.test(o)), a = s.find((o) => /^col-xl-([1-9]|10|11|12)$/.test(o)), u = s.find((o) => /^col-el-([1-9]|10|11|12)$/.test(o));
r = r || "col-12", c = c || "col-md-" + r.replace("col-", ""), a = a || "col-xl-" + c.replace("col-md-", ""), u = u || "col-el-" + a.replace("col-xl-", "");
const d = {
id: t,
columnInSM: parseInt(r.replace("col-", ""), 10),
columnInMD: parseInt(c.replace("col-md-", ""), 10),
columnInLG: parseInt(a.replace("col-xl-", ""), 10),
columnInEL: parseInt(u.replace("col-el-", ""), 10)
};
this.updateUnifiedLayoutAfterResponseLayoutChanged(i, d);
}
/**
* 修改控件布局配置后更新Form统一布局配置
* @param componentId 组件Id
* @param controlLayoutConfig 某单独变动的控件配置项，FormResponseLayoutContext类型
*/
updateUnifiedLayoutAfterResponseLayoutChanged(e, t) {
const { formNode: i } = this.responseLayoutEditorFunction.checkCanFindFormNode(e);
if (!i || !i.unifiedLayout)
return;
const s = [];
if (this.responseLayoutEditorFunction.getResonseFormLayoutConfig(i, s, 1), t) {
const m = s.find((h) => h.id === t.id);
Object.assign(m || {}, t);
}
const r = s.map((m) => m.columnInSM), c = s.map((m) => m.columnInMD), a = s.map((m) => m.columnInLG), u = s.map((m) => m.columnInEL), d = this.checkIsUniqueColumn(r) ? r[0] : null, o = this.checkIsUniqueColumn(c) ? c[0] : null, f = this.checkIsUniqueColumn(a) ? a[0] : null, g = this.checkIsUniqueColumn(u) ? u[0] : null;
Object.assign(i.unifiedLayout, {
uniqueColClassInSM: d,
uniqueColClassInMD: o,
uniqueColClassInLG: f,
uniqueColClassInEL: g
});
}
/**
* 校验宽度样式值是否一致
*/
checkIsUniqueColumn(e) {
const t = new Set(e);
return Array.from(t).length === 1;
}
/**
* 枚举项编辑器
* @param propertyData
* @param valueField
* @param textField
* @returns
*/
getItemCollectionEditor(e, t, i) {
return t = t || "value", i = i || "name", {
editor: {
columns: [
{ field: t, title: "值", dataType: "string" },
{ field: i, title: "名称