ai-form-designer
Version:
vue3+adv的设计器,可视化开发页面表单
105 lines (104 loc) • 4.21 kB
JavaScript
import { defineComponent as D, inject as i, ref as S, computed as b, createElementBlock as m, openBlock as h, createElementVNode as n, createVNode as r, unref as a, withCtx as w, Fragment as E, renderList as M, normalizeClass as j, toDisplayString as V, withDirectives as z, mergeProps as A, vShow as F } from "vue";
import { d as G } from "./vuedraggable.umd-R2PMz9bE.js";
import { p as d, g as B, f as q } from "./index-DwcJO-0a.js";
import { _ as I } from "./icon.vue_vue_type_script_setup_true_lang-DW206h_7.js";
const H = { class: "epic-component-view flex flex-col" }, J = { class: "epic-search-box px-10px py-6px" }, K = { class: "flex flex-1 overflow-auto" }, O = { class: "epic-tabs-box" }, Q = ["title", "onClick"], R = { class: "h-full flex-1 overflow-auto py-2 box-border" }, W = ["onClick"], X = { class: "epic-componet-label flex-1 w-0 truncate" }, Y = { class: "text-center pt-42px text-gray-400" }, ne = /* @__PURE__ */ D({
__name: "index",
setup(Z) {
const L = d.getComponent("input"), v = i("pageSchema"), f = i("designer"), N = i("revoke"), $ = i("designerProps"), g = d.getComponentSchemaGroups(), s = S(""), x = {
title: "全部",
list: []
}, c = S(x), P = b(() => [
x,
...g.value
]), p = b(() => {
let o = c.value.list;
if (c.value.title === "全部") {
const t = g.value.map((e) => e.list);
o = [].concat(...t);
}
return o.filter((t) => {
var e;
return ((e = t.label) == null ? void 0 : e.includes(s.value)) && (!$.value.formMode || t.type !== "form");
});
});
function T(o) {
c.value = o;
}
function U(o) {
var C, k, y;
const t = q(v.schemas, ((C = f.state.checkedNode) == null ? void 0 : C.id) ?? "root");
if (!t)
return !1;
let { list: e, schema: l, index: u } = t;
l.children && !((y = (k = d.getComponentConfingByType(l.type)) == null ? void 0 : k.editConstraints) != null && y.childImmovable) && (e = l.children, u = l.children.length - 1);
const _ = B(o);
e.splice(u + 1, 0, _), f.setCheckedNode(_), N.push(v.schemas, "插入组件");
}
return (o, t) => (h(), m("div", H, [
n("div", J, [
r(a(L), {
placeholder: "搜索组件",
modelValue: s.value,
"onUpdate:modelValue": t[0] || (t[0] = (e) => s.value = e),
clearable: "",
allowClear: "",
value: s.value,
"onUpdate:value": t[1] || (t[1] = (e) => s.value = e)
}, {
prefix: w(() => [
r(a(I), {
class: "text-$epic-text-helper",
name: "icon--epic--search-rounded"
})
]),
_: 1
}, 8, ["modelValue", "value"])
]),
n("div", K, [
n("div", O, [
(h(!0), m(E, null, M(P.value, (e, l) => (h(), m("div", {
class: j(["epic-tab cursor-pointer truncate", { checked: c.value.title === e.title }]),
key: l,
title: e.title,
onClick: (u) => T(e)
}, V(e.title), 11, Q))), 128))
]),
n("div", R, [
r(a(G), A({
modelValue: p.value,
"onUpdate:modelValue": t[2] || (t[2] = (e) => p.value = e)
}, {
group: { name: "edit-draggable", pull: "clone", put: !1 },
sort: !1,
animation: 180,
ghostClass: "moving"
}, {
clone: a(B),
"item-key": "id",
class: "grid grid-cols-[auto_auto] px-10px gap-2"
}), {
item: w(({ element: e }) => [
n("div", {
class: "epic-componet-item flex items-center truncate",
onClick: (l) => U(e)
}, [
r(a(I), {
name: a(d).getComponentConfingByType(e.type).icon ?? ""
}, null, 8, ["name"]),
n("div", X, V(e.label), 1)
], 8, W)
]),
_: 1
}, 16, ["modelValue", "clone"]),
z(n("div", Y, "没有查询到的组件", 512), [
[F, !p.value.length]
])
])
])
]));
}
});
export {
ne as default
};