@tuoyuan/json-schema
Version:
json-schema编辑器及表单组件
695 lines (694 loc) • 32.1 kB
JavaScript
import { defineComponent as re, mergeModels as $, useModel as pe, ref as y, computed as ve, onMounted as fe, resolveComponent as f, openBlock as d, createElementBlock as k, Fragment as S, createVNode as u, withCtx as n, createElementVNode as v, createCommentVNode as i, toDisplayString as z, createTextVNode as L, createBlock as s, renderList as P } from "vue";
import { getTrueType as ce } from "../../utils/utils.js";
const Ve = { class: "json-schema-editor-setting-modal-content" }, be = { class: "switch-box" }, ye = { class: "switch-bar" }, xe = { class: "item" }, ge = { class: "item" }, ke = { class: "item" }, he = { class: "datatype-box" }, we = {
key: 0,
class: "enum-box"
}, Ue = { key: 0 }, Oe = { class: "table-footer" }, _e = {
key: 1,
class: "const-box"
}, Ce = {
key: 5,
class: "form-item-content"
}, Me = {
key: 6,
class: "form-item-content"
}, De = { class: "layout-switch-box" }, Ie = /* @__PURE__ */ re({
__name: "setting-modal",
props: /* @__PURE__ */ $({
data: {
type: Object,
required: !0
},
// 表单组件列表
widgets: {
type: Array,
default: () => []
}
}, {
show: { type: Boolean },
showModifiers: {}
}),
emits: /* @__PURE__ */ $(["confirm", "cancel"], ["update:show"]),
setup(T, { emit: A }) {
const j = pe(T, "show"), E = T, q = A, Z = ["string", "number", "integer"], G = {
string: [
{ field: "default", label: "默认值", placeholder: "默认值" },
{ field: "minLength", label: "最小长度", placeholder: ">=0", min: 0, step: 1, precision: 0 },
{ field: "maxLength", label: "最大长度", placeholder: ">=0", min: 0, step: 1, precision: 0 },
{
field: "format",
label: "format",
placeholder: "format",
options: [
"date",
"time",
"date-time",
"duration",
"email",
"idn-email",
"hostname",
"idn-hostname",
"ipv4",
"ipv6",
"uuid",
"uri",
"uri-reference",
"iri",
"iri-reference",
"uri-template",
"json-pointer",
"relative-json-pointer",
"regex"
]
},
{ field: "pattern", label: "pattern", placeholder: "^[A-Za-z0-9 -_]+", tooltip: "用正则表达式约束字符串" }
// { field: "examples", label: "示例值", placeholder: "示例值" },
// { field: "read_write", label: "行为" },
],
number: [
{ field: "default_number", label: "默认值", placeholder: "默认值" },
{ field: "minimum", label: "最小值", placeholder: "最小值" },
{ field: "maximum", label: "最大值", placeholder: "最大值" },
{ field: "multipleOf", label: "倍数", placeholder: ">0" }
// { field: "examples", label: "示例值", placeholder: "示例值" },
// { field: "read_write", label: "行为" },
],
integer: [
{ field: "default_number", label: "默认值", placeholder: "默认值" },
{ field: "minimum", label: "最小值", placeholder: "最小值", step: 1, precision: 0 },
{ field: "maximum", label: "最大值", placeholder: "最大值", step: 1, precision: 0 },
{ field: "multipleOf", label: "倍数", placeholder: ">0" }
// { field: "examples", label: "示例值", placeholder: "示例值" },
// { field: "read_write", label: "行为" },
],
boolean: [{ field: "default_boolean", label: "默认值", placeholder: "默认值" }],
array: [
{ field: "minItems", label: "最小元素个数", placeholder: ">=0" },
{ field: "maxItems", label: "最大元素个数", placeholder: ">=0" },
{ field: "uniqueItems", label: "元素唯一" }
// { field: "read_write", label: "行为" },
],
object: [
{ field: "minProperties", label: "最小属性数量", placeholder: ">=0" },
{ field: "maxProperties", label: "最大属性数量", placeholder: ">=0" }
// { field: "read_write", label: "行为" },
],
null: [],
any: []
}, a = y({}), x = y(""), O = y(!1), _ = y(!1), N = y("read-write"), c = y({}), m = y({}), V = y({}), I = y(!1), r = y({}), C = y();
let B = "";
const H = ve(() => E.widgets.filter((t) => t.dataType ? t.dataType.includes(x.value) : !0));
fe(() => {
a.value = JSON.parse(JSON.stringify(E.data)), x.value = ce(a.value.type), K();
});
const K = () => {
a.value.enum ? (Q(), O.value = !0) : a.value.const && (_.value = !0), a.value.readOnly ? N.value = "read" : a.value.writeOnly && (N.value = "write"), a.value.exclusiveMinimum != null && (a.value.exclusiveMinimum = !0), a.value.exclusiveMaximum != null && (a.value.exclusiveMaximum = !0), a.value.widget && (B = a.value.widget.type, c.value = a.value.widget), a.value.layout && (m.value = a.value.layout), a.value.mock && (V.value = a.value.mock);
}, Q = () => {
a.value.enumDescriptions || (a.value.enumDescriptions = {});
}, X = (t) => {
t ? (a.value.enum = [], a.value.enumDescriptions = {}, _.value = !1, delete a.value.const) : (delete a.value.enum, delete a.value.enumDescriptions);
}, Y = (t) => {
t ? (O.value = !1, delete a.value.enum, delete a.value.enumDescriptions) : delete a.value.const;
}, ee = (t) => {
t === "read-write" ? (delete a.value.readOnly, delete a.value.writeOnly) : t === "read" ? (a.value.readOnly = !0, delete a.value.writeOnly) : t === "write" && (a.value.writeOnly = !0, delete a.value.readOnly);
}, le = () => {
C.value = null, r.value = {}, I.value = !0;
}, ae = (t, e) => {
C.value = t, r.value = {
value: t,
label: a.value.enumDescriptions[t]
}, I.value = !0;
}, te = (t, e) => {
a.value.enum.splice(e, 1), delete a.value.enumDescriptions[t];
}, ue = () => {
if (r.value.value)
if (C.value) {
const t = a.value.enum.indexOf(C.value);
a.value.enum.splice(t, 1, r.value.value), delete a.value.enumDescriptions[C.value], a.value.enumDescriptions[r.value.value] = r.value.label;
} else
a.value.enum.push(r.value.value), a.value.enumDescriptions[r.value.value] = r.value.label;
}, oe = () => {
var e;
const t = JSON.parse(JSON.stringify(a.value));
if (t.default === "" && delete t.default, t.exclusiveMinimum && typeof t.minimum == "number" ? t.exclusiveMinimum = t.minimum : delete t.exclusiveMinimum, t.exclusiveMaximum && typeof t.maximum == "number" ? t.exclusiveMaximum = t.maximum : delete t.exclusiveMaximum, t.format || delete t.format, t.pattern || delete t.pattern, ((e = t.examples) == null ? void 0 : e.length) === 0 && delete t.examples, t.uniqueItems || delete t.uniqueItems, t.deprecated || delete t.deprecated, c.value.type || delete c.value.type, c.value.type || delete c.value.attrs, JSON.stringify(c.value) == "{}")
delete t.widget;
else {
const b = E.widgets.find((M) => M.type === c.value.type), w = b == null ? void 0 : b.attrs;
c.value.type != B && (delete c.value.attrs, w && (c.value.attrs = w)), t.widget = JSON.parse(JSON.stringify(c.value));
}
m.value.span || delete m.value.span, m.value.offset || delete m.value.offset, m.value.start || delete m.value.start, m.value.end || delete m.value.end, JSON.stringify(m.value) == "{}" ? delete t.layout : t.layout = JSON.parse(JSON.stringify(m.value)), V.value.mock || delete V.value.mock, V.value.show || delete V.value.show, JSON.stringify(V.value) == "{}" ? delete t.mock : t.mock = JSON.parse(JSON.stringify(V.value)), q("confirm", t);
}, de = () => {
q("cancel");
};
return (t, e) => {
const b = f("a-switch"), w = f("a-table-column"), M = f("a-button"), ne = f("a-table"), U = f("a-input"), p = f("a-input-number"), ie = f("a-divider"), h = f("a-option"), J = f("a-select"), W = f("a-checkbox"), F = f("a-tooltip"), se = f("a-input-tag"), g = f("a-form-item"), D = f("a-form"), R = f("a-modal");
return d(), k(S, null, [
u(R, {
visible: j.value,
"onUpdate:visible": e[33] || (e[33] = (l) => j.value = l),
title: "高级设置",
width: "800px",
"body-style": { "max-height": "80vh", padding: "18px" },
"ok-text": "保存",
onOk: oe,
onCancel: de
}, {
default: n(() => [
v("div", Ve, [
e[45] || (e[45] = v("div", { class: "form-title" }, "基础属性", -1)),
v("div", be, [
v("div", ye, [
Z.includes(x.value) ? (d(), k(S, { key: 0 }, [
v("div", xe, [
e[39] || (e[39] = v("div", { class: "label" }, "枚举", -1)),
u(b, {
modelValue: O.value,
"onUpdate:modelValue": e[0] || (e[0] = (l) => O.value = l),
onChange: X
}, null, 8, ["modelValue"])
]),
v("div", ge, [
e[40] || (e[40] = v("div", { class: "label" }, "常量", -1)),
u(b, {
modelValue: _.value,
"onUpdate:modelValue": e[1] || (e[1] = (l) => _.value = l),
onChange: Y
}, null, 8, ["modelValue"])
])
], 64)) : i("", !0),
v("div", ke, [
e[41] || (e[41] = v("div", { class: "label" }, "废弃", -1)),
u(b, {
modelValue: a.value.deprecated,
"onUpdate:modelValue": e[2] || (e[2] = (l) => a.value.deprecated = l)
}, null, 8, ["modelValue"])
])
]),
v("div", he, [
O.value ? (d(), k("div", we, [
u(ne, {
data: a.value.enum,
bordered: { cell: !0 },
size: "small",
pagination: { "hide-on-single-page": !1 }
}, {
columns: n(() => [
u(w, { title: "枚举值" }, {
cell: n(({ record: l }) => [
v("span", null, z(l), 1)
]),
_: 1
}),
u(w, { title: "显示值" }, {
cell: n(({ record: l }) => [
a.value.enumDescriptions ? (d(), k("span", Ue, z(a.value.enumDescriptions[l]), 1)) : i("", !0)
]),
_: 1
}),
u(w, {
title: "操作",
width: 120
}, {
cell: n(({ record: l, rowIndex: o }) => [
u(M, {
type: "text",
onClick: (me) => ae(l)
}, {
default: n(() => e[42] || (e[42] = [
L("编辑")
])),
_: 2
}, 1032, ["onClick"]),
u(M, {
type: "text",
status: "danger",
onClick: (me) => te(l, o)
}, {
default: n(() => e[43] || (e[43] = [
L("删除")
])),
_: 2
}, 1032, ["onClick"])
]),
_: 1
})
]),
footer: n(() => [
v("div", Oe, [
u(M, {
type: "text",
onClick: e[3] || (e[3] = (l) => le())
}, {
default: n(() => e[44] || (e[44] = [
L("新增")
])),
_: 1
})
])
]),
_: 1
}, 8, ["data"])
])) : i("", !0),
_.value ? (d(), k("div", _e, [
x.value === "string" ? (d(), s(U, {
key: 0,
modelValue: a.value.const,
"onUpdate:modelValue": e[4] || (e[4] = (l) => a.value.const = l),
placeholder: "常量值"
}, null, 8, ["modelValue"])) : i("", !0),
x.value === "number" ? (d(), s(p, {
key: 1,
modelValue: a.value.const,
"onUpdate:modelValue": e[5] || (e[5] = (l) => a.value.const = l),
mode: "button",
placeholder: "常量值"
}, null, 8, ["modelValue"])) : i("", !0),
x.value === "integer" ? (d(), s(p, {
key: 2,
modelValue: a.value.const,
"onUpdate:modelValue": e[6] || (e[6] = (l) => a.value.const = l),
mode: "button",
placeholder: "常量值",
step: 1,
precision: 0
}, null, 8, ["modelValue"])) : i("", !0)
])) : i("", !0)
])
]),
u(ie, { margin: 12 }),
u(D, {
model: a.value,
layout: "vertical"
}, {
default: n(() => [
(d(!0), k(S, null, P(G[x.value], (l) => (d(), s(g, {
key: l.field,
label: l.label,
field: l.field,
tooltip: l.tooltip
}, {
default: n(() => [
l.field === "default" ? (d(), s(U, {
key: 0,
modelValue: a.value.default,
"onUpdate:modelValue": e[7] || (e[7] = (o) => a.value.default = o),
placeholder: l.placeholder
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "default_number" ? (d(), s(p, {
key: 1,
modelValue: a.value.default,
"onUpdate:modelValue": e[8] || (e[8] = (o) => a.value.default = o),
mode: "button",
placeholder: l.placeholder
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "default_boolean" ? (d(), s(J, {
key: 2,
modelValue: a.value.default,
"onUpdate:modelValue": e[9] || (e[9] = (o) => a.value.default = o),
placeholder: l.placeholder,
"allow-clear": ""
}, {
default: n(() => [
u(h, {
label: "true",
value: !0
}),
u(h, {
label: "false",
value: !1
})
]),
_: 2
}, 1032, ["modelValue", "placeholder"])) : i("", !0),
l.field === "minLength" ? (d(), s(p, {
key: 3,
modelValue: a.value.minLength,
"onUpdate:modelValue": e[10] || (e[10] = (o) => a.value.minLength = o),
mode: "button",
placeholder: l.placeholder,
min: l.min,
step: l.step,
precision: l.precision
}, null, 8, ["modelValue", "placeholder", "min", "step", "precision"])) : i("", !0),
l.field === "maxLength" ? (d(), s(p, {
key: 4,
modelValue: a.value.maxLength,
"onUpdate:modelValue": e[11] || (e[11] = (o) => a.value.maxLength = o),
mode: "button",
placeholder: l.placeholder,
min: l.min,
step: l.step,
precision: l.precision
}, null, 8, ["modelValue", "placeholder", "min", "step", "precision"])) : i("", !0),
l.field === "minimum" ? (d(), k("div", Ce, [
u(p, {
modelValue: a.value.minimum,
"onUpdate:modelValue": e[12] || (e[12] = (o) => a.value.minimum = o),
mode: "button",
placeholder: l.placeholder,
step: l.step,
precision: l.precision
}, null, 8, ["modelValue", "placeholder", "step", "precision"]),
u(F, { content: "不可等于最小值" }, {
default: n(() => [
u(W, {
modelValue: a.value.exclusiveMinimum,
"onUpdate:modelValue": e[13] || (e[13] = (o) => a.value.exclusiveMinimum = o)
}, null, 8, ["modelValue"])
]),
_: 1
})
])) : i("", !0),
l.field === "maximum" ? (d(), k("div", Me, [
u(p, {
modelValue: a.value.maximum,
"onUpdate:modelValue": e[14] || (e[14] = (o) => a.value.maximum = o),
mode: "button",
placeholder: l.placeholder,
step: l.step,
precision: l.precision
}, null, 8, ["modelValue", "placeholder", "step", "precision"]),
u(F, { content: "不可等于最大值" }, {
default: n(() => [
u(W, {
modelValue: a.value.exclusiveMaximum,
"onUpdate:modelValue": e[15] || (e[15] = (o) => a.value.exclusiveMaximum = o)
}, null, 8, ["modelValue"])
]),
_: 1
})
])) : i("", !0),
l.field === "minItems" ? (d(), s(p, {
key: 7,
modelValue: a.value.minItems,
"onUpdate:modelValue": e[16] || (e[16] = (o) => a.value.minItems = o),
mode: "button",
placeholder: l.placeholder,
min: 0,
step: 1,
precision: 0
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "maxItems" ? (d(), s(p, {
key: 8,
modelValue: a.value.maxItems,
"onUpdate:modelValue": e[17] || (e[17] = (o) => a.value.maxItems = o),
mode: "button",
placeholder: l.placeholder,
min: 0,
step: 1,
precision: 0
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "minProperties" ? (d(), s(p, {
key: 9,
modelValue: a.value.minProperties,
"onUpdate:modelValue": e[18] || (e[18] = (o) => a.value.minProperties = o),
mode: "button",
placeholder: l.placeholder,
min: 0,
step: 1,
precision: 0
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "maxProperties" ? (d(), s(p, {
key: 10,
modelValue: a.value.maxProperties,
"onUpdate:modelValue": e[19] || (e[19] = (o) => a.value.maxProperties = o),
mode: "button",
placeholder: l.placeholder,
min: 0,
step: 1,
precision: 0
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "multipleOf" ? (d(), s(p, {
key: 11,
modelValue: a.value.multipleOf,
"onUpdate:modelValue": e[20] || (e[20] = (o) => a.value.multipleOf = o),
mode: "button",
placeholder: l.placeholder,
min: 0
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "format" ? (d(), s(J, {
key: 12,
modelValue: a.value.format,
"onUpdate:modelValue": e[21] || (e[21] = (o) => a.value.format = o),
placeholder: "format",
"allow-clear": "",
"trigger-props": { contentClass: "json-schema-editor-select" }
}, {
default: n(() => [
(d(!0), k(S, null, P(l.options, (o) => (d(), s(h, {
key: o,
label: o,
value: o
}, null, 8, ["label", "value"]))), 128))
]),
_: 2
}, 1032, ["modelValue"])) : i("", !0),
l.field === "pattern" ? (d(), s(U, {
key: 13,
modelValue: a.value.pattern,
"onUpdate:modelValue": e[22] || (e[22] = (o) => a.value.pattern = o),
placeholder: l.placeholder
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "examples" ? (d(), s(se, {
key: 14,
modelValue: a.value.examples,
"onUpdate:modelValue": e[23] || (e[23] = (o) => a.value.examples = o),
placeholder: l.placeholder
}, null, 8, ["modelValue", "placeholder"])) : i("", !0),
l.field === "uniqueItems" ? (d(), s(b, {
key: 15,
modelValue: a.value.uniqueItems,
"onUpdate:modelValue": e[24] || (e[24] = (o) => a.value.uniqueItems = o)
}, null, 8, ["modelValue"])) : i("", !0),
l.field === "read_write" ? (d(), s(J, {
key: 16,
modelValue: N.value,
"onUpdate:modelValue": e[25] || (e[25] = (o) => N.value = o),
onChange: ee
}, {
default: n(() => [
u(h, {
value: "read-write",
label: "Read/Write"
}),
u(h, {
value: "read",
label: "Read Only"
}),
u(h, {
value: "write",
label: "Write Only"
})
]),
_: 1
}, 8, ["modelValue"])) : i("", !0)
]),
_: 2
}, 1032, ["label", "field", "tooltip"]))), 128))
]),
_: 1
}, 8, ["model"]),
e[46] || (e[46] = v("div", { class: "form-title" }, "拓展属性", -1)),
u(D, {
model: c.value,
layout: "vertical"
}, {
default: n(() => [
u(g, {
label: "表单组件",
field: "type"
}, {
default: n(() => [
u(J, {
modelValue: c.value.type,
"onUpdate:modelValue": e[26] || (e[26] = (l) => c.value.type = l),
placeholder: "表单组件",
"allow-clear": "",
"trigger-props": { contentClass: "json-schema-editor-select" }
}, {
default: n(() => [
(d(!0), k(S, null, P(H.value, (l) => (d(), s(h, {
key: l.type,
label: l.type,
value: l.type
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}, 8, ["model"]),
u(D, {
model: m.value,
layout: "vertical"
}, {
default: n(() => [
u(g, {
label: "格栅列数",
field: "span"
}, {
default: n(() => [
u(p, {
modelValue: m.value.span,
"onUpdate:modelValue": e[27] || (e[27] = (l) => m.value.span = l),
mode: "button",
placeholder: ">=0",
min: 0
}, null, 8, ["modelValue"])
]),
_: 1
}),
u(g, {
label: "格栅间隔数",
field: "offset"
}, {
default: n(() => [
u(p, {
modelValue: m.value.offset,
"onUpdate:modelValue": e[28] || (e[28] = (l) => m.value.offset = l),
mode: "button",
placeholder: ">=0",
min: 0
}, null, 8, ["modelValue"])
]),
_: 1
}),
v("div", De, [
u(g, {
label: "另起一行",
field: "start"
}, {
default: n(() => [
u(b, {
modelValue: m.value.start,
"onUpdate:modelValue": e[29] || (e[29] = (l) => m.value.start = l)
}, null, 8, ["modelValue"])
]),
_: 1
}),
u(g, {
label: "结束此行",
field: "end"
}, {
default: n(() => [
u(b, {
modelValue: m.value.end,
"onUpdate:modelValue": e[30] || (e[30] = (l) => m.value.end = l)
}, null, 8, ["modelValue"])
]),
_: 1
})
])
]),
_: 1
}, 8, ["model"]),
u(D, {
model: V.value,
layout: "vertical"
}, {
default: n(() => [
u(g, {
label: "Mock",
field: "mock"
}, {
default: n(() => [
u(U, {
modelValue: V.value.mock,
"onUpdate:modelValue": e[31] || (e[31] = (l) => V.value.mock = l),
placeholder: "Mock"
}, null, 8, ["modelValue"])
]),
_: 1
}),
u(g, {
label: "是否显示",
field: "show"
}, {
default: n(() => [
u(b, {
modelValue: V.value.show,
"onUpdate:modelValue": e[32] || (e[32] = (l) => V.value.show = l)
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}, 8, ["model"])
])
]),
_: 1
}, 8, ["visible"]),
u(R, {
visible: I.value,
"onUpdate:visible": e[38] || (e[38] = (l) => I.value = l),
title: "枚举",
onOk: ue
}, {
default: n(() => [
v("div", null, [
u(D, {
model: r.value,
"auto-label-width": ""
}, {
default: n(() => [
u(g, {
label: "枚举值",
field: "value"
}, {
default: n(() => [
x.value === "string" ? (d(), s(U, {
key: 0,
modelValue: r.value.value,
"onUpdate:modelValue": e[34] || (e[34] = (l) => r.value.value = l),
placeholder: "枚举值"
}, null, 8, ["modelValue"])) : i("", !0),
x.value === "number" ? (d(), s(p, {
key: 1,
modelValue: r.value.value,
"onUpdate:modelValue": e[35] || (e[35] = (l) => r.value.value = l),
mode: "button",
placeholder: "枚举值"
}, null, 8, ["modelValue"])) : i("", !0),
x.value === "integer" ? (d(), s(p, {
key: 2,
modelValue: r.value.value,
"onUpdate:modelValue": e[36] || (e[36] = (l) => r.value.value = l),
mode: "button",
placeholder: "枚举值",
step: 1,
precision: 0
}, null, 8, ["modelValue"])) : i("", !0)
]),
_: 1
}),
u(g, {
label: "显示值",
field: "label"
}, {
default: n(() => [
u(U, {
modelValue: r.value.label,
"onUpdate:modelValue": e[37] || (e[37] = (l) => r.value.label = l),
placeholder: "显示值"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}, 8, ["model"])
])
]),
_: 1
}, 8, ["visible"])
], 64);
};
}
});
export {
Ie as default
};