@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 H, 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 A, 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 g, ref as P, 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: "点击事件"
}, ve = {
  $schema: ue,
  $id: pe,
  title: fe,
  description: me,
  type: he,
  properties: ye,
  required: be,
  events: ge
}, Ce = k(_, ve);
function Te(t, e, n) {
  return e ? { enableAccordion: n.accordionMode } : { enableAccordion: "" };
}
function Se(t, e) {
  var n;
  return {
    buttons: e.buttons,
    buttonPosition: e.position,
    buttonsClass: (n = e.appearance) == null ? void 0 : n.class,
    buttonsVisible: e.visible
  };
}
const B = /* @__PURE__ */ new Map([
  ["appearance", W],
  ["expanded", "expandStatus"],
  ["enableAccordion", Te],
  ["toolbar", Se]
]);
function xe(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) || "", a = e.elementRef, r = window.getComputedStyle(a);
  r && r.display === "flex" && !n.includes("f-page-child-fill") && (t.appearance.class += " d-block");
}
function we(t, e) {
  var f;
  const n = Math.random().toString().slice(2, 6), a = e.parentComponentInstance, r = t.getSchemaByType("section");
  Object.assign(r, {
    id: `section-${n}`,
    appearance: {
      class: "f-section-in-mainsubcard"
    },
    mainTitle: e.mainTitle || r.mainTitle || "标题"
  });
  const l = t.getSchemaByType("content-container");
  Object.assign(l, {
    id: `container-${n}`,
    appearance: {
      class: "f-struct-wrapper"
    },
    contents: [r]
  });
  const u = a.schema, S = ((f = u.appearance) == null ? void 0 : f.class) || "";
  switch (u && u.type) {
    case A["splitter-pane"].type: {
      r.appearance.class = "f-section-in-main", S.includes("f-page-child-fill") && (l.appearance.class += " f-struct-wrapper-child", r.fill = !0);
      break;
    }
    case A["content-container"].type:
      u.isLikeCardContainer && S.includes("f-struct-like-card-child-fill") && (l.appearance.class += " f-struct-wrapper-child", r.fill = !0);
  }
  return xe(l, a), l;
}
function q(t, e, n) {
  return n.parentComponentInstance ? we(t, n) : e;
}
const Me = "https://json-schema.org/draft/2020-12/schema", Pe = "https://farris-design.gitee.io/section.schema.json", $e = "section", Ae = "A Farris Container Component", Re = "object", He = {
  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: ""
  },
  extendClass: {
    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
  },
  footerClass: {
    description: "",
    type: "string",
    default: ""
  },
  footerRenderFunction: {
    description: "",
    type: "function",
    default: null
  },
  moreButtonClass: {
    description: "处于下拉菜单时的样式",
    type: "string",
    default: "btn-secondary"
  }
}, Ie = [
  "id",
  "type",
  "contents"
], G = {
  $schema: Me,
  $id: Pe,
  title: $e,
  description: Ae,
  type: Re,
  properties: He,
  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: "" }
  }
), 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), a = this.getAppearanceProperties(e), r = this.getBehaviorConfig(e, ""), l = this.getExtendConfig(e), u = this.getHeaderTemplateConfig(e);
    return this.propertyConfig.categories = {
      basic: n,
      appearance: a,
      behavior: r,
      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
          }
        },
        enableAccordion: {
          title: "面板收折",
          type: "enum",
          description: "是否启用分组面板的收折特性",
          editor: {
            type: "combo-list",
            textField: "value",
            valueField: "key",
            idField: "key",
            editable: !1,
            data: [
              {
                key: "",
                value: "不启用"
              },
              {
                key: "default",
                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, a) {
        if (n)
          switch (n && n.propertyID) {
            case "mainTitle": {
              n.needRefreshControlTree = !0;
              break;
            }
            case "showHeader": {
              const r = document.getElementsByClassName("dgComponentFocused");
              Array.from(r).forEach((l) => l.classList.remove("dgComponentFocused")), te.value++;
              break;
            }
          }
      }
    };
  }
  getExtendConfig(e) {
    return {
      title: "扩展",
      description: "",
      properties: {
        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"
          }
        },
        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"
          }
        },
        toolbarHtml: {
          title: "工具栏模板",
          type: "string",
          description: "为工具栏区域指定HTML模板",
          refreshPanelAfterChanged: !0,
          editor: {
            type: "code-editor",
            language: "html"
          }
        }
      }
    };
  }
}
function _e(t, e) {
  const n = new ne(), a = t.schema;
  function r(o) {
    return new Oe(o, e).getPropertyConfig(a);
  }
  function l(o) {
    var d;
    const { componentType: i, sourceType: s, sourceElement: c } = o;
    return !!(s === "control" && i === A["filter-bar"].type || s === "move" && i === A["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 C = c.find((R) => R.key === i), T = C && C.field;
      if ((m = (d = T == null ? void 0 : T.type) == null ? void 0 : d.name) != null && m.includes("PathHierarchyInfo"))
        return !0;
    }
  }
  function S(o) {
    var R;
    if (!e)
      return !1;
    const i = (R = a.appearance) == null ? void 0 : R.class, { sourceType: s } = 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), C = c.getViewModelById(m);
    if (C && C.bindTo !== "/")
      return !1;
    const T = c.selectNode(a, (j) => j.type === "tree-grid");
    if (T && !u(m, T.udtField))
      return !1;
    if (s === "move")
      return !0;
    if (s === "control") {
      if (a.contents && a.contents.find((D) => {
        var I, L;
        return D.type === A["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 === A["query-solution"].type))
        return !1;
    }
    return !0;
  }
  function f(o) {
    if (l(o))
      return S(o);
    if (!oe().basalDragulaRuleForContainer(o, e))
      return !1;
    const { canAccept: s } = n.getTemplateRule(t, e);
    return s;
  }
  function w() {
    const { canDelete: o } = n.getTemplateRule(t, e);
    return o;
  }
  function b() {
    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 s = Y("section-toolbar-item");
    s.id = `section_toolbar_item_${Math.random().toString().slice(2, 6)}`, i.toolbar.buttons.push(s);
  }
  function v() {
    var d;
    const { schema: o } = t, i = e == null ? void 0 : e.formSchemaUtils;
    if (o.showHeader === !1 || !i)
      return;
    const s = i.selectNode(o, (m) => m.type === A["response-form"].type), c = ((d = o.toolbar) == null ? void 0 : d.buttons) || [];
    if (!s && c.length === 0)
      return [{
        id: "appendToolbar",
        title: "新增按钮",
        icon: "f-icon f-icon-plus-circle text-white",
        onClick: (m) => y(m)
      }];
  }
  function x() {
    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 s = (m) => {
      m.forEach((C) => {
        const T = o.findIndex((R) => R.target === C.id);
        T > -1 && o.splice(T, 1), C.children && C.children.length && s(C.children);
      });
    };
    s(i.toolbar.buttons);
  }
  function $() {
    x();
  }
  function M() {
    var o, i;
    if (t && e) {
      const { formSchemaUtils: s } = e, c = s.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 C;
        c.set(m.id, {
          componentTitle: m.text,
          parentPathName: `${d.mainTitle} > ${m.text}`
        }), (C = m.children) != null && C.length && m.children.map((T) => {
          c.set(T.id, {
            componentTitle: T.text,
            parentPathName: `${d.mainTitle} > ${T.text}`
          });
        });
      });
    }
  }
  return {
    canAccepts: f,
    checkCanDeleteComponent: w,
    checkCanMoveComponent: b,
    hideNestedPaddingInDesginerView: h,
    getPropsConfig: r,
    getCustomButtons: v,
    onRemoveComponent: $,
    setComponentBasicInfoMap: M
  };
}
function Ke(t, e, n) {
  let a;
  function r(f = 1) {
    const w = [
      "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"
    ], b = Array.from(document.body.querySelectorAll(w.join(","))).filter((y) => y).map((y) => {
      const { display: v, zIndex: x } = window.getComputedStyle(y);
      return v === "none" ? 0 : parseInt(x, 10);
    }).filter((y) => y);
    let h = Math.max(...b);
    return h < 1040 && (h = 1040), h + f;
  }
  function l() {
    a = t.value.nextElementSibling;
    const f = document && document.querySelector("body");
    f && (f.appendChild(t.value), t.value.style.zIndex = r());
  }
  function u() {
    a ? e.value.insertBefore(
      t.value,
      a
    ) : e.value.appendChild(t.value), t.value.style.zIndex = null;
  }
  function S() {
    !t || !e.value || (n.value = !n.value, n.value ? l() : u());
  }
  return { onClickMaxMinIcon: S };
}
function V(t, e) {
  var h;
  const n = g(() => "f-section-toolbar col-6" + (t.buttonPosition === "inHead" ? " f-toolbar f-section-header--toolbar" : " f-section-content--toolbar") + (t.buttonsClass ? " " + t.buttonsClass : "")), a = P(t.buttons), r = P(e.schema.toolbar);
  r.value && !r.value.type && (r.value.type = "section-toolbar");
  const l = t.componentId, u = `${l}-toolbar`, S = g(() => t.buttonPosition === "inHead" ? "right" : "left");
  function f(y, v, x, $) {
    var M;
    (M = e.setupContext) == null || M.emit("selectionChange", y, v, x, $);
  }
  function w() {
    var y, v;
    return (v = (y = r.value) == null ? void 0 : y.buttons) != null && v.length ? p("div", {
      class: n.value
    }, [p("div", {
      class: "w-100",
      style: "flex:1"
    }, [p(ie, {
      modelValue: r.value,
      "onUpdate:modelValue": (x) => r.value = x,
      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: a.value,
        alignment: S.value,
        componentId: l
      }, null)]
    })])]) : null;
  }
  function b() {
    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() ? b() : w();
}
function Ze(t, e, n, a, r, l, u) {
  const S = g(() => t.buttonPosition), {
    onClickMaxMinIcon: f
  } = Ke(a, r, l), w = g(() => t.enableMaximize), b = g(() => t.enableAccordion !== ""), h = g(() => {
    let s = {
      "f-section-header": !0
    };
    return e.slots.header && (s = H(s, t.headerClass)), s;
  });
  function y(s) {
    s.stopPropagation(), t.enableAccordion !== "" && (n.value = !n.value, ae(() => {
      se();
    }));
  }
  function v() {
    const s = g(() => ({
      btn: !0,
      "f-btn-collapse-expand": !0,
      "f-btn-mx": !0,
      "f-state-expand": n.value
    })), c = g(() => ({
      "f-icon": !0,
      "f-icon-maximize": !l.value,
      "f-icon-minimize": l.value
    }));
    return p("div", {
      class: "f-max-accordion"
    }, [w.value ? p("span", {
      class: c.value,
      onClick: f
    }, null) : "", b.value ? p("button", {
      class: s.value,
      onClick: y
    }, [p("span", null, [n.value ? t.collapseLabel : t.expandLabel])]) : ""]);
  }
  function x() {
    return p("div", {
      class: "f-title"
    }, [p("h4", {
      class: "f-title-text"
    }, [t.mainTitle]), t.subTitle && p("span", null, [t.subTitle])]);
  }
  function $() {
    const s = g(() => H({
      "f-content": !0
    }, t.headerContentClass));
    return e.slots.headerContent ? p("div", {
      class: s.value
    }, [e.slots.headerContent()]) : t.headerContentHtml ? p("div", {
      class: s.value,
      innerHTML: t.headerContentHtml
    }, null) : null;
  }
  function M() {
    return e.slots.headerTitle ? e.slots.headerTitle() : t.headerTitleHtml ? p("div", {
      innerHTML: t.headerTitleHtml
    }, null) : x();
  }
  function o() {
    return p("div", {
      class: h.value
    }, [M(), $(), S.value === "inHead" && V(t, u), (w.value || b.value) && v()]);
  }
  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 = P(), a = P(), r = P(), l = N("designer-host-service"), u = N("design-item-context"), S = _e(u, l), f = re(n, u, S);
    f.value.styles = "display: inherit;", ce(() => {
      n.value.componentInstance = f;
    }), e.expose(f.value);
    const w = P(t.customClass), b = g(() => t.enableAccordion), h = P(!0), y = g(() => t.buttonPosition), v = P(!1), x = Ze(t, e, h, a, r, v, u), $ = g(() => {
      const d = {
        "f-section": !0,
        "f-section-accordion": b.value === "default",
        "f-state-collapse": (b.value === "default" || b.value === "custom") && !h.value,
        "f-section-custom-accordion": b.value === "custom",
        "f-section-fill": t.fill,
        "f-section-maximize": v.value,
        "f-utils-fill": !0,
        "p-0": !0
      };
      return H(d, w.value);
    }), M = g(() => H({
      "f-section-content": !0,
      "drag-container": !0
    }, t.contentClass)), o = g(() => ({
      visibility: (b.value === "default" || b.value === "custom") && !h.value ? "hidden" : "visible"
    })), i = g(() => H({
      "f-section-extend": !0
    }, i.value));
    function s() {
      return e.slots.extend && p("div", {
        class: i.value
      }, [e.slots.extend()]);
    }
    function c() {
      return p("div", {
        class: M.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: $.value,
      ref: a,
      style: t.customStyle
    }, [x(), s(), c()]);
  }
});
F.register = (t, e, n, a) => {
  t.section = O, e.section = qe, a.section = { eventHandlerResolver: Ge };
};
F.registerDesigner = (t, e, n) => {
  t.section = F, e.section = Ve, e["section-toolbar-item"] = Ce, t["section-toolbar"] = Q, e["section-toolbar"] = Ue;
};
const ot = K(F);
export {
  ot as default
};