@farris/ui-vue 1.7.1 → 1.7.2-beta.1

package/components/layout/index.esm.js

@@ -1,123 +1,401 @@
-import { ref as d, computed as p, defineComponent as M, provide as V, createVNode as L, watch as W, inject as Y } from "vue";
-import { getCustomClass as F, getCustomStyle as T } from "../common/index.esm.js";
-const X = {
+import { ref as y, computed as O, defineComponent as M, provide as D, createVNode as H, watch as K, inject as L, onMounted as I } from "vue";
+import { resolveAppearance as Q, createPropsResolver as N } from "../dynamic-resolver/index.esm.js";
+import { getCustomClass as U, getCustomStyle as Z } from "../common/index.esm.js";
+import { useDesignerComponent as W, useDragulaCommonRule as _ } from "../designer-canvas/index.esm.js";
+const T = /* @__PURE__ */ new Map([
+  ["appearance", Q]
+]);
+function V(e, r, s) {
+  return r;
+}
+const ee = "https://json-schema.org/draft/2020-12/schema", te = "https://farris-design.gitee.io/layout.schema.json", ne = "layout", oe = "A Farris Container Component", ae = "object", ie = {
+  id: {
+    description: "The unique identifier for layout component",
+    type: "string"
+  },
+  type: {
+    description: "The type string of layout component",
+    type: "string",
+    default: "layout"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  contents: {
+    description: "",
+    type: "array",
+    default: []
+  },
+  collapsable: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  resizable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  }
+}, se = [
+  "id",
+  "type",
+  "contents"
+], le = {
+  $schema: ee,
+  $id: te,
+  title: ne,
+  description: oe,
+  type: ae,
+  properties: ie,
+  required: se
+}, re = "layout", ce = "A Farris Component", ue = "object", de = {
+  basic: {
+    description: "Basic Infomation",
+    title: "基本信息",
+    properties: {
+      id: {
+        description: "组件标识",
+        title: "标识",
+        type: "string",
+        readonly: !0
+      },
+      type: {
+        description: "类型",
+        title: "类型",
+        type: "string",
+        readonly: !0
+      }
+    }
+  },
+  behavior: {
+    description: "Basic Infomation",
+    title: "行为",
+    properties: {
+      collapsable: {
+        description: "",
+        title: "可收折",
+        type: "boolean"
+      },
+      resizable: {
+        description: "",
+        title: "可调整尺寸",
+        type: "boolean"
+      }
+    }
+  }
+}, fe = {
+  title: re,
+  description: ce,
+  type: ue,
+  categories: de
+}, F = {
   customStyle: { type: String, defaut: "" },
   customClass: { type: String, defaut: "" }
-};
-function A(t) {
-  const H = d(-1), y = d(-1), v = d(0), b = d(0), g = d(!1), m = d(!1), R = p(() => ({
-    display: g.value ? "block" : "none",
-    left: `${v.value}px`,
+}, q = N(F, le, T, V, fe);
+function Y(e) {
+  const r = y(-1), s = y(-1), d = y(0), h = y(0), f = y(!1), m = y(!1), z = O(() => ({
+    display: f.value ? "block" : "none",
+    left: `${d.value}px`,
     cursor: "e-resize"
-  })), C = p(() => ({
+  })), R = O(() => ({
     display: m.value ? "block" : "none",
-    top: `${b.value}px`,
+    top: `${h.value}px`,
     cursor: "n-resize"
-  })), u = p(() => {
-    const l = {
-      display: m.value || g.value ? "block" : "none"
+  })), c = O(() => {
+    const a = {
+      display: m.value || f.value ? "block" : "none"
     };
-    return b.value > 0 && (l.cursor = "n-resize"), l;
+    return h.value > 0 && (a.cursor = "n-resize"), a;
   });
-  function P(l, e, n, a) {
-    const f = t.value;
-    if (f) {
-      const { left: o, right: c, width: h } = f.getBoundingClientRect();
-      let i = l.clientX - o;
-      a === "right" && (i = c - l.clientX), i > e && (i = e), i < n && (i = n), a === "right" && (i = h - i), v.value = i;
+  function P(a, n, i, l) {
+    const g = e.value;
+    if (g) {
+      const { left: t, right: o, width: C } = g.getBoundingClientRect();
+      let u = a.clientX - t;
+      l === "right" && (u = o - a.clientX), u > n && (u = n), u < i && (u = i), l === "right" && (u = C - u), d.value = u;
     }
   }
-  function x(l, e, n, a) {
-    const f = t.value;
-    if (f) {
-      const { top: o, bottom: c, height: h } = f.getBoundingClientRect();
-      let i = l.clientY - o;
-      a === "bottom" && (i = c - l.clientY), i > e && (i = e), i < n && (i = n), a === "bottom" && (i = h - i), b.value = i;
+  function b(a, n, i, l) {
+    const g = e.value;
+    if (g) {
+      const { top: t, bottom: o, height: C } = g.getBoundingClientRect();
+      let u = a.clientY - t;
+      l === "bottom" && (u = o - a.clientY), u > n && (u = n), u < i && (u = i), l === "bottom" && (u = C - u), h.value = u;
     }
   }
   function B() {
-    const l = t.value;
-    if (l) {
-      const { width: e, height: n } = l.getBoundingClientRect();
-      return { width: e, height: n };
+    const a = e.value;
+    if (a) {
+      const { width: n, height: i } = a.getBoundingClientRect();
+      return { width: n, height: i };
     }
     return null;
   }
-  function O() {
-    const l = t.value;
-    return l ? Array.from(l.querySelectorAll("[data-position]")).reduce((e, n) => {
-      const a = n.getAttribute("data-position");
-      return e = Object.assign(e, { [a]: n }), e;
+  function j() {
+    const a = e.value;
+    return a ? Array.from(a.querySelectorAll("[data-position]")).reduce((n, i) => {
+      const l = i.getAttribute("data-position");
+      return n = Object.assign(n, { [l]: i }), n;
     }, {}) : null;
   }
-  function w(l, e) {
-    const n = B(), a = O();
-    if (n && a) {
-      const f = a == null ? void 0 : a.right, o = a == null ? void 0 : a.left;
-      if (l === "left" && o)
-        return f ? n.width - f.clientWidth - e : n.width - e;
-      if (l === "right" && f)
-        return o ? n.width - o.clientWidth - e : n.width - e;
+  function w(a, n) {
+    const i = B(), l = j();
+    if (i && l) {
+      const g = l == null ? void 0 : l.right, t = l == null ? void 0 : l.left;
+      if (a === "left" && t)
+        return g ? i.width - g.clientWidth - n : i.width - n;
+      if (a === "right" && g)
+        return t ? i.width - t.clientWidth - n : i.width - n;
     }
   }
-  function r(l, e) {
-    const n = B(), a = O();
-    if (n && a) {
-      const f = a == null ? void 0 : a.bottom, o = a == null ? void 0 : a.top;
-      if (l === "top" && o)
-        return f ? n.height - f.clientHeight - e : n.height - e;
-      if (l === "bottom" && f)
-        return o ? n.height - o.clientHeight - e : n.height - e;
+  function v(a, n) {
+    const i = B(), l = j();
+    if (i && l) {
+      const g = l == null ? void 0 : l.bottom, t = l == null ? void 0 : l.top;
+      if (a === "top" && t)
+        return g ? i.height - g.clientHeight - n : i.height - n;
+      if (a === "bottom" && g)
+        return t ? i.height - t.clientHeight - n : i.height - n;
     }
   }
   return {
-    horizontalResizeHandleStyle: R,
-    verticalResizeHandleStyle: C,
-    resizeOverlayStyle: u,
-    showHorizontalResizeHandle: g,
+    horizontalResizeHandleStyle: z,
+    verticalResizeHandleStyle: R,
+    resizeOverlayStyle: c,
+    showHorizontalResizeHandle: f,
     showVerticalResizeHandle: m,
-    horizontalResizeBarPosition: H,
-    verticalResizeBarPosition: y,
-    verticalResizeHandleOffset: b,
-    horizontalResizeHandleOffset: v,
+    horizontalResizeBarPosition: r,
+    verticalResizeBarPosition: s,
+    verticalResizeHandleOffset: h,
+    horizontalResizeHandleOffset: d,
     draggingHorizontalResizeHandle: P,
-    draggingVerticalResizeHandle: x,
-    getPanelMaxHeight: r,
+    draggingVerticalResizeHandle: b,
+    getPanelMaxHeight: v,
     getPanelMaxWidth: w
   };
 }
-const k = /* @__PURE__ */ M({
+const $ = /* @__PURE__ */ M({
   name: "FLayout",
-  props: X,
+  props: F,
   emits: [],
-  setup(t, H) {
-    const y = d(), v = A(y), {
-      horizontalResizeHandleStyle: b,
-      verticalResizeHandleStyle: g,
+  setup(e, r) {
+    const s = y(), d = Y(s), {
+      horizontalResizeHandleStyle: h,
+      verticalResizeHandleStyle: f,
       resizeOverlayStyle: m
-    } = v;
-    V("layout", {
-      useResizeHandleComposition: v
+    } = d;
+    D("layout", {
+      useResizeHandleComposition: d
     });
-    const R = p(() => F({
+    const z = O(() => U({
       "f-layout": !0
-    }, t == null ? void 0 : t.customClass)), C = p(() => T({}, t == null ? void 0 : t.customStyle));
-    return () => L("div", {
-      class: R.value,
-      style: C.value,
-      ref: y
-    }, [H.slots.default && H.slots.default(), L("div", {
+    }, e == null ? void 0 : e.customClass)), R = O(() => Z({}, e == null ? void 0 : e.customStyle));
+    return () => H("div", {
+      class: z.value,
+      style: R.value,
+      ref: s
+    }, [r.slots.default && r.slots.default(), H("div", {
       class: "f-layout-resize-overlay",
       style: m.value
-    }, null), L("div", {
+    }, null), H("div", {
       class: "f-layout-horizontal-resize-proxy",
-      style: b.value
-    }, null), L("div", {
+      style: h.value
+    }, null), H("div", {
       class: "f-layout-vertical-resize-proxy",
-      style: g.value
+      style: f.value
     }, null)]);
   }
-}), q = {
+}), pe = "https://json-schema.org/draft/2020-12/schema", ye = "https://farris-design.gitee.io/layout-pane.schema.json", me = "layout-pane", ve = "A Farris Container Component", ge = "object", he = {
+  id: {
+    description: "The unique identifier for a layout pane",
+    type: "string"
+  },
+  type: {
+    description: "The type string of layout paney",
+    type: "string",
+    default: "layout-pane"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  collapsable: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  contents: {
+    description: "",
+    type: "array",
+    default: []
+  },
+  height: {
+    description: "",
+    type: "number"
+  },
+  position: {
+    description: "",
+    type: "string",
+    default: "left",
+    enum: [
+      "left",
+      "center",
+      "right",
+      "top",
+      "bottom"
+    ]
+  },
+  resizeable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  width: {
+    description: "",
+    type: "number"
+  },
+  visible: {
+    description: "",
+    type: "number",
+    default: !0
+  }
+}, be = [
+  "id",
+  "type",
+  "contents"
+], ze = {
+  $schema: pe,
+  $id: ye,
+  title: me,
+  description: ve,
+  type: ge,
+  properties: he,
+  required: be
+}, Re = "layout-pane", Ce = "A Farris Container Component", He = "object", Pe = {
+  basic: {
+    description: "Basic Infomation",
+    title: "基本信息",
+    properties: {
+      id: {
+        description: "组件标识",
+        title: "标识",
+        type: "string",
+        readonly: !0
+      },
+      type: {
+        description: "组件类型",
+        title: "控件类型",
+        type: "enum"
+      },
+      width: {
+        description: "",
+        type: "number",
+        title: "宽度"
+      },
+      height: {
+        description: "",
+        type: "number",
+        title: "高度"
+      }
+    }
+  },
+  appearance: {
+    title: "样式",
+    description: "Appearance",
+    properties: {
+      class: {
+        title: "class样式",
+        type: "string",
+        description: ""
+      },
+      style: {
+        title: "style",
+        type: "string",
+        description: ""
+      }
+    }
+  },
+  behavior: {
+    description: "",
+    title: "行为",
+    properties: {
+      collapsable: {
+        description: "",
+        type: "boolean",
+        title: "允许收折"
+      },
+      position: {
+        description: "",
+        type: "enum",
+        title: "位置",
+        editor: {
+          type: "combo-list",
+          data: [
+            {
+              id: "left",
+              name: "左侧"
+            },
+            {
+              id: "center",
+              name: "居中"
+            },
+            {
+              id: "right",
+              name: "右侧"
+            },
+            {
+              id: "top",
+              name: "顶部"
+            },
+            {
+              id: "bottom",
+              name: "底部"
+            }
+          ]
+        }
+      },
+      resizeable: {
+        description: "",
+        type: "boolean",
+        title: "允许调整尺寸"
+      },
+      visible: {
+        description: "运行时组件是否可见",
+        type: "boolean",
+        title: "是否可见"
+      }
+    }
+  }
+}, Se = {
+  title: Re,
+  description: Ce,
+  type: He,
+  categories: Pe
+}, A = {
   customClass: { type: String, defaut: "" },
   customStyle: { type: String, defaut: "" },
   /** 记录原始定义宽度 */
@@ -136,109 +414,217 @@ const k = /* @__PURE__ */ M({
   minWidth: { type: Number, default: 100 },
   /** 面板最小高度 */
   minHeight: { type: Number, default: 100 }
-};
-function D(t, H, y, v, b) {
+}, X = N(A, ze, T, V, Se);
+function G(e, r, s, d, h) {
   const {
-    horizontalResizeBarPosition: g,
+    horizontalResizeBarPosition: f,
     horizontalResizeHandleOffset: m,
-    showHorizontalResizeHandle: R,
-    showVerticalResizeHandle: C,
-    verticalResizeBarPosition: u,
+    showHorizontalResizeHandle: z,
+    showVerticalResizeHandle: R,
+    verticalResizeBarPosition: c,
     verticalResizeHandleOffset: P,
-    draggingHorizontalResizeHandle: x,
+    draggingHorizontalResizeHandle: b,
     draggingVerticalResizeHandle: B,
-    getPanelMaxHeight: O,
+    getPanelMaxHeight: j,
     getPanelMaxWidth: w
-  } = b;
-  let r = "", l, e, n;
-  function a(c) {
-    if ((r === "left" || r === "right") && e) {
-      const { left: h } = e.getBoundingClientRect(), { width: i } = l.getBoundingClientRect(), S = c.clientX - h;
-      let s = r === "left" ? (i || 0) + (S - g.value) : (i || 0) - (S - g.value);
-      s = y.value > 0 ? Math.max(y.value, s) : s;
-      const z = w(r, y.value);
-      z != null && (s = z > s ? s : z), t.value = s;
-    }
-    if ((r === "top" || r === "bottom") && e) {
-      const { top: h } = e.getBoundingClientRect(), { height: i } = l.getBoundingClientRect(), S = c.clientY - h;
-      let s = r === "top" ? (i || 0) + (S - u.value) : (i || 0) - (S - u.value);
-      s = v.value > 0 ? Math.max(v.value, s) : s;
-      const z = O(r, v.value);
-      z != null && (s = z > s ? s : z), H.value = s;
-    }
-    m.value = 0, P.value = 0, g.value = -1, u.value = -1, R.value = !1, C.value = !1, document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", a), document.body.style.userSelect = "", r = "", l = null, e = null;
-  }
-  function f(c, h, i) {
-    if (r = h, l = i, R.value = !0, e = c.composedPath().find((s) => (s.className || "").split(" ")[0] === "f-layout"), e) {
-      const { left: s } = e.getBoundingClientRect(), z = c.clientX - s;
-      m.value = z, g.value = z;
-      const j = w(r, y.value) || 0;
-      n = (N) => x(N, j, y.value, r), document.addEventListener("mousemove", n), document.addEventListener("mouseup", a), document.body.style.userSelect = "none";
-    }
-  }
-  function o(c, h, i) {
-    if (r = h, l = i, C.value = !0, e = c.composedPath().find((s) => (s.className || "").split(" ")[0] === "f-layout"), e) {
-      const { top: s } = e.getBoundingClientRect();
-      P.value = c.clientY - s, u.value = c.clientY - s;
-      const z = O(r, v.value) || 0;
-      n = (j) => B(j, z, v.value, r), document.addEventListener("mousemove", n), document.addEventListener("mouseup", a), document.body.style.userSelect = "none";
-    }
-  }
-  return { onClickHorizontalResizeBar: f, onClickVerticalResizeBar: o };
+  } = h;
+  let v = "", a, n, i;
+  function l(o) {
+    if ((v === "left" || v === "right") && n) {
+      const { left: C } = n.getBoundingClientRect(), { width: u } = a.getBoundingClientRect(), x = o.clientX - C;
+      let p = v === "left" ? (u || 0) + (x - f.value) : (u || 0) - (x - f.value);
+      p = s.value > 0 ? Math.max(s.value, p) : p;
+      const S = w(v, s.value);
+      S != null && (p = S > p ? p : S), e.value = p;
+    }
+    if ((v === "top" || v === "bottom") && n) {
+      const { top: C } = n.getBoundingClientRect(), { height: u } = a.getBoundingClientRect(), x = o.clientY - C;
+      let p = v === "top" ? (u || 0) + (x - c.value) : (u || 0) - (x - c.value);
+      p = d.value > 0 ? Math.max(d.value, p) : p;
+      const S = j(v, d.value);
+      S != null && (p = S > p ? p : S), r.value = p;
+    }
+    m.value = 0, P.value = 0, f.value = -1, c.value = -1, z.value = !1, R.value = !1, document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", l), document.body.style.userSelect = "", v = "", a = null, n = null;
+  }
+  function g(o, C, u) {
+    if (v = C, a = u, z.value = !0, n = o.composedPath().find((p) => (p.className || "").split(" ")[0] === "f-layout"), n) {
+      const { left: p } = n.getBoundingClientRect(), S = o.clientX - p;
+      m.value = S, f.value = S;
+      const k = w(v, s.value) || 0;
+      i = (J) => b(J, k, s.value, v), document.addEventListener("mousemove", i), document.addEventListener("mouseup", l), document.body.style.userSelect = "none";
+    }
+  }
+  function t(o, C, u) {
+    if (v = C, a = u, R.value = !0, n = o.composedPath().find((p) => (p.className || "").split(" ")[0] === "f-layout"), n) {
+      const { top: p } = n.getBoundingClientRect();
+      P.value = o.clientY - p, c.value = o.clientY - p;
+      const S = j(v, d.value) || 0;
+      i = (k) => B(k, S, d.value, v), document.addEventListener("mousemove", i), document.addEventListener("mouseup", l), document.body.style.userSelect = "none";
+    }
+  }
+  return { onClickHorizontalResizeBar: g, onClickVerticalResizeBar: t };
 }
 const E = /* @__PURE__ */ M({
   name: "FLayoutPane",
-  props: q,
+  props: A,
   emits: [],
-  setup(t, H) {
-    const y = d(t.minHeight <= 0 ? 100 : t.minHeight), v = d(t.minWidth <= 0 ? 100 : t.minWidth), b = d(t.width <= 0 ? 100 : t.width), g = d(t.height <= 0 ? 100 : t.height), m = d(Math.max(y.value, g.value)), R = d(Math.max(v.value, b.value)), C = d(), u = d(t.position), P = d(t.resizable);
-    W(() => t.resizable, (o) => {
-      P.value = o;
+  setup(e, r) {
+    const s = y(e.minHeight <= 0 ? 100 : e.minHeight), d = y(e.minWidth <= 0 ? 100 : e.minWidth), h = y(e.width <= 0 ? 100 : e.width), f = y(e.height <= 0 ? 100 : e.height), m = y(Math.max(s.value, f.value)), z = y(Math.max(d.value, h.value)), R = y(), c = y(e.position), P = y(e.resizable);
+    K(() => e.resizable, (t) => {
+      P.value = t;
     });
-    const x = Y("layout"), {
+    const b = L("layout"), {
       useResizeHandleComposition: B
-    } = x, O = D(R, m, v, y, B), {
+    } = b, j = G(z, m, d, s, B), {
       onClickHorizontalResizeBar: w,
-      onClickVerticalResizeBar: r
-    } = O, l = p(() => ({
+      onClickVerticalResizeBar: v
+    } = j, a = O(() => ({
       "f-layout-resize-bar": !0,
-      "f-layout-resize-bar-e": u.value === "left",
-      "f-layout-resize-bar-n": u.value === "bottom",
-      "f-layout-resize-bar-s": u.value === "top",
-      "f-layout-resize-bar-w": u.value === "right"
-    })), e = p(() => u.value !== "center" && P.value);
-    function n(o, c) {
-      (c === "left" || c === "right") && w(o, c, C.value), (c === "top" || c === "bottom") && r(o, c, C.value);
-    }
-    const a = p(() => {
-      const o = {
+      "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"
+    })), n = O(() => c.value !== "center" && P.value);
+    function i(t, o) {
+      (o === "left" || o === "right") && w(t, o, R.value), (o === "top" || o === "bottom") && v(t, o, R.value);
+    }
+    const l = O(() => {
+      const t = {
         "f-layout-pane": !0,
-        "f-page-content-nav": u.value === "left" || u.value === "right",
-        "f-page-content-main": u.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, h) => (c[h] = !0, c), o), o;
-    }), f = p(() => {
-      const o = {};
-      return (R.value && u.value === "left" || u.value === "right") && (o.width = `${R.value}px`), (m.value && u.value === "bottom" || u.value === "top") && (o.height = `${m.value}px`), t.visible || (o.display = "none"), o;
+      return e.customClass && String(e.customClass).split(" ").reduce((o, C) => (o[C] = !0, o), t), t;
+    }), g = O(() => {
+      const t = {};
+      return (z.value && c.value === "left" || c.value === "right") && (t.width = `${z.value}px`), (m.value && c.value === "bottom" || c.value === "top") && (t.height = `${m.value}px`), e.visible || (t.display = "none"), t;
     });
-    return () => L("div", {
-      ref: C,
+    return () => H("div", {
+      ref: R,
+      class: l.value,
+      style: g.value,
+      "data-position": c.value
+    }, [r.slots.default && r.slots.default(), n.value && H("span", {
       class: a.value,
-      style: f.value,
-      "data-position": u.value
-    }, [H.slots.default && H.slots.default(), e.value && L("span", {
+      onMousedown: (t) => i(t, c.value)
+    }, null)]);
+  }
+});
+function Oe(e, r) {
+  function s() {
+    return !1;
+  }
+  return { canAccepts: s };
+}
+const je = /* @__PURE__ */ M({
+  name: "FLayoutDesign",
+  props: F,
+  emits: [],
+  setup(e, r) {
+    var P;
+    const s = y(), d = L("design-item-context"), h = Oe(d.schema, (P = d.parent) == null ? void 0 : P.schema), f = W(s, d, h);
+    f.value.canNested = !1;
+    const m = Y(s), {
+      horizontalResizeHandleStyle: z,
+      verticalResizeHandleStyle: R,
+      resizeOverlayStyle: c
+    } = m;
+    return D("layout", {
+      useResizeHandleComposition: m
+    }), I(() => {
+      s.value.componentInstance = f;
+    }), r.expose(f.value), () => H("div", {
+      class: "f-layout f-page-content",
+      ref: s
+    }, [r.slots.default && r.slots.default(), H("div", {
+      class: "f-layout-resize-overlay",
+      style: c.value
+    }, null), H("div", {
+      class: "f-layout-horizontal-resize-proxy",
+      style: z.value
+    }, null), H("div", {
+      class: "f-layout-vertical-resize-proxy",
+      style: R.value
+    }, null)]);
+  }
+});
+function Be(e, r) {
+  const s = e.schema;
+  function d(f) {
+    return !!_().basalDragulaRuleForContainer(f);
+  }
+  function h() {
+    const f = ["f-layout-pane"];
+    return (s.position === "left" || s.position === "right") && f.push("f-page-content-nav"), s.position === "center" && f.push("f-page-content-main"), f.join(" ");
+  }
+  return { canAccepts: d, getDesignerClass: h };
+}
+const we = /* @__PURE__ */ M({
+  name: "FLayoutPaneDesign",
+  props: A,
+  emits: [],
+  setup(e, r) {
+    const s = y(), d = y();
+    L("designer-host-service");
+    const h = L("design-item-context"), f = Be(h), m = W(d, h, f);
+    m.value.canNested = !1, m.value.canMove = !1, m.value.canDelete = !1, I(() => {
+      d.value.componentInstance = m;
+    }), r.expose(m.value);
+    const z = y(Math.max(e.minHeight, e.height)), R = y(Math.max(e.minWidth, e.width)), c = y(e.minHeight), P = y(e.minWidth), b = y(e.position), B = L("layout"), {
+      useResizeHandleComposition: j
+    } = B, w = G(R, z, P, c, j), {
+      onClickHorizontalResizeBar: v,
+      onClickVerticalResizeBar: a
+    } = w, n = O(() => ({
+      "f-layout-resize-bar": !0,
+      "f-layout-resize-bar-e": b.value === "left",
+      "f-layout-resize-bar-n": b.value === "bottom",
+      "f-layout-resize-bar-s": b.value === "top",
+      "f-layout-resize-bar-w": b.value === "right"
+    }));
+    function i(t, o) {
+      (o === "left" || o === "right") && v(t, o, s.value), (o === "top" || o === "bottom") && a(t, o, s.value);
+    }
+    const l = O(() => {
+      const t = {
+        "f-layout-pane": !0,
+        "f-page-content-nav": b.value === "left" || b.value === "right",
+        "f-page-content-main": b.value === "center"
+      };
+      return e.customClass && String(e.customClass).split(" ").reduce((o, C) => (o[C] = !0, o), t), t;
+    }), g = O(() => {
+      const t = {
+        flex: "1"
+      };
+      return (R.value && b.value === "left" || b.value === "right") && (t.width = `${R.value}px`), (z.value && b.value === "bottom" || b.value === "top") && (t.height = `${z.value}px`), t;
+    });
+    return () => H("div", {
+      ref: s,
       class: l.value,
-      onMousedown: (o) => n(o, u.value)
+      style: g.value
+    }, [H("div", {
+      ref: d,
+      class: "drag-container",
+      "data-dragref": `${h.schema.id}-container`
+    }, [r.slots.default && r.slots.default()]), H("span", {
+      class: n.value,
+      onMousedown: (t) => i(t, b.value)
     }, null)]);
   }
 });
-k.install = (t) => {
-  t.component(k.name, k), t.component(E.name, E);
+$.install = (e) => {
+  e.component($.name, $), e.component(E.name, E);
+};
+$.register = (e, r, s, d) => {
+  e.layout = $, r.layout = q, e["layout-pane"] = E, r["layout-pane"] = X;
+};
+$.registerDesigner = (e, r, s) => {
+  e.layout = je, r.layout = q, e["layout-pane"] = we, r["layout-pane"] = X;
 };
 export {
-  k as FLayout,
+  $ as FLayout,
   E as FLayoutPane,
-  k as default,
-  q as layoutPaneProps,
-  X as layoutProps
+  $ as default,
+  F as layoutProps,
+  q as layoutPropsResolver
 };