@farris/ui-vue 1.3.0 → 1.3.3

package/components/layout/index.esm.js

@@ -1,115 +1,159 @@
-import { ref as C, computed as D, defineComponent as $, provide as W, createVNode as B, watch as ee, inject as E, onMounted as q } from "vue";
-import { isPlainObject as V, cloneDeep as te } from "lodash-es";
+import { ref as z, computed as M, defineComponent as E, provide as q, createVNode as S, watch as te, inject as D, onMounted as W } from "vue";
+import { isPlainObject as V, cloneDeep as ne } from "lodash-es";
 import "bignumber.js";
-const Y = {}, X = {};
-function N(t) {
-  const { properties: e, title: n, ignore: o } = t, r = o && Array.isArray(o), l = Object.keys(e).reduce((s, m) => ((!r || !o.find((w) => w == m)) && (s[m] = e[m].type === "object" && e[m].properties ? N(e[m]) : te(e[m].default)), s), {});
-  return (!r || !o.find((s) => s == "id")) && (l.id = `${n}-${Date.now()}`), l;
+const G = {}, Y = {};
+function L(t) {
+  const { properties: e, title: n, ignore: o } = t, r = o && Array.isArray(o), l = Object.keys(e).reduce((u, v) => ((!r || !o.find((P) => P === v)) && (u[v] = e[v].type === "object" && e[v].properties ? L(e[v]) : ne(e[v].default)), u), {});
+  if (n && (!r || !o.find((u) => u === "id"))) {
+    const u = n.toLowerCase().replace(/-/g, "_");
+    l.id = `${u}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return l;
 }
-function T(t, e = {}, n) {
-  const o = Y[t];
+function X(t, e = {}, n) {
+  const o = G[t];
   if (o) {
-    let r = N(o);
-    const l = X[t];
-    return r = l ? l({ getSchemaByType: T }, r, e, n) : r, r;
+    let r = L(o);
+    const l = Y[t];
+    return r = l ? l({ getSchemaByType: X }, r, e, n) : r, r;
   }
   return null;
 }
-function ne(t, e) {
-  const n = N(e);
-  return Object.keys(t).reduce((o, r) => (o[r] && V(o[r]) && V(t[r]) ? Object.assign(o[r], t[r]) : o[r] = t[r], o), n), n;
-}
 function oe(t, e) {
+  const n = L(e);
+  return Object.keys(n).reduce((o, r) => (o[r] && V(o[r]) && V(t[r] || !t[r]) ? Object.assign(o[r], t[r] || {}) : o[r] = t[r], o), n), n;
+}
+function ae(t, e) {
   return Object.keys(t).filter((o) => t[o] != null).reduce((o, r) => {
     if (e.has(r)) {
       const l = e.get(r);
       if (typeof l == "string")
         o[l] = t[r];
       else {
-        const s = l(r, t[r], t);
-        Object.assign(o, s);
+        const u = l(r, t[r], t);
+        Object.assign(o, u);
       }
     } else
       o[r] = t[r];
     return o;
   }, {});
 }
-function ae(t, e, n = /* @__PURE__ */ new Map()) {
-  const o = ne(t, e);
-  return oe(o, n);
+function ie(t, e, n = /* @__PURE__ */ new Map()) {
+  const o = oe(t, e);
+  return ae(o, n);
 }
-function ie(t = {}) {
-  function e(a, p, c, g) {
+function re(t = {}) {
+  function e(i, f, c, b) {
     if (typeof c == "number")
-      return g[a].length === c;
+      return b[i].length === c;
     if (typeof c == "object") {
-      const O = Object.keys(c)[0], S = c[O];
-      if (O === "not")
-        return Number(g[a].length) !== Number(S);
-      if (O === "moreThan")
-        return Number(g[a].length) >= Number(S);
-      if (O === "lessThan")
-        return Number(g[a].length) <= Number(S);
+      const C = Object.keys(c)[0], O = c[C];
+      if (C === "not")
+        return Number(b[i].length) !== Number(O);
+      if (C === "moreThan")
+        return Number(b[i].length) >= Number(O);
+      if (C === "lessThan")
+        return Number(b[i].length) <= Number(O);
     }
     return !1;
   }
-  function n(a, p, c, g) {
-    return g[a] && g[a].propertyValue && String(g[a].propertyValue.value) === String(c);
+  function n(i, f, c, b) {
+    return b[i] && b[i].propertyValue && String(b[i].propertyValue.value) === String(c);
   }
   const o = /* @__PURE__ */ new Map([
     ["length", e],
     ["getProperty", n]
   ]);
-  Object.keys(t).reduce((a, p) => (a.set(p, t[p]), a), o);
-  function r(a, p) {
-    const c = a;
-    return typeof p == "number" ? [{ target: c, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: c, operator: "getProperty", param: a, value: !!p }] : typeof p == "object" ? Object.keys(p).map((g) => {
-      if (g === "length")
-        return { target: c, operator: "length", param: null, value: p[g] };
-      const O = g, S = p[g];
-      return { target: c, operator: "getProperty", param: O, value: S };
+  Object.keys(t).reduce((i, f) => (i.set(f, t[f]), i), o);
+  function r(i, f) {
+    const c = i;
+    return typeof f == "number" ? [{ target: c, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: c, operator: "getProperty", param: i, value: !!f }] : typeof f == "object" ? Object.keys(f).map((b) => {
+      if (b === "length")
+        return { target: c, operator: "length", param: null, value: f[b] };
+      const C = b, O = f[b];
+      return { target: c, operator: "getProperty", param: C, value: O };
     }) : [];
   }
-  function l(a) {
-    return Object.keys(a).reduce((c, g) => {
-      const O = r(g, a[g]);
-      return c.push(...O), c;
+  function l(i) {
+    return Object.keys(i).reduce((c, b) => {
+      const C = r(b, i[b]);
+      return c.push(...C), c;
     }, []);
   }
-  function s(a, p) {
-    if (o.has(a.operator)) {
-      const c = o.get(a.operator);
-      return c && c(a.target, a.param, a.value, p) || !1;
+  function u(i, f) {
+    if (o.has(i.operator)) {
+      const c = o.get(i.operator);
+      return c && c(i.target, i.param, i.value, f) || !1;
     }
     return !1;
   }
-  function m(a, p) {
-    return l(a).reduce((O, S) => O && s(S, p), !0);
+  function v(i, f) {
+    return l(i).reduce((C, O) => C && u(O, f), !0);
   }
-  function w(a, p) {
-    const c = Object.keys(a), g = c.includes("allOf"), O = c.includes("anyOf"), S = g || O, u = (S ? a[S ? g ? "allOf" : "anyOf" : "allOf"] : [a]).map((h) => m(h, p));
-    return g ? !u.includes(!1) : u.includes(!0);
+  function P(i, f) {
+    const c = Object.keys(i), b = c.includes("allOf"), C = c.includes("anyOf"), O = b || C, p = (O ? i[O ? b ? "allOf" : "anyOf" : "allOf"] : [i]).map((d) => v(d, f));
+    return b ? !p.includes(!1) : p.includes(!0);
   }
-  return { parseValueSchema: w };
+  return { parseValueSchema: P };
 }
-const re = {}, le = {};
-ie();
-function _(t, e, n = /* @__PURE__ */ new Map(), o = (s, m, w) => m, r = {}, l = (s) => s) {
-  return Y[e.title] = e, X[e.title] = o, re[e.title] = r, le[e.title] = l, (s = {}) => {
-    const m = ae(s, e, n), w = Object.keys(t).reduce((a, p) => (a[p] = t[p].default, a), {});
-    return Object.assign(w, m);
+const H = {
+  button: { type: "button", name: "按钮", icon: "Button" },
+  "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" },
+  "input-group": { type: "input-group", name: "文本", icon: "TextBox" },
+  textarea: { type: "textarea", name: "多行文本", icon: "MultiTextBox" },
+  lookup: { type: "lookup", name: "帮助", icon: "LookupEdit" },
+  "number-spinner": { type: "number-spinner", name: "数值", icon: "NumericBox" },
+  "date-picker": { type: "date-picker", name: "日期", icon: "DateBox" },
+  switch: { type: "switch", name: "开关", icon: "SwitchField" },
+  "radio-group": { type: "radio-group", name: "单选组", icon: "RadioGroup" },
+  "check-box": { type: "check-box", name: "复选框", icon: "CheckBox" },
+  "check-group": { type: "check-group", name: "复选框组", icon: "CheckGroup" },
+  "combo-list": { type: "combo-list", name: "下拉列表", icon: "EnumField" },
+  "response-form": { type: "response-form", name: "卡片面板", icon: "Form" },
+  "response-layout": { type: "response-layout", name: "布局容器", icon: "ResponseLayout3" },
+  "response-layout-item": { type: "response-layout-item", name: "布局", icon: "ResponseLayout1" },
+  "tree-grid": { type: "tree-grid", name: "树表格", icon: "TreeGrid" },
+  "tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
+  "data-grid": { type: "data-grid", name: "表格", icon: "DataGrid" },
+  "data-grid-column": { type: "data-grid-column", name: "表格列" },
+  module: { type: "Module", name: "模块", icon: "Module" },
+  component: { type: "component", name: "组件", icon: "Component" },
+  tabs: { type: "tabs", name: "标签页", icon: "Tab" },
+  "tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
+  "tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮", icon: "Button" },
+  "time-picker": { type: "time-picker", name: "时间选择", icon: "TimePicker" },
+  section: { type: "section", name: "分组面板", icon: "Section" },
+  "section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
+  "section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
+  splitter: { type: "splitter", name: "分栏面板", icon: "Splitter" },
+  "splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
+  "component-ref": { type: "component-ref", name: "组件引用节点" },
+  uploader: { type: "uploader", name: "附件上传", icon: "FileUpload" },
+  "page-header": { type: "page-header", name: "页头", icon: "Header" },
+  "page-footer": { type: "page-footer", name: "页脚", icon: "ModalFooter" },
+  "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏", icon: "TabToolbar" },
+  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" },
+  "query-solution": { type: "query-solution", name: "筛选方案", icon: "QueryScheme" }
+}, le = {}, se = {};
+re();
+function _(t, e, n = /* @__PURE__ */ new Map(), o = (u, v, P, i) => v, r = {}, l = (u) => u) {
+  return G[e.title] = e, Y[e.title] = o, le[e.title] = r, se[e.title] = l, (u = {}) => {
+    const v = ie(u, e, n), P = Object.keys(t).reduce((i, f) => (i[f] = t[f].default, i), {});
+    return Object.assign(P, v);
   };
 }
-function se(t, e) {
+function ce(t, e) {
   return { customClass: e.class, customStyle: e.style };
 }
-const J = /* @__PURE__ */ new Map([
-  ["appearance", se]
+const U = /* @__PURE__ */ new Map([
+  ["appearance", ce]
 ]);
-function G(t, e, n) {
+function Q(t, e, n) {
   return e;
 }
-const ce = "https://json-schema.org/draft/2020-12/schema", ue = "https://farris-design.gitee.io/layout.schema.json", fe = "layout", pe = "A Farris Container Component", ye = "object", me = {
+const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-design.gitee.io/layout.schema.json", fe = "layout", ye = "A Farris Container Component", me = "object", de = {
   id: {
     description: "The unique identifier for layout component",
     type: "string"
@@ -152,19 +196,19 @@ const ce = "https://json-schema.org/draft/2020-12/schema", ue = "https://farris-
     type: "boolean",
     default: !0
   }
-}, de = [
+}, he = [
   "id",
   "type",
   "contents"
-], he = {
-  $schema: ce,
-  $id: ue,
+], ve = {
+  $schema: ue,
+  $id: pe,
   title: fe,
-  description: pe,
-  type: ye,
-  properties: me,
-  required: de
-}, ve = "layout", ge = "A Farris Component", be = "object", ze = {
+  description: ye,
+  type: me,
+  properties: de,
+  required: he
+}, be = "layout", ge = "A Farris Component", ze = "object", Pe = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -199,96 +243,96 @@ const ce = "https://json-schema.org/draft/2020-12/schema", ue = "https://farris-
       }
     }
   }
-}, Ce = {
-  title: ve,
+}, we = {
+  title: be,
   description: ge,
-  type: be,
-  categories: ze
-}, L = {
+  type: ze,
+  categories: Pe
+}, F = {
   customStyle: { type: String, defaut: "" },
   customClass: { type: String, defaut: "" }
-}, Q = _(L, he, J, G, Ce);
-function U(t) {
-  const e = C(-1), n = C(-1), o = C(0), r = C(0), l = C(!1), s = C(!1), m = D(() => ({
+}, J = _(F, ve, U, Q, we);
+function Z(t) {
+  const e = z(-1), n = z(-1), o = z(0), r = z(0), l = z(!1), u = z(!1), v = M(() => ({
     display: l.value ? "block" : "none",
     left: `${o.value}px`,
     cursor: "e-resize"
-  })), w = D(() => ({
-    display: s.value ? "block" : "none",
+  })), P = M(() => ({
+    display: u.value ? "block" : "none",
     top: `${r.value}px`,
     cursor: "n-resize"
-  })), a = D(() => ({
-    display: s.value || l.value ? "block" : "none"
+  })), i = M(() => ({
+    display: u.value || l.value ? "block" : "none"
   }));
-  function p(b, u, d, h) {
-    const H = t.value;
-    if (H) {
-      const { left: v, right: i, width: y } = H.getBoundingClientRect();
-      let f = b.clientX - v;
-      h === "right" && (f = i - b.clientX), f > u && (f = u), f < d && (f = d), h === "right" && (f = y - f), o.value = f;
+  function f(h, p, m, d) {
+    const R = t.value;
+    if (R) {
+      const { left: a, right: s, width: g } = R.getBoundingClientRect();
+      let y = h.clientX - a;
+      d === "right" && (y = s - h.clientX), y > p && (y = p), y < m && (y = m), d === "right" && (y = g - y), o.value = y;
     }
   }
-  function c(b, u, d, h) {
-    const H = t.value;
-    if (H) {
-      const { top: v, bottom: i, height: y } = H.getBoundingClientRect();
-      let f = b.clientY - v;
-      h === "bottom" && (f = i - b.clientY), f > u && (f = u), f < d && (f = d), h === "bottom" && (f = y - f), r.value = f;
+  function c(h, p, m, d) {
+    const R = t.value;
+    if (R) {
+      const { top: a, bottom: s, height: g } = R.getBoundingClientRect();
+      let y = h.clientY - a;
+      d === "bottom" && (y = s - h.clientY), y > p && (y = p), y < m && (y = m), d === "bottom" && (y = g - y), r.value = y;
     }
   }
-  function g() {
-    const b = t.value;
-    if (b) {
-      const { width: u, height: d } = b.getBoundingClientRect();
-      return { width: u, height: d };
+  function b() {
+    const h = t.value;
+    if (h) {
+      const { width: p, height: m } = h.getBoundingClientRect();
+      return { width: p, height: m };
     }
     return null;
   }
-  function O() {
-    const b = t.value;
-    return b ? Array.from(b.querySelectorAll("[data-position]")).reduce((u, d) => {
-      const h = d.getAttribute("data-position");
-      return u = Object.assign(u, { [h]: d }), u;
+  function C() {
+    const h = t.value;
+    return h ? Array.from(h.querySelectorAll("[data-position]")).reduce((p, m) => {
+      const d = m.getAttribute("data-position");
+      return p = Object.assign(p, { [d]: m }), p;
     }, {}) : null;
   }
-  function S(b, u) {
-    const d = g(), h = O();
-    if (d && h) {
-      const H = h == null ? void 0 : h.right, v = h == null ? void 0 : h.left;
-      if (b === "left" && v)
-        return H ? d.width - H.clientWidth - u : d.width - u;
-      if (b === "right" && H)
-        return v ? d.width - v.clientWidth - u : d.width - u;
+  function O(h, p) {
+    const m = b(), d = C();
+    if (m && d) {
+      const R = d == null ? void 0 : d.right, a = d == null ? void 0 : d.left;
+      if (h === "left" && a)
+        return R ? m.width - R.clientWidth - p : m.width - p;
+      if (h === "right" && R)
+        return a ? m.width - a.clientWidth - p : m.width - p;
     }
   }
-  function P(b, u) {
-    const d = g(), h = O();
-    if (d && h) {
-      const H = h == null ? void 0 : h.bottom, v = h == null ? void 0 : h.top;
-      if (b === "top" && v)
-        return H ? d.height - H.clientHeight - u : d.height - u;
-      if (b === "bottom" && H)
-        return v ? d.height - v.clientHeight - u : d.height - u;
+  function w(h, p) {
+    const m = b(), d = C();
+    if (m && d) {
+      const R = d == null ? void 0 : d.bottom, a = d == null ? void 0 : d.top;
+      if (h === "top" && a)
+        return R ? m.height - R.clientHeight - p : m.height - p;
+      if (h === "bottom" && R)
+        return a ? m.height - a.clientHeight - p : m.height - p;
     }
   }
   return {
-    horizontalResizeHandleStyle: m,
-    verticalResizeHandleStyle: w,
-    resizeOverlayStyle: a,
+    horizontalResizeHandleStyle: v,
+    verticalResizeHandleStyle: P,
+    resizeOverlayStyle: i,
     showHorizontalResizeHandle: l,
-    showVerticalResizeHandle: s,
+    showVerticalResizeHandle: u,
     horizontalResizeBarPosition: e,
     verticalResizeBarPosition: n,
     verticalResizeHandleOffset: r,
     horizontalResizeHandleOffset: o,
-    draggingHorizontalResizeHandle: p,
+    draggingHorizontalResizeHandle: f,
     draggingVerticalResizeHandle: c,
-    getPanelMaxHeight: P,
-    getPanelMaxWidth: S
+    getPanelMaxHeight: w,
+    getPanelMaxWidth: O
   };
 }
-const we = ["moz", "ms", "webkit"];
-function Pe() {
+const Ce = ["moz", "ms", "webkit"];
+function Be() {
   let t = 0;
   return (e) => {
     const n = (/* @__PURE__ */ new Date()).getTime(), o = Math.max(0, 16 - (n - t)), r = setTimeout(() => {
@@ -297,19 +341,19 @@ function Pe() {
     return t = n + o, r;
   };
 }
-function Oe() {
+function Re() {
   if (typeof window > "u")
     return () => 0;
   if (window.requestAnimationFrame)
     return window.requestAnimationFrame.bind(window);
-  const t = we.filter((e) => `${e}RequestAnimationFrame` in window)[0];
-  return t ? window[`${t}RequestAnimationFrame`] : Pe();
+  const t = Ce.filter((e) => `${e}RequestAnimationFrame` in window)[0];
+  return t ? window[`${t}RequestAnimationFrame`] : Be();
 }
-Oe();
-function Se(t, e) {
+Re();
+function Oe(t, e) {
   return ((e == null ? void 0 : e.split(" ")) || []).reduce((o, r) => (r && (o[r] = !0), o), t), t;
 }
-function He(t, e) {
+function Se(t, e) {
   return ((e == null ? void 0 : e.split(";")) || []).reduce((o, r) => {
     if (r) {
       const l = r.split(":");
@@ -318,38 +362,38 @@ function He(t, e) {
     return o;
   }, t), t;
 }
-const A = /* @__PURE__ */ $({
+const j = /* @__PURE__ */ E({
   name: "FLayout",
-  props: L,
+  props: F,
   emits: [],
   setup(t, e) {
-    const n = C(), o = U(n), {
+    const n = z(), o = Z(n), {
       horizontalResizeHandleStyle: r,
       verticalResizeHandleStyle: l,
-      resizeOverlayStyle: s
+      resizeOverlayStyle: u
     } = o;
-    W("layout", {
+    q("layout", {
       useResizeHandleComposition: o
     });
-    const m = D(() => Se({
+    const v = M(() => Oe({
       "f-layout": !0
-    }, t == null ? void 0 : t.customClass)), w = D(() => He({}, t == null ? void 0 : t.customStyle));
-    return () => B("div", {
-      class: m.value,
-      style: w.value,
+    }, t == null ? void 0 : t.customClass)), P = M(() => Se({}, t == null ? void 0 : t.customStyle));
+    return () => S("div", {
+      class: v.value,
+      style: P.value,
       ref: n
-    }, [e.slots.default && e.slots.default(), B("div", {
+    }, [e.slots.default && e.slots.default(), S("div", {
       class: "f-layout-resize-overlay",
-      style: s.value
-    }, null), B("div", {
+      style: u.value
+    }, null), S("div", {
       class: "f-layout-horizontal-resize-proxy",
       style: r.value
-    }, null), B("div", {
+    }, null), S("div", {
       class: "f-layout-vertical-resize-proxy",
       style: l.value
     }, null)]);
   }
-}), Me = "https://json-schema.org/draft/2020-12/schema", je = "https://farris-design.gitee.io/layout-pane.schema.json", Be = "layout-pane", De = "A Farris Container Component", Ae = "object", Re = {
+}), ke = "https://json-schema.org/draft/2020-12/schema", Me = "https://farris-design.gitee.io/layout-pane.schema.json", Te = "layout-pane", He = "A Farris Container Component", je = "object", De = {
   id: {
     description: "The unique identifier for a layout pane",
     type: "string"
@@ -413,13 +457,13 @@ const A = /* @__PURE__ */ $({
     default: !0
   }
 }, Ee = {
-  $schema: Me,
-  $id: je,
-  title: Be,
-  description: De,
-  type: Ae,
-  properties: Re
-}, $e = "layout-pane", Te = "A Farris Container Component", ke = "object", Ne = {
+  $schema: ke,
+  $id: Me,
+  title: Te,
+  description: He,
+  type: je,
+  properties: De
+}, $e = "layout-pane", Ae = "A Farris Container Component", Le = "object", Fe = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -452,7 +496,7 @@ const A = /* @__PURE__ */ $({
     description: "Appearance",
     properties: {
       class: {
-        title: "class",
+        title: "class样式",
         type: "string",
         description: ""
       },
@@ -514,12 +558,12 @@ const A = /* @__PURE__ */ $({
       }
     }
   }
-}, Le = {
+}, Ne = {
   title: $e,
-  description: Te,
-  type: ke,
-  categories: Ne
-}, F = {
+  description: Ae,
+  type: Le,
+  categories: Fe
+}, N = {
   customClass: { type: String, defaut: "" },
   customStyle: { type: String, defaut: "" },
   /** 记录原始定义宽度 */
@@ -538,327 +582,317 @@ const A = /* @__PURE__ */ $({
   minWidth: { type: Number, default: 100 },
   /** 面板最小高度 */
   minHeight: { type: Number, default: 100 }
-}, Z = _(F, Ee, J, G, Le);
-function x(t, e, n, o, r) {
+}, x = _(N, Ee, U, Q, Ne);
+function K(t, e, n, o, r) {
   const {
     horizontalResizeBarPosition: l,
-    horizontalResizeHandleOffset: s,
-    showHorizontalResizeHandle: m,
-    showVerticalResizeHandle: w,
-    verticalResizeBarPosition: a,
-    verticalResizeHandleOffset: p,
+    horizontalResizeHandleOffset: u,
+    showHorizontalResizeHandle: v,
+    showVerticalResizeHandle: P,
+    verticalResizeBarPosition: i,
+    verticalResizeHandleOffset: f,
     draggingHorizontalResizeHandle: c,
-    draggingVerticalResizeHandle: g,
-    getPanelMaxHeight: O,
-    getPanelMaxWidth: S
+    draggingVerticalResizeHandle: b,
+    getPanelMaxHeight: C,
+    getPanelMaxWidth: O
   } = r;
-  let P = "", b, u, d;
-  function h(i) {
-    if ((P === "left" || P === "right") && u) {
-      const { left: y } = u.getBoundingClientRect(), { width: f } = b.getBoundingClientRect(), j = i.clientX - y;
-      let z = P === "left" ? (f || 0) + (j - l.value) : (f || 0) - (j - l.value);
-      z = n.value > 0 ? Math.max(n.value, z) : z;
-      const M = S(P, n.value);
-      M != null && (z = M > z ? z : M), t.value = z;
+  let w = "", h, p, m;
+  function d(s) {
+    if ((w === "left" || w === "right") && p) {
+      const { left: g } = p.getBoundingClientRect(), { width: y } = h.getBoundingClientRect(), T = s.clientX - g;
+      let B = w === "left" ? (y || 0) + (T - l.value) : (y || 0) - (T - l.value);
+      B = n.value > 0 ? Math.max(n.value, B) : B;
+      const k = O(w, n.value);
+      k != null && (B = k > B ? B : k), t.value = B;
     }
-    if ((P === "top" || P === "bottom") && u) {
-      const { top: y } = u.getBoundingClientRect(), { height: f } = b.getBoundingClientRect(), j = i.clientY - y;
-      let z = P === "top" ? (f || 0) + (j - a.value) : (f || 0) - (j - a.value);
-      z = o.value > 0 ? Math.max(o.value, z) : z;
-      const M = O(P, o.value);
-      M != null && (z = M > z ? z : M), e.value = z;
+    if ((w === "top" || w === "bottom") && p) {
+      const { top: g } = p.getBoundingClientRect(), { height: y } = h.getBoundingClientRect(), T = s.clientY - g;
+      let B = w === "top" ? (y || 0) + (T - i.value) : (y || 0) - (T - i.value);
+      B = o.value > 0 ? Math.max(o.value, B) : B;
+      const k = C(w, o.value);
+      k != null && (B = k > B ? B : k), e.value = B;
     }
-    s.value = 0, p.value = 0, l.value = -1, a.value = -1, m.value = !1, w.value = !1, document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", h), document.body.style.userSelect = "", P = "", b = null, u = null;
-  }
-  function H(i, y, f) {
-    if (P = y, b = f, m.value = !0, u = i.composedPath().find((z) => (z.className || "").split(" ")[0] === "f-layout"), u) {
-      const { left: z } = u.getBoundingClientRect(), M = i.clientX - z;
-      s.value = M, l.value = M;
-      const R = S(P, n.value) || 0;
-      d = (I) => c(I, R, n.value, P), document.addEventListener("mousemove", d), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
+    u.value = 0, f.value = 0, l.value = -1, i.value = -1, v.value = !1, P.value = !1, document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", d), document.body.style.userSelect = "", w = "", h = null, p = null;
+  }
+  function R(s, g, y) {
+    if (w = g, h = y, v.value = !0, p = s.composedPath().find((B) => (B.className || "").split(" ")[0] === "f-layout"), p) {
+      const { left: B } = p.getBoundingClientRect(), k = s.clientX - B;
+      u.value = k, l.value = k;
+      const $ = O(w, n.value) || 0;
+      m = (ee) => c(ee, $, n.value, w), document.addEventListener("mousemove", m), document.addEventListener("mouseup", d), document.body.style.userSelect = "none";
     }
   }
-  function v(i, y, f) {
-    if (P = y, b = f, w.value = !0, u = i.composedPath().find((z) => (z.className || "").split(" ")[0] === "f-layout"), u) {
-      const { top: z } = u.getBoundingClientRect();
-      p.value = i.clientY - z, a.value = i.clientY - z;
-      const M = O(P, o.value) || 0;
-      d = (R) => g(R, M, o.value, P), document.addEventListener("mousemove", d), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
+  function a(s, g, y) {
+    if (w = g, h = y, P.value = !0, p = s.composedPath().find((B) => (B.className || "").split(" ")[0] === "f-layout"), p) {
+      const { top: B } = p.getBoundingClientRect();
+      f.value = s.clientY - B, i.value = s.clientY - B;
+      const k = C(w, o.value) || 0;
+      m = ($) => b($, k, o.value, w), document.addEventListener("mousemove", m), document.addEventListener("mouseup", d), document.body.style.userSelect = "none";
     }
   }
-  return { onClickHorizontalResizeBar: H, onClickVerticalResizeBar: v };
+  return { onClickHorizontalResizeBar: R, onClickVerticalResizeBar: a };
 }
-const k = /* @__PURE__ */ $({
+const A = /* @__PURE__ */ E({
   name: "FLayoutPane",
-  props: F,
+  props: N,
   emits: [],
   setup(t, e) {
-    const n = C(t.minHeight <= 0 ? 100 : t.minHeight), o = C(t.minWidth <= 0 ? 100 : t.minWidth), r = C(t.width <= 0 ? 100 : t.width), l = C(t.height <= 100 ? 100 : t.height), s = C(Math.max(n.value, l.value)), m = C(Math.max(o.value, r.value)), w = C(), a = C(t.position), p = C(t.resizable);
-    ee(() => t.resizable, (v) => {
-      p.value = v;
+    const n = z(t.minHeight <= 0 ? 100 : t.minHeight), o = z(t.minWidth <= 0 ? 100 : t.minWidth), r = z(t.width <= 0 ? 100 : t.width), l = z(t.height <= 100 ? 100 : t.height), u = z(Math.max(n.value, l.value)), v = z(Math.max(o.value, r.value)), P = z(), i = z(t.position), f = z(t.resizable);
+    te(() => t.resizable, (a) => {
+      f.value = a;
     });
-    const c = E("layout"), {
-      useResizeHandleComposition: g
-    } = c, O = x(m, s, o, n, g), {
-      onClickHorizontalResizeBar: S,
-      onClickVerticalResizeBar: P
-    } = O, b = D(() => ({
+    const c = D("layout"), {
+      useResizeHandleComposition: b
+    } = c, C = K(v, u, o, n, b), {
+      onClickHorizontalResizeBar: O,
+      onClickVerticalResizeBar: w
+    } = C, h = M(() => ({
       "f-layout-resize-bar": !0,
-      "f-layout-resize-bar-e": a.value === "left",
-      "f-layout-resize-bar-n": a.value === "bottom",
-      "f-layout-resize-bar-s": a.value === "top",
-      "f-layout-resize-bar-w": a.value === "right"
-    })), u = D(() => a.value !== "center" && p.value);
-    function d(v, i) {
-      (i === "left" || i === "right") && S(v, i, w.value), (i === "top" || i === "bottom") && P(v, i, w.value);
+      "f-layout-resize-bar-e": i.value === "left",
+      "f-layout-resize-bar-n": i.value === "bottom",
+      "f-layout-resize-bar-s": i.value === "top",
+      "f-layout-resize-bar-w": i.value === "right"
+    })), p = M(() => i.value !== "center" && f.value);
+    function m(a, s) {
+      (s === "left" || s === "right") && O(a, s, P.value), (s === "top" || s === "bottom") && w(a, s, P.value);
     }
-    const h = D(() => {
-      const v = {
+    const d = M(() => {
+      const a = {
         "f-layout-pane": !0,
-        "f-page-content-nav": a.value === "left" || a.value === "right",
-        "f-page-content-main": a.value === "center"
+        "f-page-content-nav": i.value === "left" || i.value === "right",
+        "f-page-content-main": i.value === "center"
       };
-      return t.customClass && String(t.customClass).split(" ").reduce((i, y) => (i[y] = !0, i), v), v;
-    }), H = D(() => {
-      const v = {};
-      return (m.value && a.value === "left" || a.value === "right") && (v.width = `${m.value}px`), (s.value && a.value === "bottom" || a.value === "top") && (v.height = `${s.value}px`), t.visible || (v.display = "none"), v;
+      return t.customClass && String(t.customClass).split(" ").reduce((s, g) => (s[g] = !0, s), a), a;
+    }), R = M(() => {
+      const a = {};
+      return (v.value && i.value === "left" || i.value === "right") && (a.width = `${v.value}px`), (u.value && i.value === "bottom" || i.value === "top") && (a.height = `${u.value}px`), t.visible || (a.display = "none"), a;
     });
-    return () => B("div", {
-      ref: w,
+    return () => S("div", {
+      ref: P,
+      class: d.value,
+      style: R.value,
+      "data-position": i.value
+    }, [e.slots.default && e.slots.default(), p.value && S("span", {
       class: h.value,
-      style: H.value,
-      "data-position": a.value
-    }, [e.slots.default && e.slots.default(), u.value && B("span", {
-      class: b.value,
-      onMousedown: (v) => d(v, a.value)
+      onMousedown: (a) => m(a, i.value)
     }, null)]);
   }
 });
-function Fe(t, e) {
+function Ve(t, e) {
   function n() {
     return !1;
   }
   return { canAccepts: n };
 }
-function K(t, e, n) {
-  var v;
-  function o() {
-    n != null && n.resolveComponentContext && n.resolveComponentContext();
-  }
-  o();
-  const r = n && n.getStyles && n.getStyles() || "", l = n && n.getDesignerClass && n.getDesignerClass() || "", s = C();
-  function m() {
+function I(t, e, n) {
+  var R;
+  const o = n && n.getStyles && n.getStyles() || "", r = n && n.getDesignerClass && n.getDesignerClass() || "", l = z();
+  function u() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanMoveComponent ? n.checkCanMoveComponent() : !0;
   }
-  function w() {
+  function v() {
     return !1;
   }
-  function a() {
+  function P() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanDeleteComponent ? n.checkCanDeleteComponent() : !0;
   }
-  function p() {
+  function i() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : n && n.hideNestedPaddingInDesginerView ? n.hideNestedPaddingInDesginerView() : !1;
   }
-  function c(i) {
-    if (!i || !i.value)
+  function f(a) {
+    if (!a || !a.value)
       return null;
-    if (i.value.schema && i.value.schema.type === "component")
-      return i.value;
-    const y = C(i == null ? void 0 : i.value.parent), f = c(y);
-    return f || null;
+    if (a.value.schema && a.value.schema.type === "component")
+      return a.value;
+    const s = z(a == null ? void 0 : a.value.parent), g = f(s);
+    return g || null;
   }
-  function g(i = e) {
-    const { componentInstance: y, designerItemElementRef: f } = i;
-    return !y || !y.value ? null : y.value.canMove ? f : g(i.parent);
+  function c(a = e) {
+    const { componentInstance: s, designerItemElementRef: g } = a;
+    return !s || !s.value ? null : s.value.canMove ? g : c(a.parent);
   }
-  function O(i) {
-    return !!n && n.canAccepts(i);
+  function b(a) {
+    return !!n && n.canAccepts(a);
   }
-  function S() {
+  function C() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function P() {
-  }
-  function b(i, y) {
-    y && n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(y);
+  function O() {
   }
-  function u(i, y) {
-    const { componentType: f } = i;
-    let j = T(f, i, y);
-    n && n.onResolveNewComponentSchema && (j = n.onResolveNewComponentSchema(i, j));
-    const z = f.toLowerCase().replace("-", "_");
-    return j && !j.id && j.type === f && (j.id = `${z}_${Math.random().toString().slice(2, 6)}`), j;
+  function w(a, s) {
+    s && n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(s);
   }
-  function d(i, y) {
-    const f = String(i.getAttribute("data-controltype")), j = i.getAttribute("data-feature"), z = j ? JSON.parse(j) : {};
-    z.parentComponentInstance = s.value;
-    let M = T(f, z);
-    n && n.onAcceptNewChildElement && (M = n.onAcceptNewChildElement(i, y, M));
-    const R = f.toLowerCase().replace("-", "_");
-    return M && !M.id && M.type === f && (M.id = `${R}_${Math.random().toString().slice(2, 6)}`), M;
+  function h(a, s) {
+    const { componentType: g } = a;
+    let y = X(g, a, s);
+    n && n.onResolveNewComponentSchema && (y = n.onResolveNewComponentSchema(a, y));
+    const T = g.toLowerCase().replace(/-/g, "_");
+    return y && !y.id && y.type === g && (y.id = `${T}_${Math.random().toString().slice(2, 6)}`), y;
   }
-  function h(i) {
+  function p(a) {
   }
-  function H(...i) {
+  function m(...a) {
     if (n && n.getPropsConfig)
-      return n.getPropsConfig(...i);
+      return n.getPropsConfig(...a);
+  }
+  function d() {
+    n && n.onRemoveComponent && n.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((a) => {
+      var y;
+      let s = a.id;
+      a.type === "component-ref" && (s = a.component);
+      const g = t.value.querySelector(`#${s}-design-item`);
+      (y = g == null ? void 0 : g.componentInstance) != null && y.value.onRemoveComponent && g.componentInstance.value.onRemoveComponent();
+    });
   }
