@farris/ui-vue 1.2.5 → 1.2.6

package/components/response-toolbar/index.esm.js

@@ -1,8 +1,8 @@
 var Pe = Object.defineProperty;
-var ke = (i, e, n) => e in i ? Pe(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
-var F = (i, e, n) => ke(i, typeof e != "symbol" ? e + "" : e, n);
-import { computed as W, getCurrentInstance as de, createVNode as w, ref as B, defineComponent as Y, onMounted as H, onUnmounted as ne, watch as Q, inject as $, createTextVNode as ue, provide as Re, onBeforeUnmount as Ee, withModifiers as Be } from "vue";
-import { cloneDeep as je } from "lodash-es";
+var ke = (r, e, n) => e in r ? Pe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var F = (r, e, n) => ke(r, typeof e != "symbol" ? e + "" : e, n);
+import { computed as W, getCurrentInstance as de, createVNode as w, ref as j, defineComponent as Y, onMounted as H, onUnmounted as ne, watch as Q, inject as $, createTextVNode as ue, provide as Re, onBeforeUnmount as Ee, withModifiers as je } from "vue";
+import { cloneDeep as Be } from "lodash-es";
 import { useDesignerInnerComponent as fe } from "@farris/ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component";
 import { withInstall as Ae } from "@farris/ui-vue/components/common";
 class me {
@@ -73,11 +73,11 @@ class Fe extends me {
   }
 }
 function ge() {
-  function i(e) {
+  function r(e) {
     const n = [];
     return e.reduce((a, u) => (u.children && u.children.length > 0 ? a.push(new G(u)) : a.push(new Fe(u)), a), n), n;
   }
-  return { buildResponseToolbarItems: i };
+  return { buildResponseToolbarItems: r };
 }
 const { buildResponseToolbarItems: Oe } = ge();
 class G extends me {
@@ -99,7 +99,7 @@ class G extends me {
     }), n.children && n.children.length && (this.children = Oe(n.children));
   }
 }
