@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,169 lines (1,168 loc) • 37.9 kB
JavaScript
var re = Object.defineProperty;
var ie = (n, e, t) => e in n ? re(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var R = (n, e, t) => ie(n, typeof e != "symbol" ? e + "" : e, t);
import { ref as b, computed as w, defineComponent as E, provide as _, createVNode as O, inject as L, onMounted as X } from "vue";
import { isPlainObject as W, cloneDeep as $ } from "lodash-es";
import "bignumber.js";
import "../common/index.esm.js";
const Y = {}, G = {};
function N(n) {
const { properties: e, title: t, ignore: a } = n, r = a && Array.isArray(a), o = Object.keys(e).reduce((i, u) => ((!r || !a.find((y) => y === u)) && (i[u] = e[u].type === "object" && e[u].properties ? N(e[u]) : $(e[u].default)), i), {});
if (t && (!r || !a.find((i) => i === "id"))) {
const i = t.toLowerCase().replace(/-/g, "_");
o.id = `${i}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
function oe(n) {
const { properties: e, title: t, required: a } = n;
if (a && Array.isArray(a)) {
const r = a.reduce((o, i) => (o[i] = e[i].type === "object" && e[i].properties ? N(e[i]) : $(e[i].default), o), {});
if (t && a.find((o) => o === "id")) {
const o = t.toLowerCase().replace(/-/g, "_");
r.id = `${o}_${Math.random().toString().slice(2, 6)}`;
}
return r;
}
return {
type: t
};
}
function J(n, e = {}, t) {
const a = Y[n];
if (a) {
let r = oe(a);
const o = G[n];
return r = o ? o({ getSchemaByType: J }, r, e, t) : r, r;
}
return null;
}
function se(n, e) {
const t = N(e);
return Object.keys(t).reduce((a, r) => (Object.prototype.hasOwnProperty.call(n, r) && (a[r] && W(a[r]) && W(n[r] || !n[r]) ? Object.assign(a[r], n[r] || {}) : a[r] = n[r]), a), t), t;
}
function Q(n, e) {
return Object.keys(n).filter((a) => n[a] != null).reduce((a, r) => {
if (e.has(r)) {
const o = e.get(r);
if (typeof o == "string")
a[o] = n[r];
else {
const i = o(r, n[r], n);
Object.assign(a, i);
}
} else
a[r] = n[r];
return a;
}, {});
}
function le(n, e, t = /* @__PURE__ */ new Map()) {
const a = se(n, e);
return Q(a, t);
}
function ce(n = {}) {
function e(l, c, p, s) {
if (typeof p == "number")
return s[l].length === p;
if (typeof p == "object") {
const m = Object.keys(p)[0], d = p[m];
if (m === "not")
return Number(s[l].length) !== Number(d);
if (m === "moreThan")
return Number(s[l].length) >= Number(d);
if (m === "lessThan")
return Number(s[l].length) <= Number(d);
}
return !1;
}
function t(l, c, p, s) {
return s[l] && s[l].propertyValue && String(s[l].propertyValue.value) === String(p);
}
const a = /* @__PURE__ */ new Map([
["length", e],
["getProperty", t]
]);
Object.keys(n).reduce((l, c) => (l.set(c, n[c]), l), a);
function r(l, c) {
const p = l;
return typeof c == "number" ? [{ target: p, operator: "length", param: null, value: Number(c) }] : typeof c == "boolean" ? [{ target: p, operator: "getProperty", param: l, value: !!c }] : typeof c == "object" ? Object.keys(c).map((s) => {
if (s === "length")
return { target: p, operator: "length", param: null, value: c[s] };
const m = s, d = c[s];
return { target: p, operator: "getProperty", param: m, value: d };
}) : [];
}
function o(l) {
return Object.keys(l).reduce((p, s) => {
const m = r(s, l[s]);
return p.push(...m), p;
}, []);
}
function i(l, c) {
if (a.has(l.operator)) {
const p = a.get(l.operator);
return p && p(l.target, l.param, l.value, c) || !1;
}
return !1;
}
function u(l, c) {
return o(l).reduce((m, d) => m && i(d, c), !0);
}
function y(l, c) {
const p = Object.keys(l), s = p.includes("allOf"), m = p.includes("anyOf"), d = s || m, B = (d ? l[d ? s ? "allOf" : "anyOf" : "allOf"] : [l]).map((f) => u(f, c));
return s ? !B.includes(!1) : B.includes(!0);
}
return { parseValueSchema: y };
}
const k = {
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: "抽屉" }
}, pe = {}, ue = {};
ce();
function Z(n, e, t = /* @__PURE__ */ new Map(), a = (i, u, y, l) => u, r = {}, o = (i) => i) {
return Y[e.title] = e, G[e.title] = a, pe[e.title] = r, ue[e.title] = o, (i = {}, u = !0) => {
if (!u)
return Q(i, t);
const y = le(i, e, t), l = Object.keys(n).reduce((c, p) => (c[p] = n[p].default, c), {});
return Object.assign(l, y);
};
}
function K(n, e) {
return { customClass: e.class, customStyle: e.style };
}
const fe = /* @__PURE__ */ new Map([
["appearance", K]
]);
function de(n, e, t) {
const a = n.getSchemaByType("splitter-pane");
return a.appearance = {
class: "f-col-w6 f-page-content-nav"
}, a.position = "left", e.contents.unshift(a), e;
}
function me(n, e, t) {
const a = n.getSchemaByType("splitter-pane");
return a.appearance = {
class: "f-page-content-main"
}, a.position = "main", e.contents.push(a), e;
}
function ye(n, e, t) {
const a = t.parentComponentInstance;
return String(a.schema.appearance.class || "").split(" ").includes("f-page-main") && (e.appearance = { class: "f-page-content" }), de(n, e), me(n, e), e;
}
function he(n, e, t) {
return e;
}
const ve = "https://json-schema.org/draft/2020-12/schema", ge = "https://farris-design.gitee.io/splitter.schema.json", be = "splitter", Ce = "A Farris Container Component", ze = "object", Pe = {
id: {
description: "The unique identifier for a splitter",
type: "string"
},
type: {
description: "The type string of splitter component",
type: "string",
default: "splitter"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
contents: {
description: "",
type: "array",
default: []
},
direction: {
description: "",
type: "string",
default: "row",
enum: [
"column",
"row"
]
}
}, we = [
"id",
"type",
"contents"
], Se = {
$schema: ve,
$id: ge,
title: be,
description: Ce,
type: ze,
properties: Pe,
required: we
}, Me = "splitter", Oe = "A Farris Container Component", Be = "object", De = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "combo-list",
textField: "value",
valueField: "key",
data: [
{
key: "splitter",
value: "分栏面板"
}
],
editable: !1
}
}
}
},
appearance: {
description: "",
title: "外观",
properties: {
class: {
description: "组件的CSS样式",
title: "class样式"
},
style: {
description: "组件的内容样式",
title: "style样式"
}
}
}
}, Re = {
title: Me,
description: Oe,
type: Be,
categories: De
}, q = {
customStyle: { type: String, default: "" },
customClass: { type: String, default: "" },
direction: { Type: String, default: "row" }
}, I = Z(q, Se, fe, ye, Re);
function x(n) {
const e = b(-1), t = b(-1), a = b(0), r = b(0), o = b(!1), i = b(!1), u = w(() => ({
display: o.value ? "block" : "none",
left: `${a.value}px`
})), y = w(() => ({
display: i.value ? "block" : "none",
top: `${r.value}px`
})), l = w(() => ({
display: i.value || o.value ? "block" : "none"
}));
function c(s) {
const m = n.value;
if (m) {
const { left: d } = m.getBoundingClientRect();
a.value = s.clientX - d;
}
}
function p(s) {
const m = n.value;
if (m) {
const { top: d } = m.getBoundingClientRect();
r.value = s.clientY - d;
}
}
return {
horizontalResizeHandleStyle: u,
verticalResizeHandleStyle: y,
resizeOverlayStyle: l,
showHorizontalResizeHandle: o,
showVerticalResizeHandle: i,
horizontalResizeBarPosition: e,
verticalResizeBarPosition: t,
verticalResizeHandleOffset: r,
horizontalResizeHandleOffset: a,
draggingHorizontalResizeHandle: c,
draggingVerticalResizeHandle: p
};
}
const Te = ["moz", "ms", "webkit"];
function ke() {
let n = 0;
return (e) => {
const t = (/* @__PURE__ */ new Date()).getTime(), a = Math.max(0, 16 - (t - n)), r = setTimeout(() => {
e(t + a);
}, a);
return n = t + a, r;
};
}
function Ae() {
if (typeof window > "u")
return () => 0;
if (window.requestAnimationFrame)
return window.requestAnimationFrame.bind(window);
const n = Te.filter((e) => `${e}RequestAnimationFrame` in window)[0];
return n ? window[`${n}RequestAnimationFrame`] : ke();
}
Ae();
function F(n, e) {
return ((e == null ? void 0 : e.split(" ")) || []).reduce((a, r) => (r && (a[r] = !0), a), n), n;
}
function V(n, e) {
return ((e == null ? void 0 : e.split(";")) || []).reduce((a, r) => {
if (r) {
const o = r.split(":");
a[o[0]] = o[1];
}
return a;
}, n), n;
}
const j = /* @__PURE__ */ E({
name: "FSplitter",
props: q,
emits: [],
setup(n, e) {
const t = b(), a = x(t), {
horizontalResizeHandleStyle: r,
verticalResizeHandleStyle: o,
resizeOverlayStyle: i
} = a;
_("splitter", {
useResizeHandleComposition: a
});
const u = w(() => F({
"f-splitter": !0
}, n == null ? void 0 : n.customClass)), y = w(() => {
const l = {
"flex-direction": n.direction === "row" ? "row" : "column"
};
return V(l, n == null ? void 0 : n.customStyle);
});
return () => O("div", {
class: u.value,
ref: t,
style: y.value
}, [e.slots.default && e.slots.default(), O("div", {
class: "f-splitter-resize-overlay",
style: i.value
}, null), O("div", {
class: "f-splitter-horizontal-resize-proxy",
style: r.value
}, null), O("div", {
class: "f-splitter-vertical-resize-proxy",
style: o.value
}, null)]);
}
}), Le = /* @__PURE__ */ new Map([
["appearance", K]
]), je = "https://json-schema.org/draft/2020-12/schema", Ee = "https://farris-design.gitee.io/splitter-pane.schema.json", Fe = "splitter-pane", Ve = "A Farris Container Component", He = "object", $e = {
id: {
description: "The unique identifier for a splitter",
type: "string"
},
type: {
description: "The type string of splitter component",
type: "string",
default: "splitter-pane"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
size: {
description: "",
type: "object",
properties: {
width: {
type: "number"
},
height: {
type: "strnumbering"
}
},
default: {}
},
collapsable: {
description: "",
type: "boolean",
default: !1
},
contents: {
description: "",
type: "array",
default: []
},
minHeight: {
description: "",
type: "number"
},
minWidth: {
description: "",
type: "number"
},
position: {
description: "",
type: "string",
default: "left",
enum: [
"left",
"center",
"right",
"top",
"bottom"
]
},
resizable: {
description: "",
type: "boolean",
default: !1
},
visible: {
description: "",
type: "number",
default: !0
}
}, Ne = [
"id",
"type",
"contents"
], qe = {
$schema: je,
$id: Ee,
title: Fe,
description: Ve,
type: He,
properties: $e,
required: Ne
}, U = {
customClass: { type: String, defaut: "" },
customStyle: { type: String, default: "" },
width: { type: Number },
/** 记录原始定义高度 */
height: { type: Number },
/** 面板位置 */
position: { type: String, default: "left" },
/** 是否显示 */
visible: { type: Boolean, default: !0 },
/** True to allow the pane can be resized. */
resizable: { type: Boolean, default: !1 },
/** 指定拖拽的方向，可以指定多个方向，e向东,n向北,s向南,w向西
* 因为位置在右侧，不一定就是w方向可拖拽的
*/
resizeHandle: { type: String, default: "" },
/** True to allow the pane can be collapsed. */
collapsable: { type: Boolean, default: !1 },
/** 面板最小宽度 */
minWidth: { type: Number, default: 0 },
/** 面板最小高度 */
minHeight: { type: Number, default: 0 }
}, ee = Z(
U,
qe,
Le,
he
);
function te(n, e) {
const t = b(n.width), a = b(n.height), {
horizontalResizeBarPosition: r,
horizontalResizeHandleOffset: o,
showHorizontalResizeHandle: i,
showVerticalResizeHandle: u,
verticalResizeBarPosition: y,
verticalResizeHandleOffset: l,
draggingHorizontalResizeHandle: c,
draggingVerticalResizeHandle: p
} = e;
let s = "", m, d;
function S(g) {
if ((s === "left" || s === "right") && d) {
const { left: f } = d.getBoundingClientRect(), { width: v } = m.getBoundingClientRect(), D = g.clientX - f, C = s === "left" ? (v || 0) + (D - r.value) : (v || 0) - (D - r.value);
t.value = n.minWidth > 0 ? Math.max(n.minWidth, C) : C;
}
if ((s === "top" || s === "bottom") && d) {
const { top: f } = d.getBoundingClientRect(), { height: v } = m.getBoundingClientRect(), D = g.clientY - f, C = s === "top" ? (v || 0) + (D - y.value) : (v || 0) - (D - y.value);
a.value = n.minHeight > 0 ? Math.max(n.minHeight, C) : C;
}
o.value = 0, l.value = 0, r.value = -1, y.value = -1, i.value = !1, u.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", S), document.body.style.userSelect = "", s = "", m = null, d = null;
}
function T(g, f, v) {
if (s = f, m = v, i.value = !0, d = g.composedPath().find((C) => C.className.split(" ")[0] === "f-splitter"), d) {
const { left: C } = d.getBoundingClientRect();
o.value = g.clientX - C, r.value = g.clientX - C, document.addEventListener("mousemove", c), document.addEventListener("mouseup", S), document.body.style.userSelect = "none";
}
}
function B(g, f, v) {
if (s = f, m = v, u.value = !0, d = g.composedPath().find((C) => C.className.split(" ")[0] === "f-splitter"), d) {
const { top: C } = d.getBoundingClientRect();
l.value = g.clientY - C, y.value = g.clientY - C, document.addEventListener("mousemove", p), document.addEventListener("mouseup", S), document.body.style.userSelect = "none";
}
}
return {
actualWidth: t,
actualHeight: a,
onClickSplitterHorizontalResizeBar: T,
onClickSplitterVerticalResizeBar: B
};
}
const H = /* @__PURE__ */ E({
name: "FSplitterPane",
props: U,
emits: [],
setup(n, e) {
const t = b(), a = L("splitter"), {
useResizeHandleComposition: r
} = a, o = te(n, r), {
actualHeight: i,
actualWidth: u,
onClickSplitterHorizontalResizeBar: y,
onClickSplitterVerticalResizeBar: l
} = o, c = b(n.position), p = w(() => {
const f = {
"f-splitter-pane": !0,
"f-splitter-pane-main": c.value === "center",
"has-resize-bar": n.resizable
};
return f["f-splitter-pane-" + c.value] = !0, F(f, n == null ? void 0 : n.customClass);
}), s = w(() => n.resizeHandle ? n.resizeHandle.split(",").filter((f) => ["e", "n", "s", "w"].find((v) => v === f)) : []), m = w(() => {
const f = {};
return (u.value || u.value === 0) && (c.value === "left" || c.value === "right" || s.value.find((v) => v === "e") || s.value.find((v) => v === "w")) && (f.width = `${u.value}px`), (i.value || i.value === 0) && (c.value === "bottom" || c.value === "top" || s.value.find((v) => v === "s") || s.value.find((v) => v === "n")) && (f.height = `${i.value}px`), V(f, n == null ? void 0 : n.customStyle);
}), d = w(() => ({
"f-splitter-resize-bar": !0,
"f-splitter-resize-bar-e": c.value === "left",
"f-splitter-resize-bar-n": c.value === "bottom",
"f-splitter-resize-bar-s": c.value === "top",
"f-splitter-resize-bar-w": c.value === "right"
}));
function S(f) {
return {
e: "left",
w: "right",
s: "top",
n: "bottom"
}[f] || f;
}
function T(f, v) {
v = S(v), ["left", "right"].find((D) => D === v) && y(f, v, t.value), ["top", "bottom"].find((D) => D === v) && l(f, v, t.value);
}
function B() {
return s.value.length > 0 ? s.value.map((f) => O("span", {
class: "f-splitter-resize-bar f-splitter-resize-bar-" + f,
onMousedown: (v) => T(v, f)
}, null)) : O("span", {
class: d.value,
onMousedown: (f) => T(f, c.value)
}, null);
}
function g() {
u.value = n.width, i.value = n.height, m.value;
}
return e.expose({
reset: g
}), () => O("div", {
ref: t,
class: p.value,
style: m.value
}, [e.slots.default && e.slots.default(), n.resizable && B()]);
}
});
function ne(n, e, t) {
var C;
const a = t && t.getStyles && t.getStyles() || "", r = t && t.getDesignerClass && t.getDesignerClass() || "", o = b();
function i() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanMoveComponent ? t.checkCanMoveComponent() : !0;
}
function u() {
return !1;
}
function y() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !1 : t && t.checkCanDeleteComponent ? t.checkCanDeleteComponent() : !0;
}
function l() {
return (e == null ? void 0 : e.schema.componentType) === "frame" ? !0 : t && t.hideNestedPaddingInDesginerView ? t.hideNestedPaddingInDesginerView() : !1;
}
function c(h) {
if (!h || !h.value)
return null;
if (h.value.schema && h.value.schema.type === "component")
return h.value;
const M = b(h == null ? void 0 : h.value.parent), z = c(M);
return z || null;
}
function p(h = e) {
var A;
if (t != null && t.getDraggableDesignItemElement)
return t.getDraggableDesignItemElement(h);
const { componentInstance: M, designerItemElementRef: z } = h;
if (!M || !M.value)
return null;
const { getCustomButtons: P } = M.value;
return M.value.canMove || P && ((A = P()) != null && A.length) ? z : p(h.parent);
}
function s(h) {
return !!t && t.canAccepts(h);
}
function m() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function d() {
}
function S(h, M) {
var z;
!h || !M || (t != null && t.onAcceptMovedChildElement && t.onAcceptMovedChildElement(h, M), (z = e == null ? void 0 : e.setupContext) == null || z.emit("dragEnd"));
}
function T(h, M) {
const { componentType: z } = h;
let P = J(z, h, M);
t && t.onResolveNewComponentSchema && (P = t.onResolveNewComponentSchema(h, P));
const A = z.toLowerCase().replace(/-/g, "_");
return P && !P.id && P.type === z && (P.id = `${A}_${Math.random().toString().slice(2, 6)}`), P;
}
function B(h) {
h && t != null && t.onChildElementMovedOut && t.onChildElementMovedOut(h);
}
function g(...h) {
if (t && t.getPropsConfig)
return t.getPropsConfig(...h);
}
function f() {
t && t.onRemoveComponent && t.onRemoveComponent(), e != null && e.schema.contents && e.schema.contents.map((h) => {
let M = h.id;
h.type === "component-ref" && (M = h.component);
const z = n.value.querySelectorAll(`#${M}-design-item`);
z != null && z.length && Array.from(z).map((P) => {
var A;
(A = P == null ? void 0 : P.componentInstance) != null && A.value.onRemoveComponent && P.componentInstance.value.onRemoveComponent();
});
});
}
function v() {
if (t && t.getCustomButtons)
return t.getCustomButtons();
}
function D(h) {
if (t && t.onPropertyChanged)
return t.onPropertyChanged(h);
}
return o.value = {
canMove: i(),
canSelectParent: u(),
canDelete: y(),
canNested: !l(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: n,
parent: (C = e == null ? void 0 : e.parent) == null ? void 0 : C.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: a,
designerClass: r,
canAccepts: s,
getBelongedComponentInstance: c,
getDraggableDesignItemElement: p,
getDraggingDisplayText: m,
getPropConfig: g,
getDragScopeElement: d,
onAcceptMovedChildElement: S,
onChildElementMovedOut: B,
addNewChildComponentSchema: T,
triggerBelongedComponentToMoveWhenMoved: !!t && t.triggerBelongedComponentToMoveWhenMoved || b(!1),
triggerBelongedComponentToDeleteWhenDeleted: !!t && t.triggerBelongedComponentToDeleteWhenDeleted || b(!1),
onRemoveComponent: f,
getCustomButtons: v,
onPropertyChanged: D
}, o;
}
class ae {
getTemplateRule(e, t) {
const a = t == null ? void 0 : t.formSchemaUtils, r = a == null ? void 0 : a.getFormTemplateRule(), o = { canAccept: !0, canDelete: !0, canMove: !0 };
if (!r)
return o;
const i = this.getComponentContext(e), { componentClassList: u } = i;
return u.forEach((y) => {
if (!y || !r[y])
return;
const { canMove: l, canDelete: c, canAccept: p } = r[y];
o.canMove = o.canMove && this.resolveRuleValue(l, i), o.canDelete = o.canDelete && this.resolveRuleValue(c, i), o.canAccept = o.canAccept && this.resolveRuleValue(p, i);
}), o;
}
resolveRuleValue(e, t) {
return typeof e == "boolean" ? e : this.parseRuleValueSchema(e, t);
}
parseRuleValueSchema(e, t) {
const a = e.invalidContext || [];
let r = !0;
for (const o of a) {
if (o.firstLevelChild) {
if (o.firstLevelChild.class) {
const { firstLevelChildClassList: i } = t;
if (i && !i.includes(o.firstLevelChild.class)) {
r = !1;
continue;
}
}
if (o.firstLevelChild.type) {
const { firstLevelChildSchema: i } = t;
if (!i || i.type !== o.firstLevelChild.type) {
r = !1;
continue;
}
}
}
if (o.secondLevelChild) {
if (o.secondLevelChild.class) {
const { secondLevelChildClassList: i } = t;
if (i && !i.includes(o.secondLevelChild.class)) {
r = !1;
continue;
}
}
if (o.secondLevelChild.type) {
const { secondLevelChildSchema: i } = t;
if (!i || i.type !== o.secondLevelChild.type) {
r = !1;
continue;
}
}
}
if (o.parent) {
if (o.parent.class) {
const { parentClassList: i } = t;
if (i && !i.includes(o.parent.class)) {
r = !1;
continue;
}
}
if (o.parent.type) {
const { parentSchema: i } = t;
if (i && i.type !== o.parent.type) {
r = !1;
continue;
}
}
}
r = !0;
break;
}
return !r;
}
getComponentContext(e) {
var S, T, B, g;
const t = e.schema, a = t.appearance && t.appearance.class || "", r = a.split(" ") || [], o = t.contents || [], i = o.length ? o[0] : null, u = i && i.appearance ? i.appearance.class : "", y = u ? u.split(" ") : [], l = (S = i == null ? void 0 : i.contents) != null && S.length ? i == null ? void 0 : i.contents[0] : null, c = l && l.appearance ? l.appearance.class : "", p = c ? c.split(" ") : [], s = t.type === "component" ? (B = (T = e.parent) == null ? void 0 : T.parent) == null ? void 0 : B.schema : (g = e.parent) == null ? void 0 : g.schema, m = s && s.appearance && s.appearance.class || "", d = m ? m.split(" ") : [];
return {
componentClass: a,
componentClassList: r,
childContents: o,
firstLevelChildSchema: i,
firstLevelChildClass: u,
firstLevelChildClassList: y,
secondLevelChildSchema: l,
secondLevelChildClass: c,
secondLevelChildClassList: p,
parentSchema: s,
parentClass: m,
parentClassList: d
};
}
}
function Ue(n, e) {
const t = new ae(), { canMove: a, canDelete: r } = t.getTemplateRule(n, e);
function o() {
return !1;
}
function i() {
return r;
}
function u() {
return a;
}
function y() {
return !0;
}
return { canAccepts: o, checkCanDeleteComponent: i, checkCanMoveComponent: u, hideNestedPaddingInDesginerView: y };
}
const We = /* @__PURE__ */ E({
name: "FSplitterDesign",
props: q,
emits: [],
setup(n, e) {
const t = b(), a = L("designer-host-service"), r = L("design-item-context"), o = Ue(r, a), i = ne(t, r, o);
i.value.canNested = !1;
const u = x(t), {
horizontalResizeHandleStyle: y,
verticalResizeHandleStyle: l,
resizeOverlayStyle: c
} = u;
_("splitter", {
useResizeHandleComposition: u
});
const p = w(() => F({
"f-splitter": !0
}, n == null ? void 0 : n.customClass)), s = w(() => {
const m = {
"flex-direction": n.direction === "row" ? "row" : "column"
};
return V(m, n == null ? void 0 : n.customStyle);
});
return X(() => {
t.value.componentInstance = i;
}), e.expose(i.value), () => O("div", {
class: p.value,
ref: t,
style: s.value
}, [e.slots.default && e.slots.default(), O("div", {
class: "f-splitter-resize-overlay",
style: c.value
}, null), O("div", {
class: "f-splitter-horizontal-resize-proxy",
style: y.value
}, null), O("div", {
class: "f-splitter-vertical-resize-proxy",
style: l.value
}, null)]);
}
});
function _e() {
function n(e, t) {
var i;
if (!e)
return !1;
const a = ((i = e.targetContainer) == null ? void 0 : i.componentInstance) && e.targetContainer.componentInstance.value;
if (!a)
return !1;
const r = a.schema.type, o = t == null ? void 0 : t.formSchemaUtils.getComponentById(a.belongedComponentId);
return !((e.componentCategory === "input" || e.componentType === "form-group") && ![k["response-layout-item"].type, k["response-form"].type, k.fieldset.type].includes(r) || (e.componentType === k.tabs.type || e.componentType === k.section.type) && ((o == null ? void 0 : o.componentType) !== "frame" || ![k["content-container"].type, k["splitter-pane"].type, k["response-layout-item"].type].includes(r)) || e.componentType === k["query-solution"].type || e.componentType === k.fieldset.type && r !== k["response-form"].type);
}
return {
basalDragulaRuleForContainer: n
};
}
const Xe = b(0);
function Ye() {
Xe.value++;
}
const Ge = b(0);
class Je {
constructor(e, t) {
R(this, "componentId");
R(this, "viewModelId");
R(this, "eventsEditorUtils");
R(this, "formSchemaUtils");
R(this, "formMetadataConverter");
R(this, "designViewModelUtils");
R(this, "designViewModelField");
R(this, "controlCreatorUtils");
R(this, "designerHostService");
R(this, "schemaService", null);
R(this, "metadataService", null);
R(this, "propertyConfig", {
type: "object",
categories: {}
});
var a;
this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((a = this.formSchemaUtils) == null ? void 0 : a.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService;
}
getTableInfo() {
var e;
return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(e) {
var a;
const t = e.binding && e.binding.type === "Form" && e.binding.field;
if (t) {
if (!this.designViewModelField) {
const r = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = r.fields.find((o) => o.id === t);
}
e.updateOn = (a = this.designViewModelField) == null ? void 0 : a.updateOn;
}
}
getBasicPropConfig(e) {
return {
description: "Basic Information",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "combo-list",
textField: "name",
valueField: "value",
editable: !1,
data: [{ value: e.type, name: k[e.type].name }]
}
}
}
};
}
getAppearanceConfig(e = null) {
return {
title: "外观",
description: "Appearance",
properties: {
class: {
title: "class样式",
type: "string",
description: "组件的CSS样式",
$converter: "/converter/appearance.converter"
},
style: {
title: "style样式",
type: "string",
description: "组件的样式",
$converter: "/converter/appearance.converter"
}
},
setPropertyRelates(t, a) {
if (t)
switch (t && t.propertyID) {
case "class":
case "style": {
Ge.value++;
break;
}
}
}
};
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(e, t) {
const a = t && t.parent && t.parent.schema;
if (!a)
return;
const r = a.contents.findIndex((i) => i.id === e), o = $(a.contents[r]);
a.contents.splice(r, 1), a.contents.splice(r, 0, o), Ye();
}
}
class Qe extends Je {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e) {
return this.propertyConfig.categories.basic = this.getBasicPropConfig(e), this.propertyConfig.categories.appearance = this.getAppearanceProperties(e), this.propertyConfig.categories.behavior = this.getBehaviorProperties(e), this.propertyConfig;
}
getAppearanceProperties(e) {
return {
description: "",
title: "外观",
properties: {
class: {
description: "组件的CSS样式",
title: "class样式"
},
style: {
description: "组件的内容样式",
title: "style样式"
},
minWidth: {
description: "面板最小宽度",
title: "最小宽度（px）",
type: "number",
editor: {
nullable: !0
},
visible: {
resizable: !0
}
}
}
};
}
getBehaviorProperties(e) {
return {
hide: !0,
description: "",
title: "行为",
properties: {
position: {
description: "",
title: "位置",
refreshPanelAfterChanged: !0,
editor: {
type: "combo-list",
idField: "value",
valueField: "value",
data: [
{
value: "left",
name: "左侧"
},
{
value: "center",
name: "居中"
},
{
value: "right",
name: "右侧"
},
{
value: "top",
name: "顶部"
},
{
value: "bottom",
name: "底部"
}
]
}
},
resizable: {
description: "",
title: "允许拖拽",
type: "boolean",
visible: e.position !== "center"
}
}
};
}
}
function Ze(n, e) {
const t = new ae(), a = n.schema, { canAccept: r } = t.getTemplateRule(n, e);
function o(l) {
return _e().basalDragulaRuleForContainer(l, e) ? r : !1;
}
function i(l) {
return new Qe(l, e).getPropertyConfig(a);
}
function u() {
return !1;
}
function y() {
return !1;
}
return {
canAccepts: o,
getPropsConfig: i,
checkCanMoveComponent: u,
checkCanDeleteComponent: y
};
}
const Ke = /* @__PURE__ */ E({
name: "FSplitterPaneDesign",
props: U,
emits: [],
setup(n, e) {
const t = b(), a = L("designer-host-service"), r = L("design-item-context"), o = Ze(r, a), i = ne(t, r, o);
i.value.styles = "padding:0;box-shadow:none;", i.value.canNested = !1, i.value.canMove = !1, i.value.canDelete = !1, X(() => {
t.value.componentInstance = i;
}), e.expose(i.value);
const u = L("splitter"), {
useResizeHandleComposition: y
} = u, l = te(n, y), {
actualHeight: c,
actualWidth: p
} = l, s = b(n.position), m = w(() => {
const g = {
"f-splitter-pane": !0,
"f-splitter-pane-main": s.value === "center",
"has-resize-bar": n.resizable,
"f-component-splitter-pane": !0,
"drag-container": !0
};
return g["f-splitter-pane-" + s.value] = !0, F(g, n == null ? void 0 : n.customClass);
}), d = w(() => n.resizeHandle ? n.resizeHandle.split(",").filter((g) => ["e", "n", "s", "w"].find((f) => f === g)) : []), S = w(() => {
const g = {};
return (p.value && s.value === "left" || s.value === "right" || d.value.find((f) => f === "e") || d.value.find((f) => f === "w")) && (g.width = `${p.value}px`), (c.value && s.value === "bottom" || s.value === "top" || d.value.find((f) => f === "s") || d.value.find((f) => f === "n")) && (g.height = `${c.value}px`), V(g, n == null ? void 0 : n.customStyle);
}), T = w(() => ({
"no-drag": !0,
"f-splitter-resize-bar": !0,
"f-splitter-resize-bar-e": s.value === "left",
"f-splitter-resize-bar-n": s.value === "bottom",
"f-splitter-resize-bar-s": s.value === "top",
"f-splitter-resize-bar-w": s.value === "right"
}));
function B() {
return d.value.length > 0 ? d.value.map((g) => O("span", {
class: "f-splitter-resize-bar f-splitter-resize-bar-" + g
}, null)) : O("span", {
class: T.value
}, null);
}
return () => O("div", {
ref: t,
"data-dragref": `${r.schema.id}-container`,
class: m.value,
style: S.value
}, [e.slots.default && e.slots.default(), n.resizable && B()]);
}
});
j.install = (n) => {
n.component(j.name, j), n.component(H.name, H);
};
j.register = (n, e, t, a) => {
n.splitter = j, e.splitter = I, n["splitter-pane"] = H, e["splitter-pane"] = ee;
};
j.registerDesigner = (n, e, t) => {
n.splitter = We, e.splitter = I, n["splitter-pane"] = Ke, e["splitter-pane"] = ee;
};
export {
j as FSplitter,
H as FSplitterPane,
j as default,
q as splitterProps,
I as splitterPropsResolver
};