epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
139 lines (138 loc) • 4.33 kB
JavaScript
import { defineComponent as _, ref as C, createElementBlock as p, openBlock as n, createElementVNode as d, createVNode as s, unref as a, isRef as $, withCtx as N, Fragment as A, renderList as B, createBlock as i, createCommentVNode as D } from "vue";
import { VueDraggable as w } from "vue-draggable-plus";
/* empty css */
import m from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css */
/* empty css */
import { pluginManager as c } from "../../../../../manager/src/pluginManager.js";
import { getUUID as E } 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 I } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css */
const M = { class: "ep-col-editor" }, R = { class: "ep-col-editor-radio" }, S = /* @__PURE__ */ _({
__name: "index",
props: {
modelValue: {
default: () => [],
type: Array
}
},
emits: ["update:modelValue"],
setup(v, { emit: f }) {
const g = v, x = f, V = c.component.get("radio"), b = c.component.get("number"), y = [
{
label: "span",
value: "span"
},
{
label: "xs",
value: "xs"
},
{
label: "sm",
value: "sm"
},
{
label: "md",
value: "md"
},
{
label: "lg",
value: "lg"
},
{
label: "xl",
value: "xl"
},
{
label: "offset",
value: "offset"
},
{
label: "push",
value: "push"
},
{
label: "pull",
value: "pull"
}
], l = C("span"), t = I(g, "modelValue", x);
function k() {
const r = {
id: E(),
props: {
span: 12
},
type: "col",
children: []
};
t.value = [...t.value, r];
}
function h(r) {
t.value = t.value.filter(
(o, e) => e !== r
);
}
return (r, o) => (n(), p("div", M, [
d("div", R, [
o[3] || (o[3] = d("div", { class: "text-$ep-text-helper text-sm" }, "选择需要配置的属性：", -1)),
s(a(V), {
modelValue: l.value,
"onUpdate:modelValue": o[0] || (o[0] = (e) => l.value = e),
value: l.value,
"onUpdate:value": o[1] || (o[1] = (e) => l.value = e),
options: y
}, null, 8, ["modelValue", "value"])
]),
s(a(w), {
modelValue: a(t),
"onUpdate:modelValue": o[2] || (o[2] = (e) => $(t) ? t.value = e : null),
"item-key": "id",
"component-data": {
type: "transition-group"
},
class: "edit-col-range",
animation: 200,
gorup: { name: "edit-col-range" },
handle: ".handle"
}, {
default: N(() => [
(n(!0), p(A, null, B(a(t), (e, U) => (n(), p("div", {
key: e.id,
class: "ep-col-editor-item text-16px text-$ep-text-secondary mb-2 grid grid-cols-[16px_auto_16px] items-center gap-2"
}, [
s(a(m), {
class: "handle mr-2 cursor-move",
name: "icon--epic--drag"
}),
(n(), i(a(b), {
key: l.value,
value: e.props[l.value],
"onUpdate:value": (u) => e.props[l.value] = u,
modelValue: e.props[l.value],
"onUpdate:modelValue": (u) => e.props[l.value] = u,
style: { width: "100%" },
min: 1,
max: 24
}, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"])),
a(t).length > 1 ? (n(), i(a(m), {
key: 0,
class: "hover:text-$ep-destructive cursor-pointer",
name: "icon--epic--delete-outline-rounded",
onClick: (u) => h(U)
}, null, 8, ["onClick"])) : D("", !0)
]))), 128))
]),
_: 1
}, 8, ["modelValue"]),
d("div", {
class: "ep-button ghost primary",
onClick: k
}, "添加列")
]));
}
});
export {
S as default
};