-class Lt {
+class Nt {
   constructor(e, n) {
     F(this, "id");
     F(this, "name");
@@ -145,102 +145,102 @@ class Lt {
   }
 }
 const oe = {}, ye = {};
-function re(i) {
-  const { properties: e, title: n } = i, a = Object.keys(e).reduce((u, h) => (u[h] = e[h].type === "object" && e[h].properties ? re(e[h]) : je(e[h].default), u), {});
+function re(r) {
+  const { properties: e, title: n } = r, a = Object.keys(e).reduce((u, m) => (u[m] = e[m].type === "object" && e[m].properties ? re(e[m]) : Be(e[m].default), u), {});
   return a.id = `${n}-${Date.now()}`, a;
 }
-function q(i, e = {}) {
-  const n = oe[i];
+function q(r, e = {}) {
+  const n = oe[r];
   if (n) {
     let a = re(n);
-    const u = ye[i];
+    const u = ye[r];
     return a = u ? u({ getSchemaByType: q }, a, e) : a, a;
   }
   return null;
 }
-function Le(i, e) {
+function Le(r, e) {
   const n = re(e);
-  return Object.keys(i).reduce((a, u) => (a[u] = i[u], a), n), n;
+  return Object.keys(r).reduce((a, u) => (a[u] = r[u], a), n), n;
 }
-function Ne(i, e) {
-  return Object.keys(i).filter((a) => i[a] != null).reduce((a, u) => {
+function Ne(r, e) {
+  return Object.keys(r).filter((a) => r[a] != null).reduce((a, u) => {
     if (e.has(u)) {
-      const h = e.get(u);
-      if (typeof h == "string")
-        a[h] = i[u];
+      const m = e.get(u);
+      if (typeof m == "string")
+        a[m] = r[u];
       else {
-        const C = h(u, i[u], i);
-        Object.assign(a, C);
+        const v = m(u, r[u], r);
+        Object.assign(a, v);
       }
     } else
-      a[u] = i[u];
+      a[u] = r[u];
     return a;
   }, {});
 }
-function Ve(i, e, n = /* @__PURE__ */ new Map()) {
-  const a = Le(i, e);
+function Ve(r, e, n = /* @__PURE__ */ new Map()) {
+  const a = Le(r, e);
   return Ne(a, n);
 }
-function _e(i = {}) {
-  function e(m, v, p, c) {
+function _e(r = {}) {
+  function e(g, C, p, c) {
     if (typeof p == "number")
-      return c[m].length === p;
+      return c[g].length === p;
     if (typeof p == "object") {
-      const d = Object.keys(p)[0], r = p[d];
+      const d = Object.keys(p)[0], s = p[d];
       if (d === "not")
-        return Number(c[m].length) !== Number(r);
+        return Number(c[g].length) !== Number(s);
       if (d === "moreThan")
-        return Number(c[m].length) >= Number(r);
+        return Number(c[g].length) >= Number(s);
       if (d === "lessThan")
-        return Number(c[m].length) <= Number(r);
+        return Number(c[g].length) <= Number(s);
     }
     return !1;
   }
-  function n(m, v, p, c) {
-    return c[m] && c[m].propertyValue && String(c[m].propertyValue.value) === String(p);
+  function n(g, C, p, c) {
+    return c[g] && c[g].propertyValue && String(c[g].propertyValue.value) === String(p);
   }
   const a = /* @__PURE__ */ new Map([
     ["length", e],
     ["getProperty", n]
   ]);
-  Object.keys(i).reduce((m, v) => (m.set(v, i[v]), m), a);
-  function u(m, v) {
-    const p = m;
-    return typeof v == "number" ? [{ target: p, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: p, operator: "getProperty", param: m, value: !!v }] : typeof v == "object" ? Object.keys(v).map((c) => {
+  Object.keys(r).reduce((g, C) => (g.set(C, r[C]), g), a);
+  function u(g, C) {
+    const p = g;
+    return typeof C == "number" ? [{ target: p, operator: "length", param: null, value: Number(C) }] : typeof C == "boolean" ? [{ target: p, operator: "getProperty", param: g, value: !!C }] : typeof C == "object" ? Object.keys(C).map((c) => {
       if (c === "length")
-        return { target: p, operator: "length", param: null, value: v[c] };
-      const d = c, r = v[c];
-      return { target: p, operator: "getProperty", param: d, value: r };
+        return { target: p, operator: "length", param: null, value: C[c] };
+      const d = c, s = C[c];
+      return { target: p, operator: "getProperty", param: d, value: s };
     }) : [];
   }
-  function h(m) {
-    return Object.keys(m).reduce((p, c) => {
-      const d = u(c, m[c]);
+  function m(g) {
+    return Object.keys(g).reduce((p, c) => {
+      const d = u(c, g[c]);
       return p.push(...d), p;
     }, []);
   }
-  function C(m, v) {
-    if (a.has(m.operator)) {
-      const p = a.get(m.operator);
-      return p && p(m.target, m.param, m.value, v) || !1;
+  function v(g, C) {
+    if (a.has(g.operator)) {
+      const p = a.get(g.operator);
+      return p && p(g.target, g.param, g.value, C) || !1;
     }
     return !1;
   }
-  function I(m, v) {
-    return h(m).reduce((d, r) => d && C(r, v), !0);
+  function M(g, C) {
+    return m(g).reduce((d, s) => d && v(s, C), !0);
   }
-  function S(m, v) {
-    const p = Object.keys(m), c = p.includes("allOf"), d = p.includes("anyOf"), r = c || d, x = (r ? m[r ? c ? "allOf" : "anyOf" : "allOf"] : [m]).map((k) => I(k, v));
+  function S(g, C) {
+    const p = Object.keys(g), c = p.includes("allOf"), d = p.includes("anyOf"), s = c || d, x = (s ? g[s ? c ? "allOf" : "anyOf" : "allOf"] : [g]).map((k) => M(k, C));
     return c ? !x.includes(!1) : x.includes(!0);
   }
   return { parseValueSchema: S };
 }
-const M = {
+const I = {
   Button: { type: "Button", name: "按钮", icon: "Button" },
   ButtonGroup: { type: "ButtonGroup", name: "按钮组", icon: "ButtonGroup" },
-  ToolBar: { type: "ToolBar", name: "工具栏", icon: "ButtonGroup" },
-  ToolBarItem: { type: "ToolBarItem", name: "工具栏项", icon: "Button" },
-  ContentContainer: { type: "ContentContainer", name: "容器", icon: "ContentContainer" },
+  "response-toolbar": { type: "response-toolbar", name: "工具栏", icon: "ButtonGroup" },
+  "response-toolbar-item": { type: "response-toolbar-item", name: "工具栏项", icon: "Button" },
+  "content-container": { type: "content-container", name: "容器", icon: "ContentContainer" },
   DisplayField: { type: "DisplayField", name: "标签", icon: "DisplayField" },
   "input-group": { type: "input-group", name: "文本", icon: "TextBox" },
   textarea: { type: "textarea", name: "多行文本", icon: "MultiTextBox" },
@@ -267,15 +267,15 @@ const M = {
   "data-grid-column": { type: "data-grid-column", name: "表格列" },
   Panel: { type: "Panel", name: "面板", icon: "ContentContainer" },
   Module: { type: "Module", name: "模块", icon: "Module" },
-  Component: { type: "Component", name: "组件", icon: "Component" },
+  component: { type: "component", name: "组件", icon: "Component" },
   ExternalContainer: { type: "ExternalContainer", name: "外部容器", icon: "ContentContainer" },
   Image: { type: "Image", name: "图像", icon: "Image" },
   ImageUpload: { type: "ImageUpload", name: "图片上传", icon: "imageupload" },
   HiddenContainer: { type: "HiddenContainer", name: "隐藏区域", icon: "ContentContainer" },
   ModalContainer: { type: "ModalContainer", name: "弹窗容器", icon: "ContentContainer" },
   RouteContainer: { type: "RouteContainer", name: "路由区域", icon: "ContentContainer" },
-  Tab: { type: "Tab", name: "标签页", icon: "Tab" },
-  TabPage: { type: "TabPage", name: "标签页项", dependentParentControl: "Tab" },
+  tabs: { type: "tabs", name: "标签页", icon: "Tab" },
+  "tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
   "tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮", icon: "Button" },
   Tag: { type: "Tag", name: "Tag", icon: "Tag" },
   Sidebar: { type: "Sidebar", name: "侧边栏", icon: "Sidebar" },
@@ -284,7 +284,7 @@ const M = {
   RichTextBox: { type: "RichTextBox", name: "富文本", icon: "RichTextBox" },
   TimeSpinner: { type: "TimeSpinner", name: "时间调节器", icon: "TimePicker" },
   TimePicker: { type: "TimePicker", name: "时间选择", icon: "TimePicker" },
-  Section: { type: "Section", name: "分组面板", icon: "Section" },
+  section: { type: "section", name: "分组面板", icon: "Section" },
   SectionToolbar: { type: "SectionToolbar", name: "分组面板工具栏" },
   SectionToolbarItem: { type: "SectionToolbarItem", name: "分组面板按钮" },
   QueryScheme: { type: "QueryScheme", name: "筛选方案", icon: "QueryScheme" },
@@ -314,7 +314,7 @@ const M = {
   NavTab: { type: "NavTab", name: "标签类导航", icon: "NavTab" },
   Tags: { type: "Tags", name: "标记组", icon: "Tags" },
   Portlet: { type: "Portlet", name: "小部件", icon: "dingzhi" },
-  Header: { type: "Header", name: "页头", icon: "Header" },
+  "page-header": { type: "page-header", name: "页头", icon: "Header" },
   ModalFooter: { type: "ModalFooter", name: "弹窗页脚", icon: "ModalFooter" },
   ScrollCollapsibleArea: { type: "ScrollCollapsibleArea", name: "滚动收折区域", icon: "ScrollCollapsibleArea" },
   PersonnelSelector: { type: "PersonnelSelector", name: "人员选择", icon: "PersonnelSelector" },
@@ -348,16 +348,16 @@ const M = {
   /** 审批类 end */
 }, he = {}, $e = {};
 _e();
-function be(i, e, n = /* @__PURE__ */ new Map(), a = (C, I, S) => I, u = {}, h = (C) => C) {
-  return oe[e.title] = e, ye[e.title] = a, he[e.title] = u, $e[e.title] = h, (C = {}) => {
-    const I = Ve(C, e, n), S = Object.keys(i).reduce((m, v) => (m[v] = i[v].default, m), {});
-    return Object.assign(S, I);
+function be(r, e, n = /* @__PURE__ */ new Map(), a = (v, M, S) => M, u = {}, m = (v) => v) {
+  return oe[e.title] = e, ye[e.title] = a, he[e.title] = u, $e[e.title] = m, (v = {}) => {
+    const M = Ve(v, e, n), S = Object.keys(r).reduce((g, C) => (g[C] = r[C].default, g), {});
+    return Object.assign(S, M);
   };
 }
 const ve = /* @__PURE__ */ new Map([
   ["buttons", "items"]
 ]);
-function Ce(i, e, n) {
+function Ce(r, e, n) {
   return e;
 }
 const Ue = "https://json-schema.org/draft/2020-12/schema", We = "https://farris-design.gitee.io/response-toolbar.schema.json", ze = "response-toolbar", qe = "A Farris Toolbar Component", He = "object", Ge = {
@@ -438,7 +438,7 @@ const Ue = "https://json-schema.org/draft/2020-12/schema", We = "https://farris-
     type: "string",
     default: ""
   },
-  onClick: {
+  click: {
     description: "The event of response toolbar item.",
     type: "string",
     default: ""
@@ -504,7 +504,9 @@ const Ue = "https://json-schema.org/draft/2020-12/schema", We = "https://farris-
 };
 oe[te.title] = te;
 he[le.title] = le;
-const ie = be(
+const at = Object.assign({}, se, {
+  componentId: { type: String, default: "" }
+}), ie = be(
   se,
   Xe,
   ve,
@@ -514,37 +516,38 @@ const ie = be(
   items: { type: Object, default: {} },
   text: { type: String, default: "" },
   disabled: { type: Boolean, default: !1 },
-  icon: { type: String, default: "" }
-}, at = be(
+  icon: { type: String, default: "" },
+  componentId: { type: String, default: "" }
+}, ct = be(
   we,
   te,
   ve,
   Ce
 );
 function Te() {
-  function i(n) {
+  function r(n) {
     const a = {
       "f-icon": !0
     };
     if (n.icon) {
       const u = n.icon.trim().split(" ");
-      u && u.length && u.reduce((h, C) => (h[C] = !0, h), a);
+      u && u.length && u.reduce((m, v) => (m[v] = !0, m), a);
     }
     return a;
   }
   function e(n) {
     return !!(n.icon && n.icon.trim());
   }
-  return { iconClass: i, shouldShowIcon: e };
+  return { iconClass: r, shouldShowIcon: e };
 }
-function ct(i) {
+function lt(r) {
   function e(p) {
     const c = {
       "dropdown-menu": !0
     };
     if (p.class) {
       const d = p.menuClass.split(" ");
-      d && d.length && d.reduce((r, g) => (r[g] = !0, r), c);
+      d && d.length && d.reduce((s, y) => (s[y] = !0, s), c);
     }
     return c;
   }
@@ -554,7 +557,7 @@ function ct(i) {
       "dropdown-submenu": !0,
       "f-rt-dropdown": !0
     }, d = p.dropdownClass.split(" ");
-    return d && d.length && d.reduce((r, g) => (r[g] = !0, r), c), c;
+    return d && d.length && d.reduce((s, y) => (s[y] = !0, s), c), c;
   }
   function a(p) {
     const c = {
@@ -562,52 +565,52 @@ function ct(i) {
       "dropdown-item": !0,
       "f-rt-btn": !0
     }, d = p.class.split(" ");
-    return d && d.length && d.reduce((r, g) => (r[g] = !0, r), c), c;
+    return d && d.length && d.reduce((s, y) => (s[y] = !0, s), c), c;
   }
   let u;
-  const h = /* @__PURE__ */ new Map();
-  function C(p, c, d) {
-    var g;
-    ((g = p.target) == null ? void 0 : g.id) === c.id && p.stopPropagation();
-    const r = d ? d.id : "__top_item__";
-    if (c.children && c.children.length && (c.expanded = !c.expanded, c.expanded ? h.set(r, c) : h.delete(r)), h.has(r) && h.get(r) !== c) {
-      const y = h.get(r);
-      y && (y.expanded = !1);
+  const m = /* @__PURE__ */ new Map();
+  function v(p, c, d) {
+    var y;
+    ((y = p.target) == null ? void 0 : y.id) === c.id && p.stopPropagation();
+    const s = d ? d.id : "__top_item__";
+    if (c.children && c.children.length && (c.expanded = !c.expanded, c.expanded ? m.set(s, c) : m.delete(s)), m.has(s) && m.get(s) !== c) {
+      const h = m.get(s);
+      h && (h.expanded = !1);
     }
   }
-  function I(p, c) {
+  function M(p, c) {
     document.body.click(), c.enable && c.onClick(p, c.id);
   }
   function S(p) {
     return p.children.map((c) => c.children && c.children.length ? w("li", {
       class: n(c),
       id: c.id,
-      onClick: (d) => c.enable && C(d, c, p)
+      onClick: (d) => c.enable && v(d, c, p)
     }, [w("span", {
       id: c.id,
       class: a(c),
-      onMouseover: (d) => c.enable && C(d, c, p)
+      onMouseover: (d) => c.enable && v(d, c, p)
     }, [c.text, w("i", {
       class: "f-icon f-icon-arrow-chevron-right",
       style: "display: inline-block;float: right;line-height: 1.25rem;"
     }, null)]), u(c, c)]) : w("li", {
       class: a(c),
       id: c.id,
-      onClick: (d) => I(d, c),
-      onMouseover: (d) => c.enable && C(d, c, p)
-    }, [i.shouldShowIcon(c) && w("i", {
-      class: i.iconClass(c)
+      onClick: (d) => M(d, c),
+      onMouseover: (d) => c.enable && v(d, c, p)
+    }, [r.shouldShowIcon(c) && w("i", {
+      class: r.iconClass(c)
     }, null), c.text]));
   }
-  function m(p, c, d) {
-    const r = {
+  function g(p, c, d) {
+    const s = {
       display: p.expanded ? "block" : "none",
       position: "fixed",
       maxWidth: "300px",
       width: "auto",
       minWidth: "120px"
-    }, g = document.getElementsByTagName("body")[0].getClientRects()[0].width, y = c, x = y == null ? void 0 : y.getClientRects();
-    if (y && x && x.length) {
+    }, y = document.getElementsByTagName("body")[0].getClientRects()[0].width, h = c, x = h == null ? void 0 : h.getClientRects();
+    if (h && x && x.length) {
       const {
         top: O,
         width: k,
@@ -615,93 +618,93 @@ function ct(i) {
         right: N,
         height: D
       } = x[0], b = Math.ceil(D + O);
-      r.top = `${b}px`, r.left = `${A}px`;
+      s.top = `${b}px`, s.left = `${A}px`;
       const P = p.id + "_menu", E = c ? c.querySelector("#" + P) : null;
       if (E) {
-        r.display === "block" && (E.style.display = "block");
+        s.display === "block" && (E.style.display = "block");
         const l = E.getBoundingClientRect();
         if (d) {
-          r.top = `${O - 6}px`;
+          s.top = `${O - 6}px`;
           const o = Math.ceil(k + A);
-          r.left = `${o}px`;
+          s.left = `${o}px`;
         }
-        g - A - k < l.width && (r.left = `${(d ? A : N) - l.width}px`);
+        y - A - k < l.width && (s.left = `${(d ? A : N) - l.width}px`);
       }
     }
-    return r;
+    return s;
   }
   u = function(p, c) {
-    var y, x;
-    const d = de(), r = c ? c.id : p.id, g = (x = (y = d == null ? void 0 : d.exposed) == null ? void 0 : y.elementRef.value) == null ? void 0 : x.querySelector("#" + r);
+    var h, x;
+    const d = de(), s = c ? c.id : p.id, y = (x = (h = d == null ? void 0 : d.exposed) == null ? void 0 : h.elementRef.value) == null ? void 0 : x.querySelector("#" + s);
     return w("ul", {
       class: e(p),
-      style: m(p, g, c),
+      style: g(p, y, c),
       id: p.id + "_menu"
     }, [S(p)]);
   };
-  function v() {
-    h.forEach((p) => {
+  function C() {
+    m.forEach((p) => {
       p.expanded = !1;
-    }), h.clear();
+    }), m.clear();
   }
   return {
     renderDropdownMenu: u,
-    clearAllDropDownMenu: v
+    clearAllDropDownMenu: C
   };
 }
-function lt(i, e) {
-  const n = B(i.alignment), {
+function pt(r, e) {
+  const n = j(r.alignment), {
     renderDropdownMenu: a,
     clearAllDropDownMenu: u
-  } = ct(e);
-  function h(v) {
+  } = lt(e);
+  function m(C) {
     const p = {
       "btn-group": !0,
       "f-rt-dropdown": !0,
       "f-btn-ml": n.value === "right",
       "f-btn-mr": n.value === "left"
-    }, c = v.dropdownClass.split(" ");
-    return c && c.length && c.reduce((d, r) => (d[r] = !0, d), p), p;
+    }, c = C.dropdownClass.split(" ");
+    return c && c.length && c.reduce((d, s) => (d[s] = !0, d), p), p;
   }
-  function C(v) {
+  function v(C) {
     const p = {
       btn: !0,
-      disabled: !v.enable,
+      disabled: !C.enable,
       "f-rt-btn": !0,
-      "btn-icontext": !!(v.icon && v.icon.trim())
+      "btn-icontext": !!(C.icon && C.icon.trim())
     };
-    if (v.class) {
-      const c = v.class.split(" ");
-      c && c.length && c.reduce((d, r) => (d[r] = !0, d), p);
+    if (C.class) {
+      const c = C.class.split(" ");
+      c && c.length && c.reduce((d, s) => (d[s] = !0, d), p);
     }
     return p;
   }
-  function I(v, p) {
-    v.stopPropagation();
+  function M(C, p) {
+    C.stopPropagation();
     const c = p.expanded;
     document.body.click(), p.expanded = !c;
   }
-  function S(v) {
+  function S(C) {
     return w("div", {
-      id: v.id,
-      class: h(v)
+      id: C.id,
+      class: m(C)
     }, [w("div", {
-      class: C(v),
+      class: v(C),
       style: "display: flex;padding-right: 0.1rem;border-top-right-radius: 6px;border-bottom-right-radius: 6px",
-      onClick: (p) => v.enable && I(p, v)
-    }, [e.shouldShowIcon(v) && w("i", {
-      class: e.iconClass(v)
-    }, null), w("span", null, [v.text]), w("i", {
+      onClick: (p) => C.enable && M(p, C)
+    }, [e.shouldShowIcon(C) && w("i", {
+      class: e.iconClass(C)
+    }, null), w("span", null, [C.text]), w("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)]), a(v)]);
+    }, null)]), a(C)]);
   }
-  function m() {
+  function g() {
     u();
   }
   return {
     renderToolbarDropdown: S,
-    clearAllDropDown: m
+    clearAllDropDown: g
   };
 }
 const {
@@ -709,42 +712,42 @@ const {
 } = ge(), X = /* @__PURE__ */ Y({
   name: "FResponseToolbar",
   props: se,
-  emits: [],
-  setup(i, e) {
-    const n = B(pe(i.items)), a = B(), u = B(), h = B(), C = B(i.alignment), I = {
+  emits: ["click"],
+  setup(r, e) {
+    const n = j(pe(r.items)), a = j(), u = j(), m = j(), v = j(r.alignment), M = {
       id: "__more_buttons__",
       text: "更多"
-    }, S = B(new G(I)), m = Te(), v = W(() => S.value.children.length > 0), p = W(() => {
+    }, S = j(new G(M)), g = Te(), C = W(() => S.value.children.length > 0), p = W(() => {
       const b = {
         "f-toolbar": !0,
         "f-response-toolbar": !0,
         "position-relative": !0
       };
-      if (i.customClass) {
-        const P = i.customClass.split(" ");
+      if (r.customClass) {
+        const P = r.customClass.split(" ");
         P && P.length && P.reduce((E, l) => (E[l] = !0, E), b);
       }
       return b;
     }), c = W(() => ({
       "d-flex": !0,
       "flex-nowrap": !0,
-      "justify-content-end": C.value === "right",
-      "justify-content-start": C.value === "left"
+      "justify-content-end": v.value === "right",
+      "justify-content-start": v.value === "left"
     })), {
       renderToolbarDropdown: d,
-      clearAllDropDown: r
-    } = lt(i, m);
-    function g() {
+      clearAllDropDown: s
+    } = pt(r, g);
+    function y() {
       n.value.filter((b) => b.children && b.children.length > 0).forEach((b) => {
         b.expanded = !1;
-      }), S.value.expanded = !1, r();
+      }), S.value.expanded = !1, s();
     }
-    function y(b) {
+    function h(b) {
       const P = {
         btn: !0,
         "f-rt-btn": !0,
-        "f-btn-ml": C.value === "right",
-        "f-btn-mr": C.value === "left",
+        "f-btn-ml": v.value === "right",
+        "f-btn-mr": v.value === "left",
         "btn-icontext": !!(b.icon && b.icon.trim())
       };
       if (b.class) {
@@ -754,31 +757,31 @@ const {
       return P;
     }
     function x(b, P) {
-      document.body.click(), P.onClick(b, P.id);
+      document.body.click(), P.onClick(b, P.id), e.emit("click", b, P.id);
     }
     function O(b) {
       return w("button", {
         type: "button",
-        class: y(b),
+        class: h(b),
         id: b.id,
         disabled: !b.enable,
         onClick: (P) => x(P, b)
-      }, [m.shouldShowIcon(b) && w("i", {
-        class: m.iconClass(b)
+      }, [g.shouldShowIcon(b) && w("i", {
+        class: g.iconClass(b)
       }, null), b.text]);
     }
     const k = /* @__PURE__ */ new Map(), A = [];
     function N(b) {
-      const P = h.value;
+      const P = m.value;
       let E = b;
       const l = Array.from(P.children), o = l[l.length - 1].id === "__more_buttons__" ? l[l.length - 1] : null;
       if (o) {
-        const T = o.computedStyleMap().get("margin-left"), j = o.computedStyleMap().get("margin-right"), _ = (T ? T.value : 0) + o.getBoundingClientRect().width + (j ? j.value : 0);
+        const T = o.computedStyleMap().get("margin-left"), B = o.computedStyleMap().get("margin-right"), _ = (T ? T.value : 0) + o.getBoundingClientRect().width + (B ? B.value : 0);
         E -= _;
       }
       const t = l.filter((T) => T.id !== "__more_buttons__");
       for (const T of t) {
-        const j = T.computedStyleMap().get("margin-left"), _ = T.computedStyleMap().get("margin-right"), L = (j ? j.value : 0) + T.getBoundingClientRect().width + (_ ? _.value : 0);
+        const B = T.computedStyleMap().get("margin-left"), _ = T.computedStyleMap().get("margin-right"), L = (B ? B.value : 0) + T.getBoundingClientRect().width + (_ ? _.value : 0);
         E < L ? (k.set(T.id, !0), A.push({
           id: T.id,
           width: L
@@ -786,30 +789,30 @@ const {
       }
       if (A.length)
         for (let T = A.length - 1; T >= 0; T--) {
-          const j = A[T].width;
-          if (E >= j)
-            E -= j, k.delete(A[T].id), A.pop();
+          const B = A[T].width;
+          if (E >= B)
+            E -= B, k.delete(A[T].id), A.pop();
           else
             break;
         }
-      const s = Object.assign({}, S.value);
-      s.children = [];
-      const f = new G(s), R = n.value.reduce((T, j) => (k.has(j.id) && f.children.push(j), j.visible = !k.has(j.id), T.push(j), T), []);
+      const i = Object.assign({}, S.value);
+      i.children = [];
+      const f = new G(i), R = n.value.reduce((T, B) => (k.has(B.id) && f.children.push(B), B.visible = !k.has(B.id), T.push(B), T), []);
       S.value = f, n.value = R;
     }
     const D = new ResizeObserver((b) => {
       if (b.length) {
-        const E = b[0].contentRect.width, o = h.value.getBoundingClientRect().width;
-        (E < o || A.length) && (N(E), g());
+        const E = b[0].contentRect.width, o = m.value.getBoundingClientRect().width;
+        (E < o || A.length) && (N(E), y());
       }
     });
     return H(() => {
       const b = u.value;
-      D.observe(b), document.body.addEventListener("click", g), document.body.addEventListener("wheel", g);
+      D.observe(b), document.body.addEventListener("click", y), document.body.addEventListener("wheel", y);
     }), ne(() => {
-      D.disconnect(), document.body.removeEventListener("click", g), document.body.removeEventListener("wheel", g);
-    }), Q(() => i.items, () => {
-      n.value = pe(i.items);
+      D.disconnect(), document.body.removeEventListener("click", y), document.body.removeEventListener("wheel", y);
+    }), Q(() => r.items, () => {
+      n.value = pe(r.items);
     }, {
       deep: !0
     }), e.expose({
@@ -821,54 +824,54 @@ const {
       ref: u,
       class: c.value
     }, [w("div", {
-      ref: h,
+      ref: m,
       class: "d-inline-block f-response-content",
       style: "white-space: nowrap;"
-    }, [n.value.filter((b) => b.visible).map((b) => b.children && b.children.length > 0 ? d(b) : O(b)), v.value && d(S.value)])])]);
+    }, [n.value.filter((b) => b.visible).map((b) => b.children && b.children.length > 0 ? d(b) : O(b)), C.value && d(S.value)])])]);
   }
 });
-function pt(i, e) {
+function dt(r, e) {
   const n = $("design-item-context"), a = $("toolbar-item-handler", () => {
   });
   function u() {
     a && a();
   }
-  function h(o) {
+  function m(o) {
     const t = {
       "dropdown-menu": !0
     };
     if (o.class) {
-      const s = o.menuClass.split(" ");
-      s && s.length && s.reduce((f, R) => (f[R] = !0, f), t);
+      const i = o.menuClass.split(" ");
+      i && i.length && i.reduce((f, R) => (f[R] = !0, f), t);
     }
     return t;
   }
-  function C(o) {
+  function v(o) {
     const t = {
       disabled: !o.enable,
       "dropdown-submenu": !0,
       "f-rt-dropdown": !0
-    }, s = o.dropdownClass.split(" ");
-    return s && s.length && s.reduce((f, R) => (f[R] = !0, f), t), t;
+    }, i = o.dropdownClass.split(" ");
+    return i && i.length && i.reduce((f, R) => (f[R] = !0, f), t), t;
   }
-  function I(o) {
+  function M(o) {
     const t = {
       disabled: !o.enable,
       "dropdown-item": !0,
       "f-rt-btn": !0,
       "position-relative": !0,
       "farris-component": !0
-    }, s = o.class.split(" ");
-    return s && s.length && s.reduce((f, R) => (f[R] = !0, f), t), t;
+    }, i = o.class.split(" ");
+    return i && i.length && i.reduce((f, R) => (f[R] = !0, f), t), t;
   }
   let S;
-  const m = /* @__PURE__ */ new Map();
-  function v(o, t, s) {
+  const g = /* @__PURE__ */ new Map();
+  function C(o, t, i) {
     var R;
     ((R = o.target) == null ? void 0 : R.id) === t.id && o.stopPropagation();
-    const f = s ? s.id : "__top_item__";
-    if (t.children && t.children.length && (t.expanded = !t.expanded, t.expanded ? m.set(f, t) : m.delete(f)), m.has(f) && m.get(f) !== t) {
-      const T = m.get(f);
+    const f = i ? i.id : "__top_item__";
+    if (t.children && t.children.length && (t.expanded = !t.expanded, t.expanded ? g.set(f, t) : g.delete(f)), g.has(f) && g.get(f) !== t) {
+      const T = g.get(f);
       T && (T.expanded = !1);
     }
   }
@@ -883,43 +886,43 @@ function pt(i, e) {
   function d(o) {
     o.currentTarget.classList.add("dgComponentFocused", "dgComponentSelected");
   }
-  function r(o) {
+  function s(o) {
     const {
       buttons: t = []
     } = n.schema;
-    let s = [];
+    let i = [];
     t.forEach((T) => {
-      s = s.concat(T.children || []);
+      i = i.concat(T.children || []);
     });
-    const f = s.findIndex((T) => T.id === o), R = f === -1 ? null : s[f];
+    const f = i.findIndex((T) => T.id === o), R = f === -1 ? null : i[f];
     return {
       index: f,
       item: R
     };
   }
-  function g(o) {
+  function y(o) {
     const {
       buttons: t = []
-    } = n.schema, s = t.findIndex((R) => R.id === o), f = s === -1 ? null : t[s];
+    } = n.schema, i = t.findIndex((R) => R.id === o), f = i === -1 ? null : t[i];
     return {
-      index: s,
+      index: i,
       item: f
     };
   }
-  function y(o) {
+  function h(o) {
     var f;
     n.schema;
     const {
       index: t,
-      item: s
-    } = r(o);
-    (f = n == null ? void 0 : n.setupContext) == null || f.emit("selectionChange", s == null ? void 0 : s.type, s);
+      item: i
+    } = s(o);
+    (f = n == null ? void 0 : n.setupContext) == null || f.emit("selectionChange", i == null ? void 0 : i.type, i);
   }
   const x = function(o) {
     const {
       componentType: t
-    } = o, s = q(t, o), f = t.toLowerCase().replace("-", "_");
-    return s && !s.id && s.type === t && (s.id = `${f}_${Math.random().toString().slice(2, 6)}`), s;
+    } = o, i = q(t, o), f = t.toLowerCase().replace("-", "_");
+    return i && !i.id && i.type === t && (i.id = `${f}_${Math.random().toString().slice(2, 6)}`), i;
   }, O = function() {
     const o = {
       componentType: "response-toolbar-item",
@@ -929,55 +932,55 @@ function pt(i, e) {
     return x(o);
   };
   function k(o, t) {
-    p(o), c(), d(o), y(t.id);
+    p(o), c(), d(o), h(t.id);
   }
-  function A(o, t, s) {
+  function A(o, t, i) {
     p(o);
-    const f = t.id, R = s && s.id, {
+    const f = t.id, R = i && i.id, {
       buttons: T = []
     } = n.schema;
     if (!R)
       return;
     const {
-      index: j
-    } = g(R);
-    if (j === -1)
+      index: B
+    } = y(R);
+    if (B === -1)
       return;
     const {
       index: _
-    } = r(f);
-    _ !== -1 && (T[j].children.splice(_, 1), u());
+    } = s(f);
+    _ !== -1 && (T[B].children.splice(_, 1), u());
   }
-  function N(o, t, s) {
+  function N(o, t, i) {
     p(o);
-    const f = s && s.id, {
+    const f = i && i.id, {
       buttons: R = []
     } = n.schema;
     if (!f)
       return;
     const {
       index: T
-    } = g(f);
+    } = y(f);
     if (T === -1)
       return;
-    const j = O(), _ = Object.assign({}, j, {
+    const B = O(), _ = Object.assign({}, B, {
       text: t.text
     });
     R[T].children.push(_), u();
   }
-  function D(o, t, s) {
+  function D(o, t, i) {
     p(o);
-    const f = s && s.id, {
+    const f = i && i.id, {
       buttons: R = []
     } = n.schema;
     if (!f)
       return;
     const {
       index: T
-    } = g(f);
+    } = y(f);
     if (T === -1)
       return;
-    const j = O(), _ = Object.assign({}, j, {
+    const B = O(), _ = Object.assign({}, B, {
       text: "按钮"
     });
     R[T].children.push(_), u();
@@ -991,7 +994,7 @@ function pt(i, e) {
       title: "删除",
       ref: "removeButton",
       style: "position:static;",
-      onClick: (s) => A(s, o, t)
+      onClick: (i) => A(i, o, t)
     }, [w("i", {
       class: "f-icon f-icon-yxs_delete"
     }, null)]), w("div", {
@@ -1000,7 +1003,7 @@ function pt(i, e) {
       title: "复制",
       ref: "copyButton",
       style: "position:static;",
-      onClick: (s) => N(s, o, t)
+      onClick: (i) => N(i, o, t)
     }, [w("i", {
       class: "f-icon f-icon-yxs_copy"
     }, null)]), w("div", {
@@ -1009,7 +1012,7 @@ function pt(i, e) {
       title: "新增同级",
       ref: "appendSame",
       style: "width:85px!important;padding:0 5px;position:static;",
-      onClick: (s) => D(s, o, t)
+      onClick: (i) => D(i, o, t)
     }, [w("i", {
       class: "f-icon f-icon-plus-circle text-white mr-1"
     }, null), w("span", {
@@ -1018,93 +1021,93 @@ function pt(i, e) {
   }
   function P(o) {
     return o.children.map((t) => t.children && t.children.length ? w("li", {
-      class: C(t),
+      class: v(t),
       id: t.id,
-      onClick: (s) => t.enable && v(s, t, o)
+      onClick: (i) => t.enable && C(i, t, o)
     }, [w("span", {
       id: t.id,
-      class: I(t),
-      onMouseover: (s) => t.enable && v(s, t, o)
+      class: M(t),
+      onMouseover: (i) => t.enable && C(i, t, o)
     }, [t.text, w("i", {
       class: "f-icon f-icon-arrow-chevron-right",
       style: "display: inline-block;float: right;line-height: 1.25rem;"
     }, null)]), S(t, t)]) : w("li", {
-      class: I(t),
+      class: M(t),
       id: t.id,
-      onClick: (s) => k(s, t)
-    }, [b(t, o), i.shouldShowIcon(t) && w("i", {
-      class: i.iconClass(t)
+      onClick: (i) => k(i, t)
+    }, [b(t, o), r.shouldShowIcon(t) && w("i", {
+      class: r.iconClass(t)
     }, null), t.text]));
   }
-  function E(o, t, s) {
+  function E(o, t, i) {
     const f = {
       display: o.expanded ? "block" : "none",
       position: "fixed",
       maxWidth: "300px",
       width: "auto",
       minWidth: "120px"
-    }, R = document.getElementsByTagName("body")[0].getClientRects()[0].width, T = t, j = T == null ? void 0 : T.getClientRects();
-    if (T && j && j.length) {
+    }, R = document.getElementsByTagName("body")[0].getClientRects()[0].width, T = t, B = T == null ? void 0 : T.getClientRects();
+    if (T && B && B.length) {
       const {
         top: _,
         width: L,
         left: V,
         right: U,
         height: z
-      } = j[0], Z = Math.ceil(z + _);
+      } = B[0], Z = Math.ceil(z + _);
       f.top = `${Z}px`, f.left = `${V}px`;
-      const Me = o.id + "_menu", K = t ? t.querySelector("#" + Me) : null;
+      const Ie = o.id + "_menu", K = t ? t.querySelector("#" + Ie) : null;
       if (K) {
         f.display === "block" && (K.style.display = "block");
         const ce = K.getBoundingClientRect();
-        if (s) {
+        if (i) {
           f.top = `${_ - 6}px`;
-          const Ie = Math.ceil(L + V);
-          f.left = `${Ie}px`;
+          const Me = Math.ceil(L + V);
+          f.left = `${Me}px`;
         }
-        R - V - L < ce.width && (f.left = `${(s ? V : U) - ce.width}px`);
+        R - V - L < ce.width && (f.left = `${(i ? V : U) - ce.width}px`);
       }
     }
     return f;
   }
   S = function(o, t) {
-    var T, j;
-    const s = de(), f = t ? t.id : o.id, R = (j = (T = s == null ? void 0 : s.exposed) == null ? void 0 : T.elementRef.value) == null ? void 0 : j.querySelector("#" + f);
+    var T, B;
+    const i = de(), f = t ? t.id : o.id, R = (B = (T = i == null ? void 0 : i.exposed) == null ? void 0 : T.elementRef.value) == null ? void 0 : B.querySelector("#" + f);
     return w("ul", {
-      class: h(o),
+      class: m(o),
       style: E(o, R, t),
       id: o.id + "_menu"
     }, [P(o)]);
   };
   function l() {
-    m.forEach((o) => {
+    g.forEach((o) => {
       o.expanded = !1;
-    }), m.clear();
+    }), g.clear();
   }
   return {
     renderDropdownMenu: S,
     clearAllDropDownMenu: l
   };
 }
-function dt(i, e, n) {
-  const a = B(i.alignment), {
+function ut(r, e, n) {
+  const a = j(r.alignment), {
     renderDropdownMenu: u,
-    clearAllDropDownMenu: h
-  } = pt(e, n), C = $("design-item-context"), I = $("toolbar-item-handler", () => {
+    clearAllDropDownMenu: m
+  } = dt(e, n), v = $("design-item-context"), M = $("toolbar-item-handler", () => {
   });
   function S() {
-    I && I();
+    M && M();
   }
-  function m(l) {
+  function g(l) {
     const o = {
       "btn-group": !0,
       "f-rt-dropdown": !0,
       "f-btn-ml": a.value === "right",
       "f-btn-mr": a.value === "left"
     }, t = l.dropdownClass.split(" ");
-    return t && t.length && t.reduce((s, f) => (s[f] = !0, s), o), o;
+    return t && t.length && t.reduce((i, f) => (i[f] = !0, i), o), o;
   }
-  function v(l) {
+  function C(l) {
     const o = {
       btn: !0,
       disabled: !l.enable,
@@ -1115,7 +1118,7 @@ function dt(i, e, n) {
     };
     if (l.class) {
       const t = l.class.split(" ");
-      t && t.length && t.reduce((s, f) => (s[f] = !0, s), o);
+      t && t.length && t.reduce((i, f) => (i[f] = !0, i), o);
     }
     return o;
   }
@@ -1130,9 +1133,9 @@ function dt(i, e, n) {
   const d = function(l) {
     const {
       componentType: o
-    } = l, t = q(o, l), s = o.toLowerCase().replace("-", "_");
-    return t && !t.id && t.type === o && (t.id = `${s}_${Math.random().toString().slice(2, 6)}`), t;
-  }, r = function() {
+    } = l, t = q(o, l), i = o.toLowerCase().replace("-", "_");
+    return t && !t.id && t.type === o && (t.id = `${i}_${Math.random().toString().slice(2, 6)}`), t;
+  }, s = function() {
     const l = {
       componentType: "response-toolbar-item",
       parentComponentInstance: n.value,
@@ -1140,41 +1143,41 @@ function dt(i, e, n) {
     };
     return d(l);
   };
-  function g(l) {
-    const o = C.schema.buttons || C.schema.contents, t = o == null ? void 0 : o.findIndex((f) => f.id === l), s = t === -1 ? null : o[t];
+  function y(l) {
+    const o = v.schema.buttons || v.schema.contents, t = o == null ? void 0 : o.findIndex((f) => f.id === l), i = t === -1 ? null : o[t];
     return {
       index: t,
-      toolbarItem: s
+      toolbarItem: i
     };
   }
-  function y(l, o) {
-    var j;
+  function h(l, o) {
+    var B;
     const {
       index: t,
-      toolbarItem: s
-    } = g(o);
+      toolbarItem: i
+    } = y(o);
     if (t === -1)
       return;
-    const f = s.text || "按钮", R = r(), T = Object.assign({}, R, {
+    const f = i.text || "按钮", R = s(), T = Object.assign({}, R, {
       text: f
     });
-    (j = C.schema.buttons) == null || j.push(T), S();
+    (B = v.schema.buttons) == null || B.push(T), S();
   }
   function x(l, o) {
     const {
       index: t,
-      toolbarItem: s
-    } = g(o);
+      toolbarItem: i
+    } = y(o);
     if (t === -1)
       return;
-    const f = s.text || "按钮", R = r(), T = Object.assign({}, R, {
+    const f = i.text || "按钮", R = s(), T = Object.assign({}, R, {
       text: f
-    }), j = C.schema.buttons[t].children || [];
-    j.push(T), C.schema.buttons[t].children = j, S();
+    }), B = v.schema.buttons[t].children || [];
+    B.push(T), v.schema.buttons[t].children = B, S();
   }
   function O(l, o) {
-    const t = C.schema.buttons || C.schema.contents, s = t == null ? void 0 : t.findIndex((f) => f.id === o);
-    s !== -1 && (t.splice(s, 1), S());
+    const t = v.schema.buttons || v.schema.contents, i = t == null ? void 0 : t.findIndex((f) => f.id === o);
+    i !== -1 && (t.splice(i, 1), S());
   }
   function k(l) {
     return w("div", {
@@ -1194,7 +1197,7 @@ function dt(i, e, n) {
       title: "复制",
       ref: "copyButton",
       style: "position:static;",
-      onClick: (o) => y(o, l)
+      onClick: (o) => h(o, l)
     }, [w("i", {
       class: "f-icon f-icon-yxs_copy"
     }, null)]), w("div", {
@@ -1220,11 +1223,11 @@ function dt(i, e, n) {
   }
   function D(l) {
     var f;
-    const o = C.schema.buttons || C.schema.contents, t = o == null ? void 0 : o.findIndex((R) => R.id === l);
+    const o = v.schema.buttons || v.schema.contents, t = o == null ? void 0 : o.findIndex((R) => R.id === l);
     if (t === -1)
       return;
-    const s = o[t];
-    (f = C == null ? void 0 : C.setupContext) == null || f.emit("selectionChange", "response-toolbar-item", s);
+    const i = o[t];
+    (f = v == null ? void 0 : v.setupContext) == null || f.emit("selectionChange", "response-toolbar-item", i);
   }
   function b(l, o) {
     p(l), A(), N(l), p(l), c(l, o), D(o.id);
@@ -1232,9 +1235,9 @@ function dt(i, e, n) {
   function P(l) {
     return w("div", {
       id: l.id,
-      class: m(l)
+      class: g(l)
     }, [w("div", {
-      class: v(l),
+      class: C(l),
       style: "display: flex;padding-right: 0.1rem;",
       onClick: (o) => l.enable && b(o, l)
     }, [k(l.id), e.shouldShowIcon(l) && w("i", {
@@ -1245,34 +1248,34 @@ function dt(i, e, n) {
     }, null)]), u(l)]);
   }
   function E() {
-    h();
+    m();
   }
   return {
     renderToolbarDropdown: P,
     clearAllDropDown: E
   };
 }
-function ut() {
-  function i(e) {
-    var u, h;
+function ft() {
+  function r(e) {
+    var u, m;
     if (!e)
       return !1;
     const n = ((u = e.targetContainer) == null ? void 0 : u.componentInstance) && e.targetContainer.componentInstance.value;
     if (!n)
       return !1;
-    const a = (h = n.schema.appearance) == null ? void 0 : h.class;
+    const a = (m = n.schema.appearance) == null ? void 0 : m.class;
     if (e.controlCategory === "input" || e.controlType === "form-group") {
-      const C = n.schema.type, I = (C === "response-form" || C === "content-container") && a && a.includes("farris-form");
-      if (n.schema.type !== "response-layout-item" && !I)
+      const v = n.schema.type, M = (v === "response-form" || v === "content-container") && a && a.includes("farris-form");
+      if (n.schema.type !== "response-layout-item" && !M)
         return !1;
     }
     return e.controlType !== "field-set";
   }
   return {
-    basalDragulaRuleForContainer: i
+    basalDragulaRuleForContainer: r
   };
 }
-const ft = "https://json-schema.org/draft/2020-12/schema", mt = "https://farris-design.gitee.io/dragging-rules.schema.json", gt = "Dragging Rules", yt = "The rules of designer canvas", ht = "object", bt = {
+const mt = "https://json-schema.org/draft/2020-12/schema", gt = "https://farris-design.gitee.io/dragging-rules.schema.json", yt = "Dragging Rules", ht = "The rules of designer canvas", bt = "object", vt = {
   "f-page": {
     description: "The root class of page designed by farris.",
     type: "object",
@@ -1836,108 +1839,109 @@ const ft = "https://json-schema.org/draft/2020-12/schema", mt = "https://farris-
     description: "",
     type: "object"
   }
-}, vt = [], Ct = {
-  $schema: ft,
-  $id: mt,
-  title: gt,
-  description: yt,
-  type: ht,
-  properties: bt,
-  required: vt
+}, Ct = [], wt = {
+  $schema: mt,
+  $id: gt,
+  title: yt,
+  description: ht,
+  type: bt,
+  properties: vt,
+  required: Ct
 }, J = /* @__PURE__ */ new Map();
 function xe() {
-  function i(r, g, y, x) {
+  function r(s, y, h, x) {
     var O;
-    if (typeof y == "number")
-      return ((O = x[r]) == null ? void 0 : O.length) === y;
-    if (typeof y == "object") {
-      const k = Object.keys(y)[0], A = y[k];
+    if (typeof h == "number")
+      return ((O = x[s]) == null ? void 0 : O.length) === h;
+    if (typeof h == "object") {
+      const k = Object.keys(h)[0], A = h[k];
       if (k === "not")
-        return Number(x[r].length) !== Number(A);
+        return Number(x[s].length) !== Number(A);
       if (k === "moreThan")
-        return Number(x[r].length) >= Number(A);
+        return Number(x[s].length) >= Number(A);
       if (k === "lessThan")
-        return Number(x[r].length) <= Number(A);
+        return Number(x[s].length) <= Number(A);
     }
     return !1;
   }
-  function e(r, g, y, x) {
-    return typeof y == "boolean" ? x.childrenClassList.includes(g) === !!y : !1;
+  function e(s, y, h, x) {
+    return typeof h == "boolean" ? x.childrenClassList.includes(y) === !!h : !1;
   }
-  function n(r, g, y, x) {
-    return typeof y == "boolean" ? x.parentClassList.includes(g) === !!y : !1;
+  function n(s, y, h, x) {
+    return typeof h == "boolean" ? x.parentClassList.includes(y) === !!h : !1;
   }
-  function a(r, g, y, x) {
-    return typeof y == "boolean" ? x.parentClassList.includes(g) === !!y : !1;
+  function a(s, y, h, x) {
+    return typeof h == "boolean" ? x.parentClassList.includes(y) === !!h : !1;
   }
   const u = /* @__PURE__ */ new Map([
-    ["length", i],
+    ["length", r],
     ["hasChildren", e],
     ["hasSibling", a],
     ["hasParent", n]
   ]);
-  function h(r, g) {
-    const y = r;
-    return typeof g == "number" ? [{ target: y, operator: "length", param: null, value: Number(g) }] : typeof g == "object" ? Object.keys(g).map((x) => {
+  function m(s, y) {
+    const h = s;
+    return typeof y == "number" ? [{ target: h, operator: "length", param: null, value: Number(y) }] : typeof y == "object" ? Object.keys(y).map((x) => {
       if (x === "length")
-        return { target: y, operator: "length", param: null, value: g[x] };
-      const O = x, k = g[x];
-      return { target: y, operator: r === "children" ? "hasChildren" : r === "parent" ? "hasParent" : "hasSibling", param: O, value: k };
+        return { target: h, operator: "length", param: null, value: y[x] };
+      const O = x, k = y[x];
+      return { target: h, operator: s === "children" ? "hasChildren" : s === "parent" ? "hasParent" : "hasSibling", param: O, value: k };
     }) : [];
   }
-  function C(r, g) {
-    if (u.has(r.operator)) {
-      const y = u.get(r.operator);
-      return y && y(r.target, r.param, r.value, g) || !1;
+  function v(s, y) {
+    if (u.has(s.operator)) {
+      const h = u.get(s.operator);
+      return h && h(s.target, s.param, s.value, y) || !1;
     }
     return !1;
   }
-  function I(r, g) {
-    return Object.keys(r).reduce((k, A) => {
-      const N = h(A, r[A]);
+  function M(s, y) {
+    return Object.keys(s).reduce((k, A) => {
+      const N = m(A, s[A]);
       return k.push(...N), k;
-    }, []).reduce((k, A) => k && C(A, g), !0);
+    }, []).reduce((k, A) => k && v(A, y), !0);
   }
-  function S(r, g) {
-    const y = Object.keys(r), x = y.includes("allOf"), O = y.includes("anyOf"), k = x || O, D = (k ? r[k ? x ? "allOf" : "anyOf" : "allOf"] : [r]).map((P) => I(P, g));
+  function S(s, y) {
+    const h = Object.keys(s), x = h.includes("allOf"), O = h.includes("anyOf"), k = x || O, D = (k ? s[k ? x ? "allOf" : "anyOf" : "allOf"] : [s]).map((P) => M(P, y));
     return x ? !D.includes(!1) : D.includes(!0);
   }
-  function m(r, g) {
-    const y = r.const;
-    return y ? typeof y == "boolean" ? y : typeof y == "object" ? S(y, g) : !1 : !1;
-  }
-  function v(r) {
-    return (g) => {
-      const y = { canAccept: !0, fixed: !1, hidePadding: !1 };
-      return r && r.properties && Object.keys(r.properties).reduce((x, O) => {
-        const k = r.properties[O];
-        return x[O] = m(k, g), x;
-      }, y), y;
+  function g(s, y) {
+    const h = s.const;
+    return h ? typeof h == "boolean" ? h : typeof h == "object" ? S(h, y) : !1 : !1;
+  }
+  function C(s) {
+    return (y) => {
+      const h = { canAccept: !0, fixed: !1, hidePadding: !1 };
+      return s && s.properties && Object.keys(s.properties).reduce((x, O) => {
+        const k = s.properties[O];
+        return x[O] = g(k, y), x;
+      }, h), h;
     };
   }
-  function p(r, g, y) {
-    if (g.type === "object" && g.properties) {
-      const { rules: x, contents: O } = g.properties;
-      y.set(r, v(x)), O && Object.keys(O.properties).forEach(
-        (k) => p(k, O.properties[k], y)
+  function p(s, y, h) {
+    if (y.type === "object" && y.properties) {
+      const { rules: x, contents: O } = y.properties;
+      h.set(s, C(x)), O && Object.keys(O.properties).forEach(
+        (k) => p(k, O.properties[k], h)
       );
     }
   }
   function c() {
-    const { properties: r } = Ct;
-    Object.keys(r).forEach((g) => {
-      p(g, r[g], J);
+    const { properties: s } = wt;
+    Object.keys(s).forEach((y) => {
+      p(y, s[y], J);
     });
   }
-  function d(r, g) {
-    const y = { canAccept: !0, fixed: !1, hidePadding: !0 };
-    return J.has(r) ? J.get(r)(g) : y;
+  function d(s, y) {
+    const h = { canAccept: !0, fixed: !1, hidePadding: !0 };
+    return J.has(s) ? J.get(s)(y) : h;
   }
   return c(), { getRuleValue: d };
 }
 class Se {
   static getEditorTypesByMDataType(e) {
-    return this.fieldControlTypeMapping[e];
+    const n = this.fieldControlTypeMapping[e];
+    return n || [{ key: "", value: "" }];
   }
 }
 /**
@@ -1945,57 +1949,57 @@ class Se {
  */
 F(Se, "fieldControlTypeMapping", {
   String: [
-    { key: M["input-group"].type, value: M["input-group"].name },
-    { key: M.lookup.type, value: M.lookup.name },
-    { key: M.Image.type, value: M.Image.name },
-    { key: M["date-picker"].type, value: M["date-picker"].name },
-    { key: M["check-box"].type, value: M["check-box"].name },
-    { key: M["radio-group"].type, value: M["radio-group"].name },
-    { key: M["combo-list"].type, value: M["combo-list"].name },
-    { key: M.textarea.type, value: M.textarea.name }
+    { key: I["input-group"].type, value: I["input-group"].name },
+    { key: I.lookup.type, value: I.lookup.name },
+    { key: I.Image.type, value: I.Image.name },
+    { key: I["date-picker"].type, value: I["date-picker"].name },
+    { key: I["check-box"].type, value: I["check-box"].name },
+    { key: I["radio-group"].type, value: I["radio-group"].name },
+    { key: I["combo-list"].type, value: I["combo-list"].name },
+    { key: I.textarea.type, value: I.textarea.name }
     // { key: DgControl.Tags.type, value: DgControl.Tags.name },
   ],
   Text: [
-    { key: M.textarea.type, value: M.textarea.name },
-    { key: M.avatar.type, value: M.avatar.name },
-    { key: M.lookup.type, value: M.lookup.name }
+    { key: I.textarea.type, value: I.textarea.name },
+    { key: I.avatar.type, value: I.avatar.name },
+    { key: I.lookup.type, value: I.lookup.name }
   ],
   Decimal: [
-    { key: M["number-spinner"].type, value: M["number-spinner"].name }
+    { key: I["number-spinner"].type, value: I["number-spinner"].name }
   ],
   Integer: [
-    { key: M["number-spinner"].type, value: M["number-spinner"].name }
+    { key: I["number-spinner"].type, value: I["number-spinner"].name }
   ],
   Number: [
-    { key: M["number-spinner"].type, value: M["number-spinner"].name }
+    { key: I["number-spinner"].type, value: I["number-spinner"].name }
   ],
   BigNumber: [
-    { key: M["number-spinner"].type, value: M["number-spinner"].name }
+    { key: I["number-spinner"].type, value: I["number-spinner"].name }
   ],
   Date: [
-    { key: M["date-picker"].type, value: M["date-picker"].name }
+    { key: I["date-picker"].type, value: I["date-picker"].name }
   ],
   DateTime: [
-    { key: M["date-picker"].type, value: M["date-picker"].name }
+    { key: I["date-picker"].type, value: I["date-picker"].name }
   ],
   Boolean: [
-    { key: M.switch.type, value: M.switch.name },
-    { key: M["check-box"].type, value: M["check-box"].name }
+    { key: I.switch.type, value: I.switch.name },
+    { key: I["check-box"].type, value: I["check-box"].name }
   ],
   Enum: [
-    { key: M["combo-list"].type, value: M["combo-list"].name },
-    { key: M["radio-group"].type, value: M["radio-group"].name }
+    { key: I["combo-list"].type, value: I["combo-list"].name },
+    { key: I["radio-group"].type, value: I["radio-group"].name }
   ],
   Object: [
-    { key: M.lookup.type, value: M.lookup.name },
-    { key: M["combo-list"].type, value: M["combo-list"].name },
-    { key: M["radio-group"].type, value: M["radio-group"].name }
+    { key: I.lookup.type, value: I.lookup.name },
+    { key: I["combo-list"].type, value: I["combo-list"].name },
+    { key: I["radio-group"].type, value: I["radio-group"].name }
   ],
   EmployeeSelector: [
-    { key: M.EmployeeSelector.type, value: M.EmployeeSelector.name }
+    { key: I.EmployeeSelector.type, value: I.EmployeeSelector.name }
   ],
   AdminOrganizationSelector: [
-    { key: M.AdminOrganizationSelector.type, value: M.AdminOrganizationSelector.name }
+    { key: I.AdminOrganizationSelector.type, value: I.AdminOrganizationSelector.name }
   ]
 });
 class ae {
@@ -2009,13 +2013,18 @@ class ae {
     F(this, "designViewModelField");
     F(this, "controlCreatorUtils");
     F(this, "designerHostService");
+    F(this, "schemaService", null);
     F(this, "metadataService", null);
     F(this, "propertyConfig", {
       type: "object",
       categories: {}
     });
     var a;
-    this.componentId = e, this.designerHostService = n, this.eventsEditorUtils = n.eventsEditorUtils, this.formSchemaUtils = n.formSchemaUtils, this.formMetadataConverter = n.formMetadataConverter, this.viewModelId = ((a = this.formSchemaUtils) == null ? void 0 : a.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = n.designViewModelUtils, this.controlCreatorUtils = n.controlCreatorUtils, this.metadataService = n.metadataService;
+    this.componentId = e, this.designerHostService = n, this.eventsEditorUtils = n.eventsEditorUtils, this.formSchemaUtils = n.formSchemaUtils, this.formMetadataConverter = n.formMetadataConverter, this.viewModelId = ((a = this.formSchemaUtils) == null ? void 0 : a.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = n.designViewModelUtils, this.controlCreatorUtils = n.controlCreatorUtils, this.metadataService = n.metadataService, this.schemaService = n.schemaService;
+  }
+  getTableInfo() {
+    var e;
+    return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
   }
   setDesignViewModelField(e) {
     const n = e.binding && e.binding.type === "Form" && e.binding.field;
@@ -2030,6 +2039,7 @@ class ae {
   changeFieldEditorType(e, n) {
   }
   getBasicPropConfig(e) {
+    var a, u;
     var n = this;
     return this.setDesignViewModelField(e), {
       description: "Basic Information",
@@ -2051,7 +2061,8 @@ class ae {
             type: "combo-list",
             textField: "value",
             valueField: "key",
-            data: Se.getEditorTypesByMDataType(n.designViewModelField.type.name)
+            data: Se.getEditorTypesByMDataType(((u = (a = n.designViewModelField) == null ? void 0 : a.type) == null ? void 0 : u.name) || ""),
+            editable: !1
           }
         },
         label: {
@@ -2060,11 +2071,11 @@ class ae {
           $converter: "/converter/form-group-label.converter"
         }
       },
-      setPropertyRelates(a, u) {
-        if (a)
-          switch (a && a.propertyID) {
+      setPropertyRelates(m, v) {
+        if (m)
+          switch (m && m.propertyID) {
             case "type": {
-              n.changeControlType(e, a);
+              n.changeControlType(e, m);
               break;
             }
           }
@@ -2077,12 +2088,12 @@ class ae {
   * @param newControlType 新控件类型
   */
   changeControlType(e, n) {
-    var m, v, p, c, d;
+    var g, C, p, c, d;
     const a = n.propertyValue, u = this.formSchemaUtils.getComponentById(this.componentId);
-    let h = this.getControlParentContainer(e.id, u);
-    if (!h)
+    let m = this.getControlParentContainer(e.id, u);
+    if (!m)
       return;
-    const C = h.contents.findIndex((r) => r.id === e.id), I = h.contents[C];
+    const v = m.contents.findIndex((s) => s.id === e.id), M = m.contents[v];
     let S;
     this.designViewModelField && (this.designViewModelUtils.getDgViewModel(this.viewModelId).changeField(this.designViewModelField.id, {
       editor: {
@@ -2092,19 +2103,19 @@ class ae {
       require: this.designViewModelField.require,
       readonly: this.designViewModelField.readonly
     }, !1), S = this.controlCreatorUtils.setFormFieldProperty("Form", this.designViewModelField, null, a)), Object.assign(S, {
-      id: I.id,
-      appearance: I.appearance,
-      size: I.size,
-      label: I.label
+      id: M.id,
+      appearance: M.appearance,
+      size: M.size,
+      label: M.label
     }), Object.assign(S.editor, {
-      isTextArea: S.isTextArea && I.isTextArea,
+      isTextArea: S.isTextArea && M.isTextArea,
       type: a || "",
-      placeHolder: (m = I.editor) == null ? void 0 : m.placeHolder,
-      holdPlace: (v = I.editor) == null ? void 0 : v.holdPlace,
-      readonly: (p = I.editor) == null ? void 0 : p.readonly,
-      require: (c = I.editor) == null ? void 0 : c.require,
-      visible: (d = I.editor) == null ? void 0 : d.visible
-    }), h.contents.splice(C, 1, S);
+      placeHolder: (g = M.editor) == null ? void 0 : g.placeHolder,
+      holdPlace: (C = M.editor) == null ? void 0 : C.holdPlace,
+      readonly: (p = M.editor) == null ? void 0 : p.readonly,
+      require: (c = M.editor) == null ? void 0 : c.require,
+      visible: (d = M.editor) == null ? void 0 : d.visible
+    }), m.contents.splice(v, 1, S);
   }
   getAppearanceConfig(e = null) {
     return {
@@ -2174,7 +2185,7 @@ class ae {
     };
   }
 }
-class wt extends ae {
+class Tt extends ae {
   constructor(e, n) {
     super(e, n);
   }
@@ -2198,7 +2209,9 @@ class wt extends ae {
           description: "The type of a component.",
           editor: {
             type: "combo-list",
-            data: []
+            textField: "value",
+            valueField: "key",
+            data: [{ key: "response-toolbar", value: I["response-toolbar"].name }]
           }
         }
       }
@@ -2241,22 +2254,22 @@ class wt extends ae {
     };
   }
 }
-function Tt(i, e, n, a) {
-  const u = xe(), h = B(!1), C = B(!1);
-  let I = !0, S = !1, m;
-  function v(D) {
-    return m && m.componentClassList && m.componentClassList.includes("f-form-layout") && m.componentClassList.includes("farris-form") ? D.sourceType === "control" && D.controlCategory === "input" || D.sourceType === "move" && D.controlType === "form-group" : !0;
+function xt(r, e, n, a) {
+  const u = xe(), m = j(!1), v = j(!1);
+  let M = !0, S = !1, g;
+  function C(D) {
+    return g && g.componentClassList && g.componentClassList.includes("f-form-layout") && g.componentClassList.includes("farris-form") ? D.sourceType === "control" && D.controlCategory === "input" || D.sourceType === "move" && D.controlType === "form-group" : !0;
   }
   function p(D) {
-    return !ut().basalDragulaRuleForContainer(D) || !I || !v(D), !1;
+    return !ft().basalDragulaRuleForContainer(D) || !M || !C(D), !1;
   }
   function c() {
-    h.value = !1, C.value = !1;
-    const D = i, b = D.appearance && D.appearance.class || "", P = b.split(" "), E = D.buttons || [], l = E.length ? E[0] : null, o = l && l.appearance ? l.appearance.class : "", t = o ? o.split(" ") : [], s = E.length ? E.reduce((V, U) => {
+    m.value = !1, v.value = !1;
+    const D = r, b = D.appearance && D.appearance.class || "", P = b.split(" "), E = D.buttons || [], l = E.length ? E[0] : null, o = l && l.appearance ? l.appearance.class : "", t = o ? o.split(" ") : [], i = E.length ? E.reduce((V, U) => {
       const z = U && U.appearance ? U.appearance.class : "", Z = z ? z.split(" ") : [];
       return V.push(...Z), V;
     }, []) : [], f = n == null ? void 0 : n.schema, R = f && f.appearance && f.appearance.class || "", T = R ? R.split(" ") : [];
-    m = {
+    g = {
       componentClass: b,
       componentClassList: P,
       childContents: E,
@@ -2267,24 +2280,24 @@ function Tt(i, e, n, a) {
       parentClass: R,
       parentClassList: T,
       children: E,
-      childrenClassList: s
+      childrenClassList: i
     };
-    const { canAccept: j, fixed: _, hidePadding: L } = u.getRuleValue(P[0], m);
-    return I = j, S = L, !0;
+    const { canAccept: B, fixed: _, hidePadding: L } = u.getRuleValue(P[0], g);
+    return M = B, S = L, !0;
   }
   function d(D) {
   }
-  function r() {
-    return i.componentType ? "display:inherit;flex-direction:inherit;margin-bottom:10px" : "";
+  function s() {
+    return r.componentType ? "display:inherit;flex-direction:inherit;margin-bottom:10px" : "";
   }
-  function g(D, b) {
+  function y(D, b) {
     return b.text = D.label, b;
   }
-  function y(D, b, P) {
-    const E = i;
+  function h(D, b, P) {
+    const E = r;
     if ((E.appearance && E.appearance.class || "").split(" ").includes("f-form-layout")) {
-      const t = String(D.innerText), s = q("form-group");
-      return s.editor = P, s.label = t, s;
+      const t = String(D.innerText), i = q("form-group");
+      return i.editor = P, i.label = t, i;
     }
     return P;
   }
@@ -2301,25 +2314,25 @@ function Tt(i, e, n, a) {
     return S;
   }
   function N(D) {
-    return new wt(D, e).getPropertyConfig(i);
+    return new Tt(D, e).getPropertyConfig(r);
   }
   return {
     canAccepts: p,
     checkCanAddComponent: k,
     checkCanDeleteComponent: O,
     checkCanMoveComponent: x,
-    getStyles: r,
+    getStyles: s,
     hideNestedPaddingInDesginerView: A,
-    onAcceptNewChildElement: y,
+    onAcceptNewChildElement: h,
     onAcceptMovedChildElement: d,
-    onResolveNewComponentSchema: g,
+    onResolveNewComponentSchema: y,
     resolveComponentContext: c,
     getPropsConfig: N,
-    triggerBelongedComponentToMoveWhenMoved: h,
-    triggerBelongedComponentToDeleteWhenDeleted: C
+    triggerBelongedComponentToMoveWhenMoved: m,
+    triggerBelongedComponentToDeleteWhenDeleted: v
   };
 }
-const xt = {
+const St = {
   id: { type: String, default: "" },
   componentId: { type: String, default: "" },
   canAdd: { type: Boolean, default: !1 },
@@ -2332,58 +2345,58 @@ const xt = {
    * 组件值
    */
   modelValue: { type: Object }
-}, ee = B(0);
-function St(i, e) {
-  const n = e.getBoundingClientRect(), a = i.getBoundingClientRect(), u = a.top >= n.top, h = a.top <= n.bottom;
-  return u && h;
+}, ee = j(0);
+function Dt(r, e) {
+  const n = e.getBoundingClientRect(), a = r.getBoundingClientRect(), u = a.top >= n.top, m = a.top <= n.bottom;
+  return u && m;
 }
-function Dt(i) {
-  if (!i)
+function It(r) {
+  if (!r)
     return;
   let e;
-  if (i.className.includes("dgComponentSelected") ? e = i : e = i.querySelector(".dgComponentSelected"), !e)
+  if (r.className.includes("dgComponentSelected") ? e = r : e = r.querySelector(".dgComponentSelected"), !e)
     return;
   const n = e.getBoundingClientRect();
   if (n.width === 0 && n.height === 0)
     return;
   const a = e.querySelector(".component-btn-group");
   if (a) {
-    if (!St(e, i)) {
+    if (!Dt(e, r)) {
       a.style.display = "none";
       return;
     }
     a.style.display = "";
-    const h = a.getBoundingClientRect(), C = a.querySelector("div");
-    if (C) {
-      const I = C.getBoundingClientRect();
-      C.style.top = h.top + "px", C.style.left = h.left - I.width + "px";
+    const m = a.getBoundingClientRect(), v = a.querySelector("div");
+    if (v) {
+      const M = v.getBoundingClientRect();
+      v.style.top = m.top + "px", v.style.left = m.left - M.width + "px";
     }
   }
 }
-function Mt(i, e, n) {
+function Mt(r, e, n) {
   var N;
   function a() {
   }
-  const u = "", h = B();
-  function C() {
+  const u = "", m = j();
+  function v() {
     return !0;
   }
-  function I() {
+  function M() {
     return !1;
   }
   function S() {
     return !0;
   }
-  function m() {
+  function g() {
     return !0;
   }
-  function v() {
+  function C() {
     return !0;
   }
   function p(D) {
     if (!D || !D.value)
       return null;
-    const b = B(D == null ? void 0 : D.value.parent), P = p(b);
+    const b = j(D == null ? void 0 : D.value.parent), P = p(b);
     return P || null;
   }
   function c(D = e) {
@@ -2393,12 +2406,12 @@ function Mt(i, e, n) {
   function d(D) {
     return !!n;
   }
-  function r() {
+  function s() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function g() {
+  function y() {
   }
-  function y(D, b) {
+  function h(D, b) {
   }
   function x(D) {
     const { componentType: b } = D;
@@ -2408,86 +2421,88 @@ function Mt(i, e, n) {
   }
   function O(D, b) {
     const P = String(D.getAttribute("data-controltype")), E = D.getAttribute("data-feature"), l = E ? JSON.parse(E) : {};
-    l.parentComponentInstance = h.value;
+    l.parentComponentInstance = m.value;
     let o = q(P, l);
     const t = P.toLowerCase().replace("-", "_");
     return o && !o.id && o.type === P && (o.id = `${t}_${Math.random().toString().slice(2, 6)}`), o;
   }
   function k(D) {
   }
-  function A() {
+  function A(...D) {
     return [];
   }
-  return h.value = {
-    canMove: C(),
-    canSelectParent: I(),
-    canAdd: m(),
+  return m.value = {
+    canMove: v(),
+    canSelectParent: M(),
+    canAdd: g(),
     canDelete: S(),
-    canNested: !v(),
+    canNested: !C(),
     contents: [],
-    elementRef: i,
+    elementRef: r,
     parent: (N = e.parent) == null ? void 0 : N.componentInstance,
     schema: e.schema,
     styles: u,
     canAccepts: d,
     getBelongedComponentInstance: p,
     getDraggableDesignItemElement: c,
-    getDraggingDisplayText: r,
+    getDraggingDisplayText: s,
     getPropConfig: A,
-    getDragScopeElement: g,
-    onAcceptMovedChildElement: y,
+    getDragScopeElement: y,
+    onAcceptMovedChildElement: h,
     onAcceptNewChildElement: O,
     onChildElementMovedOut: k,
     addNewChildComponentSchema: x,
     updateDragAndDropRules: a,
-    triggerBelongedComponentToMoveWhenMoved: B(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: B(!1)
-  }, h;
+    triggerBelongedComponentToMoveWhenMoved: j(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: j(!1)
+  }, m;
 }
-const It = /* @__PURE__ */ Y({
+const Pt = /* @__PURE__ */ Y({
   name: "FDesignerInnerItem",
-  props: xt,
+  props: St,
   emits: ["selectionChange", "addComponent", "removeComponent"],
-  setup(i, e) {
-    const n = B(i.canMove), a = B(i.canAdd), u = B(i.canDelete), h = B(!1), C = B(i.contentKey), I = B(i.childType), S = B(i.childLabel), m = B(i.modelValue), v = B(""), p = B(), c = $("canvas-dragula"), d = B(), r = $("design-item-context"), g = {
+  setup(r, e) {
+    const n = j(r.canMove), a = j(r.canAdd), u = j(r.canDelete), m = j(!1), v = j(r.contentKey), M = j(r.childType), S = j(r.childLabel), g = j(r.modelValue), C = j(""), p = j(), c = $("canvas-dragula"), d = j(), s = $("design-item-context"), y = {
       designerItemElementRef: p,
       componentInstance: d,
-      schema: m.value,
-      parent: r,
+      schema: g.value,
+      parent: s,
       setupContext: e
     };
-    Re("design-item-context", g);
-    const y = W(() => ({
+    Re("design-item-context", y);
+    const h = W(() => ({
       "farris-component": !0,
+      // 受position-relative影响，整个容器的高度不能被撑起
+      "flex-fill": r.id == "root-component",
       "position-relative": n.value || u.value,
-      "farris-nested": h.value,
+      "farris-nested": m.value,
       "can-move": n.value,
       "d-none": p.value && p.value.classList.contains("d-none")
     })), x = W(() => {
       const t = {};
-      return v.value && v.value.split(";").reduce((s, f) => {
+      return C.value && C.value.split(";").reduce((i, f) => {
         const [R, T] = f.split(":");
-        return R && (s[R] = T), s;
+        return R && (i[R] = T), i;
       }, t), t;
     });
-    function O(t, s) {
-      if (r && r.schema[C.value]) {
-        const f = r.schema[C.value].findIndex((R) => R.id === s.id);
+    function O(t, i) {
+      if (s && s.schema[v.value]) {
+        const f = s.schema[v.value].findIndex((R) => R.id === i.id);
         if (f > -1) {
-          const R = r.schema[C.value].length, T = r.schema[C.value][f % R];
-          r.designerItemElementRef.value.querySelector(`#${T.id}-design-item`), r.schema[C.value].splice(f, 1), r.componentInstance.value.updateDragAndDropRules(), ee.value++, e.emit("removeComponent");
+          const R = s.schema[v.value].length, T = s.schema[v.value][f % R];
+          s.designerItemElementRef.value.querySelector(`#${T.id}-design-item`), s.schema[v.value].splice(f, 1), s.componentInstance.value.updateDragAndDropRules(), ee.value++, e.emit("removeComponent");
         }
       }
     }
     function k(t) {
       if (d.value.addNewChildComponentSchema) {
-        const s = {
-          componentType: I.value,
+        const i = {
+          componentType: M.value,
           label: S.value,
           parentComponentInstance: d.value,
           targetPosition: -1
-        }, f = d.value.addNewChildComponentSchema(s);
-        m.value[C.value].push(f), e.emit("addComponent");
+        }, f = d.value.addNewChildComponentSchema(i);
+        g.value[v.value].push(f), e.emit("addComponent");
       }
     }
     function A() {
@@ -2509,7 +2524,7 @@ const It = /* @__PURE__ */ Y({
         class: "btn component-settings-button",
         title: "删除",
         ref: "removeComponent",
-        onClick: Be((s) => O(s, t), ["stop"])
+        onClick: je((i) => O(i, t), ["stop"])
       }, [w("i", {
         class: "f-icon f-icon-yxs_delete"
       }, null)]);
@@ -2531,25 +2546,25 @@ const It = /* @__PURE__ */ Y({
         "data-noattach": "true"
       }, [w("div", null, [A(), D(), N(t)])]);
     }
-    Q(() => i.modelValue, (t) => {
-      m.value = t, g.schema = t;
+    Q(() => r.modelValue, (t) => {
+      g.value = t, y.schema = t;
     });
     function P(t) {
-      const s = t.target;
-      Dt(s);
+      const i = t.target;
+      It(i);
     }
     function E() {
-      var t, s;
-      (s = (t = m.value) == null ? void 0 : t.contents) != null && s.length && p.value && p.value.addEventListener("scroll", P);
+      var t, i;
+      (i = (t = g.value) == null ? void 0 : t.contents) != null && i.length && p.value && p.value.addEventListener("scroll", P);
     }
     function l() {
-      const t = p.value, s = B(t.children[1]);
-      return Mt(s, g).value;
+      const t = p.value, i = j(t.children[1]);
+      return Mt(i, y).value;
     }
     H(() => {
       if (p.value) {
-        const t = p.value.querySelector(`[data-dragref='${m.value.id}-container']`);
-        d.value = t && t.componentInstance ? t.componentInstance.value : l(), c && t && c.attachComponents(t, m.value), h.value = d.value.canNested !== void 0 ? d.value.canNested : h.value, a.value = d.value.canAdd !== void 0 ? d.value.canAdd : a.value, u.value = d.value.canDelete !== void 0 ? d.value.canDelete : u.value, n.value = d.value.canMove !== void 0 ? d.value.canMove : n.value, v.value = d.value.styles || "", p.value && (p.value.componentInstance = d, p.value.designItemContext = g);
+        const t = p.value.querySelector(`[data-dragref='${g.value.id}-container']`);
+        d.value = t && t.componentInstance ? t.componentInstance.value : l(), c && t && c.attachComponents(t, g.value), m.value = d.value.canNested !== void 0 ? d.value.canNested : m.value, a.value = d.value.canAdd !== void 0 ? d.value.canAdd : a.value, u.value = d.value.canDelete !== void 0 ? d.value.canDelete : u.value, n.value = d.value.canMove !== void 0 ? d.value.canMove : n.value, C.value = d.value.styles || "", p.value && (p.value.componentInstance = d, p.value.designItemContext = y);
       }
       E(), ee.value++;
     }), Ee(() => {
@@ -2557,27 +2572,27 @@ const It = /* @__PURE__ */ Y({
     });
     function o(t) {
       Array.from(document.getElementsByClassName("dgComponentFocused")).forEach((f) => f.classList.remove("dgComponentFocused")), t && (t.preventDefault(), t.stopPropagation());
-      const s = p.value;
-      if (s) {
+      const i = p.value;
+      if (i) {
         const f = document.getElementsByClassName("dgComponentSelected");
         if (!(f && f.length === 1 && f[0] === p.value)) {
-          Array.from(f).forEach((j) => j.classList.remove("dgComponentSelected")), s.classList.add("dgComponentFocused"), e.emit("selectionChange", m.value.type, m.value, i.componentId, d.value);
-          const T = d.value.getDraggableDesignItemElement(g);
+          Array.from(f).forEach((B) => B.classList.remove("dgComponentSelected")), i.classList.add("dgComponentFocused"), e.emit("selectionChange", g.value.type, g.value, r.componentId, d.value);
+          const T = d.value.getDraggableDesignItemElement(y);
           T && T.value && T.value.classList.add("dgComponentSelected");
         }
       }
       ee.value++;
     }
     return () => w("div", {
-      id: `${i.id}-design-item`,
+      id: `${r.id}-design-item`,
       ref: p,
-      class: y.value,
+      class: h.value,
       style: x.value,
       onClick: o
-    }, [b(m.value), e.slots.default && e.slots.default()]);
+    }, [b(g.value), e.slots.default && e.slots.default()]);
   }
 });
-class Pt extends ae {
+class kt extends ae {
   constructor(e, n) {
     super(e, n);
   }
@@ -2640,8 +2655,8 @@ class Pt extends ae {
       }
     ];
     var a = this;
-    const u = a.eventsEditorUtils.formProperties(e, a.viewModelId, n), h = {};
-    h[a.viewModelId] = {
+    const u = a.eventsEditorUtils.formProperties(e, a.viewModelId, n), m = {};
+    m[a.viewModelId] = {
       type: "events-editor",
       editor: {
         initialData: u
@@ -2649,19 +2664,19 @@ class Pt extends ae {
     }, this.propertyConfig.categories.eventsEditor = {
       title: "事件",
       hideTitle: !0,
-      properties: h,
+      properties: m,
       // 这个属性，标记当属性变更得时候触发重新更新属性
       refreshPanelAfterChanged: !0,
       tabId: "commands",
       tabName: "交互",
-      setPropertyRelates(C, I) {
-        const S = C.propertyValue;
+      setPropertyRelates(v, M) {
+        const S = v.propertyValue;
         delete e[a.viewModelId], S && (S.setPropertyRelates = this.setPropertyRelates, a.eventsEditorUtils.saveRelatedParameters(e, a.viewModelId, S.events, S));
       }
     };
   }
 }
-class kt extends ae {
+class Rt extends ae {
   constructor(e, n) {
     super(e, n);
   }
@@ -2685,7 +2700,9 @@ class kt extends ae {
           description: "The type of a component.",
           editor: {
             type: "combo-list",
-            data: []
+            textField: "value",
+            valueField: "key",
+            data: [{ key: "response-toolbar-item", value: I["response-toolbar-item"].name }]
           }
         },
         text: {
@@ -2710,8 +2727,8 @@ class kt extends ae {
         label: "click",
         name: "点击事件"
       }
-    ], a = this, u = a.eventsEditorUtils.formProperties(e, a.viewModelId, n), h = {};
-    h[a.viewModelId] = {
+    ], a = this, u = a.eventsEditorUtils.formProperties(e, a.viewModelId, n), m = {};
+    m[a.viewModelId] = {
       type: "events-editor",
       editor: {
         initialData: u
@@ -2719,37 +2736,37 @@ class kt extends ae {
     }, this.propertyConfig.categories.eventsEditor = {
       title: "事件",
       hideTitle: !0,
-      properties: h,
+      properties: m,
       // 这个属性，标记当属性变更得时候触发重新更新属性
       refreshPanelAfterChanged: !0,
       tabId: "commands",
       tabName: "交互",
-      setPropertyRelates(C, I) {
-        const S = C.propertyValue;
+      setPropertyRelates(v, M) {
+        const S = v.propertyValue;
         delete e[a.viewModelId], S && (S.setPropertyRelates = this.setPropertyRelates, a.eventsEditorUtils.saveRelatedParameters(e, a.viewModelId, S.events, S));
       }
     };
   }
 }
-function Rt(i, e) {
+function Et(r, e) {
   xe();
-  const n = B(!1), a = B(!1);
-  let u = !1, h = !1;
-  function C(y) {
+  const n = j(!1), a = j(!1);
+  let u = !1, m = !1;
+  function v(h) {
     return !1;
   }
-  function I(y) {
+  function M(h) {
   }
   function S() {
     return "";
   }
-  function m(y, x) {
-    return x.text = y.label, x;
+  function g(h, x) {
+    return x.text = h.label, x;
   }
-  function v(y, x, O) {
-    const k = i.schema;
+  function C(h, x, O) {
+    const k = r.schema;
     if ((k.appearance && k.appearance.class || "").split(" ").includes("f-form-layout")) {
-      const D = String(y.innerText), b = q("form-group");
+      const D = String(h.innerText), b = q("form-group");
       return b.editor = O, b.label = D, b;
     }
     return O;
@@ -2758,36 +2775,36 @@ function Rt(i, e) {
     return !1;
   }
   function c() {
-    return !h;
+    return !m;
   }
   function d() {
     return !1;
   }
-  function r() {
+  function s() {
     return u;
   }
-  function g(y) {
+  function y(h) {
     let x;
-    switch (i.schema.type) {
+    switch (r.schema.type) {
       case "tab-toolbar-item":
-        x = new Pt(y, e);
+        x = new kt(h, e);
         break;
       default:
-        x = new kt(y, e);
+        x = new Rt(h, e);
     }
-    return x.getPropertyConfig(i.schema);
+    return x.getPropertyConfig(r.schema);
   }
   return {
-    canAccepts: C,
+    canAccepts: v,
     checkCanAddComponent: d,
     checkCanDeleteComponent: c,
     checkCanMoveComponent: p,
     getStyles: S,
-    hideNestedPaddingInDesginerView: r,
-    onAcceptNewChildElement: v,
-    onAcceptMovedChildElement: I,
-    onResolveNewComponentSchema: m,
-    getPropsConfig: g,
+    hideNestedPaddingInDesginerView: s,
+    onAcceptNewChildElement: C,
+    onAcceptMovedChildElement: M,
+    onResolveNewComponentSchema: g,
+    getPropsConfig: y,
     triggerBelongedComponentToMoveWhenMoved: n,
     triggerBelongedComponentToDeleteWhenDeleted: a
   };
@@ -2796,30 +2813,30 @@ const De = /* @__PURE__ */ Y({
   name: "FResponseToolbarItemDesign",
   props: we,
   emits: ["Click"],
-  setup(i, e) {
-    B(), B();
-    const n = B(i.alignment), a = {
+  setup(r, e) {
+    j(), j();
+    const n = j(r.alignment), a = {
       id: "__more_buttons__",
       text: "More"
-    }, u = B(new G(a));
+    }, u = j(new G(a));
     W(() => u.value.children.length > 0);
-    const h = B(), C = $("designer-host-service"), I = $("design-item-context"), S = Rt(I, C), m = fe(h, I, S);
+    const m = j(), v = $("designer-host-service"), M = $("design-item-context"), S = Et(M, v), g = fe(m, M, S);
     $("toolbar-item-handler", () => {
     }), H(() => {
-      h.value.componentInstance = m;
-    }), e.expose(m.value);
-    function v() {
+      m.value.componentInstance = g;
+    }), e.expose(g.value);
+    function C() {
       const d = {
         "f-icon": !0
       };
-      if (i.icon) {
-        const r = i.icon.trim().split(" ");
-        r && r.length && r.reduce((g, y) => (g[y] = !0, g), d);
+      if (r.icon) {
+        const s = r.icon.trim().split(" ");
+        s && s.length && s.reduce((y, h) => (y[h] = !0, y), d);
       }
       return d;
     }
     function p() {
-      return !!(i.icon && i.icon.trim());
+      return !!(r.icon && r.icon.trim());
     }
     function c() {
       const d = {
@@ -2827,59 +2844,59 @@ const De = /* @__PURE__ */ Y({
         "f-rt-btn": !0,
         "f-btn-ml": n.value === "right",
         "f-btn-mr": n.value === "left",
-        "btn-icontext": !!(i.icon && i.icon.trim())
+        "btn-icontext": !!(r.icon && r.icon.trim())
       };
-      if (i.class) {
-        const r = i.class.split(" ");
-        r && r.length && r.reduce((g, y) => (g[y] = !0, g), d);
+      if (r.class) {
+        const s = r.class.split(" ");
+        s && s.length && s.reduce((y, h) => (y[h] = !0, y), d);
       }
       return d;
     }
     return H(() => {
     }), ne(() => {
     }), () => w("div", {
-      ref: h,
-      "data-dragref": `${I.schema.id}-container`,
+      ref: m,
+      "data-dragref": `${M.schema.id}-container`,
       class: "farris-component position-relative",
       style: "display:inline-block!important;"
     }, [w("button", {
       type: "button",
       class: c(),
-      id: i.id
+      id: r.id
     }, [p() && w("i", {
-      class: v()
-    }, null), i.text])]);
+      class: C()
+    }, null), r.text])]);
   }
-}), Et = /* @__PURE__ */ Y({
+}), jt = /* @__PURE__ */ Y({
   name: "FResponseToolbarDesign",
-  props: se,
+  props: at,
   emits: ["Click"],
-  setup(i, e) {
-    const n = B(i.items);
-    let a = new Array(n.value.length).fill(B());
-    const u = B(), h = B(), C = B(i.alignment), I = {
+  setup(r, e) {
+    const n = j(r.items);
+    let a = new Array(n.value.length).fill(j());
+    const u = j(), m = j(), v = j(r.alignment), M = {
       id: "__more_buttons__",
       text: "More"
-    }, S = B(new G(I)), m = Te();
+    }, S = j(new G(M)), g = Te();
     W(() => S.value.children.length > 0);
-    const v = B(), p = $("designer-host-service"), c = $("design-item-context"), d = Tt(c.schema, p, c), r = fe(v, c, d);
+    const C = j(), p = $("designer-host-service"), c = $("design-item-context"), d = xt(c.schema, p, c), s = fe(C, c, d);
     $("toolbar-item-handler", () => {
     }), H(() => {
-      v.value.componentInstance = r;
-    }), e.expose(r.value);
-    const g = W(() => ({
+      C.value.componentInstance = s;
+    }), e.expose(s.value);
+    const y = W(() => ({
       "f-toolbar": !0,
       "f-response-toolbar": !0,
       "position-relative": !0
-    })), y = W(() => ({
+    })), h = W(() => ({
       "d-flex": !0,
       "flex-nowrap": !0,
-      "justify-content-end": C.value === "right",
-      "justify-content-start": C.value === "left"
+      "justify-content-end": v.value === "right",
+      "justify-content-start": v.value === "left"
     })), {
       renderToolbarDropdown: x,
       clearAllDropDown: O
-    } = dt(i, m, r);
+    } = ut(r, g, s);
     function k() {
       n.value.filter((l) => l.children && l.children.length > 0).forEach((l) => {
         l.expanded = !1;
@@ -2887,14 +2904,14 @@ const De = /* @__PURE__ */ Y({
     }
     const A = /* @__PURE__ */ new Map(), N = [];
     function D(l) {
-      const o = h.value;
+      const o = m.value;
       let t = l;
-      const s = Array.from(o.children), f = s[s.length - 1].id === "__more_buttons__" ? s[s.length - 1] : null;
+      const i = Array.from(o.children), f = i[i.length - 1].id === "__more_buttons__" ? i[i.length - 1] : null;
       if (f) {
         const L = f.computedStyleMap().get("margin-left"), V = f.computedStyleMap().get("margin-right"), U = (L ? L.value : 0) + f.getBoundingClientRect().width + (V ? V.value : 0);
         t -= U;
       }
-      const R = s.filter((L) => L.id !== "__more_buttons__");
+      const R = i.filter((L) => L.id !== "__more_buttons__");
       for (const L of R) {
         const V = L.computedStyleMap().get("margin-left"), U = L.computedStyleMap().get("margin-right"), z = (V ? V.value : 0) + L.getBoundingClientRect().width + (U ? U.value : 0);
         t < z ? (A.set(L.id, !0), N.push({
@@ -2912,12 +2929,12 @@ const De = /* @__PURE__ */ Y({
         }
       const T = Object.assign({}, S.value);
       T.children = [];
-      const j = new G(T), _ = n.value.reduce((L, V) => (A.has(V.id) && j.children.push(V), V.visible = !A.has(V.id), L.push(V), L), []);
-      S.value = j, n.value = _;
+      const B = new G(T), _ = n.value.reduce((L, V) => (A.has(V.id) && B.children.push(V), V.visible = !A.has(V.id), L.push(V), L), []);
+      S.value = B, n.value = _;
     }
     const b = new ResizeObserver((l) => {
       if (l.length) {
-        const t = l[0].contentRect.width, f = h.value.getBoundingClientRect().width;
+        const t = l[0].contentRect.width, f = m.value.getBoundingClientRect().width;
         (t < f || N.length) && D(t);
       }
     });
@@ -2926,32 +2943,32 @@ const De = /* @__PURE__ */ Y({
       b.observe(l), document.body.addEventListener("click", k);
     }), ne(() => {
       b.disconnect(), document.body.removeEventListener("click", k);
-    }), Q(() => i.items, () => {
-      n.value = i.items;
+    }), Q(() => r.items, () => {
+      n.value = r.items;
     }, {
       deep: !0
     }), Q(n, (l) => {
-      a = new Array(n.value.length).fill(B());
+      a = new Array(n.value.length).fill(j());
     });
-    function P(l, o, t, s) {
-      c && c.setupContext && c.setupContext.emit("selectionChange", l, o, t, s);
+    function P(l, o, t, i) {
+      c && c.setupContext && c.setupContext.emit("selectionChange", l, o, t, i);
     }
     function E() {
-      const l = h.value.querySelector(".dgComponentFocused.dgComponentSelected");
+      const l = m.value.querySelector(".dgComponentFocused.dgComponentSelected");
       l == null || l.classList.remove("dgComponentSelected"), l == null || l.classList.remove("dgComponentFocused");
     }
     return () => w("div", {
-      ref: v,
+      ref: C,
       "data-dragref": `${c.schema.id}-container`,
-      class: g.value
+      class: y.value
     }, [w("div", {
       ref: u,
-      class: y.value
+      class: h.value
     }, [w("div", {
-      ref: h,
+      ref: m,
       class: "d-inline-block f-response-content",
       style: "white-space: nowrap;"
-    }, [n.value.map((l, o) => w(It, {
+    }, [n.value.map((l, o) => w(Pt, {
       ref: a[o],
       class: "p-0 display-inline-block",
       modelValue: l,
@@ -2960,7 +2977,7 @@ const De = /* @__PURE__ */ Y({
       childType: "response-toolbar-item",
       childLabel: "按钮",
       contentKey: "buttons",
-      componentId: l.id,
+      componentId: r.componentId,
       id: l.id,
       style: "padding:0 !important;display:inline-block",
       onSelectionChange: P,
@@ -2970,23 +2987,24 @@ const De = /* @__PURE__ */ Y({
         id: l.id,
         disable: l.disable,
         text: l.text,
-        icon: l.icon
+        icon: l.icon,
+        componentId: r.componentId
       }, null)]
     }))])])]);
   }
-}), Nt = ie;
-X.register = (i, e, n) => {
-  i["response-toolbar"] = X, e["response-toolbar"] = ie;
+}), Vt = ie;
+X.register = (r, e, n) => {
+  r["response-toolbar"] = X, e["response-toolbar"] = ie;
 };
-X.registerDesigner = (i, e, n) => {
-  i["response-toolbar"] = Et, e["response-toolbar"] = ie, i["response-toolbar-item"] = De, e["response-toolbar-item"] = at;
+X.registerDesigner = (r, e, n) => {
+  r["response-toolbar"] = jt, e["response-toolbar"] = ie, r["response-toolbar-item"] = De, e["response-toolbar-item"] = ct;
 };
-const Vt = Ae(X);
+const _t = Ae(X);
 export {
   X as FResponseToolbar,
   G as ResponseToolbarDropDownItem,
-  Lt as ResponseToolbarGroup,
+  Nt as ResponseToolbarGroup,
   Fe as ResponseToolbarItem,
-  Vt as default,
-  Nt as responseToolbarResolver
+  _t as default,
+  Vt as responseToolbarResolver
 };