epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
102 lines (101 loc) • 3.96 kB
JavaScript
import { defineComponent as U, inject as C, resolveComponent as E, createBlock as v, openBlock as r, unref as t, isRef as b, withCtx as I, createElementBlock as m, Fragment as O, renderList as y, createElementVNode as N, createCommentVNode as V, normalizeClass as R, createVNode as u } from "vue";
import { VueDraggable as $ } from "vue-draggable-plus";
/* empty css */
import i from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css */
/* empty css */
import { pluginManager as B } from "../../../../../manager/src/pluginManager.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import { useVModel as T } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css */
import { OPTIONS_EDITOR_TREE_KEY as D } from "./optionsEditorContext.js";
const M = {
key: 0,
class: "pl-4"
}, H = /* @__PURE__ */ U({
name: "EOptionItem",
__name: "optionItem",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(_, { emit: f }) {
const h = _, g = f, c = B.component.get("input"), p = C(D, !1), a = T(h, "modelValue", g);
function x(o) {
const n = {
label: "",
value: ""
};
o.children ? o.children.push(n) : o.children = [n];
}
function k(o) {
a.value = a.value.filter((n, d) => d !== o);
}
return (o, n) => {
const d = E("EOptionItem");
return r(), v(t($), {
modelValue: t(a),
"onUpdate:modelValue": n[0] || (n[0] = (e) => b(a) ? a.value = e : null),
"item-key": "id",
"component-data": {
type: "transition-group"
},
group: "option-list",
handle: ".handle",
animation: 200
}, {
default: I(() => [
(r(!0), m(O, null, y(t(a), (e, s) => (r(), m("div", { key: s }, [
N("div", {
class: R([
t(p) ? "grid-cols-[16px_auto_auto_16px_16px]" : "grid-cols-[16px_auto_auto_16px]",
"option-item text-16px text-$ep-text-secondary mb-2 grid items-center gap-2"
])
}, [
u(t(i), {
class: "handle mr-2 cursor-move",
name: "icon--epic--drag"
}),
u(t(c), {
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"]),
u(t(c), {
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"]),
t(p) ? (r(), v(t(i), {
key: 0,
class: "text-lg! cursor-pointer",
name: "icon--epic--add-rounded",
onClick: (l) => x(e)
}, null, 8, ["onClick"])) : V("", !0),
u(t(i), {
class: "hover:text-red cursor-pointer",
name: "icon--epic--delete-outline-rounded",
onClick: (l) => k(s)
}, null, 8, ["onClick"])
], 2),
e.children ? (r(), m("div", M, [
u(d, {
modelValue: e.children,
"onUpdate:modelValue": (l) => e.children = l
}, null, 8, ["modelValue", "onUpdate:modelValue"])
])) : V("", !0)
]))), 128))
]),
_: 1
}, 8, ["modelValue"]);
};
}
});
export {
H as default
};