@farris/ui-vue 1.3.1 → 1.3.3

package/components/splitter/index.esm.js

@@ -1,33 +1,37 @@
-import { ref as C, computed as P, defineComponent as k, provide as W, createVNode as w, inject as O, onMounted as q } from "vue";
+import { ref as g, computed as C, defineComponent as M, provide as W, createVNode as w, inject as k, onMounted as q } from "vue";
 import { isPlainObject as $, cloneDeep as I } from "lodash-es";
 import "bignumber.js";
 const G = {}, X = {};
 function E(t) {
-  const { properties: e, title: n, ignore: a } = t, i = a && Array.isArray(a), o = Object.keys(e).reduce((s, d) => ((!i || !a.find((h) => h == d)) && (s[d] = e[d].type === "object" && e[d].properties ? E(e[d]) : I(e[d].default)), s), {});
-  return n && (!i || !a.find((s) => s == "id")) && (o.id = `${n}-${Date.now()}`), o;
+  const { properties: e, title: n, ignore: a } = t, i = a && Array.isArray(a), s = Object.keys(e).reduce((o, f) => ((!i || !a.find((v) => v === f)) && (o[f] = e[f].type === "object" && e[f].properties ? E(e[f]) : I(e[f].default)), o), {});
+  if (n && (!i || !a.find((o) => o === "id"))) {
+    const o = n.toLowerCase().replace(/-/g, "_");
+    s.id = `${o}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return s;
 }
 function Y(t, e = {}, n) {
   const a = G[t];
   if (a) {
     let i = E(a);
-    const o = X[t];
-    return i = o ? o({ getSchemaByType: Y }, i, e, n) : i, i;
+    const s = X[t];
+    return i = s ? s({ getSchemaByType: Y }, i, e, n) : i, i;
   }
   return null;
 }
 function ee(t, e) {
   const n = E(e);
-  return Object.keys(t).reduce((a, i) => (a[i] && $(a[i]) && $(t[i]) ? Object.assign(a[i], t[i]) : a[i] = t[i], a), n), n;
+  return Object.keys(n).reduce((a, i) => (a[i] && $(a[i]) && $(t[i] || !t[i]) ? Object.assign(a[i], t[i] || {}) : a[i] = t[i], a), n), n;
 }
 function te(t, e) {
   return Object.keys(t).filter((a) => t[a] != null).reduce((a, i) => {
     if (e.has(i)) {
-      const o = e.get(i);
-      if (typeof o == "string")
-        a[o] = t[i];
+      const s = e.get(i);
+      if (typeof s == "string")
+        a[s] = t[i];
       else {
-        const s = o(i, t[i], t);
-        Object.assign(a, s);
+        const o = s(i, t[i], t);
+        Object.assign(a, o);
       }
     } else
       a[i] = t[i];
@@ -43,13 +47,13 @@ function ae(t = {}) {
     if (typeof m == "number")
       return r[l].length === m;
     if (typeof m == "object") {
-      const p = Object.keys(m)[0], y = m[p];
-      if (p === "not")
-        return Number(r[l].length) !== Number(y);
-      if (p === "moreThan")
-        return Number(r[l].length) >= Number(y);
-      if (p === "lessThan")
-        return Number(r[l].length) <= Number(y);
+      const y = Object.keys(m)[0], d = m[y];
+      if (y === "not")
+        return Number(r[l].length) !== Number(d);
+      if (y === "moreThan")
+        return Number(r[l].length) >= Number(d);
+      if (y === "lessThan")
+        return Number(r[l].length) <= Number(d);
     }
     return !1;
   }
@@ -66,33 +70,33 @@ function ae(t = {}) {
     return typeof c == "number" ? [{ target: m, operator: "length", param: null, value: Number(c) }] : typeof c == "boolean" ? [{ target: m, operator: "getProperty", param: l, value: !!c }] : typeof c == "object" ? Object.keys(c).map((r) => {
       if (r === "length")
         return { target: m, operator: "length", param: null, value: c[r] };
-      const p = r, y = c[r];
-      return { target: m, operator: "getProperty", param: p, value: y };
+      const y = r, d = c[r];
+      return { target: m, operator: "getProperty", param: y, value: d };
     }) : [];
   }
-  function o(l) {
+  function s(l) {
     return Object.keys(l).reduce((m, r) => {
-      const p = i(r, l[r]);
-      return m.push(...p), m;
+      const y = i(r, l[r]);
+      return m.push(...y), m;
     }, []);
   }
-  function s(l, c) {
+  function o(l, c) {
     if (a.has(l.operator)) {
       const m = a.get(l.operator);
       return m && m(l.target, l.param, l.value, c) || !1;
     }
     return !1;
   }
-  function d(l, c) {
-    return o(l).reduce((p, y) => p && s(y, c), !0);
+  function f(l, c) {
+    return s(l).reduce((y, d) => y && o(d, c), !0);
   }
-  function h(l, c) {
-    const m = Object.keys(l), r = m.includes("allOf"), p = m.includes("anyOf"), y = r || p, S = (y ? l[y ? r ? "allOf" : "anyOf" : "allOf"] : [l]).map((f) => d(f, c));
-    return r ? !S.includes(!1) : S.includes(!0);
+  function v(l, c) {
+    const m = Object.keys(l), r = m.includes("allOf"), y = m.includes("anyOf"), d = r || y, R = (d ? l[d ? r ? "allOf" : "anyOf" : "allOf"] : [l]).map((u) => f(u, c));
+    return r ? !R.includes(!1) : R.includes(!0);
   }
-  return { parseValueSchema: h };
+  return { parseValueSchema: v };
 }
-const L = {
+const O = {
   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,20 +134,21 @@ const L = {
   "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" }
-}, ie = {}, se = {};
+  fieldset: { type: "fieldset", name: "分组", icon: "fieldset" },
+  "query-solution": { type: "query-solution", name: "筛选方案", icon: "QueryScheme" }
+}, ie = {}, oe = {};
 ae();
-function U(t, e, n = /* @__PURE__ */ new Map(), a = (s, d, h) => d, i = {}, o = (s) => s) {
-  return G[e.title] = e, X[e.title] = a, ie[e.title] = i, se[e.title] = o, (s = {}) => {
-    const d = ne(s, e, n), h = Object.keys(t).reduce((l, c) => (l[c] = t[c].default, l), {});
-    return Object.assign(h, d);
+function _(t, e, n = /* @__PURE__ */ new Map(), a = (o, f, v, l) => f, i = {}, s = (o) => o) {
+  return G[e.title] = e, X[e.title] = a, ie[e.title] = i, oe[e.title] = s, (o = {}) => {
+    const f = ne(o, e, n), v = Object.keys(t).reduce((l, c) => (l[c] = t[c].default, l), {});
+    return Object.assign(v, f);
   };
 }
-function _(t, e) {
+function U(t, e) {
   return { customClass: e.class, customStyle: e.style };
 }
-const oe = /* @__PURE__ */ new Map([
-  ["appearance", _]
+const se = /* @__PURE__ */ new Map([
+  ["appearance", U]
 ]);
 function re(t, e, n) {
   const a = t.getSchemaByType("splitter-pane");
@@ -161,7 +166,7 @@ function ce(t, e, n) {
   const a = n.parentComponentInstance;
   return String(a.schema.appearance.class || "").split(" ").includes("f-page-main") && (e.appearance = { class: "f-page-content" }), re(t, e), le(t, e), e;
 }
-const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-design.gitee.io/splitter.schema.json", fe = "splitter", me = "A Farris Container Component", de = "object", ye = {
+const pe = "https://json-schema.org/draft/2020-12/schema", ue = "https://farris-design.gitee.io/splitter.schema.json", fe = "splitter", me = "A Farris Container Component", de = "object", ye = {
   id: {
     description: "The unique identifier for a splitter",
     type: "string"
@@ -199,13 +204,13 @@ const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-
     ]
   }
 }, he = {
-  $schema: ue,
-  $id: pe,
+  $schema: pe,
+  $id: ue,
   title: fe,
   description: me,
   type: de,
   properties: ye
-}, ve = "splitter", be = "A Farris Container Component", ge = "object", Ce = {
+}, ve = "splitter", be = "A Farris Container Component", ge = "object", ze = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -248,46 +253,46 @@ const ue = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-
       }
     }
   }
-}, ze = {
+}, Ce = {
   title: ve,
   description: be,
   type: ge,
-  categories: Ce
-}, A = {
+  categories: ze
+}, F = {
   customStyle: { type: String, default: "" },
   customClass: { type: String, default: "" },
   direction: { Type: String, default: "row" }
-}, N = U(A, he, oe, ce, ze);
-function J(t) {
-  const e = C(-1), n = C(-1), a = C(0), i = C(0), o = C(!1), s = C(!1), d = P(() => ({
-    display: o.value ? "block" : "none",
-    left: `${a.value}px`
-  })), h = P(() => ({
+}, N = _(F, he, se, ce, Ce);
+function Q(t) {
+  const e = g(-1), n = g(-1), a = g(0), i = g(0), s = g(!1), o = g(!1), f = C(() => ({
     display: s.value ? "block" : "none",
+    left: `${a.value}px`
+  })), v = C(() => ({
+    display: o.value ? "block" : "none",
     top: `${i.value}px`
-  })), l = P(() => ({
-    display: s.value || o.value ? "block" : "none"
+  })), l = C(() => ({
+    display: o.value || s.value ? "block" : "none"
   }));
   function c(r) {
-    const p = t.value;
-    if (p) {
-      const { left: y } = p.getBoundingClientRect();
-      a.value = r.clientX - y;
+    const y = t.value;
+    if (y) {
+      const { left: d } = y.getBoundingClientRect();
+      a.value = r.clientX - d;
     }
   }
   function m(r) {
-    const p = t.value;
-    if (p) {
-      const { top: y } = p.getBoundingClientRect();
-      i.value = r.clientY - y;
+    const y = t.value;
+    if (y) {
+      const { top: d } = y.getBoundingClientRect();
+      i.value = r.clientY - d;
     }
   }
   return {
-    horizontalResizeHandleStyle: d,
-    verticalResizeHandleStyle: h,
+    horizontalResizeHandleStyle: f,
+    verticalResizeHandleStyle: v,
     resizeOverlayStyle: l,
-    showHorizontalResizeHandle: o,
-    showVerticalResizeHandle: s,
+    showHorizontalResizeHandle: s,
+    showVerticalResizeHandle: o,
     horizontalResizeBarPosition: e,
     verticalResizeBarPosition: n,
     verticalResizeHandleOffset: i,
@@ -306,7 +311,7 @@ function we() {
     return t = n + a, i;
   };
 }
-function Se() {
+function Re() {
   if (typeof window > "u")
     return () => 0;
   if (window.requestAnimationFrame)
@@ -314,58 +319,58 @@ function Se() {
   const t = Pe.filter((e) => `${e}RequestAnimationFrame` in window)[0];
   return t ? window[`${t}RequestAnimationFrame`] : we();
 }
-Se();
+Re();
 function B(t, e) {
   return ((e == null ? void 0 : e.split(" ")) || []).reduce((a, i) => (i && (a[i] = !0), a), t), t;
 }
-function M(t, e) {
+function L(t, e) {
   return ((e == null ? void 0 : e.split(";")) || []).reduce((a, i) => {
     if (i) {
-      const o = i.split(":");
-      a[o[0]] = o[1];
+      const s = i.split(":");
+      a[s[0]] = s[1];
     }
     return a;
   }, t), t;
 }
-const j = /* @__PURE__ */ k({
+const H = /* @__PURE__ */ M({
   name: "FSplitter",
-  props: A,
+  props: F,
   emits: [],
   setup(t, e) {
-    const n = C(), a = J(n), {
+    const n = g(), a = Q(n), {
       horizontalResizeHandleStyle: i,
-      verticalResizeHandleStyle: o,
-      resizeOverlayStyle: s
+      verticalResizeHandleStyle: s,
+      resizeOverlayStyle: o
     } = a;
     W("splitter", {
       useResizeHandleComposition: a
     });
-    const d = P(() => B({
+    const f = C(() => B({
       "f-splitter": !0
-    }, t == null ? void 0 : t.customClass)), h = P(() => {
+    }, t == null ? void 0 : t.customClass)), v = C(() => {
       const l = {
         "flex-direction": t.direction === "row" ? "row" : "column"
       };
-      return M(l, t == null ? void 0 : t.customStyle);
+      return L(l, t == null ? void 0 : t.customStyle);
     });
     return () => w("div", {
-      class: d.value,
+      class: f.value,
       ref: n,
-      style: h.value
+      style: v.value
     }, [e.slots.default && e.slots.default(), w("div", {
       class: "f-splitter-resize-overlay",
-      style: s.value
+      style: o.value
     }, null), w("div", {
       class: "f-splitter-horizontal-resize-proxy",
       style: i.value
     }, null), w("div", {
       class: "f-splitter-vertical-resize-proxy",
-      style: o.value
+      style: s.value
     }, null)]);
   }
-}), Re = /* @__PURE__ */ new Map([
-  ["appearance", _]
-]), De = "https://json-schema.org/draft/2020-12/schema", Te = "https://farris-design.gitee.io/splitter-pane.schema.json", Le = "splitter-pane", Oe = "A Farris Container Component", ke = "object", Be = {
+}), Se = /* @__PURE__ */ new Map([
+  ["appearance", U]
+]), Te = "https://json-schema.org/draft/2020-12/schema", De = "https://farris-design.gitee.io/splitter-pane.schema.json", Oe = "splitter-pane", ke = "A Farris Container Component", Me = "object", Be = {
   id: {
     description: "The unique identifier for a splitter",
     type: "string"
@@ -441,14 +446,14 @@ const j = /* @__PURE__ */ k({
     type: "number",
     default: !0
   }
-}, Me = {
-  $schema: De,
-  $id: Te,
-  title: Le,
-  description: Oe,
-  type: ke,
+}, Le = {
+  $schema: Te,
+  $id: De,
+  title: Oe,
+  description: ke,
+  type: Me,
   properties: Be
-}, je = "splitter-pane", He = "A Farris Container Component", Ee = "object", Ae = {
+}, He = "splitter-pane", je = "A Farris Container Component", Ee = "object", Fe = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -548,12 +553,12 @@ const j = /* @__PURE__ */ k({
       }
     }
   }
-}, Fe = {
-  title: je,
-  description: He,
+}, Ae = {
+  title: He,
+  description: je,
   type: Ee,
-  categories: Ae
-}, F = {
+  categories: Fe
+}, A = {
   customClass: { type: String, defaut: "" },
   customStyle: { type: String, default: "" },
   width: { type: Number },
@@ -565,7 +570,7 @@ const j = /* @__PURE__ */ k({
   visible: { type: Boolean, default: !0 },
   /** True to allow the pane can be resized. */
   resizable: { type: Boolean, default: !1 },
-  /**指定拖拽的方向，可以指定多个方向，e向东,n向北,s向南,w向西 
+  /** 指定拖拽的方向，可以指定多个方向，e向东,n向北,s向南,w向西 
    * 因为位置在右侧，不一定就是w方向可拖拽的
   */
   resizeHandle: { type: String, default: "" },
@@ -575,203 +580,208 @@ const j = /* @__PURE__ */ k({
   minWidth: { type: Number, default: 0 },
   /** 面板最小高度 */
   minHeight: { type: Number, default: 0 }
-}, V = U(
-  F,
-  Me,
-  Re,
+}, V = _(
+  A,
+  Le,
+  Se,
   void 0,
-  Fe
+  Ae
 );
-function Q(t, e) {
-  const n = C(t.width), a = C(t.height), {
+function J(t, e) {
+  const n = g(t.width), a = g(t.height), {
     horizontalResizeBarPosition: i,
-    horizontalResizeHandleOffset: o,
-    showHorizontalResizeHandle: s,
-    showVerticalResizeHandle: d,
-    verticalResizeBarPosition: h,
+    horizontalResizeHandleOffset: s,
+    showHorizontalResizeHandle: o,
+    showVerticalResizeHandle: f,
+    verticalResizeBarPosition: v,
     verticalResizeHandleOffset: l,
     draggingHorizontalResizeHandle: c,
     draggingVerticalResizeHandle: m
   } = e;
-  let r = "", p, y;
-  function g(u) {
-    if ((r === "left" || r === "right") && y) {
-      const { left: f } = y.getBoundingClientRect(), { width: z } = p.getBoundingClientRect(), v = u.clientX - f, b = r === "left" ? (z || 0) + (v - i.value) : (z || 0) - (v - i.value);
+  let r = "", y, d;
+  function P(p) {
+    if ((r === "left" || r === "right") && d) {
+      const { left: u } = d.getBoundingClientRect(), { width: z } = y.getBoundingClientRect(), h = p.clientX - u, b = r === "left" ? (z || 0) + (h - i.value) : (z || 0) - (h - i.value);
       n.value = t.minWidth > 0 ? Math.max(t.minWidth, b) : b;
     }
-    if ((r === "top" || r === "bottom") && y) {
-      const { top: f } = y.getBoundingClientRect(), { height: z } = p.getBoundingClientRect(), v = u.clientY - f, b = r === "top" ? (z || 0) + (v - h.value) : (z || 0) - (v - h.value);
+    if ((r === "top" || r === "bottom") && d) {
+      const { top: u } = d.getBoundingClientRect(), { height: z } = y.getBoundingClientRect(), h = p.clientY - u, b = r === "top" ? (z || 0) + (h - v.value) : (z || 0) - (h - v.value);
       a.value = t.minHeight > 0 ? Math.max(t.minHeight, b) : b;
     }
-    o.value = 0, l.value = 0, i.value = -1, h.value = -1, s.value = !1, d.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", g), document.body.style.userSelect = "", r = "", p = null, y = null;
+    s.value = 0, l.value = 0, i.value = -1, v.value = -1, o.value = !1, f.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", P), document.body.style.userSelect = "", r = "", y = null, d = null;
   }
-  function R(u, f, z) {
-    if (r = f, p = z, s.value = !0, y = u.composedPath().find((b) => b.className.split(" ")[0] === "f-splitter"), y) {
-      const { left: b } = y.getBoundingClientRect();
-      o.value = u.clientX - b, i.value = u.clientX - b, document.addEventListener("mousemove", c), document.addEventListener("mouseup", g), document.body.style.userSelect = "none";
+  function T(p, u, z) {
+    if (r = u, y = z, o.value = !0, d = p.composedPath().find((b) => b.className.split(" ")[0] === "f-splitter"), d) {
+      const { left: b } = d.getBoundingClientRect();
+      s.value = p.clientX - b, i.value = p.clientX - b, document.addEventListener("mousemove", c), document.addEventListener("mouseup", P), document.body.style.userSelect = "none";
     }
   }
-  function S(u, f, z) {
-    if (r = f, p = z, d.value = !0, y = u.composedPath().find((b) => b.className.split(" ")[0] === "f-splitter"), y) {
-      const { top: b } = y.getBoundingClientRect();
-      l.value = u.clientY - b, h.value = u.clientY - b, document.addEventListener("mousemove", m), document.addEventListener("mouseup", g), document.body.style.userSelect = "none";
+  function R(p, u, z) {
+    if (r = u, y = z, f.value = !0, d = p.composedPath().find((b) => b.className.split(" ")[0] === "f-splitter"), d) {
+      const { top: b } = d.getBoundingClientRect();
+      l.value = p.clientY - b, v.value = p.clientY - b, document.addEventListener("mousemove", m), document.addEventListener("mouseup", P), document.body.style.userSelect = "none";
     }
   }
   return {
     actualWidth: n,
     actualHeight: a,
-    onClickSplitterHorizontalResizeBar: R,
-    onClickSplitterVerticalResizeBar: S
+    onClickSplitterHorizontalResizeBar: T,
+    onClickSplitterVerticalResizeBar: R
   };
 }
-const H = /* @__PURE__ */ k({
+const j = /* @__PURE__ */ M({
   name: "FSplitterPane",
-  props: F,
+  props: A,
   emits: [],
   setup(t, e) {
-    const n = C(), a = O("splitter"), {
+    const n = g(), a = k("splitter"), {
       useResizeHandleComposition: i
-    } = a, o = Q(t, i), {
-      actualHeight: s,
-      actualWidth: d,
-      onClickSplitterHorizontalResizeBar: h,
+    } = a, s = J(t, i), {
+      actualHeight: o,
+      actualWidth: f,
+      onClickSplitterHorizontalResizeBar: v,
       onClickSplitterVerticalResizeBar: l
-    } = o, c = C(t.position), m = P(() => {
-      const u = {
+    } = s, c = g(t.position), m = C(() => {
+      const p = {
         "f-splitter-pane": !0,
         "f-splitter-pane-main": c.value === "center",
         "has-resize-bar": t.resizable
       };
-      return u["f-splitter-pane-" + c.value] = !0, B(u, t == null ? void 0 : t.customClass);
-    }), r = P(() => {
-      const u = {};
-      return (d.value && c.value === "left" || c.value === "right" || p.value.find((f) => f == "e") || p.value.find((f) => f == "w")) && (u.width = `${d.value}px`), (s.value && c.value === "bottom" || c.value === "top" || p.value.find((f) => f == "s") || p.value.find((f) => f == "n")) && (u.height = `${s.value}px`), M(u, t == null ? void 0 : t.customStyle);
-    }), p = P(() => t.resizeHandle ? t.resizeHandle.split(",").filter((u) => ["e", "n", "s", "w"].find((f) => f == u)) : []), y = P(() => ({
+      return p["f-splitter-pane-" + c.value] = !0, B(p, t == null ? void 0 : t.customClass);
+    }), r = C(() => t.resizeHandle ? t.resizeHandle.split(",").filter((p) => ["e", "n", "s", "w"].find((u) => u === p)) : []), y = C(() => {
+      const p = {};
+      return (f.value && c.value === "left" || c.value === "right" || r.value.find((u) => u === "e") || r.value.find((u) => u === "w")) && (p.width = `${f.value}px`), (o.value && c.value === "bottom" || c.value === "top" || r.value.find((u) => u === "s") || r.value.find((u) => u === "n")) && (p.height = `${o.value}px`), L(p, t == null ? void 0 : t.customStyle);
+    }), d = C(() => ({
       "f-splitter-resize-bar": !0,
       "f-splitter-resize-bar-e": c.value === "left",
       "f-splitter-resize-bar-n": c.value === "bottom",
       "f-splitter-resize-bar-s": c.value === "top",
       "f-splitter-resize-bar-w": c.value === "right"
     }));
-    function g(u, f) {
-      f = R(f), ["left", "right"].find((z) => z == f) && h(u, f, n.value), ["top", "bottom"].find((z) => z == f) && l(u, f, n.value);
-    }
-    function R(u) {
+    function P(p) {
       return {
         e: "left",
         w: "right",
         s: "top",
         n: "bottom"
-      }[u] || u;
+      }[p] || p;
+    }
+    function T(p, u) {
+      u = P(u), ["left", "right"].find((z) => z === u) && v(p, u, n.value), ["top", "bottom"].find((z) => z === u) && l(p, u, n.value);
     }
-    function S() {
-      return p.value.length > 0 ? p.value.map((u) => w("span", {
-        class: "f-splitter-resize-bar f-splitter-resize-bar-" + u,
-        onMousedown: (f) => g(f, u)
+    function R() {
+      return r.value.length > 0 ? r.value.map((p) => w("span", {
+        class: "f-splitter-resize-bar f-splitter-resize-bar-" + p,
+        onMousedown: (u) => T(u, p)
       }, null)) : w("span", {
-        class: y.value,
-        onMousedown: (u) => g(u, c.value)
+        class: d.value,
+        onMousedown: (p) => T(p, c.value)
       }, null);
     }
     return () => w("div", {
       ref: n,
       class: m.value,
-      style: r.value
-    }, [e.slots.default && e.slots.default(), t.resizable && S()]);
+      style: y.value
+    }, [e.slots.default && e.slots.default(), t.resizable && R()]);
   }
 });
 function Z(t, e, n) {
   var z;
-  function a() {
-    n != null && n.resolveComponentContext && n.resolveComponentContext();
-  }
-  a();
-  const i = n && n.getStyles && n.getStyles() || "", o = n && n.getDesignerClass && n.getDesignerClass() || "", s = C();
-  function d() {
+  const a = n && n.getStyles && n.getStyles() || "", i = n && n.getDesignerClass && n.getDesignerClass() || "", s = g();
+  function o() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanMoveComponent ? n.checkCanMoveComponent() : !0;
   }
-  function h() {
+  function f() {
     return !1;
   }
-  function l() {
+  function v() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : n && n.checkCanDeleteComponent ? n.checkCanDeleteComponent() : !0;
   }
-  function c() {
+  function l() {
     return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : n && n.hideNestedPaddingInDesginerView ? n.hideNestedPaddingInDesginerView() : !1;
   }
-  function m(v) {
-    if (!v || !v.value)
+  function c(h) {
+    if (!h || !h.value)
       return null;
-    if (v.value.schema && v.value.schema.type === "component")
-      return v.value;
-    const b = C(v == null ? void 0 : v.value.parent), D = m(b);
-    return D || null;
+    if (h.value.schema && h.value.schema.type === "component")
+      return h.value;
+    const b = g(h == null ? void 0 : h.value.parent), S = c(b);
+    return S || null;
   }
-  function r(v = e) {
-    const { componentInstance: b, designerItemElementRef: D } = v;
-    return !b || !b.value ? null : b.value.canMove ? D : r(v.parent);
+  function m(h = e) {
+    const { componentInstance: b, designerItemElementRef: S } = h;
+    return !b || !b.value ? null : b.value.canMove ? S : m(h.parent);
   }
-  function p(v) {
-    return !!n && n.canAccepts(v);
+  function r(h) {
+    return !!n && n.canAccepts(h);
   }
   function y() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function g() {
+  function d() {
   }
-  function R(v, b) {
+  function P(h, b) {
     b && n != null && n.onAcceptMovedChildElement && n.onAcceptMovedChildElement(b);
   }
-  function S(v, b) {
-    const { componentType: D } = v;
-    let T = Y(D, v, b);
-    n && n.onResolveNewComponentSchema && (T = n.onResolveNewComponentSchema(v, T));
-    const K = D.toLowerCase().replace("-", "_");
-    return T && !T.id && T.type === D && (T.id = `${K}_${Math.random().toString().slice(2, 6)}`), T;
+  function T(h, b) {
+    const { componentType: S } = h;
+    let D = Y(S, h, b);
+    n && n.onResolveNewComponentSchema && (D = n.onResolveNewComponentSchema(h, D));
+    const K = S.toLowerCase().replace(/-/g, "_");
+    return D && !D.id && D.type === S && (D.id = `${K}_${Math.random().toString().slice(2, 6)}`), D;
   }
-  function u(v) {
+  function R(h) {
   }
-  function f(...v) {
+  function p(...h) {
     if (n && n.getPropsConfig)
-      return n.getPropsConfig(...v);
+      return n.getPropsConfig(...h);
+  }
+  function u() {
+    n && n.onRemoveComponent && n.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((h) => {
+      var D;
+      let b = h.id;
+      h.type === "component-ref" && (b = h.component);
+      const S = t.value.querySelector(`#${b}-design-item`);
+      (D = S == null ? void 0 : S.componentInstance) != null && D.value.onRemoveComponent && S.componentInstance.value.onRemoveComponent();
+    });
   }
   return s.value = {
-    canMove: d(),
-    canSelectParent: h(),
-    canDelete: l(),
-    canNested: !c(),
+    canMove: o(),
+    canSelectParent: f(),
+    canDelete: v(),
+    canNested: !l(),
     contents: e == null ? void 0 : e.schema.contents,
     elementRef: t,
     parent: (z = e == null ? void 0 : e.parent) == null ? void 0 : z.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: i,
-    designerClass: o,
-    canAccepts: p,
-    getBelongedComponentInstance: m,
-    getDraggableDesignItemElement: r,
+    styles: a,
+    designerClass: i,
+    canAccepts: r,
+    getBelongedComponentInstance: c,
+    getDraggableDesignItemElement: m,
     getDraggingDisplayText: y,
-    getPropConfig: f,
-    getDragScopeElement: g,
-    onAcceptMovedChildElement: R,
-    onChildElementMovedOut: u,
-    addNewChildComponentSchema: S,
-    updateDragAndDropRules: a,
-    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || C(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || C(!1)
+    getPropConfig: p,
+    getDragScopeElement: d,
+    onAcceptMovedChildElement: P,
+    onChildElementMovedOut: R,
+    addNewChildComponentSchema: T,
+    triggerBelongedComponentToMoveWhenMoved: !!n && n.triggerBelongedComponentToMoveWhenMoved || g(!1),
+    triggerBelongedComponentToDeleteWhenDeleted: !!n && n.triggerBelongedComponentToDeleteWhenDeleted || g(!1),
+    onRemoveComponent: u
   }, s;
 }
 class x {
   getTemplateRule(e, n) {
-    const a = n == null ? void 0 : n.formSchemaUtils, i = a == null ? void 0 : a.getFormTemplateRule(), o = { canAccept: !0, canDelete: !0, canMove: !0 };
+    const a = n == null ? void 0 : n.formSchemaUtils, i = a == null ? void 0 : a.getFormTemplateRule(), s = { canAccept: !0, canDelete: !0, canMove: !0 };
     if (!i)
-      return o;
-    const s = this.getComponentContext(e);
-    return s.componentClassList.forEach((h) => {
-      if (!h || !i[h])
+      return s;
+    const o = this.getComponentContext(e), { componentClassList: f } = o;
+    return f.forEach((v) => {
+      if (!v || !i[v])
         return;
-      const { canMove: l, canDelete: c, canAccept: m } = i[h];
-      o.canMove = o.canMove && this.resolveRuleValue(l, s), o.canDelete = o.canDelete && this.resolveRuleValue(c, s), o.canAccept = o.canAccept && this.resolveRuleValue(m, s);
-    }), o;
+      const { canMove: l, canDelete: c, canAccept: m } = i[v];
+      s.canMove = s.canMove && this.resolveRuleValue(l, o), s.canDelete = s.canDelete && this.resolveRuleValue(c, o), s.canAccept = s.canAccept && this.resolveRuleValue(m, o);
+    }), s;
   }
   resolveRuleValue(e, n) {
     return typeof e == "boolean" ? e : this.parseRuleValueSchema(e, n);
@@ -779,50 +789,50 @@ class x {
   parseRuleValueSchema(e, n) {
     const a = e.invalidContext || [];
     let i = !0;
-    for (const o of a) {
-      if (o.firstLevelChild) {
-        if (o.firstLevelChild.class) {
-          const s = n.firstLevelChildClassList;
-          if (s && !s.includes(o.firstLevelChild.class)) {
+    for (const s of a) {
+      if (s.firstLevelChild) {
+        if (s.firstLevelChild.class) {
+          const { firstLevelChildClassList: o } = n;
+          if (o && !o.includes(s.firstLevelChild.class)) {
             i = !1;
             continue;
           }
         }
-        if (o.firstLevelChild.type) {
-          const s = n.firstLevelChildSchema;
-          if (s && s.type !== o.firstLevelChild.type) {
+        if (s.firstLevelChild.type) {
+          const { firstLevelChildSchema: o } = n;
+          if (!o || o.type !== s.firstLevelChild.type) {
             i = !1;
             continue;
           }
         }
       }
-      if (o.secondLevelChild) {
-        if (o.secondLevelChild.class) {
-          const s = n.secondLevelChildClassList;
-          if (s && !s.includes(o.secondLevelChild.class)) {
+      if (s.secondLevelChild) {
+        if (s.secondLevelChild.class) {
+          const { secondLevelChildClassList: o } = n;
+          if (o && !o.includes(s.secondLevelChild.class)) {
             i = !1;
             continue;
           }
         }
-        if (o.secondLevelChild.type) {
-          const s = n.secondLevelChildSchema;
-          if (s && s.type !== o.secondLevelChild.type) {
+        if (s.secondLevelChild.type) {
+          const { secondLevelChildSchema: o } = n;
+          if (!o || o.type !== s.secondLevelChild.type) {
             i = !1;
             continue;
           }
         }
       }
-      if (o.parent) {
-        if (o.parent.class) {
-          const s = n.parentClassList;
-          if (s && !s.includes(o.parent.class)) {
+      if (s.parent) {
+        if (s.parent.class) {
+          const { parentClassList: o } = n;
+          if (o && !o.includes(s.parent.class)) {
             i = !1;
             continue;
           }
         }
-        if (o.parent.type) {
-          const s = n.parentSchema;
-          if (s && s.type !== o.parent.type) {
+        if (s.parent.type) {
+          const { parentSchema: o } = n;
+          if (o && o.type !== s.parent.type) {
             i = !1;
             continue;
           }
@@ -834,66 +844,66 @@ class x {
     return !i;
   }
   getComponentContext(e) {
-    var g, R, S, u;
-    const n = e.schema, a = n.appearance && n.appearance.class || "", i = a.split(" ") || [], o = n.contents || [], s = o.length ? o[0] : null, d = s && s.appearance ? s.appearance.class : "", h = d ? d.split(" ") : [], l = (g = s == null ? void 0 : s.contents) != null && g.length ? s == null ? void 0 : s.contents[0] : null, c = l && l.appearance ? l.appearance.class : "", m = c ? c.split(" ") : [], r = n.type === "component" ? (S = (R = e.parent) == null ? void 0 : R.parent) == null ? void 0 : S.schema : (u = e.parent) == null ? void 0 : u.schema, p = r && r.appearance && r.appearance.class || "", y = p ? p.split(" ") : [];
+    var P, T, R, p;
+    const n = e.schema, a = n.appearance && n.appearance.class || "", i = a.split(" ") || [], s = n.contents || [], o = s.length ? s[0] : null, f = o && o.appearance ? o.appearance.class : "", v = f ? f.split(" ") : [], l = (P = o == null ? void 0 : o.contents) != null && P.length ? o == null ? void 0 : o.contents[0] : null, c = l && l.appearance ? l.appearance.class : "", m = c ? c.split(" ") : [], r = n.type === "component" ? (R = (T = e.parent) == null ? void 0 : T.parent) == null ? void 0 : R.schema : (p = e.parent) == null ? void 0 : p.schema, y = r && r.appearance && r.appearance.class || "", d = y ? y.split(" ") : [];
     return {
       componentClass: a,
       componentClassList: i,
-      childContents: o,
-      firstLevelChildSchema: s,
-      firstLevelChildClass: d,
-      firstLevelChildClassList: h,
+      childContents: s,
+      firstLevelChildSchema: o,
+      firstLevelChildClass: f,
+      firstLevelChildClassList: v,
       secondLevelChildSchema: l,
       secondLevelChildClass: c,
       secondLevelChildClassList: m,
       parentSchema: r,
-      parentClass: p,
-      parentClassList: y
+      parentClass: y,
+      parentClassList: d
     };
   }
 }
 function $e(t, e) {
   const n = new x(), { canMove: a, canDelete: i } = n.getTemplateRule(t, e);
-  function o() {
+  function s() {
     return !1;
   }
-  function s() {
+  function o() {
     return i;
   }
-  function d() {
+  function f() {
     return a;
   }
-  function h() {
+  function v() {
     return !0;
   }
-  return { canAccepts: o, checkCanDeleteComponent: s, checkCanMoveComponent: d, hideNestedPaddingInDesginerView: h };
+  return { canAccepts: s, checkCanDeleteComponent: o, checkCanMoveComponent: f, hideNestedPaddingInDesginerView: v };
 }
-const Ne = /* @__PURE__ */ k({
+const Ne = /* @__PURE__ */ M({
   name: "FSplitterDesign",
-  props: A,
+  props: F,
   emits: [],
   setup(t, e) {
-    const n = C(), a = O("designer-host-service"), i = O("design-item-context"), o = $e(i, a), s = Z(n, i, o);
-    s.value.canNested = !1;
-    const d = J(n), {
-      horizontalResizeHandleStyle: h,
+    const n = g(), a = k("designer-host-service"), i = k("design-item-context"), s = $e(i, a), o = Z(n, i, s);
+    o.value.canNested = !1;
+    const f = Q(n), {
+      horizontalResizeHandleStyle: v,
       verticalResizeHandleStyle: l,
       resizeOverlayStyle: c
-    } = d;
+    } = f;
     W("splitter", {
-      useResizeHandleComposition: d
+      useResizeHandleComposition: f
     });
-    const m = P(() => B({
+    const m = C(() => B({
       "f-splitter": !0
-    }, t == null ? void 0 : t.customClass)), r = P(() => {
-      const p = {
+    }, t == null ? void 0 : t.customClass)), r = C(() => {
+      const y = {
         "flex-direction": t.direction === "row" ? "row" : "column"
       };
-      return M(p, t == null ? void 0 : t.customStyle);
+      return L(y, t == null ? void 0 : t.customStyle);
     });
     return q(() => {
-      n.value.componentInstance = s;
-    }), e.expose(s.value), () => w("div", {
+      n.value.componentInstance = o;
+    }), e.expose(o.value), () => w("div", {
       class: m.value,
       ref: n,
       style: r.value
@@ -902,7 +912,7 @@ const Ne = /* @__PURE__ */ k({
       style: c.value
     }, null), w("div", {
       class: "f-splitter-horizontal-resize-proxy",
-      style: h.value
+      style: v.value
     }, null), w("div", {
       class: "f-splitter-vertical-resize-proxy",
       style: l.value
@@ -911,14 +921,14 @@ const Ne = /* @__PURE__ */ k({
 });
 function Ve() {
   function t(e, n) {
-    var s;
+    var o;
     if (!e)
       return !1;
-    const a = ((s = e.targetContainer) == null ? void 0 : s.componentInstance) && e.targetContainer.componentInstance.value;
+    const a = ((o = e.targetContainer) == null ? void 0 : o.componentInstance) && e.targetContainer.componentInstance.value;
     if (!a)
       return !1;
-    const i = a.schema.type, o = n == null ? void 0 : n.formSchemaUtils.getComponentById(a.belongedComponentId);
-    return !((e.controlCategory === "input" || e.controlType === "form-group") && ![L["response-layout-item"].type, L["response-form"].type].includes(i) || (e.controlType === L.tabs.type || e.controlType === L.section.type) && ((o == null ? void 0 : o.componentType) !== "frame" || ![L["content-container"].type, L["splitter-pane"].type, L["response-layout-item"].type].includes(i)));
+    const i = a.schema.type, s = n == null ? void 0 : n.formSchemaUtils.getComponentById(a.belongedComponentId);
+    return !((e.componentCategory === "input" || e.componentType === "form-group") && ![O["response-layout-item"].type, O["response-form"].type].includes(i) || (e.componentType === O.tabs.type || e.componentType === O.section.type) && ((s == null ? void 0 : s.componentType) !== "frame" || ![O["content-container"].type, O["splitter-pane"].type, O["response-layout-item"].type].includes(i)));
   }
   return {
     basalDragulaRuleForContainer: t
@@ -926,83 +936,83 @@ function Ve() {
 }
 function We(t, e) {
   const n = new x(), { canAccept: a } = n.getTemplateRule(t, e);
-  function i(d) {
-    return Ve().basalDragulaRuleForContainer(d, e) ? a : !1;
+  function i(f) {
+    return Ve().basalDragulaRuleForContainer(f, e) ? a : !1;
   }
-  function o() {
+  function s() {
     return !1;
   }
-  function s() {
+  function o() {
     return !1;
   }
   return {
     canAccepts: i,
-    checkCanMoveComponent: o,
-    checkCanDeleteComponent: s
+    checkCanMoveComponent: s,
+    checkCanDeleteComponent: o
   };
 }
-const qe = /* @__PURE__ */ k({
+const qe = /* @__PURE__ */ M({
   name: "FSplitterPaneDesign",
-  props: F,
+  props: A,
   emits: [],
   setup(t, e) {
-    const n = C(), a = O("designer-host-service"), i = O("design-item-context"), o = We(i, a), s = Z(n, i, o);
-    s.value.styles = "padding:0;box-shadow:none;", s.value.canNested = !1, s.value.canMove = !1, s.value.canDelete = !1, q(() => {
-      n.value.componentInstance = s;
-    }), e.expose(s.value);
-    const d = O("splitter"), {
-      useResizeHandleComposition: h
-    } = d, l = Q(t, h), {
+    const n = g(), a = k("designer-host-service"), i = k("design-item-context"), s = We(i, a), o = Z(n, i, s);
+    o.value.styles = "padding:0;box-shadow:none;", o.value.canNested = !1, o.value.canMove = !1, o.value.canDelete = !1, q(() => {
+      n.value.componentInstance = o;
+    }), e.expose(o.value);
+    const f = k("splitter"), {
+      useResizeHandleComposition: v
+    } = f, l = J(t, v), {
       actualHeight: c,
       actualWidth: m
-    } = l, r = C(t.position), p = P(() => {
-      const u = {
+    } = l, r = g(t.position), y = C(() => {
+      const p = {
         "f-splitter-pane": !0,
         "f-splitter-pane-main": r.value === "center",
         "has-resize-bar": t.resizable,
         "f-component-splitter-pane": !0,
         "drag-container": !0
       };
-      return u["f-splitter-pane-" + r.value] = !0, B(u, t == null ? void 0 : t.customClass);
-    }), y = P(() => {
-      const u = {};
-      return (m.value && r.value === "left" || r.value === "right" || g.value.find((f) => f == "e") || g.value.find((f) => f == "w")) && (u.width = `${m.value}px`), (c.value && r.value === "bottom" || r.value === "top" || g.value.find((f) => f == "s") || g.value.find((f) => f == "n")) && (u.height = `${c.value}px`), M(u, t == null ? void 0 : t.customStyle);
-    }), g = P(() => t.resizeHandle ? t.resizeHandle.split(",").filter((u) => ["e", "n", "s", "w"].find((f) => f == u)) : []), R = P(() => ({
+      return p["f-splitter-pane-" + r.value] = !0, B(p, t == null ? void 0 : t.customClass);
+    }), d = C(() => t.resizeHandle ? t.resizeHandle.split(",").filter((p) => ["e", "n", "s", "w"].find((u) => u === p)) : []), P = C(() => {
+      const p = {};
+      return (m.value && r.value === "left" || r.value === "right" || d.value.find((u) => u === "e") || d.value.find((u) => u === "w")) && (p.width = `${m.value}px`), (c.value && r.value === "bottom" || r.value === "top" || d.value.find((u) => u === "s") || d.value.find((u) => u === "n")) && (p.height = `${c.value}px`), L(p, t == null ? void 0 : t.customStyle);
+    }), T = C(() => ({
       "f-splitter-resize-bar": !0,
       "f-splitter-resize-bar-e": r.value === "left",
       "f-splitter-resize-bar-n": r.value === "bottom",
       "f-splitter-resize-bar-s": r.value === "top",
       "f-splitter-resize-bar-w": r.value === "right"
     }));
-    function S() {
-      return g.value.length > 0 ? g.value.map((u) => w("span", {
-        class: "f-splitter-resize-bar f-splitter-resize-bar-" + u
+    function R() {
+      return d.value.length > 0 ? d.value.map((p) => w("span", {
+        class: "f-splitter-resize-bar f-splitter-resize-bar-" + p
       }, null)) : w("span", {
-        class: R.value
+        class: T.value
       }, null);
     }
     return () => w("div", {
       ref: n,
       "data-dragref": `${i.schema.id}-container`,
-      class: p.value,
-      style: y.value
-    }, [e.slots.default && e.slots.default(), t.resizable && S()]);
+      class: y.value,
+      style: P.value
+    }, [e.slots.default && e.slots.default(), t.resizable && R()]);
   }
-}), Ue = {
+}), _e = {
   install(t) {
-    t.component(j.name, j), t.component(H.name, H);
+    t.component(H.name, H), t.component(j.name, j);
   },
   register(t, e, n, a) {
-    t.splitter = j, e.splitter = N, t["splitter-pane"] = H, e["splitter-pane"] = V;
+    t.splitter = H, e.splitter = N, t["splitter-pane"] = j, e["splitter-pane"] = V;
   },
   registerDesigner(t, e, n) {
     t.splitter = Ne, e.splitter = N, t["splitter-pane"] = qe, e["splitter-pane"] = V;
   }
 };
 export {
-  j as FSplitter,
-  H as FSplitterPane,
-  Ue as default,
-  A as splitterProps,
+  H as FSplitter,
+  j as FSplitterPane,
+  _e as default,
+  F as splitterProps,
   N as splitterPropsResolver
 };