epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
113 lines (112 loc) • 4.15 kB
JavaScript
import { defineComponent as S, computed as u, ref as _, watchEffect as E, createElementBlock as m, createCommentVNode as h, openBlock as f, normalizeClass as d, createElementVNode as N, toDisplayString as x, createVNode as A, unref as B, nextTick as D } from "vue";
/* empty css */
/* empty css */
/* empty css */
import I from "../../../../../base-ui/src/node/node.vue.js";
/* empty css */
import { getValueByPath as z, setValueByPath as v } from "../../../../../../utils/src/common/data.js";
import "../../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import "@vueuse/core";
import "../../../../../../hooks/src/store/index.js";
import { useDesignerContext as M } from "../../../../../../hooks/src/designer/useDesignerContext.js";
import { useTableMeta as P } from "../../../../../../hooks/src/designer/useTableMeta.js";
import { pluginManager as b } from "../../../../../../manager/src/pluginManager.js";
import "vue-draggable-plus";
const T = ["title"], X = /* @__PURE__ */ S({
__name: "attributeItem",
props: {
schema: {}
},
setup(g) {
const e = g, c = M(), i = c.pageSchema, y = c.revoke, n = u(() => c.state.selectedNode), r = P(b);
function V(o) {
var t;
return typeof o.show == "boolean" ? o.show : typeof o.show == "function" ? (t = o.show) == null ? void 0 : t.call(o, {
tableMeta: r.value,
values: n.value
}) : !0;
}
const C = b.component.getComponentConfigs(), k = u(() => {
var a, s, l;
if (!n.value || !n.value.type)
return [];
const t = [...((s = (a = C[n.value.type]) == null ? void 0 : a.config) == null ? void 0 : s.attribute) ?? []];
return n.value.id === ((l = i.schemas[0]) == null ? void 0 : l.id) && t.push(
{
editData: i,
field: "canvas.width",
label: "画布宽度",
type: "EInputSize"
},
{
editData: i,
field: "canvas.height",
label: "画布高度",
type: "EInputSize"
}
), t;
});
function w(o, t, a, s = n.value) {
typeof a.onChange == "function" && a.onChange({
componentAttributes: k,
tableMeta: r == null ? void 0 : r.value,
value: o,
values: s
}), a.changeSync ? v(s, t, o) : D(() => {
v(s, t, o);
}), y.push("属性编辑");
}
const p = _();
return E(() => {
p.value = z(
e.schema.editData ?? n.value,
e.schema.field
);
}), (o, t) => {
var a, s;
return V(e.schema) ? (f(), m("div", {
key: 0,
class: d(["epic-attr-item", e.schema.layout])
}, [
e.schema.label ? (f(), m("div", {
key: 0,
class: "epic-attr-label",
title: e.schema.label
}, x(e.schema.label), 9, T)) : h("", !0),
N("div", {
class: d(["epic-attr-input", { "block!": e.schema.layout === "vertical" }])
}, [
A(B(I), {
"is-property": "",
"component-schema": {
...e.schema,
props: {
...e.schema.props,
...e.schema.field === "props.defaultValue" ? (a = n.value) == null ? void 0 : a.props : {},
input: !1,
field: void 0,
hidden: !1,
placeholder: ((s = e.schema.props) == null ? void 0 : s.placeholder) ?? "请输入"
},
show: !0,
noFormItem: !0
},
modelValue: p.value,
"onUpdate:modelValue": [
t[0] || (t[0] = (l) => p.value = l),
t[1] || (t[1] = (l) => w(
l,
e.schema.field,
e.schema,
e.schema.editData
))
]
}, null, 8, ["component-schema", "modelValue"])
], 2)
], 2)) : h("", !0);
};
}
});
export {
X as default
};