epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
196 lines (195 loc) • 6.95 kB
JavaScript
import { defineComponent as $, inject as M, resolveComponent as z, openBlock as r, createBlock as I, unref as t, isRef as U, withCtx as B, createElementVNode as c, normalizeClass as w, createVNode as s, createCommentVNode as O, createElementBlock as V, ref as A, reactive as D, onMounted as R, watch as T, provide as j, Fragment as F, renderList as q, toDisplayString as g, withDirectives as G, vShow as H, createTextVNode as J } from "vue";
import { d as K } from "./vuedraggable.umd-D908YPOr.js";
import { p, E as N } from "./pluginManager-BNLy8dPz.js";
import { _ as C } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
import { u as S } from "./index-NT_HkNlB.js";
import "element-plus";
import { u as P } from "./index-B1s67XDZ.js";
import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const W = {
key: 0,
class: "pl-4"
}, X = /* @__PURE__ */ $({
name: "EOptionItem",
__name: "optionItem",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(y, { emit: b }) {
const n = y, h = p.getComponent("input"), f = M("tree", !1), u = S(n, "modelValue", b);
function m(l) {
const o = {
label: "",
value: ""
};
l.children ? l.children.push(o) : l.children = [o];
}
function x(l) {
u.value = u.value.filter((o, _) => _ !== l);
}
return (l, o) => {
const _ = z("EOptionItem");
return r(), I(t(K), {
modelValue: t(u),
"onUpdate:modelValue": o[0] || (o[0] = (a) => U(u) ? u.value = a : null),
"item-key": "id",
"component-data": {
type: "transition-group"
},
group: "option-list",
handle: ".handle",
animation: 200
}, {
item: B(({ element: a, index: k }) => [
c("div", null, [
c("div", {
class: w([t(f) ? "grid-cols-[16px_auto_auto_16px_16px]" : "grid-cols-[16px_auto_auto_16px]", "option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2"])
}, [
s(t(C), {
class: "mr-2 cursor-move handle",
name: "icon--epic--drag"
}),
s(t(h), {
modelValue: a.label,
"onUpdate:modelValue": (e) => a.label = e,
value: a.label,
"onUpdate:value": (e) => a.label = e,
placeholder: "label"
}, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
s(t(h), {
modelValue: a.value,
"onUpdate:modelValue": (e) => a.value = e,
value: a.value,
"onUpdate:value": (e) => a.value = e,
placeholder: "value"
}, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
t(f) ? (r(), I(t(C), {
key: 0,
class: "cursor-pointer text-lg!",
name: "icon--epic--add-rounded",
onClick: (e) => m(a)
}, null, 8, ["onClick"])) : O("", !0),
s(t(C), {
class: "hover:text-red cursor-pointer",
name: "icon--epic--delete-outline-rounded",
onClick: (e) => x(k)
}, null, 8, ["onClick"])
], 2),
a.children ? (r(), V("div", W, [
s(_, {
modelValue: a.children,
"onUpdate:modelValue": (e) => a.children = e
}, null, 8, ["modelValue", "onUpdate:modelValue"])
])) : O("", !0)
])
]),
_: 1
}, 8, ["modelValue"]);
};
}
}), Y = { class: "" }, Z = { class: "epic-tabs-box" }, ee = ["title", "onClick"], te = { key: 0 }, le = { key: 1 }, ae = { style: { "font-size": "12px", "margin-bottom": "8px", display: "inline-block" } }, oe = /* @__PURE__ */ $({
__name: "index",
props: {
tree: { type: Boolean },
modelValue: {},
dynamicId: {},
type: {}
},
emits: ["update:modelValue", "update:EOptionsEditor"],
setup(y, { emit: b }) {
const { t: n } = P(), h = p.getComponent("button"), f = p.getComponent("select"), v = A([]), u = D({
title: n("static")
}), m = y, x = b;
N.on("deleteSourceData", (e) => {
o.value === e && (o.value = "", l.value = []);
}), N.on("updateSource", (e) => {
v.value = p.sourceData.map((i) => ({
...i,
label: i.apiName,
value: i.id
}));
}), R(() => {
v.value = p.sourceData.map((e) => ({
...e,
label: e.apiName,
value: e.id
}));
});
const l = S(m, "modelValue", x), o = S(m, "dynamicId", x);
T(
() => o.value,
async () => {
o.value ? u.title = n("dynamic") : u.title = n("static");
},
{
immediate: !0
}
);
const _ = [
{
title: n("static")
},
{
title: n("dynamic")
}
];
async function a(e) {
u.title = e.title, e.title === n("static") ? (l.value = [], o.value = "") : (l.value = [], v.value = p.sourceData.map((i) => ({
...i,
label: i.apiName,
value: i.id
})));
}
m.modelValue, j("tree", m.tree);
function k() {
const e = D({
label: "",
value: ""
});
l.value.length ? l.value = [...l.value, e] : l.value = [e];
}
return (e, i) => {
var E;
return r(), V("div", Y, [
c("div", null, [
c("div", Z, [
(r(), V(F, null, q(_, (d, L) => c("div", {
class: w(["epic-tab cursor-pointer truncate", { checked: u.title === d.title }]),
key: L,
title: d.title,
onClick: (ne) => a(d)
}, g(d.title), 11, ee)), 64))
]),
u.title === t(n)("static") ? (r(), V("div", te, [
G(c("div", { class: "py-4 my-2 text-center text-gray-400 bg-white" }, g(t(n)("noOptions")), 513), [
[H, !((E = t(l)) != null && E.length)]
]),
s(X, {
modelValue: t(l),
"onUpdate:modelValue": i[0] || (i[0] = (d) => U(l) ? l.value = d : null)
}, null, 8, ["modelValue"]),
s(t(h), { onClick: k }, {
default: B(() => [
J(g(t(n)("addOption")), 1)
]),
_: 1
})
])) : (r(), V("div", le, [
c("span", ae, g(t(n)("dataSources")), 1),
s(t(f), {
modelValue: t(o),
"onUpdate:modelValue": i[1] || (i[1] = (d) => U(o) ? o.value = d : null),
placeholder: t(n)("pleaseSelectDataSource"),
clearable: "",
options: v.value
}, null, 8, ["modelValue", "placeholder", "options"])
]))
])
]);
};
}
}), ve = /* @__PURE__ */ Q(oe, [["__scopeId", "data-v-7a297cd1"]]);
export {
ve as default
};