gepic
Version:
基于vue3的设计器,可视化开发页面表单
101 lines (100 loc) • 3.64 kB
JavaScript
import { defineComponent as V, inject as c, computed as p, createElementBlock as l, openBlock as r, Fragment as w, renderList as C, createCommentVNode as d, normalizeClass as f, createElementVNode as S, toDisplayString as P, createVNode as N, unref as h, nextTick as B } from "vue";
import D from "../../../../node/src/node.vue.js";
import { pluginManager as E } from "../../../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../../../../hooks/store/index.js";
import { getValueByPath as I, setValueByPath as v } from "../../../../../../utils/common/data.js";
const x = ["title"], T = /* @__PURE__ */ V({
__name: "attributeView",
setup(z) {
const m = c("designer"), s = c("pageSchema"), y = c("revoke"), g = E.getComponentConfings(), o = p(() => m.state.checkedNode);
function b(t) {
var n;
return typeof t.show == "boolean" ? t.show : typeof t.show == "function" ? (n = t.show) == null ? void 0 : n.call(t, { values: o.value }) : !0;
}
const u = p(() => {
var a, e;
if (!o.value || !o.value.type)
return [];
const t = ((a = g[o.value.type]) == null ? void 0 : a.config.attribute) ?? [];
let n = [
{
label: "组件ID",
type: "input",
field: "id",
componentProps: {
disabled: !0
}
},
...t
];
return o.value.id === ((e = s.schemas[0]) == null ? void 0 : e.id) && n.push(
{
label: "画布宽度",
type: "EInputSize",
field: "canvas.width",
editData: s
},
{
label: "画布高度",
type: "EInputSize",
field: "canvas.height",
editData: s
}
), n;
});
function k(t, n, a, e = o.value) {
typeof a.onChange == "function" && a.onChange({ value: t, values: e, componentAttributes: u }), a.changeSync ? v(e, n, t) : B(() => {
v(e, n, t);
}), y.push(s.schemas, "编辑组件属性");
}
return (t, n) => {
var a;
return r(), l("div", {
key: (a = o.value) == null ? void 0 : a.id,
class: "epic-attribute-view"
}, [
(r(!0), l(w, null, C(u.value, (e) => {
var i;
return r(), l("div", {
key: e.field
}, [
b(e) ? (r(), l("div", {
key: 0,
class: f(["epic-attr-item", e.layout])
}, [
e.label ? (r(), l("div", {
key: 0,
class: "epic-attr-label",
title: e.label
}, P(e.label), 9, x)) : d("", !0),
S("div", {
class: f(["epic-attr-input", { "block!": e.layout === "vertical" }])
}, [
N(h(D), {
"component-schema": {
...e,
componentProps: {
...e.componentProps,
...e.field === "componentProps.defaultValue" ? (i = o.value) == null ? void 0 : i.componentProps : {},
input: !1,
field: void 0,
hidden: !1
},
show: !0,
noFormItem: !0
},
"model-value": h(I)(e.editData ?? o.value, e.field),
"onUpdate:modelValue": (_) => k(_, e.field, e, e.editData)
}, null, 8, ["component-schema", "model-value", "onUpdate:modelValue"])
], 2)
], 2)) : d("", !0)
]);
}), 128))
]);
};
}
});
export {
T as default
};