@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
942 lines (941 loc) • 30.4 kB
JavaScript
import { ref as P, computed as k, defineComponent as A, provide as V, createVNode as j, watch as oe, inject as $, onMounted as W } from "vue";
import { isPlainObject as q, cloneDeep as _ } from "lodash-es";
import "bignumber.js";
import "../common/index.esm.js";
const Y = {}, X = {};
function L(n) {
const { properties: e, title: t, ignore: o } = n, a = o && Array.isArray(o), i = Object.keys(e).reduce((l, g) => ((!a || !o.find((w) => w === g)) && (l[g] = e[g].type === "object" && e[g].properties ? L(e[g]) : _(e[g].default)), l), {});
if (t && (!a || !o.find((l) => l === "id"))) {
const l = t.toLowerCase().replace(/-/g, "_");
i.id = `${l}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
function ae(n) {
const { properties: e, title: t, required: o } = n;
if (o && Array.isArray(o)) {
const a = o.reduce((i, l) => (i[l] = e[l].type === "object" && e[l].properties ? L(e[l]) : _(e[l].default), i), {});
if (t && o.find((i) => i === "id")) {
const i = t.toLowerCase().replace(/-/g, "_");
a.id = `${i}_${Math.random().toString().slice(2, 6)}`;
}
return a;
}
return {
type: t
};
}
function U(n, e = {}, t) {
const o = Y[n];
if (o) {
let a = ae(o);
const i = X[n];
return a = i ? i({ getSchemaByType: U }, a, e, t) : a, a;
}
return null;
}
function re(n, e) {
const t = L(e);
return Object.keys(t).reduce((o, a) => (Object.prototype.hasOwnProperty.call(n, a) && (o[a] && q(o[a]) && q(n[a] || !n[a]) ? Object.assign(o[a], n[a] || {}) : o[a] = n[a]), o), t), t;
}
function G(n, e) {
return Object.keys(n).filter((o) => n[o] != null).reduce((o, a) => {
if (e.has(a)) {
const i = e.get(a);
if (typeof i == "string")
o[i] = n[a];
else {
const l = i(a, n[a], n);
Object.assign(o, l);
}
} else
o[a] = n[a];
return o;
}, {});
}
function ie(n, e, t = /* @__PURE__ */ new Map()) {
const o = re(n, e);
return G(o, t);
}
function le(n = {}) {
function e(r, m, c, z) {
if (typeof c == "number")
return z[r].length === c;
if (typeof c == "object") {
const O = Object.keys(c)[0], S = c[O];
if (O === "not")
return Number(z[r].length) !== Number(S);
if (O === "moreThan")
return Number(z[r].length) >= Number(S);
if (O === "lessThan")
return Number(z[r].length) <= Number(S);
}
return !1;
}
function t(r, m, c, z) {
return z[r] && z[r].propertyValue && String(z[r].propertyValue.value) === String(c);
}
const o = /* @__PURE__ */ new Map([
["length", e],
["getProperty", t]
]);
Object.keys(n).reduce((r, m) => (r.set(m, n[m]), r), o);
function a(r, m) {
const c = r;
return typeof m == "number" ? [{ target: c, operator: "length", param: null, value: Number(m) }] : typeof m == "boolean" ? [{ target: c, operator: "getProperty", param: r, value: !!m }] : typeof m == "object" ? Object.keys(m).map((z) => {
if (z === "length")
return { target: c, operator: "length", param: null, value: m[z] };
const O = z, S = m[z];
return { target: c, operator: "getProperty", param: O, value: S };
}) : [];
}
function i(r) {
return Object.keys(r).reduce((c, z) => {
const O = a(z, r[z]);
return c.push(...O), c;
}, []);
}
function l(r, m) {
if (o.has(r.operator)) {
const c = o.get(r.operator);
return c && c(r.target, r.param, r.value, m) || !1;
}
return !1;
}
function g(r, m) {
return i(r).reduce((O, S) => O && l(S, m), !0);
}
function w(r, m) {
const c = Object.keys(r), z = c.includes("allOf"), O = c.includes("anyOf"), S = z || O, p = (S ? r[S ? z ? "allOf" : "anyOf" : "allOf"] : [r]).map((v) => g(v, m));
return z ? !p.includes(!1) : p.includes(!0);
}
return { parseValueSchema: w };
}
const H = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
"input-group": { type: "input-group", name: "文本" },
textarea: { type: "textarea", name: "多行文本" },
lookup: { type: "lookup", name: "帮助" },
"number-spinner": { type: "number-spinner", name: "数值" },
"date-picker": { type: "date-picker", name: "日期" },
switch: { type: "switch", name: "开关" },
"radio-group": { type: "radio-group", name: "单选组" },
"check-box": { type: "check-box", name: "复选框" },
"check-group": { type: "check-group", name: "复选框组" },
"combo-list": { type: "combo-list", name: "下拉列表" },
"response-form": { type: "response-form", name: "卡片面板" },
"response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
"response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
"tree-grid": { type: "tree-grid", name: "树表格" },
"tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
"data-grid": { type: "data-grid", name: "表格" },
"data-grid-column": { type: "data-grid-column", name: "表格列" },
module: { type: "Module", name: "模块" },
component: { type: "component", name: "组件" },
tabs: { type: "tabs", name: "标签页" },
"tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
"tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
"time-picker": { type: "time-picker", name: "时间选择" },
section: { type: "section", name: "分组面板" },
"section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
"section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
splitter: { type: "splitter", name: "分栏面板" },
"splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
"component-ref": { type: "component-ref", name: "组件引用节点" },
uploader: { type: "uploader", name: "附件上传" },
"page-header": { type: "page-header", name: "页头" },
"page-footer": { type: "page-footer", name: "页脚" },
"tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
fieldset: { type: "fieldset", name: "分组" },
"query-solution": { type: "query-solution", name: "筛选方案" },
drawer: { type: "drawer", name: "抽屉" }
}, se = {}, ce = {};
le();
function J(n, e, t = /* @__PURE__ */ new Map(), o = (l, g, w, r) => g, a = {}, i = (l) => l) {
return Y[e.title] = e, X[e.title] = o, se[e.title] = a, ce[e.title] = i, (l = {}, g = !0) => {
if (!g)
return G(l, t);
const w = ie(l, e, t), r = Object.keys(n).reduce((m, c) => (m[c] = n[c].default, m), {});
return Object.assign(r, w);
};
}
function ue(n, e) {
return { customClass: e.class, customStyle: e.style };
}
const Q = /* @__PURE__ */ new Map([
["appearance", ue]
]);
function Z(n, e, t) {
return e;
}
const pe = "https://json-schema.org/draft/2020-12/schema", fe = "https://farris-design.gitee.io/layout.schema.json", ye = "layout", me = "A Farris Container Component", de = "object", he = {
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
}
}, ve = [
"id",
"type",
"contents"
], be = {
$schema: pe,
$id: fe,
title: ye,
description: me,
type: de,
properties: he,
required: ve
}, ge = "layout", ze = "A Farris Component", Pe = "object", we = {
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"
}
}
}
}, Ce = {
title: ge,
description: ze,
type: Pe,
categories: we
}, N = {
customStyle: { type: String, defaut: "" },
customClass: { type: String, defaut: "" }
}, K = J(N, be, Q, Z, Ce);
function x(n) {
const e = P(-1), t = P(-1), o = P(0), a = P(0), i = P(!1), l = P(!1), g = k(() => ({
display: i.value ? "block" : "none",
left: `${o.value}px`,
cursor: "e-resize"
})), w = k(() => ({
display: l.value ? "block" : "none",
top: `${a.value}px`,
cursor: "n-resize"
})), r = k(() => ({
display: l.value || i.value ? "block" : "none"
}));
function m(b, p, h, v) {
const M = n.value;
if (M) {
const { left: u, right: d, width: s } = M.getBoundingClientRect();
let f = b.clientX - u;
v === "right" && (f = d - b.clientX), f > p && (f = p), f < h && (f = h), v === "right" && (f = s - f), o.value = f;
}
}
function c(b, p, h, v) {
const M = n.value;
if (M) {
const { top: u, bottom: d, height: s } = M.getBoundingClientRect();
let f = b.clientY - u;
v === "bottom" && (f = d - b.clientY), f > p && (f = p), f < h && (f = h), v === "bottom" && (f = s - f), a.value = f;
}
}
function z() {
const b = n.value;
if (b) {
const { width: p, height: h } = b.getBoundingClientRect();
return { width: p, height: h };
}
return null;
}
function O() {
const b = n.value;
return b ? Array.from(b.querySelectorAll("[data-position]")).reduce((p, h) => {
const v = h.getAttribute("data-position");
return p = Object.assign(p, { [v]: h }), p;
}, {}) : null;
}
function S(b, p) {
const h = z(), v = O();
if (h && v) {
const M = v == null ? void 0 : v.right, u = v == null ? void 0 : v.left;
if (b === "left" && u)
return M ? h.width - M.clientWidth - p : h.width - p;
if (b === "right" && M)
return u ? h.width - u.clientWidth - p : h.width - p;
}
}
function C(b, p) {
const h = z(), v = O();
if (h && v) {
const M = v == null ? void 0 : v.bottom, u = v == null ? void 0 : v.top;
if (b === "top" && u)
return M ? h.height - M.clientHeight - p : h.height - p;
if (b === "bottom" && M)
return u ? h.height - u.clientHeight - p : h.height - p;
}
}
return {
horizontalResizeHandleStyle: g,
verticalResizeHandleStyle: w,
resizeOverlayStyle: r,
showHorizontalResizeHandle: i,
showVerticalResizeHandle: l,
horizontalResizeBarPosition: e,
verticalResizeBarPosition: t,
verticalResizeHandleOffset: a,
horizontalResizeHandleOffset: o,
draggingHorizontalResizeHandle: m,
draggingVerticalResizeHandle: c,
getPanelMaxHeight: C,
getPanelMaxWidth: S
};
}
const Oe = ["moz", "ms", "webkit"];
function Be() {
let n = 0;
return (e) => {
const t = (/* @__PURE__ */ new Date()).getTime(), o = Math.max(0, 16 - (t - n)), a = setTimeout(() => {
e(t + o);
}, o);
return n = t + o, a;
};
}
function Se() {
if (typeof window > "u")
return () => 0;
if (window.requestAnimationFrame)
return window.requestAnimationFrame.bind(window);
const n = Oe.filter((e) => `${e}RequestAnimationFrame` in window)[0];
return n ? window[`${n}RequestAnimationFrame`] : Be();
}
Se();
function Me(n, e) {
return ((e == null ? void 0 : e.split(" ")) || []).reduce((o, a) => (a && (o[a] = !0), o), n), n;
}
function De(n, e) {
return ((e == null ? void 0 : e.split(";")) || []).reduce((o, a) => {
if (a) {
const i = a.split(":");
o[i[0]] = i[1];
}
return o;
}, n), n;
}
const T = /* @__PURE__ */ A({
name: "FLayout",
props: N,
emits: [],
setup(n, e) {
const t = P(), o = x(t), {
horizontalResizeHandleStyle: a,
verticalResizeHandleStyle: i,
resizeOverlayStyle: l
} = o;
V("layout", {
useResizeHandleComposition: o
});
const g = k(() => Me({
"f-layout": !0
}, n == null ? void 0 : n.customClass)), w = k(() => De({}, n == null ? void 0 : n.customStyle));
return () => j("div", {
class: g.value,
style: w.value,
ref: t
}, [e.slots.default && e.slots.default(), j("div", {
class: "f-layout-resize-overlay",
style: l.value
}, null), j("div", {
class: "f-layout-horizontal-resize-proxy",
style: a.value
}, null), j("div", {
class: "f-layout-vertical-resize-proxy",
style: i.value
}, null)]);
}
}), je = "https://json-schema.org/draft/2020-12/schema", ke = "https://farris-design.gitee.io/layout-pane.schema.json", He = "layout-pane", Te = "A Farris Container Component", $e = "object", Ae = {
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
}
}, Ee = [
"id",
"type",
"contents"
], Re = {
$schema: je,
$id: ke,
title: He,
description: Te,
type: $e,
properties: Ae,
required: Ee
}, Le = "layout-pane", Ne = "A Farris Container Component", Fe = "object", qe = {
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: "是否可见"
}
}
}
}, Ve = {
title: Le,
description: Ne,
type: Fe,
categories: qe
}, F = {
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 }
}, I = J(F, Re, Q, Z, Ve);
function ee(n, e, t, o, a) {
const {
horizontalResizeBarPosition: i,
horizontalResizeHandleOffset: l,
showHorizontalResizeHandle: g,
showVerticalResizeHandle: w,
verticalResizeBarPosition: r,
verticalResizeHandleOffset: m,
draggingHorizontalResizeHandle: c,
draggingVerticalResizeHandle: z,
getPanelMaxHeight: O,
getPanelMaxWidth: S
} = a;
let C = "", b, p, h;
function v(d) {
if ((C === "left" || C === "right") && p) {
const { left: s } = p.getBoundingClientRect(), { width: f } = b.getBoundingClientRect(), B = d.clientX - s;
let y = C === "left" ? (f || 0) + (B - i.value) : (f || 0) - (B - i.value);
y = t.value > 0 ? Math.max(t.value, y) : y;
const D = S(C, t.value);
D != null && (y = D > y ? y : D), n.value = y;
}
if ((C === "top" || C === "bottom") && p) {
const { top: s } = p.getBoundingClientRect(), { height: f } = b.getBoundingClientRect(), B = d.clientY - s;
let y = C === "top" ? (f || 0) + (B - r.value) : (f || 0) - (B - r.value);
y = o.value > 0 ? Math.max(o.value, y) : y;
const D = O(C, o.value);
D != null && (y = D > y ? y : D), e.value = y;
}
l.value = 0, m.value = 0, i.value = -1, r.value = -1, g.value = !1, w.value = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", v), document.body.style.userSelect = "", C = "", b = null, p = null;
}
function M(d, s, f) {
if (C = s, b = f, g.value = !0, p = d.composedPath().find((y) => (y.className || "").split(" ")[0] === "f-layout"), p) {
const { left: y } = p.getBoundingClientRect(), D = d.clientX - y;
l.value = D, i.value = D;
const E = S(C, t.value) || 0;
h = (ne) => c(ne, E, t.value, C), document.addEventListener("mousemove", h), document.addEventListener("mouseup", v), document.body.style.userSelect = "none";
}
}
function u(d, s, f) {
if (C = s, b = f, w.value = !0, p = d.composedPath().find((y) => (y.className || "").split(" ")[0] === "f-layout"), p) {
const { top: y } = p.getBoundingClientRect();
m.value = d.clientY - y, r.value = d.clientY - y;
const D = O(C, o.value) || 0;
h = (E) => z(E, D, o.value, C), document.addEventListener("mousemove", h), document.addEventListener("mouseup", v), document.body.style.userSelect = "none";
}
}
return { onClickHorizontalResizeBar: M, onClickVerticalResizeBar: u };
}
const R = /* @__PURE__ */ A({
name: "FLayoutPane",
props: F,
emits: [],
setup(n, e) {
const t = P(n.minHeight <= 0 ? 100 : n.minHeight), o = P(n.minWidth <= 0 ? 100 : n.minWidth), a = P(n.width <= 0 ? 100 : n.width), i = P(n.height <= 100 ? 100 : n.height), l = P(Math.max(t.value, i.value)), g = P(Math.max(o.value, a.value)), w = P(), r = P(n.position), m = P(n.resizable);
oe(() => n.resizable, (u) => {
m.value = u;
});
const c = $("layout"), {
useResizeHandleComposition: z
} = c, O = ee(g, l, o, t, z), {
onClickHorizontalResizeBar: S,
onClickVerticalResizeBar: C
} = O, b = k(() => ({
"f-layout-resize-bar": !0,
"f-layout-resize-bar-e": r.value === "left",
"f-layout-resize-bar-n": r.value === "bottom",
"f-layout-resize-bar-s": r.value === "top",
"f-layout-resize-bar-w": r.value === "right"
})), p = k(() => r.value !== "center" && m.value);
function h(u, d) {
(d === "left" || d === "right") && S(u, d, w.value), (d === "top" || d === "bottom") && C(u, d, w.value);
}
const v = k(() => {
const u = {
"f-layout-pane": !0,
"f-page-content-nav": r.value === "left" || r.value === "right",
"f-page-content-main": r.value === "center"
};
return n.customClass && String(n.customClass).split(" ").reduce((d, s) => (d[s] = !0, d), u), u;
}), M = k(() => {
const u = {};
return (g.value && r.value === "left" || r.value === "right") && (u.width = `${g.value}px`), (l.value && r.value === "bottom" || r.value === "top") && (u.height = `${l.value}px`), n.visible || (u.display = "none"), u;
});
return () => j("div", {
ref: w,
class: v.value,
style: M.value,
"data-position": r.value
}, [e.slots.default && e.slots.default(), p.value && j("span", {
class: b.value,
onMousedown: (u) => h(u, r.value)
}, null)]);
}
});
function We(n, e) {
function t() {
return !1;
}
return { canAccepts: t };
}
function te(n, e, t) {
var d;
const o = t && t.getStyles && t.getStyles() || "", a = t && t.getDesignerClass && t.getDesignerClass() || "", i = P();
function l() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
}
function g() {
return !1;
}
function w() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
}
function r() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
}
function m(s) {
if (!s || !s.value)
return null;
if (s.value.schema && s.value.schema.type === "component")
return s.value;
const f = P(s == null ? void 0 : s.value.parent), B = m(f);
return B || null;
}
function c(s = e) {
var D;
if (t != null && t.getDraggableDesignItemElement)
return t.getDraggableDesignItemElement(s);
const { componentInstance: f, designerItemElementRef: B } = s;
if (!f || !f.value)
return null;
const { getCustomButtons: y } = f.value;
return f.value.canMove || y && ((D = y()) != null && D.length) ? B : c(s.parent);
}
function z(s) {
return !!t && t.canAccepts(s);
}
function O() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function S() {
}
function C(s, f) {
var B;
!s || !f || (t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(s, f), (B = e == null ? void 0 : e.setupContext) == null || B.emit("dragEnd"));
}
function b(s, f) {
const { componentType: B } = s;
let y = U(B, s, f);
t && t.onResolveNewComponentSchema && (y = t.onResolveNewComponentSchema(s, y));
const D = B.toLowerCase().replace(/-/g, "_");
return y && !y.id && y.type === B && (y.id = `${D}_${Math.random().toString().slice(2, 6)}`), y;
}
function p(s) {
s && t != null && t.onChildElementMovedOut && t.onChildElementMovedOut(s);
}
function h(...s) {
if (t && t.getPropsConfig)
return t.getPropsConfig(...s);
}
function v() {
t && t.onRemoveComponent && t.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((s) => {
let f = s.id;
s.type === "component-ref" && (f = s.component);
const B = n.value.querySelectorAll(`#${f}-design-item`);
B != null && B.length && Array.from(B).map((y) => {
var D;
(D = y == null ? void 0 : y.componentInstance) != null && D.value.onRemoveComponent && y.componentInstance.value.onRemoveComponent();
});
});
}
function M() {
if (t && t.getCustomButtons)
return t.getCustomButtons();
}
function u(s) {
if (t && t.onPropertyChanged)
return t.onPropertyChanged(s);
}
return i.value = {
canMove: l(),
canSelectParent: g(),
canDelete: w(),
canNested: !r(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: n,
parent: (d = e == null ? void 0 : e.parent) == null ? void 0 : d.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: o,
designerClass: a,
canAccepts: z,
getBelongedComponentInstance: m,
getDraggableDesignItemElement: c,
getDraggingDisplayText: O,
getPropConfig: h,
getDragScopeElement: S,
onAcceptMovedChildElement: C,
onChildElementMovedOut: p,
addNewChildComponentSchema: b,
triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || P(!1),
triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || P(!1),
onRemoveComponent: v,
getCustomButtons: M,
onPropertyChanged: u
}, i;
}
const _e = /* @__PURE__ */ A({
name: "FLayoutDesign",
props: N,
emits: [],
setup(n, e) {
var m;
const t = P(), o = $("design-item-context"), a = We(o.schema, (m = o.parent) == null ? void 0 : m.schema), i = te(t, o, a);
i.value.canNested = !1;
const l = x(t), {
horizontalResizeHandleStyle: g,
verticalResizeHandleStyle: w,
resizeOverlayStyle: r
} = l;
return V("layout", {
useResizeHandleComposition: l
}), W(() => {
t.value.componentInstance = i;
}), e.expose(i.value), () => j("div", {
class: "f-layout f-page-content",
ref: t
}, [e.slots.default && e.slots.default(), j("div", {
class: "f-layout-resize-overlay",
style: r.value
}, null), j("div", {
class: "f-layout-horizontal-resize-proxy",
style: g.value
}, null), j("div", {
class: "f-layout-vertical-resize-proxy",
style: w.value
}, null)]);
}
});
function Ye() {
function n(e, t) {
var l;
if (!e)
return !1;
const o = ((l = e.targetContainer) == null ? void 0 : l.componentInstance) && e.targetContainer.componentInstance.value;
if (!o)
return !1;
const a = o.schema.type, i = t == null ? void 0 : t.formSchemaUtils.getComponentById(o.belongedComponentId);
return !((e.componentCategory === "input" || e.componentType === "form-group") && ![H["response-layout-item"].type, H["response-form"].type, H.fieldset.type].includes(a) || (e.componentType === H.tabs.type || e.componentType === H.section.type) && ((i == null ? void 0 : i.componentType) !== "frame" || ![H["content-container"].type, H["splitter-pane"].type, H["response-layout-item"].type].includes(a)) || e.componentType === H["query-solution"].type || e.componentType === H.fieldset.type && a !== H["response-form"].type);
}
return {
basalDragulaRuleForContainer: n
};
}
function Xe(n, e) {
const t = n.schema;
function o(i) {
return !!Ye().basalDragulaRuleForContainer(i);
}
function a() {
const i = ["f-layout-pane"];
return (t.position === "left" || t.position === "right") && i.push("f-page-content-nav"), t.position === "center" && i.push("f-page-content-main"), i.join(" ");
}
return { canAccepts: o, getDesignerClass: a };
}
const Ue = /* @__PURE__ */ A({
name: "FLayoutPaneDesign",
props: F,
emits: [],
setup(n, e) {
const t = P(), o = P();
$("designer-host-service");
const a = $("design-item-context"), i = Xe(a), l = te(o, a, i);
l.value.canNested = !1, l.value.canMove = !1, l.value.canDelete = !1, W(() => {
o.value.componentInstance = l;
}), e.expose(l.value);
const g = P(Math.max(n.minHeight, n.height)), w = P(Math.max(n.minWidth, n.width)), r = P(n.minHeight), m = P(n.minWidth), c = P(n.position), z = $("layout"), {
useResizeHandleComposition: O
} = z, S = ee(w, g, m, r, O), {
onClickHorizontalResizeBar: C,
onClickVerticalResizeBar: b
} = S, p = k(() => ({
"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"
}));
function h(u, d) {
(d === "left" || d === "right") && C(u, d, t.value), (d === "top" || d === "bottom") && b(u, d, t.value);
}
const v = k(() => {
const u = {
"f-layout-pane": !0,
"f-page-content-nav": c.value === "left" || c.value === "right",
"f-page-content-main": c.value === "center"
};
return n.customClass && String(n.customClass).split(" ").reduce((d, s) => (d[s] = !0, d), u), u;
}), M = k(() => {
const u = {
flex: "1"
};
return (w.value && c.value === "left" || c.value === "right") && (u.width = `${w.value}px`), (g.value && c.value === "bottom" || c.value === "top") && (u.height = `${g.value}px`), u;
});
return () => j("div", {
ref: t,
class: v.value,
style: M.value
}, [j("div", {
ref: o,
class: "drag-container",
"data-dragref": `${a.schema.id}-container`
}, [e.slots.default && e.slots.default()]), j("span", {
class: p.value,
onMousedown: (u) => h(u, c.value)
}, null)]);
}
});
T.install = (n) => {
n.component(T.name, T), n.component(R.name, R);
};
T.register = (n, e, t, o) => {
n.layout = T, e.layout = K, n["layout-pane"] = R, e["layout-pane"] = I;
};
T.registerDesigner = (n, e, t) => {
n.layout = _e, e.layout = K, n["layout-pane"] = Ue, e["layout-pane"] = I;
};
export {
T as FLayout,
R as FLayoutPane,
T as default,
N as layoutProps,
K as layoutPropsResolver
};