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