epic-designer-dev
Version:
基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器
102 lines (101 loc) • 3.7 kB
JavaScript
import { defineComponent as V, inject as u, 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";
/* empty css */
import D from "../../../../base-ui/src/node/node.vue.js";
import { getValueByPath as E, setValueByPath as v } from "../../../../../utils/src/common/data.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { pluginManager as I } from "../../../../../utils/src/manager/pluginManager.js";
import "vuedraggable";
const x = ["title"], q = /* @__PURE__ */ V({
__name: "attribute",
setup(z) {
const m = u("designer"), s = u("pageSchema"), y = u("revoke"), g = I.getComponentConfings(), o = p(() => m.state.selectedNode);
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 c = p(() => {
var a, e;
if (!o.value || !o.value.type)
return [];
const t = ((a = g[o.value.type]) == null ? void 0 : a.config.attribute) ?? [], n = [
{
componentProps: {
disabled: !0
},
field: "id",
label: "组件ID",
type: "input"
},
...t
];
return o.value.id === ((e = s.schemas[0]) == null ? void 0 : e.id) && n.push(
{
editData: s,
field: "canvas.width",
label: "画布宽度",
type: "EInputSize"
},
{
editData: s,
field: "canvas.height",
label: "画布高度",
type: "EInputSize"
}
), n;
});
function _(t, n, a, e = o.value) {
typeof a.onChange == "function" && a.onChange({ componentAttributes: c, value: t, values: e }), a.changeSync ? v(e, n, t) : B(() => {
v(e, n, t);
}), y.push("编辑组件属性");
}
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(c.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(E)(e.editData ?? o.value, e.field),
"onUpdate:modelValue": (k) => _(k, e.field, e, e.editData)
}, null, 8, ["component-schema", "model-value", "onUpdate:modelValue"])
], 2)
], 2)) : d("", !0)
]);
}), 128))
]);
};
}
});
export {
q as default
};