@farris/ui-vue 1.3.3 → 1.3.4

package/components/section/index.esm.js

@@ -1,104 +1,108 @@
-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";
+var De = Object.defineProperty;
+var Pe = (n, e, t) => e in n ? De(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var E = (n, e, t) => Pe(n, typeof e != "symbol" ? e + "" : e, t);
+import { ref as w, computed as A, createVNode as m, defineComponent as Z, watch as X, onMounted as W, inject as N, getCurrentInstance as Ae, createTextVNode as le, provide as ke, onBeforeUnmount as Ee, withModifiers as xe, onUnmounted as Be, Fragment as Ie } from "vue";
+import { isPlainObject as ae, cloneDeep as ue } from "lodash-es";
+import Re from "../response-toolbar/index.esm.js";
 import "bignumber.js";
-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 $(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;
+import { useDesignerInnerComponent as de } from "../designer-canvas/index.esm.js";
+import { getCustomClass as ne, withInstall as $e } from "../common/index.esm.js";
+const pe = {}, fe = {};
+function oe(n) {
+  const { properties: e, title: t, ignore: s } = n, r = s && Array.isArray(s), a = Object.keys(e).reduce((i, g) => ((!r || !s.find((f) => f === g)) && (i[g] = e[g].type === "object" && e[g].properties ? oe(e[g]) : ue(e[g].default)), i), {});
+  if (t && (!r || !s.find((i) => i === "id"))) {
+    const i = t.toLowerCase().replace(/-/g, "_");
+    a.id = `${i}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return a;
+}
+function J(n, e = {}, t) {
+  const s = pe[n];
+  if (s) {
+    let r = oe(s);
+    const a = fe[n];
+    return r = a ? a({ getSchemaByType: J }, r, e, t) : r, r;
   }
   return null;
 }
-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 je(n, e) {
+  const t = oe(e);
+  return Object.keys(t).reduce((s, r) => (s[r] && ae(s[r]) && ae(n[r] || !n[r]) ? Object.assign(s[r], n[r] || {}) : s[r] = n[r], s), t), t;
 }
-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];
+function Le(n, e) {
+  return Object.keys(n).filter((s) => n[s] != null).reduce((s, r) => {
+    if (e.has(r)) {
+      const a = e.get(r);
+      if (typeof a == "string")
+        s[a] = n[r];
       else {
-        const o = r(i, n[i], n);
-        Object.assign(a, o);
+        const i = a(r, n[r], n);
+        Object.assign(s, i);
       }
     } else
-      a[i] = n[i];
-    return a;
+      s[r] = n[r];
+    return s;
   }, {});
 }
-function Y(n, e, t = /* @__PURE__ */ new Map()) {
-  const a = J(n, e);
-  return X(a, t);
-}
-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);
+function Fe(n, e, t = /* @__PURE__ */ new Map()) {
+  const s = je(n, e);
+  return Le(s, t);
+}
+function Oe(n = {}) {
+  function e(u, h, p, b) {
+    if (typeof p == "number")
+      return b[u].length === p;
+    if (typeof p == "object") {
+      const y = Object.keys(p)[0], M = p[y];
+      if (y === "not")
+        return Number(b[u].length) !== Number(M);
+      if (y === "moreThan")
+        return Number(b[u].length) >= Number(M);
+      if (y === "lessThan")
+        return Number(b[u].length) <= Number(M);
     }
     return !1;
   }
-  function t(s, c, l, u) {
-    return u[s] && u[s].propertyValue && String(u[s].propertyValue.value) === String(l);
+  function t(u, h, p, b) {
+    return b[u] && b[u].propertyValue && String(b[u].propertyValue.value) === String(p);
   }
-  const a = /* @__PURE__ */ new Map([
+  const s = /* @__PURE__ */ new Map([
     ["length", e],
     ["getProperty", t]
   ]);
-  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: l, operator: "length", param: null, value: c[u] };
-      const m = u, y = c[u];
-      return { target: l, operator: "getProperty", param: m, value: y };
+  Object.keys(n).reduce((u, h) => (u.set(h, n[h]), u), s);
+  function r(u, h) {
+    const p = u;
+    return typeof h == "number" ? [{ target: p, operator: "length", param: null, value: Number(h) }] : typeof h == "boolean" ? [{ target: p, operator: "getProperty", param: u, value: !!h }] : typeof h == "object" ? Object.keys(h).map((b) => {
+      if (b === "length")
+        return { target: p, operator: "length", param: null, value: h[b] };
+      const y = b, M = h[b];
+      return { target: p, operator: "getProperty", param: y, value: M };
     }) : [];
   }
-  function r(s) {
-    return Object.keys(s).reduce((l, u) => {
-      const m = i(u, s[u]);
-      return l.push(...m), l;
+  function a(u) {
+    return Object.keys(u).reduce((p, b) => {
+      const y = r(b, u[b]);
+      return p.push(...y), p;
     }, []);
   }
-  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;
+  function i(u, h) {
+    if (s.has(u.operator)) {
+      const p = s.get(u.operator);
+      return p && p(u.target, u.param, u.value, h) || !1;
     }
     return !1;
   }
-  function f(s, c) {
-    return r(s).reduce((m, y) => m && o(y, c), !0);
+  function g(u, h) {
+    return a(u).reduce((y, M) => y && i(M, h), !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);
+  function f(u, h) {
+    const p = Object.keys(u), b = p.includes("allOf"), y = p.includes("anyOf"), M = b || y, R = (M ? u[M ? b ? "allOf" : "anyOf" : "allOf"] : [u]).map((x) => g(x, h));
+    return b ? !R.includes(!1) : R.includes(!0);
   }
-  return { parseValueSchema: p };
+  return { parseValueSchema: f };
 }
-const P = {
+const q = {
   button: { type: "button", name: "按钮", icon: "Button" },
   "response-toolbar": { type: "response-toolbar", name: "工具栏", icon: "ButtonGroup" },
   "response-toolbar-item": { type: "response-toolbar-item", name: "按钮", icon: "Button" },
@@ -138,63 +142,64 @@ const P = {
   "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏", icon: "TabToolbar" },
   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);
+}, Ne = {}, Ve = {};
+Oe();
+function ee(n, e, t = /* @__PURE__ */ new Map(), s = (i, g, f, u) => g, r = {}, a = (i) => i) {
+  return pe[e.title] = e, fe[e.title] = s, Ne[e.title] = r, Ve[e.title] = a, (i = {}) => {
+    const g = Fe(i, e, t), f = Object.keys(n).reduce((u, h) => (u[h] = n[h].default, u), {});
+    return Object.assign(f, g);
   };
 }
-function te(n, e) {
+function me(n, e) {
   return { customClass: e.class, customStyle: e.style };
 }
-function ne(n, e, t) {
+function _e(n, e, t) {
   return e ? { enableAccordion: t.accordionMode } : { enableAccordion: "" };
 }
-function oe(n, e) {
+function qe(n, e) {
   return {
     buttons: e.buttons,
     buttonPosition: e.position
   };
 }
-const ae = /* @__PURE__ */ new Map([
-  ["appearance", te],
+const ze = /* @__PURE__ */ new Map([
+  ["appearance", me],
   ["expanded", "expandStatus"],
-  ["enableAccordion", ne],
-  ["toolbar", oe]
+  ["enableAccordion", _e],
+  ["toolbar", qe]
 ]);
-function re(n, e, t) {
-  const a = Math.random().toString().slice(2, 6), i = t.parentComponentInstance;
+function Ue(n, e, t) {
+  const s = Math.random().toString().slice(2, 6), r = t.parentComponentInstance;
   Object.assign(e, {
-    id: `section-${a}`,
+    id: `section-${s}`,
     appearance: {
       class: "f-section-in-mainsubcard"
     },
     enableAccordion: !1,
     mainTitle: t.mainTitle || e.mainTitle || "标题"
   });
-  const r = n.getSchemaByType("content-container");
-  Object.assign(r, {
-    id: `container-${a}`,
+  const a = n.getSchemaByType("content-container");
+  Object.assign(a, {
+    id: `container-${s}`,
     appearance: {
       class: "f-struct-wrapper"
     },
     contents: [e]
   });
-  const o = i.schema;
-  switch (o && o.type) {
-    case P["splitter-pane"].type: {
+  const i = r.schema;
+  switch (i && i.type) {
+    case q["splitter-pane"].type: {
       e.appearance.class = "f-section-in-main";
       break;
     }
   }
-  return r;
+  const g = r.elementRef, f = window.getComputedStyle(g);
+  return f && f.display === "flex" && (a.appearance.class += " d-block"), a;
 }
-function ie(n, e, t) {
-  return t.parentComponentInstance ? re(n, e, t) : e;
+function He(n, e, t) {
+  return t.parentComponentInstance ? Ue(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 = {
+const We = "https://json-schema.org/draft/2020-12/schema", Ge = "https://farris-design.gitee.io/section.schema.json", Qe = "section", Ze = "A Farris Container Component", Je = "object", Xe = {
   id: {
     description: "The unique identifier for a Section",
     type: "string"
@@ -306,7 +311,7 @@ const se = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-
     properties: {
       type: {
         type: "string",
-        default: "SectionToolbar"
+        default: "section-toolbar"
       },
       position: {
         type: "string",
@@ -319,19 +324,19 @@ const se = "https://json-schema.org/draft/2020-12/schema", ce = "https://farris-
     },
     default: null
   }
-}, de = [
+}, Ye = [
   "id",
   "type",
   "contents"
-], me = {
-  $schema: se,
-  $id: ce,
-  title: le,
-  description: ue,
-  type: pe,
-  properties: fe,
-  required: de
-}, B = {
+], Ke = {
+  $schema: We,
+  $id: Ge,
+  title: Qe,
+  description: Ze,
+  type: Je,
+  properties: Xe,
+  required: Ye
+}, se = {
   /** 设置内容区域样式 */
   contentClass: { type: String, default: "" },
   /** 自定义样式 */
@@ -376,11 +381,11 @@ 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: {} }
-}, H = ee(B, me, ae, ie);
-function ye(n, e, t) {
-  let a;
-  function i(p = 1) {
-    const s = [
+}, he = ee(se, Ke, ze, He);
+function ge(n, e, t) {
+  let s;
+  function r(f = 1) {
+    const u = [
       "body>.f-datagrid-settings-simple-host",
       "body>div",
       "body>farris-dialog>.farris-modal.show",
@@ -390,185 +395,185 @@ function ye(n, e, t) {
       "body>.popover.show",
       "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: 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 + p;
+    ], h = Array.from(document.body.querySelectorAll(u.join(","))).filter((b) => b).map((b) => {
+      const { display: y, zIndex: M } = window.getComputedStyle(b);
+      return y === "none" ? 0 : parseInt(M, 10);
+    }).filter((b) => b);
+    let p = Math.max(...h);
+    return p < 1040 && (p = 1040), p + f;
   }
-  function r() {
-    a = n.value.nextElementSibling;
-    const p = document && document.querySelector("body");
-    p && (p.appendChild(n.value), n.value.style.zIndex = i());
+  function a() {
+    s = n.value.nextElementSibling;
+    const f = document && document.querySelector("body");
+    f && (f.appendChild(n.value), n.value.style.zIndex = r());
   }
-  function o() {
-    a ? e.value.insertBefore(
+  function i() {
+    s ? e.value.insertBefore(
       n.value,
-      a
+      s
     ) : e.value.appendChild(n.value), n.value.style.zIndex = null;
   }
-  function f() {
-    !n || !e.value || (t.value = !t.value, t.value ? r() : o());
+  function g() {
+    !n || !e.value || (t.value = !t.value, t.value ? a() : i());
   }
-  return { onClickMaxMinIcon: f };
+  return { onClickMaxMinIcon: g };
 }
-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);
+function ye(n, e) {
+  const t = w(n.buttons), s = A(() => n.buttonPosition === "inHead" ? "right" : "left"), r = A(() => "f-section-toolbar" + (n.buttonPosition === "inHead" ? " f-section-header--toolbar" : " f-section-content--toolbar")), a = A(() => n.buttons && n.buttons.length > 0 && n.buttonPosition === "inHead");
+  function i(g) {
+    e.emit("Click", g);
   }
-  return () => r.value && v(Q, {
-    customClass: i.value,
+  return () => a.value && m(Re, {
+    customClass: r.value,
     items: t.value,
-    onClick: o,
-    alignment: a.value
+    onClick: i,
+    alignment: s.value
   }, null);
 }
-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 = {
+function et(n, e, t, s, r, a) {
+  w(n.subTitle);
+  const i = A(() => n.buttonPosition), g = ye(n, e), {
+    onClickMaxMinIcon: f
+  } = ge(s, r, a), u = A(() => !!n.subTitle), h = A(() => n.enableMaximize), p = A(() => n.enableAccordion !== ""), b = A(() => {
+    const x = {
       "f-section-header": !0
     };
-    return e.slots.header && n.headerClass.split(" ").reduce((d, h) => (d[h] = !0, d), S), S;
+    return e.slots.header && n.headerClass.split(" ").reduce((v, S) => (v[S] = !0, v), x), x;
   });
-  function m(S) {
-    S.stopPropagation(), n.enableAccordion !== "" && (t.value = !t.value);
+  function y(x) {
+    x.stopPropagation(), n.enableAccordion !== "" && (t.value = !t.value);
   }
-  function y() {
-    const S = b(() => ({
+  function M() {
+    const x = A(() => ({
       btn: !0,
       "f-btn-collapse-expand": !0,
       "f-btn-mx": !0,
       "f-state-expand": t.value
-    })), D = b(() => ({
+    })), B = A(() => ({
       "f-icon": !0,
-      "f-icon-maximize": !r.value,
-      "f-icon-minimize": r.value
+      "f-icon-maximize": !a.value,
+      "f-icon-minimize": a.value
     }));
-    return v("div", {
+    return m("div", {
       class: "f-max-accordion"
-    }, [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
+    }, [h.value ? m("span", {
+      class: B.value,
+      onClick: f
+    }, null) : "", p.value ? m("button", {
+      class: x.value,
+      onClick: y
+    }, [m("span", null, [t.value ? n.collapseLabel : n.expandLabel])]) : ""]);
+  }
+  function k() {
+    return e.slots.header ? m("div", {
+      class: b.value
     }, [e.slots.header()]) : "";
   }
-  function g() {
-    return v("div", {
+  function I() {
+    return m("div", {
       class: "f-title",
-      onClick: m
-    }, [v("h4", {
+      onClick: y
+    }, [m("h4", {
       class: "f-title-text"
-    }, [n.mainTitle]), s.value && v("span", null, [n.subTitle])]);
+    }, [n.mainTitle]), u.value && m("span", null, [n.subTitle])]);
   }
-  function M() {
-    const S = b(() => {
-      const D = {
+  function R() {
+    const x = A(() => {
+      const B = {
         "f-content": !0
       };
-      return n.headerContentClass && n.headerContentClass.split(" ").reduce((h, T) => (h[T] = !0, h), D), D;
+      return n.headerContentClass && n.headerContentClass.split(" ").reduce((S, D) => (S[D] = !0, S), B), B;
     });
-    return e.slots.headerContent ? v("div", {
-      class: S.value
+    return e.slots.headerContent ? m("div", {
+      class: x.value
     }, [e.slots.headerContent()]) : "";
   }
-  function A() {
-    return v("div", {
-      class: u.value
-    }, [e.slots.headerTitle ? e.slots.headerTitle() : g(), M(), o.value === "inHead" && f(), (c.value || l.value) && y()]);
+  function L() {
+    return m("div", {
+      class: b.value
+    }, [e.slots.headerTitle ? e.slots.headerTitle() : I(), R(), i.value === "inHead" && g(), (h.value || p.value) && M()]);
   }
-  return () => n.showHeader && (e.slots.header ? w() : A());
+  return () => n.showHeader && (e.slots.header ? k() : L());
 }
-const be = ["moz", "ms", "webkit"];
-function he() {
+const tt = ["moz", "ms", "webkit"];
+function nt() {
   let n = 0;
   return (e) => {
-    const t = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (t - n)), i = setTimeout(() => {
-      e(t + a);
-    }, a);
-    return n = t + a, i;
+    const t = (/* @__PURE__ */ new Date()).getTime(), s = Math.max(0, 16 - (t - n)), r = setTimeout(() => {
+      e(t + s);
+    }, s);
+    return n = t + s, r;
   };
 }
-function ve() {
+function ot() {
   if (typeof window > "u")
     return () => 0;
   if (window.requestAnimationFrame)
     return window.requestAnimationFrame.bind(window);
-  const n = be.filter((e) => `${e}RequestAnimationFrame` in window)[0];
-  return n ? window[`${n}RequestAnimationFrame`] : he();
+  const n = tt.filter((e) => `${e}RequestAnimationFrame` in window)[0];
+  return n ? window[`${n}RequestAnimationFrame`] : nt();
 }
-ve();
-function L(n, e) {
-  return ((e == null ? void 0 : e.split(" ")) || []).reduce((a, i) => (i && (a[i] = !0), a), n), n;
+ot();
+function H(n, e) {
+  return ((e == null ? void 0 : e.split(" ")) || []).reduce((s, r) => (r && (s[r] = !0), s), n), n;
 }
-const E = /* @__PURE__ */ z({
+const Y = /* @__PURE__ */ Z({
   name: "FSection",
-  props: B,
+  props: se,
   emits: [],
   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 = {
+    const t = w(), s = w(), r = w(n.customClass), a = A(() => n.enableAccordion), i = w(n.expandStatus), g = A(() => n.buttonPosition), f = w(!1), u = et(n, e, i, t, s, f), h = ye(n, e), p = A(() => {
+      const I = {
         "f-section": !0,
-        "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-accordion": a.value === "default",
+        "f-state-collapse": (a.value === "default" || a.value === "custom") && !i.value,
+        "f-section-custom-accordion": a.value === "custom",
         "f-section-fill": n.fill,
-        "f-section-maximize": p.value
+        "f-section-maximize": f.value
       };
-      return L(g, i.value);
-    }), u = b(() => L({
+      return H(I, r.value);
+    }), b = A(() => H({
       "f-section-content": !0
-    }, n.contentClass)), m = b(() => L({
+    }, n.contentClass)), y = A(() => H({
       "f-section-extend": !0
-    }, m.value));
-    function y() {
-      return e.slots.extend && v("div", {
-        class: m.value
+    }, y.value));
+    function M() {
+      return e.slots.extend && m("div", {
+        class: y.value
       }, [e.slots.extend()]);
     }
-    function w() {
-      return v("div", {
-        class: u.value
-      }, [f.value === "inContent" && c(), e.slots.default && e.slots.default()]);
-    }
-    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,
+    function k() {
+      return m("div", {
+        class: b.value
+      }, [g.value === "inContent" && h(), e.slots.default && e.slots.default()]);
+    }
+    return X(() => n.expandStatus, (I, R) => {
+      I !== R && (i.value = I);
+    }), W(() => {
+      t.value && t.value && (s.value = t.value.parentElement);
+    }), () => m("div", {
+      class: p.value,
       ref: t,
       style: n.customStyle
-    }, [s(), y(), w()]);
+    }, [u(), M(), k()]);
   }
 });
-function Ce() {
+function st() {
   function n(e, t) {
-    var o;
+    var i;
     if (!e)
       return !1;
-    const a = ((o = e.targetContainer) == null ? void 0 : o.componentInstance) && e.targetContainer.componentInstance.value;
-    if (!a)
+    const s = ((i = e.targetContainer) == null ? void 0 : i.componentInstance) && e.targetContainer.componentInstance.value;
+    if (!s)
       return !1;
-    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)));
+    const r = s.schema.type, a = t == null ? void 0 : t.formSchemaUtils.getComponentById(s.belongedComponentId);
+    return !((e.componentCategory === "input" || e.componentType === "form-group") && ![q["response-layout-item"].type, q["response-form"].type].includes(r) || (e.componentType === q.tabs.type || e.componentType === q.section.type) && ((a == null ? void 0 : a.componentType) !== "frame" || ![q["content-container"].type, q["splitter-pane"].type, q["response-layout-item"].type].includes(r)));
   }
   return {
     basalDragulaRuleForContainer: n
   };
 }
-const ge = {
+const rt = {
   title: "section",
   description: "A Farris Container Component",
   type: "object",
@@ -671,270 +676,1955 @@ const ge = {
     }
   }
 };
-class Te {
+class it {
   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])
+    const s = t == null ? void 0 : t.formSchemaUtils, r = s == null ? void 0 : s.getFormTemplateRule(), a = { canAccept: !0, canDelete: !0, canMove: !0 };
+    if (!r)
+      return a;
+    const i = this.getComponentContext(e), { componentClassList: g } = i;
+    return g.forEach((f) => {
+      if (!f || !r[f])
         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;
+      const { canMove: u, canDelete: h, canAccept: p } = r[f];
+      a.canMove = a.canMove && this.resolveRuleValue(u, i), a.canDelete = a.canDelete && this.resolveRuleValue(h, i), a.canAccept = a.canAccept && this.resolveRuleValue(p, i);
+    }), a;
   }
   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;
+    const s = e.invalidContext || [];
+    let r = !0;
+    for (const a of s) {
+      if (a.firstLevelChild) {
+        if (a.firstLevelChild.class) {
+          const { firstLevelChildClassList: i } = t;
+          if (i && !i.includes(a.firstLevelChild.class)) {
+            r = !1;
             continue;
           }
         }
-        if (r.firstLevelChild.type) {
-          const { firstLevelChildSchema: o } = t;
-          if (!o || o.type !== r.firstLevelChild.type) {
-            i = !1;
+        if (a.firstLevelChild.type) {
+          const { firstLevelChildSchema: i } = t;
+          if (!i || i.type !== a.firstLevelChild.type) {
+            r = !1;
             continue;
           }
         }
       }
-      if (r.secondLevelChild) {
-        if (r.secondLevelChild.class) {
-          const { secondLevelChildClassList: o } = t;
-          if (o && !o.includes(r.secondLevelChild.class)) {
-            i = !1;
+      if (a.secondLevelChild) {
+        if (a.secondLevelChild.class) {
+          const { secondLevelChildClassList: i } = t;
+          if (i && !i.includes(a.secondLevelChild.class)) {
+            r = !1;
             continue;
           }
         }
-        if (r.secondLevelChild.type) {
-          const { secondLevelChildSchema: o } = t;
-          if (!o || o.type !== r.secondLevelChild.type) {
-            i = !1;
+        if (a.secondLevelChild.type) {
+          const { secondLevelChildSchema: i } = t;
+          if (!i || i.type !== a.secondLevelChild.type) {
+            r = !1;
             continue;
           }
         }
       }
-      if (r.parent) {
-        if (r.parent.class) {
-          const { parentClassList: o } = t;
-          if (o && !o.includes(r.parent.class)) {
-            i = !1;
+      if (a.parent) {
+        if (a.parent.class) {
+          const { parentClassList: i } = t;
+          if (i && !i.includes(a.parent.class)) {
+            r = !1;
             continue;
           }
         }
-        if (r.parent.type) {
-          const { parentSchema: o } = t;
-          if (o && o.type !== r.parent.type) {
-            i = !1;
+        if (a.parent.type) {
+          const { parentSchema: i } = t;
+          if (i && i.type !== a.parent.type) {
+            r = !1;
             continue;
           }
         }
       }
-      i = !0;
+      r = !0;
       break;
     }
-    return !i;
+    return !r;
   }
   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(" ") : [];
+    var k, I, R, L;
+    const t = e.schema, s = t.appearance && t.appearance.class || "", r = s.split(" ") || [], a = t.contents || [], i = a.length ? a[0] : null, g = i && i.appearance ? i.appearance.class : "", f = g ? g.split(" ") : [], u = (k = i == null ? void 0 : i.contents) != null && k.length ? i == null ? void 0 : i.contents[0] : null, h = u && u.appearance ? u.appearance.class : "", p = h ? h.split(" ") : [], b = t.type === "component" ? (R = (I = e.parent) == null ? void 0 : I.parent) == null ? void 0 : R.schema : (L = e.parent) == null ? void 0 : L.schema, y = b && b.appearance && b.appearance.class || "", M = y ? y.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
+      componentClass: s,
+      componentClassList: r,
+      childContents: a,
+      firstLevelChildSchema: i,
+      firstLevelChildClass: g,
+      firstLevelChildClassList: f,
+      secondLevelChildSchema: u,
+      secondLevelChildClass: h,
+      secondLevelChildClassList: p,
+      parentSchema: b,
+      parentClass: y,
+      parentClassList: M
     };
   }
 }
-function Se(n, e) {
-  const t = new Te();
-  function a(p) {
-    return ge;
+function at(n, e) {
+  const t = new it();
+  function s(f) {
+    return rt;
   }
-  function i(p) {
-    if (!Ce().basalDragulaRuleForContainer(p, e))
+  function r(f) {
+    if (!st().basalDragulaRuleForContainer(f, e))
       return !1;
-    const { canAccept: c } = t.getTemplateRule(n, e);
-    return c;
+    const { canAccept: h } = t.getTemplateRule(n, e);
+    return h;
   }
-  function r() {
-    const { canDelete: p } = t.getTemplateRule(n, e);
-    return p;
+  function a() {
+    const { canDelete: f } = t.getTemplateRule(n, e);
+    return f;
   }
-  function o() {
-    const { canMove: p } = t.getTemplateRule(n, e);
-    return p;
+  function i() {
+    const { canMove: f } = t.getTemplateRule(n, e);
+    return f;
   }
-  function f() {
-    const { canMove: p, canDelete: s } = t.getTemplateRule(n, e);
-    return !p && !s;
+  function g() {
+    const { canMove: f, canDelete: u } = t.getTemplateRule(n, e);
+    return !f && !u;
   }
   return {
-    canAccepts: i,
-    checkCanDeleteComponent: r,
-    checkCanMoveComponent: o,
-    hideNestedPaddingInDesginerView: f,
-    getPropsConfig: a
+    canAccepts: r,
+    checkCanDeleteComponent: a,
+    checkCanMoveComponent: i,
+    hideNestedPaddingInDesginerView: g,
+    getPropsConfig: 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() {
+function ct(n, e, t) {
+  var B;
+  const s = t && t.getStyles && t.getStyles() || "", r = t && t.getDesignerClass && t.getDesignerClass() || "", a = w();
+  function i() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
   }
-  function f() {
+  function g() {
     return !1;
   }
-  function p() {
+  function f() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
   }
-  function s() {
+  function u() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
   }
-  function c(d) {
-    if (!d || !d.value)
+  function h(v) {
+    if (!v || !v.value)
       return 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;
+    if (v.value.schema && v.value.schema.type === "component")
+      return v.value;
+    const S = w(v == null ? void 0 : v.value.parent), D = h(S);
+    return D || null;
   }
-  function l(d = e) {
-    const { componentInstance: h, designerItemElementRef: T } = d;
-    return !h || !h.value ? null : h.value.canMove ? T : l(d.parent);
+  function p(v = e) {
+    const { componentInstance: S, designerItemElementRef: D } = v;
+    return !S || !S.value ? null : S.value.canMove ? D : p(v.parent);
   }
-  function u(d) {
-    return !!t && t.canAccepts(d);
+  function b(v) {
+    return !!t && t.canAccepts(v);
   }
-  function m() {
+  function y() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function y() {
+  function M() {
   }
-  function w(d, h) {
-    h && t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(h);
+  function k(v, S) {
+    S && t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(S);
   }
-  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 I(v, S) {
+    const { componentType: D } = v;
+    let $ = J(D, v, S);
+    t && t.onResolveNewComponentSchema && ($ = t.onResolveNewComponentSchema(v, $));
+    const V = D.toLowerCase().replace(/-/g, "_");
+    return $ && !$.id && $.type === D && ($.id = `${V}_${Math.random().toString().slice(2, 6)}`), $;
   }
-  function M(d) {
+  function R(v) {
   }
-  function A(...d) {
+  function L(...v) {
     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 t.getPropsConfig(...v);
+  }
+  function x() {
+    t && t.onRemoveComponent && t.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((v) => {
+      var $;
+      let S = v.id;
+      v.type === "component-ref" && (S = v.component);
+      const D = n.value.querySelector(`#${S}-design-item`);
+      ($ = D == null ? void 0 : D.componentInstance) != null && $.value.onRemoveComponent && D.componentInstance.value.onRemoveComponent();
     });
   }
-  return r.value = {
-    canMove: o(),
-    canSelectParent: f(),
-    canDelete: p(),
-    canNested: !s(),
+  return a.value = {
+    canMove: i(),
+    canSelectParent: g(),
+    canDelete: f(),
+    canNested: !u(),
     contents: e == null ? void 0 : e.schema.contents,
     elementRef: n,
-    parent: (D = e == null ? void 0 : e.parent) == null ? void 0 : D.componentInstance,
+    parent: (B = e == null ? void 0 : e.parent) == null ? void 0 : B.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: a,
-    designerClass: i,
-    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;
+    styles: s,
+    designerClass: r,
+    canAccepts: b,
+    getBelongedComponentInstance: h,
+    getDraggableDesignItemElement: p,
+    getDraggingDisplayText: y,
+    getPropConfig: L,
+    getDragScopeElement: M,
+    onAcceptMovedChildElement: k,
+    onChildElementMovedOut: R,
+    addNewChildComponentSchema: I,
+    triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || w(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || w(!1),
+    onRemoveComponent: x
+  }, a;
 }
-const we = /* @__PURE__ */ z({
-  name: "FSectionDesign",
-  props: B,
-  emits: [],
-  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") && !l.value,
-        "f-section-custom-accordion": c.value === "custom",
-        "f-section-fill": n.fill,
-        "f-section-maximize": m.value,
-        "f-utils-fill": !0,
-        "p-0": !0
-      };
-      return L(d, s.value);
-    }), M = b(() => L({
-      "f-section-content": !0,
-      "drag-container": !0
-    }, n.contentClass)), A = b(() => L({
-      "f-section-extend": !0
-    }, A.value));
-    function S() {
-      return e.slots.extend && v("div", {
-        class: A.value
-      }, [e.slots.extend()]);
+const lt = /* @__PURE__ */ new Map([
+  ["buttons", "items"],
+  ["appearance", me]
+]);
+function ut(n, e) {
+  return { class: e.class, style: e.style };
+}
+const dt = /* @__PURE__ */ new Map([
+  ["appearance", ut]
+]);
+function be(n, e, t) {
+  return e;
+}
+const pt = "https://json-schema.org/draft/2020-12/schema", ft = "https://farris-design.gitee.io/response-toolbar.schema.json", mt = "response-toolbar", ht = "A Farris Toolbar Component", gt = "object", yt = {
+  id: {
+    description: "The unique identifier for a Response Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Response Toolbar",
+    type: "string",
+    default: "response-toolbar"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string",
+        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()]);
+  },
+  alignment: {
+    description: "The alignment of Response Toolbar Button.",
+    type: "string",
+    default: "right"
+  },
+  buttons: {
+    description: "The items of Response Toolbar.",
+    type: "array",
+    default: []
+  }
+}, bt = [
+  "id",
+  "type",
+  "buttons"
+], vt = {
+  $schema: pt,
+  $id: ft,
+  title: mt,
+  description: ht,
+  type: gt,
+  properties: yt,
+  required: bt
+}, Ct = "https://json-schema.org/draft/2020-12/schema", Tt = "https://farris-design.gitee.io/response-toolbar-item.schema.json", wt = "response-toolbar-item", St = "A Farris Toolbar Item Component", Mt = "object", Dt = {
+  id: {
+    description: "The unique identifier for a Response Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Response Toolbar",
+    type: "string",
+    default: "response-toolbar-item"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string",
+        default: "btn-secondary"
+      }
     }
