@farris/ui-vue 1.3.0 → 1.3.3

package/components/section/index.esm.js

@@ -1,100 +1,104 @@
-import { ref as w, computed as T, createVNode as M, defineComponent as G, watch as R, onMounted as _, inject as I } from "vue";
-import { isPlainObject as W, cloneDeep as K } from "lodash-es";
-import ee 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 te } from "../common/index.esm.js";
-const J = {}, U = {};
-function H(t) {
-  const { properties: e, title: n, ignore: o } = t, s = o && Array.isArray(o), i = Object.keys(e).reduce((y, m) => ((!s || !o.find((C) => C == m)) && (y[m] = e[m].type === "object" && e[m].properties ? H(e[m]) : K(e[m].default)), y), {});
-  return (!s || !o.find((y) => y == "id")) && (i.id = `${n}-${Date.now()}`), i;
+import { withInstall as Z } from "../common/index.esm.js";
+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 $(t, e = {}, n) {
-  const o = J[t];
-  if (o) {
-    let s = H(o);
-    const i = U[t];
-    return s = i ? i({ getSchemaByType: $ }, s, e, n) : s, s;
+function $(n, e = {}, t) {
+  const a = q[n];
+  if (a) {
+    let i = j(a);
+    const r = R[n];
+    return i = r ? r({ getSchemaByType: $ }, i, e, t) : i, i;
   }
   return null;
 }
-function ne(t, e) {
-  const n = H(e);
-  return Object.keys(t).reduce((o, s) => (o[s] && W(o[s]) && W(t[s]) ? Object.assign(o[s], t[s]) : o[s] = t[s], o), n), n;
+function J(n, e) {
+  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 oe(t, e) {
-  return Object.keys(t).filter((o) => t[o] != null).reduce((o, s) => {
-    if (e.has(s)) {
-      const i = e.get(s);
-      if (typeof i == "string")
-        o[i] = t[s];
+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 y = i(s, t[s], t);
-        Object.assign(o, y);
+        const o = r(i, n[i], n);
+        Object.assign(a, o);
       }
     } else
-      o[s] = t[s];
-    return o;
+      a[i] = n[i];
+    return a;
   }, {});
 }
-function re(t, e, n = /* @__PURE__ */ new Map()) {
-  const o = ne(t, e);
-  return oe(o, n);
+function Y(n, e, t = /* @__PURE__ */ new Map()) {
+  const a = J(n, e);
+  return X(a, t);
 }
-function ae(t = {}) {
-  function e(c, b, f, u) {
-    if (typeof f == "number")
-      return u[c].length === f;
-    if (typeof f == "object") {
-      const g = Object.keys(f)[0], r = f[g];
-      if (g === "not")
-        return Number(u[c].length) !== Number(r);
-      if (g === "moreThan")
-        return Number(u[c].length) >= Number(r);
-      if (g === "lessThan")
-        return Number(u[c].length) <= Number(r);
+function x(n = {}) {
+  function e(s, c, l, u) {
+    if (typeof l == "number")
+      return u[s].length === l;
+    if (typeof l == "object") {
+      const m = Object.keys(l)[0], y = l[m];
+      if (m === "not")
+        return Number(u[s].length) !== Number(y);
+      if (m === "moreThan")
+        return Number(u[s].length) >= Number(y);
+      if (m === "lessThan")
+        return Number(u[s].length) <= Number(y);
     }
     return !1;
   }
-  function n(c, b, f, u) {
-    return u[c] && u[c].propertyValue && String(u[c].propertyValue.value) === String(f);
+  function t(s, c, l, u) {
+    return u[s] && u[s].propertyValue && String(u[s].propertyValue.value) === String(l);
   }
-  const o = /* @__PURE__ */ new Map([
+  const a = /* @__PURE__ */ new Map([
     ["length", e],
-    ["getProperty", n]
+    ["getProperty", t]
   ]);
-  Object.keys(t).reduce((c, b) => (c.set(b, t[b]), c), o);
-  function s(c, b) {
-    const f = c;
-    return typeof b == "number" ? [{ target: f, operator: "length", param: null, value: Number(b) }] : typeof b == "boolean" ? [{ target: f, operator: "getProperty", param: c, value: !!b }] : typeof b == "object" ? Object.keys(b).map((u) => {
+  Object.keys(n).reduce((s, c) => (s.set(c, n[c]), s), a);
+  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: f, operator: "length", param: null, value: b[u] };
-      const g = u, r = b[u];
-      return { target: f, operator: "getProperty", param: g, value: r };
+        return { target: l, operator: "length", param: null, value: c[u] };
+      const m = u, y = c[u];
+      return { target: l, operator: "getProperty", param: m, value: y };
     }) : [];
   }
-  function i(c) {
-    return Object.keys(c).reduce((f, u) => {
-      const g = s(u, c[u]);
-      return f.push(...g), f;
+  function r(s) {
+    return Object.keys(s).reduce((l, u) => {
+      const m = i(u, s[u]);
+      return l.push(...m), l;
     }, []);
   }
-  function y(c, b) {
-    if (o.has(c.operator)) {
-      const f = o.get(c.operator);
-      return f && f(c.target, c.param, c.value, b) || !1;
+  function o(s, c) {
+    if (a.has(s.operator)) {
+      const l = a.get(s.operator);
+      return l && l(s.target, s.param, s.value, c) || !1;
     }
     return !1;
   }
-  function m(c, b) {
-    return i(c).reduce((g, r) => g && y(r, b), !0);
+  function f(s, c) {
+    return r(s).reduce((m, y) => m && o(y, c), !0);
   }
-  function C(c, b) {
-    const f = Object.keys(c), u = f.includes("allOf"), g = f.includes("anyOf"), r = u || g, p = (r ? c[r ? u ? "allOf" : "anyOf" : "allOf"] : [c]).map((d) => m(d, b));
-    return u ? !p.includes(!1) : p.includes(!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: C };
+  return { parseValueSchema: p };
 }
-const se = {
+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,66 +136,65 @@ const se = {
   "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" }
-}, ce = {}, ie = {};
-ae();
-function le(t, e, n = /* @__PURE__ */ new Map(), o = (y, m, C) => m, s = {}, i = (y) => y) {
-  return J[e.title] = e, U[e.title] = o, ce[e.title] = s, ie[e.title] = i, (y = {}) => {
-    const m = re(y, e, n), C = Object.keys(t).reduce((c, b) => (c[b] = t[b].default, c), {});
-    return Object.assign(C, m);
+  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" },
+  "query-solution": { type: "query-solution", name: "筛选方案", icon: "QueryScheme" }
+}, K = {}, I = {};
+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 pe(t, e) {
+function te(n, e) {
   return { customClass: e.class, customStyle: e.style };
 }
-function ue(t, e, n) {
-  return e ? { enableAccordion: n.accordionMode } : { enableAccordion: "" };
+function ne(n, e, t) {
+  return e ? { enableAccordion: t.accordionMode } : { enableAccordion: "" };
 }
-function fe(t, e) {
-  return e && e.contents && e.contents.length && e.contents.forEach((n) => {
-    n.title && (n.text = n.title);
-  }), {
-    buttons: e.contents,
+function oe(n, e) {
+  return {
+    buttons: e.buttons,
     buttonPosition: e.position
   };
 }
-const de = /* @__PURE__ */ new Map([
-  ["appearance", pe],
+const ae = /* @__PURE__ */ new Map([
+  ["appearance", te],
   ["expanded", "expandStatus"],
-  ["enableAccordion", ue],
-  ["toolbar", fe]
+  ["enableAccordion", ne],
+  ["toolbar", oe]
 ]);
-function ye(t, e, n, o) {
-  const s = Math.random().toString().slice(2, 6), i = n.parentComponentInstance;
+function re(n, e, t) {
+  const a = Math.random().toString().slice(2, 6), i = t.parentComponentInstance;
   Object.assign(e, {
-    id: `section-${s}`,
+    id: `section-${a}`,
     appearance: {
       class: "f-section-in-mainsubcard"
     },
     enableAccordion: !1,
-    mainTitle: e.mainTitle || "标题"
+    mainTitle: t.mainTitle || e.mainTitle || "标题"
   });
-  const y = t.getSchemaByType("content-container");
-  Object.assign(y, {
-    id: `container-${s}`,
+  const r = n.getSchemaByType("content-container");
+  Object.assign(r, {
+    id: `container-${a}`,
     appearance: {
       class: "f-struct-wrapper"
     },
     contents: [e]
   });
-  const m = i.schema;
-  switch (m && m.type) {
-    case se.splitter.type: {
+  const o = i.schema;
+  switch (o && o.type) {
+    case P["splitter-pane"].type: {
       e.appearance.class = "f-section-in-main";
       break;
     }
   }
-  return y;
+  return r;
 }
-function be(t, e, n, o) {
-  return n.parentComponentInstance ? ye(t, e, n) : e;
+function ie(n, e, t) {
+  return t.parentComponentInstance ? re(n, e, t) : e;
 }
-const me = "https://json-schema.org/draft/2020-12/schema", he = "https://farris-design.gitee.io/section.schema.json", ge = "section", Ce = "A Farris Container Component", ve = "object", je = {
+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 = {
   id: {
     description: "The unique identifier for a Section",
     type: "string"
@@ -309,30 +312,31 @@ const me = "https://json-schema.org/draft/2020-12/schema", he = "https://farris-
         type: "string",
         default: "inHead"
       },
-      contents: {
+      buttons: {
         type: "array",
         default: []
       }
     },
     default: null
   }
-}, Te = [
+}, de = [
   "id",
   "type",
   "contents"
-], Ae = {
-  $schema: me,
-  $id: he,
-  title: ge,
-  description: Ce,
-  type: ve,
-  properties: je,
-  required: Te
-}, L = {
+], me = {
+  $schema: se,
+  $id: ce,
+  title: le,
+  description: ue,
+  type: pe,
+  properties: fe,
+  required: de
+}, B = {
   /** 设置内容区域样式 */
   contentClass: { type: String, default: "" },
   /** 自定义样式 */
   customClass: { type: String, default: "" },
+  customStyle: { type: String, default: "" },
   /** 设置是否启用収折功能。支持：空字符串，不启用収折 | default 默认収折方式 || custom自定义収折方式 */
   enableAccordion: { type: String, default: "" },
   /** 设置初始是否处于展开状态，支持：true 内容区域被展开|false 内容区域被収折 */
@@ -372,25 +376,11 @@ const me = "https://json-schema.org/draft/2020-12/schema", he = "https://farris-
   // toolbarPosition: { type: String, default: '' },
   // toolbarButtons: { type: Array<object>, default: [] },
   // toolbar: { type: Object as PropType<ToolbarConfig>, default: {} }
-}, Z = le(L, Ae, de, be);
-function we(t, e, n) {
-  let o;
-  function s() {
-    !t || !e.value || (n.value = !n.value, n.value ? i() : y());
-  }
-  function i() {
-    o = t.value.nextElementSibling;
-    const C = document && document.querySelector("body");
-    C && (C.appendChild(t.value), t.value.style.zIndex = m());
-  }
-  function y() {
-    o ? e.value.insertBefore(
-      t.value,
-      o
-    ) : e.value.appendChild(t.value), t.value.style.zIndex = null;
-  }
-  function m(C = 1) {
-    const c = [
+}, H = ee(B, me, ae, ie);
+function ye(n, e, t) {
+  let a;
+  function i(p = 1) {
+    const s = [
       "body>.f-datagrid-settings-simple-host",
       "body>div",
       "body>farris-dialog>.farris-modal.show",
@@ -400,915 +390,185 @@ function we(t, e, n) {
       "body>.popover.show",
       "body>filter-row-panel>.f-datagrid-filter-panel",
       "body>.f-section-maximize"
-    ], b = Array.from(document.body.querySelectorAll(c.join(","))).filter((u) => u).map((u) => {
-      const { display: g, zIndex: r } = window.getComputedStyle(u);
-      return g === "none" ? 0 : parseInt(r, 10);
+    ], c = Array.from(document.body.querySelectorAll(s.join(","))).filter((u) => u).map((u) => {
+      const { display: m, zIndex: y } = window.getComputedStyle(u);
+      return m === "none" ? 0 : parseInt(y, 10);
     }).filter((u) => u);
-    let f = Math.max(...b);
-    return f < 1040 && (f = 1040), f + C;
+    let l = Math.max(...c);
+    return l < 1040 && (l = 1040), l + p;
   }
-  return { onClickMaxMinIcon: s };
-}
-function z(t, e) {
-  const n = w(t.buttons), o = T(() => t.buttonPosition === "inHead" ? "right" : "left"), s = T(() => "f-section-toolbar" + (t.buttonPosition === "inHead" ? " f-section-header--toolbar" : " f-section-content--toolbar")), i = T(() => {
-    t.buttons && t.buttons.length > 0 && t.buttonPosition;
-  });
-  function y(m) {
-    e.emit("Click", m);
+  function r() {
+    a = n.value.nextElementSibling;
+    const p = document && document.querySelector("body");
+    p && (p.appendChild(n.value), n.value.style.zIndex = i());
   }
-  return () => i && M(ee, {
-    customClass: s.value,
-    items: n.value,
-    onClick: y,
-    alignment: o.value
+  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: f };
+}
+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 () => r.value && v(Q, {
+    customClass: i.value,
+    items: t.value,
+    onClick: o,
+    alignment: a.value
   }, null);
 }
-function Q(t, e, n, o, s, i) {
-  w(t.subTitle);
-  const y = T(() => t.buttonPosition), m = z(t, e), {
-    onClickMaxMinIcon: C
-  } = we(o, s, i), c = T(() => !!t.subTitle), b = T(() => t.enableMaximize), f = T(() => t.enableAccordion != ""), u = T(() => {
-    const d = {
+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 && t.headerClass.split(" ").reduce((S, h) => (S[h] = !0, S), d), d;
+    return e.slots.header && n.headerClass.split(" ").reduce((d, h) => (d[h] = !0, d), S), S;
   });
-  function g(d) {
-    d.stopPropagation(), t.enableAccordion !== "" && (n.value = !n.value);
+  function m(S) {
+    S.stopPropagation(), n.enableAccordion !== "" && (t.value = !t.value);
   }
-  function r() {
-    const d = T(() => ({
+  function y() {
+    const S = b(() => ({
       btn: !0,
       "f-btn-collapse-expand": !0,
       "f-btn-mx": !0,
-      "f-state-expand": n.value
-    })), v = T(() => ({
+      "f-state-expand": t.value
+    })), 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 M("div", {
+    return v("div", {
       class: "f-max-accordion"
-    }, [b.value ? M("span", {
-      class: v.value,
-      onClick: C
-    }, null) : "", f.value ? M("button", {
-      class: d.value,
-      onClick: g
-    }, [M("span", null, [n.value ? t.collapseLabel : t.expandLabel])]) : ""]);
-  }
-  function l() {
-    return e.slots.header ? M("div", {
+    }, [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 w() {
+    return e.slots.header ? v("div", {
       class: u.value
     }, [e.slots.header()]) : "";
   }
-  function a() {
-    return M("div", {
+  function g() {
+    return v("div", {
       class: "f-title",
-      onClick: g
-    }, [M("h4", {
+      onClick: m
+    }, [v("h4", {
       class: "f-title-text"
-    }, [t.mainTitle]), c.value && M("span", null, [t.subTitle])]);
+    }, [n.mainTitle]), s.value && v("span", null, [n.subTitle])]);
   }
-  function p() {
-    const d = T(() => {
-      const v = {
+  function M() {
+    const S = b(() => {
+      const D = {
         "f-content": !0
       };
-      return t.headerContentClass && t.headerContentClass.split(" ").reduce((h, P) => (h[P] = !0, h), v), v;
+      return n.headerContentClass && n.headerContentClass.split(" ").reduce((h, T) => (h[T] = !0, h), D), D;
     });
-    return e.slots.headerContent ? M("div", {
-      class: d.value
+    return e.slots.headerContent ? v("div", {
+      class: S.value
     }, [e.slots.headerContent()]) : "";
   }
-  function j() {
-    return M("div", {
+  function A() {
+    return v("div", {
       class: u.value
-    }, [e.slots.headerTitle ? e.slots.headerTitle() : a(), p(), y.value === "inHead" && m(), (b.value || f.value) && r()]);
+    }, [e.slots.headerTitle ? e.slots.headerTitle() : g(), M(), o.value === "inHead" && f(), (c.value || l.value) && y()]);
   }
-  return () => t.showHeader && (e.slots.header ? l() : j());
+  return () => n.showHeader && (e.slots.header ? w() : A());
 }
-const Se = ["moz", "ms", "webkit"];
-function Pe() {
-  let t = 0;
+const be = ["moz", "ms", "webkit"];
+function he() {
+  let n = 0;
   return (e) => {
-    const n = (/* @__PURE__ */ new Date()).getTime(), o = Math.max(0, 16 - (n - t)), s = setTimeout(() => {
-      e(n + o);
-    }, o);
-    return t = n + o, s;
+    const t = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (t - n)), i = setTimeout(() => {
+      e(t + a);
+    }, a);
+    return n = t + a, i;
   };
 }
-function Me() {
+function ve() {
   if (typeof window > "u")
     return () => 0;
   if (window.requestAnimationFrame)
     return window.requestAnimationFrame.bind(window);
-  const t = Se.filter((e) => `${e}RequestAnimationFrame` in window)[0];
-  return t ? window[`${t}RequestAnimationFrame`] : Pe();
+  const n = be.filter((e) => `${e}RequestAnimationFrame` in window)[0];
+  return n ? window[`${n}RequestAnimationFrame`] : he();
 }
-Me();
-function O(t, e) {
-  return ((e == null ? void 0 : e.split(" ")) || []).reduce((o, s) => (s && (o[s] = !0), o), t), t;
+ve();
+function L(n, e) {
+  return ((e == null ? void 0 : e.split(" ")) || []).reduce((a, i) => (i && (a[i] = !0), a), n), n;
 }
-const x = /* @__PURE__ */ G({
+const E = /* @__PURE__ */ z({
   name: "FSection",
-  props: L,
+  props: B,
   emits: [],
-  setup(t, e) {
-    const n = w();
-    let o = w();
-    const s = w(t.customClass), i = T(() => t.enableAccordion), y = w(t.expandStatus), m = T(() => t.buttonPosition), C = w(!1), c = Q(t, e, y, n, o, C), b = z(t, e), f = T(() => {
-      const a = {
+  setup(n, e) {
+    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") && !y.value,
-        "f-section-custom-accordion": i.value === "custom",
-        "f-section-fill": t.fill,
-        "f-section-maximize": C.value
+        "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": p.value
       };
-      return O(a, s.value);
-    }), u = T(() => O({
+      return L(g, i.value);
+    }), u = b(() => L({
       "f-section-content": !0
-    }, t.contentClass)), g = T(() => O({
+    }, n.contentClass)), m = b(() => L({
       "f-section-extend": !0
-    }, g.value));
-    function r() {
-      return e.slots.extend && M("div", {
-        class: g.value
+    }, m.value));
+    function y() {
+      return e.slots.extend && v("div", {
+        class: m.value
       }, [e.slots.extend()]);
     }
-    function l() {
-      return M("div", {
+    function w() {
+      return v("div", {
         class: u.value
-      }, [m.value === "inContent" && b(), e.slots.default && e.slots.default()]);
+      }, [f.value === "inContent" && c(), e.slots.default && e.slots.default()]);
     }
-    return R(() => t.expandStatus, (a, p) => {
-      a !== p && (y.value = a);
-    }), _(() => {
-      n && n.value && (o.value = n.value.parentElement);
-    }), () => M("div", {
-      class: f.value,
-      ref: n
-    }, [c(), r(), l()]);
+    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,
+      style: n.customStyle
+    }, [s(), y(), w()]);
   }
 });
-function ke() {
-  function t(e) {
-    var s, i;
+function Ce() {
+  function n(e, t) {
+    var o;
     if (!e)
       return !1;
-    const n = ((s = e.targetContainer) == null ? void 0 : s.componentInstance) && e.targetContainer.componentInstance.value;
-    if (!n)
+    const a = ((o = e.targetContainer) == null ? void 0 : o.componentInstance) && e.targetContainer.componentInstance.value;
+    if (!a)
       return !1;
-    const o = (i = n.schema.appearance) == null ? void 0 : i.class;
-    if (e.controlCategory === "input" || e.controlType === "form-group") {
-      const y = n.schema.type, m = (y === "response-form" || y === "content-container") && o && o.includes("farris-form");
-      if (n.schema.type !== "response-layout-item" && !m)
-        return !1;
-    }
-    return e.controlType !== "field-set";
+    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: t
+    basalDragulaRuleForContainer: n
   };
 }
-const De = "https://json-schema.org/draft/2020-12/schema", Ee = "https://farris-design.gitee.io/dragging-rules.schema.json", Oe = "Dragging Rules", xe = "The rules of designer canvas", Ne = "object", Fe = {
-  "f-page": {
-    description: "The root class of page designed by farris.",
-    type: "object",
-    properties: {
-      contents: {
-        type: "object",
-        properties: {
-          "f-page-header": {
-            description: "The class of page header designed by farris.",
-            type: "string"
-          },
-          "f-page-main": {
-            description: "The class of page body designed by farris.",
-            type: "object",
-            properties: {
-              contents: {
-                type: "object",
-                properties: {
-                  "f-struct-like-card": {
-                    description: "",
-                    type: "object",
-                    properties: {
-                      contents: {
-                        type: "object",
-                        properties: {
-                          "f-struct-form": {
-                            description: "The class of form component which has a hierarchical structure of component -> section -> respnse-form.",
-                            type: "object",
-                            properties: {
-                              contents: {
-                                type: "object",
-                                properties: {
-                                  "f-section-form": {
-                                    description: "The class of section which has wrapped a reponse-form component.",
-                                    type: "object",
-                                    properties: {
-                                      contents: {
-                                        type: "object",
-                                        properties: {
-                                          "f-form-layout": {
-                                            description: "The class of reponse form",
-                                            type: "object",
-                                            properties: {
-                                              rules: {
-                                                type: "object",
-                                                properties: {
-                                                  canAccept: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  },
-                                                  fixed: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  },
-                                                  hidePadding: {
-                                                    type: "boolean",
-                                                    const: !1
-                                                  }
-                                                }
-                                              }
-                                            }
-                                          }
-                                        }
-                                      },
-                                      rules: {
-                                        type: "object",
-                                        properties: {
-                                          canAccept: {
-                                            type: "boolean",
-                                            const: !1
-                                          },
-                                          fixed: {
-                                            type: "boolean",
-                                            const: !0
-                                          },
-                                          hidePadding: {
-                                            type: "boolean",
-                                            const: !0
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              },
-                              rules: {
-                                type: "object",
-                                properties: {
-                                  canAccept: {
-                                    type: "boolean",
-                                    const: !1
-                                  },
-                                  fixed: {
-                                    type: "boolean",
-                                    const: !1
-                                  },
-                                  hidePadding: {
-                                    type: "boolean",
-                                    const: !0
-                                  }
-                                }
-                              }
-                            }
-                          },
-                          "f-struct-wrapper": {
-                            description: "",
-                            type: "object",
-                            properties: {
-                              contents: {
-                                type: "object",
-                                properties: {
-                                  "f-section-tabs": {
-                                    description: "The class of section which has wrapped sub-grid tabs.",
-                                    type: "object",
-                                    properties: {
-                                      contents: {
-                                        type: "object",
-                                        properties: {
-                                          "f-tabs-in-card": {
-                                            description: "The class of tabs which contains sub-grid.",
-                                            type: "object",
-                                            properties: {
-                                              contents: {
-                                                type: "object",
-                                                properties: {
-                                                  "f-struct-data-grid-in-card": {
-                                                    description: "The class of sub-grid component",
-                                                    type: "object",
-                                                    properties: {
-                                                      contents: {
-                                                        type: "object",
-                                                        properties: {
-                                                          "f-grid-is-sub": {
-                                                            description: "The class of sub-grid",
-                                                            type: "object",
-                                                            properties: {
-                                                              rules: {
-                                                                type: "object",
-                                                                properties: {
-                                                                  canAccept: {
-                                                                    type: "boolean",
-                                                                    const: !0
-                                                                  },
-                                                                  fixed: {
-                                                                    type: "boolean",
-                                                                    const: !0
-                                                                  },
-                                                                  hidePadding: {
-                                                                    type: "boolean",
-                                                                    const: !1
-                                                                  }
-                                                                }
-                                                              }
-                                                            }
-                                                          }
-                                                        }
-                                                      },
-                                                      rules: {
-                                                        type: "object",
-                                                        properties: {
-                                                          canAccept: {
-                                                            type: "boolean",
-                                                            const: !1
-                                                          },
-                                                          fixed: {
-                                                            type: "boolean",
-                                                            const: !1
-                                                          },
-                                                          hidePadding: {
-                                                            type: "boolean",
-                                                            const: !0
-                                                          }
-                                                        }
-                                                      }
-                                                    }
-                                                  }
-                                                }
-                                              },
-                                              rules: {
-                                                type: "object",
-                                                properties: {
-                                                  canAccept: {
-                                                    type: "boolean",
-                                                    const: !1
-                                                  },
-                                                  fixed: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  },
-                                                  hidePadding: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  }
-                                                }
-                                              }
-                                            }
-                                          }
-                                        }
-                                      },
-                                      rules: {
-                                        type: "object",
-                                        properties: {
-                                          canAccept: {
-                                            type: "boolean",
-                                            const: !1
-                                          },
-                                          fixed: {
-                                            type: "boolean",
-                                            const: !0
-                                          },
-                                          hidePadding: {
-                                            type: "boolean",
-                                            const: !0
-                                          }
-                                        }
-                                      }
-                                    }
-                                  },
-                                  "f-section-in-main": {
-                                    description: "The class of section which has wrapped a reponse-form component.",
-                                    type: "object",
-                                    properties: {
-                                      rules: {
-                                        type: "object",
-                                        properties: {
-                                          canAccept: {
-                                            type: "boolean",
-                                            const: !0
-                                          },
-                                          fixed: {
-                                            type: "boolean",
-                                            const: !0
-                                          },
-                                          hidePadding: {
-                                            type: "boolean",
-                                            const: !1
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              },
-                              rules: {
-                                type: "object",
-                                properties: {
-                                  canAccept: {
-                                    type: "boolean",
-                                    const: !1
-                                  },
-                                  fixed: {
-                                    type: "boolean",
-                                    const: !1
-                                  },
-                                  hidePadding: {
-                                    type: "boolean",
-                                    const: !0
-                                  }
-                                }
-                              }
-                            }
-                          }
-                        }
-                      },
-                      rules: {
-                        type: "object",
-                        properties: {
-                          canAccept: {
-                            type: "boolean",
-                            const: !0
-                          },
-                          fixed: {
-                            type: "boolean",
-                            const: !0
-                          },
-                          hidePadding: {
-                            type: "object",
-                            const: {
-                              allOf: [
-                                {
-                                  sibling: 0,
-                                  parent: {
-                                    "f-page-main": !0
-                                  }
-                                }
-                              ]
-                            }
-                          }
-                        }
-                      }
-                    }
-                  },
-                  "f-struct-data-grid": {
-                    description: "",
-                    type: "object",
-                    properties: {
-                      rules: {
-                        type: "object",
-                        properties: {
-                          canAccept: {
-                            type: "object",
-                            const: !0
-                          },
-                          fixed: {
-                            type: "boolean",
-                            const: !0
-                          },
-                          hidePadding: {
-                            type: "boolean",
-                            const: !0
-                          }
-                        }
-                      }
-                    }
-                  },
-                  "f-page-main-content": {
-                    description: "",
-                    type: "object",
-                    properties: {
-                      contents: {
-                        type: "object",
-                        properties: {
-                          "f-page-content-nav": {
-                            description: "",
-                            type: "object",
-                            properties: {
-                              contents: {
-                                type: "object",
-                                properties: {
-                                  "f-struct-data-grid-in-nav": {
-                                    description: "",
-                                    type: "object",
-                                    properties: {
-                                      contents: {
-                                        type: "object",
-                                        properties: {
-                                          "f-page-content-nav-extend": {
-                                            description: "",
-                                            type: "object"
-                                          },
-                                          "f-section-in-nav": {
-                                            description: "",
-                                            type: "object",
-                                            properties: {
-                                              rules: {
-                                                type: "object",
-                                                properties: {
-                                                  canAccept: {
-                                                    type: "boolean",
-                                                    const: !1
-                                                  },
-                                                  fixed: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  },
-                                                  hidePadding: {
-                                                    type: "boolean",
-                                                    const: !1
-                                                  }
-                                                }
-                                              }
-                                            }
-                                          }
-                                        }
-                                      },
-                                      rules: {
-                                        type: "object",
-                                        properties: {
-                                          canAccept: {
-                                            type: "boolean",
-                                            const: !0
-                                          },
-                                          fixed: {
-                                            type: "boolean",
-                                            const: !1
-                                          },
-                                          hidePadding: {
-                                            type: "boolean",
-                                            const: !0
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              }
-                            }
-                          },
-                          "f-page-content-main": {
-                            description: "",
-                            type: "object",
-                            properties: {}
-                          }
-                        }
-                      }
-                    }
-                  },
-                  "f-page-content": {
-                    description: "",
-                    type: "object",
-                    properties: {
-                      contents: {
-                        type: "object",
-                        properties: {
-                          "f-page-content-nav": {
-                            description: "",
-                            type: "object",
-                            properties: {
-                              contents: {
-                                type: "object",
-                                properties: {
-                                  "f-list-nav": {
-                                    description: "",
-                                    type: "object"
-                                  },
-                                  "f-list-nav-left": {
-                                    description: "",
-                                    type: "object"
-                                  },
-                                  "f-struct-data-grid-in-nav": {
-                                    description: "",
-                                    type: "object",
-                                    properties: {
-                                      contents: {
-                                        type: "object",
-                                        properties: {
-                                          "f-section-form": {
-                                            description: "",
-                                            type: "object",
-                                            properties: {
-                                              rules: {
-                                                type: "object",
-                                                properties: {
-                                                  canAccept: {
-                                                    type: "boolean",
-                                                    const: !1
-                                                  },
-                                                  fixed: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  },
-                                                  hidePadding: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  }
-                                                }
-                                              }
-                                            }
-                                          },
-                                          "f-section-grid": {
-                                            description: "",
-                                            type: "object",
-                                            properties: {
-                                              rules: {
-                                                type: "object",
-                                                properties: {
-                                                  canAccept: {
-                                                    type: "boolean",
-                                                    const: !1
-                                                  },
-                                                  fixed: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  },
-                                                  hidePadding: {
-                                                    type: "boolean",
-                                                    const: !0
-                                                  }
-                                                }
-                                              }
-                                            }
-                                          }
-                                        }
-                                      },
-                                      rules: {
-                                        type: "object",
-                                        properties: {
-                                          canAccept: {
-                                            type: "boolean",
-                                            const: !1
-                                          },
-                                          fixed: {
-                                            type: "boolean",
-                                            const: !0
-                                          },
-                                          hidePadding: {
-                                            type: "boolean",
-                                            const: !0
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              }
-                            },
-                            rules: {
-                              type: "object",
-                              properties: {
-                                canAccept: {
-                                  type: "boolean",
-                                  const: !1
-                                },
-                                fixed: {
-                                  type: "boolean",
-                                  const: !0
-                                },
-                                hidePadding: {
-                                  type: "boolean",
-                                  const: !0
-                                }
-                              }
-                            }
-                          },
-                          "f-page-content-main": {
-                            description: "",
-                            type: "object",
-                            properties: {
-                              rules: {
-                                type: "object",
-                                properties: {
-                                  canAccept: {
-                                    type: "boolean",
-                                    const: !1
-                                  },
-                                  fixed: {
-                                    type: "boolean",
-                                    const: !1
-                                  },
-                                  hidePadding: {
-                                    type: "boolean",
-                                    const: !0
-                                  }
-                                }
-                              }
-                            }
-                          }
-                        }
-                      },
-                      rules: {
-                        type: "object",
-                        properties: {
-                          canAccept: {
-                            type: "boolean",
-                            const: !1
-                          },
-                          fixed: {
-                            type: "boolean",
-                            const: !0
-                          },
-                          hidePadding: {
-                            type: "boolean",
-                            const: !0
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              },
-              rules: {
-                type: "object",
-                properties: {
-                  canAccept: {
-                    type: "object",
-                    const: {
-                      anyOf: [
-                        {
-                          children: 0
-                        },
-                        {
-                          children: {
-                            length: {
-                              not: 1
-                            },
-                            "f-struct-like-card": !0
-                          }
-                        },
-                        {
-                          children: {
-                            "scroll-spy": !1,
-                            "f-page-content": !1,
-                            "f-struct-like-card": !1
-                          }
-                        }
-                      ]
-                    }
-                  },
-                  fixed: {
-                    type: "boolean",
-                    const: !0
-                  },
-                  hidePadding: {
-                    type: "boolean",
-                    const: !0
-                  }
-                }
-              }
-            }
-          },
-          "f-page-footer": {
-            description: "The class of page footer designed by farris.",
-            type: "string"
-          }
-        }
-      },
-      rules: {
-        type: "object",
-        properties: {
-          canAccept: {
-            type: "boolean",
-            const: !1
-          },
-          fixed: {
-            type: "boolean",
-            const: !0
-          },
-          hidePadding: {
-            type: "boolean",
-            const: !0
-          }
-        }
-      }
-    }
-  },
-  "f-page-is-managelist": {
-    description: "The root class of mangement list page.",
-    type: "string"
-  },
-  "f-page-card": {
-    description: "",
-    type: "object"
-  },
-  "f-page-is-mainsubcard": {
-    description: "",
-    type: "object"
-  }
-}, Be = {
-  $schema: De,
-  $id: Ee,
-  title: Oe,
-  description: xe,
-  type: Ne,
-  properties: Fe
-}, B = /* @__PURE__ */ new Map();
-function $e() {
-  function t(r, l, a, p) {
-    var j;
-    if (typeof a == "number")
-      return ((j = p[r]) == null ? void 0 : j.length) === a;
-    if (typeof a == "object") {
-      const d = Object.keys(a)[0], v = a[d];
-      if (d === "not")
-        return Number(p[r].length) !== Number(v);
-      if (d === "moreThan")
-        return Number(p[r].length) >= Number(v);
-      if (d === "lessThan")
-        return Number(p[r].length) <= Number(v);
-    }
-    return !1;
-  }
-  function e(r, l, a, p) {
-    return typeof a == "boolean" ? p.childrenClassList.includes(l) === !!a : !1;
-  }
-  function n(r, l, a, p) {
-    return typeof a == "boolean" ? p.parentClassList.includes(l) === !!a : !1;
-  }
-  function o(r, l, a, p) {
-    return typeof a == "boolean" ? p.parentClassList.includes(l) === !!a : !1;
-  }
-  const s = /* @__PURE__ */ new Map([
-    ["length", t],
-    ["hasChildren", e],
-    ["hasSibling", o],
-    ["hasParent", n]
-  ]);
-  function i(r, l) {
-    const a = r;
-    return typeof l == "number" ? [{ target: a, operator: "length", param: null, value: Number(l) }] : typeof l == "object" ? Object.keys(l).map((p) => {
-      if (p === "length")
-        return { target: a, operator: "length", param: null, value: l[p] };
-      const j = p, d = l[p];
-      return { target: a, operator: r === "children" ? "hasChildren" : r === "parent" ? "hasParent" : "hasSibling", param: j, value: d };
-    }) : [];
-  }
-  function y(r, l) {
-    if (s.has(r.operator)) {
-      const a = s.get(r.operator);
-      return a && a(r.target, r.param, r.value, l) || !1;
-    }
-    return !1;
-  }
-  function m(r, l) {
-    return Object.keys(r).reduce((d, v) => {
-      const S = i(v, r[v]);
-      return d.push(...S), d;
-    }, []).reduce((d, v) => d && y(v, l), !0);
-  }
-  function C(r, l) {
-    const a = Object.keys(r), p = a.includes("allOf"), j = a.includes("anyOf"), d = p || j, h = (d ? r[d ? p ? "allOf" : "anyOf" : "allOf"] : [r]).map((A) => m(A, l));
-    return p ? !h.includes(!1) : h.includes(!0);
-  }
-  function c(r, l) {
-    const a = r.const;
-    return a ? typeof a == "boolean" ? a : typeof a == "object" ? C(a, l) : !1 : !1;
-  }
-  function b(r) {
-    return (l) => {
-      const a = { canAccept: !0, fixed: !1, hidePadding: !1 };
-      return r && r.properties && Object.keys(r.properties).reduce((p, j) => {
-        const d = r.properties[j];
-        return p[j] = c(d, l), p;
-      }, a), a;
-    };
-  }
-  function f(r, l, a) {
-    if (l.type === "object" && l.properties) {
-      const { rules: p, contents: j } = l.properties;
-      a.set(r, b(p)), j && Object.keys(j.properties).forEach(
-        (d) => f(d, j.properties[d], a)
-      );
-    }
-  }
-  function u() {
-    const { properties: r } = Be;
-    Object.keys(r).forEach((l) => {
-      f(l, r[l], B);
-    });
-  }
-  function g(r, l) {
-    const a = { canAccept: !0, fixed: !1, hidePadding: !0 };
-    return B.has(r) ? B.get(r)(l) : a;
-  }
-  return u(), { getRuleValue: g };
-}
-const He = {
+const ge = {
   title: "section",
   description: "A Farris Container Component",
   type: "object",
@@ -1338,36 +598,11 @@ const He = {
               }
             ]
           }
-        },
-        mainTitle: {
-          title: "主标题",
-          type: "string",
-          description: "",
-          visible: {
-            showHeader: !0
-          }
-        },
-        subTitle: {
-          title: "副标题",
-          type: "string",
-          description: "",
-          visible: {
-            showHeader: !0
-          }
         }
-      },
-      setPropertyRelates(t, e) {
-        if (t)
-          switch (t && t.propertyID) {
-            case "mainTitle": {
-              t.needRefreshControlTree = !0;
-              break;
-            }
-          }
       }
     },
     appearance: {
-      title: "样式",
+      title: "外观",
       description: "Appearance",
       properties: {
         class: {
@@ -1383,10 +618,26 @@ const He = {
           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: "允许收折",
@@ -1396,6 +647,15 @@ const He = {
             showHeader: !0
           }
         }
+      },
+      setPropertyRelates(n, e) {
+        if (n)
+          switch (n && n.propertyID) {
+            case "mainTitle": {
+              n.needRefreshControlTree = !0;
+              break;
+            }
+          }
       }
     },
     extends: {
@@ -1411,207 +671,270 @@ const He = {
     }
   }
 };
-function Le(t, e) {
-  const n = w(!1), o = w(!1), s = $e();
-  let i = !0, y = !1, m, C = !1;
-  function c(a) {
-    return He;
-  }
-  function b(a) {
-    return !(!ke().basalDragulaRuleForContainer(a) || !i);
+class Te {
+  getTemplateRule(e, t) {
+    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 } = 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 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 (r.firstLevelChild.type) {
+          const { firstLevelChildSchema: o } = t;
+          if (!o || o.type !== r.firstLevelChild.type) {
+            i = !1;
+            continue;
+          }
+        }
+      }
+      if (r.secondLevelChild) {
+        if (r.secondLevelChild.class) {
+          const { secondLevelChildClassList: o } = t;
+          if (o && !o.includes(r.secondLevelChild.class)) {
+            i = !1;
+            continue;
+          }
+        }
+        if (r.secondLevelChild.type) {
+          const { secondLevelChildSchema: o } = t;
+          if (!o || o.type !== r.secondLevelChild.type) {
+            i = !1;
+            continue;
+          }
+        }
+      }
+      if (r.parent) {
+        if (r.parent.class) {
+          const { parentClassList: o } = t;
+          if (o && !o.includes(r.parent.class)) {
+            i = !1;
+            continue;
+          }
+        }
+        if (r.parent.type) {
+          const { parentSchema: o } = t;
+          if (o && o.type !== r.parent.type) {
+            i = !1;
+            continue;
+          }
+        }
+      }
+      i = !0;
+      break;
+    }
+    return !i;
+  }
+  getComponentContext(e) {
+    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: i,
+      childContents: r,
+      firstLevelChildSchema: o,
+      firstLevelChildClass: f,
+      firstLevelChildClassList: p,
+      secondLevelChildSchema: s,
+      secondLevelChildClass: c,
+      secondLevelChildClassList: l,
+      parentSchema: u,
+      parentClass: m,
+      parentClassList: y
+    };
   }
-  function f() {
-    return !C;
+}
+function Se(n, e) {
+  const t = new Te();
+  function a(p) {
+    return ge;
   }
-  function u() {
-    return !C;
+  function i(p) {
+    if (!Ce().basalDragulaRuleForContainer(p, e))
+      return !1;
+    const { canAccept: c } = t.getTemplateRule(n, e);
+    return c;
   }
-  function g() {
-    return y;
+  function r() {
+    const { canDelete: p } = t.getTemplateRule(n, e);
+    return p;
   }
-  function r(a) {
+  function o() {
+    const { canMove: p } = t.getTemplateRule(n, e);
+    return p;
   }
-  function l() {
-    n.value = !1, o.value = !1, C = !1, i = !0;
-    const a = t, p = a.appearance && a.appearance.class || "", j = p ? p.split(" ") : [], d = a.contents || [], v = d.length ? d[0] : null, S = v && v.appearance && v.appearance.class || "", h = S ? S.split(" ") : [], P = d.length ? d.reduce((V, F) => {
-      const q = F && F.appearance ? F.appearance.class : "", Y = q ? q.split(" ") : [];
-      return V.push(...Y), V;
-    }, []) : [], A = e, k = A && A.appearance && A.appearance.class || "", E = k ? k.split(" ") : [];
-    m = {
-      componentClass: p,
-      componentClassList: j,
-      childContents: d,
-      firstChildContent: v,
-      firstChildClass: S,
-      firstChildClassList: h,
-      parent: A,
-      parentClass: k,
-      parentClassList: E,
-      children: d,
-      childrenClassList: P
-    };
-    const { canAccept: D, fixed: N, hidePadding: X } = s.getRuleValue(j[0], m);
-    return i = D, y = X, C = N, !0;
+  function f() {
+    const { canMove: p, canDelete: s } = t.getTemplateRule(n, e);
+    return !p && !s;
   }
   return {
-    canAccepts: b,
-    checkCanDeleteComponent: f,
-    checkCanMoveComponent: u,
-    hideNestedPaddingInDesginerView: g,
-    onAcceptMovedChildElement: r,
-    resolveComponentContext: l,
-    triggerBelongedComponentToMoveWhenMoved: n,
-    triggerBelongedComponentToDeleteWhenDeleted: o,
-    getPropsConfig: c
+    canAccepts: i,
+    checkCanDeleteComponent: r,
+    checkCanMoveComponent: o,
+    hideNestedPaddingInDesginerView: f,
+    getPropsConfig: a
   };
 }
-function ze(t, e, n) {
-  var S;
+function Me(n, e, t) {
+  var D;
+  const a = t && t.getStyles && t.getStyles() || "", i = t && t.getDesignerClass && t.getDesignerClass() || "", r = C();
   function o() {
-    n != null && n.resolveComponentContext && n.resolveComponentContext();
+    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
   }
-  o();
-  const s = n && n.getStyles && n.getStyles() || "", i = n && n.getDesignerClass && n.getDesignerClass() || "", y = w();
-  function m() {
-    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanMoveComponent ? n.checkCanMoveComponent() : !0;
-  }
-  function C() {
+  function f() {
     return !1;
   }
-  function c() {
-    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanDeleteComponent ? n.checkCanDeleteComponent() : !0;
+  function p() {
+    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
   }
-  function b() {
-    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : n && n.hideNestedPaddingInDesginerView ? n.hideNestedPaddingInDesginerView() : !1;
+  function s() {
+    return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
   }
-  function f(h) {
-    if (!h || !h.value)
+  function c(d) {
+    if (!d || !d.value)
       return null;
-    if (h.value.schema && h.value.schema.type === "component")
-      return h.value;
-    const P = w(h == null ? void 0 : h.value.parent), A = f(P);
-    return A || 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(h = e) {
-    const { componentInstance: P, designerItemElementRef: A } = h;
-    return !P || !P.value ? null : P.value.canMove ? A : u(h.parent);
+  function l(d = e) {
+    const { componentInstance: h, designerItemElementRef: T } = d;
+    return !h || !h.value ? null : h.value.canMove ? T : l(d.parent);
   }
-  function g(h) {
-    return !!n && n.canAccepts(h);
+  function u(d) {
+    return !!t && t.canAccepts(d);
   }
-  function r() {
+  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 l() {
-  }
-  function a(h, P) {
-    P && n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(P);
-  }
-  function p(h, P) {
-    const { componentType: A } = h;
-    let k = $(A, h, P);
-    n && n.onResolveNewComponentSchema && (k = n.onResolveNewComponentSchema(h, k));
-    const E = A.toLowerCase().replace("-", "_");
-    return k && !k.id && k.type === A && (k.id = `${E}_${Math.random().toString().slice(2, 6)}`), k;
-  }
-  function j(h, P) {
-    const A = String(h.getAttribute("data-controltype")), k = h.getAttribute("data-feature"), E = k ? JSON.parse(k) : {};
-    E.parentComponentInstance = y.value;
-    let D = $(A, E);
-    n && n.onAcceptNewChildElement && (D = n.onAcceptNewChildElement(h, P, D));
-    const N = A.toLowerCase().replace("-", "_");
-    return D && !D.id && D.type === A && (D.id = `${N}_${Math.random().toString().slice(2, 6)}`), D;
-  }
-  function d(h) {
+  function y() {
   }
-  function v(...h) {
-    if (n && n.getPropsConfig)
-      return n.getPropsConfig(...h);
+  function w(d, h) {
+    h && t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(h);
+  }
+  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 M(d) {
+  }
+  function A(...d) {
+    if (t && t.getPropsConfig)
+      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 y.value = {
-    canMove: m(),
-    canSelectParent: C(),
-    canDelete: c(),
-    canNested: !b(),
+  return r.value = {
+    canMove: o(),
+    canSelectParent: f(),
+    canDelete: p(),
+    canNested: !s(),
     contents: e == null ? void 0 : e.schema.contents,
-    elementRef: t,
-    parent: (S = e == null ? void 0 : e.parent) == null ? void 0 : S.componentInstance,
+    elementRef: n,
+    parent: (D = e == null ? void 0 : e.parent) == null ? void 0 : D.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: s,
+    styles: a,
     designerClass: i,
-    canAccepts: g,
-    getBelongedComponentInstance: f,
-    getDraggableDesignItemElement: u,
-    getDraggingDisplayText: r,
-    getPropConfig: v,
-    getDragScopeElement: l,
-    onAcceptMovedChildElement: a,
-    onAcceptNewChildElement: j,
-    onChildElementMovedOut: d,
-    addNewChildComponentSchema: p,
-    updateDragAndDropRules: o,
-    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || w(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || w(!1)
-  }, y;
+    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 Ve = /* @__PURE__ */ G({
+const we = /* @__PURE__ */ z({
   name: "FSectionDesign",
-  props: L,
+  props: B,
   emits: [],
-  setup(t, e) {
-    var v;
-    const n = w(), o = w();
-    let s = w();
-    const i = I("design-item-context"), y = Le(i.schema, (v = i.parent) == null ? void 0 : v.schema), m = ze(n, i, y);
-    m.value.styles = "display: inherit;", _(() => {
-      n.value.componentInstance = m;
-    }), e.expose(m.value);
-    const C = w(t.customClass), c = T(() => t.enableAccordion), b = w(t.expandStatus), f = T(() => t.buttonPosition), u = w(!1), g = Q(t, e, b, o, s, u), r = z(t, e), l = T(() => {
-      const S = {
+  setup(n, e) {
+    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") && !b.value,
+        "f-state-collapse": (c.value === "default" || c.value === "custom") && !l.value,
         "f-section-custom-accordion": c.value === "custom",
-        "f-section-fill": t.fill,
-        "f-section-maximize": u.value,
+        "f-section-fill": n.fill,
+        "f-section-maximize": m.value,
         "f-utils-fill": !0,
         "p-0": !0
       };
-      return O(S, C.value);
-    }), a = T(() => O({
+      return L(d, s.value);
+    }), M = b(() => L({
       "f-section-content": !0,
       "drag-container": !0
-    }, t.contentClass)), p = T(() => O({
+    }, n.contentClass)), A = b(() => L({
       "f-section-extend": !0
-    }, p.value));
-    function j() {
-      return e.slots.extend && M("div", {
-        class: p.value
+    }, A.value));
+    function S() {
+      return e.slots.extend && v("div", {
+        class: A.value
       }, [e.slots.extend()]);
     }
-    function d() {
-      return M("div", {
-        class: a.value,
-        ref: n,
-        "data-dragref": `${i.schema.id}-container`
-      }, [f.value === "inContent" && r(), e.slots.default && e.slots.default()]);
+    function D() {
+      return v("div", {
+        class: M.value,
+        ref: t,
+        "data-dragref": `${o.schema.id}-container`
+      }, [u.value === "inContent" && w(), e.slots.default && e.slots.default()]);
     }
-    return () => M("div", {
-      class: l.value,
-      ref: o
-    }, [g(), j(), d()]);
+    return () => v("div", {
+      class: g.value,
+      ref: a,
+      style: n.customStyle
+    }, [y(), S(), D()]);
   }
 });
-x.register = (t, e, n, o) => {
-  t.section = x, e.section = Z;
+E.register = (n, e, t, a) => {
+  n.section = E, e.section = H;
 };
-x.registerDesigner = (t, e, n) => {
-  t.section = Ve, e.section = Z;
+E.registerDesigner = (n, e, t) => {
+  n.section = we, e.section = H;
 };
-const Ue = te(x);
+const Ee = Z(E);
 export {
-  x as Section,
-  Ue as default,
-  Z as propsResolver,
-  L as sectionProps
+  E as Section,
+  Ee as default,
+  H as propsResolver,
+  B as sectionProps
 };