epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
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
};