@farris/ui-vue/designer/section/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import O, { sectionToolbarItemProps as _, sectionProps as z } from "../../components/section/index.esm.js";
import { getCustomClass as R, withInstall as K } from "../../components/common/index.esm.js";
import Z, { schemaResolver as J, FResponseToolbarDesign as Q } from "../response-toolbar/index.esm.js";
import { createPropsResolver as k, resolveAppearance as W, createSectionEventHandlerResolver as X, getSchemaByType as Y } from "../../components/dynamic-resolver/index.esm.js";
import { responseToolbarProps as ee } from "../../components/response-toolbar/index.esm.js";
import { DgControl as P, canvasChanged as te, UseTemplateDragAndDropRules as ne, useDragulaCommonRule as oe, FDesignerInnerItem as ie, setPositionOfSelectedComponentBtnGroup as se, useDesignerComponent as re } from "../../components/designer-canvas/index.esm.js";
import { computed as b, ref as H, createVNode as p, nextTick as ae, defineComponent as le, inject as N, onMounted as ce } from "vue";
import { BaseControlProperty as de } from "../../components/property-panel/index.esm.js";
const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-design.gitee.io/section-toolbar-item.schema.json", fe = "section-toolbar-item", me = "A Farris Toolbar Item Component", he = "object", ye = {
  id: {
    description: "The unique identifier for a Response Toolbar",
    type: "string"
  },
  type: {
    description: "The type string of Response Toolbar",
    type: "string",
    default: "section-toolbar-item"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  text: {
    description: "按钮",
    type: "string",
    default: "按钮"
  },
  icon: {
    description: "图标",
    type: "string",
    default: ""
  },
  disabled: {
    description: "禁用",
    type: "boolean",
    default: !1
  },
  visible: {
    description: "是否可见",
    type: "boolean",
    default: !0
  },
  onClick: {
    description: "点击事件",
    type: "string",
    default: ""
  },
  tipsEnable: {
    description: "",
    type: "boolean",
    default: !1
  },
  tipsText: {
    description: "",
    type: "string",
    default: ""
  },
  dropdownClass: {
    description: "处于下拉菜单时的样式",
    type: "string",
    default: ""
  },
  split: {
    description: "",
    type: "boolean",
    default: !1
  }
}, be = [
  "id",
  "type",
  "text"
], ge = {
  onClick: "点击事件"
}, Ce = {
  $schema: ue,
  $id: pe,
  title: fe,
  description: me,
  type: he,
  properties: ye,
  required: be,
  events: ge
}, ve = k(_, Ce);
function Te(t, e, n) {
  return e ? { enableAccordion: e } : { enableAccordion: "" };
}
function xe(t, e) {
  var r, s;
  const n = {
    buttons: e.buttons,
    buttonPosition: e.position,
    buttonsVisible: e.visible
  };
  return (r = e.appearance) != null && r.class && (n.buttonsClass = (s = e.appearance) == null ? void 0 : s.class), n;
}
const B = /* @__PURE__ */ new Map([
  ["appearance", W],
  ["expanded", "expandStatus"],
  ["enableAccordion", Te],
  ["toolbar", xe]
]);
function Ae(t, e) {
  var l, u;
  if (!(e != null && e.schema))
    return;
  const n = ((u = (l = e.schema) == null ? void 0 : l.appearance) == null ? void 0 : u.class) || "", r = e.elementRef, s = window.getComputedStyle(r);
  s && s.display === "flex" && !n.includes("f-page-child-fill") && (t.appearance.class += " d-block");
}
function Se(t, e) {
  var f;
  const n = Math.random().toString().slice(2, 6), r = e.parentComponentInstance, s = t.getSchemaByType("section");
  Object.assign(s, {
    id: `section-${n}`,
    appearance: {
      class: "f-section-in-mainsubcard"
    },
    mainTitle: e.mainTitle || s.mainTitle || "标题"
  });
  const l = t.getSchemaByType("content-container");
  Object.assign(l, {
    id: `container-${n}`,
    appearance: {
      class: "f-struct-wrapper"
    },
    contents: [s]
  });
  const u = r.schema, x = ((f = u.appearance) == null ? void 0 : f.class) || "";
  switch (u && u.type) {
    case P["splitter-pane"].type: {
      s.appearance.class = "f-section-in-main", x.includes("f-page-child-fill") && (l.appearance.class += " f-struct-wrapper-child", s.fill = !0);
      break;
    }
    case P["content-container"].type:
      u.isLikeCardContainer && x.includes("f-struct-like-card-child-fill") && (l.appearance.class += " f-struct-wrapper-child", s.fill = !0);
  }
  return Ae(l, r), l;
}
function q(t, e, n) {
  return n.parentComponentInstance ? Se(t, n) : e;
}
const we = "https://json-schema.org/draft/2020-12/schema", He = "https://farris-design.gitee.io/section.schema.json", Me = "section", Pe = "A Farris Container Component", $e = "object", Re = {
  id: {
    description: "The unique identifier for a Section",
    type: "string"
  },
  type: {
    description: "The type string of Section component",
    type: "string",
    default: "section"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contentClass: {
    description: "",
    type: "string",
    default: ""
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  enableAccordion: {
    description: "",
    type: "string",
    default: ""
  },
  accordionMode: {
    description: "",
    type: "string",
    default: "default"
  },
  enableMaximize: {
    description: "",
    type: "boolean",
    default: !1
  },
  expanded: {
    description: "",
    type: "boolean",
    default: !0
  },
  fill: {
    description: "",
    type: "boolean",
    default: !1
  },
  headerClass: {
    description: "",
    type: "string",
    default: ""
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  showHeader: {
    description: "",
    type: "string",
    default: !0
  },
  mainTitle: {
    description: "",
    type: "string",
    default: ""
  },
  subTitle: {
    description: "",
    type: "string",
    default: ""
  },
  headerContentClass: {
    description: "",
    type: "string",
    default: ""
  },
  extendedAreaClass: {
    description: "",
    type: "string",
    default: ""
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  expandStatus: {
    description: "",
    type: "boolean",
    default: !0
  },
  toolbar: {
    description: "",
    type: "object",
    properties: {
      type: {
        type: "string",
        default: "section-toolbar"
      },
      position: {
        type: "string",
        default: "inHead"
      },
      buttons: {
        type: "array",
        default: []
      },
      appearance: {
        description: "",
        type: "object",
        properties: {
          class: {
            type: "string",
            default: ""
          }
        }
      }
    },
    default: null
  },
  headerTitleHtml: {
    description: "",
    type: "string",
    default: ""
  },
  headerTitleRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  headerHtml: {
    description: "",
    type: "string",
    default: ""
  },
  headerRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  headerContentHtml: {
    description: "",
    type: "string",
    default: ""
  },
  headerContentRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  toolbarHtml: {
    description: "",
    type: "string",
    default: ""
  },
  toolbarRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  extendedAreaHtml: {
    description: "",
    type: "string",
    default: ""
  },
  extendedAreaRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  footerClass: {
    description: "",
    type: "string",
    default: ""
  },
  footerRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  moreButtonClass: {
    description: "���������˵�ʱ����ʽ",
    type: "string",
    default: "btn-secondary"
  }
}, Ie = [
  "id",
  "type",
  "contents"
], G = {
  $schema: we,
  $id: He,
  title: Me,
  description: Pe,
  type: $e,
  properties: Re,
  required: Ie
}, Fe = "https://json-schema.org/draft/2020-12/schema", ke = "https://farris-design.gitee.io/section-toolbar.schema.json", De = "section-toolbar", Be = "A Farris Toolbar Component", je = "object", Ee = {
  id: {
    description: "The unique identifier for a Section Toolbar",
    type: "string"
  },
  type: {
    description: "The type string of Section Toolbar",
    type: "string",
    default: "section-toolbar"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string",
        default: ""
      }
    }
  },
  alignment: {
    description: "The alignment of Section Toolbar Button.",
    type: "string",
    default: "right"
  },
  buttons: {
    description: "The items of Section Toolbar.",
    type: "array",
    default: []
  },
  buttonSize: {
    type: "string",
    default: ""
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  moreButtonClass: {
    description: "处于下拉菜单时的样式",
    type: "string",
    default: "btn-secondary"
  }
}, Le = [
  "id",
  "type",
  "buttons"
], Ne = {
  onClick: "点击事件"
}, ze = {
  $schema: Fe,
  $id: ke,
  title: De,
  description: Be,
  type: je,
  properties: Ee,
  required: Le,
  events: Ne
}, qe = k(z, G, B, q), Ge = X(), U = Object.assign(
  {},
  z,
  {
    componentId: { type: String, default: "" },
    // 标题模版
    headerTitleHtml: { type: String, default: "" },
    // 头部模版
    headerHtml: { type: String, default: "" },
    // 头部内容区模版
    headerContentHtml: { type: String, default: "" },
    // 工具栏模版
    toolbarHtml: { type: String, default: "" },
    // 扩展区域模版
    extendedAreaHtml: { type: String, default: "" }
  }
), Ue = k(
  ee,
  ze,
  B,
  J
), Ve = k(U, G, B, q);
class Oe extends de {
  constructor(e, n) {
    super(e, n);
  }
  getPropertyConfig(e) {
    const n = this.getBasicPropConfig(e), r = this.getAppearanceProperties(e), s = this.getBehaviorConfig(e, ""), l = this.getExtendConfig(e), u = this.getHeaderTemplateConfig(e);
    return this.propertyConfig.categories = {
      basic: n,
      appearance: r,
      behavior: s,
      headerTemplate: u,
      extend: l
    }, this.propertyConfig;
  }
  getAppearanceProperties(e) {
    return {
      title: "外观",
      description: "Appearance",
      properties: {
        class: {
          description: "组件的CSS样式",
          title: "class样式"
        },
        style: {
          description: "组件的内容样式",
          title: "style样式"
        },
        fill: {
          title: "填充内容区域",
          type: "boolean",
          description: ""
        },
        showHeader: {
          title: "显示标题栏区域",
          type: "boolean",
          description: "",
          refreshPanelAfterChanged: !0
        },
        mainTitle: {
          title: "主标题",
          type: "string",
          description: "",
          visible: {
            showHeader: !0
          }
        },
        subTitle: {
          title: "副标题",
          type: "string",
          description: "",
          visible: {
            showHeader: !0
          }
        },
        enableMaximize: {
          title: "启用最大化",
          type: "boolean",
          description: "是否显示最大化按钮",
          visible: {
            showHeader: !0
          }
        },
        enableAccordion: {
          title: "面板收折",
          type: "enum",
          description: "是否启用分组面板的收折特性",
          editor: {
            type: "combo-list",
            textField: "value",
            valueField: "key",
            idField: "key",
            editable: !1,
            data: [
              {
                key: "",
                value: "不启用"
              },
              {
                key: "default",
                value: "启用默认收折"
              },
              {
                key: "custom",
                value: "启用自定义收折"
              }
            ]
          },
          // visible: {
          //     showHeader: true // 属性面板上此属性不受showHeader限制，是因为expandStatus不受showHeader限制
          // },
          refreshPanelAfterChanged: !0
        },
        expandStatus: {
          title: "默认状态",
          type: "boolean",
          description: "默认面板是展开还是收起",
          editor: {
            type: "combo-list",
            textField: "name",
            valueField: "value",
            data: [{
              name: "展开",
              value: !0
            }, {
              name: "收起",
              value: !1
            }],
            enableClear: !1
          },
          visible: e.enableAccordion === "default"
        }
      },
      setPropertyRelates(n, r) {
        if (n)
          switch (n && n.propertyID) {
            case "mainTitle": {
              n.needRefreshControlTree = !0;
              break;
            }
            case "showHeader": {
              const s = document.getElementsByClassName("dgComponentFocused");
              Array.from(s).forEach((l) => l.classList.remove("dgComponentFocused")), te.value++;
              break;
            }
          }
      }
    };
  }
  getExtendConfig(e) {
    return {
      title: "扩展",
      description: "",
      properties: {
        extendedAreaHtml: {
          title: "扩展区域模板",
          type: "string",
          description: "为标题栏下方的扩展区域设置HTML模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        extendedAreaClass: {
          title: "扩展区域class",
          type: "string",
          description: "指定扩展区域class样式"
        },
        contentClass: {
          title: "主内容区域class",
          type: "string",
          description: "指定主要内容区域class样式"
        }
      }
    };
  }
  getHeaderTemplateConfig(e) {
    return {
      title: "标题栏模板配置",
      description: "",
      hide: e.showHeader === !1,
      properties: {
        headerHtml: {
          title: "标题栏模板",
          type: "string",
          description: "设置标题栏HTML模板，会影响收折、最大化这些展示，其他自定义模版指定失效。",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        headerClass: {
          title: "标题栏class",
          type: "string",
          description: "指定标题栏整体区域class样式"
        },
        headerTitleHtml: {
          title: "标题模板",
          type: "string",
          description: "为标题区域指定HTML模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        headerContentHtml: {
          title: "内容模板",
          type: "string",
          description: "为跟在标题后面的内容，指定HTML模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        headerContentClass: {
          title: "内容区域class",
          type: "string",
          description: "指定标题栏内容区域class样式"
        },
        toolbarHtml: {
          title: "工具栏模板",
          type: "string",
          description: "为工具栏区域指定HTML模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        },
        buttonsClass: {
          title: "工具栏class",
          type: "string",
          description: "指定工具栏区域class样式",
          visible: e.toolbarHtml
        }
      }
    };
  }
}
function _e(t, e) {
  const n = new ne(), r = t.schema;
  function s(o) {
    return new Oe(o, e).getPropertyConfig(r);
  }
  function l(o) {
    var d;
    const { componentType: i, sourceType: a, sourceElement: c } = o;
    return !!(a === "control" && i === P["filter-bar"].type || a === "move" && i === P["content-container"].type && ((d = c == null ? void 0 : c.className) != null && d.includes("f-filter-container")));
  }
  function u(o, i) {
    var d, m;
    const c = (e == null ? void 0 : e.schemaService).getTreeGridUdtFields(o);
    if (c) {
      const v = c.find(($) => $.key === i), T = v && v.field;
      if ((m = (d = T == null ? void 0 : T.type) == null ? void 0 : d.name) != null && m.includes("PathHierarchyInfo"))
        return !0;
    }
  }
  function x(o) {
    var $;
    if (!e)
      return !1;
    const i = ($ = r.appearance) == null ? void 0 : $.class, { sourceType: a } = o, { formSchemaUtils: c } = e;
    if (!(i && (i.includes("f-section-grid") || i.includes("f-section-treegrid"))))
      return !1;
    const m = c.getViewModelIdByComponentId(t.componentInstance.value.belongedComponentId), v = c.getViewModelById(m);
    if (v && v.bindTo !== "/")
      return !1;
    const T = c.selectNode(r, (j) => j.type === "tree-grid");
    if (T && !u(m, T.udtField))
      return !1;
    if (a === "move")
      return !0;
    if (a === "control") {
      if (r.contents && r.contents.find((D) => {
        var I, L;
        return D.type === P["content-container"].type && ((L = (I = D.appearance) == null ? void 0 : I.class) == null ? void 0 : L.includes("f-filter-container"));
      }))
        return !1;
      const E = c.getComponentById("root-component");
      if (E && c.selectNode(E, (I) => I.type === P["query-solution"].type))
        return !1;
    }
    return !0;
  }
  function f(o) {
    if (l(o))
      return x(o);
    if (!oe().basalDragulaRuleForContainer(o, e))
      return !1;
    const { canAccept: a } = n.getTemplateRule(t, e);
    return a;
  }
  function S() {
    const { canDelete: o } = n.getTemplateRule(t, e);
    return o;
  }
  function g() {
    const { canMove: o } = n.getTemplateRule(t, e);
    return o;
  }
  function h() {
    const { canMove: o, canDelete: i } = n.getTemplateRule(t, e);
    return !o && !i;
  }
  function y(o) {
    o && (o.stopPropagation(), o.preventDefault());
    const { schema: i } = t;
    (!i.toolbar || !i.toolbar.buttons) && (i.toolbar = { id: `${i.id}_toolbar`, type: "section-toolbar", buttons: [] });
    const a = Y("section-toolbar-item");
    a.id = `section_toolbar_item_${Math.random().toString().slice(2, 6)}`, i.toolbar.buttons.push(a);
  }
  function C() {
    var d;
    const { schema: o } = t, i = e == null ? void 0 : e.formSchemaUtils;
    if (o.showHeader === !1 || !i)
      return;
    const a = i.selectNode(o, (m) => m.type === P["response-form"].type), c = ((d = o.toolbar) == null ? void 0 : d.buttons) || [];
    if (!a && c.length === 0)
      return [{
        id: "appendToolbar",
        title: "新增按钮",
        icon: "f-icon f-icon-plus-circle text-white",
        onClick: (m) => y(m)
      }];
  }
  function A() {
    var c, d;
    if (!e)
      return;
    const o = e.formSchemaUtils.getExpressions();
    if (!o || !o.length)
      return;
    const { schema: i } = t;
    if (!((d = (c = i.toolbar) == null ? void 0 : c.buttons) != null && d.length))
      return;
    const a = (m) => {
      m.forEach((v) => {
        const T = o.findIndex(($) => $.target === v.id);
        T > -1 && o.splice(T, 1), v.children && v.children.length && a(v.children);
      });
    };
    a(i.toolbar.buttons);
  }
  function M() {
    A();
  }
  function w() {
    var o, i;
    if (t && e) {
      const { formSchemaUtils: a } = e, c = a.getControlBasicInfoMap(), { schema: d } = t;
      c.set(d.id, {
        componentTitle: d.mainTitle,
        parentPathName: d.mainTitle
      }), (i = (o = d.toolbar) == null ? void 0 : o.buttons) != null && i.length && d.toolbar.buttons.map((m) => {
        var v;
        c.set(m.id, {
          componentTitle: m.text,
          parentPathName: `${d.mainTitle} > ${m.text}`
        }), (v = m.children) != null && v.length && m.children.map((T) => {
          c.set(T.id, {
            componentTitle: T.text,
            parentPathName: `${d.mainTitle} > ${T.text}`
          });
        });
      });
    }
  }
  return {
    canAccepts: f,
    checkCanDeleteComponent: S,
    checkCanMoveComponent: g,
    hideNestedPaddingInDesginerView: h,
    getPropsConfig: s,
    getCustomButtons: C,
    onRemoveComponent: M,
    setComponentBasicInfoMap: w
  };
}
function Ke(t, e, n) {
  let r;
  function s(f = 1) {
    const S = [
      "body>.f-datagrid-settings-simple-host",
      "body>div",
      "body>farris-dialog>.farris-modal.show",
      "body>.farris-modal.show",
      "body>farris-filter-panel>.f-filter-panel-wrapper",
      "body .f-sidebar-show>.f-sidebar-main",
      "body>.popover.show",
      "body>filter-row-panel>.f-datagrid-filter-panel",
      "body>.f-section-maximize"
    ], g = Array.from(document.body.querySelectorAll(S.join(","))).filter((y) => y).map((y) => {
      const { display: C, zIndex: A } = window.getComputedStyle(y);
      return C === "none" ? 0 : parseInt(A, 10);
    }).filter((y) => y);
    let h = Math.max(...g);
    return h < 1040 && (h = 1040), h + f;
  }
  function l() {
    r = t.value.nextElementSibling;
    const f = document && document.querySelector("body");
    f && (f.appendChild(t.value), t.value.style.zIndex = s());
  }
  function u() {
    r ? e.value.insertBefore(
      t.value,
      r
    ) : e.value.appendChild(t.value), t.value.style.zIndex = null;
  }
  function x() {
    !t || !e.value || (n.value = !n.value, n.value ? l() : u());
  }
  return { onClickMaxMinIcon: x };
}
function V(t, e) {
  var h;
  const n = b(() => "f-section-toolbar col-6" + (t.buttonPosition === "inHead" ? " f-toolbar f-section-header--toolbar" : " f-section-content--toolbar") + (t.buttonsClass ? " " + t.buttonsClass : "")), r = H(t.buttons), s = H(e.schema.toolbar);
  s.value && !s.value.type && (s.value.type = "section-toolbar");
  const l = t.componentId, u = `${l}-toolbar`, x = b(() => t.buttonPosition === "inHead" ? "right" : "left");
  function f(y, C, A, M) {
    var w;
    (w = e.setupContext) == null || w.emit("selectionChange", y, C, A, M);
  }
  function S() {
    var y, C;
    return (C = (y = s.value) == null ? void 0 : y.buttons) != null && C.length ? p("div", {
      class: n.value
    }, [p("div", {
      class: "w-100",
      style: "flex:1"
    }, [p(ie, {
      modelValue: s.value,
      "onUpdate:modelValue": (A) => s.value = A,
      class: "w-100 position-relative",
      canAdd: !1,
      childType: "section-toolbar-item",
      childLabel: "按钮",
      contentKey: "buttons",
      id: u,
      onSelectionChange: f,
      componentId: l
    }, {
      default: () => [p(Z, {
        customClass: "d-block text-right",
        moreButtonClass: t.moreButtonClass,
        items: r.value,
        alignment: x.value,
        componentId: l
      }, null)]
    })])]) : null;
  }
  function g() {
    return p("div", {
      class: n.value
    }, [p("div", {
      class: "w-100",
      style: "flex:1",
      innerHTML: t.toolbarHtml.trim()
    }, null)]);
  }
  return (h = t.toolbarHtml) != null && h.trim() ? g() : S();
}
function Ze(t, e, n, r, s, l, u) {
  const x = b(() => t.buttonPosition), {
    onClickMaxMinIcon: f
  } = Ke(r, s, l), S = b(() => t.enableMaximize), g = b(() => t.enableAccordion !== ""), h = b(() => R({
    "f-section-header": !0
  }, t.headerClass));
  function y(a) {
    a.stopPropagation(), t.enableAccordion !== "" && (n.value = !n.value, ae(() => {
      se();
    }));
  }
  function C() {
    const a = b(() => ({
      btn: !0,
      "f-btn-collapse-expand": !0,
      "f-btn-mx": !0,
      "f-state-expand": n.value
    })), c = b(() => ({
      "f-icon": !0,
      "f-icon-maximize": !l.value,
      "f-icon-minimize": l.value
    }));
    return p("div", {
      class: "f-max-accordion"
    }, [S.value ? p("span", {
      class: c.value,
      onClick: f
    }, null) : "", g.value ? p("button", {
      class: a.value,
      onClick: y
    }, [p("span", null, [n.value ? t.collapseLabel : t.expandLabel])]) : ""]);
  }
  function A() {
    return p("div", {
      class: "f-title"
    }, [p("h4", {
      class: "f-title-text"
    }, [t.mainTitle]), t.subTitle && p("span", null, [t.subTitle])]);
  }
  function M() {
    const a = b(() => R({
      "f-content": !0
    }, t.headerContentClass));
    return e.slots.headerContent ? p("div", {
      class: a.value
    }, [e.slots.headerContent()]) : t.headerContentHtml ? p("div", {
      class: a.value,
      innerHTML: t.headerContentHtml
    }, null) : null;
  }
  function w() {
    return e.slots.headerTitle ? e.slots.headerTitle() : t.headerTitleHtml ? p("div", {
      innerHTML: t.headerTitleHtml
    }, null) : A();
  }
  function o() {
    return p("div", {
      class: h.value
    }, [w(), M(), x.value === "inHead" && V(t, u), (S.value || g.value) && C()]);
  }
  function i() {
    return e.slots.header ? p("div", {
      class: h.value
    }, [e.slots.header()]) : t.headerHtml ? p("div", {
      class: h.value,
      innerHTML: t.headerHtml
    }, null) : o();
  }
  return () => t.showHeader && i();
}
const F = /* @__PURE__ */ le({
  name: "FSectionDesign",
  props: U,
  emits: [],
  setup(t, e) {
    const n = H(), r = H(), s = H(), l = N("designer-host-service"), u = N("design-item-context"), x = _e(u, l), f = re(n, u, x);
    f.value.styles = "display: inherit;", ce(() => {
      n.value.componentInstance = f;
    }), e.expose(f.value);
    const S = H(t.customClass), g = b(() => t.enableAccordion), h = H(!0), y = b(() => t.buttonPosition), C = H(!1), A = Ze(t, e, h, r, s, C, u), M = b(() => {
      const d = {
        "f-section": !0,
        "f-section-accordion": g.value === "default",
        "f-state-collapse": g.value && !h.value,
        "f-section-custom-accordion": g.value === "custom",
        "f-section-fill": t.fill,
        "f-section-maximize": C.value,
        "f-utils-fill": !0,
        "p-0": !0
      };
      return R(d, S.value);
    }), w = b(() => R({
      "f-section-content": !0,
      "drag-container": !0
    }, t.contentClass)), o = b(() => ({
      visibility: g.value && !h.value ? "hidden" : "visible"
    })), i = b(() => R({
      "f-section-extend": !0
    }, t.extendedAreaClass));
    function a() {
      if (e.slots.extend)
        return p("div", {
          class: i.value
        }, [e.slots.extend()]);
      if (t.extendedAreaHtml)
        return p("div", {
          class: i.value,
          innerHTML: t.extendedAreaHtml
        }, null);
    }
    function c() {
      return p("div", {
        class: w.value,
        ref: n,
        "data-dragref": `${u.schema.id}-container`,
        style: o.value
      }, [y.value === "inContent" && V(t, u), e.slots.default && e.slots.default()]);
    }
    return () => p("div", {
      class: M.value,
      ref: r,
      style: t.customStyle
    }, [A(), a(), c()]);
  }
});
F.register = (t, e, n, r) => {
  t.section = O, e.section = qe, r.section = { eventHandlerResolver: Ge };
};
F.registerDesigner = (t, e, n) => {
  t.section = F, e.section = Ve, e["section-toolbar-item"] = ve, t["section-toolbar"] = Q, e["section-toolbar"] = Ue;
};
const ot = K(F);
export {
  ot as default
};