-  return s.value = {
-    canMove: m(),
-    canSelectParent: w(),
-    canDelete: a(),
-    canNested: !p(),
+  return l.value = {
+    canMove: u(),
+    canSelectParent: v(),
+    canDelete: P(),
+    canNested: !i(),
     contents: e == null ? void 0 : e.schema.contents,
     elementRef: t,
-    parent: (v = e == null ? void 0 : e.parent) == null ? void 0 : v.componentInstance,
+    parent: (R = e == null ? void 0 : e.parent) == null ? void 0 : R.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: r,
-    designerClass: l,
-    canAccepts: O,
-    getBelongedComponentInstance: c,
-    getDraggableDesignItemElement: g,
-    getDraggingDisplayText: S,
-    getPropConfig: H,
-    getDragScopeElement: P,
-    onAcceptMovedChildElement: b,
-    onAcceptNewChildElement: d,
-    onChildElementMovedOut: h,
-    addNewChildComponentSchema: u,
-    updateDragAndDropRules: o,
-    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || C(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || C(!1)
-  }, s;
+    styles: o,
+    designerClass: r,
+    canAccepts: b,
+    getBelongedComponentInstance: f,
+    getDraggableDesignItemElement: c,
+    getDraggingDisplayText: C,
+    getPropConfig: m,
+    getDragScopeElement: O,
+    onAcceptMovedChildElement: w,
+    onChildElementMovedOut: p,
+    addNewChildComponentSchema: h,
+    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || z(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || z(!1),
+    onRemoveComponent: d
+  }, l;
 }
-const Ve = /* @__PURE__ */ $({
+const qe = /* @__PURE__ */ E({
   name: "FLayoutDesign",
-  props: L,
+  props: F,
   emits: [],
   setup(t, e) {
-    var p;
-    const n = C(), o = E("design-item-context"), r = Fe(o.schema, (p = o.parent) == null ? void 0 : p.schema), l = K(n, o, r);
+    var f;
+    const n = z(), o = D("design-item-context"), r = Ve(o.schema, (f = o.parent) == null ? void 0 : f.schema), l = I(n, o, r);
     l.value.canNested = !1;
-    const s = U(n), {
-      horizontalResizeHandleStyle: m,
-      verticalResizeHandleStyle: w,
-      resizeOverlayStyle: a
-    } = s;
-    return W("layout", {
-      useResizeHandleComposition: s
-    }), q(() => {
+    const u = Z(n), {
+      horizontalResizeHandleStyle: v,
+      verticalResizeHandleStyle: P,
+      resizeOverlayStyle: i
+    } = u;
+    return q("layout", {
+      useResizeHandleComposition: u
+    }), W(() => {
       n.value.componentInstance = l;
-    }), e.expose(l.value), () => B("div", {
+    }), e.expose(l.value), () => S("div", {
       class: "f-layout f-page-content",
       ref: n
-    }, [e.slots.default && e.slots.default(), B("div", {
+    }, [e.slots.default && e.slots.default(), S("div", {
       class: "f-layout-resize-overlay",
-      style: a.value
-    }, null), B("div", {
+      style: i.value
+    }, null), S("div", {
       class: "f-layout-horizontal-resize-proxy",
-      style: m.value
-    }, null), B("div", {
+      style: v.value
+    }, null), S("div", {
       class: "f-layout-vertical-resize-proxy",
-      style: w.value
+      style: P.value
     }, null)]);
   }
 });
 function We() {
-  function t(e) {
-    var r, l;
+  function t(e, n) {
+    var u;
     if (!e)
       return !1;
-    const n = ((r = e.targetContainer) == null ? void 0 : r.componentInstance) && e.targetContainer.componentInstance.value;
-    if (!n)
+    const o = ((u = e.targetContainer) == null ? void 0 : u.componentInstance) && e.targetContainer.componentInstance.value;
+    if (!o)
       return !1;
-    const o = (l = n.schema.appearance) == null ? void 0 : l.class;
-    if (e.controlCategory === "input" || e.controlType === "form-group") {
-      const s = n.schema.type, m = (s === "response-form" || s === "content-container") && o && o.includes("farris-form");
-      if (n.schema.type !== "response-layout-item" && !m)
-        return !1;
-    }
-    return e.controlType !== "field-set";
+    const r = o.schema.type, l = n == null ? void 0 : n.formSchemaUtils.getComponentById(o.belongedComponentId);
+    return !((e.componentCategory === "input" || e.componentType === "form-group") && ![H["response-layout-item"].type, H["response-form"].type].includes(r) || (e.componentType === H.tabs.type || e.componentType === H.section.type) && ((l == null ? void 0 : l.componentType) !== "frame" || ![H["content-container"].type, H["splitter-pane"].type, H["response-layout-item"].type].includes(r)));
   }
   return {
     basalDragulaRuleForContainer: t
   };
 }
-function qe(t, e) {
-  function n(l) {
+function Ge(t, e) {
+  const n = t.schema;
+  function o(l) {
     return !!We().basalDragulaRuleForContainer(l);
   }
-  function o(l, s, m) {
-    return m;
-  }
   function r() {
     const l = ["f-layout-pane"];
-    return (t.position === "left" || t.position === "right") && l.push("f-page-content-nav"), t.position === "center" && l.push("f-page-content-main"), l.join(" ");
+    return (n.position === "left" || n.position === "right") && l.push("f-page-content-nav"), n.position === "center" && l.push("f-page-content-main"), l.join(" ");
   }
-  return { canAccepts: n, getDesignerClass: r, onAcceptNewChildElement: o };
+  return { canAccepts: o, getDesignerClass: r };
 }
-const Ye = /* @__PURE__ */ $({
+const Ye = /* @__PURE__ */ E({
   name: "FLayoutPaneDesign",
-  props: F,
+  props: N,
   emits: [],
   setup(t, e) {
-    var v;
-    const n = C(), o = C(), r = E("design-item-context"), l = qe(r.schema, (v = r.parent) == null ? void 0 : v.schema), s = K(o, r, l);
-    s.value.canNested = !1, s.value.canMove = !1, s.value.canDelete = !1, q(() => {
-      o.value.componentInstance = s;
-    }), e.expose(s.value);
-    const m = C(Math.max(t.minHeight, t.height)), w = C(Math.max(t.minWidth, t.width)), a = C(t.minHeight), p = C(t.minWidth), c = C(t.position), g = E("layout"), {
-      useResizeHandleComposition: O
-    } = g, S = x(w, m, p, a, O), {
-      onClickHorizontalResizeBar: P,
-      onClickVerticalResizeBar: b
-    } = S, u = D(() => ({
+    const n = z(), o = z();
+    D("designer-host-service");
+    const r = D("design-item-context"), l = Ge(r), u = I(o, r, l);
+    u.value.canNested = !1, u.value.canMove = !1, u.value.canDelete = !1, W(() => {
+      o.value.componentInstance = u;
+    }), e.expose(u.value);
+    const v = z(Math.max(t.minHeight, t.height)), P = z(Math.max(t.minWidth, t.width)), i = z(t.minHeight), f = z(t.minWidth), c = z(t.position), b = D("layout"), {
+      useResizeHandleComposition: C
+    } = b, O = K(P, v, f, i, C), {
+      onClickHorizontalResizeBar: w,
+      onClickVerticalResizeBar: h
+    } = O, p = M(() => ({
       "f-layout-resize-bar": !0,
       "f-layout-resize-bar-e": c.value === "left",
       "f-layout-resize-bar-n": c.value === "bottom",
       "f-layout-resize-bar-s": c.value === "top",
       "f-layout-resize-bar-w": c.value === "right"
     }));
-    function d(i, y) {
-      (y === "left" || y === "right") && P(i, y, n.value), (y === "top" || y === "bottom") && b(i, y, n.value);
+    function m(a, s) {
+      (s === "left" || s === "right") && w(a, s, n.value), (s === "top" || s === "bottom") && h(a, s, n.value);
     }
-    const h = D(() => {
-      const i = {
+    const d = M(() => {
+      const a = {
         "f-layout-pane": !0,
         "f-page-content-nav": c.value === "left" || c.value === "right",
         "f-page-content-main": c.value === "center"
       };
-      return t.customClass && String(t.customClass).split(" ").reduce((y, f) => (y[f] = !0, y), i), i;
-    }), H = D(() => {
-      const i = {
+      return t.customClass && String(t.customClass).split(" ").reduce((s, g) => (s[g] = !0, s), a), a;
+    }), R = M(() => {
+      const a = {
         flex: "1"
       };
-      return (w.value && c.value === "left" || c.value === "right") && (i.width = `${w.value}px`), (m.value && c.value === "bottom" || c.value === "top") && (i.height = `${m.value}px`), i;
+      return (P.value && c.value === "left" || c.value === "right") && (a.width = `${P.value}px`), (v.value && c.value === "bottom" || c.value === "top") && (a.height = `${v.value}px`), a;
     });
-    return () => B("div", {
+    return () => S("div", {
       ref: n,
-      class: h.value,
-      style: H.value
-    }, [B("div", {
+      class: d.value,
+      style: R.value
+    }, [S("div", {
       ref: o,
       class: "drag-container",
       "data-dragref": `${r.schema.id}-container`
-    }, [e.slots.default && e.slots.default()]), B("span", {
-      class: u.value,
-      onMousedown: (i) => d(i, c.value)
+    }, [e.slots.default && e.slots.default()]), S("span", {
+      class: p.value,
+      onMousedown: (a) => m(a, c.value)
     }, null)]);
   }
 });
-A.install = (t) => {
-  t.component(A.name, A), t.component(k.name, k);
+j.install = (t) => {
+  t.component(j.name, j), t.component(A.name, A);
 };
-A.register = (t, e, n, o) => {
-  t.layout = A, e.layout = Q, t["layout-pane"] = k, e["layout-pane"] = Z;
+j.register = (t, e, n, o) => {
+  t.layout = j, e.layout = J, t["layout-pane"] = A, e["layout-pane"] = x;
 };
-A.registerDesigner = (t, e, n) => {
-  t.layout = Ve, e.layout = Q, t["layout-pane"] = Ye, e["layout-pane"] = Z;
+j.registerDesigner = (t, e, n) => {
+  t.layout = qe, e.layout = J, t["layout-pane"] = Ye, e["layout-pane"] = x;
 };
 export {
-  A as FLayout,
-  k as FLayoutPane,
-  A as default,
-  L as layoutProps,
-  Q as layoutPropsResolver
+  j as FLayout,
+  A as FLayoutPane,
+  j as default,
+  F as layoutProps,
+  J as layoutPropsResolver
 };