@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
302 lines (301 loc) • 11.5 kB
JavaScript
import { ref as c, defineComponent as F, inject as D, onMounted as E, createVNode as T } from "vue";
import { FTreeView as B } from "../tree-view/index.esm.js";
import { cloneDeep as V } from "lodash-es";
const L = {
/** 树表数据 */
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 }
}, S = {
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: "列表导航" },
"list-view": { type: "list-view", name: "列表" },
"filter-bar": { type: "filter-bar", name: "筛选条" },
"language-textbox": { type: "language-textbox", name: "多语输入框" }
};
var g = /* @__PURE__ */ ((i) => (i.Frame = "frame", i.dataGrid = "data-grid", i.listView = "list-view", i.form = "form", i.attachmentPanel = "attachment-panel", i))(g || {});
function G(i, p) {
const u = c(""), y = c("");
function h(e) {
var l;
let t = "controlIcon fd-i-Family ", n = "";
switch (e == null ? void 0 : e.type) {
case "form-group": {
n = e.editor && e.editor.type ? `fd_pc-${e.editor.type}` : "";
break;
}
default: {
const a = ((l = S[e.type]) == null ? void 0 : l.icon) || e.type;
t += `fd_pc-${a}`;
}
}
return t += n, t;
}
function f(e, t) {
var a;
let n = e.id;
const l = t == null ? void 0 : t.contents;
if ((t == null ? void 0 : t.type) === "splitter" && l && l.length === 2) {
const o = t.direction !== "column";
e.id === ((a = l[0]) == null ? void 0 : a.id) ? n = o ? "左侧区域" : "上方区域" : n = o ? "右侧区域" : "下方区域";
}
return n;
}
function m(e) {
if (e.isLikeCardContainer)
return "区块";
const t = e.appearance && e.appearance.class || "", n = t.split(" ");
return e.id === "page-header" && t && t === "f-page-header" ? "页头" : n.includes("f-page-header-base") ? "页头容器" : n.includes("f-page-header-extend") ? "页头扩展容器" : n.includes("f-title") ? "标题容器" : n.includes("f-page") ? "根容器" : n.includes("f-page-main") ? "内容区域" : n.includes("f-scrollspy-content") && e.isScrollspyContainer ? "滚动监听容器" : n.includes("f-grid-is-sub") ? "表格容器" : n.includes("f-filter-container") ? "筛选条容器" : "容器";
}
function b(e) {
const { componentType: t } = e;
switch (t) {
case g.Frame:
return "根组件";
case g.dataGrid:
return (i == null ? void 0 : i.formSchemaUtils.selectNode(e, (l) => l.type === (S["tree-grid"] && S["tree-grid"].type))) ? "树表格组件" : "表格组件";
case g.attachmentPanel:
return "附件组件";
case g.listView:
return "列表视图组件";
case g.form:
return "卡片组件";
default:
return "组件";
}
}
function v(e, t) {
const n = e.name || e.text || e.label || e.title || e.mainTitle;
if (e.type !== "component" && n && typeof n == "string")
return n.trim();
switch (e.type) {
case "content-container":
return m(e);
case "splitter-pane":
return f(e, t);
case "component":
return b(e);
default:
return S[e.type] && S[e.type].name || e.id;
}
}
function w(e) {
const t = e.length ? e[0] : null;
if (!t)
return;
y.value = "", u.value = t.originalId;
const n = t ? `${t.originalId}-design-item` : "", l = document.getElementById(n);
l && l.click(), p.emit("selectionChanged", t);
}
function r(e) {
if (!e)
return;
const t = `${e}-design-item`, n = document.getElementById(t);
n && n.click();
}
return { getIcon: h, getTitle: v, onChanged: w, currentSelectedNodeId: u, currentSelectedOutsideNodeId: y, triggerOutsideClick: r };
}
function _(i, p) {
const { getIcon: u, getTitle: y } = p;
function h(r, e, t, n, l) {
var o;
const a = (o = i.data.module) == null ? void 0 : o.components.find((d) => d.id === r.component);
a && f([a], e, t, n, l);
}
function f(r, e, t, n, l) {
return r.forEach((a) => {
if (a.type === "component-ref") {
h(a, e, t, n, l);
return;
}
const o = {
originalId: a.id,
layer: t,
originalParent: n == null ? void 0 : n.id,
componentId: l,
name: y(a, n),
type: a.type,
controlIcon: u(a),
rawSchema: a
};
e.push(V(o)), (a.contents || a.buttons) && f(a.contents || a.buttons, e, t + 1, a, l);
}), e;
}
function m(r) {
const e = [], t = r.find((o) => o.layer === 0);
r = r.filter((o) => o.layer !== 0), e.push(t);
let n = t.originalId, l = 0, a = 1e3;
for (; r.length !== 0 || a === 0; ) {
const o = r.find((d) => d.originalParent === n);
o ? (e.push(o), n = o.originalId, r = r.filter((d) => d.originalId !== n), l = 0) : (l -= 1, n = e.slice(l)[0].originalId), a -= 1;
}
return e;
}
function b(r) {
return r.forEach((e, t) => {
e.id = (t + 1).toString();
}), r.forEach((e) => {
var t;
e.parent = ((t = r.find((n) => n.originalId === e.originalParent)) == null ? void 0 : t.id) || "";
}), r.forEach((e) => {
e.hasChildren = r.findIndex((t) => t.parent === e.id) > 0;
}), r;
}
function v(r) {
const e = {
originalId: i.data.module.id,
layer: 0,
originalParent: null,
name: "页面",
type: "module",
controlIcon: "controlIcon fd-i-Family fd_pc-module",
rawSchema: i.data.module
}, t = [];
return r.forEach((n) => {
n[0].originalParent = e.originalId, t.push(...n);
}), t.unshift(e), t;
}
function w() {
const r = i.data.module ? c(i.data.module.components) : c([i.data]);
if (!r.value)
return;
const e = [];
r.value.forEach((a) => {
if (a) {
const o = [];
o.push(a);
const s = f(o, [], 1, null, a.id);
e.push(s);
}
});
const t = v(e), n = m(t);
return b(n);
}
return { getData: w };
}
const q = /* @__PURE__ */ F({
name: "FDesignerOutline",
props: L,
emits: ["outputValue", "currentEvent", "selectionChanged"],
setup(i, p) {
const u = c(), y = c(i.selectable), h = c(i.autoCheckChildren), f = c(i.cascade), m = c(i.showTreeNodeIcons), b = c(i.showLines), v = c(i.newDataItem), w = c(i.lineColor), r = c(i.cellHeight), e = c([{
field: "name",
title: "",
dataType: "string"
}]), t = D("designer-host-service"), n = G(t, p), {
onChanged: l,
currentSelectedNodeId: a,
currentSelectedOutsideNodeId: o,
triggerOutsideClick: d
} = n, {
getData: x
} = _(i, n);
let s = x();
function O() {
if (s = x(), u.value && u.value.updateDataSource) {
if (u.value.updateDataSource(s), o.value && u.value.clearSelection) {
u.value.clearSelection(), d(o.value);
return;
}
a && u.value.clearSelection && (u.value.clearSelection(), N({
id: a.value
}));
}
}
function N(k) {
if (!k && u.value && u.value.clearSelection && u.value.clearSelection(), k && u.value && u.value.selectItem) {
const C = s.find((P) => P.originalId === k.id);
C ? (u.value.selectItemById(C.id), a && (a.value = C.originalId), u.value.activeRowById(C.id), o.value = "") : a && (a.value = "", o.value = k.id);
}
}
return p.expose({
selectControlTreeNode: N,
refreshControlTree: O
}), E(() => {
s.length && u.value && N({
id: s[0].originalId
});
}), () => T("div", {
class: "designer-control-tree"
}, [T(B, {
ref: u,
data: s,
columns: e.value,
selectable: y.value,
columnOption: {
fitColumns: !0,
fitMode: "expand"
},
autoCheckChildren: h.value,
cascade: f.value,
showTreeNodeIcons: m.value,
showLines: b.value,
newDataItem: v.value,
lineColor: w.value,
cellHeight: r.value,
fit: !0,
iconField: "controlIcon",
onSelectionChange: l
}, null)]);
}
});
export {
g as ComponentType,
q as FDesignerOutline,
L as designerOutlineProps
};