@farris/ui-vue 1.3.1 → 1.3.3

package/components/section/index.esm.js

@@ -1,56 +1,60 @@
-import { ref as v, computed as h, createVNode as b, defineComponent as z, watch as U, onMounted as H, inject as N } from "vue";
-import { isPlainObject as O, cloneDeep as x } from "lodash-es";
-import _ from "../response-toolbar/index.esm.js";
+import { ref as C, computed as b, createVNode as v, defineComponent as z, watch as _, onMounted as V, inject as O } from "vue";
+import { isPlainObject as N, cloneDeep as U } from "lodash-es";
+import Q from "../response-toolbar/index.esm.js";
 import "bignumber.js";
 import { withInstall as Z } from "../common/index.esm.js";
-const V = {}, $ = {};
-function B(n) {
-  const { properties: e, title: t, ignore: a } = n, r = a && Array.isArray(a), i = Object.keys(e).reduce((o, p) => ((!r || !a.find((f) => f == p)) && (o[p] = e[p].type === "object" && e[p].properties ? B(e[p]) : x(e[p].default)), o), {});
-  return t && (!r || !a.find((o) => o == "id")) && (i.id = `${t}-${Date.now()}`), i;
+const q = {}, R = {};
+function j(n) {
+  const { properties: e, title: t, ignore: a } = n, i = a && Array.isArray(a), r = Object.keys(e).reduce((o, f) => ((!i || !a.find((p) => p === f)) && (o[f] = e[f].type === "object" && e[f].properties ? j(e[f]) : U(e[f].default)), o), {});
+  if (t && (!i || !a.find((o) => o === "id"))) {
+    const o = t.toLowerCase().replace(/-/g, "_");
+    r.id = `${o}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return r;
 }
-function q(n, e = {}, t) {
-  const a = V[n];
+function $(n, e = {}, t) {
+  const a = q[n];
   if (a) {
-    let r = B(a);
-    const i = $[n];
-    return r = i ? i({ getSchemaByType: q }, r, e, t) : r, r;
+    let i = j(a);
+    const r = R[n];
+    return i = r ? r({ getSchemaByType: $ }, i, e, t) : i, i;
   }
   return null;
 }
 function J(n, e) {
-  const t = B(e);
-  return Object.keys(n).reduce((a, r) => (a[r] && O(a[r]) && O(n[r]) ? Object.assign(a[r], n[r]) : a[r] = n[r], a), t), t;
+  const t = j(e);
+  return Object.keys(t).reduce((a, i) => (a[i] && N(a[i]) && N(n[i] || !n[i]) ? Object.assign(a[i], n[i] || {}) : a[i] = n[i], a), t), t;
 }
-function Q(n, e) {
-  return Object.keys(n).filter((a) => n[a] != null).reduce((a, r) => {
-    if (e.has(r)) {
-      const i = e.get(r);
-      if (typeof i == "string")
-        a[i] = n[r];
+function X(n, e) {
+  return Object.keys(n).filter((a) => n[a] != null).reduce((a, i) => {
+    if (e.has(i)) {
+      const r = e.get(i);
+      if (typeof r == "string")
+        a[r] = n[i];
       else {
-        const o = i(r, n[r], n);
+        const o = r(i, n[i], n);
         Object.assign(a, o);
       }
     } else
-      a[r] = n[r];
+      a[i] = n[i];
     return a;
   }, {});
 }
-function X(n, e, t = /* @__PURE__ */ new Map()) {
+function Y(n, e, t = /* @__PURE__ */ new Map()) {
   const a = J(n, e);
-  return Q(a, t);
+  return X(a, t);
 }
-function Y(n = {}) {
+function x(n = {}) {
   function e(s, c, l, u) {
     if (typeof l == "number")
       return u[s].length === l;
     if (typeof l == "object") {
-      const d = Object.keys(l)[0], y = l[d];
-      if (d === "not")
+      const m = Object.keys(l)[0], y = l[m];
+      if (m === "not")
         return Number(u[s].length) !== Number(y);
-      if (d === "moreThan")
+      if (m === "moreThan")
         return Number(u[s].length) >= Number(y);
-      if (d === "lessThan")
+      if (m === "lessThan")
         return Number(u[s].length) <= Number(y);
     }
     return !1;
@@ -63,19 +67,19 @@ function Y(n = {}) {
     ["getProperty", t]
   ]);
   Object.keys(n).reduce((s, c) => (s.set(c, n[c]), s), a);
-  function r(s, c) {
+  function i(s, c) {
     const l = s;
     return typeof c == "number" ? [{ target: l, operator: "length", param: null, value: Number(c) }] : typeof c == "boolean" ? [{ target: l, operator: "getProperty", param: s, value: !!c }] : typeof c == "object" ? Object.keys(c).map((u) => {
       if (u === "length")
         return { target: l, operator: "length", param: null, value: c[u] };
-      const d = u, y = c[u];
-      return { target: l, operator: "getProperty", param: d, value: y };
+      const m = u, y = c[u];
+      return { target: l, operator: "getProperty", param: m, value: y };
     }) : [];
   }
-  function i(s) {
+  function r(s) {
     return Object.keys(s).reduce((l, u) => {
-      const d = r(u, s[u]);
-      return l.push(...d), l;
+      const m = i(u, s[u]);
+      return l.push(...m), l;
     }, []);
   }
   function o(s, c) {
@@ -85,16 +89,16 @@ function Y(n = {}) {
     }
     return !1;
   }
-  function p(s, c) {
-    return i(s).reduce((d, y) => d && o(y, c), !0);
-  }
   function f(s, c) {
-    const l = Object.keys(s), u = l.includes("allOf"), d = l.includes("anyOf"), y = u || d, S = (y ? s[y ? u ? "allOf" : "anyOf" : "allOf"] : [s]).map((T) => p(T, c));
-    return u ? !S.includes(!1) : S.includes(!0);
+    return r(s).reduce((m, y) => m && o(y, c), !0);
+  }
+  function p(s, c) {
+    const l = Object.keys(s), u = l.includes("allOf"), m = l.includes("anyOf"), y = u || m, M = (y ? s[y ? u ? "allOf" : "anyOf" : "allOf"] : [s]).map((S) => f(S, c));
+    return u ? !M.includes(!1) : M.includes(!0);
   }
-  return { parseValueSchema: f };
+  return { parseValueSchema: p };
 }
-const k = {
+const P = {
   button: { type: "button", name: "按钮", icon: "Button" },
   "response-toolbar": { type: "response-toolbar", name: "工具栏", icon: "ButtonGroup" },
   "response-toolbar-item": { type: "response-toolbar-item", name: "按钮", icon: "Button" },
@@ -132,13 +136,14 @@ const k = {
   "page-header": { type: "page-header", name: "页头", icon: "Header" },
   "page-footer": { type: "page-footer", name: "页脚", icon: "ModalFooter" },
   "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏", icon: "TabToolbar" },
-  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" }
+  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" },
+  "query-solution": { type: "query-solution", name: "筛选方案", icon: "QueryScheme" }
 }, K = {}, I = {};
-Y();
-function ee(n, e, t = /* @__PURE__ */ new Map(), a = (o, p, f) => p, r = {}, i = (o) => o) {
-  return V[e.title] = e, $[e.title] = a, K[e.title] = r, I[e.title] = i, (o = {}) => {
-    const p = X(o, e, t), f = Object.keys(n).reduce((s, c) => (s[c] = n[c].default, s), {});
-    return Object.assign(f, p);
+x();
+function ee(n, e, t = /* @__PURE__ */ new Map(), a = (o, f, p, s) => f, i = {}, r = (o) => o) {
+  return q[e.title] = e, R[e.title] = a, K[e.title] = i, I[e.title] = r, (o = {}) => {
+    const f = Y(o, e, t), p = Object.keys(n).reduce((s, c) => (s[c] = n[c].default, s), {});
+    return Object.assign(p, f);
   };
 }
 function te(n, e) {
@@ -148,10 +153,8 @@ function ne(n, e, t) {
   return e ? { enableAccordion: t.accordionMode } : { enableAccordion: "" };
 }
 function oe(n, e) {
-  return e && e.contents && e.contents.length && e.contents.forEach((t) => {
-    t.title && (t.text = t.title);
-  }), {
-    buttons: e.contents,
+  return {
+    buttons: e.buttons,
     buttonPosition: e.position
   };
 }
@@ -161,34 +164,34 @@ const ae = /* @__PURE__ */ new Map([
   ["enableAccordion", ne],
   ["toolbar", oe]
 ]);
-function re(n, e, t, a) {
-  const r = Math.random().toString().slice(2, 6), i = t.parentComponentInstance;
+function re(n, e, t) {
+  const a = Math.random().toString().slice(2, 6), i = t.parentComponentInstance;
   Object.assign(e, {
-    id: `section-${r}`,
+    id: `section-${a}`,
     appearance: {
       class: "f-section-in-mainsubcard"
     },
     enableAccordion: !1,
-    mainTitle: e.mainTitle || "标题"
+    mainTitle: t.mainTitle || e.mainTitle || "标题"
   });
-  const o = n.getSchemaByType("content-container");
-  Object.assign(o, {
-    id: `container-${r}`,
+  const r = n.getSchemaByType("content-container");
+  Object.assign(r, {
+    id: `container-${a}`,
     appearance: {
       class: "f-struct-wrapper"
     },
     contents: [e]
   });
-  const p = i.schema;
-  switch (p && p.type) {
-    case k["splitter-pane"].type: {
+  const o = i.schema;
+  switch (o && o.type) {
+    case P["splitter-pane"].type: {
       e.appearance.class = "f-section-in-main";
       break;
     }
   }
-  return o;
+  return r;
 }
-function ie(n, e, t, a) {
+function ie(n, e, t) {
   return t.parentComponentInstance ? re(n, e, t) : e;
 }
 const se = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-design.gitee.io/section.schema.json", le = "section", ue = "A Farris Container Component", pe = "object", fe = {
@@ -309,7 +312,7 @@ const se = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-
         type: "string",
         default: "inHead"
       },
-      contents: {
+      buttons: {
         type: "array",
         default: []
       }
@@ -328,11 +331,12 @@ const se = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-
   type: pe,
   properties: fe,
   required: de
-}, F = {
+}, B = {
   /** 设置内容区域样式 */
   contentClass: { type: String, default: "" },
   /** 自定义样式 */
   customClass: { type: String, default: "" },
+  customStyle: { type: String, default: "" },
   /** 设置是否启用収折功能。支持：空字符串，不启用収折 | default 默认収折方式 || custom自定义収折方式 */
   enableAccordion: { type: String, default: "" },
   /** 设置初始是否处于展开状态，支持：true 内容区域被展开|false 内容区域被収折 */
@@ -372,24 +376,10 @@ const se = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-
   // toolbarPosition: { type: String, default: '' },
   // toolbarButtons: { type: Array<object>, default: [] },
   // toolbar: { type: Object as PropType<ToolbarConfig>, default: {} }
-}, G = ee(F, me, ae, ie);
+}, H = ee(B, me, ae, ie);
 function ye(n, e, t) {
   let a;
-  function r() {
-    !n || !e.value || (t.value = !t.value, t.value ? i() : o());
-  }
-  function i() {
-    a = n.value.nextElementSibling;
-    const f = document && document.querySelector("body");
-    f && (f.appendChild(n.value), n.value.style.zIndex = p());
-  }
-  function o() {
-    a ? e.value.insertBefore(
-      n.value,
-      a
-    ) : e.value.appendChild(n.value), n.value.style.zIndex = null;
-  }
-  function p(f = 1) {
+  function i(p = 1) {
     const s = [
       "body>.f-datagrid-settings-simple-host",
       "body>div",
@@ -401,101 +391,113 @@ function ye(n, e, t) {
       "body>filter-row-panel>.f-datagrid-filter-panel",
       "body>.f-section-maximize"
     ], c = Array.from(document.body.querySelectorAll(s.join(","))).filter((u) => u).map((u) => {
-      const { display: d, zIndex: y } = window.getComputedStyle(u);
-      return d === "none" ? 0 : parseInt(y, 10);
+      const { display: m, zIndex: y } = window.getComputedStyle(u);
+      return m === "none" ? 0 : parseInt(y, 10);
     }).filter((u) => u);
     let l = Math.max(...c);
-    return l < 1040 && (l = 1040), l + f;
+    return l < 1040 && (l = 1040), l + p;
+  }
+  function r() {
+    a = n.value.nextElementSibling;
+    const p = document && document.querySelector("body");
+    p && (p.appendChild(n.value), n.value.style.zIndex = i());
+  }
+  function o() {
+    a ? e.value.insertBefore(
+      n.value,
+      a
+    ) : e.value.appendChild(n.value), n.value.style.zIndex = null;
+  }
+  function f() {
+    !n || !e.value || (t.value = !t.value, t.value ? r() : o());
   }
-  return { onClickMaxMinIcon: r };
+  return { onClickMaxMinIcon: f };
 }
-function j(n, e) {
-  const t = v(n.buttons), a = h(() => n.buttonPosition === "inHead" ? "right" : "left"), r = h(() => "f-section-toolbar" + (n.buttonPosition === "inHead" ? " f-section-header--toolbar" : " f-section-content--toolbar")), i = h(() => {
-    n.buttons && n.buttons.length > 0 && n.buttonPosition;
-  });
-  function o(p) {
-    e.emit("Click", p);
+function F(n, e) {
+  const t = C(n.buttons), a = b(() => n.buttonPosition === "inHead" ? "right" : "left"), i = b(() => "f-section-toolbar" + (n.buttonPosition === "inHead" ? " f-section-header--toolbar" : " f-section-content--toolbar")), r = b(() => n.buttons && n.buttons.length > 0 && n.buttonPosition === "inHead");
+  function o(f) {
+    e.emit("Click", f);
   }
-  return () => i && b(_, {
-    customClass: r.value,
+  return () => r.value && v(Q, {
+    customClass: i.value,
     items: t.value,
     onClick: o,
     alignment: a.value
   }, null);
 }
-function R(n, e, t, a, r, i) {
-  v(n.subTitle);
-  const o = h(() => n.buttonPosition), p = j(n, e), {
-    onClickMaxMinIcon: f
-  } = ye(a, r, i), s = h(() => !!n.subTitle), c = h(() => n.enableMaximize), l = h(() => n.enableAccordion != ""), u = h(() => {
-    const T = {
+function G(n, e, t, a, i, r) {
+  C(n.subTitle);
+  const o = b(() => n.buttonPosition), f = F(n, e), {
+    onClickMaxMinIcon: p
+  } = ye(a, i, r), s = b(() => !!n.subTitle), c = b(() => n.enableMaximize), l = b(() => n.enableAccordion !== ""), u = b(() => {
+    const S = {
       "f-section-header": !0
     };
-    return e.slots.header && n.headerClass.split(" ").reduce((m, g) => (m[g] = !0, m), T), T;
+    return e.slots.header && n.headerClass.split(" ").reduce((d, h) => (d[h] = !0, d), S), S;
   });
-  function d(T) {
-    T.stopPropagation(), n.enableAccordion !== "" && (t.value = !t.value);
+  function m(S) {
+    S.stopPropagation(), n.enableAccordion !== "" && (t.value = !t.value);
   }
   function y() {
-    const T = h(() => ({
+    const S = b(() => ({
       btn: !0,
       "f-btn-collapse-expand": !0,
       "f-btn-mx": !0,
       "f-state-expand": t.value
-    })), A = h(() => ({
+    })), D = b(() => ({
       "f-icon": !0,
-      "f-icon-maximize": !i.value,
-      "f-icon-minimize": i.value
+      "f-icon-maximize": !r.value,
+      "f-icon-minimize": r.value
     }));
-    return b("div", {
+    return v("div", {
       class: "f-max-accordion"
-    }, [c.value ? b("span", {
-      class: A.value,
-      onClick: f
-    }, null) : "", l.value ? b("button", {
-      class: T.value,
-      onClick: d
-    }, [b("span", null, [t.value ? n.collapseLabel : n.expandLabel])]) : ""]);
+    }, [c.value ? v("span", {
+      class: D.value,
+      onClick: p
+    }, null) : "", l.value ? v("button", {
+      class: S.value,
+      onClick: m
+    }, [v("span", null, [t.value ? n.collapseLabel : n.expandLabel])]) : ""]);
   }
-  function M() {
-    return e.slots.header ? b("div", {
+  function w() {
+    return e.slots.header ? v("div", {
       class: u.value
     }, [e.slots.header()]) : "";
   }
-  function C() {
-    return b("div", {
+  function g() {
+    return v("div", {
       class: "f-title",
-      onClick: d
-    }, [b("h4", {
+      onClick: m
+    }, [v("h4", {
       class: "f-title-text"
-    }, [n.mainTitle]), s.value && b("span", null, [n.subTitle])]);
+    }, [n.mainTitle]), s.value && v("span", null, [n.subTitle])]);
   }
-  function S() {
-    const T = h(() => {
-      const A = {
+  function M() {
+    const S = b(() => {
+      const D = {
         "f-content": !0
       };
-      return n.headerContentClass && n.headerContentClass.split(" ").reduce((g, D) => (g[D] = !0, g), A), A;
+      return n.headerContentClass && n.headerContentClass.split(" ").reduce((h, T) => (h[T] = !0, h), D), D;
     });
-    return e.slots.headerContent ? b("div", {
-      class: T.value
+    return e.slots.headerContent ? v("div", {
+      class: S.value
     }, [e.slots.headerContent()]) : "";
   }
-  function w() {
-    return b("div", {
+  function A() {
+    return v("div", {
       class: u.value
-    }, [e.slots.headerTitle ? e.slots.headerTitle() : C(), S(), o.value === "inHead" && p(), (c.value || l.value) && y()]);
+    }, [e.slots.headerTitle ? e.slots.headerTitle() : g(), M(), o.value === "inHead" && f(), (c.value || l.value) && y()]);
   }
-  return () => n.showHeader && (e.slots.header ? M() : w());
+  return () => n.showHeader && (e.slots.header ? w() : A());
 }
-const he = ["moz", "ms", "webkit"];
-function be() {
+const be = ["moz", "ms", "webkit"];
+function he() {
   let n = 0;
   return (e) => {
-    const t = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (t - n)), r = setTimeout(() => {
+    const t = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (t - n)), i = setTimeout(() => {
       e(t + a);
     }, a);
-    return n = t + a, r;
+    return n = t + a, i;
   };
 }
 function ve() {
@@ -503,53 +505,52 @@ function ve() {
     return () => 0;
   if (window.requestAnimationFrame)
     return window.requestAnimationFrame.bind(window);
-  const n = he.filter((e) => `${e}RequestAnimationFrame` in window)[0];
-  return n ? window[`${n}RequestAnimationFrame`] : be();
+  const n = be.filter((e) => `${e}RequestAnimationFrame` in window)[0];
+  return n ? window[`${n}RequestAnimationFrame`] : he();
 }
 ve();
-function P(n, e) {
-  return ((e == null ? void 0 : e.split(" ")) || []).reduce((a, r) => (r && (a[r] = !0), a), n), n;
+function L(n, e) {
+  return ((e == null ? void 0 : e.split(" ")) || []).reduce((a, i) => (i && (a[i] = !0), a), n), n;
 }
 const E = /* @__PURE__ */ z({
   name: "FSection",
-  props: F,
+  props: B,
   emits: [],
   setup(n, e) {
-    const t = v();
-    let a = v();
-    const r = v(n.customClass), i = h(() => n.enableAccordion), o = v(n.expandStatus), p = h(() => n.buttonPosition), f = v(!1), s = R(n, e, o, t, a, f), c = j(n, e), l = h(() => {
-      const C = {
+    const t = C(), a = C(), i = C(n.customClass), r = b(() => n.enableAccordion), o = C(n.expandStatus), f = b(() => n.buttonPosition), p = C(!1), s = G(n, e, o, t, a, p), c = F(n, e), l = b(() => {
+      const g = {
         "f-section": !0,
-        "f-section-accordion": i.value === "default",
-        "f-state-collapse": (i.value === "default" || i.value === "custom") && !o.value,
-        "f-section-custom-accordion": i.value === "custom",
+        "f-section-accordion": r.value === "default",
+        "f-state-collapse": (r.value === "default" || r.value === "custom") && !o.value,
+        "f-section-custom-accordion": r.value === "custom",
         "f-section-fill": n.fill,
-        "f-section-maximize": f.value
+        "f-section-maximize": p.value
       };
-      return P(C, r.value);
-    }), u = h(() => P({
+      return L(g, i.value);
+    }), u = b(() => L({
       "f-section-content": !0
-    }, n.contentClass)), d = h(() => P({
+    }, n.contentClass)), m = b(() => L({
       "f-section-extend": !0
-    }, d.value));
+    }, m.value));
     function y() {
-      return e.slots.extend && b("div", {
-        class: d.value
+      return e.slots.extend && v("div", {
+        class: m.value
       }, [e.slots.extend()]);
     }
-    function M() {
-      return b("div", {
+    function w() {
+      return v("div", {
         class: u.value
-      }, [p.value === "inContent" && c(), e.slots.default && e.slots.default()]);
+      }, [f.value === "inContent" && c(), e.slots.default && e.slots.default()]);
     }
-    return U(() => n.expandStatus, (C, S) => {
-      C !== S && (o.value = C);
-    }), H(() => {
-      t && t.value && (a.value = t.value.parentElement);
-    }), () => b("div", {
+    return _(() => n.expandStatus, (g, M) => {
+      g !== M && (o.value = g);
+    }), V(() => {
+      t.value && t.value && (a.value = t.value.parentElement);
+    }), () => v("div", {
       class: l.value,
-      ref: t
-    }, [s(), y(), M()]);
+      ref: t,
+      style: n.customStyle
+    }, [s(), y(), w()]);
   }
 });
 function Ce() {
@@ -560,8 +561,8 @@ function Ce() {
     const a = ((o = e.targetContainer) == null ? void 0 : o.componentInstance) && e.targetContainer.componentInstance.value;
     if (!a)
       return !1;
-    const r = a.schema.type, i = t == null ? void 0 : t.formSchemaUtils.getComponentById(a.belongedComponentId);
-    return !((e.controlCategory === "input" || e.controlType === "form-group") && ![k["response-layout-item"].type, k["response-form"].type].includes(r) || (e.controlType === k.tabs.type || e.controlType === k.section.type) && ((i == null ? void 0 : i.componentType) !== "frame" || ![k["content-container"].type, k["splitter-pane"].type, k["response-layout-item"].type].includes(r)));
+    const i = a.schema.type, r = t == null ? void 0 : t.formSchemaUtils.getComponentById(a.belongedComponentId);
+    return !((e.componentCategory === "input" || e.componentType === "form-group") && ![P["response-layout-item"].type, P["response-form"].type].includes(i) || (e.componentType === P.tabs.type || e.componentType === P.section.type) && ((r == null ? void 0 : r.componentType) !== "frame" || ![P["content-container"].type, P["splitter-pane"].type, P["response-layout-item"].type].includes(i)));
   }
   return {
     basalDragulaRuleForContainer: n
@@ -597,36 +598,11 @@ const ge = {
               }
             ]
           }
-        },
-        mainTitle: {
-          title: "主标题",
-          type: "string",
-          description: "",
-          visible: {
-            showHeader: !0
-          }
-        },
-        subTitle: {
-          title: "副标题",
-          type: "string",
-          description: "",
-          visible: {
-            showHeader: !0
-          }
         }
-      },
-      setPropertyRelates(n, e) {
-        if (n)
-          switch (n && n.propertyID) {
-            case "mainTitle": {
-              n.needRefreshControlTree = !0;
-              break;
-            }
-          }
       }
     },
     appearance: {
-      title: "样式",
+      title: "外观",
       description: "Appearance",
       properties: {
         class: {
@@ -642,10 +618,26 @@ const ge = {
           type: "boolean",
           description: ""
         },
+        mainTitle: {
+          title: "主标题",
+          type: "string",
+          description: "",
+          visible: {
+            showHeader: !0
+          }
+        },
+        subTitle: {
+          title: "副标题",
+          type: "string",
+          description: "",
+          visible: {
+            showHeader: !0
+          }
+        },
         fill: {
           title: "填充内容区域",
           type: "boolean",
-          description: "To fill the space of parent container in flex layout."
+          description: ""
         },
         enableAccordion: {
           title: "允许收折",
@@ -655,6 +647,15 @@ const ge = {
             showHeader: !0
           }
         }
+      },
+      setPropertyRelates(n, e) {
+        if (n)
+          switch (n && n.propertyID) {
+            case "mainTitle": {
+              n.needRefreshControlTree = !0;
+              break;
+            }
+          }
       }
     },
     extends: {
@@ -672,258 +673,268 @@ const ge = {
 };
 class Te {
   getTemplateRule(e, t) {
-    const a = t == null ? void 0 : t.formSchemaUtils, r = a == null ? void 0 : a.getFormTemplateRule(), i = { canAccept: !0, canDelete: !0, canMove: !0 };
-    if (!r)
-      return i;
-    const o = this.getComponentContext(e);
-    return o.componentClassList.forEach((f) => {
-      if (!f || !r[f])
+    const a = t == null ? void 0 : t.formSchemaUtils, i = a == null ? void 0 : a.getFormTemplateRule(), r = { canAccept: !0, canDelete: !0, canMove: !0 };
+    if (!i)
+      return r;
+    const o = this.getComponentContext(e), { componentClassList: f } = o;
+    return f.forEach((p) => {
+      if (!p || !i[p])
         return;
-      const { canMove: s, canDelete: c, canAccept: l } = r[f];
-      i.canMove = i.canMove && this.resolveRuleValue(s, o), i.canDelete = i.canDelete && this.resolveRuleValue(c, o), i.canAccept = i.canAccept && this.resolveRuleValue(l, o);
-    }), i;
+      const { canMove: s, canDelete: c, canAccept: l } = i[p];
+      r.canMove = r.canMove && this.resolveRuleValue(s, o), r.canDelete = r.canDelete && this.resolveRuleValue(c, o), r.canAccept = r.canAccept && this.resolveRuleValue(l, o);
+    }), r;
   }
   resolveRuleValue(e, t) {
     return typeof e == "boolean" ? e : this.parseRuleValueSchema(e, t);
   }
   parseRuleValueSchema(e, t) {
     const a = e.invalidContext || [];
-    let r = !0;
-    for (const i of a) {
-      if (i.firstLevelChild) {
-        if (i.firstLevelChild.class) {
-          const o = t.firstLevelChildClassList;
-          if (o && !o.includes(i.firstLevelChild.class)) {
-            r = !1;
+    let i = !0;
+    for (const r of a) {
+      if (r.firstLevelChild) {
+        if (r.firstLevelChild.class) {
+          const { firstLevelChildClassList: o } = t;
+          if (o && !o.includes(r.firstLevelChild.class)) {
+            i = !1;
             continue;
           }
         }
-        if (i.firstLevelChild.type) {
-          const o = t.firstLevelChildSchema;
-          if (o && o.type !== i.firstLevelChild.type) {
-            r = !1;
+        if (r.firstLevelChild.type) {
+          const { firstLevelChildSchema: o } = t;
+          if (!o || o.type !== r.firstLevelChild.type) {
+            i = !1;
             continue;
           }
         }
       }
-      if (i.secondLevelChild) {
-        if (i.secondLevelChild.class) {
-          const o = t.secondLevelChildClassList;
-          if (o && !o.includes(i.secondLevelChild.class)) {
-            r = !1;
+      if (r.secondLevelChild) {
+        if (r.secondLevelChild.class) {
+          const { secondLevelChildClassList: o } = t;
+          if (o && !o.includes(r.secondLevelChild.class)) {
+            i = !1;
             continue;
           }
         }
-        if (i.secondLevelChild.type) {
-          const o = t.secondLevelChildSchema;
-          if (o && o.type !== i.secondLevelChild.type) {
-            r = !1;
+        if (r.secondLevelChild.type) {
+          const { secondLevelChildSchema: o } = t;
+          if (!o || o.type !== r.secondLevelChild.type) {
+            i = !1;
             continue;
           }
         }
       }
-      if (i.parent) {
-        if (i.parent.class) {
-          const o = t.parentClassList;
-          if (o && !o.includes(i.parent.class)) {
-            r = !1;
+      if (r.parent) {
+        if (r.parent.class) {
+          const { parentClassList: o } = t;
+          if (o && !o.includes(r.parent.class)) {
+            i = !1;
             continue;
           }
         }
-        if (i.parent.type) {
-          const o = t.parentSchema;
-          if (o && o.type !== i.parent.type) {
-            r = !1;
+        if (r.parent.type) {
+          const { parentSchema: o } = t;
+          if (o && o.type !== r.parent.type) {
+            i = !1;
             continue;
           }
         }
       }
-      r = !0;
+      i = !0;
       break;
     }
-    return !r;
+    return !i;
   }
   getComponentContext(e) {
-    var M, C, S, w;
-    const t = e.schema, a = t.appearance && t.appearance.class || "", r = a.split(" ") || [], i = t.contents || [], o = i.length ? i[0] : null, p = o && o.appearance ? o.appearance.class : "", f = p ? p.split(" ") : [], s = (M = o == null ? void 0 : o.contents) != null && M.length ? o == null ? void 0 : o.contents[0] : null, c = s && s.appearance ? s.appearance.class : "", l = c ? c.split(" ") : [], u = t.type === "component" ? (S = (C = e.parent) == null ? void 0 : C.parent) == null ? void 0 : S.schema : (w = e.parent) == null ? void 0 : w.schema, d = u && u.appearance && u.appearance.class || "", y = d ? d.split(" ") : [];
+    var w, g, M, A;
+    const t = e.schema, a = t.appearance && t.appearance.class || "", i = a.split(" ") || [], r = t.contents || [], o = r.length ? r[0] : null, f = o && o.appearance ? o.appearance.class : "", p = f ? f.split(" ") : [], s = (w = o == null ? void 0 : o.contents) != null && w.length ? o == null ? void 0 : o.contents[0] : null, c = s && s.appearance ? s.appearance.class : "", l = c ? c.split(" ") : [], u = t.type === "component" ? (M = (g = e.parent) == null ? void 0 : g.parent) == null ? void 0 : M.schema : (A = e.parent) == null ? void 0 : A.schema, m = u && u.appearance && u.appearance.class || "", y = m ? m.split(" ") : [];
     return {
       componentClass: a,
-      componentClassList: r,
-      childContents: i,
+      componentClassList: i,
+      childContents: r,
       firstLevelChildSchema: o,
-      firstLevelChildClass: p,
-      firstLevelChildClassList: f,
+      firstLevelChildClass: f,
+      firstLevelChildClassList: p,
       secondLevelChildSchema: s,
       secondLevelChildClass: c,
       secondLevelChildClassList: l,
       parentSchema: u,
-      parentClass: d,
+      parentClass: m,
       parentClassList: y
     };
   }
 }
 function Se(n, e) {
-  const t = new Te(), { canMove: a, canAccept: r, canDelete: i } = t.getTemplateRule(n, e);
-  function o(l) {
+  const t = new Te();
+  function a(p) {
     return ge;
   }
-  function p(l) {
-    return Ce().basalDragulaRuleForContainer(l, e) ? r : !1;
+  function i(p) {
+    if (!Ce().basalDragulaRuleForContainer(p, e))
+      return !1;
+    const { canAccept: c } = t.getTemplateRule(n, e);
+    return c;
   }
-  function f() {
-    return i;
+  function r() {
+    const { canDelete: p } = t.getTemplateRule(n, e);
+    return p;
   }
-  function s() {
-    return a;
+  function o() {
+    const { canMove: p } = t.getTemplateRule(n, e);
+    return p;
   }
-  function c() {
-    return !a && !i;
+  function f() {
+    const { canMove: p, canDelete: s } = t.getTemplateRule(n, e);
+    return !p && !s;
   }
   return {
-    canAccepts: p,
-    checkCanDeleteComponent: f,
-    checkCanMoveComponent: s,
-    hideNestedPaddingInDesginerView: c,
-    getPropsConfig: o
+    canAccepts: i,
+    checkCanDeleteComponent: r,
+    checkCanMoveComponent: o,
+    hideNestedPaddingInDesginerView: f,
+    getPropsConfig: a
   };
 }
 function Me(n, e, t) {
-  var A;
-  function a() {
-    t != null && t.resolveComponentContext && t.resolveComponentContext();
-  }
-  a();
-  const r = t && t.getStyles && t.getStyles() || "", i = t && t.getDesignerClass && t.getDesignerClass() || "", o = v();
-  function p() {
+  var D;
+  const a = t && t.getStyles && t.getStyles() || "", i = t && t.getDesignerClass && t.getDesignerClass() || "", r = C();
+  function o() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
   }
   function f() {
     return !1;
   }
-  function s() {
+  function p() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
   }
-  function c() {
+  function s() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
   }
-  function l(m) {
-    if (!m || !m.value)
+  function c(d) {
+    if (!d || !d.value)
       return null;
-    if (m.value.schema && m.value.schema.type === "component")
-      return m.value;
-    const g = v(m == null ? void 0 : m.value.parent), D = l(g);
-    return D || null;
+    if (d.value.schema && d.value.schema.type === "component")
+      return d.value;
+    const h = C(d == null ? void 0 : d.value.parent), T = c(h);
+    return T || null;
   }
-  function u(m = e) {
-    const { componentInstance: g, designerItemElementRef: D } = m;
-    return !g || !g.value ? null : g.value.canMove ? D : u(m.parent);
+  function l(d = e) {
+    const { componentInstance: h, designerItemElementRef: T } = d;
+    return !h || !h.value ? null : h.value.canMove ? T : l(d.parent);
   }
-  function d(m) {
-    return !!t && t.canAccepts(m);
+  function u(d) {
+    return !!t && t.canAccepts(d);
   }
-  function y() {
+  function m() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function M() {
+  function y() {
   }
-  function C(m, g) {
-    g && t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(g);
+  function w(d, h) {
+    h && t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(h);
   }
-  function S(m, g) {
-    const { componentType: D } = m;
-    let L = q(D, m, g);
-    t && t.onResolveNewComponentSchema && (L = t.onResolveNewComponentSchema(m, L));
-    const W = D.toLowerCase().replace("-", "_");
-    return L && !L.id && L.type === D && (L.id = `${W}_${Math.random().toString().slice(2, 6)}`), L;
+  function g(d, h) {
+    const { componentType: T } = d;
+    let k = $(T, d, h);
+    t && t.onResolveNewComponentSchema && (k = t.onResolveNewComponentSchema(d, k));
+    const W = T.toLowerCase().replace(/-/g, "_");
+    return k && !k.id && k.type === T && (k.id = `${W}_${Math.random().toString().slice(2, 6)}`), k;
   }
-  function w(m) {
+  function M(d) {
   }
-  function T(...m) {
+  function A(...d) {
     if (t && t.getPropsConfig)
-      return t.getPropsConfig(...m);
+      return t.getPropsConfig(...d);
+  }
+  function S() {
+    t && t.onRemoveComponent && t.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((d) => {
+      var k;
+      let h = d.id;
+      d.type === "component-ref" && (h = d.component);
+      const T = n.value.querySelector(`#${h}-design-item`);
+      (k = T == null ? void 0 : T.componentInstance) != null && k.value.onRemoveComponent && T.componentInstance.value.onRemoveComponent();
+    });
   }
