@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
268 lines (267 loc) • 9.29 kB
JavaScript
import { inject as B, ref as o, defineComponent as V, onMounted as L, createVNode as x } from "vue";
import { FTreeView as R } from "../tree-view/index.esm.js";
import { DgControl as j } from "../designer-canvas/index.esm.js";
import { cloneDeep as G } from "lodash-es";
const H = {
/** 树表数据 */
data: { type: Object, default: [] },
/** 树表是否支持可选状态 */
selectable: { type: Boolean, default: !1 },
/** 选中父节点会自动选中子节点 */
autoCheckChildren: { type: Boolean, default: !0 },
/** 返回值展示父节点和子节点 */
cascade: { type: Boolean, default: !0 },
/** 是否显示图标集 */
showTreeNodeIcons: { type: Boolean, default: !0 },
/** 是否显示连接线 */
showLines: { type: Boolean, default: !1 },
/** 新增值 */
newDataItem: { type: Object, default: {} },
/** 连接线颜色 */
lineColor: { type: String, default: "#9399a0" },
/** 单元格高度 */
cellHeight: { type: Number, default: 28 },
/** 控件信息 */
dgControl: { type: Object, default: {} }
};
var g = /* @__PURE__ */ ((l) => (l.Frame = "frame", l.dataGrid = "data-grid", l.listView = "list-view", l.form = "form", l.uploader = "uploader", l.calendar = "calendar", l.page = "page", l.table = "table", l))(g || {});
function _(l, w) {
const d = B("designerContext"), f = d && d.dgControl ? d.dgControl : j, C = o(""), b = o("");
function h(e) {
var u, c, s, N;
let i = "controlIcon fd-i-Family ", t = "";
switch (e == null ? void 0 : e.type) {
case "form-group": {
t = ((u = f[e.type]) == null ? void 0 : u.icon) || ((c = e.editor) == null ? void 0 : c.type) || "", (s = f[e.editor.type]) != null && s.icon && (t = f[e.editor.type].icon);
break;
}
default:
t = ((N = f[e.type]) == null ? void 0 : N.icon) || e.type;
}
const r = `fd_pc-${t}`;
return i += r, i;
}
function S(e, i) {
var u;
let t = e.id;
const r = i == null ? void 0 : i.contents;
if ((i == null ? void 0 : i.type) === "splitter" && r && r.length === 2) {
const c = i.direction !== "column";
e.id === ((u = r[0]) == null ? void 0 : u.id) ? t = c ? "左侧区域" : "上方区域" : t = c ? "右侧区域" : "下方区域";
}
return t;
}
function O(e) {
if (e.isLikeCardContainer)
return "区块";
const i = e.appearance && e.appearance.class || "", t = i.split(" ");
return e.id === "page-header" && i && i === "f-page-header" ? "页头" : t.includes("f-page-header-base") ? "页头容器" : t.includes("f-page-header-extend") ? "页头扩展容器" : t.includes("f-title") ? "标题容器" : t.includes("f-page") ? "根容器" : t.includes("f-page-main") ? "内容区域" : t.includes("f-scrollspy-content") && e.isScrollspyContainer ? "滚动监听容器" : t.includes("f-grid-is-sub") ? "表格容器" : t.includes("f-filter-container") ? "筛选条容器" : "容器";
}
function k(e) {
const { componentType: i } = e;
switch (i) {
case g.Frame:
return "根组件";
case g.dataGrid:
return (l == null ? void 0 : l.formSchemaUtils.selectNode(e, (r) => r.type === (f["tree-grid"] && f["tree-grid"].type))) ? "树表格组件" : "表格组件";
case g.uploader:
return "附件组件";
case g.listView:
return "列表视图组件";
case g.form:
return "卡片组件";
case g.calendar:
return "日历组件";
case g.table:
return "表格布局组件";
case g.page:
return e.name || "页面";
default:
return "组件";
}
}
function F(e, i) {
const t = e.name || e.text || e.label || e.title || e.mainTitle;
if (e.type !== "component" && t && typeof t == "string")
return t.trim();
switch (e.type) {
case "content-container":
return O(e);
case "splitter-pane":
return S(e, i);
case "component":
return k(e);
default:
return f[e.type] && f[e.type].name || e.id;
}
}
function n(e, i) {
const t = e.length ? e[0] : null;
if (!t)
return;
b.value = "", C.value = t.originalId;
const r = t ? `${t.originalId}-design-item` : "", u = document.getElementById(r);
u && u.click(), w.emit("selectionChanged", t);
}
function a(e) {
if (!e)
return;
const i = `${e}-design-item`, t = document.getElementById(i);
t && t.click();
}
return { getIcon: h, getTitle: F, onChanged: n, currentSelectedNodeId: C, currentSelectedOutsideNodeId: b, triggerOutsideClick: a };
}
function $(l, w, d = !1) {
const { getIcon: f, getTitle: C } = w;
function b(n, a, e, i, t) {
var u;
const r = (u = l.data.module) == null ? void 0 : u.components.find((c) => c.id === n.component);
r && h([r], a, e, i, t);
}
function h(n, a, e, i, t) {
return n.forEach((r) => {
var c, s;
if (r.type === "component" && (t = r.id), r.type === "component-ref") {
b(r, a, e, i, t);
return;
}
const u = {
originalId: r.id,
layer: e,
originalParent: i == null ? void 0 : i.id,
componentId: t,
name: C(r, i),
type: r.type,
controlIcon: f(r),
rawSchema: r
};
a.push(G(u)), (r.contents || r.buttons) && h(r.contents || r.buttons, a, e + 1, r, t), d && (s = (c = r.toolbar) == null ? void 0 : c.buttons) != null && s.length && h(r.toolbar.buttons, a, e + 1, r, t);
}), a;
}
function S(n) {
const a = [], e = n.find((u) => u.layer === 0);
n = n.filter((u) => u.layer !== 0), a.push(e);
let i = e.originalId, t = 0, r = 1e3;
for (; n.length !== 0 || r === 0; ) {
const u = n.find((c) => c.originalParent === i);
u ? (a.push(u), i = u.originalId, n = n.filter((c) => c.originalId !== i), t = 0) : (t -= 1, i = a.slice(t)[0].originalId), r -= 1;
}
return a;
}
function O(n) {
return n.forEach((a, e) => {
a.id = (e + 1).toString();
}), n.forEach((a) => {
var e;
a.parent = ((e = n.find((i) => i.originalId === a.originalParent)) == null ? void 0 : e.id) || "";
}), n.forEach((a) => {
a.hasChildren = n.findIndex((e) => e.parent === a.id) > 0;
}), n;
}
function k(n) {
const a = {
originalId: l.data.module.id,
layer: 0,
originalParent: null,
name: "页面",
type: "module",
controlIcon: "controlIcon fd-i-Family fd_pc-module",
rawSchema: l.data.module
}, e = [];
return n.forEach((i) => {
i[0].originalParent = a.originalId, e.push(...i);
}), e.unshift(a), e;
}
function F() {
const n = l.data.module ? o(l.data.module.components) : o([l.data]);
if (!n.value)
return;
const a = [];
n.value.forEach((r) => {
if (r) {
const u = [];
u.push(r);
const N = h(u, [], 1, null, r.id);
a.push(N);
}
});
const e = k(a), i = S(e);
return O(i);
}
return { getData: F };
}
const U = /* @__PURE__ */ V({
name: "FDesignerOutline",
props: H,
emits: ["outputValue", "currentEvent", "selectionChanged"],
setup(l, w) {
const d = o(), f = o(l.selectable), C = o(l.autoCheckChildren), b = o(l.cascade), h = o(l.showTreeNodeIcons), S = o(l.showLines), O = o(l.newDataItem), k = o(l.lineColor), F = o(l.cellHeight), n = o([{
field: "name",
title: "",
dataType: "string"
}]), a = B("designer-host-service"), e = _(a, w), {
onChanged: i,
currentSelectedNodeId: t,
currentSelectedOutsideNodeId: r,
triggerOutsideClick: u
} = e, {
getData: c
} = $(l, e);
let s = c();
function N() {
var y, D, E, v;
if (s = c(), d.value && d.value.updateDataSource) {
if (d.value.updateDataSource(s), r.value) {
(D = (y = d.value).emptyCurrentRowId) == null || D.call(y), u(r.value);
return;
}
t && ((v = (E = d.value).emptyCurrentRowId) == null || v.call(E), T({
id: t.value
}));
}
}
function T(y) {
var D, E;
if (!y && d.value && ((E = (D = d.value).emptyCurrentRowId) == null || E.call(D)), y && d.value && d.value.selectItem) {
const v = s.find((P) => P.originalId === y.id);
v ? (d.value.selectRowById(v.id), t && (t.value = v.originalId), d.value.activeRowById(v.id), r.value = "") : t && (t.value = "", r.value = y.id);
}
}
return w.expose({
selectControlTreeNode: T,
refreshControlTree: N
}), L(() => {
s.length && d.value && T({
id: s[0].originalId
});
}), () => x("div", {
class: "designer-control-tree"
}, [x(R, {
ref: d,
data: s,
columns: n.value,
selectable: f.value,
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
autoCheckChildren: C.value,
cascade: b.value,
showTreeNodeIcons: h.value,
showLines: S.value,
newDataItem: O.value,
lineColor: k.value,
cellHeight: F.value,
fit: !1,
autoHeight: !0,
iconField: "controlIcon",
virtualized: !0,
onSelectionChange: i
}, null)]);
}
});
export {
g as ComponentType,
U as FDesignerOutline,
H as designerOutlineProps
};