@farris/ui-vue/components/fieldset/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var J = Object.defineProperty;
var K = (l, e, t) => e in l ? J(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
var m = (l, e, t) => K(l, typeof e != "symbol" ? e + "" : e, t);
import { defineComponent as D, ref as T, computed as F, watch as Q, createVNode as v, inject as $, onMounted as X, nextTick as Y } from "vue";
import { resolveAppearance as Z, createPropsResolver as H, getPropsResolverGenerator as ee } from "../dynamic-resolver/index.esm.js";
import { getCustomClass as te } from "../common/index.esm.js";
import { DgControl as S, canvasChanged as se, refreshCanvas as ie, UseTemplateDragAndDropRules as ne, useDragulaCommonRule as oe, useDesignerComponent as re, setPositionOfSelectedComponentBtnGroup as ae } from "../designer-canvas/index.esm.js";
import { FormBindingType as G } from "../property-panel/index.esm.js";
import { cloneDeep as le } from "lodash-es";
import { useDesignerRules as L } from "../dynamic-form/index.esm.js";
const j = /* @__PURE__ */ new Map([
  ["appearance", Z]
]), de = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-design.gitee.io/fieldset.schema.json", ue = "fieldset", pe = "A Farris Container Component", fe = "object", me = {
  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"
  },
  expandStatus: {
    description: "The expanded status for a fieldset",
    type: "boolean",
    default: !0
  },
  expandLabel: {
    description: "The expanded label for a fieldset",
    type: "string"
  },
  collapseLabel: {
    description: "The collapsed label for a fieldset",
    type: "string"
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  sectionCollapseVisible: {
    description: "",
    type: "boolean",
    default: !1
  }
}, ge = [
  "id",
  "type",
  "contents"
], _ = {
  $schema: de,
  $id: ce,
  title: ue,
  description: pe,
  type: fe,
  properties: me,
  required: ge
};
function z(l, e, t) {
  return Object.assign(e, {
    appearance: {
      class: "col-12 px-0"
    },
    title: "分组标题"
  }), e;
}
const R = {
  /** 组件自定义样式 */
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" },
  /** 标题 */
  title: { type: String, default: "" },
  /** 设置初始是否处于展开状态，支持：true 内容区域被展开|false 内容区域被収折 */
  expandStatus: { type: Boolean, default: !0 },
  /** 展开文本 */
  expandLabel: { type: String, default: "" },
  /** 收起文本 */
  collapseLabel: { type: String, default: "" },
  /** 控制是否可见 */
  visible: { type: Boolean, default: !0 },
  /** 分组面板收折时显示 */
  sectionCollapseVisible: { type: Boolean, default: !1 }
}, he = Object.assign({}, R, {
  componentId: { type: String, default: "" }
}), Re = H(R, _, j, z), q = ee(
  R,
  _,
  j,
  z
), B = /* @__PURE__ */ D({
  name: "FFieldset",
  props: R,
  emits: [],
  setup(l, e) {
    const t = T(l.expandStatus), s = F(() => {
      const o = {
        "f-section-formgroup": !0,
        "f-state-collapse": !t.value,
        "f-state-visible": l.sectionCollapseVisible
      };
      return te(o, l.customClass);
    }), i = F(() => ({
      btn: !0,
      "f-btn-mx": !0,
      "f-btn-collapse-expand": !0,
      "f-state-expand": t.value
    }));
    function n() {
      t.value = !t.value;
    }
    return Q(() => l.expandStatus, (o, a) => {
      o !== a && (t.value = o);
    }), () => l.visible ? v("fieldset", {
      class: s.value,
      style: l.customStyle
    }, [v("legend", {
      class: "f-section-formgroup-legend"
    }, [v("div", {
      class: "f-header"
    }, [v("div", {
      class: "f-title",
      onClick: n
    }, [l.title]), v("div", {
      class: "f-toolbar",
      onClick: n
    }, [v("button", {
      class: i.value
    }, [v("span", null, [t.value ? l.collapseLabel : l.expandLabel])])])])]), v("div", {
      class: {
        "f-section-formgroup-inputs": !0,
        "f-state-visible": l.sectionCollapseVisible
      }
    }, [e.slots.default && e.slots.default()])]) : null;
  }
});
function be(l) {
  const { formSchemaUtils: e, formStateMachineUtils: t } = l;
  function s(r, d = "") {
    return {
      path: d + r.code,
      field: r.id,
      fullPath: r.code
    };
  }
  function i(r, d = "") {
    const u = e.getViewModelById(r);
    return u ? u.states.map((p) => s(p, d)) : [];
  }
  function n(r) {
    const d = e.getRootViewModelId(), u = i(r);
    if (r === d)
      return u;
    const p = i(d, "root-component.");
    return [...u, ...p];
  }
  function o(r) {
    return r.binding && r.binding.path || r.id || "";
  }
  function a() {
    return t && t.getRenderStates() || [];
  }
  return { getVariables: n, getControlName: o, getStateMachines: a };
}
class ye {
  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, i, n, o) => {
        const a = n.getExpressionRuleValue(e, t || i);
        return a && a.value || "";
      },
      convertTo: (s, i, n, o, a) => {
        var r;
        if (i === "dataPicking" && (n != null && n.target)) {
          const d = `${n.target}_dataPicking`;
          ((r = n.rules) == null ? void 0 : r.some(
            (p) => p.id === d && p.value
          )) ? s.dictPickingExpressionId = d : delete s.dictPickingExpressionId;
        }
        o.updateExpression(n);
      }
    }));
    this.formSchemaService = e;
  }
  getExpressionRule(e, t) {
    const s = this.getExpressionData();
    if (!s)
      return "";
    const i = s.find((o) => o.target === e);
    if (!i)
      return "";
    const n = i.rules.find((o) => o.type === t);
    return n || "";
  }
  // 获取上下文表单变量
  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 i = [];
    return s.states.filter((n) => n.category === "remote").forEach((n) => {
      i.push({
        key: n.code,
        name: n.name,
        description: n.name,
        category: n.category
      });
    }), i;
  }
  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((i) => {
      var a;
      const n = this.createTreeNode(i, t);
      let o = [];
      (a = i.type) != null && a.fields && (o = this.buildEntityFieldsTreeData(i.type.fields, [...t, i.label])), s.push({
        data: n,
        children: o,
        expanded: !0
      });
    }), s;
  }
  buildChildEntityTreeData(e = null, t) {
    const s = [];
    return e == null || e.forEach((i) => {
      var r, d;
      const n = this.createTreeNode(i, t);
      n.type = "entity";
      const o = this.buildEntityFieldsTreeData((r = i.type) == null ? void 0 : r.fields, [...t, i.label]), a = this.buildChildEntityTreeData((d = i.type) == null ? void 0 : d.entities, [...t, i.label]);
      a != null && a.length && (o == null || o.push(...a)), s.push({
        data: n,
        children: o || [],
        // 空值回退
        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]), i = this.buildChildEntityTreeData(t.type.entities, [t.code]);
    return i != null && i.length && (s == null || s.push(...i)), {
      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 i = s === "Field" ? e.binding.field : e.id, n = this.getExpressionRule(i, t), o = this.getEntitiesAndVariables(), a = {
      message: ["validate", "required", "dataPicking"].includes(t) && n ? n.message : "",
      ...o
    };
    return n.messageType != null && (a.messageType = n.messageType), a;
  }
  buildRule(e, t, s, i) {
    const { expression: n, message: o, messageType: a } = t, r = {
      id: `${e}_${s}`,
      type: s,
      value: n
    };
    return (s === "validate" || s === "dataPicking" || s === "required") && (r.message = o), s === "dataPicking" && (r.messageType = a), s === "validate" && i && (r.elementId = i), r;
  }
  getExpressionData() {
    const { expressions: e } = this.formSchemaService.getFormSchema().module;
    return e || [];
  }
  updateExpression(e, t, s, i) {
    const n = t === "Field" ? e.binding.field : e.id, o = this.buildRule(n, s, i, e.type === "form-group" ? e.id : "");
    let r = this.getExpressionData().find((u) => u.targetType === t && u.target === n);
    const d = (u) => u.value.trim() === "";
    if (r) {
      const u = r.rules.find((p) => p.id === o.id);
      if (u)
        d(o) ? r.rules = r.rules.filter((p) => p.id !== o.id) : (Object.assign(u, o), i === "validate" && e.type === "form-group" && (u.elementId = e.id));
      else {
        if (d(o))
          return null;
        r.rules = r.rules || [], r.rules.push(o);
      }
    } else {
      if (d(o))
        return null;
      r = {
        target: `${n}`,
        rules: [o],
        targetType: t
      };
    }
    return r;
  }
  getExpressionEditorOptions(e, t, s, i) {
    return s.reduce((n, o) => {
      var r, d;
      const a = t === "Field" ? (r = e == null ? void 0 : e.binding) == null ? void 0 : r.field : e.id;
      return n[o] = {
        hide: t === "Field" ? !!((d = e == null ? void 0 : e.binding) != null && d.field) : !1,
        description: "",
        title: this.expressionNames[o],
        type: "string",
        $converter: this.getExpressionConverter(a),
        refreshPanelAfterChanged: !0,
        editor: {
          type: "expression-editor",
          singleExpand: !1,
          dialogTitle: `${this.expressionNames[o]}编辑器`,
          showMessage: o === "validate" || o === "dataPicking" || o === "required",
          showMessageType: o === "dataPicking",
          beforeOpen: () => this.onBeforeOpenExpression(e, o, t),
          onSubmitModal: (u) => {
            const p = this.updateExpression(e, t, u, o);
            if (i) {
              const b = this.buildRule(a, u, o);
              i(b);
            }
            return p;
          }
        }
      }, n;
    }, {});
  }
  getExpressionInfo(e, t, s) {
    const i = t === "Field" ? e.binding.field : e.id, n = this.getExpressionRule(i, s), o = {
      value: n && n.value,
      targetId: i,
      targetType: t,
      expressionType: s
    };
    return n && n.message && (o.message = n.message), o;
  }
  getExpressionConfig(e, t, s = ["compute", "dependency", "validate"], i) {
    var n;
    return {
      description: "表达式",
      title: "表达式",
      hide: !(e.binding && ((n = e.binding) == null ? void 0 : n.type) === "Form"),
      properties: {
        ...this.getExpressionEditorOptions(e, t, s, i)
      }
    };
  }
  getExpressionOptions(e, t, s) {
    const i = this.getExpressionInfo(e, t, s);
    return {
      dialogTitle: `${this.expressionNames[s] || "表达式"}编辑器`,
      singleExpand: !1,
      showMessage: s === "required",
      beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
      expressionInfo: i
    };
  }
}
class ve {
  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 ye(this.formSchemaUtils);
  }
  /**
   * 是否在响应式表单中
   */
  inResponsiveForm() {
    var e;
    return !!((e = this.designerContext) != null && e.responsiveForm);
  }
  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 i = this.designViewModelUtils.getDgViewModel(this.viewModelId);
        this.designViewModelField = i.fields.find((n) => n.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: S[e.type] && S[e.type].name }]
          }
        }
      }
    };
  }
  getAppearanceConfig(e = null, t = {}, s) {
    const i = {
      title: "外观",
      description: "Appearance"
    }, n = {
      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 o in t)
      n[o] = Object.assign(n[o] || {}, t[o]);
    return {
      ...i,
      properties: { ...n },
      setPropertyRelates(o, a) {
        if (o) {
          switch (o && o.propertyID) {
            case "class":
            case "style": {
              se.value++;
              break;
            }
          }
          s && s(o, e, a);
        }
      }
    };
  }
  /**
   * 
   * @param propertyData 
   * @param propertyTypes 
   * @param propertyName 
   * @param constInfos 
   * @param variableInfos 
   * @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
   * @returns 
   */
  getPropertyEditorParams(e, t = [], s = "visible", i = {}, n = {}, o = "") {
    const { getVariables: a, getControlName: r, getStateMachines: d } = be(this.designerHostService), u = this.getRealTargetType(e), p = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], b = {
      type: "property-editor",
      propertyTypes: p
    };
    return p.map((E) => {
      switch (E) {
        case "Const":
          Object.assign(b, {
            constType: "enum",
            constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
          }, i);
          break;
        case "Expression":
          b.expressionConfig = this.getExpressionOptions(e, u, o || s);
          break;
        case "StateMachine":
          b.stateMachines = d();
          break;
        case "Variable":
          Object.assign(b, {
            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);
            }
          }, n), this.designerContext.designerMode === "PC_RTC" && (b.newVariablePrefix = "ext_" + b.newVariablePrefix);
          break;
      }
    }), b;
  }
  getVisibleProperty(e, t = "") {
    var n;
    let s = ["Const", "Variable", "StateMachine", "Expression"];
    return t === "gridFieldEditor" ? s = ["Const", "Expression"] : t === "form-group" && !((n = e.binding) != null && n.field) ? s = ["Const", "Variable", "StateMachine", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? s = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (s = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
      visible: {
        title: "是否可见",
        type: "boolean",
        description: "运行时组件是否可见",
        editor: this.getPropertyEditorParams(e, s, "visible")
      }
    };
  }
  /**
   * 获取行为
   * @param propertyData 
   * @param viewModelId 
   * @returns 
   */
  getBehaviorConfig(e, t = "", s = {}, i) {
    const n = {
      title: "行为",
      description: ""
    }, o = this.getVisibleProperty(e, t);
    for (const r in s)
      o[r] = Object.assign(o[r] || {}, s[r]);
    const a = this;
    return {
      ...n,
      properties: { ...o },
      setPropertyRelates(r, d) {
        if (r) {
          switch (r.propertyID) {
            case "disabled":
            case "readonly":
            case "visible":
              a.afterMutilEditorChanged(e, r);
              break;
          }
          i && i(r, d);
        }
      }
    };
  }
  /**
   * 当多值编辑器变更时
   * @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 i = s.contents.findIndex((o) => o.id === e), n = le(s.contents[i]);
    s.contents.splice(i, 1), s.contents.splice(i, 0, n), ie();
  }
  /**
   * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到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 o = {
      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(o.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(o);
  }
  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: o, expressionInfo: a } = s, { targetId: r, targetType: d, expressionType: u, value: p, message: b } = a, E = this.getExpressions();
    let x = E.find((M) => M.target === r);
    x || (x = { target: r, rules: [], targetType: d }, E.push(x));
    const h = x.rules.find((M) => M.type === u);
    if (h)
      h.id = o, h.value = p, h.message = b, (u === "minDate" || u === "maxDate" || u === "defaultTime") && (h.elementId = t.id);
    else {
      const M = { id: o, type: u, value: p, message: b, elementId: t.id };
      x.rules.push(M);
    }
    delete s.expressionInfo;
  }
  /**
   * 属性类型切换为非表达式后，清除原表达式
   * @param changeObject 
   * @param propertyData 
   * @returns 
   */
  clearExpression(e, t) {
    const s = e.propertyValue;
    if (s && s.type === "Expression")
      return;
    const n = e.propertyID, o = this.getExpressions(), a = t.binding ? t.binding.field : t.id, r = o.find((d) => d.target === a);
    !r || !r.rules || (r.rules = r.rules.filter((d) => d.type !== n));
  }
  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 i;
          ((i = s.controller) == null ? void 0 : i.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(s);
        }
      }
    }, t;
  }
}
class Ce extends ve {
  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.categories.behavior = this.getBehaviorConfig(e, ""), this.propertyConfig;
  }
  getAppearanceProperties(e) {
    const t = this;
    return this.getAppearanceConfig(e, {
      title: {
        title: "标题",
        type: "string",
        description: "标题"
      },
      expandStatus: {
        title: "默认状态",
        type: "boolean",
        description: "默认面板是展开还是收起",
        editor: {
          type: "combo-list",
          textField: "name",
          valueField: "value",
          data: [{
            name: "展开",
            value: !0
          }, {
            name: "收起",
            value: !1
          }],
          enableClear: !1
        }
      },
      expandLabel: {
        title: "展开文本",
        type: "string",
        description: "展开文本"
      },
      collapseLabel: {
        title: "收起文本",
        type: "string",
        description: "收起文本"
      },
      sectionCollapseVisible: {
        title: "分组面板收折时显示",
        type: "boolean",
        description: "收折分组面时是否显示当前分组内的控件"
      }
    }, (i, n, o) => {
      var a;
      switch (i && i.propertyID) {
        case "title": {
          i.needRefreshControlTree = !0, t.changeGroupNameInViewModel(n.id, i.propertyValue);
          break;
        }
        case "sectionCollapseVisible": {
          (a = n.contents) != null && a.length && n.contents.forEach((r) => {
            r.appearance || (r.appearance = { class: "" }), r.appearance.class || (r.appearance.class = ""), i.propertyValue ? r.appearance.class.includes("f-state-visible") || (r.appearance.class = (r.appearance.class + " f-state-visible").trim()) : r.appearance.class = r.appearance.class.replace("f-state-visible", "").replace(/\s+/g, " ").trim();
          });
          break;
        }
      }
    });
  }
  /**
   * 修改分组标题后，需要同步viewmodel中字段的分组信息
   */
  changeGroupNameInViewModel(e, t) {
    var n;
    const s = this.designViewModelUtils.getDgViewModel(this.viewModelId);
    s && s.changeGroupName(e, t);
    const i = this.formSchemaUtils.getViewModelById(this.viewModelId);
    (n = i == null ? void 0 : i.fields) != null && n.length && i.fields.forEach((o) => {
      o.groupId === e && (o.groupName = t);
    });
  }
}
function xe(l, e) {
  const t = new ne(), { canAccept: s } = t.getTemplateRule(l, e), i = l.schema;
  function n() {
    return "f-section-formgroup";
  }
  function o() {
    return !0;
  }
  function a() {
    return !0;
  }
  function r() {
    return !1;
  }
  function d(c) {
    const { sourceElement: f } = c, { componentInstance: C } = f, g = e == null ? void 0 : e.formSchemaUtils;
    if (!g)
      return !0;
    const w = g.getComponentById(C.value.belongedComponentId), y = g.getViewModelById(w.viewModel), I = g.getComponentById(l.componentInstance.value.belongedComponentId), V = g.getViewModelById(I.viewModel);
    return y != null && y.id && (V != null && V.id) && y.id !== V.id ? y.bindTo === V.bindTo : !0;
  }
  function u(c) {
    const { bindingTargetId: f } = c;
    if (!e)
      return;
    const { formSchemaUtils: C, schemaService: g } = e, w = C.getComponentById(l.componentInstance.value.belongedComponentId), y = g.getFieldByIDAndVMID(f, w.viewModel);
    return !!(y != null && y.schemaField);
  }
  function p(c) {
    return c.sourceType === "control" && c.componentCategory === "input" ? !0 : c.sourceType === "move" && c.componentType === "form-group" ? d(c) : c.sourceType === "field" && c.componentCategory === "input" ? u(c) : !1;
  }
  function b(c) {
    return !(!oe().basalDragulaRuleForContainer(c, e) || !s || !p(c));
  }
  function E(c) {
    return new Ce(c, e).getPropertyConfig(i);
  }
  function x(c) {
    var V, P, k, U, N;
    if (!e)
      return;
    const { formSchemaUtils: f, designViewModelUtils: C } = e, g = c.componentInstance, w = g.value.parent, y = f.getComponentById(g.value.belongedComponentId), I = C.getDgViewModel(y.viewModel);
    switch (w && ((V = w.schema) == null ? void 0 : V.type)) {
      case S.fieldset.type:
      case S["response-form"].type:
      case S["response-layout-item"].type: {
        const A = { groupId: i.id, groupName: i.title }, W = (k = (P = g.value.schema) == null ? void 0 : P.binding) == null ? void 0 : k.type, O = (N = (U = g.value.schema) == null ? void 0 : U.binding) == null ? void 0 : N.field;
        switch (W) {
          case G.Form: {
            I.changeField(O, A);
            break;
          }
          case G.Variable: {
            f.modifyViewModelFieldById(y.viewModel, O, A, !0);
            break;
          }
        }
        break;
      }
    }
  }
  function h(c) {
    if (!c || !c.componentInstance || !e)
      return;
    const f = c.componentInstance, C = f.value.schema;
    if (!C.binding || !C.binding.field)
      return;
    x(c);
    const { formSchemaUtils: g } = e, w = g.getViewModelIdByComponentId(f.value.belongedComponentId), y = g.getViewModelIdByComponentId(l.componentInstance.value.belongedComponentId);
    w !== y && L(l, e).moveInputBetweenComponent(c);
  }
  function M(c, f) {
    var C, g, w;
    if (c.componentCategory === "input") {
      const { label: y } = c;
      let I;
      const V = e == null ? void 0 : e.controlCreatorUtils;
      (C = c.bindingSourceContext) != null && C.entityFieldNode ? I = V.setFormFieldProperty((g = c.bindingSourceContext) == null ? void 0 : g.entityFieldNode, f == null ? void 0 : f.type) : (I = V.createFormGroupWithoutField(f == null ? void 0 : f.type), I.label = y);
      const P = L(l, e);
      return P.resolveFormGroupAppearance(I), P.syncFieldToViewModel(c, (w = I.editor) == null ? void 0 : w.type, i.id, i.title), I;
    }
    return f;
  }
  return {
    canAccepts: b,
    hideNestedPaddingInDesginerView: r,
    getPropsConfig: E,
    checkCanDeleteComponent: o,
    checkCanMoveComponent: a,
    onAcceptMovedChildElement: h,
    onResolveNewComponentSchema: M,
    getDesignerClass: n
  };
}
const we = /* @__PURE__ */ D({
  name: "FFieldsetDesign",
  props: he,
  emits: [],
  setup(l, e) {
    const t = T(), s = T(), i = $("design-item-context"), n = $("designer-host-service"), o = xe(i, n), a = re(s, i, o);
    e.expose(a.value);
    const {
      designerContext: r
    } = n;
    X(() => {
      s.value.componentInstance = a;
    });
    const d = T(!0);
    function u(h, M) {
      h && M && M.split(" ").reduce((f, C) => (f[C] = !0, f), h);
    }
    const p = F(() => {
      const h = {
        "f-section-formgroup": !0,
        "f-state-collapse": !d.value
      };
      return u(h, l.customClass), h;
    }), b = F(() => {
      const h = r && r.designerMode === "Mobile";
      return {
        display: d.value ? "flex" : "none",
        "flex-wrap": "wrap",
        "flex-direction": h ? "column" : "row"
      };
    }), E = F(() => ({
      btn: !0,
      "f-btn-mx": !0,
      "f-btn-collapse-expand": !0,
      "f-state-expand": d.value
    }));
    function x(h) {
      h.stopPropagation(), d.value = !d.value, Y(() => {
        ae();
      });
    }
    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
    }, [l.title]), v("div", {
      class: "f-toolbar",
      onClick: x
    }, [v("button", {
      class: E.value
    }, [v("span", null, [d.value ? l.collapseLabel : l.expandLabel])])])])]), v("div", {
      "data-dragref": `${i.schema.id}-container`,
      ref: s,
      class: "f-section-formgroup-inputs drag-container",
      style: b.value
    }, [e.slots.default && e.slots.default()])]);
  }
}), Be = {
  install(l) {
    l.component(B.name, B);
  },
  register(l, e, t, s, i) {
    l.fieldset = B, e.fieldset = q(i);
  },
  registerDesigner(l, e, t, s) {
    l.fieldset = we, e.fieldset = q(s);
  }
};
export {
  B as Fieldset,
  Be as default,
  he as fieldsetDesignerProps,
  R as fieldsetProps,
  Re as propsResolver,
  q as propsResolverGenerator
};