-  return o.value = {
-    canMove: p(),
+  return r.value = {
+    canMove: o(),
     canSelectParent: f(),
-    canDelete: s(),
-    canNested: !c(),
+    canDelete: p(),
+    canNested: !s(),
     contents: e == null ? void 0 : e.schema.contents,
     elementRef: n,
-    parent: (A = e == null ? void 0 : e.parent) == null ? void 0 : A.componentInstance,
+    parent: (D = e == null ? void 0 : e.parent) == null ? void 0 : D.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: r,
+    styles: a,
     designerClass: i,
-    canAccepts: d,
-    getBelongedComponentInstance: l,
-    getDraggableDesignItemElement: u,
-    getDraggingDisplayText: y,
-    getPropConfig: T,
-    getDragScopeElement: M,
-    onAcceptMovedChildElement: C,
-    onChildElementMovedOut: w,
-    addNewChildComponentSchema: S,
-    updateDragAndDropRules: a,
-    triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || v(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || v(!1)
-  }, o;
+    canAccepts: u,
+    getBelongedComponentInstance: c,
+    getDraggableDesignItemElement: l,
+    getDraggingDisplayText: m,
+    getPropConfig: A,
+    getDragScopeElement: y,
+    onAcceptMovedChildElement: w,
+    onChildElementMovedOut: M,
+    addNewChildComponentSchema: g,
+    triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || C(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || C(!1),
+    onRemoveComponent: S
+  }, r;
 }
 const we = /* @__PURE__ */ z({
   name: "FSectionDesign",
-  props: F,
+  props: B,
   emits: [],
   setup(n, e) {
-    const t = v(), a = v();
-    let r = v();
-    const i = N("designer-host-service"), o = N("design-item-context"), p = Se(o, i), f = Me(t, o, p);
-    f.value.styles = "display: inherit;", H(() => {
-      t.value.componentInstance = f;
-    }), e.expose(f.value);
-    const s = v(n.customClass), c = h(() => n.enableAccordion), l = v(n.expandStatus), u = h(() => n.buttonPosition), d = v(!1), y = R(n, e, l, a, r, d), M = j(n, e), C = h(() => {
-      const m = {
+    const t = C(), a = C(), i = C(), r = O("designer-host-service"), o = O("design-item-context"), f = Se(o, r), p = Me(t, o, f);
+    p.value.styles = "display: inherit;", V(() => {
+      t.value.componentInstance = p;
+    }), e.expose(p.value);
+    const s = C(n.customClass), c = b(() => n.enableAccordion), l = C(n.expandStatus), u = b(() => n.buttonPosition), m = C(!1), y = G(n, e, l, a, i, m), w = F(n, e), g = b(() => {
+      const d = {
         "f-section": !0,
         "f-section-accordion": c.value === "default",
         "f-state-collapse": (c.value === "default" || c.value === "custom") && !l.value,
         "f-section-custom-accordion": c.value === "custom",
         "f-section-fill": n.fill,
-        "f-section-maximize": d.value,
+        "f-section-maximize": m.value,
         "f-utils-fill": !0,
         "p-0": !0
       };
-      return P(m, s.value);
-    }), S = h(() => P({
+      return L(d, s.value);
+    }), M = b(() => L({
       "f-section-content": !0,
       "drag-container": !0
-    }, n.contentClass)), w = h(() => P({
+    }, n.contentClass)), A = b(() => L({
       "f-section-extend": !0
-    }, w.value));
-    function T() {
-      return e.slots.extend && b("div", {
-        class: w.value
+    }, A.value));
+    function S() {
+      return e.slots.extend && v("div", {
+        class: A.value
       }, [e.slots.extend()]);
     }
-    function A() {
-      return b("div", {
-        class: S.value,
+    function D() {
+      return v("div", {
+        class: M.value,
         ref: t,
         "data-dragref": `${o.schema.id}-container`
-      }, [u.value === "inContent" && M(), e.slots.default && e.slots.default()]);
+      }, [u.value === "inContent" && w(), e.slots.default && e.slots.default()]);
     }
-    return () => b("div", {
-      class: C.value,
-      ref: a
-    }, [y(), T(), A()]);
+    return () => v("div", {
+      class: g.value,
+      ref: a,
+      style: n.customStyle
+    }, [y(), S(), D()]);
   }
 });
 E.register = (n, e, t, a) => {
-  n.section = E, e.section = G;
+  n.section = E, e.section = H;
 };
 E.registerDesigner = (n, e, t) => {
-  n.section = we, e.section = G;
+  n.section = we, e.section = H;
 };
 const Ee = Z(E);
 export {
   E as Section,
   Ee as default,
-  G as propsResolver,
-  F as sectionProps
+  H as propsResolver,
+  B as sectionProps
 };