@farris/ui-vue/components/layout/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

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