@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
925 lines (924 loc) • 29.4 kB
JavaScript
var J = Object.defineProperty;
var K = (c, e, t) => e in c ? J(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
var m = (c, e, t) => K(c, typeof e != "symbol" ? e + "" : e, t);
import { defineComponent as j, ref as T, computed as F, createVNode as v, inject as $, onMounted as Q, nextTick as X } from "vue";
import { resolveAppearance as Y, createPropsResolver as Z, getPropsResolverGenerator as H } from "../dynamic-resolver/index.esm.js";
import { DgControl as R, canvasChanged as ee, refreshCanvas as te, UseTemplateDragAndDropRules as se, useDragulaCommonRule as ne, useDesignerComponent as ie, setPositionOfSelectedComponentBtnGroup as oe } from "../designer-canvas/index.esm.js";
import { FormBindingType as D } from "../property-panel/index.esm.js";
import { cloneDeep as re } from "lodash-es";
import { useDesignerRules as G } from "../dynamic-form/index.esm.js";
const _ = /* @__PURE__ */ new Map([
["appearance", Y]
]), ae = "https://json-schema.org/draft/2020-12/schema", le = "https://farris-design.gitee.io/fieldset.schema.json", de = "fieldset", ce = "A Farris Container Component", ue = "object", pe = {
id: {
description: "The unique identifier for a fieldset",
type: "string"
},
type: {
description: "The type string of fieldset component",
type: "string",
default: "fieldset"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
title: {
description: "The title for a fieldset",
type: "string"
},
contents: {
description: "",
type: "array",
default: []
}
}, fe = [
"id",
"type",
"contents"
], z = {
$schema: ae,
$id: le,
title: de,
description: ce,
type: ue,
properties: pe,
required: fe
};
function L(c, e, t) {
return Object.assign(e, {
appearance: {
class: "col-12 px-0"
},
title: "分组标题"
}), e;
}
const S = {
/** 组件自定义样式 */
customClass: { type: String, default: "" },
customStyle: { type: String, default: "" },
/** 标题 */
title: { type: String, default: "" }
}, me = Object.assign({}, S, {
componentId: { type: String, default: "" }
}), Fe = Z(S, z, _, L), q = H(
S,
z,
_,
L
), k = /* @__PURE__ */ j({
name: "FFieldset",
props: S,
emits: [],
setup(c, e) {
const t = T(!0);
function s(a, r) {
a && r && r.split(" ").reduce((d, p) => (d[p] = !0, d), a);
}
const n = F(() => {
const a = {
"f-section-formgroup": !0,
"f-state-collapse": !t.value
};
return s(a, c.customClass), a;
}), o = F(() => ({
btn: !0,
"f-btn-mx": !0,
"f-btn-collapse-expand": !0,
"f-state-expand": t.value
}));
function i() {
t.value = !t.value;
}
return () => v("fieldset", {
class: n.value,
style: c.customStyle
}, [v("legend", {
class: "f-section-formgroup-legend"
}, [v("div", {
class: "f-header"
}, [v("div", {
class: "f-title",
onClick: i
}, [c.title]), v("div", {
class: "f-toolbar",
onClick: i
}, [v("button", {
class: o.value
}, null)])])]), v("div", {
class: "f-section-formgroup-inputs"
}, [e.slots.default && e.slots.default()])]);
}
});
function ge(c) {
const { formSchemaUtils: e, formStateMachineUtils: t } = c;
function s(r, l = "") {
return {
path: l + r.code,
field: r.id,
fullPath: r.code
};
}
function n(r, l = "") {
const d = e.getViewModelById(r);
return d ? d.states.map((p) => s(p, l)) : [];
}
function o(r) {
const l = e.getRootViewModelId(), d = n(r);
if (r === l)
return d;
const p = n(l, "root-component.");
return [...d, ...p];
}
function i(r) {
return r.binding && r.binding.path || r.id || "";
}
function a() {
return t && t.getRenderStates() || [];
}
return { getVariables: o, getControlName: i, getStateMachines: a };
}
class he {
constructor(e) {
m(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'"
}
]);
m(this, "expressionNames", {
compute: "计算表达式",
dependency: "依赖表达式",
validate: "验证表达式",
dataPicking: "帮助前表达式",
visible: "可见表达式",
readonly: "只读表达式",
required: "必填表达式"
});
m(this, "getExpressionConverter", (e, t) => ({
convertFrom: (s, n, o, i) => {
const a = o.getExpressionRuleValue(e, t || n);
return a && a.value || "";
},
convertTo: (s, n, o, i, a) => {
var r;
if (n === "dataPicking" && (o != null && o.target)) {
const l = `${o.target}_dataPicking`;
((r = o.rules) == null ? void 0 : r.some(
(p) => p.id === l && p.value
)) ? s.dictPickingExpressionId = l : delete s.dictPickingExpressionId;
}
i.updateExpression(o);
}
}));
this.formSchemaService = e;
}
getExpressionRule(e, t) {
const s = this.getExpressionData();
if (!s)
return "";
const n = s.find((i) => i.target === e);
if (!n)
return "";
const o = n.rules.find((i) => i.type === t);
return o || "";
}
// 获取上下文表单变量
getContextFormVariables() {
const { module: e } = this.formSchemaService.getFormSchema();
if (!e.viewmodels || e.viewmodels.length === 0)
return [];
const t = this.formSchemaService.getRootViewModelId(), s = this.formSchemaService.getViewModelById(t);
if (!s || !s.states || s.states.length === 0)
return [];
const n = [];
return s.states.filter((o) => o.category === "remote").forEach((o) => {
n.push({
key: o.code,
name: o.name,
description: o.name,
category: o.category
});
}), n;
}
createTreeNode(e, t, s = "label") {
return {
id: e.id,
name: e.name,
bindingPath: e[s],
parents: t,
type: "field"
};
}
buildEntityFieldsTreeData(e = null, t) {
const s = [];
return e == null || e.forEach((n) => {
var a;
const o = this.createTreeNode(n, t);
let i = [];
(a = n.type) != null && a.fields && (i = this.buildEntityFieldsTreeData(n.type.fields, [...t, n.label])), s.push({
data: o,
children: i,
expanded: !0
});
}), s;
}
buildChildEntityTreeData(e = null, t) {
const s = [];
return e == null || e.forEach((n) => {
var r, l;
const o = this.createTreeNode(n, t);
o.type = "entity";
const i = this.buildEntityFieldsTreeData((r = n.type) == null ? void 0 : r.fields, [...t, n.label]), a = this.buildChildEntityTreeData((l = n.type) == null ? void 0 : l.entities, [...t, n.label]);
a != null && a.length && (i == null || i.push(...a)), s.push({
data: o,
children: i || [],
// 空值回退
expanded: !0
});
}), s;
}
getEntitiesTreeData() {
const e = this.formSchemaService.getSchemaEntities();
if (!(e != null && e.length))
return [];
const t = e[0];
if (!(t != null && t.type))
return [];
const s = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), n = this.buildChildEntityTreeData(t.type.entities, [t.code]);
return n != null && n.length && (s == null || s.push(...n)), {
entityCode: t.code,
fields: [{
data: this.createTreeNode(t, [], "code"),
children: s || []
}]
};
}
getEntitiesAndVariables() {
return {
entities: this.getEntitiesTreeData(),
variables: {
session: {
name: "系统变量",
items: this.sessionVariables,
visible: !1
},
forms: {
name: "表单变量",
items: this.getContextFormVariables(),
visible: !0
}
}
};
}
onBeforeOpenExpression(e, t, s) {
const n = s === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(n, t), i = this.getEntitiesAndVariables(), a = {
message: ["validate", "required", "dataPicking"].includes(t) && o ? o.message : "",
...i
};
return o.messageType != null && (a.messageType = o.messageType), a;
}
buildRule(e, t, s, n) {
const { expression: o, message: i, messageType: a } = t, r = {
id: `${e}_${s}`,
type: s,
value: o
};
return (s === "validate" || s === "dataPicking" || s === "required") && (r.message = i), s === "dataPicking" && (r.messageType = a), s === "validate" && n && (r.elementId = n), r;
}
getExpressionData() {
const { expressions: e } = this.formSchemaService.getFormSchema().module;
return e || [];
}
updateExpression(e, t, s, n) {
const o = t === "Field" ? e.binding.field : e.id, i = this.buildRule(o, s, n, e.type === "form-group" ? e.id : "");
let r = this.getExpressionData().find((d) => d.targetType === t && d.target === o);
const l = (d) => d.value.trim() === "";
if (r) {
const d = r.rules.find((p) => p.id === i.id);
if (d)
l(i) ? r.rules = r.rules.filter((p) => p.id !== i.id) : (Object.assign(d, i), n === "validate" && e.type === "form-group" && (d.elementId = e.id));
else {
if (l(i))
return null;
r.rules = r.rules || [], r.rules.push(i);
}
} else {
if (l(i))
return null;
r = {
target: `${o}`,
rules: [i],
targetType: t
};
}
return r;
}
getExpressionEditorOptions(e, t, s, n) {
return s.reduce((o, i) => {
var r, l;
const a = t === "Field" ? (r = e == null ? void 0 : e.binding) == null ? void 0 : r.field : e.id;
return o[i] = {
hide: t === "Field" ? !!((l = e == null ? void 0 : e.binding) != null && l.field) : !1,
description: "",
title: this.expressionNames[i],
type: "string",
$converter: this.getExpressionConverter(a),
refreshPanelAfterChanged: !0,
editor: {
type: "expression-editor",
singleExpand: !1,
dialogTitle: `${this.expressionNames[i]}编辑器`,
showMessage: i === "validate" || i === "dataPicking" || i === "required",
showMessageType: i === "dataPicking",
beforeOpen: () => this.onBeforeOpenExpression(e, i, t),
onSubmitModal: (d) => {
const p = this.updateExpression(e, t, d, i);
if (n) {
const h = this.buildRule(a, d, i);
n(h);
}
return p;
}
}
}, o;
}, {});
}
getExpressionInfo(e, t, s) {
const n = t === "Field" ? e.binding.field : e.id, o = this.getExpressionRule(n, s), i = {
value: o && o.value,
targetId: n,
targetType: t,
expressionType: s
};
return o && o.message && (i.message = o.message), i;
}
getExpressionConfig(e, t, s = ["compute", "dependency", "validate"], n) {
return {
description: "表达式",
title: "表达式",
hide: !e.binding,
properties: {
...this.getExpressionEditorOptions(e, t, s, n)
}
};
}
getExpressionOptions(e, t, s) {
const n = this.getExpressionInfo(e, t, s);
return {
dialogTitle: `${this.expressionNames[s] || "表达式"}编辑器`,
singleExpand: !1,
showMessage: s === "required",
beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
expressionInfo: n
};
}
}
class be {
constructor(e, t) {
m(this, "componentId");
m(this, "viewModelId");
m(this, "eventsEditorUtils");
m(this, "formSchemaUtils");
m(this, "formMetadataConverter");
m(this, "designViewModelUtils");
m(this, "designViewModelField");
m(this, "controlCreatorUtils");
m(this, "designerHostService");
m(this, "designerContext");
m(this, "modalService", null);
/** 表单规则 */
m(this, "formRule", null);
m(this, "schemaService", null);
m(this, "metadataService", null);
m(this, "propertyConfig", {
type: "object",
categories: {}
});
m(this, "expressionProperty");
var s;
this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((s = this.formSchemaUtils) == null ? void 0 : s.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext, this.modalService = t.modalService, this.expressionProperty = new he(this.formSchemaUtils);
}
getFormDesignerInstance() {
var e, t;
return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
}
getTableInfo() {
var e;
return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(e) {
var s;
const t = e.binding && e.binding.type === "Form" && e.binding.field;
if (t) {
if (!this.designViewModelField) {
const n = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = n.fields.find((o) => o.id === t);
}
e.updateOn = (s = this.designViewModelField) == null ? void 0 : s.updateOn;
}
}
getBasicPropConfig(e) {
return {
description: "Basic Information",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "combo-list",
textField: "name",
valueField: "value",
idField: "value",
editable: !1,
data: [{ value: e.type, name: R[e.type] && R[e.type].name }]
}
}
}
};
}
getAppearanceConfig(e = null, t = {}, s) {
const n = {
title: "外观",
description: "Appearance"
}, o = {
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 i in t)
o[i] = Object.assign(o[i] || {}, t[i]);
return {
...n,
properties: { ...o },
setPropertyRelates(i, a) {
if (i) {
switch (i && i.propertyID) {
case "class":
case "style": {
ee.value++;
break;
}
}
s && s(i, e, a);
}
}
};
}
/**
*
* @param propertyData
* @param propertyTypes
* @param propertyName
* @param constInfos
* @param variableInfos
* @param expressionType 指定表达式类型,存在属性和表达式类型不一致的情况
* @returns
*/
getPropertyEditorParams(e, t = [], s = "visible", n = {}, o = {}, i = "") {
const { getVariables: a, getControlName: r, getStateMachines: l } = ge(this.designerHostService), d = this.getRealTargetType(e), p = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], h = {
type: "property-editor",
propertyTypes: p
};
return p.map((E) => {
switch (E) {
case "Const":
Object.assign(h, {
constType: "enum",
constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
}, n);
break;
case "Expression":
h.expressionConfig = this.getExpressionOptions(e, d, i || s);
break;
case "StateMachine":
h.stateMachines = l();
break;
case "Variable":
Object.assign(h, {
controlName: r(e),
newVariablePrefix: "is",
newVariableType: "Boolean",
variables: a(this.viewModelId),
parentComponentId: this.componentId === "root-component" ? "" : "root-component",
onBeforeOpenVariables: (x) => {
x.value = a(this.viewModelId);
}
}, o), this.designerContext.designerMode === "PC_RTC" && (h.newVariablePrefix = "ext_" + h.newVariablePrefix);
break;
}
}), h;
}
getVisibleProperty(e, t = "") {
var o;
let s = ["Const", "Variable", "StateMachine", "Expression"];
return t === "gridFieldEditor" ? s = ["Const", "Expression"] : t === "form-group" && !((o = e.binding) != null && o.field) && (s = ["Const", "Variable", "StateMachine"]), {
visible: {
title: "是否可见",
type: "boolean",
description: "运行时组件是否可见",
editor: this.getPropertyEditorParams(e, s, "visible")
}
};
}
/**
* 获取行为
* @param propertyData
* @param viewModelId
* @returns
*/
getBehaviorConfig(e, t = "", s = {}, n) {
const o = {
title: "行为",
description: ""
}, i = this.getVisibleProperty(e, t);
for (const r in s)
i[r] = Object.assign(i[r] || {}, s[r]);
const a = this;
return {
...o,
properties: { ...i },
setPropertyRelates(r, l) {
if (r) {
switch (r.propertyID) {
case "disabled":
case "readonly":
case "visible":
a.afterMutilEditorChanged(e, r);
break;
}
n && n(r, l);
}
}
};
}
/**
* 当多值编辑器变更时
* @param propertyData
* @param changeObject
*/
afterMutilEditorChanged(e, t) {
this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t, e), this.clearExpression(t, e);
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(e, t) {
const s = t && t.parent && t.parent.schema;
if (!s)
return;
const n = s.contents.findIndex((i) => i.id === e), o = re(s.contents[n]);
s.contents.splice(n, 1), s.contents.splice(n, 0, o), te();
}
/**
* 属性编辑器,在编辑过程中会新增变量,此处需要将新增的变量追加到ViewModel中
* @param changeObject
* @param viewModelId
* @returns
*/
addNewVariableToViewModel(e, t) {
const s = e.propertyValue;
if (!(s && typeof s == "object") || !(s.type === "Variable" && s.isNewVariable))
return;
const i = {
id: s.field,
category: "locale",
code: s.fullPath,
name: s.fullPath,
type: s.newVariableType || "String",
isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
};
delete s.newVariableType, delete s.isNewVariable, this.formSchemaUtils.getVariableByCode(i.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(i);
}
getExpressions() {
let e = [];
return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
}
/**
* 更新表达式到expressions节点
* @param changeObject
*/
updateExpressionValue(e, t) {
const s = e.propertyValue;
if (!((s && s.type) === "Expression" && s.expressionInfo))
return;
const { expressionId: i, expressionInfo: a } = s, { targetId: r, targetType: l, expressionType: d, value: p, message: h } = a, E = this.getExpressions();
let x = E.find((V) => V.target === r);
x || (x = { target: r, rules: [], targetType: l }, E.push(x));
const b = x.rules.find((V) => V.type === d);
if (b)
b.value = p, b.message = h, (d === "minDate" || d === "maxDate" || d === "defaultTime") && (b.elementId = t.id);
else {
const V = { id: i, type: d, value: p, message: h, elementId: t.id };
x.rules.push(V);
}
delete s.expressionInfo;
}
/**
* 属性类型切换为非表达式后,清除原表达式
* @param changeObject
* @param propertyData
* @returns
*/
clearExpression(e, t) {
const s = e.propertyValue;
if (s && s.type === "Expression")
return;
const o = e.propertyID, i = this.getExpressions(), a = t.binding ? t.binding.field : t.id, r = i.find((l) => l.target === a);
!r || !r.rules || (r.rules = r.rules.filter((l) => l.type !== o));
}
getExpressionOptions(e, t, s) {
return this.expressionProperty.getExpressionOptions(e, t, s);
}
getRealTargetType(e) {
return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
}
createBaseEventProperty(e) {
const t = {};
return t[this.viewModelId] = {
type: "events-editor",
editor: {
initialData: e,
viewSourceHandle: (s) => {
var n;
((n = s.controller) == null ? void 0 : n.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(s);
}
}
}, t;
}
}
class ye extends be {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e) {
return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e), this.propertyConfig;
}
getAppearanceProperties(e) {
const t = this;
return this.getAppearanceConfig(e, {
title: {
title: "标题",
type: "string",
description: "标题"
}
}, (n, o, i) => {
switch (n && n.propertyID) {
case "title": {
n.needRefreshControlTree = !0, t.changeGroupNameInViewModel(o.id, n.propertyValue);
break;
}
}
});
}
/**
* 修改分组标题后,需要同步viewmodel中字段的分组信息
*/
changeGroupNameInViewModel(e, t) {
var o;
const s = this.designViewModelUtils.getDgViewModel(this.viewModelId);
s && s.changeGroupName(e, t);
const n = this.formSchemaUtils.getViewModelById(this.viewModelId);
(o = n == null ? void 0 : n.fields) != null && o.length && n.fields.forEach((i) => {
i.groupId === e && (i.groupName = t);
});
}
}
function ve(c, e) {
const t = new se(), { canAccept: s } = t.getTemplateRule(c, e), n = c.schema;
function o() {
return "f-section-formgroup";
}
function i() {
return !0;
}
function a() {
return !0;
}
function r() {
return !1;
}
function l(u) {
const { sourceElement: f } = u, { componentInstance: C } = f, g = e == null ? void 0 : e.formSchemaUtils;
if (!g)
return !0;
const I = g.getComponentById(C.value.belongedComponentId), y = g.getViewModelById(I.viewModel), w = g.getComponentById(c.componentInstance.value.belongedComponentId), M = g.getViewModelById(w.viewModel);
return y != null && y.id && (M != null && M.id) && y.id !== M.id ? y.bindTo === M.bindTo : !0;
}
function d(u) {
const { bindingTargetId: f } = u;
if (!e)
return;
const { formSchemaUtils: C, schemaService: g } = e, I = C.getComponentById(c.componentInstance.value.belongedComponentId), y = g.getFieldByIDAndVMID(f, I.viewModel);
return !!(y != null && y.schemaField);
}
function p(u) {
return u.sourceType === "control" && u.componentCategory === "input" ? !0 : u.sourceType === "move" && u.componentType === "form-group" ? l(u) : u.sourceType === "field" && u.componentCategory === "input" ? d(u) : !1;
}
function h(u) {
return !(!ne().basalDragulaRuleForContainer(u, e) || !s || !p(u));
}
function E(u) {
return new ye(u, e).getPropertyConfig(n);
}
function x(u) {
var M, P, B, U, N;
if (!e)
return;
const { formSchemaUtils: f, designViewModelUtils: C } = e, g = u.componentInstance, I = g.value.parent, y = f.getComponentById(g.value.belongedComponentId), w = C.getDgViewModel(y.viewModel);
switch (I && ((M = I.schema) == null ? void 0 : M.type)) {
case R.fieldset.type:
case R["response-form"].type:
case R["response-layout-item"].type: {
const A = { groupId: n.id, groupName: n.title }, W = (B = (P = g.value.schema) == null ? void 0 : P.binding) == null ? void 0 : B.type, O = (N = (U = g.value.schema) == null ? void 0 : U.binding) == null ? void 0 : N.field;
switch (W) {
case D.Form: {
w.changeField(O, A);
break;
}
case D.Variable: {
f.modifyViewModelFieldById(y.viewModel, O, A, !0);
break;
}
}
break;
}
}
}
function b(u) {
if (!u || !u.componentInstance || !e)
return;
const f = u.componentInstance, C = f.value.schema;
if (!C.binding || !C.binding.field)
return;
x(u);
const { formSchemaUtils: g } = e, I = g.getViewModelIdByComponentId(f.value.belongedComponentId), y = g.getViewModelIdByComponentId(c.componentInstance.value.belongedComponentId);
I !== y && G(c, e).moveInputBetweenComponent(u);
}
function V(u, f) {
var C, g, I;
if (u.componentCategory === "input") {
const { label: y } = u;
let w;
const M = e == null ? void 0 : e.controlCreatorUtils;
(C = u.bindingSourceContext) != null && C.entityFieldNode ? w = M.setFormFieldProperty((g = u.bindingSourceContext) == null ? void 0 : g.entityFieldNode, f == null ? void 0 : f.type) : (w = M.createFormGroupWithoutField(f == null ? void 0 : f.type), w.label = y);
const P = G(c, e);
return P.resolveFormGroupAppearance(w), P.syncFieldToViewModel(u, (I = w.editor) == null ? void 0 : I.type, n.id, n.title), w;
}
return f;
}
return {
canAccepts: h,
hideNestedPaddingInDesginerView: r,
getPropsConfig: E,
checkCanDeleteComponent: i,
checkCanMoveComponent: a,
onAcceptMovedChildElement: b,
onResolveNewComponentSchema: V,
getDesignerClass: o
};
}
const Ce = /* @__PURE__ */ j({
name: "FFieldsetDesign",
props: me,
emits: [],
setup(c, e) {
const t = T(), s = T(), n = $("design-item-context"), o = $("designer-host-service"), i = ve(n, o), a = ie(s, n, i);
e.expose(a.value);
const {
designerContext: r
} = o;
Q(() => {
s.value.componentInstance = a;
});
const l = T(!0);
function d(b, V) {
b && V && V.split(" ").reduce((f, C) => (f[C] = !0, f), b);
}
const p = F(() => {
const b = {
"f-section-formgroup": !0,
"f-state-collapse": !l.value
};
return d(b, c.customClass), b;
}), h = F(() => {
const b = r && r.designerMode === "Mobile";
return {
display: l.value ? "flex" : "none",
"flex-wrap": "wrap",
"flex-direction": b ? "column" : "row"
};
}), E = F(() => ({
btn: !0,
"f-btn-mx": !0,
"f-btn-collapse-expand": !0,
"f-state-expand": l.value
}));
function x(b) {
b.stopPropagation(), l.value = !l.value, X(() => {
oe();
});
}
return () => v("fieldset", {
class: p.value,
ref: t
}, [v("legend", {
class: "f-section-formgroup-legend"
}, [v("div", {
class: "f-header"
}, [v("div", {
class: "f-title",
onClick: x
}, [c.title]), v("div", {
class: "f-toolbar",
onClick: x
}, [v("button", {
class: E.value
}, null)])])]), v("div", {
"data-dragref": `${n.schema.id}-container`,
ref: s,
class: "f-section-formgroup-inputs drag-container",
style: h.value
}, [e.slots.default && e.slots.default()])]);
}
}), Re = {
install(c) {
c.component(k.name, k);
},
register(c, e, t, s, n) {
c.fieldset = k, e.fieldset = q(n);
},
registerDesigner(c, e, t, s) {
c.fieldset = Ce, e.fieldset = q(s);
}
};
export {
k as Fieldset,
Re as default,
me as fieldsetDesignerProps,
S as fieldsetProps,
Fe as propsResolver,
q as propsResolverGenerator
};