@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
926 lines (925 loc) • 30.3 kB
JavaScript
import { ref as P, computed as H, defineComponent as R, provide as W, createVNode as k, watch as oe, inject as $, onMounted as _ } from "vue";
import { isPlainObject as q, cloneDeep as Y } from "lodash-es";
import { getCustomClass as ae, getCustomStyle as re } from "../common/index.esm.js";
const X = {}, U = {};
function N(n) {
const { properties: e, title: t, ignore: o } = n, l = o && Array.isArray(o), i = Object.keys(e).reduce((s, b) => ((!l || !o.find((S) => S === b)) && (s[b] = e[b].type === "object" && e[b].properties ? N(e[b]) : Y(e[b].default)), s), {});
if (t && (!l || !o.find((s) => s === "id"))) {
const s = t.toLowerCase().replace(/-/g, "_");
i.id = `${s}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
function le(n) {
const { properties: e, title: t, required: o } = n;
if (o && Array.isArray(o)) {
const l = o.reduce((i, s) => (i[s] = e[s].type === "object" && e[s].properties ? N(e[s]) : Y(e[s].default), i), {});
if (t && o.find((i) => i === "id")) {
const i = t.toLowerCase().replace(/-/g, "_");
l.id = `${i}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
return {
type: t
};
}
function G(n, e = {}, t) {
const o = X[n];
if (o) {
let l = le(o);
const i = U[n];
return l = i ? i({ getSchemaByType: G }, l, e, t) : l, l;
}
return null;
}
function ie(n, e) {
const t = N(e);
return Object.keys(t).reduce((o, l) => (Object.prototype.hasOwnProperty.call(n, l) && (o[l] && q(o[l]) && q(n[l] || !n[l]) ? Object.assign(o[l], n[l] || {}) : o[l] = n[l]), o), t), t;
}
function J(n, e) {
return Object.keys(n).filter((o) => n[o] != null).reduce((o, l) => {
if (e.has(l)) {
const i = e.get(l);
if (typeof i == "string")
o[i] = n[l];
else {
const s = i(l, n[l], n);
Object.assign(o, s);
}
} else
o[l] = n[l];
return o;
}, {});
}
function se(n, e, t = /* @__PURE__ */ new Map()) {
const o = ie(n, e);
return J(o, t);
}
function ce(n = {}) {
function e(a, y, c, g) {
if (typeof c == "number")
return g[a].length === c;
if (typeof c == "object") {
const w = Object.keys(c)[0], B = c[w];
if (w === "not")
return Number(g[a].length) !== Number(B);
if (w === "moreThan")
return Number(g[a].length) >= Number(B);
if (w === "lessThan")
return Number(g[a].length) <= Number(B);
}
return !1;
}
function t(a, y, c, g) {
return g[a] && g[a].propertyValue && String(g[a].propertyValue.value) === String(c);
}
const o = /* @__PURE__ */ new Map([
["length", e],
["getProperty", t]
]);
Object.keys(n).reduce((a, y) => (a.set(y, n[y]), a), o);
function l(a, y) {
const c = a;
return typeof y == "number" ? [{ target: c, operator: "length", param: null, value: Number(y) }] : typeof y == "boolean" ? [{ target: c, operator: "getProperty", param: a, value: !!y }] : typeof y == "object" ? Object.keys(y).map((g) => {
if (g === "length")
return { target: c, operator: "length", param: null, value: y[g] };
const w = g, B = y[g];
return { target: c, operator: "getProperty", param: w, value: B };
}) : [];
}
function i(a) {
return Object.keys(a).reduce((c, g) => {
const w = l(g, a[g]);
return c.push(...w), c;
}, []);
}
function s(a, y) {
if (o.has(a.operator)) {
const c = o.get(a.operator);
return c && c(a.target, a.param, a.value, y) || !1;
}
return !1;
}
function b(a, y) {
return i(a).reduce((w, B) => w && s(B, y), !0);
}
function S(a, y) {
const c = Object.keys(a), g = c.includes("allOf"), w = c.includes("anyOf"), B = g || w, f = (B ? a[B ? g ? "allOf" : "anyOf" : "allOf"] : [a]).map((h) => b(h, y));
return g ? !f.includes(!1) : f.includes(!0);
}
return { parseValueSchema: S };
}
const E = {
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: "标签页工具栏按钮" },
"html-template": { type: "html-template", 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: "抽屉" },
"external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
"list-nav": { type: "list-nav", name: "列表导航" },
"filter-bar": { type: "filter-bar", name: "筛选条" }
}, ue = {}, pe = {};
ce();
function Q(n, e, t = /* @__PURE__ */ new Map(), o = (s, b, S, a) => b, l = {}, i = (s) => s) {
return X[e.title] = e, U[e.title] = o, ue[e.title] = l, pe[e.title] = i, (s = {}, b = !0) => {
if (!b)
return J(s, t);
const S = se(s, e, t), a = Object.keys(n).reduce((y, c) => (y[c] = n[c].default, y), {});
return Object.assign(a, S);
};
}
function fe(n, e) {
return { customClass: e.class, customStyle: e.style };
}
const Z = /* @__PURE__ */ new Map([
["appearance", fe]
]);
function K(n, e, t) {
return e;
}
const ye = "https://json-schema.org/draft/2020-12/schema", me = "https://farris-design.gitee.io/layout.schema.json", de = "layout", he = "A Farris Container Component", ve = "object", be = {
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
}
}, ge = [
"id",
"type",
"contents"
], ze = {
$schema: ye,
$id: me,
title: de,
description: he,
type: ve,
properties: be,
required: ge
}, Pe = "layout", Oe = "A Farris Component", Se = "object", Ce = {
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"
}
}
}
}, we = {
title: Pe,
description: Oe,
type: Se,
categories: Ce
}, F = {
customStyle: { type: String, defaut: "" },
customClass: { type: String, defaut: "" }
}, x = Q(F, ze, Z, K, we);
function I(n) {
const e = P(-1), t = P(-1), o = P(0), l = P(0), i = P(!1), s = P(!1), b = H(() => ({
display: i.value ? "block" : "none",
left: `${o.value}px`,
cursor: "e-resize"
})), S = H(() => ({
display: s.value ? "block" : "none",
top: `${l.value}px`,
cursor: "n-resize"
})), a = H(() => {
const m = {
display: s.value || i.value ? "block" : "none"
};
return l.value > 0 && (m.cursor = "n-resize"), m;
});
function y(m, f, d, h) {
const M = n.value;
if (M) {
const { left: u, right: v, width: j } = M.getBoundingClientRect();
let r = m.clientX - u;
h === "right" && (r = v - m.clientX), r > f && (r = f), r < d && (r = d), h === "right" && (r = j - r), o.value = r;
}
}
function c(m, f, d, h) {
const M = n.value;
if (M) {
const { top: u, bottom: v, height: j } = M.getBoundingClientRect();
let r = m.clientY - u;
h === "bottom" && (r = v - m.clientY), r > f && (r = f), r < d && (r = d), h === "bottom" && (r = j - r), l.value = r;
}
}
function g() {
const m = n.value;
if (m) {
const { width: f, height: d } = m.getBoundingClientRect();
return { width: f, height: d };
}
return null;
}
function w() {
const m = n.value;
return m ? Array.from(m.querySelectorAll("[data-position]")).reduce((f, d) => {
const h = d.getAttribute("data-position");
return f = Object.assign(f, { [h]: d }), f;
}, {}) : null;
}
function B(m, f) {
const d = g(), h = w();
if (d && h) {
const M = h == null ? void 0 : h.right, u = h == null ? void 0 : h.left;
if (m === "left" && u)
return M ? d.width - M.clientWidth - f : d.width - f;
if (m === "right" && M)
return u ? d.width - u.clientWidth - f : d.width - f;
}
}
function C(m, f) {
const d = g(), h = w();
if (d && h) {
const M = h == null ? void 0 : h.bottom, u = h == null ? void 0 : h.top;
if (m === "top" && u)
return M ? d.height - M.clientHeight - f : d.height - f;
if (m === "bottom" && M)
return u ? d.height - u.clientHeight - f : d.height - f;
}
}
return {
horizontalResizeHandleStyle: b,
verticalResizeHandleStyle: S,
resizeOverlayStyle: a,
showHorizontalResizeHandle: i,
showVerticalResizeHandle: s,
horizontalResizeBarPosition: e,
verticalResizeBarPosition: t,
verticalResizeHandleOffset: l,
horizontalResizeHandleOffset: o,
draggingHorizontalResizeHandle: y,
draggingVerticalResizeHandle: c,
getPanelMaxHeight: C,
getPanelMaxWidth: B
};
}
const T = /* @__PURE__ */ R({
name: "FLayout",
props: F,
emits: [],
setup(n, e) {
const t = P(), o = I(t), {
horizontalResizeHandleStyle: l,
verticalResizeHandleStyle: i,
resizeOverlayStyle: s
} = o;
W("layout", {
useResizeHandleComposition: o
});
const b = H(() => ae({
"f-layout": !0
}, n == null ? void 0 : n.customClass)), S = H(() => re({}, n == null ? void 0 : n.customStyle));
return () => k("div", {
class: b.value,
style: S.value,
ref: t
}, [e.slots.default && e.slots.default(), k("div", {
class: "f-layout-resize-overlay",
style: s.value
}, null), k("div", {
class: "f-layout-horizontal-resize-proxy",
style: l.value
}, null), k("div", {
class: "f-layout-vertical-resize-proxy",
style: i.value
}, null)]);
}
}), Be = "https://json-schema.org/draft/2020-12/schema", Me = "https://farris-design.gitee.io/layout-pane.schema.json", je = "layout-pane", De = "A Farris Container Component", ke = "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
}
}, Ee = [
"id",
"type",
"contents"
], Te = {
$schema: Be,
$id: Me,
title: je,
description: De,
type: ke,
properties: He,
required: Ee
}, $e = "layout-pane", Le = "A Farris Container Component", Re = "object", Ae = {
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: "是否可见"
}
}
}
}, Ne = {
title: $e,
description: Le,
type: Re,
categories: Ae
}, V = {
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 }
}, ee = Q(V, Te, Z, K, Ne);
function te(n, e, t, o, l) {
const {
horizontalResizeBarPosition: i,
horizontalResizeHandleOffset: s,
showHorizontalResizeHandle: b,
showVerticalResizeHandle: S,
verticalResizeBarPosition: a,
verticalResizeHandleOffset: y,
draggingHorizontalResizeHandle: c,
draggingVerticalResizeHandle: g,
getPanelMaxHeight: w,
getPanelMaxWidth: B
} = l;
let C = "", m, f, d;
function h(v) {
if ((C === "left" || C === "right") && f) {
const { left: j } = f.getBoundingClientRect(), { width: r } = m.getBoundingClientRect(), O = v.clientX - j;
let p = C === "left" ? (r || 0) + (O - i.value) : (r || 0) - (O - i.value);
p = t.value > 0 ? Math.max(t.value, p) : p;
const z = B(C, t.value);
z != null && (p = z > p ? p : z), n.value = p;
}
if ((C === "top" || C === "bottom") && f) {
const { top: j } = f.getBoundingClientRect(), { height: r } = m.getBoundingClientRect(), O = v.clientY - j;
let p = C === "top" ? (r || 0) + (O - a.value) : (r || 0) - (O - a.value);
p = o.value > 0 ? Math.max(o.value, p) : p;
const z = w(C, o.value);
z != null && (p = z > p ? p : z), e.value = p;
}
s.value = 0, y.value = 0, i.value = -1, a.value = -1, b.value = !1, S.value = !1, document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", h), document.body.style.userSelect = "", C = "", m = null, f = null;
}
function M(v, j, r) {
if (C = j, m = r, b.value = !0, f = v.composedPath().find((p) => (p.className || "").split(" ")[0] === "f-layout"), f) {
const { left: p } = f.getBoundingClientRect(), z = v.clientX - p;
s.value = z, i.value = z;
const D = B(C, t.value) || 0;
d = (L) => c(L, D, t.value, C), document.addEventListener("mousemove", d), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
}
}
function u(v, j, r) {
if (C = j, m = r, S.value = !0, f = v.composedPath().find((p) => (p.className || "").split(" ")[0] === "f-layout"), f) {
const { top: p } = f.getBoundingClientRect();
y.value = v.clientY - p, a.value = v.clientY - p;
const z = w(C, o.value) || 0;
d = (D) => g(D, z, o.value, C), document.addEventListener("mousemove", d), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
}
}
return { onClickHorizontalResizeBar: M, onClickVerticalResizeBar: u };
}
const A = /* @__PURE__ */ R({
name: "FLayoutPane",
props: V,
emits: [],
setup(n, e) {
const t = P(n.minHeight <= 0 ? 100 : n.minHeight), o = P(n.minWidth <= 0 ? 100 : n.minWidth), l = P(n.width <= 0 ? 100 : n.width), i = P(n.height <= 0 ? 100 : n.height), s = P(Math.max(t.value, i.value)), b = P(Math.max(o.value, l.value)), S = P(), a = P(n.position), y = P(n.resizable);
oe(() => n.resizable, (u) => {
y.value = u;
});
const c = $("layout"), {
useResizeHandleComposition: g
} = c, w = te(b, s, o, t, g), {
onClickHorizontalResizeBar: B,
onClickVerticalResizeBar: C
} = w, m = H(() => ({
"f-layout-resize-bar": !0,
"f-layout-resize-bar-e": a.value === "left",
"f-layout-resize-bar-n": a.value === "bottom",
"f-layout-resize-bar-s": a.value === "top",
"f-layout-resize-bar-w": a.value === "right"
})), f = H(() => a.value !== "center" && y.value);
function d(u, v) {
(v === "left" || v === "right") && B(u, v, S.value), (v === "top" || v === "bottom") && C(u, v, S.value);
}
const h = H(() => {
const u = {
"f-layout-pane": !0,
"f-page-content-nav": a.value === "left" || a.value === "right",
"f-page-content-main": a.value === "center"
};
return n.customClass && String(n.customClass).split(" ").reduce((v, j) => (v[j] = !0, v), u), u;
}), M = H(() => {
const u = {};
return (b.value && a.value === "left" || a.value === "right") && (u.width = `${b.value}px`), (s.value && a.value === "bottom" || a.value === "top") && (u.height = `${s.value}px`), n.visible || (u.display = "none"), u;
});
return () => k("div", {
ref: S,
class: h.value,
style: M.value,
"data-position": a.value
}, [e.slots.default && e.slots.default(), f.value && k("span", {
class: m.value,
onMousedown: (u) => d(u, a.value)
}, null)]);
}
});
function Fe(n, e) {
function t() {
return !1;
}
return { canAccepts: t };
}
function ne(n, e, t) {
var j;
const o = t && t.getStyles && t.getStyles() || "", l = t && t.getDesignerClass && t.getDesignerClass() || "", i = P();
function s() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
}
function b() {
return !1;
}
function S() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
}
function a() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
}
function y(r) {
if (!r || !r.value)
return null;
if (r.value.schema && r.value.schema.type === "component")
return r.value;
const O = P(r == null ? void 0 : r.value.parent), p = y(O);
return p || null;
}
function c(r = e) {
var D;
if (t != null && t.getDraggableDesignItemElement)
return t.getDraggableDesignItemElement(r);
const { componentInstance: O, designerItemElementRef: p } = r;
if (!O || !O.value)
return null;
const { getCustomButtons: z } = O.value;
return O.value.canMove || z && ((D = z()) != null && D.length) ? p : c(r.parent);
}
function g(r) {
return !!t && t.canAccepts(r);
}
function w() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function B() {
}
function C(r, O) {
var p;
!r || !O || (t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(r, O), (p = e == null ? void 0 : e.setupContext) == null || p.emit("dragEnd"));
}
function m(r, O) {
const { componentType: p } = r;
let z = G(p, r, O);
t && t.onResolveNewComponentSchema && (z = t.onResolveNewComponentSchema(r, z));
const D = p.toLowerCase().replace(/-/g, "_");
return z && !z.id && z.type === p && (z.id = `${D}_${Math.random().toString().slice(2, 6)}`), z;
}
function f(r) {
r && t != null && t.onChildElementMovedOut && t.onChildElementMovedOut(r);
}
function d(...r) {
if (t && t.getPropsConfig)
return t.getPropsConfig(...r);
}
function h(r) {
if (!r)
return;
const O = e == null ? void 0 : e.schema, { formSchemaUtils: p } = r;
if (O && p.getExpressions().length) {
const z = p.getExpressions().findIndex((D) => D.target === O.id);
z > -1 && p.getExpressions().splice(z, 1);
}
}
function M(r) {
t && t.onRemoveComponent && t.onRemoveComponent(), h(r), e != null && e.schema.contents && e.schema.contents.map((O) => {
let p = O.id;
O.type === "component-ref" && (p = O.component);
const z = n.value.querySelectorAll(`#${p}-design-item`);
z != null && z.length && Array.from(z).map((D) => {
var L;
(L = D == null ? void 0 : D.componentInstance) != null && L.value.onRemoveComponent && D.componentInstance.value.onRemoveComponent(r);
});
});
}
function u() {
if (t && t.getCustomButtons)
return t.getCustomButtons();
}
function v(r) {
if (t && t.onPropertyChanged)
return t.onPropertyChanged(r);
}
return i.value = {
canMove: s(),
canSelectParent: b(),
canDelete: S(),
canNested: !a(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: n,
parent: (j = e == null ? void 0 : e.parent) == null ? void 0 : j.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: o,
designerClass: l,
canAccepts: g,
getBelongedComponentInstance: y,
getDraggableDesignItemElement: c,
getDraggingDisplayText: w,
getPropConfig: d,
getDragScopeElement: B,
onAcceptMovedChildElement: C,
onChildElementMovedOut: f,
addNewChildComponentSchema: m,
triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || P(!1),
triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || P(!1),
onRemoveComponent: M,
getCustomButtons: u,
onPropertyChanged: v
}, i;
}
const Ve = /* @__PURE__ */ R({
name: "FLayoutDesign",
props: F,
emits: [],
setup(n, e) {
var y;
const t = P(), o = $("design-item-context"), l = Fe(o.schema, (y = o.parent) == null ? void 0 : y.schema), i = ne(t, o, l);
i.value.canNested = !1;
const s = I(t), {
horizontalResizeHandleStyle: b,
verticalResizeHandleStyle: S,
resizeOverlayStyle: a
} = s;
return W("layout", {
useResizeHandleComposition: s
}), _(() => {
t.value.componentInstance = i;
}), e.expose(i.value), () => k("div", {
class: "f-layout f-page-content",
ref: t
}, [e.slots.default && e.slots.default(), k("div", {
class: "f-layout-resize-overlay",
style: a.value
}, null), k("div", {
class: "f-layout-horizontal-resize-proxy",
style: b.value
}, null), k("div", {
class: "f-layout-vertical-resize-proxy",
style: S.value
}, null)]);
}
});
function qe() {
function n(e, t) {
var s;
if (!e)
return !1;
const o = ((s = e.targetContainer) == null ? void 0 : s.componentInstance) && e.targetContainer.componentInstance.value;
if (!o)
return !1;
const l = o.schema.type, i = t == null ? void 0 : t.formSchemaUtils.getComponentById(o.belongedComponentId);
return !((e.componentCategory === "input" || e.componentType === "form-group") && ![E["response-layout-item"].type, E["response-form"].type, E.fieldset.type].includes(l) || (e.componentType === E.tabs.type || e.componentType === E.section.type) && ((i == null ? void 0 : i.componentType) !== "frame" || ![E["content-container"].type, E["splitter-pane"].type, E["response-layout-item"].type].includes(l)) || e.componentType === E["query-solution"].type || e.componentType === E.fieldset.type && l !== E["response-form"].type);
}
return {
basalDragulaRuleForContainer: n
};
}
function We(n, e) {
const t = n.schema;
function o(i) {
return !!qe().basalDragulaRuleForContainer(i);
}
function l() {
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: l };
}
const _e = /* @__PURE__ */ R({
name: "FLayoutPaneDesign",
props: V,
emits: [],
setup(n, e) {
const t = P(), o = P();
$("designer-host-service");
const l = $("design-item-context"), i = We(l), s = ne(o, l, i);
s.value.canNested = !1, s.value.canMove = !1, s.value.canDelete = !1, _(() => {
o.value.componentInstance = s;
}), e.expose(s.value);
const b = P(Math.max(n.minHeight, n.height)), S = P(Math.max(n.minWidth, n.width)), a = P(n.minHeight), y = P(n.minWidth), c = P(n.position), g = $("layout"), {
useResizeHandleComposition: w
} = g, B = te(S, b, y, a, w), {
onClickHorizontalResizeBar: C,
onClickVerticalResizeBar: m
} = B, f = H(() => ({
"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 d(u, v) {
(v === "left" || v === "right") && C(u, v, t.value), (v === "top" || v === "bottom") && m(u, v, t.value);
}
const h = H(() => {
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((v, j) => (v[j] = !0, v), u), u;
}), M = H(() => {
const u = {
flex: "1"
};
return (S.value && c.value === "left" || c.value === "right") && (u.width = `${S.value}px`), (b.value && c.value === "bottom" || c.value === "top") && (u.height = `${b.value}px`), u;
});
return () => k("div", {
ref: t,
class: h.value,
style: M.value
}, [k("div", {
ref: o,
class: "drag-container",
"data-dragref": `${l.schema.id}-container`
}, [e.slots.default && e.slots.default()]), k("span", {
class: f.value,
onMousedown: (u) => d(u, c.value)
}, null)]);
}
});
T.install = (n) => {
n.component(T.name, T), n.component(A.name, A);
};
T.register = (n, e, t, o) => {
n.layout = T, e.layout = x, n["layout-pane"] = A, e["layout-pane"] = ee;
};
T.registerDesigner = (n, e, t) => {
n.layout = Ve, e.layout = x, n["layout-pane"] = _e, e["layout-pane"] = ee;
};
export {
T as FLayout,
A as FLayoutPane,
T as default,
F as layoutProps,
x as layoutPropsResolver
};