@farris/ui-vue 1.3.1 → 1.3.3

package/components/layout/index.esm.js

@@ -1,10 +1,14 @@
-import { ref as g, computed as R, defineComponent as E, provide as W, createVNode as M, watch as te, inject as H, onMounted as q } from "vue";
+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 G = {}, Y = {};
 function L(t) {
-  const { properties: e, title: n, ignore: o } = t, r = o && Array.isArray(o), l = Object.keys(e).reduce((u, b) => ((!r || !o.find((z) => z == b)) && (u[b] = e[b].type === "object" && e[b].properties ? L(e[b]) : ne(e[b].default)), u), {});
-  return n && (!r || !o.find((u) => u == "id")) && (l.id = `${n}-${Date.now()}`), l;
+  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 X(t, e = {}, n) {
   const o = G[t];
@@ -17,7 +21,7 @@ function X(t, e = {}, n) {
 }
 function oe(t, e) {
   const n = L(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;
+  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) => {
@@ -39,22 +43,22 @@ function ie(t, e, n = /* @__PURE__ */ new Map()) {
   return ae(o, n);
 }
 function re(t = {}) {
-  function e(i, f, s, h) {
-    if (typeof s == "number")
-      return h[i].length === s;
-    if (typeof s == "object") {
-      const P = Object.keys(s)[0], k = s[P];
-      if (P === "not")
-        return Number(h[i].length) !== Number(k);
-      if (P === "moreThan")
-        return Number(h[i].length) >= Number(k);
-      if (P === "lessThan")
-        return Number(h[i].length) <= Number(k);
+  function e(i, f, c, b) {
+    if (typeof c == "number")
+      return b[i].length === c;
+    if (typeof c == "object") {
+      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(i, f, s, h) {
-    return h[i] && h[i].propertyValue && String(h[i].propertyValue.value) === String(s);
+  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],
@@ -62,37 +66,37 @@ function re(t = {}) {
   ]);
   Object.keys(t).reduce((i, f) => (i.set(f, t[f]), i), o);
   function r(i, f) {
-    const s = i;
-    return typeof f == "number" ? [{ target: s, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: s, operator: "getProperty", param: i, value: !!f }] : typeof f == "object" ? Object.keys(f).map((h) => {
-      if (h === "length")
-        return { target: s, operator: "length", param: null, value: f[h] };
-      const P = h, k = f[h];
-      return { target: s, operator: "getProperty", param: P, value: k };
+    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(i) {
-    return Object.keys(i).reduce((s, h) => {
-      const P = r(h, i[h]);
-      return s.push(...P), s;
+    return Object.keys(i).reduce((c, b) => {
+      const C = r(b, i[b]);
+      return c.push(...C), c;
     }, []);
   }
   function u(i, f) {
     if (o.has(i.operator)) {
-      const s = o.get(i.operator);
-      return s && s(i.target, i.param, i.value, f) || !1;
+      const c = o.get(i.operator);
+      return c && c(i.target, i.param, i.value, f) || !1;
     }
     return !1;
   }
-  function b(i, f) {
-    return l(i).reduce((P, k) => P && u(k, f), !0);
+  function v(i, f) {
+    return l(i).reduce((C, O) => C && u(O, f), !0);
   }
-  function z(i, f) {
-    const s = Object.keys(i), h = s.includes("allOf"), P = s.includes("anyOf"), k = h || P, p = (k ? i[k ? h ? "allOf" : "anyOf" : "allOf"] : [i]).map((m) => b(m, f));
-    return h ? !p.includes(!1) : p.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: z };
+  return { parseValueSchema: P };
 }
-const S = {
+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" },
@@ -130,22 +134,23 @@ const S = {
   "page-header": { type: "page-header", name: "页头", icon: "Header" },
   "page-footer": { type: "page-footer", name: "页脚", icon: "ModalFooter" },
   "tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏", icon: "TabToolbar" },
-  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" }
+  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" },
+  "query-solution": { type: "query-solution", name: "筛选方案", icon: "QueryScheme" }
 }, le = {}, se = {};
 re();
-function U(t, e, n = /* @__PURE__ */ new Map(), o = (u, b, z) => b, r = {}, l = (u) => u) {
+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 b = ie(u, e, n), z = Object.keys(t).reduce((i, f) => (i[f] = t[f].default, i), {});
-    return Object.assign(z, b);
+    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 ce(t, e) {
   return { customClass: e.class, customStyle: e.style };
 }
-const _ = /* @__PURE__ */ new Map([
+const U = /* @__PURE__ */ new Map([
   ["appearance", ce]
 ]);
-function J(t, e, n) {
+function Q(t, e, n) {
   return e;
 }
 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 = {
@@ -203,7 +208,7 @@ const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-
   type: me,
   properties: de,
   required: he
-}, be = "layout", ge = "A Farris Component", ze = "object", Ce = {
+}, be = "layout", ge = "A Farris Component", ze = "object", Pe = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -238,81 +243,81 @@ const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-
       }
     }
   }
-}, Pe = {
+}, we = {
   title: be,
   description: ge,
   type: ze,
-  categories: Ce
+  categories: Pe
 }, F = {
   customStyle: { type: String, defaut: "" },
   customClass: { type: String, defaut: "" }
-}, Q = U(F, ve, _, J, Pe);
+}, J = _(F, ve, U, Q, we);
 function Z(t) {
-  const e = g(-1), n = g(-1), o = g(0), r = g(0), l = g(!1), u = g(!1), b = R(() => ({
+  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"
-  })), z = R(() => ({
+  })), P = M(() => ({
     display: u.value ? "block" : "none",
     top: `${r.value}px`,
     cursor: "n-resize"
-  })), i = R(() => ({
+  })), i = M(() => ({
     display: u.value || l.value ? "block" : "none"
   }));
-  function f(v, p, y, m) {
-    const O = t.value;
-    if (O) {
-      const { left: a, right: c, width: w } = O.getBoundingClientRect();
-      let d = v.clientX - a;
-      m === "right" && (d = c - v.clientX), d > p && (d = p), d < y && (d = y), m === "right" && (d = w - d), o.value = d;
+  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 s(v, p, y, m) {
-    const O = t.value;
-    if (O) {
-      const { top: a, bottom: c, height: w } = O.getBoundingClientRect();
-      let d = v.clientY - a;
-      m === "bottom" && (d = c - v.clientY), d > p && (d = p), d < y && (d = y), m === "bottom" && (d = w - d), r.value = d;
+  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 h() {
-    const v = t.value;
-    if (v) {
-      const { width: p, height: y } = v.getBoundingClientRect();
-      return { width: p, height: y };
+  function b() {
+    const h = t.value;
+    if (h) {
+      const { width: p, height: m } = h.getBoundingClientRect();
+      return { width: p, height: m };
     }
     return null;
   }
-  function P() {
-    const v = t.value;
-    return v ? Array.from(v.querySelectorAll("[data-position]")).reduce((p, y) => {
-      const m = y.getAttribute("data-position");
-      return p = Object.assign(p, { [m]: y }), p;
+  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 k(v, p) {
-    const y = h(), m = P();
-    if (y && m) {
-      const O = m == null ? void 0 : m.right, a = m == null ? void 0 : m.left;
-      if (v === "left" && a)
-        return O ? y.width - O.clientWidth - p : y.width - p;
-      if (v === "right" && O)
-        return a ? y.width - a.clientWidth - p : y.width - p;
+  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 C(v, p) {
-    const y = h(), m = P();
-    if (y && m) {
-      const O = m == null ? void 0 : m.bottom, a = m == null ? void 0 : m.top;
-      if (v === "top" && a)
-        return O ? y.height - O.clientHeight - p : y.height - p;
-      if (v === "bottom" && O)
-        return a ? y.height - a.clientHeight - p : y.height - p;
+  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: b,
-    verticalResizeHandleStyle: z,
+    horizontalResizeHandleStyle: v,
+    verticalResizeHandleStyle: P,
     resizeOverlayStyle: i,
     showHorizontalResizeHandle: l,
     showVerticalResizeHandle: u,
@@ -321,12 +326,12 @@ function Z(t) {
     verticalResizeHandleOffset: r,
     horizontalResizeHandleOffset: o,
     draggingHorizontalResizeHandle: f,
-    draggingVerticalResizeHandle: s,
-    getPanelMaxHeight: C,
-    getPanelMaxWidth: k
+    draggingVerticalResizeHandle: c,
+    getPanelMaxHeight: w,
+    getPanelMaxWidth: O
   };
 }
-const we = ["moz", "ms", "webkit"];
+const Ce = ["moz", "ms", "webkit"];
 function Be() {
   let t = 0;
   return (e) => {
@@ -336,19 +341,19 @@ function Be() {
     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];
+  const t = Ce.filter((e) => `${e}RequestAnimationFrame` in window)[0];
   return t ? window[`${t}RequestAnimationFrame`] : Be();
 }
-Oe();
-function ke(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 Me(t, e) {
+function Se(t, e) {
   return ((e == null ? void 0 : e.split(";")) || []).reduce((o, r) => {
     if (r) {
       const l = r.split(":");
@@ -362,33 +367,33 @@ const j = /* @__PURE__ */ E({
   props: F,
   emits: [],
   setup(t, e) {
-    const n = g(), o = Z(n), {
+    const n = z(), o = Z(n), {
       horizontalResizeHandleStyle: r,
       verticalResizeHandleStyle: l,
       resizeOverlayStyle: u
     } = o;
-    W("layout", {
+    q("layout", {
       useResizeHandleComposition: o
     });
-    const b = R(() => ke({
+    const v = M(() => Oe({
       "f-layout": !0
-    }, t == null ? void 0 : t.customClass)), z = R(() => Me({}, t == null ? void 0 : t.customStyle));
-    return () => M("div", {
-      class: b.value,
-      style: z.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(), M("div", {
+    }, [e.slots.default && e.slots.default(), S("div", {
       class: "f-layout-resize-overlay",
       style: u.value
-    }, null), M("div", {
+    }, null), S("div", {
       class: "f-layout-horizontal-resize-proxy",
       style: r.value
-    }, null), M("div", {
+    }, null), S("div", {
       class: "f-layout-vertical-resize-proxy",
       style: l.value
     }, null)]);
   }
-}), Te = "https://json-schema.org/draft/2020-12/schema", Re = "https://farris-design.gitee.io/layout-pane.schema.json", De = "layout-pane", Se = "A Farris Container Component", je = "object", He = {
+}), 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"
@@ -452,13 +457,13 @@ const j = /* @__PURE__ */ E({
     default: !0
   }
 }, Ee = {
-  $schema: Te,
-  $id: Re,
-  title: De,
-  description: Se,
+  $schema: ke,
+  $id: Me,
+  title: Te,
+  description: He,
   type: je,
-  properties: He
-}, Ae = "layout-pane", $e = "A Farris Container Component", Le = "object", Fe = {
+  properties: De
+}, $e = "layout-pane", Ae = "A Farris Container Component", Le = "object", Fe = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -491,7 +496,7 @@ const j = /* @__PURE__ */ E({
     description: "Appearance",
     properties: {
       class: {
-        title: "class",
+        title: "class样式",
         type: "string",
         description: ""
       },
@@ -554,8 +559,8 @@ const j = /* @__PURE__ */ E({
     }
   }
 }, Ne = {
-  title: Ae,
-  description: $e,
+  title: $e,
+  description: Ae,
   type: Le,
   categories: Fe
 }, N = {
@@ -577,99 +582,99 @@ const j = /* @__PURE__ */ E({
   minWidth: { type: Number, default: 100 },
   /** 面板最小高度 */
   minHeight: { type: Number, default: 100 }
-}, x = U(N, Ee, _, J, Ne);
+}, x = _(N, Ee, U, Q, Ne);
 function K(t, e, n, o, r) {
   const {
     horizontalResizeBarPosition: l,
     horizontalResizeHandleOffset: u,
-    showHorizontalResizeHandle: b,
-    showVerticalResizeHandle: z,
+    showHorizontalResizeHandle: v,
+    showVerticalResizeHandle: P,
     verticalResizeBarPosition: i,
     verticalResizeHandleOffset: f,
-    draggingHorizontalResizeHandle: s,
-    draggingVerticalResizeHandle: h,
-    getPanelMaxHeight: P,
-    getPanelMaxWidth: k
+    draggingHorizontalResizeHandle: c,
+    draggingVerticalResizeHandle: b,
+    getPanelMaxHeight: C,
+    getPanelMaxWidth: O
   } = r;
-  let C = "", v, p, y;
-  function m(c) {
-    if ((C === "left" || C === "right") && p) {
-      const { left: w } = p.getBoundingClientRect(), { width: d } = v.getBoundingClientRect(), D = c.clientX - w;
-      let B = C === "left" ? (d || 0) + (D - l.value) : (d || 0) - (D - l.value);
+  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 T = k(C, n.value);
-      T != null && (B = T > B ? B : T), t.value = B;
+      const k = O(w, n.value);
+      k != null && (B = k > B ? B : k), t.value = B;
     }
-    if ((C === "top" || C === "bottom") && p) {
-      const { top: w } = p.getBoundingClientRect(), { height: d } = v.getBoundingClientRect(), D = c.clientY - w;
-      let B = C === "top" ? (d || 0) + (D - i.value) : (d || 0) - (D - i.value);
+    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 T = P(C, o.value);
-      T != null && (B = T > B ? B : T), e.value = B;
+      const k = C(w, o.value);
+      k != null && (B = k > B ? B : k), e.value = B;
     }
-    u.value = 0, f.value = 0, l.value = -1, i.value = -1, b.value = !1, z.value = !1, document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", m), document.body.style.userSelect = "", C = "", v = null, p = null;
-  }
-  function O(c, w, d) {
-    if (C = w, v = d, b.value = !0, p = c.composedPath().find((B) => (B.className || "").split(" ")[0] === "f-layout"), p) {
-      const { left: B } = p.getBoundingClientRect(), T = c.clientX - B;
-      u.value = T, l.value = T;
-      const A = k(C, n.value) || 0;
-      y = (ee) => s(ee, A, n.value, C), document.addEventListener("mousemove", y), document.addEventListener("mouseup", m), 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 a(c, w, d) {
-    if (C = w, v = d, z.value = !0, p = c.composedPath().find((B) => (B.className || "").split(" ")[0] === "f-layout"), p) {
+  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 = c.clientY - B, i.value = c.clientY - B;
-      const T = P(C, o.value) || 0;
-      y = (A) => h(A, T, o.value, C), document.addEventListener("mousemove", y), document.addEventListener("mouseup", m), document.body.style.userSelect = "none";
+      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: O, onClickVerticalResizeBar: a };
+  return { onClickHorizontalResizeBar: R, onClickVerticalResizeBar: a };
 }
-const $ = /* @__PURE__ */ E({
+const A = /* @__PURE__ */ E({
   name: "FLayoutPane",
   props: N,
   emits: [],
   setup(t, e) {
-    const n = g(t.minHeight <= 0 ? 100 : t.minHeight), o = g(t.minWidth <= 0 ? 100 : t.minWidth), r = g(t.width <= 0 ? 100 : t.width), l = g(t.height <= 100 ? 100 : t.height), u = g(Math.max(n.value, l.value)), b = g(Math.max(o.value, r.value)), z = g(), i = g(t.position), f = g(t.resizable);
+    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 s = H("layout"), {
-      useResizeHandleComposition: h
-    } = s, P = K(b, u, o, n, h), {
-      onClickHorizontalResizeBar: k,
-      onClickVerticalResizeBar: C
-    } = P, v = R(() => ({
+    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": 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 = R(() => i.value !== "center" && f.value);
-    function y(a, c) {
-      (c === "left" || c === "right") && k(a, c, z.value), (c === "top" || c === "bottom") && C(a, c, z.value);
+    })), 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 m = R(() => {
+    const d = M(() => {
       const a = {
         "f-layout-pane": !0,
         "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((c, w) => (c[w] = !0, c), a), a;
-    }), O = R(() => {
+      return t.customClass && String(t.customClass).split(" ").reduce((s, g) => (s[g] = !0, s), a), a;
+    }), R = M(() => {
       const a = {};
-      return (b.value && i.value === "left" || i.value === "right") && (a.width = `${b.value}px`), (u.value && i.value === "bottom" || i.value === "top") && (a.height = `${u.value}px`), t.visible || (a.display = "none"), 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 () => M("div", {
-      ref: z,
-      class: m.value,
-      style: O.value,
+    return () => S("div", {
+      ref: P,
+      class: d.value,
+      style: R.value,
       "data-position": i.value
-    }, [e.slots.default && e.slots.default(), p.value && M("span", {
-      class: v.value,
-      onMousedown: (a) => y(a, i.value)
+    }, [e.slots.default && e.slots.default(), p.value && S("span", {
+      class: h.value,
+      onMousedown: (a) => m(a, i.value)
     }, null)]);
   }
 });
@@ -680,118 +685,123 @@ function Ve(t, e) {
   return { canAccepts: n };
 }
 function I(t, e, n) {
-  var O;
-  function o() {
-    n != null && n.resolveComponentContext && n.resolveComponentContext();
-  }
-  o();
-  const r = n && n.getStyles && n.getStyles() || "", l = n && n.getDesignerClass && n.getDesignerClass() || "", u = g();
-  function b() {
+  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 z() {
+  function v() {
     return !1;
   }
-  function i() {
+  function P() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanDeleteComponent ? n.checkCanDeleteComponent() : !0;
   }
-  function f() {
+  function i() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : n && n.hideNestedPaddingInDesginerView ? n.hideNestedPaddingInDesginerView() : !1;
   }
-  function s(a) {
+  function f(a) {
     if (!a || !a.value)
       return null;
     if (a.value.schema && a.value.schema.type === "component")
       return a.value;
-    const c = g(a == null ? void 0 : a.value.parent), w = s(c);
-    return w || null;
+    const s = z(a == null ? void 0 : a.value.parent), g = f(s);
+    return g || null;
   }
-  function h(a = e) {
-    const { componentInstance: c, designerItemElementRef: w } = a;
-    return !c || !c.value ? null : c.value.canMove ? w : h(a.parent);
+  function c(a = e) {
+    const { componentInstance: s, designerItemElementRef: g } = a;
+    return !s || !s.value ? null : s.value.canMove ? g : c(a.parent);
   }
-  function P(a) {
+  function b(a) {
     return !!n && n.canAccepts(a);
   }
-  function k() {
+  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 C() {
+  function O() {
   }
-  function v(a, c) {
-    c && n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(c);
+  function w(a, s) {
+    s && n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(s);
   }
-  function p(a, c) {
-    const { componentType: w } = a;
-    let d = X(w, a, c);
-    n && n.onResolveNewComponentSchema && (d = n.onResolveNewComponentSchema(a, d));
-    const D = w.toLowerCase().replace("-", "_");
-    return d && !d.id && d.type === w && (d.id = `${D}_${Math.random().toString().slice(2, 6)}`), d;
+  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 y(a) {
+  function p(a) {
   }
   function m(...a) {
     if (n && n.getPropsConfig)
       return n.getPropsConfig(...a);
   }
-  return u.value = {
-    canMove: b(),
-    canSelectParent: z(),
-    canDelete: i(),
-    canNested: !f(),
+  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 l.value = {
+    canMove: u(),
+    canSelectParent: v(),
+    canDelete: P(),
+    canNested: !i(),
     contents: e == null ? void 0 : e.schema.contents,
     elementRef: t,
-    parent: (O = e == null ? void 0 : e.parent) == null ? void 0 : O.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: P,
-    getBelongedComponentInstance: s,
-    getDraggableDesignItemElement: h,
-    getDraggingDisplayText: k,
+    styles: o,
+    designerClass: r,
+    canAccepts: b,
+    getBelongedComponentInstance: f,
+    getDraggableDesignItemElement: c,
+    getDraggingDisplayText: C,
     getPropConfig: m,
-    getDragScopeElement: C,
-    onAcceptMovedChildElement: v,
-    onChildElementMovedOut: y,
-    addNewChildComponentSchema: p,
-    updateDragAndDropRules: o,
-    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || g(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || g(!1)
-  }, u;
+    getDragScopeElement: O,
+    onAcceptMovedChildElement: w,
+    onChildElementMovedOut: p,
+    addNewChildComponentSchema: h,
+    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || z(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || z(!1),
+    onRemoveComponent: d
+  }, l;
 }
-const We = /* @__PURE__ */ E({
+const qe = /* @__PURE__ */ E({
   name: "FLayoutDesign",
   props: F,
   emits: [],
   setup(t, e) {
     var f;
-    const n = g(), o = H("design-item-context"), r = Ve(o.schema, (f = o.parent) == null ? void 0 : f.schema), l = I(n, o, r);
+    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 u = Z(n), {
-      horizontalResizeHandleStyle: b,
-      verticalResizeHandleStyle: z,
+      horizontalResizeHandleStyle: v,
+      verticalResizeHandleStyle: P,
       resizeOverlayStyle: i
     } = u;
-    return W("layout", {
+    return q("layout", {
       useResizeHandleComposition: u
-    }), q(() => {
+    }), W(() => {
       n.value.componentInstance = l;
-    }), e.expose(l.value), () => M("div", {
+    }), e.expose(l.value), () => S("div", {
       class: "f-layout f-page-content",
       ref: n
-    }, [e.slots.default && e.slots.default(), M("div", {
+    }, [e.slots.default && e.slots.default(), S("div", {
       class: "f-layout-resize-overlay",
       style: i.value
-    }, null), M("div", {
+    }, null), S("div", {
       class: "f-layout-horizontal-resize-proxy",
-      style: b.value
-    }, null), M("div", {
+      style: v.value
+    }, null), S("div", {
       class: "f-layout-vertical-resize-proxy",
-      style: z.value
+      style: P.value
     }, null)]);
   }
 });
-function qe() {
+function We() {
   function t(e, n) {
     var u;
     if (!e)
@@ -800,7 +810,7 @@ function qe() {
     if (!o)
       return !1;
     const r = o.schema.type, l = n == null ? void 0 : n.formSchemaUtils.getComponentById(o.belongedComponentId);
-    return !((e.controlCategory === "input" || e.controlType === "form-group") && ![S["response-layout-item"].type, S["response-form"].type].includes(r) || (e.controlType === S.tabs.type || e.controlType === S.section.type) && ((l == null ? void 0 : l.componentType) !== "frame" || ![S["content-container"].type, S["splitter-pane"].type, S["response-layout-item"].type].includes(r)));
+    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
@@ -809,7 +819,7 @@ function qe() {
 function Ge(t, e) {
   const n = t.schema;
   function o(l) {
-    return !!qe().basalDragulaRuleForContainer(l);
+    return !!We().basalDragulaRuleForContainer(l);
   }
   function r() {
     const l = ["f-layout-pane"];
@@ -822,67 +832,67 @@ const Ye = /* @__PURE__ */ E({
   props: N,
   emits: [],
   setup(t, e) {
-    const n = g(), o = g();
-    H("designer-host-service");
-    const r = H("design-item-context"), l = Ge(r), u = I(o, r, l);
-    u.value.canNested = !1, u.value.canMove = !1, u.value.canDelete = !1, q(() => {
+    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 b = g(Math.max(t.minHeight, t.height)), z = g(Math.max(t.minWidth, t.width)), i = g(t.minHeight), f = g(t.minWidth), s = g(t.position), h = H("layout"), {
-      useResizeHandleComposition: P
-    } = h, k = K(z, b, f, i, P), {
-      onClickHorizontalResizeBar: C,
-      onClickVerticalResizeBar: v
-    } = k, p = R(() => ({
+    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": s.value === "left",
-      "f-layout-resize-bar-n": s.value === "bottom",
-      "f-layout-resize-bar-s": s.value === "top",
-      "f-layout-resize-bar-w": s.value === "right"
+      "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 y(a, c) {
-      (c === "left" || c === "right") && C(a, c, n.value), (c === "top" || c === "bottom") && v(a, c, 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 m = R(() => {
+    const d = M(() => {
       const a = {
         "f-layout-pane": !0,
-        "f-page-content-nav": s.value === "left" || s.value === "right",
-        "f-page-content-main": s.value === "center"
+        "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((c, w) => (c[w] = !0, c), a), a;
-    }), O = R(() => {
+      return t.customClass && String(t.customClass).split(" ").reduce((s, g) => (s[g] = !0, s), a), a;
+    }), R = M(() => {
       const a = {
         flex: "1"
       };
-      return (z.value && s.value === "left" || s.value === "right") && (a.width = `${z.value}px`), (b.value && s.value === "bottom" || s.value === "top") && (a.height = `${b.value}px`), a;
+      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 () => M("div", {
+    return () => S("div", {
       ref: n,
-      class: m.value,
-      style: O.value
-    }, [M("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()]), M("span", {
+    }, [e.slots.default && e.slots.default()]), S("span", {
       class: p.value,
-      onMousedown: (a) => y(a, s.value)
+      onMousedown: (a) => m(a, c.value)
     }, null)]);
   }
 });
 j.install = (t) => {
-  t.component(j.name, j), t.component($.name, $);
+  t.component(j.name, j), t.component(A.name, A);
 };
 j.register = (t, e, n, o) => {
-  t.layout = j, e.layout = Q, t["layout-pane"] = $, e["layout-pane"] = x;
+  t.layout = j, e.layout = J, t["layout-pane"] = A, e["layout-pane"] = x;
 };
 j.registerDesigner = (t, e, n) => {
-  t.layout = We, e.layout = Q, t["layout-pane"] = Ye, e["layout-pane"] = x;
+  t.layout = qe, e.layout = J, t["layout-pane"] = Ye, e["layout-pane"] = x;
 };
 export {
   j as FLayout,
-  $ as FLayoutPane,
+  A as FLayoutPane,
   j as default,
   F as layoutProps,
-  Q as layoutPropsResolver
+  J as layoutPropsResolver
 };