json-schema-form-vue3
Version:
A Vue 3 component for editing JSON Schema with nested object and array support
338 lines (337 loc) • 12.6 kB
JavaScript
import { defineComponent as z, ref as G, onMounted as H, watch as Q, resolveComponent as _, createElementBlock as v, openBlock as c, createVNode as s, withCtx as p, createCommentVNode as V, createElementVNode as j, unref as S, Fragment as w, renderList as y, createBlock as W } from "vue";
import { Plus as C, Delete as X } from "@element-plus/icons-vue";
const Y = { class: "jsf-json-schema-form" }, Z = {
key: 0,
class: "jsf-top-button"
}, K = { class: "jsf-schema-container" }, N = {
key: 0,
class: "jsf-empty-state"
}, ee = { class: "jsf-property-fields" }, te = { class: "jsf-action-buttons" }, oe = {
key: 0,
class: "jsf-array-items"
}, le = { class: "jsf-property-fields" }, se = {
key: 0,
class: "jsf-nested-schema"
}, ne = {
key: 1,
class: "jsf-nested-schema"
}, re = /* @__PURE__ */ z({
name: "JsonSchemaForm",
__name: "main",
props: {
modelValue: {},
isRootLevel: { type: Boolean, default: !0 }
},
emits: ["update:model-value"],
setup(b, { emit: g }) {
const a = b, d = g, i = G({}), O = ["string", "number", "integer", "object", "array", "boolean", "null"];
H(() => {
i.value = Object.keys(a.modelValue.properties || {}).reduce((t, o) => (t[o] = o, t), {});
}), Q(() => a.modelValue, (t) => {
const o = {};
for (const l in t.properties)
Object.prototype.hasOwnProperty.call(t.properties, l) && (!i.value[l] || i.value[l] !== l ? o[l] = l : o[l] = i.value[l]);
Object.keys(i.value).forEach((l) => {
let r;
for (const m in o)
if (o[m] === i.value[l]) {
r = m;
break;
}
t.properties && (t.properties[l] || r && t.properties[r]) && i.value[l];
});
const e = {};
Object.keys(t.properties || {}).forEach((l) => {
e[l] = i.value[l] || l;
}), i.value = e;
}, { deep: !0, immediate: !0 });
const J = (t) => {
var o;
return ((o = a.modelValue.required) == null ? void 0 : o.includes(t)) || !1;
}, U = (t) => {
var r;
const o = { ...a.modelValue };
let e;
t && ((r = o.properties) != null && r[t]) ? (o.properties[t].properties || (o.properties[t].properties = {}), e = o.properties[t].properties) : (o.properties || (o.properties = {}), e = o.properties);
const l = `property${Object.keys(e).length + 1}`;
e[l] = {
type: "string",
title: ""
}, i.value[l] = l, d("update:model-value", o);
}, R = (t) => {
var r;
const o = { ...a.modelValue };
if (!o.properties) return;
const { [t]: e, ...l } = o.properties;
o.properties = l, o.required = ((r = o.required) == null ? void 0 : r.filter((m) => m !== t)) || [], delete i.value[t], d("update:model-value", o);
}, A = (t) => {
var m;
const o = i.value[t];
if (t === o || o.trim() === "") {
i.value[t] = t;
return;
}
const e = { ...a.modelValue };
if (!e.properties) return;
const { [t]: l, ...r } = e.properties;
e.properties = {
...r,
[o]: l
}, e.required = (m = e.required) == null ? void 0 : m.map(
(k) => k === t ? o : k
), delete i.value[t], i.value[o] = o, d("update:model-value", e);
}, E = (t, o) => {
const e = { ...a.modelValue };
e.properties && (e.properties = {
...e.properties,
[t]: {
...e.properties[t],
type: o,
...o === "object" && { properties: {} },
...o === "array" && {
items: {
type: "string"
}
}
}
}, d("update:model-value", e));
}, I = (t, o) => {
const e = { ...a.modelValue };
e.properties && (e.properties = {
...e.properties,
[t]: {
...e.properties[t],
title: o
}
}, d("update:model-value", e));
}, T = (t, o) => {
const e = { ...a.modelValue };
e.properties && (e.properties = {
...e.properties,
[t]: o
}, d("update:model-value", e));
}, L = (t, o) => {
const e = { ...a.modelValue }, l = new Set(e.required || []);
o ? l.add(t) : l.delete(t), e.required = Array.from(l), d("update:model-value", e);
}, $ = (t, o) => {
const e = { ...a.modelValue };
e.properties && (e.properties = {
...e.properties,
[t]: {
...e.properties[t],
items: {
...e.properties[t].items,
type: o,
...o === "object" && { properties: {} }
}
}
}, d("update:model-value", e));
}, D = (t, o) => {
const e = { ...a.modelValue };
if (!e.properties) return;
const l = e.properties[t];
l.items ? l.items = {
...l.items,
title: o
} : l.items = {
type: "string",
title: o
}, e.properties = {
...e.properties,
[t]: l
}, d("update:model-value", e);
}, M = (t, o) => {
const e = { ...a.modelValue };
e.properties && (e.properties = {
...e.properties,
[t]: {
...e.properties[t],
items: o
}
}, d("update:model-value", e));
};
return (t, o) => {
const e = _("el-button"), l = _("el-input"), r = _("el-form-item"), m = _("el-checkbox"), k = _("el-option"), F = _("el-select"), P = _("JsonSchemaForm"), x = _("el-form");
return c(), v("div", Y, [
s(x, { ref: "formRef" }, {
default: p(() => [
t.isRootLevel && t.modelValue.properties && Object.keys(t.modelValue.properties).length > 0 ? (c(), v("div", Z, [
s(e, {
type: "primary",
icon: S(C),
circle: "",
onClick: o[0] || (o[0] = () => U())
}, null, 8, ["icon"])
])) : V("", !0),
j("div", K, [
!t.modelValue.properties || Object.keys(t.modelValue.properties).length === 0 ? (c(), v("div", N, [
s(e, {
type: "primary",
icon: S(C),
circle: "",
onClick: o[1] || (o[1] = () => U())
}, null, 8, ["icon"])
])) : V("", !0),
(c(!0), v(w, null, y(t.modelValue.properties, (f, u) => {
var B;
return c(), v("div", {
key: u,
class: "jsf-property-row"
}, [
j("div", ee, [
s(r, { label: "属性" }, {
default: p(() => [
s(l, {
modelValue: i.value[u],
"onUpdate:modelValue": (n) => i.value[u] = n,
onBlur: (n) => A(u)
}, null, 8, ["modelValue", "onUpdate:modelValue", "onBlur"])
]),
_: 2
}, 1024),
s(r, { label: "必填" }, {
default: p(() => [
s(m, {
"model-value": J(u),
"onUpdate:modelValue": (n) => L(u, n)
}, null, 8, ["model-value", "onUpdate:modelValue"])
]),
_: 2
}, 1024),
s(r, { label: "类型" }, {
default: p(() => [
s(F, {
"model-value": f.type,
"onUpdate:modelValue": (n) => E(u, n)
}, {
default: p(() => [
(c(), v(w, null, y(O, (n) => s(k, {
key: n,
label: n,
value: n
}, null, 8, ["label", "value"])), 64))
]),
_: 2
}, 1032, ["model-value", "onUpdate:modelValue"])
]),
_: 2
}, 1024),
s(r, { label: "标题" }, {
default: p(() => [
s(l, {
"model-value": f.title,
"onUpdate:modelValue": (n) => I(u, n)
}, null, 8, ["model-value", "onUpdate:modelValue"])
]),
_: 2
}, 1024),
j("div", te, [
s(e, {
type: "danger",
icon: S(X),
circle: "",
onClick: (n) => R(u)
}, null, 8, ["icon", "onClick"]),
f.type === "object" ? (c(), W(e, {
key: 0,
type: "primary",
icon: S(C),
circle: "",
onClick: () => U(u)
}, null, 8, ["icon", "onClick"])) : V("", !0)
])
]),
f.type === "array" ? (c(), v("div", oe, [
j("div", le, [
s(r, { label: "数组项" }, {
default: p(() => [
s(l, {
value: "items",
disabled: ""
})
]),
_: 1
}),
s(r, { label: "必填" }, {
default: p(() => [
s(m, { disabled: "" })
]),
_: 1
}),
s(r, { label: "类型" }, {
default: p(() => {
var n;
return [
s(F, {
"model-value": (n = f.items) == null ? void 0 : n.type,
"onUpdate:modelValue": (h) => $(u, h)
}, {
default: p(() => [
(c(), v(w, null, y(O, (h) => s(k, {
key: h,
label: h,
value: h
}, null, 8, ["label", "value"])), 64))
]),
_: 2
}, 1032, ["model-value", "onUpdate:modelValue"])
];
}),
_: 2
}, 1024),
s(r, { label: "标题" }, {
default: p(() => {
var n;
return [
s(l, {
"model-value": (n = f.items) == null ? void 0 : n.title,
"onUpdate:modelValue": (h) => D(u, h)
}, null, 8, ["model-value", "onUpdate:modelValue"])
];
}),
_: 2
}, 1024)
]),
((B = f.items) == null ? void 0 : B.type) === "object" ? (c(), v("div", se, [
s(P, {
"model-value": f.items,
"onUpdate:modelValue": (n) => M(u, n),
"is-root-level": !1
}, null, 8, ["model-value", "onUpdate:modelValue"])
])) : V("", !0)
])) : V("", !0),
f.type === "object" ? (c(), v("div", ne, [
s(P, {
"model-value": f,
"onUpdate:modelValue": (n) => T(u, n),
"is-root-level": !1
}, null, 8, ["model-value", "onUpdate:modelValue"])
])) : V("", !0)
]);
}), 128))
])
]),
_: 1
}, 512)
]);
};
}
}), ie = (b, g) => {
const a = b.__vccOpts || b;
for (const [d, i] of g)
a[d] = i;
return a;
}, q = /* @__PURE__ */ ie(re, [["__scopeId", "data-v-d63f4d47"]]);
q.name = "JsonSchemaForm";
const ae = (b) => {
b.component("JsonSchemaForm", q);
}, ce = {
install: ae,
// Export the component directly for tree-shaking
component: q
};
export {
q as JsonSchemaForm,
ce as default,
ae as install
};