epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
93 lines (92 loc) • 3.26 kB
JavaScript
import { defineComponent as _, createElementBlock as u, openBlock as r, createVNode as p, unref as o, isRef as h, withCtx as i, Fragment as C, renderList as U, createBlock as b, createCommentVNode as B, createTextVNode as N } from "vue";
import { VueDraggable as $ } from "vue-draggable-plus";
/* empty css */
import m from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css */
/* empty css */
import { pluginManager as d } from "../../../../../manager/src/pluginManager.js";
import { getUUID as D } from "../../../../../utils/src/common/string.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import { useVModel as E } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css */
const H = /* @__PURE__ */ _({
__name: "index",
props: {
modelValue: {
default: () => [],
type: Array
}
},
emits: ["update:modelValue"],
setup(s, { emit: c }) {
const f = s, g = c, V = d.component.get("button"), v = d.component.get("number"), e = E(f, "modelValue", g);
function x() {
const l = {
id: D(),
props: {
span: 12
},
type: "col",
children: []
};
e.value = [...e.value, l];
}
function k(l) {
e.value = e.value.filter(
(n, t) => t !== l
);
}
return (l, n) => (r(), u("div", null, [
p(o($), {
modelValue: o(e),
"onUpdate:modelValue": n[0] || (n[0] = (t) => h(e) ? e.value = t : null),
"item-key": "id",
"component-data": {
type: "transition-group"
},
class: "edit-col-range",
animation: 200,
gorup: { name: "edit-col-range" },
handle: ".handle"
}, {
default: i(() => [
(r(!0), u(C, null, U(o(e), (t, y) => (r(), u("div", {
key: t.id,
class: "EColEditor-item text-16px text-$ep-text-secondary mb-2 grid grid-cols-[16px_auto_auto_16px] items-center gap-2"
}, [
p(o(m), {
class: "handle mr-2 cursor-move",
name: "icon--epic--drag"
}),
p(o(v), {
value: t.props.span,
"onUpdate:value": (a) => t.props.span = a,
modelValue: t.props.span,
"onUpdate:modelValue": (a) => t.props.span = a,
style: { width: "100%" },
min: 1,
max: 24
}, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"]),
o(e).length > 1 ? (r(), b(o(m), {
key: 0,
class: "hover:text-$ep-destructive cursor-pointer",
name: "icon--epic--delete-outline-rounded",
onClick: (a) => k(y)
}, null, 8, ["onClick"])) : B("", !0)
]))), 128))
]),
_: 1
}, 8, ["modelValue"]),
p(o(V), { onClick: x }, {
default: i(() => [...n[1] || (n[1] = [
N(" 添加列 ", -1)
])]),
_: 1
})
]));
}
});
export {
H as default
};