gepic
Version:
基于vue3的设计器,可视化开发页面表单
71 lines (70 loc) • 2.17 kB
JavaScript
import { defineComponent as b, inject as m, computed as k, createBlock as C, openBlock as l, unref as x, mergeProps as y, withCtx as S, createElementBlock as B, normalizeClass as E, createVNode as I } from "vue";
import N from "vuedraggable";
import { pluginManager as V } from "../../../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../../../../hooks/store/index.js";
import w from "./nodeItem.vue.js";
const M = /* @__PURE__ */ b({
name: "EditNodeItem",
__name: "editNodeItem",
props: {
schemas: {}
},
emits: ["update:schemas"],
setup(p, { emit: u }) {
const a = m("designer"), s = m("pageSchema"), i = m("revoke"), g = p, c = u, r = k({
get() {
return g.schemas;
},
set(n) {
c("update:schemas", n);
}
});
function d(n) {
a.setCheckedNode(r.value[n]), a.setDisableHover(!0);
}
function f() {
a.setDisableHover(), i.push(s.schemas, "拖拽组件");
}
function h() {
i.push(s.schemas, "插入组件");
}
function v(n) {
var t, e, o;
return n.id === ((t = s.schemas[0]) == null ? void 0 : t.id) || (o = (e = V.getComponentConfingByType(n.type)) == null ? void 0 : e.editConstraints) != null && o.immovable ? "unmover-item" : "draggable-item";
}
return (n, t) => (l(), C(x(N), y({
modelValue: r.value,
"onUpdate:modelValue": t[0] || (t[0] = (e) => r.value = e),
"item-key": "id",
"component-data": {
type: "transition-group"
},
class: "epic-draggable-range"
}, {
animation: 200,
group: "edit-draggable",
handle: ".draggable-item",
ghostClass: "moveing"
}, {
onStart: t[1] || (t[1] = (e) => d(e.oldIndex)),
onEnd: t[2] || (t[2] = (e) => f()),
onAdd: t[3] || (t[3] = (e) => {
d(e.newIndex), h();
})
}), {
item: S(({ element: e, index: o }) => [
(l(), B("div", {
key: o,
class: E(["widget-box", v(e)])
}, [
I(w, { schema: e }, null, 8, ["schema"])
], 2))
]),
_: 1
}, 16, ["modelValue"]));
}
});
export {
M as default
};