@farris/ui-vue 1.8.0-alpha.0 → 1.8.0-beta.1

package/designer/section/index.esm.js

@@ -3,10 +3,10 @@ import { getCustomClass as I, withInstall as K } from "../../components/common/i
 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 { 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 M, 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", be = {
+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"
@@ -74,56 +74,56 @@ const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-
     type: "boolean",
     default: !1
   }
-}, ye = [
+}, be = [
   "id",
   "type",
   "text"
 ], ge = {
   onClick: "点击事件"
-}, ve = {
+}, Ce = {
   $schema: ue,
   $id: pe,
   title: fe,
   description: me,
   type: he,
-  properties: be,
-  required: ye,
+  properties: ye,
+  required: be,
   events: ge
-}, Ce = k(_, ve);
+}, ve = k(_, Ce);
 function Te(t, e, n) {
   return e ? { enableAccordion: n.accordionMode } : { enableAccordion: "" };
 }
-function Se(t, e) {
-  var n;
-  return {
+function xe(t, e) {
+  var r, i;
+  const n = {
     buttons: e.buttons,
     buttonPosition: e.position,
-    buttonsClass: (n = e.appearance) == null ? void 0 : n.class,
     buttonsVisible: e.visible
   };
+  return (r = e.appearance) != null && r.class && (n.buttonsClass = (i = e.appearance) == null ? void 0 : i.class), n;
 }
 const j = /* @__PURE__ */ new Map([
   ["appearance", W],
   ["expanded", "expandStatus"],
   ["enableAccordion", Te],
-  ["toolbar", Se]
+  ["toolbar", xe]
 ]);
-function xe(t, e) {
+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) || "", a = e.elementRef, r = window.getComputedStyle(a);
-  r && r.display === "flex" && !n.includes("f-page-child-fill") && (t.appearance.class += " d-block");
+  const n = ((u = (l = e.schema) == null ? void 0 : l.appearance) == null ? void 0 : u.class) || "", r = e.elementRef, i = window.getComputedStyle(r);
+  i && i.display === "flex" && !n.includes("f-page-child-fill") && (t.appearance.class += " d-block");
 }
-function we(t, e) {
+function Se(t, e) {
   var f;
-  const n = Math.random().toString().slice(2, 6), a = e.parentComponentInstance, r = t.getSchemaByType("section");
-  Object.assign(r, {
+  const n = Math.random().toString().slice(2, 6), r = e.parentComponentInstance, i = t.getSchemaByType("section");
+  Object.assign(i, {
     id: `section-${n}`,
     appearance: {
       class: "f-section-in-mainsubcard"
     },
-    mainTitle: e.mainTitle || r.mainTitle || "标题"
+    mainTitle: e.mainTitle || i.mainTitle || "标题"
   });
   const l = t.getSchemaByType("content-container");
   Object.assign(l, {
@@ -131,23 +131,23 @@ function we(t, e) {
     appearance: {
       class: "f-struct-wrapper"
     },
-    contents: [r]
+    contents: [i]
   });
-  const u = a.schema, S = ((f = u.appearance) == null ? void 0 : f.class) || "";
+  const u = r.schema, x = ((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);
+    case P["splitter-pane"].type: {
+      i.appearance.class = "f-section-in-main", x.includes("f-page-child-fill") && (l.appearance.class += " f-struct-wrapper-child", i.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);
+    case P["content-container"].type:
+      u.isLikeCardContainer && x.includes("f-struct-like-card-child-fill") && (l.appearance.class += " f-struct-wrapper-child", i.fill = !0);
   }
-  return xe(l, a), l;
+  return Ae(l, r), l;
 }
 function q(t, e, n) {
-  return n.parentComponentInstance ? we(t, n) : e;
+  return n.parentComponentInstance ? Se(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", He = "object", Ie = {
+const we = "https://json-schema.org/draft/2020-12/schema", Me = "https://farris-design.gitee.io/section.schema.json", He = "section", Pe = "A Farris Container Component", $e = "object", Ie = {
   id: {
     description: "The unique identifier for a Section",
     type: "string"
@@ -243,7 +243,7 @@ const Me = "https://json-schema.org/draft/2020-12/schema", Pe = "https://farris-
     type: "string",
     default: ""
   },
-  extendClass: {
+  extendAreaClass: {
     description: "",
     type: "string",
     default: ""
@@ -326,17 +326,27 @@ const Me = "https://json-schema.org/draft/2020-12/schema", Pe = "https://farris-
     description: "",
     type: "function",
     default: null
+  },
+  extendedAreaHtml: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  extendAreaRenderFunction: {
+    description: "",
+    type: "function",
+    default: null
   }
 }, Re = [
   "id",
   "type",
   "contents"
 ], G = {
-  $schema: Me,
-  $id: Pe,
-  title: $e,
-  description: Ae,
-  type: He,
+  $schema: we,
+  $id: Me,
+  title: He,
+  description: Pe,
+  type: $e,
   properties: Ie,
   required: Re
 }, Fe = "https://json-schema.org/draft/2020-12/schema", ke = "https://farris-design.gitee.io/section-toolbar.schema.json", De = "section-toolbar", je = "A Farris Toolbar Component", Be = "object", Ee = {
@@ -398,10 +408,16 @@ const Me = "https://json-schema.org/draft/2020-12/schema", Pe = "https://farris-
   z,
   {
     componentId: { type: String, default: "" },
+    // 标题模版
     headerTitleHtml: { type: String, default: "" },
+    // 头部模版
     headerHtml: { type: String, default: "" },
+    // 头部内容区模版
     headerContentHtml: { type: String, default: "" },
-    toolbarHtml: { type: String, default: "" }
+    // 工具栏模版
+    toolbarHtml: { type: String, default: "" },
+    // 扩展区域模版
+    extendedAreaHtml: { type: String, default: "" }
   }
 ), Ue = k(
   ee,
@@ -414,11 +430,11 @@ class Oe extends de {
     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);
+    const n = this.getBasicPropConfig(e), r = this.getAppearanceProperties(e), i = this.getBehaviorConfig(e, ""), l = this.getExtendConfig(e), u = this.getHeaderTemplateConfig(e);
     return this.propertyConfig.categories = {
       basic: n,
-      appearance: a,
-      behavior: r,
+      appearance: r,
+      behavior: i,
       headerTemplate: u,
       extend: l
     }, this.propertyConfig;
@@ -463,6 +479,14 @@ class Oe extends de {
             showHeader: !0
           }
         },
+        enableMaximize: {
+          title: "启用最大化",
+          type: "string",
+          description: "是否显示最大化按钮",
+          visible: {
+            showHeader: !0
+          }
+        },
         enableAccordion: {
           title: "面板收折",
           type: "enum",
@@ -481,6 +505,10 @@ class Oe extends de {
               {
                 key: "default",
                 value: "启用默认收折"
+              },
+              {
+                key: "custom",
+                value: "启用自定义收折"
               }
             ]
           },
@@ -509,7 +537,7 @@ class Oe extends de {
           visible: e.enableAccordion === "default"
         }
       },
-      setPropertyRelates(n, a) {
+      setPropertyRelates(n, r) {
         if (n)
           switch (n && n.propertyID) {
             case "mainTitle": {
@@ -517,8 +545,8 @@ class Oe extends de {
               break;
             }
             case "showHeader": {
-              const r = document.getElementsByClassName("dgComponentFocused");
-              Array.from(r).forEach((l) => l.classList.remove("dgComponentFocused")), te.value++;
+              const i = document.getElementsByClassName("dgComponentFocused");
+              Array.from(i).forEach((l) => l.classList.remove("dgComponentFocused")), te.value++;
               break;
             }
           }
@@ -530,10 +558,25 @@ class Oe extends de {
       title: "扩展",
       description: "",
       properties: {
+        extendedAreaHtml: {
+          title: "扩展区域模版",
+          type: "string",
+          description: "为设置标题栏下方的扩展区域设置HTML模板",
+          refreshPanelAfterChanged: !0,
+          editor: {
+            type: "code-editor",
+            language: "html"
+          }
+        },
+        extendAreaClass: {
+          title: "扩展区域class",
+          type: "string",
+          description: "指定扩展区域class样式"
+        },
         contentClass: {
-          title: "内容区域class",
+          title: "主内容区域class",
           type: "string",
-          description: "指定内容区域class样式"
+          description: "指定主要内容区域class样式"
         }
       }
     };
@@ -554,6 +597,11 @@ class Oe extends de {
             language: "html"
           }
         },
+        headerClass: {
+          title: "标题栏class",
+          type: "string",
+          description: "指定标题栏整体区域class样式"
+        },
         headerTitleHtml: {
           title: "标题模板",
           type: "string",
@@ -574,6 +622,11 @@ class Oe extends de {
             language: "html"
           }
         },
+        headerContentClass: {
+          title: "内容区域class",
+          type: "string",
+          description: "指定标题栏内容区域class样式"
+        },
         toolbarHtml: {
           title: "工具栏模板",
           type: "string",
@@ -583,132 +636,138 @@ class Oe extends de {
             type: "code-editor",
             language: "html"
           }
+        },
+        buttonsClass: {
+          title: "工具栏class",
+          type: "string",
+          description: "指定工具栏区域class样式",
+          visible: e.toolbarHtml
         }
       }
     };
   }
 }
 function _e(t, e) {
-  const n = new ne(), a = t.schema;
-  function r(o) {
-    return new Oe(o, e).getPropertyConfig(a);
+  const n = new ne(), r = t.schema;
+  function i(o) {
+    return new Oe(o, e).getPropertyConfig(r);
   }
   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")));
+    const { componentType: s, sourceType: a, sourceElement: c } = o;
+    return !!(a === "control" && s === P["filter-bar"].type || a === "move" && s === P["content-container"].type && ((d = c == null ? void 0 : c.className) != null && d.includes("f-filter-container")));
   }
-  function u(o, i) {
+  function u(o, s) {
     var d, m;
     const c = (e == null ? void 0 : e.schemaService).getTreeGridUdtFields(o);
     if (c) {
-      const C = c.find((H) => H.key === i), T = C && C.field;
+      const v = c.find(($) => $.key === s), 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 S(o) {
-    var H;
+  function x(o) {
+    var $;
     if (!e)
       return !1;
-    const i = (H = a.appearance) == null ? void 0 : H.class, { sourceType: s } = o, { formSchemaUtils: c } = e;
-    if (!(i && i.includes("f-section-grid")))
+    const s = ($ = r.appearance) == null ? void 0 : $.class, { sourceType: a } = o, { formSchemaUtils: c } = e;
+    if (!(s && s.includes("f-section-grid")))
       return !1;
-    const m = c.getViewModelIdByComponentId(t.componentInstance.value.belongedComponentId), C = c.getViewModelById(m);
-    if (C && C.bindTo !== "/")
+    const m = c.getViewModelIdByComponentId(t.componentInstance.value.belongedComponentId), v = c.getViewModelById(m);
+    if (v && v.bindTo !== "/")
       return !1;
-    const T = c.selectNode(a, (B) => B.type === "tree-grid");
+    const T = c.selectNode(r, (B) => B.type === "tree-grid");
     if (T && !u(m, T.udtField))
       return !1;
-    if (s === "move")
+    if (a === "move")
       return !0;
-    if (s === "control") {
-      if (a.contents && a.contents.find((D) => {
+    if (a === "control") {
+      if (r.contents && r.contents.find((D) => {
         var R, L;
-        return D.type === A["content-container"].type && ((L = (R = D.appearance) == null ? void 0 : R.class) == null ? void 0 : L.includes("f-filter-container"));
+        return D.type === P["content-container"].type && ((L = (R = D.appearance) == null ? void 0 : R.class) == null ? void 0 : L.includes("f-filter-container"));
       }))
         return !1;
       const E = c.getComponentById("root-component");
-      if (E && c.selectNode(E, (R) => R.type === A["query-solution"].type))
+      if (E && c.selectNode(E, (R) => R.type === P["query-solution"].type))
         return !1;
     }
     return !0;
   }
   function f(o) {
     if (l(o))
-      return S(o);
+      return x(o);
     if (!oe().basalDragulaRuleForContainer(o, e))
       return !1;
-    const { canAccept: s } = n.getTemplateRule(t, e);
-    return s;
+    const { canAccept: a } = n.getTemplateRule(t, e);
+    return a;
   }
-  function w() {
+  function S() {
     const { canDelete: o } = n.getTemplateRule(t, e);
     return o;
   }
-  function y() {
+  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;
+    const { canMove: o, canDelete: s } = n.getTemplateRule(t, e);
+    return !o && !s;
   }
-  function b(o) {
+  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);
+    const { schema: s } = t;
+    (!s.toolbar || !s.toolbar.buttons) && (s.toolbar = { id: `${s.id}_toolbar`, type: "section-toolbar", buttons: [] });
+    const a = Y("section-toolbar-item");
+    a.id = `section_toolbar_item_${Math.random().toString().slice(2, 6)}`, s.toolbar.buttons.push(a);
   }
-  function v() {
+  function C() {
     var d;
-    const { schema: o } = t, i = e == null ? void 0 : e.formSchemaUtils;
-    if (o.showHeader === !1 || !i)
+    const { schema: o } = t, s = e == null ? void 0 : e.formSchemaUtils;
+    if (o.showHeader === !1 || !s)
       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)
+    const a = s.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) => b(m)
+        onClick: (m) => y(m)
       }];
   }
-  function x() {
+  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))
+    const { schema: s } = t;
+    if (!((d = (c = s.toolbar) == null ? void 0 : c.buttons) != null && d.length))
       return;
-    const s = (m) => {
-      m.forEach((C) => {
-        const T = o.findIndex((H) => H.target === C.id);
-        T > -1 && o.splice(T, 1), C.children && C.children.length && s(C.children);
+    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);
       });
     };
-    s(i.toolbar.buttons);
+    a(s.toolbar.buttons);
   }
-  function $() {
-    x();
+  function H() {
+    A();
   }
-  function M() {
-    var o, i;
+  function w() {
+    var o, s;
     if (t && e) {
-      const { formSchemaUtils: s } = e, c = s.getControlBasicInfoMap(), { schema: d } = t;
+      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 C;
+      }), (s = (o = d.toolbar) == null ? void 0 : o.buttons) != null && s.length && d.toolbar.buttons.map((m) => {
+        var v;
         c.set(m.id, {
           componentTitle: m.text,
           parentPathName: `${d.mainTitle} > ${m.text}`
-        }), (C = m.children) != null && C.length && m.children.map((T) => {
+        }), (v = m.children) != null && v.length && m.children.map((T) => {
           c.set(T.id, {
             componentTitle: T.text,
             parentPathName: `${d.mainTitle} > ${T.text}`
@@ -719,19 +778,19 @@ function _e(t, e) {
   }
   return {
     canAccepts: f,
-    checkCanDeleteComponent: w,
-    checkCanMoveComponent: y,
+    checkCanDeleteComponent: S,
+    checkCanMoveComponent: g,
     hideNestedPaddingInDesginerView: h,
-    getPropsConfig: r,
-    getCustomButtons: v,
-    onRemoveComponent: $,
-    setComponentBasicInfoMap: M
+    getPropsConfig: i,
+    getCustomButtons: C,
+    onRemoveComponent: H,
+    setComponentBasicInfoMap: w
   };
 }
 function Ke(t, e, n) {
-  let a;
-  function r(f = 1) {
-    const w = [
+  let r;
+  function i(f = 1) {
+    const S = [
       "body>.f-datagrid-settings-simple-host",
       "body>div",
       "body>farris-dialog>.farris-modal.show",
@@ -741,48 +800,48 @@ function Ke(t, e, n) {
       "body>.popover.show",
       "body>filter-row-panel>.f-datagrid-filter-panel",
       "body>.f-section-maximize"
-    ], y = Array.from(document.body.querySelectorAll(w.join(","))).filter((b) => b).map((b) => {
-      const { display: v, zIndex: x } = window.getComputedStyle(b);
-      return v === "none" ? 0 : parseInt(x, 10);
-    }).filter((b) => b);
-    let h = Math.max(...y);
+    ], 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() {
-    a = t.value.nextElementSibling;
+    r = t.value.nextElementSibling;
     const f = document && document.querySelector("body");
-    f && (f.appendChild(t.value), t.value.style.zIndex = r());
+    f && (f.appendChild(t.value), t.value.style.zIndex = i());
   }
   function u() {
-    a ? e.value.insertBefore(
+    r ? e.value.insertBefore(
       t.value,
-      a
+      r
     ) : e.value.appendChild(t.value), t.value.style.zIndex = null;
   }
-  function S() {
+  function x() {
     !t || !e.value || (n.value = !n.value, n.value ? l() : u());
   }
-  return { onClickMaxMinIcon: S };
+  return { onClickMaxMinIcon: x };
 }
 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(b, v, x, $) {
-    var M;
-    (M = e.setupContext) == null || M.emit("selectionChange", b, v, x, $);
+  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 = M(t.buttons), i = M(e.schema.toolbar);
+  i.value && !i.value.type && (i.value.type = "section-toolbar");
+  const l = t.componentId, u = `${l}-toolbar`, x = b(() => t.buttonPosition === "inHead" ? "right" : "left");
+  function f(y, C, A, H) {
+    var w;
+    (w = e.setupContext) == null || w.emit("selectionChange", y, C, A, H);
   }
-  function w() {
-    var b, v;
-    return (v = (b = r.value) == null ? void 0 : b.buttons) != null && v.length ? p("div", {
+  function S() {
+    var y, C;
+    return (C = (y = i.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: r.value,
-      "onUpdate:modelValue": (x) => r.value = x,
+      modelValue: i.value,
+      "onUpdate:modelValue": (A) => i.value = A,
       class: "w-100 position-relative",
       canAdd: !1,
       childType: "section-toolbar-item",
@@ -794,13 +853,13 @@ function V(t, e) {
     }, {
       default: () => [p(Z, {
         customClass: "d-block text-right",
-        items: a.value,
-        alignment: S.value,
+        items: r.value,
+        alignment: x.value,
         componentId: l
       }, null)]
     })])]) : null;
   }
-  function y() {
+  function g() {
     return p("div", {
       class: n.value
     }, [p("div", {
@@ -809,72 +868,69 @@ function V(t, e) {
       innerHTML: t.toolbarHtml.trim()
     }, null)]);
   }
-  return (h = t.toolbarHtml) != null && h.trim() ? y() : w();
+  return (h = t.toolbarHtml) != null && h.trim() ? g() : S();
 }
-function Ze(t, e, n, a, r, l, u) {
-  const S = g(() => t.buttonPosition), {
+function Ze(t, e, n, r, i, l, u) {
+  const x = b(() => t.buttonPosition), {
     onClickMaxMinIcon: f
-  } = Ke(a, r, l), w = g(() => t.enableMaximize), y = g(() => t.enableAccordion !== ""), h = g(() => {
-    let s = {
-      "f-section-header": !0
-    };
-    return e.slots.header && (s = I(s, t.headerClass)), s;
-  });
-  function b(s) {
-    s.stopPropagation(), t.enableAccordion !== "" && (n.value = !n.value, ae(() => {
+  } = Ke(r, i, l), S = b(() => t.enableMaximize), g = b(() => t.enableAccordion !== ""), h = b(() => I({
+    "f-section-header": !0
+  }, t.headerClass));
+  function y(a) {
+    a.stopPropagation(), t.enableAccordion !== "" && (n.value = !n.value, ae(() => {
       se();
     }));
   }
-  function v() {
-    const s = g(() => ({
+  function C() {
+    const a = b(() => ({
       btn: !0,
       "f-btn-collapse-expand": !0,
       "f-btn-mx": !0,
       "f-state-expand": n.value
-    })), c = g(() => ({
+    })), c = b(() => ({
       "f-icon": !0,
       "f-icon-maximize": !l.value,
       "f-icon-minimize": l.value
     }));
     return p("div", {
       class: "f-max-accordion"
-    }, [w.value ? p("span", {
+    }, [S.value ? p("span", {
       class: c.value,
       onClick: f
-    }, null) : "", y.value ? p("button", {
-      class: s.value,
-      onClick: b
+    }, null) : "", g.value ? p("button", {
+      class: a.value,
+      onClick: y
     }, [p("span", null, [n.value ? t.collapseLabel : t.expandLabel])]) : ""]);
   }
-  function x() {
+  function A() {
     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(() => I({
+  function H() {
+    const a = b(() => I({
       "f-content": !0
     }, t.headerContentClass));
     return e.slots.headerContent ? p("div", {
-      class: s.value
+      class: a.value
     }, [e.slots.headerContent()]) : t.headerContentHtml ? p("div", {
-      class: s.value,
+      class: a.value,
       innerHTML: t.headerContentHtml
     }, null) : null;
   }
-  function M() {
+  function w() {
     return e.slots.headerTitle ? e.slots.headerTitle() : t.headerTitleHtml ? p("div", {
       innerHTML: t.headerTitleHtml
-    }, null) : x();
+    }, null) : A();
   }
   function o() {
     return p("div", {
       class: h.value
-    }, [M(), $(), S.value === "inHead" && V(t, u), (w.value || y.value) && v()]);
+    }, [w(), H(), x.value === "inHead" && V(t, u), (S.value || g.value) && C()]);
   }
-  function i() {
+  function s() {
     return e.slots.header ? p("div", {
       class: h.value
     }, [e.slots.header()]) : t.headerHtml ? p("div", {
@@ -882,62 +938,68 @@ function Ze(t, e, n, a, r, l, u) {
       innerHTML: t.headerHtml
     }, null) : o();
   }
-  return () => t.showHeader && i();
+  return () => t.showHeader && s();
 }
 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);
+    const n = M(), r = M(), i = M(), 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 w = P(t.customClass), y = g(() => t.enableAccordion), h = P(!0), b = g(() => t.buttonPosition), v = P(!1), x = Ze(t, e, h, a, r, v, u), $ = g(() => {
+    const S = M(t.customClass), g = b(() => t.enableAccordion), h = M(!0), y = b(() => t.buttonPosition), C = M(!1), A = Ze(t, e, h, r, i, C, u), H = b(() => {
       const d = {
         "f-section": !0,
-        "f-section-accordion": y.value === "default",
-        "f-state-collapse": (y.value === "default" || y.value === "custom") && !h.value,
-        "f-section-custom-accordion": y.value === "custom",
+        "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": v.value,
+        "f-section-maximize": C.value,
         "f-utils-fill": !0,
         "p-0": !0
       };
-      return I(d, w.value);
-    }), M = g(() => I({
+      return I(d, S.value);
+    }), w = b(() => I({
       "f-section-content": !0,
       "drag-container": !0
-    }, t.contentClass)), o = g(() => ({
-      visibility: (y.value === "default" || y.value === "custom") && !h.value ? "hidden" : "visible"
-    })), i = g(() => I({
+    }, t.contentClass)), o = b(() => ({
+      visibility: g.value && !h.value ? "hidden" : "visible"
+    })), s = b(() => I({
       "f-section-extend": !0
-    }, i.value));
-    function s() {
-      return e.slots.extend && p("div", {
-        class: i.value
-      }, [e.slots.extend()]);
+    }, t.extendAreaClass));
+    function a() {
+      if (e.slots.extend)
+        return p("div", {
+          class: s.value
+        }, [e.slots.extend()]);
+      if (t.extendedAreaHtml)
+        return p("div", {
+          class: s.value,
+          innerHTML: t.extendedAreaHtml
+        }, null);
     }
     function c() {
       return p("div", {
-        class: M.value,
+        class: w.value,
         ref: n,
         "data-dragref": `${u.schema.id}-container`,
         style: o.value
-      }, [b.value === "inContent" && V(t, u), e.slots.default && e.slots.default()]);
+      }, [y.value === "inContent" && V(t, u), e.slots.default && e.slots.default()]);
     }
     return () => p("div", {
-      class: $.value,
-      ref: a,
+      class: H.value,
+      ref: r,
       style: t.customStyle
-    }, [x(), s(), c()]);
+    }, [A(), a(), c()]);
   }
 });
-F.register = (t, e, n, a) => {
-  t.section = O, e.section = qe, a.section = { eventHandlerResolver: Ge };
+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"] = Ce, t["section-toolbar"] = Q, e["section-toolbar"] = Ue;
+  t.section = F, e.section = Ve, e["section-toolbar-item"] = ve, t["section-toolbar"] = Q, e["section-toolbar"] = Ue;
 };
 const ot = K(F);
 export {