@tuoyuan/json-schema
Version:
json-schema编辑器及表单组件
373 lines (372 loc) • 15.8 kB
JavaScript
import { defineComponent as re, mergeModels as F, useModel as pe, computed as h, ref as V, watch as ce, onMounted as ve, resolveComponent as s, openBlock as n, createElementBlock as m, Fragment as C, createElementVNode as r, normalizeStyle as w, createVNode as i, createCommentVNode as p, createBlock as d, withCtx as c, normalizeClass as L, createTextVNode as me, renderList as A, withDirectives as fe, unref as ye, vShow as be } from "vue";
import ge from "./setting-modal.vue.js";
import { VueDraggable as he } from "vue-draggable-plus";
const xe = { class: "row-main" }, _e = {
key: 0,
class: "expand"
}, Ve = { class: "quick-box" }, Ce = { class: "icon-btn required" }, we = { class: "icon-btn null" }, Ne = { class: "col action-box" }, ke = { class: "row-children" }, Ae = /* @__PURE__ */ re({
name: "JsonSchemaEditorRow",
__name: "row",
props: /* @__PURE__ */ F({
// 是否根节点
isRoot: {
type: Boolean
},
// 字段名
fieldName: {
type: String,
default: ""
},
// 父节点
parent: {
type: Object
},
// 节点深度
deep: {
type: Number,
default: 0
},
// 禁用字段名编辑
disabledFieldName: {
type: Boolean
},
// 是否数组类型的子节点
isArrayChild: {
type: Boolean
},
// 自定义属性列表
custom: {
type: Array,
default: () => []
},
// 表单组件列表
widgets: {
type: Array,
default: () => []
},
// 隐藏row
isHidden: {
type: Boolean
}
}, {
modelValue: { type: Object, required: !0 },
modelModifiers: {}
}),
emits: /* @__PURE__ */ F(["onFieldNameChange"], ["update:modelValue"]),
setup(R, { emit: H }) {
const e = pe(R, "modelValue"), t = R, M = h(() => ({ "padding-left": t.isRoot ? 0 : "20px" })), $ = h(() => ({ left: e.value.items || e.value.properties ? "-30px" : "0" })), S = h(() => ({ width: 250 - t.deep * 20 + "px" })), D = h(() => (Array.isArray(e.value.type) ? e.value.type : [e.value.type]).includes("null")), T = h(() => t.isRoot ? !1 : t.parent.required ? t.parent.required.includes(t.fieldName) : !1), I = H, J = ["string", "number", "integer", "boolean", "array", "object", "null", "any"], O = ["string", "number", "integer", "boolean", "array", "object", "null"], z = ["null", "any"], W = ["x-hidden", "x-disabled"], N = V(!0), G = V(1), x = V(e.value.type), k = V(!1), P = V();
h(() => {
const o = [];
return Object.keys(e.value).forEach((l) => {
l.startsWith("x-") && !W.includes(l) && o.push(l);
}), o;
}), ce(
() => e.value.type,
(o, l) => {
o.toString() === O.toString() ? x.value = "any" : x.value = o;
}
), ve(() => {
});
const Q = () => {
N.value = !N.value;
}, X = (o) => {
I("onFieldNameChange", o);
}, Y = (o, l, f) => {
let v = {};
if (Object.keys(e.value.properties).forEach((u) => {
u === l ? v[o] = e.value.properties[l] : v[u] = e.value.properties[u];
}), e.value.properties = v, e.value.required) {
const u = e.value.required.indexOf(l);
u !== -1 && e.value.required.splice(u, 1, o);
}
if (e.value.order) {
const u = e.value.order.indexOf(l);
u !== -1 && e.value.order.splice(u, 1, o);
}
}, Z = () => {
t.parent.required || (t.parent.required = []);
const o = t.parent.required.indexOf(t.fieldName);
o === -1 ? t.parent.required.push(t.fieldName) : t.parent.required.splice(o, 1);
}, K = () => {
typeof e.value.type == "string" && (e.value.type = [e.value.type]);
const o = e.value.type.indexOf("null");
o === -1 ? e.value.type.push("null") : (e.value.type.splice(o, 1), e.value.type.length === 1 && (e.value.type = e.value.type[0]));
}, ee = (o) => {
const l = {
type: o
// title: data.value.title,
// description: data.value.description,
};
e.value.title && (l.title = e.value.title), e.value.description && (l.title = e.value.description), l.type === "array" ? l.items = {
type: "string"
} : l.type === "object" ? l.order = [] : l.type === "any" && (l.type = O), e.value = l;
}, le = () => {
k.value = !0;
}, te = () => {
e.value.properties = e.value.properties || {}, e.value.order = e.value.order || [];
const o = `field_${t.deep}_${G.value++}`;
e.value.properties[o] = {
type: "string"
}, e.value.order.push(o);
}, ae = () => {
const { properties: o, required: l, order: f } = t.parent;
if (delete o[t.fieldName], JSON.stringify(o) === "{}" && delete t.parent.properties, l) {
const v = l.indexOf(t.fieldName);
v >= 0 && l.splice(v, 1), l.length === 0 && delete t.parent.required;
}
f.splice(f.indexOf(t.fieldName), 1), f.length === 0 && delete t.parent.order;
}, oe = (o) => {
e.value = o;
}, ne = () => {
const o = {};
e.value.order.forEach((l, f) => {
o[l] = e.value.properties[l];
}), e.value.properties = o;
};
return (o, l) => {
const f = s("icon-list"), v = s("icon-caret-down"), u = s("icon-caret-right"), b = s("a-input"), E = s("a-button"), _ = s("a-tooltip"), q = s("a-option"), j = s("a-select"), de = s("a-input-number"), ie = s("icon-settings"), se = s("icon-plus"), ue = s("icon-close"), B = s("JsonSchemaEditorRow");
return n(), m(C, null, [
r("div", {
class: "schema-editor-row",
style: w(M.value)
}, [
r("div", xe, [
!t.isRoot && !t.isArrayChild ? (n(), m("div", {
key: 0,
class: "draggable-handle-box",
style: w($.value)
}, [
i(f, { class: "draggable-handle" })
], 4)) : p("", !0),
r("div", {
class: "expand-box",
onClick: l[0] || (l[0] = (a) => Q())
}, [
e.value.items || e.value.properties ? (n(), m("div", _e, [
N.value ? (n(), d(v, { key: 0 })) : (n(), d(u, { key: 1 }))
])) : p("", !0)
]),
t.isRoot ? (n(), d(b, {
key: 1,
class: "col col-field",
"default-value": "根节点",
disabled: "",
style: w(S.value)
}, null, 8, ["style"])) : t.isArrayChild ? (n(), d(b, {
key: 2,
class: "col col-field",
"default-value": "ITEMS",
disabled: "",
style: w(S.value)
}, null, 8, ["style"])) : (n(), d(b, {
key: 3,
class: "col col-field",
"default-value": t.fieldName,
placeholder: "字段名",
disabled: e.value["x-disabled"],
style: w(S.value),
onChange: X
}, null, 8, ["default-value", "disabled", "style"])),
r("div", Ve, [
r("div", Ce, [
i(_, { content: "是否必须" }, {
default: c(() => [
i(E, {
class: L(["btn", { btn_active: T.value }]),
disabled: t.isRoot || t.isArrayChild || e.value["x-disabled"],
onClick: l[1] || (l[1] = (a) => Z())
}, {
default: c(() => l[12] || (l[12] = [
r("svg", {
fill: "currentColor",
viewBox: "0 0 1024 1024",
width: "1em",
height: "1em"
}, [
r("path", { d: "M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z" })
], -1)
])),
_: 1
}, 8, ["class", "disabled"])
]),
_: 1
})
]),
r("div", we, [
i(_, { content: "允许 NULL" }, {
default: c(() => [
i(E, {
class: L(["btn", { btn_active: D.value }]),
disabled: t.isRoot || z.includes(x.value) || e.value["x-disabled"],
onClick: l[2] || (l[2] = (a) => K())
}, {
default: c(() => l[13] || (l[13] = [
me(" N ")
])),
_: 1
}, 8, ["class", "disabled"])
]),
_: 1
})
])
]),
i(j, {
modelValue: x.value,
"onUpdate:modelValue": l[3] || (l[3] = (a) => x.value = a),
class: "col col-type",
disabled: t.isRoot || e.value["x-disabled"],
"trigger-props": { contentClass: "json-schema-editor-select" },
onChange: ee
}, {
default: c(() => [
(n(), m(C, null, A(J, (a) => i(q, {
key: a,
value: a,
label: a
}, null, 8, ["value", "label"])), 64))
]),
_: 1
}, 8, ["modelValue", "disabled"]),
i(b, {
modelValue: e.value.title,
"onUpdate:modelValue": l[4] || (l[4] = (a) => e.value.title = a),
class: "col col-title",
placeholder: "中文名",
disabled: e.value["x-disabled"]
}, null, 8, ["modelValue", "disabled"]),
(n(!0), m(C, null, A(t.custom, (a, y) => (n(), m(C, null, [
a.type === "string" ? (n(), d(b, {
key: 0,
modelValue: e.value[a.name],
"onUpdate:modelValue": (g) => e.value[a.name] = g,
class: "col col-custom",
placeholder: a.title || a.name,
disabled: e.value["x-disabled"]
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "disabled"])) : a.type === "number" ? (n(), d(de, {
key: 1,
modelValue: e.value[a.name],
"onUpdate:modelValue": (g) => e.value[a.name] = g,
class: "col col-custom",
placeholder: a.title || a.name,
disabled: e.value["x-disabled"]
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "disabled"])) : a.type === "boolean" ? (n(), d(j, {
key: 2,
modelValue: e.value[a.name],
"onUpdate:modelValue": (g) => e.value[a.name] = g,
class: "col col-custom col-custom-boolean",
placeholder: a.title || a.name,
disabled: e.value["x-disabled"]
}, {
default: c(() => [
i(q, {
value: !0,
label: "true"
}),
i(q, {
value: !1,
label: "false"
})
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue", "placeholder", "disabled"])) : p("", !0)
], 64))), 256)),
i(b, {
modelValue: e.value.description,
"onUpdate:modelValue": l[5] || (l[5] = (a) => e.value.description = a),
class: "col col-description",
placeholder: "说明",
disabled: e.value["x-disabled"]
}, null, 8, ["modelValue", "disabled"]),
r("div", Ne, [
i(_, { content: "高级设置" }, {
default: c(() => [
e.value["x-disabled"] ? p("", !0) : (n(), d(ie, {
key: 0,
class: "icon",
onClick: l[6] || (l[6] = (a) => le())
}))
]),
_: 1
}),
i(_, { content: "添加子节点" }, {
default: c(() => [
e.value.type === "object" ? (n(), d(se, {
key: 0,
class: "icon",
onClick: l[7] || (l[7] = (a) => te())
})) : p("", !0)
]),
_: 1
}),
i(_, { content: "删除节点" }, {
default: c(() => [
!t.isRoot && !t.isArrayChild && !e.value["x-disabled"] ? (n(), d(ue, {
key: 0,
class: "icon",
onClick: l[8] || (l[8] = (a) => ae())
})) : p("", !0)
]),
_: 1
})
])
]),
fe(r("div", ke, [
e.value.properties && e.value.order ? (n(), d(ye(he), {
key: 0,
ref_key: "VueDraggableRef",
ref: P,
modelValue: e.value.order,
"onUpdate:modelValue": l[9] || (l[9] = (a) => e.value.order = a),
animation: 150,
handle: ".draggable-handle",
onUpdate: ne
}, {
default: c(() => [
(n(!0), m(C, null, A(e.value.properties, (a, y, g) => (n(), m("div", { key: y }, [
!t.isHidden || !e.value.properties[y]["x-hidden"] ? (n(), d(B, {
key: 0,
modelValue: e.value.properties[y],
"onUpdate:modelValue": (U) => e.value.properties[y] = U,
fieldName: String(y),
parent: e.value,
deep: t.deep + 1,
custom: t.custom,
widgets: t.widgets,
isHidden: t.isHidden,
onOnFieldNameChange: (U) => Y(U, y)
}, null, 8, ["modelValue", "onUpdate:modelValue", "fieldName", "parent", "deep", "custom", "widgets", "isHidden", "onOnFieldNameChange"])) : p("", !0)
]))), 128))
]),
_: 1
}, 8, ["modelValue"])) : p("", !0),
e.value.items ? (n(), d(B, {
key: 1,
modelValue: e.value.items,
"onUpdate:modelValue": l[10] || (l[10] = (a) => e.value.items = a),
disabledFieldName: "",
parent: e.value,
deep: t.deep + 1,
isArrayChild: "",
custom: t.custom,
widgets: t.widgets,
isHidden: t.isHidden
}, null, 8, ["modelValue", "parent", "deep", "custom", "widgets", "isHidden"])) : p("", !0)
], 512), [
[be, N.value]
])
], 4),
k.value ? (n(), d(ge, {
key: 0,
show: k.value,
"onUpdate:show": l[11] || (l[11] = (a) => k.value = a),
data: e.value,
widgets: t.widgets,
onConfirm: oe
}, null, 8, ["show", "data", "widgets"])) : p("", !0)
], 64);
};
}
});
export {
Ae as default
};