@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
265 lines (264 loc) • 9.07 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 y = /* @__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))(y || {});
function _(l, C) {
const d = B("designerContext"), s = d && d.dgControl ? d.dgControl : j, N = o(""), h = o("");
function S(e) {
var c, g, f, D;
let i = "controlIcon fd-i-Family ", t = "";
switch (e == null ? void 0 : e.type) {
case "form-group": {
t = ((c = s[e.type]) == null ? void 0 : c.icon) || ((g = e.editor) == null ? void 0 : g.type) || "", (f = s[e.editor.type]) != null && f.icon && (t = s[e.editor.type].icon);
break;
}
default:
t = ((D = s[e.type]) == null ? void 0 : D.icon) || e.type;
}
const r = `fd_pc-${t}`;
return i += r, i;
}
function b(e, i) {
var c;
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 g = i.direction !== "column";
e.id === ((c = r[0]) == null ? void 0 : c.id) ? t = g ? "左侧区域" : "上方区域" : t = g ? "右侧区域" : "下方区域";
}
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 y.Frame:
return "根组件";
case y.dataGrid:
return (l == null ? void 0 : l.formSchemaUtils.selectNode(e, (r) => r.type === (s["tree-grid"] && s["tree-grid"].type))) ? "树表格组件" : "表格组件";
case y.uploader:
return "附件组件";
case y.listView:
return "列表视图组件";
case y.form:
return "卡片组件";
case y.calendar:
return "日历组件";
case y.page:
return e.name || "页面";
default:
return "组件";
}
}
function a(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 b(e, i);
case "component":
return k(e);
default:
return s[e.type] && s[e.type].name || e.id;
}
}
function n(e, i) {
const t = e.length ? e[0] : null;
if (!t)
return;
h.value = "", N.value = t.originalId;
const r = t ? `${t.originalId}-design-item` : "", c = document.getElementById(r);
c && c.click(), C.emit("selectionChanged", t);
}
function u(e) {
if (!e)
return;
const i = `${e}-design-item`, t = document.getElementById(i);
t && t.click();
}
return { getIcon: S, getTitle: a, onChanged: n, currentSelectedNodeId: N, currentSelectedOutsideNodeId: h, triggerOutsideClick: u };
}
function $(l, C) {
const { getIcon: d, getTitle: s } = C;
function N(a, n, u, e, i) {
var r;
const t = (r = l.data.module) == null ? void 0 : r.components.find((c) => c.id === a.component);
t && h([t], n, u, e, i);
}
function h(a, n, u, e, i) {
return a.forEach((t) => {
if (t.type === "component" && (i = t.id), t.type === "component-ref") {
N(t, n, u, e, i);
return;
}
const r = {
originalId: t.id,
layer: u,
originalParent: e == null ? void 0 : e.id,
componentId: i,
name: s(t, e),
type: t.type,
controlIcon: d(t),
rawSchema: t
};
n.push(G(r)), (t.contents || t.buttons) && h(t.contents || t.buttons, n, u + 1, t, i);
}), n;
}
function S(a) {
const n = [], u = a.find((r) => r.layer === 0);
a = a.filter((r) => r.layer !== 0), n.push(u);
let e = u.originalId, i = 0, t = 1e3;
for (; a.length !== 0 || t === 0; ) {
const r = a.find((c) => c.originalParent === e);
r ? (n.push(r), e = r.originalId, a = a.filter((c) => c.originalId !== e), i = 0) : (i -= 1, e = n.slice(i)[0].originalId), t -= 1;
}
return n;
}
function b(a) {
return a.forEach((n, u) => {
n.id = (u + 1).toString();
}), a.forEach((n) => {
var u;
n.parent = ((u = a.find((e) => e.originalId === n.originalParent)) == null ? void 0 : u.id) || "";
}), a.forEach((n) => {
n.hasChildren = a.findIndex((u) => u.parent === n.id) > 0;
}), a;
}
function O(a) {
const n = {
originalId: l.data.module.id,
layer: 0,
originalParent: null,
name: "页面",
type: "module",
controlIcon: "controlIcon fd-i-Family fd_pc-module",
rawSchema: l.data.module
}, u = [];
return a.forEach((e) => {
e[0].originalParent = n.originalId, u.push(...e);
}), u.unshift(n), u;
}
function k() {
const a = l.data.module ? o(l.data.module.components) : o([l.data]);
if (!a.value)
return;
const n = [];
a.value.forEach((t) => {
if (t) {
const r = [];
r.push(t);
const f = h(r, [], 1, null, t.id);
n.push(f);
}
});
const u = O(n), e = S(u);
return b(e);
}
return { getData: k };
}
const J = /* @__PURE__ */ V({
name: "FDesignerOutline",
props: H,
emits: ["outputValue", "currentEvent", "selectionChanged"],
setup(l, C) {
const d = o(), s = o(l.selectable), N = o(l.autoCheckChildren), h = o(l.cascade), S = o(l.showTreeNodeIcons), b = o(l.showLines), O = o(l.newDataItem), k = o(l.lineColor), a = o(l.cellHeight), n = o([{
field: "name",
title: "",
dataType: "string"
}]), u = B("designer-host-service"), e = _(u, C), {
onChanged: i,
currentSelectedNodeId: t,
currentSelectedOutsideNodeId: r,
triggerOutsideClick: c
} = e, {
getData: g
} = $(l, e);
let f = g();
function D() {
var v, F, T, w;
if (f = g(), d.value && d.value.updateDataSource) {
if (d.value.updateDataSource(f), r.value) {
(F = (v = d.value).emptyCurrentRowId) == null || F.call(v), c(r.value);
return;
}
t && ((w = (T = d.value).emptyCurrentRowId) == null || w.call(T), E({
id: t.value
}));
}
}
function E(v) {
var F, T;
if (!v && d.value && ((T = (F = d.value).emptyCurrentRowId) == null || T.call(F)), v && d.value && d.value.selectItem) {
const w = f.find((P) => P.originalId === v.id);
w ? (d.value.selectRowById(w.id), t && (t.value = w.originalId), d.value.activeRowById(w.id), r.value = "") : t && (t.value = "", r.value = v.id);
}
}
return C.expose({
selectControlTreeNode: E,
refreshControlTree: D
}), L(() => {
f.length && d.value && E({
id: f[0].originalId
});
}), () => x("div", {
class: "designer-control-tree"
}, [x(R, {
ref: d,
data: f,
columns: n.value,
selectable: s.value,
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
autoCheckChildren: N.value,
cascade: h.value,
showTreeNodeIcons: S.value,
showLines: b.value,
newDataItem: O.value,
lineColor: k.value,
cellHeight: a.value,
fit: !1,
autoHeight: !0,
iconField: "controlIcon",
virtualized: !0,
onSelectionChange: i
}, null)]);
}
});
export {
y as ComponentType,
J as FDesignerOutline,
H as designerOutlineProps
};