@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/components/layout/index.esm.js

@@ -1,401 +1,123 @@
-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 = {
+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 = {
   customStyle: { type: String, defaut: "" },
   customClass: { type: String, defaut: "" }
-}, 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`,
+};
+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`,
     cursor: "e-resize"
-  })), R = O(() => ({
+  })), C = p(() => ({
     display: m.value ? "block" : "none",
-    top: `${h.value}px`,
+    top: `${b.value}px`,
     cursor: "n-resize"
-  })), c = O(() => {
-    const a = {
-      display: m.value || f.value ? "block" : "none"
+  })), u = p(() => {
+    const l = {
+      display: m.value || g.value ? "block" : "none"
     };
-    return h.value > 0 && (a.cursor = "n-resize"), a;
+    return b.value > 0 && (l.cursor = "n-resize"), l;
   });
-  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 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 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 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() {
-    const a = e.value;
-    if (a) {
-      const { width: n, height: i } = a.getBoundingClientRect();
-      return { width: n, height: i };
+    const l = t.value;
+    if (l) {
+      const { width: e, height: n } = l.getBoundingClientRect();
+      return { width: e, height: n };
     }
     return null;
   }
-  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;
+  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;
     }, {}) : null;
   }
-  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 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 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;
+  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;
     }
   }
   return {
-    horizontalResizeHandleStyle: z,
-    verticalResizeHandleStyle: R,
-    resizeOverlayStyle: c,
-    showHorizontalResizeHandle: f,
+    horizontalResizeHandleStyle: R,
+    verticalResizeHandleStyle: C,
+    resizeOverlayStyle: u,
+    showHorizontalResizeHandle: g,
     showVerticalResizeHandle: m,
-    horizontalResizeBarPosition: r,
-    verticalResizeBarPosition: s,
-    verticalResizeHandleOffset: h,
-    horizontalResizeHandleOffset: d,
+    horizontalResizeBarPosition: H,
+    verticalResizeBarPosition: y,
+    verticalResizeHandleOffset: b,
+    horizontalResizeHandleOffset: v,
     draggingHorizontalResizeHandle: P,
-    draggingVerticalResizeHandle: b,
-    getPanelMaxHeight: v,
+    draggingVerticalResizeHandle: x,
+    getPanelMaxHeight: r,
     getPanelMaxWidth: w
   };
 }
-const $ = /* @__PURE__ */ M({
+const k = /* @__PURE__ */ M({
   name: "FLayout",
-  props: F,
+  props: X,
   emits: [],
-  setup(e, r) {
-    const s = y(), d = Y(s), {
-      horizontalResizeHandleStyle: h,
-      verticalResizeHandleStyle: f,
+  setup(t, H) {
+    const y = d(), v = A(y), {
+      horizontalResizeHandleStyle: b,
+      verticalResizeHandleStyle: g,
       resizeOverlayStyle: m
-    } = d;
-    D("layout", {
-      useResizeHandleComposition: d
+    } = v;
+    V("layout", {
+      useResizeHandleComposition: v
     });
-    const z = O(() => U({
+    const R = p(() => F({
       "f-layout": !0
-    }, 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", {
+    }, 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", {
       class: "f-layout-resize-overlay",
       style: m.value
-    }, null), H("div", {
+    }, null), L("div", {
       class: "f-layout-horizontal-resize-proxy",
-      style: h.value
-    }, null), H("div", {
+      style: b.value
+    }, null), L("div", {
       class: "f-layout-vertical-resize-proxy",
-      style: f.value
+      style: g.value
     }, null)]);
   }
-}), 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 = {
+}), q = {
   customClass: { type: String, defaut: "" },
   customStyle: { type: String, defaut: "" },
   /** 记录原始定义宽度 */
@@ -414,217 +136,109 @@ const $ = /* @__PURE__ */ M({
   minWidth: { type: Number, default: 100 },
   /** 面板最小高度 */
   minHeight: { type: Number, default: 100 }
-}, X = N(A, ze, T, V, Se);
-function G(e, r, s, d, h) {
+};
+function D(t, H, y, v, b) {
   const {
-    horizontalResizeBarPosition: f,
+    horizontalResizeBarPosition: g,
     horizontalResizeHandleOffset: m,
-    showHorizontalResizeHandle: z,
-    showVerticalResizeHandle: R,
-    verticalResizeBarPosition: c,
+    showHorizontalResizeHandle: R,
+    showVerticalResizeHandle: C,
+    verticalResizeBarPosition: u,
     verticalResizeHandleOffset: P,
-    draggingHorizontalResizeHandle: b,
+    draggingHorizontalResizeHandle: x,
     draggingVerticalResizeHandle: B,
-    getPanelMaxHeight: j,
+    getPanelMaxHeight: O,
     getPanelMaxWidth: w
-  } = 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 };
+  } = 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 };
 }
 const E = /* @__PURE__ */ M({
   name: "FLayoutPane",
-  props: A,
+  props: q,
   emits: [],
-  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;
+  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;
     });
-    const b = L("layout"), {
+    const x = Y("layout"), {
       useResizeHandleComposition: B
-    } = b, j = G(z, m, d, s, B), {
+    } = x, O = D(R, m, v, y, B), {
       onClickHorizontalResizeBar: w,
-      onClickVerticalResizeBar: v
-    } = j, a = O(() => ({
+      onClickVerticalResizeBar: r
+    } = O, l = p(() => ({
       "f-layout-resize-bar": !0,
-      "f-layout-resize-bar-e": c.value === "left",
-      "f-layout-resize-bar-n": c.value === "bottom",
-      "f-layout-resize-bar-s": c.value === "top",
-      "f-layout-resize-bar-w": c.value === "right"
-    })), 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-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-pane": !0,
-        "f-page-content-nav": c.value === "left" || c.value === "right",
-        "f-page-content-main": c.value === "center"
+        "f-page-content-nav": u.value === "left" || u.value === "right",
+        "f-page-content-main": u.value === "center"
       };
-      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 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 () => H("div", {
-      ref: R,
-      class: l.value,
-      style: g.value,
-      "data-position": c.value
-    }, [r.slots.default && r.slots.default(), n.value && H("span", {
+    return () => L("div", {
+      ref: C,
       class: a.value,
-      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,
+      style: f.value,
+      "data-position": u.value
+    }, [H.slots.default && H.slots.default(), e.value && L("span", {
       class: l.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)
+      onMousedown: (o) => n(o, u.value)
     }, null)]);
   }
 });
-$.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;
+k.install = (t) => {
+  t.component(k.name, k), t.component(E.name, E);
 };
 export {
-  $ as FLayout,
+  k as FLayout,
   E as FLayoutPane,
-  $ as default,
-  F as layoutProps,
-  q as layoutPropsResolver
+  k as default,
+  q as layoutPaneProps,
+  X as layoutProps
 };