epic-designer-dev
Version:
基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器
97 lines (96 loc) • 3.51 kB
JavaScript
import { defineComponent as U, inject as k, resolveComponent as b, createBlock as p, openBlock as r, unref as a, isRef as y, withCtx as E, createElementVNode as s, createElementBlock as I, createCommentVNode as v, normalizeClass as O, createVNode as d } from "vue";
/* empty css */
import m from "../../../../base-ui/src/icon/icon.vue2.js";
import { useVModel as $ } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { pluginManager as B } from "../../../../../utils/src/manager/pluginManager.js";
import N from "vuedraggable";
const M = {
key: 0,
class: "pl-4"
}, F = /* @__PURE__ */ U({
name: "EOptionItem",
__name: "optionItem",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(V, { emit: _ }) {
const h = V, f = _, i = B.getComponent("input"), c = k("tree", !1), o = $(h, "modelValue", f);
function x(t) {
const n = {
label: "",
value: ""
};
t.children ? t.children.push(n) : t.children = [n];
}
function g(t) {
o.value = o.value.filter((n, u) => u !== t);
}
return (t, n) => {
const u = b("EOptionItem");
return r(), p(a(N), {
modelValue: a(o),
"onUpdate:modelValue": n[0] || (n[0] = (e) => y(o) ? o.value = e : null),
"item-key": "id",
"component-data": {
type: "transition-group"
},
group: "option-list",
handle: ".handle",
animation: 200
}, {
item: E(({ element: e, index: C }) => [
s("div", null, [
s("div", {
class: O([
a(c) ? "grid-cols-[16px_auto_auto_16px_16px]" : "grid-cols-[16px_auto_auto_16px]",
"option-item text-16px text-$epic-text-secondary mb-2 grid items-center gap-2"
])
}, [
d(a(m), {
class: "handle mr-2 cursor-move",
name: "icon--epic--drag"
}),
d(a(i), {
modelValue: e.label,
"onUpdate:modelValue": (l) => e.label = l,
value: e.label,
"onUpdate:value": (l) => e.label = l,
placeholder: "label"
}, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
d(a(i), {
modelValue: e.value,
"onUpdate:modelValue": (l) => e.value = l,
value: e.value,
"onUpdate:value": (l) => e.value = l,
placeholder: "value"
}, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
a(c) ? (r(), p(a(m), {
key: 0,
class: "text-lg! cursor-pointer",
name: "icon--epic--add-rounded",
onClick: (l) => x(e)
}, null, 8, ["onClick"])) : v("", !0),
d(a(m), {
class: "hover:text-red cursor-pointer",
name: "icon--epic--delete-outline-rounded",
onClick: (l) => g(C)
}, null, 8, ["onClick"])
], 2),
e.children ? (r(), I("div", M, [
d(u, {
modelValue: e.children,
"onUpdate:modelValue": (l) => e.children = l
}, null, 8, ["modelValue", "onUpdate:modelValue"])
])) : v("", !0)
])
]),
_: 1
}, 8, ["modelValue"]);
};
}
});
export {
F as default
};