UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

925 lines (924 loc) 29.4 kB
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 };