-    return () => v("div", {
-      class: g.value,
-      ref: a,
-      style: n.customStyle
-    }, [y(), S(), D()]);
+  },
+  alignment: {
+    description: "对齐",
+    type: "string",
+    default: "right"
+  },
+  text: {
+    description: "文本",
+    type: "string",
+    default: "按钮"
+  },
+  icon: {
+    description: "图标",
+    type: "string",
+    default: ""
+  },
+  disabled: {
+    description: "禁用",
+    type: "boolean",
+    default: !1
+  },
+  onClick: {
+    description: "点击事件",
+    type: "string",
+    default: ""
   }
+}, Pt = [
+  "id",
+  "type",
+  "text"
+], At = {
+  $schema: Ct,
+  $id: Tt,
+  title: wt,
+  description: St,
+  type: Mt,
+  properties: Dt,
+  required: Pt
+}, ve = {
+  /**  组件自定义样式 */
+  customClass: { type: String, default: "" },
+  alignment: { Type: String, default: "right" },
+  items: {
+    Type: Array,
+    default: []
+  }
+}, kt = Object.assign({}, ve, {
+  componentId: { type: String, default: "" }
 });
-E.register = (n, e, t, a) => {
-  n.section = E, e.section = H;
+ee(
+  ve,
+  vt,
+  lt,
+  be
+);
+const Ce = {
+  id: { type: String, default: "" },
+  items: { type: Object, default: {} },
+  class: { type: String, default: "" },
+  text: { type: String, default: "" },
+  disabled: { type: Boolean, default: !1 },
+  icon: { type: String, default: "" },
+  componentId: { type: String, default: "" },
+  alignment: { Type: String, default: "right" }
+};
+ee(
+  Ce,
+  At,
+  dt,
+  be
+);
+class Te {
+  constructor(e) {
+    /** 工具栏项标识 */
+    E(this, "id", "");
+    /** 工具栏项自定义样式 */
+    E(this, "class", "btn-secondary");
+    /** 图标 */
+    E(this, "icon", "");
+    /** 所属分组 */
+    E(this, "groupId", "");
+    /** 收藏顺序 */
+    E(this, "order", -1);
+    /** 是否作为下拉菜单的顶层按钮 */
+    E(this, "asDropDownTop", !1);
+    /** 文本 */
+    E(this, "text", "");
+    /** 是否可见 */
+    E(this, "visible", !0);
+    E(this, "responsed", !1);
+    /** 是否启用提示消息 */
+    E(this, "tipsEnable", !1);
+    /** 提示消息内容 */
+    E(this, "tipsText", "");
+    /** 记录宽度 */
+    E(this, "width", 0);
+    E(this, "onClick", () => {
+    });
+    E(this, "options");
+    this.options = e;
+    const t = [
+      "id",
+      "class",
+      "icon",
+      "groupId",
+      "order",
+      "asDropDownTop",
+      "text",
+      "isDP",
+      "visible",
+      "responsed",
+      "width",
+      "tipsEnable",
+      "tipsText",
+      "onClick"
+    ];
+    Object.keys(e).filter((s) => t.indexOf(s) > -1).forEach((s) => {
+      this[s] = e[s];
+    });
+  }
+  /** 是否可用 */
+  get enable() {
+    return Object.keys(this.options).indexOf("disabled") > -1 ? !this.options.disabled : A(() => !0);
+  }
+  /** 设置宽度 */
+  setWidth(e) {
+    this.width = parseInt(e, 10);
+  }
+  /** 获取宽度 */
+  getWidth() {
+    return this.visible ? this.width : !1;
+  }
+}
+class Et extends Te {
+  constructor(e) {
+    super(e);
+  }
+}
+function xt() {
+  function n(e) {
+    const t = [];
+    return e.reduce((s, r) => (r.children && r.children.length > 0 ? s.push(new K(r)) : s.push(new Et(r)), s), t), t;
+  }
+  return { buildResponseToolbarItems: n };
+}
+const { buildResponseToolbarItems: Bt } = xt();
+class K extends Te {
+  constructor(t) {
+    super(t);
+    E(this, "placement", "");
+    // 下拉位置
+    /** 下拉class */
+    E(this, "dropdownClass", "");
+    /** 下拉菜单class */
+    E(this, "menuClass", "");
+    /** 是否用分开的下拉按钮 */
+    E(this, "split", !1);
+    E(this, "children", []);
+    E(this, "expanded", !1);
+    const s = ["isDP", "class", "dropdownClass", "menuClass", "placement", "split", "expanded"];
+    Object.keys(t).filter((r) => s.indexOf(r) > -1).forEach((r) => {
+      this[r] = t[r];
+    }), t.children && t.children.length && (this.children = Bt(t.children));
+  }
+}
+function It() {
+  function n(t) {
+    const s = {
+      "f-icon": !0
+    };
+    if (t.icon) {
+      const r = t.icon.trim().split(" ");
+      r && r.length && r.reduce((a, i) => (a[i] = !0, a), s);
+    }
+    return s;
+  }
+  function e(t) {
+    return !!(t.icon && t.icon.trim());
+  }
+  return { iconClass: n, shouldShowIcon: e };
+}
+function Rt(n, e) {
+  const t = N("design-item-context"), s = N("toolbar-item-handler", () => {
+  });
+  function r() {
+    s && s();
+  }
+  function a(l) {
+    const o = {
+      "dropdown-menu": !0
+    };
+    if (l.class) {
+      const c = l.menuClass.split(" ");
+      c && c.length && c.reduce((d, T) => (d[T] = !0, d), o);
+    }
+    return o;
+  }
+  function i(l) {
+    const o = {
+      disabled: !l.enable,
+      "dropdown-submenu": !0,
+      "f-rt-dropdown": !0
+    }, c = l.dropdownClass.split(" ");
+    return c && c.length && c.reduce((d, T) => (d[T] = !0, d), o), o;
+  }
+  function g(l) {
+    const o = {
+      disabled: !l.enable,
+      "dropdown-item": !0,
+      "f-rt-btn": !0,
+      "position-relative": !0,
+      "farris-component": !0
+    }, c = l.class.split(" ");
+    return c && c.length && c.reduce((d, T) => (d[T] = !0, d), o), o;
+  }
+  let f;
+  const u = /* @__PURE__ */ new Map();
+  function h(l, o, c) {
+    var T;
+    ((T = l.target) == null ? void 0 : T.id) === o.id && l.stopPropagation();
+    const d = c ? c.id : "__top_item__";
+    if (o.children && o.children.length && (o.expanded = !o.expanded, o.expanded ? u.set(d, o) : u.delete(d)), u.has(d) && u.get(d) !== o) {
+      const P = u.get(d);
+      P && (P.expanded = !1);
+    }
+  }
+  function p(l) {
+    l && (l.stopPropagation(), l.preventDefault());
+  }
+  function b() {
+    Array.from(document.getElementsByClassName("dgComponentFocused")).forEach((o) => o.classList.remove("dgComponentFocused"));
+    const l = document.getElementsByClassName("dgComponentSelected");
+    Array.from(l).forEach((o) => o.classList.remove("dgComponentSelected"));
+  }
+  function y(l) {
+    l.currentTarget.classList.add("dgComponentFocused", "dgComponentSelected");
+  }
+  function M(l) {
+    const {
+      buttons: o = []
+    } = t.schema;
+    let c = [];
+    o.forEach((P) => {
+      c = c.concat(P.children || []);
+    });
+    const d = c.findIndex((P) => P.id === l), T = d === -1 ? null : c[d];
+    return {
+      index: d,
+      item: T
+    };
+  }
+  function k(l) {
+    const {
+      buttons: o = []
+    } = t.schema, c = o.findIndex((T) => T.id === l), d = c === -1 ? null : o[c];
+    return {
+      index: c,
+      item: d
+    };
+  }
+  function I(l) {
+    var d;
+    t.schema;
+    const {
+      index: o,
+      item: c
+    } = M(l);
+    (d = t == null ? void 0 : t.setupContext) == null || d.emit("selectionChange", c == null ? void 0 : c.type, c);
+  }
+  const R = function(l) {
+    const {
+      componentType: o
+    } = l, c = J(o, l), d = o.toLowerCase().replace("-", "_");
+    return c && !c.id && c.type === o && (c.id = `${d}_${Math.random().toString().slice(2, 6)}`), c;
+  }, L = function() {
+    const l = {
+      componentType: "response-toolbar-item",
+      parentComponentInstance: e.value,
+      targetPosition: -1
+    };
+    return R(l);
+  };
+  function x(l, o) {
+    p(l), b(), y(l), I(o.id);
+  }
+  function B(l, o, c) {
+    p(l);
+    const d = o.id, T = c && c.id, {
+      buttons: P = []
+    } = t.schema;
+    if (!T)
+      return;
+    const {
+      index: j
+    } = k(T);
+    if (j === -1)
+      return;
+    const {
+      index: _
+    } = M(d);
+    _ !== -1 && (P[j].children.splice(_, 1), r());
+  }
+  function v(l, o, c) {
+    p(l);
+    const d = c && c.id, {
+      buttons: T = []
+    } = t.schema;
+    if (!d)
+      return;
+    const {
+      index: P
+    } = k(d);
+    if (P === -1)
+      return;
+    const j = L(), _ = Object.assign({}, j, {
+      text: o.text
+    });
+    T[P].children.push(_), r();
+  }
+  function S(l, o, c) {
+    p(l);
+    const d = c && c.id, {
+      buttons: T = []
+    } = t.schema;
+    if (!d)
+      return;
+    const {
+      index: P
+    } = k(d);
+    if (P === -1)
+      return;
+    const j = L(), _ = Object.assign({}, j, {
+      text: "按钮"
+    });
+    T[P].children.push(_), r();
+  }
+  function D(l, o) {
+    return m("div", {
+      class: "component-btn-group"
+    }, [m("div", null, [m("div", {
+      role: "button",
+      class: "btn component-settings-button",
+      title: "删除",
+      ref: "removeButton",
+      style: "position:static;",
+      onClick: (c) => B(c, l, o)
+    }, [m("i", {
+      class: "f-icon f-icon-yxs_delete"
+    }, null)]), m("div", {
+      role: "button",
+      class: "btn component-settings-button",
+      title: "复制",
+      ref: "copyButton",
+      style: "position:static;",
+      onClick: (c) => v(c, l, o)
+    }, [m("i", {
+      class: "f-icon f-icon-yxs_copy"
+    }, null)]), m("div", {
+      role: "button",
+      class: "btn component-settings-button",
+      title: "新增同级",
+      ref: "appendSame",
+      style: "width:85px!important;padding:0 5px;position:static;",
+      onClick: (c) => S(c, l, o)
+    }, [m("i", {
+      class: "f-icon f-icon-plus-circle text-white mr-1"
+    }, null), m("span", {
+      style: "font-size:13px;margin:auto"
+    }, [le("新增同级")])])])]);
+  }
+  function $(l) {
+    return l.children.map((o) => o.children && o.children.length ? m("li", {
+      class: i(o),
+      id: o.id,
+      onClick: (c) => o.enable && h(c, o, l)
+    }, [m("span", {
+      id: o.id,
+      class: g(o),
+      onMouseover: (c) => o.enable && h(c, o, l)
+    }, [o.text, m("i", {
+      class: "f-icon f-icon-arrow-chevron-right",
+      style: "display: inline-block;float: right;line-height: 1.25rem;"
+    }, null)]), f(o, o)]) : m("li", {
+      class: g(o),
+      id: o.id,
+      onClick: (c) => x(c, o)
+    }, [D(o, l), n.shouldShowIcon(o) && m("i", {
+      class: n.iconClass(o)
+    }, null), o.text]));
+  }
+  function V(l, o, c) {
+    const d = {
+      display: l.expanded ? "block" : "none",
+      position: "fixed",
+      maxWidth: "300px",
+      width: "auto",
+      minWidth: "120px"
+    }, T = document.getElementsByTagName("body")[0].getClientRects()[0].width, P = o, j = P == null ? void 0 : P.getClientRects();
+    if (P && j && j.length) {
+      const {
+        top: _,
+        width: G,
+        left: z,
+        right: F,
+        height: O
+      } = j[0], U = Math.ceil(O + _);
+      d.top = `${U}px`, d.left = `${z}px`;
+      const Q = l.id + "_menu", te = o ? o.querySelector("#" + Q) : null;
+      if (te) {
+        d.display === "block" && (te.style.display = "block");
+        const ie = te.getBoundingClientRect();
+        if (c) {
+          d.top = `${_ - 6}px`;
+          const Me = Math.ceil(G + z);
+          d.left = `${Me}px`;
+        }
+        T - z - G < ie.width && (d.left = `${(c ? z : F) - ie.width}px`);
+      }
+    }
+    return d;
+  }
+  f = function(l, o) {
+    var P, j;
+    const c = Ae(), d = o ? o.id : l.id, T = (j = (P = c == null ? void 0 : c.exposed) == null ? void 0 : P.elementRef.value) == null ? void 0 : j.querySelector("#" + d);
+    return m("ul", {
+      class: a(l),
+      style: V(l, T, o),
+      id: l.id + "_menu"
+    }, [$(l)]);
+  };
+  function C() {
+    u.forEach((l) => {
+      l.expanded = !1;
+    }), u.clear();
+  }
+  return {
+    renderDropdownMenu: f,
+    clearAllDropDownMenu: C
+  };
+}
+function $t(n, e, t) {
+  const s = w(n.alignment), {
+    renderDropdownMenu: r,
+    clearAllDropDownMenu: a
+  } = Rt(e, t), i = N("design-item-context"), g = N("toolbar-item-handler", () => {
+  });
+  function f() {
+    g && g();
+  }
+  function u(C) {
+    const l = {
+      "btn-group": !0,
+      "f-rt-dropdown": !0,
+      "f-btn-ml": s.value === "right",
+      "f-btn-mr": s.value === "left"
+    }, o = C.dropdownClass.split(" ");
+    return o && o.length && o.reduce((c, d) => (c[d] = !0, c), l), l;
+  }
+  function h(C) {
+    const l = {
+      btn: !0,
+      disabled: !C.enable,
+      "position-relative": !0,
+      "farris-component": !0,
+      "f-rt-btn": !0,
+      "btn-icontext": !!(C.icon && C.icon.trim())
+    };
+    if (C.class) {
+      const o = C.class.split(" ");
+      o && o.length && o.reduce((c, d) => (c[d] = !0, c), l);
+    }
+    return l;
+  }
+  function p(C) {
+    C && (C.stopPropagation(), C.preventDefault());
+  }
+  function b(C, l) {
+    p(C);
+    const o = l.expanded;
+    document.body.click(), l.expanded = !o;
+  }
+  const y = function(C) {
+    const {
+      componentType: l
+    } = C, o = J(l, C), c = l.toLowerCase().replace("-", "_");
+    return o && !o.id && o.type === l && (o.id = `${c}_${Math.random().toString().slice(2, 6)}`), o;
+  }, M = function() {
+    const C = {
+      componentType: "response-toolbar-item",
+      parentComponentInstance: t.value,
+      targetPosition: -1
+    };
+    return y(C);
+  };
+  function k(C) {
+    const l = i.schema.buttons || i.schema.contents, o = l == null ? void 0 : l.findIndex((d) => d.id === C), c = o === -1 ? null : l[o];
+    return {
+      index: o,
+      toolbarItem: c
+    };
+  }
+  function I(C, l) {
+    var j;
+    const {
+      index: o,
+      toolbarItem: c
+    } = k(l);
+    if (o === -1)
+      return;
+    const d = c.text || "按钮", T = M(), P = Object.assign({}, T, {
+      text: d
+    });
+    (j = i.schema.buttons) == null || j.push(P), f();
+  }
+  function R(C, l) {
+    const {
+      index: o,
+      toolbarItem: c
+    } = k(l);
+    if (o === -1)
+      return;
+    const d = c.text || "按钮", T = M(), P = Object.assign({}, T, {
+      text: d
+    }), j = i.schema.buttons[o].children || [];
+    j.push(P), i.schema.buttons[o].children = j, f();
+  }
+  function L(C, l) {
+    const o = i.schema.buttons || i.schema.contents, c = o == null ? void 0 : o.findIndex((d) => d.id === l);
+    c !== -1 && (o.splice(c, 1), f());
+  }
+  function x(C) {
+    return m("div", {
+      class: "component-btn-group"
+    }, [m("div", null, [m("div", {
+      role: "button",
+      class: "btn component-settings-button",
+      title: "删除",
+      ref: "removeButton",
+      style: "position:static;",
+      onClick: (l) => L(l, C)
+    }, [m("i", {
+      class: "f-icon f-icon-yxs_delete"
+    }, null)]), m("div", {
+      role: "button",
+      class: "btn component-settings-button",
+      title: "复制",
+      ref: "copyButton",
+      style: "position:static;",
+      onClick: (l) => I(l, C)
+    }, [m("i", {
+      class: "f-icon f-icon-yxs_copy"
+    }, null)]), m("div", {
+      role: "button",
+      class: "btn component-settings-button",
+      title: "新增子级",
+      ref: "appendChildButton",
+      style: "width:85px!important;padding:0 5px;position:static;",
+      onClick: (l) => R(l, C)
+    }, [m("i", {
+      class: "f-icon f-icon-plus-circle text-white mr-1"
+    }, null), m("span", {
+      style: "font-size:13px;margin:auto"
+    }, [le("新增子级")])])])]);
+  }
+  function B() {
+    Array.from(document.getElementsByClassName("dgComponentFocused")).forEach((l) => l.classList.remove("dgComponentFocused"));
+    const C = document.getElementsByClassName("dgComponentSelected");
+    Array.from(C).forEach((l) => l.classList.remove("dgComponentSelected"));
+  }
+  function v(C) {
+    C.currentTarget.classList.add("dgComponentFocused", "dgComponentSelected");
+  }
+  function S(C) {
+    var d;
+    const l = i.schema.buttons || i.schema.contents, o = l == null ? void 0 : l.findIndex((T) => T.id === C);
+    if (o === -1)
+      return;
+    const c = l[o];
+    (d = i == null ? void 0 : i.setupContext) == null || d.emit("selectionChange", "response-toolbar-item", c);
+  }
+  function D(C, l) {
+    p(C), B(), v(C), p(C), b(C, l), S(l.id);
+  }
+  function $(C) {
+    return m("div", {
+      id: C.id,
+      class: u(C)
+    }, [m("div", {
+      class: h(C),
+      style: "display: flex;padding-right: 0.1rem;",
+      onClick: (l) => C.enable && D(l, C)
+    }, [x(C.id), e.shouldShowIcon(C) && m("i", {
+      class: e.iconClass(C)
+    }, null), m("span", null, [C.text]), m("i", {
+      class: "f-icon f-icon-arrow-chevron-down",
+      style: "display: inline-block;float: right;line-height: 1.25rem;margin-left: .25rem;margin-right: .25rem;"
+    }, null)]), r(C)]);
+  }
+  function V() {
+    a();
+  }
+  return {
+    renderToolbarDropdown: $,
+    clearAllDropDown: V
+  };
+}
+class re {
+  constructor(e, t) {
+    E(this, "componentId");
+    E(this, "viewModelId");
+    E(this, "eventsEditorUtils");
+    E(this, "formSchemaUtils");
+    E(this, "formMetadataConverter");
+    E(this, "designViewModelUtils");
+    E(this, "designViewModelField");
+    E(this, "controlCreatorUtils");
+    E(this, "designerHostService");
+    E(this, "schemaService", null);
+    E(this, "metadataService", null);
+    E(this, "propertyConfig", {
+      type: "object",
+      categories: {}
+    });
+    var s;
+    this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((s = this.formSchemaUtils) == null ? void 0 : s.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService;
+  }
+  getTableInfo() {
+    var e;
+    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
+  }
+  setDesignViewModelField(e) {
+    var s;
+    const t = e.binding && e.binding.type === "Form" && e.binding.field;
+    if (t) {
+      if (!this.designViewModelField) {
+        const r = this.designViewModelUtils.getDgViewModel(this.viewModelId);
+        this.designViewModelField = r.fields.find((a) => a.id === t);
+      }
+      e.updateOn = (s = this.designViewModelField) == null ? void 0 : s.updateOn;
+    }
+  }
+  changeFieldEditorType(e, t) {
+  }
+  getBasicPropConfig(e) {
+    return {
+      description: "Basic Information",
+      title: "基本信息",
+      properties: {
+        id: {
+          description: "组件标识",
+          title: "标识",
+          type: "string",
+          readonly: !0
+        },
+        type: {
+          description: "组件类型",
+          title: "控件类型",
+          type: "select",
+          editor: {
+            type: "combo-list",
+            textField: "name",
+            valueField: "value",
+            data: [{ value: e.type, name: q[e.type].name }]
+          }
+        }
+      }
+    };
+  }
+  getAppearanceConfig(e = null) {
+    return {
+      title: "样式",
+      description: "Appearance",
+      properties: {
+        class: {
+          title: "class样式",
+          type: "string",
+          description: "组件的CSS样式",
+          $converter: "/converter/appearance.converter"
+        },
+        style: {
+          title: "style样式",
+          type: "string",
+          description: "组件的样式",
+          $converter: "/converter/appearance.converter"
+        }
+      }
+    };
+  }
+  /**
+  * 
+  * @param propertyId 
+  * @param componentInstance 
+  * @returns 
+  */
+  updateElementByParentContainer(e, t) {
+    const s = t && t.parent && t.parent.schema;
+    if (!s)
+      return;
+    const r = s.contents.findIndex((i) => i.id === e), a = ue(s.contents[r]);
+    s.contents.splice(r, 1), s.contents.splice(r, 0, a);
+  }
+}
+class jt extends re {
+  constructor(e, t) {
+    super(e, t);
+  }
+  getPropertyConfig(e) {
+    return this.getBasicPropConfig(e), this.getAppearancePropConfig(e), this.getBehaviorProperties(e), this.propertyConfig;
+  }
+  getAppearancePropConfig(e) {
+    this.propertyConfig.categories.appearance = {
+      title: "样式",
+      description: "Appearance",
+      properties: {
+        class: {
+          title: "class样式",
+          type: "string",
+          description: "组件的CSS样式",
+          $converter: "/converter/appearance.converter"
+        }
+      }
+    };
+  }
+  getBasicPropConfig(e) {
+    this.propertyConfig.categories.basic = {
+      description: "Basic Infomation",
+      title: "基本信息",
+      properties: {
+        id: {
+          description: "组件标识",
+          title: "标识",
+          type: "string",
+          readonly: !0
+        },
+        type: {
+          title: "类型",
+          type: "enum",
+          description: "The type of a component.",
+          editor: {
+            type: "combo-list",
+            textField: "value",
+            valueField: "key",
+            data: [{ key: "response-toolbar", value: q["response-toolbar"].name }]
+          }
+        }
+      }
+    };
+  }
+  getBehaviorProperties(e) {
+    this.propertyConfig.categories.behavior = {
+      title: "行为",
+      description: "",
+      properties: {
+        alignment: {
+          title: "对齐方式",
+          description: "The alignment of Response Toolbar Button.",
+          type: "enum",
+          editor: {
+            type: "combo-list",
+            textField: "name",
+            valueField: "value",
+            data: [
+              {
+                value: "right",
+                name: "右对齐"
+              },
+              {
+                value: "left",
+                name: "左对齐"
+              }
+            ]
+          }
+        },
+        items: {
+          title: "按钮",
+          description: "The items of Response Toolbar.",
+          type: "array",
+          default: [],
+          $converter: "/converter/buttons.converter",
+          refreshPanelAfterChanged: !0
+        }
+      }
+    };
+  }
+}
+function Lt(n, e) {
+  const t = n.schema;
+  function s(h) {
+    return !1;
+  }
+  function r(h, p) {
+    return p.text = h.label, p;
+  }
+  function a() {
+    return !1;
+  }
+  function i() {
+    return !1;
+  }
+  function g() {
+    return !0;
+  }
+  function f() {
+    return !0;
+  }
+  function u(h) {
+    return new jt(h, e).getPropertyConfig(t);
+  }
+  return {
+    canAccepts: s,
+    checkCanAddComponent: g,
+    checkCanDeleteComponent: i,
+    checkCanMoveComponent: a,
+    hideNestedPaddingInDesginerView: f,
+    onResolveNewComponentSchema: r,
+    getPropsConfig: u
+  };
+}
+const Ft = {
+  id: { type: String, default: "" },
+  componentId: { type: String, default: "" },
+  canAdd: { type: Boolean, default: !1 },
+  canDelete: { type: Boolean, default: !1 },
+  canMove: { type: Boolean, default: !1 },
+  contentKey: { type: String, default: "contents" },
+  childLabel: { type: String, default: "" },
+  childType: { type: String, default: "" },
+  /**
+   * 组件值
+   */
+  modelValue: { type: Object }
+}, ce = w(0);
+function Ot(n, e) {
+  const t = e.getBoundingClientRect(), s = n.getBoundingClientRect(), r = s.top >= t.top, a = s.top <= t.bottom;
+  return r && a;
+}
+function Nt(n) {
+  if (!n)
+    return;
+  let e;
+  if (n.className.includes("dgComponentSelected") ? e = n : e = n.querySelector(".dgComponentSelected"), !e)
+    return;
+  const t = e.getBoundingClientRect();
+  if (t.width === 0 && t.height === 0)
+    return;
+  const s = e.querySelector(".component-btn-group");
+  if (s) {
+    if (!Ot(e, n)) {
+      s.style.display = "none";
+      return;
+    }
+    s.style.display = "";
+    const a = s.getBoundingClientRect(), i = s.querySelector("div");
+    if (i) {
+      const g = i.getBoundingClientRect();
+      i.style.top = a.top + "px", i.style.left = a.left - g.width + "px";
+    }
+  }
+}
+function Vt(n, e, t) {
+  var B;
+  const s = "", r = w();
+  function a() {
+    return !0;
+  }
+  function i() {
+    return !1;
+  }
+  function g() {
+    return !0;
+  }
+  function f() {
+    return !0;
+  }
+  function u() {
+    return !0;
+  }
+  function h(v) {
+    if (!v || !v.value)
+      return null;
+    const S = w(v == null ? void 0 : v.value.parent), D = h(S);
+    return D || null;
+  }
+  function p(v = e) {
+    const { componentInstance: S, designerItemElementRef: D } = v;
+    return !S || !S.value ? null : S.value.canMove || S.value.canAdd || S.value.canDelete ? D : p(v.parent);
+  }
+  function b(v) {
+    return !!t;
+  }
+  function y() {
+    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 k(v, S) {
+  }
+  function I(v) {
+    const { componentType: S } = v, D = N("designer-host-service");
+    let $ = J(S, v, D);
+    const V = S.toLowerCase().replace(/-/g, "_");
+    return $ && !$.id && $.type === S && ($.id = `${V}_${Math.random().toString().slice(2, 6)}`), $;
+  }
+  function R(v) {
+  }
+  function L(...v) {
+    return [];
+  }
+  function x() {
+  }
+  return r.value = {
+    canMove: a(),
+    canSelectParent: i(),
+    canAdd: f(),
+    canDelete: g(),
+    canNested: !u(),
+    contents: [],
+    elementRef: n,
+    parent: (B = e.parent) == null ? void 0 : B.componentInstance,
+    schema: e.schema,
+    styles: s,
+    canAccepts: b,
+    getBelongedComponentInstance: h,
+    getDraggableDesignItemElement: p,
+    getDraggingDisplayText: y,
+    getPropConfig: L,
+    getDragScopeElement: M,
+    onAcceptMovedChildElement: k,
+    onChildElementMovedOut: R,
+    addNewChildComponentSchema: I,
+    onRemoveComponent: x,
+    triggerBelongedComponentToMoveWhenMoved: w(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: w(!1)
+  }, r;
+}
+const we = /* @__PURE__ */ Z({
+  name: "FDesignerInnerItem",
+  props: Ft,
+  emits: ["selectionChange", "addComponent", "removeComponent"],
+  setup(n, e) {
+    const t = w(n.canMove), s = w(n.canAdd), r = w(n.canDelete), a = w(!1), i = w(n.contentKey), g = w(n.childType), f = w(n.childLabel), u = w(n.modelValue), h = w(""), p = w(), b = N("canvas-dragula"), y = w(), M = N("design-item-context"), k = {
+      designerItemElementRef: p,
+      componentInstance: y,
+      schema: u.value,
+      parent: M,
+      setupContext: e
+    };
+    ke("design-item-context", k);
+    const I = A(() => ({
+      "farris-component": !0,
+      // 受position-relative影响，整个容器的高度不能被撑起
+      "flex-fill": n.id === "root-component",
+      "position-relative": t.value || r.value,
+      "farris-nested": a.value,
+      "can-move": t.value,
+      "d-none": p.value && p.value.classList.contains("d-none")
+    })), R = A(() => {
+      const o = {};
+      return h.value && h.value.split(";").reduce((c, d) => {
+        const [T, P] = d.split(":");
+        return T && (c[T] = P), c;
+      }, o), o;
+    });
+    function L(o, c) {
+      if (M && M.schema[i.value]) {
+        const d = M.schema[i.value].findIndex((T) => T.id === c.id);
+        if (d > -1) {
+          const T = M.schema[i.value].length, P = M.schema[i.value][d % T];
+          M.designerItemElementRef.value.querySelector(`#${P.id}-design-item`), M.schema[i.value].splice(d, 1), ce.value++, e.emit("removeComponent");
+        }
+      }
+    }
+    function x(o) {
+      if (y.value.addNewChildComponentSchema) {
+        const c = {
+          componentType: g.value,
+          label: f.value,
+          parentComponentInstance: y.value,
+          targetPosition: -1
+        }, d = y.value.addNewChildComponentSchema(c);
+        u.value[i.value].push(d), e.emit("addComponent");
+      }
+    }
+    function B() {
+      return s.value && m("div", {
+        role: "button",
+        class: "btn component-settings-button",
+        title: "新增",
+        ref: "removeComponent",
+        onClick: (o) => {
+          x();
+        }
+      }, [m("i", {
+        class: "f-icon f-icon-plus-circle"
+      }, null)]);
+    }
+    function v(o) {
+      return r.value && m("div", {
+        role: "button",
+        class: "btn component-settings-button",
+        title: "删除",
+        ref: "removeComponent",
+        onClick: xe((c) => L(c, o), ["stop"])
+      }, [m("i", {
+        class: "f-icon f-icon-yxs_delete"
+      }, null)]);
+    }
+    function S() {
+      return t.value && m("div", {
+        role: "button",
+        class: "btn component-settings-button",
+        title: "移动",
+        ref: "moveComponent"
+      }, [m("i", {
+        "data-dragging-icon": "true",
+        class: "cmp_move f-icon f-icon-yxs_move"
+      }, null)]);
+    }
+    function D(o) {
+      return m("div", {
+        class: "component-btn-group",
+        "data-noattach": "true"
+      }, [m("div", null, [B(), S(), v(o)])]);
+    }
+    X(() => n.modelValue, (o) => {
+      u.value = o, k.schema = o;
+    });
+    function $(o) {
+      const c = o.target;
+      Nt(c);
+    }
+    function V() {
+      var o, c;
+      (c = (o = u.value) == null ? void 0 : o.contents) != null && c.length && p.value && p.value.addEventListener("scroll", $);
+    }
+    function C() {
+      const o = p.value, c = w(o.children[1]);
+      return Vt(c, k).value;
+    }
+    W(() => {
+      if (p.value) {
+        const o = p.value.querySelector(`[data-dragref='${u.value.id}-container']`);
+        y.value = o && o.componentInstance ? o.componentInstance.value : C(), b && o && b.attachComponents(o, u.value), a.value = y.value.canNested !== void 0 ? y.value.canNested : a.value, s.value = y.value.canAdd !== void 0 ? y.value.canAdd : s.value, r.value = y.value.canDelete !== void 0 ? y.value.canDelete : r.value, t.value = y.value.canMove !== void 0 ? y.value.canMove : t.value, h.value = y.value.styles || "", p.value && (p.value.componentInstance = y, p.value.designItemContext = k);
+      }
+      V(), ce.value++;
+    }), Ee(() => {
+      p.value && p.value.removeEventListener("scroll", $);
+    });
+    function l(o) {
+      Array.from(document.getElementsByClassName("dgComponentFocused")).forEach((T) => T.classList.remove("dgComponentFocused")), o && (o.preventDefault(), o.stopPropagation());
+      let c = k.designerItemElementRef;
+      const d = p.value;
+      if (d) {
+        const T = document.getElementsByClassName("dgComponentSelected");
+        T && T.length === 1 && T[0] === p.value || (Array.from(T).forEach((j) => j.classList.remove("dgComponentSelected")), d.classList.add("dgComponentFocused"), e.emit("selectionChange", u.value.type, u.value, n.componentId, y.value), c = y.value.getDraggableDesignItemElement(k), c && c.value && c.value.classList.add("dgComponentSelected"));
+      }
+      $({
+        target: c == null ? void 0 : c.value
+      });
+    }
+    return () => m("div", {
+      id: `${n.id}-design-item`,
+      ref: p,
+      class: I.value,
+      style: R.value,
+      onClick: l
+    }, [D(u.value), e.slots.default && e.slots.default()]);
+  }
+});
+class _t extends re {
+  constructor(e, t) {
+    super(e, t);
+  }
+  getPropertyConfig(e) {
+    return this.getBasicPropConfig(e), this.getAppearanceProperties(e), this.getEventPropConfig(e), this.propertyConfig;
+  }
+  getBasicPropConfig(e) {
+    this.propertyConfig.categories.basic = {
+      description: "Basic Information",
+      title: "基本信息",
+      properties: {
+        id: {
+          description: "组件标识00",
+          title: "标识",
+          type: "string",
+          readonly: !0
+        },
+        type: {
+          description: "类型",
+          title: "类型",
+          type: "string",
+          readonly: !0,
+          $converter: "/converter/type.converter"
+        },
+        text: {
+          title: "文本",
+          type: "string",
+          description: ""
+        },
+        icon: {
+          title: "图标",
+          type: "string",
+          description: ""
+        }
+      }
+    };
+  }
+  getAppearanceProperties(e) {
+    this.propertyConfig.categories.appearance = {
+      title: "外观",
+      properties: {
+        class: {
+          description: "组件的CSS样式",
+          title: "class样式"
+        },
+        style: {
+          description: "组件的内容样式",
+          title: "style样式"
+        }
+      },
+      setPropertyRelates(t, s) {
+      }
+    };
+  }
+  getEventPropConfig(e) {
+    const t = [
+      {
+        label: "onClick",
+        name: "点击事件"
+      }
+    ], s = this, r = s.eventsEditorUtils.formProperties(e, s.viewModelId, t), a = {};
+    a[s.viewModelId] = {
+      type: "events-editor",
+      editor: {
+        initialData: r
+      }
+    }, this.propertyConfig.categories.eventsEditor = {
+      title: "事件",
+      hideTitle: !0,
+      properties: a,
+      // 这个属性，标记当属性变更得时候触发重新更新属性
+      refreshPanelAfterChanged: !0,
+      tabId: "commands",
+      tabName: "交互",
+      setPropertyRelates(i, g) {
+        const f = i.propertyValue;
+        delete e[s.viewModelId], f && (f.setPropertyRelates = this.setPropertyRelates, s.eventsEditorUtils.saveRelatedParameters(e, s.viewModelId, f.events, f));
+      }
+    };
+  }
+}
+class qt extends re {
+  constructor(e, t) {
+    super(e, t);
+  }
+  getPropertyConfig(e) {
+    return this.getBasicPropConfig(), this.getAppearanceProperties(e), this.getbBehaviorConfig(), this.getEventPropConfig(e), this.propertyConfig;
+  }
+  getBasicPropConfig() {
+    this.propertyConfig.categories.basic = {
+      title: "基本信息",
+      description: "Basic Infomation",
+      properties: {
+        id: {
+          title: "标识",
+          type: "string",
+          description: "The identifier of a component.",
+          readonly: !0
+        },
+        type: {
+          title: "类型",
+          type: "enum",
+          description: "The type of a component.",
+          editor: {
+            type: "combo-list",
+            textField: "value",
+            valueField: "key",
+            data: [{ key: "response-toolbar-item", value: q["response-toolbar-item"].name }]
+          }
+        },
+        text: {
+          title: "文本",
+          type: "string",
+          description: "",
+          refreshPanelAfterChanged: !0
+        },
+        icon: {
+          title: "图标",
+          type: "string",
+          description: ""
+        }
+      }
+    };
+  }
+  getbBehaviorConfig() {
+    this.propertyConfig.categories.behavior = {
+      title: "行为",
+      description: "Behavior",
+      properties: {
+        disabled: {
+          title: "禁用",
+          type: "boolean",
+          description: "按钮禁用状态",
+          refreshPanelAfterChanged: !0
+        }
+      }
+    };
+  }
+  getAppearanceProperties(e) {
+    this.propertyConfig.categories.appearance = {
+      title: "样式",
+      description: "Appearance",
+      properties: {
+        class: {
+          title: "class样式",
+          type: "string",
+          description: "",
+          $converter: "/converter/appearance.converter"
+        }
+      }
+    };
+  }
+  getEventPropConfig(e) {
+    const t = [
+      {
+        label: "onClick",
+        name: "点击事件"
+      }
+    ], s = this, r = s.eventsEditorUtils.formProperties(e, s.viewModelId, t), a = {};
+    a[s.viewModelId] = {
+      type: "events-editor",
+      editor: {
+        initialData: r
+      }
+    }, this.propertyConfig.categories.eventsEditor = {
+      title: "事件",
+      hideTitle: !0,
+      properties: a,
+      // 这个属性，标记当属性变更得时候触发重新更新属性
+      refreshPanelAfterChanged: !0,
+      tabId: "commands",
+      tabName: "交互",
+      setPropertyRelates(i, g) {
+        const f = i.propertyValue;
+        delete e[s.viewModelId], f && (f.setPropertyRelates = this.setPropertyRelates, s.eventsEditorUtils.saveRelatedParameters(e, s.viewModelId, f.events, f));
+      }
+    };
+  }
+}
+function zt(n, e) {
+  function t(g) {
+    return !1;
+  }
+  function s() {
+    return !1;
+  }
+  function r() {
+    return !0;
+  }
+  function a() {
+    return !1;
+  }
+  function i(g) {
+    let f;
+    switch (n.schema.type) {
+      case "tab-toolbar-item":
+        f = new _t(g, e);
+        break;
+      default:
+        f = new qt(g, e);
+    }
+    return f.getPropertyConfig(n.schema);
+  }
+  return {
+    canAccepts: t,
+    checkCanMoveComponent: s,
+    checkCanDeleteComponent: r,
+    checkCanAddComponent: a,
+    getPropsConfig: i
+  };
+}
+const Ut = /* @__PURE__ */ Z({
+  name: "FResponseToolbarItemDesign",
+  props: Ce,
+  emits: ["Click"],
+  setup(n, e) {
+    w(), w();
+    const t = w(n.alignment), s = {
+      id: "__more_buttons__",
+      text: "More"
+    }, r = w(new K(s));
+    A(() => r.value.children.length > 0);
+    const a = w(), i = N("designer-host-service"), g = N("design-item-context"), f = zt(g, i), u = de(a, g, f);
+    N("toolbar-item-handler", () => {
+    }), W(() => {
+      a.value.componentInstance = u;
+    }), e.expose(u.value);
+    function h() {
+      const y = {
+        "f-icon": !0
+      }, M = n.icon ? n.icon.trim() : "";
+      return ne(y, M);
+    }
+    function p() {
+      return !!(n.icon && n.icon.trim());
+    }
+    function b() {
+      const y = {
+        btn: !0,
+        "f-rt-btn": !0,
+        "f-btn-ml": t.value === "right",
+        "f-btn-mr": t.value === "left",
+        "btn-icontext": !!(n.icon && n.icon.trim()),
+        disabled: n.disabled === !0
+      };
+      return ne(y, n.class);
+    }
+    return () => m("div", {
+      ref: a,
+      "data-dragref": `${g.schema.id}-container`,
+      class: "farris-component position-relative",
+      style: "display:inline-block!important;"
+    }, [m("button", {
+      type: "button",
+      class: b(),
+      id: n.id
+    }, [p() && m("i", {
+      class: h()
+    }, null), n.text])]);
+  }
+}), Ht = /* @__PURE__ */ Z({
+  name: "FResponseToolbarDesign",
+  props: kt,
+  emits: ["Click"],
+  setup(n, e) {
+    const t = w(n.items);
+    let s = new Array(t.value.length).fill(w());
+    const r = w(), a = w(), i = w(n.alignment), g = {
+      id: "__more_buttons__",
+      text: "More"
+    }, f = w(new K(g)), u = It();
+    A(() => f.value.children.length > 0);
+    const h = w(), p = N("designer-host-service"), b = N("design-item-context"), y = Lt(b, p), M = de(h, b, y), k = N("toolbar-item-handler", () => {
+    });
+    W(() => {
+      h.value.componentInstance = M;
+    }), e.expose(M.value);
+    function I() {
+      k && k();
+    }
+    const R = A(() => ne({
+      "f-toolbar": !0,
+      "f-response-toolbar": !0,
+      "position-relative": !0
+    }, n.customClass)), L = A(() => ({
+      "d-flex": !0,
+      "flex-nowrap": !0,
+      "justify-content-end": i.value === "right",
+      "justify-content-start": i.value === "left"
+    })), {
+      renderToolbarDropdown: x,
+      clearAllDropDown: B
+    } = $t(n, u, M);
+    function v() {
+      t.value.filter((o) => o.children && o.children.length > 0).forEach((o) => {
+        o.expanded = !1;
+      }), f.value.expanded = !1, B();
+    }
+    const S = /* @__PURE__ */ new Map(), D = [];
+    function $(o) {
+      const c = a.value;
+      let d = o;
+      const T = Array.from(c.children), P = T[T.length - 1].id === "__more_buttons__" ? T[T.length - 1] : null;
+      if (P) {
+        const F = P.computedStyleMap().get("margin-left"), O = P.computedStyleMap().get("margin-right"), U = (F ? F.value : 0) + P.getBoundingClientRect().width + (O ? O.value : 0);
+        d -= U;
+      }
+      const j = T.filter((F) => F.id !== "__more_buttons__");
+      for (const F of j) {
+        const O = F.computedStyleMap().get("margin-left"), U = F.computedStyleMap().get("margin-right"), Q = (O ? O.value : 0) + F.getBoundingClientRect().width + (U ? U.value : 0);
+        d < Q ? (S.set(F.id, !0), D.push({
+          id: F.id,
+          width: Q
+        })) : d -= Q;
+      }
+      if (D.length)
+        for (let F = D.length - 1; F >= 0; F--) {
+          const O = D[F].width;
+          if (d >= O)
+            d -= O, S.delete(D[F].id), D.pop();
+          else
+            break;
+        }
+      const _ = Object.assign({}, f.value);
+      _.children = [];
+      const G = new K(_), z = t.value.reduce((F, O) => (S.has(O.id) && G.children.push(O), O.visible = !S.has(O.id), F.push(O), F), []);
+      f.value = G, t.value = z;
+    }
+    const V = new ResizeObserver((o) => {
+      if (o.length) {
+        const d = o[0].contentRect.width, P = a.value.getBoundingClientRect().width;
+        (d < P || D.length) && $(d);
+      }
+    });
+    W(() => {
+      const o = r.value;
+      V.observe(o), document.body.addEventListener("click", v);
+    }), Be(() => {
+      V.disconnect(), document.body.removeEventListener("click", v);
+    }), X(() => n.items, () => {
+      t.value = n.items;
+    }, {
+      deep: !0
+    }), X(t, (o) => {
+      s = new Array(t.value.length).fill(w());
+    });
+    function C(o, c, d, T) {
+      b && b.setupContext && b.setupContext.emit("selectionChange", o, c, d, T);
+    }
+    function l() {
+      const o = a.value.querySelector(".dgComponentFocused.dgComponentSelected");
+      o == null || o.classList.remove("dgComponentSelected"), o == null || o.classList.remove("dgComponentFocused"), I();
+    }
+    return () => m("div", {
+      ref: h,
+      "data-dragref": `${b.schema.id}-container`,
+      class: R.value
+    }, [m("div", {
+      ref: r,
+      class: L.value
+    }, [m("div", {
+      ref: a,
+      class: "d-inline-block f-response-content",
+      style: "white-space: nowrap;"
+    }, [t.value.map((o, c) => m(we, {
+      ref: s[c],
+      class: "p-0 display-inline-block",
+      modelValue: o,
+      "onUpdate:modelValue": (d) => o = d,
+      canMove: !0,
+      childType: "response-toolbar-item",
+      childLabel: "按钮",
+      contentKey: "buttons",
+      componentId: n.componentId,
+      id: o.id,
+      style: "padding:0 !important;display:inline-block",
+      onSelectionChange: C,
+      onRemoveComponent: l
+    }, {
+      default: () => {
+        var d;
+        return [m(Ut, {
+          id: o.id,
+          disabled: o.disabled,
+          text: o.text,
+          icon: o.icon,
+          class: ((d = o.appearance) == null ? void 0 : d.class) || "btn-secondary",
+          alignment: n.alignment || "right",
+          componentId: n.componentId
+        }, null)];
+      }
+    }))])])]);
+  }
+});
+function Se(n, e) {
+  const t = A(() => "f-section-toolbar" + (n.buttonPosition === "inHead" ? " f-section-header--toolbar" : " f-section-content--toolbar")), s = w(n.buttons), r = w(e.schema.toolbar), a = e.schema.id, i = `${a}-toolbar`, g = A(() => n.buttonPosition === "inHead" ? "right" : "left");
+  function f(u, h, p, b) {
+    var y;
+    (y = e.setupContext) == null || y.emit("selectionChange", u, h, p, b);
+  }
+  return m(Ie, null, [r.value ? m("div", {
+    class: t.value
+  }, [m("div", {
+    class: "w-100",
+    style: "flex:1"
+  }, [m(we, {
+    modelValue: r.value,
+    "onUpdate:modelValue": (u) => r.value = u,
+    class: "w-100 position-relative",
+    canAdd: !0,
+    childType: "section-toolbar-item",
+    childLabel: "按钮",
+    contentKey: "buttons",
+    id: i,
+    onSelectionChange: f,
+    componentId: a
+  }, {
+    default: () => [m(Ht, {
+      customClass: "d-block",
+      items: s.value,
+      alignment: g.value
+    }, null)]
+  })])]) : ""]);
+}
+function Wt(n, e, t, s, r, a, i) {
+  const g = A(() => n.buttonPosition), {
+    onClickMaxMinIcon: f
+  } = ge(s, r, a), u = A(() => !!n.subTitle), h = A(() => n.enableMaximize), p = A(() => n.enableAccordion !== ""), b = A(() => {
+    const x = {
+      "f-section-header": !0
+    };
+    return e.slots.header && n.headerClass.split(" ").reduce((v, S) => (v[S] = !0, v), x), x;
+  });
+  function y(x) {
+    x.stopPropagation(), n.enableAccordion !== "" && (t.value = !t.value);
+  }
+  function M() {
+    const x = A(() => ({
+      btn: !0,
+      "f-btn-collapse-expand": !0,
+      "f-btn-mx": !0,
+      "f-state-expand": t.value
+    })), B = A(() => ({
+      "f-icon": !0,
+      "f-icon-maximize": !a.value,
+      "f-icon-minimize": a.value
+    }));
+    return m("div", {
+      class: "f-max-accordion"
+    }, [h.value ? m("span", {
+      class: B.value,
+      onClick: f
+    }, null) : "", p.value ? m("button", {
+      class: x.value,
+      onClick: y
+    }, [m("span", null, [t.value ? n.collapseLabel : n.expandLabel])]) : ""]);
+  }
+  function k() {
+    return e.slots.header ? m("div", {
+      class: b.value
+    }, [e.slots.header()]) : "";
+  }
+  function I() {
+    return m("div", {
+      class: "f-title",
+      onClick: y
+    }, [m("h4", {
+      class: "f-title-text"
+    }, [n.mainTitle]), u.value && m("span", null, [n.subTitle])]);
+  }
+  function R() {
+    const x = A(() => {
+      const B = {
+        "f-content": !0
+      };
+      return n.headerContentClass && n.headerContentClass.split(" ").reduce((S, D) => (S[D] = !0, S), B), B;
+    });
+    return e.slots.headerContent ? m("div", {
+      class: x.value
+    }, [e.slots.headerContent()]) : "";
+  }
+  function L() {
+    return m("div", {
+      class: b.value
+    }, [e.slots.headerTitle ? e.slots.headerTitle() : I(), R(), g.value === "inHead" && Se(n, i), (h.value || p.value) && M()]);
+  }
+  return () => n.showHeader && (e.slots.header ? k() : L());
+}
+const Gt = /* @__PURE__ */ Z({
+  name: "FSectionDesign",
+  props: se,
+  emits: [],
+  setup(n, e) {
+    const t = w(), s = w(), r = w(), a = N("designer-host-service"), i = N("design-item-context"), g = at(i, a), f = ct(t, i, g);
+    f.value.styles = "display: inherit;", W(() => {
+      t.value.componentInstance = f;
+    }), e.expose(f.value);
+    const u = w(n.customClass), h = A(() => n.enableAccordion), p = w(n.expandStatus), b = A(() => n.buttonPosition), y = w(!1), M = Wt(n, e, p, s, r, y, i), k = A(() => {
+      const B = {
+        "f-section": !0,
+        "f-section-accordion": h.value === "default",
+        "f-state-collapse": (h.value === "default" || h.value === "custom") && !p.value,
+        "f-section-custom-accordion": h.value === "custom",
+        "f-section-fill": n.fill,
+        "f-section-maximize": y.value,
+        "f-utils-fill": !0,
+        "p-0": !0
+      };
+      return H(B, u.value);
+    }), I = A(() => H({
+      "f-section-content": !0,
+      "drag-container": !0
+    }, n.contentClass)), R = A(() => H({
+      "f-section-extend": !0
+    }, R.value));
+    function L() {
+      return e.slots.extend && m("div", {
+        class: R.value
+      }, [e.slots.extend()]);
+    }
+    function x() {
+      return m("div", {
+        class: I.value,
+        ref: t,
+        "data-dragref": `${i.schema.id}-container`
+      }, [b.value === "inContent" && Se(n, i), e.slots.default && e.slots.default()]);
+    }
+    return () => m("div", {
+      class: k.value,
+      ref: s,
+      style: n.customStyle
+    }, [M(), L(), x()]);
+  }
+}), Qt = "https://json-schema.org/draft/2020-12/schema", Zt = "https://farris-design.gitee.io/section-toolbar-item.schema.json", Jt = "section-toolbar-item", Xt = "A Farris Toolbar Item Component", Yt = "object", Kt = {
+  id: {
+    description: "The unique identifier for a Response Toolbar",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Response Toolbar",
+    type: "string",
+    default: "section-toolbar-item"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  text: {
+    description: "按钮",
+    type: "string",
+    default: "按钮"
+  },
+  icon: {
+    description: "图标",
+    type: "string",
+    default: ""
+  },
+  onClick: {
+    description: "点击事件",
+    type: "string",
+    default: ""
+  }
+}, en = [
+  "id",
+  "type",
+  "text"
+], tn = {
+  $schema: Qt,
+  $id: Zt,
+  title: Jt,
+  description: Xt,
+  type: Yt,
+  properties: Kt,
+  required: en
+}, nn = {
+  text: { type: String, default: "" },
+  icon: { type: String, default: "" }
+}, on = ee(nn, tn);
+Y.register = (n, e, t, s) => {
+  n.section = Y, e.section = he;
 };
-E.registerDesigner = (n, e, t) => {
-  n.section = we, e.section = H;
+Y.registerDesigner = (n, e, t) => {
+  n.section = Gt, e.section = he, e["section-toolbar-item"] = on;
 };
-const Ee = Z(E);
+const pn = $e(Y);
 export {
-  E as Section,
-  Ee as default,
-  H as propsResolver,
-  B as sectionProps
+  Y as Section,
+  pn as default,
+  he as propsResolver,
+  se as sectionProps
 };