@rucire/jxson-vue
Version:
A powerful JSON editor component for Vue 3 by Rucire
1,306 lines • 58.2 kB
JavaScript
import { h as re, ref as E, computed as pe, defineComponent as Q, watch as de, createElementBlock as t, openBlock as l, createElementVNode as c, normalizeClass as v, createBlock as T, createCommentVNode as m, resolveDynamicComponent as Y, Fragment as L, withDirectives as M, vModelText as H, toDisplayString as I, createVNode as R, unref as r, onMounted as De, onUnmounted as Ve, withModifiers as _, createTextVNode as ee, renderList as W, withKeys as U, vModelSelect as Ee, toRef as Pe, reactive as ke, vShow as qe, nextTick as Ce } from "vue";
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Re = (u) => u.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
var ae = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": 2,
"stroke-linecap": "round",
"stroke-linejoin": "round"
};
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const He = ({ size: u, strokeWidth: h = 2, absoluteStrokeWidth: n, color: d, iconNode: b, name: f, class: a, ...k }, { slots: A }) => re(
"svg",
{
...ae,
width: u || ae.width,
height: u || ae.height,
stroke: d || ae.stroke,
"stroke-width": n ? Number(h) * 24 / Number(u) : h,
class: ["lucide", `lucide-${Re(f ?? "icon")}`],
...k
},
[...b.map((F) => re(...F)), ...A.default ? [A.default()] : []]
);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const q = (u, h) => (n, { slots: d }) => re(
He,
{
...n,
iconNode: h,
name: u
},
d
);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ne = q("ALargeSmallIcon", [
["path", { d: "M21 14h-5", key: "1vh23k" }],
["path", { d: "M16 16v-3.5a2.5 2.5 0 0 1 5 0V16", key: "1wh10o" }],
["path", { d: "M4.5 13h6", key: "dfilno" }],
["path", { d: "m3 16 4.5-9 4.5 9", key: "2dxa0e" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const $e = q("BinaryIcon", [
["rect", { x: "14", y: "14", width: "4", height: "6", rx: "2", key: "p02svl" }],
["rect", { x: "6", y: "4", width: "4", height: "6", rx: "2", key: "xm4xkj" }],
["path", { d: "M6 20h4", key: "1i6q5t" }],
["path", { d: "M14 10h4", key: "ru81e7" }],
["path", { d: "M6 14h2v6", key: "16z9wg" }],
["path", { d: "M14 4h2v6", key: "1idq9u" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ae = q("BracesIcon", [
[
"path",
{ d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
],
[
"path",
{
d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",
key: "e1hn23"
}
]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Te = q("BracketsIcon", [
["path", { d: "M16 3h3v18h-3", key: "1yor1f" }],
["path", { d: "M8 21H5V3h3", key: "1qrfwo" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const se = q("CheckIcon", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ie = q("HashIcon", [
["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Je = q("MinusIcon", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ie = q("PencilIcon", [
[
"path",
{
d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
key: "1a8usu"
}
],
["path", { d: "m15 5 4 4", key: "1mk7zo" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Fe = q("PlusIcon", [
["path", { d: "M5 12h14", key: "1ays0h" }],
["path", { d: "M12 5v14", key: "s699le" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ze = q("Trash2Icon", [
["path", { d: "M3 6h18", key: "d0wm0j" }],
["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Le = q("TriangleAlertIcon", [
[
"path",
{
d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
key: "wmoenq"
}
],
["path", { d: "M12 9v4", key: "juzpu7" }],
["path", { d: "M12 17h.01", key: "p32p05" }]
]);
/**
* @license lucide-vue-next v0.468.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const te = q("XIcon", [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
]), ye = [
{ label: "Object", value: "object" },
{ label: "String", value: "string" },
{ label: "Number", value: "number" },
{ label: "Array", value: "array" },
{ label: "Boolean", value: "boolean" }
], Ye = [
{ label: "String", value: "string" },
{ label: "Number", value: "number" },
{ label: "Object", value: "object" }
], je = {
string: {
backgroundClass: "bg-green-500",
labelClass: "text-green-700",
icon: "ALargeSmall"
},
number: {
backgroundClass: "bg-blue-500",
labelClass: "text-blue-700",
icon: "Hash"
},
array: {
backgroundClass: "bg-orange-500",
labelClass: "text-orange-700",
icon: "Brackets"
},
boolean: {
backgroundClass: "bg-purple-500",
labelClass: "text-purple-700",
icon: "Binary"
},
object: {
backgroundClass: "bg-yellow-500",
labelClass: "text-yellow-700",
icon: "Folder"
}
}, Be = {
string: {
backgroundClass: "bg-green-100",
textClass: "text-green-800"
},
number: {
backgroundClass: "bg-blue-100",
textClass: "text-blue-800"
},
array: {
backgroundClass: "bg-orange-100",
textClass: "text-orange-800"
},
boolean: {
backgroundClass: "bg-purple-100",
textClass: "text-purple-800"
},
object: {
backgroundClass: "bg-yellow-100",
textClass: "text-yellow-800"
}
};
function Me(u) {
const h = [];
return (!u.name || u.name.trim() === "") && h.push({
field: "name",
message: "Field name is required",
type: "required"
}), u.name && !/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(u.name) && h.push({
field: "name",
message: "Field name must be a valid identifier",
type: "invalid_type"
}), u.value !== void 0 && u.value !== null && (Ze(u.value, u.type) || h.push({
field: "value",
message: `Value does not match type ${u.type}`,
type: "invalid_type"
})), {
isValid: h.length === 0,
errors: h
};
}
function fa(u) {
const h = [], n = /* @__PURE__ */ new Set();
return u.forEach((d, b) => {
const f = Me(d);
h.push(...f.errors.map((a) => ({
...a,
field: `fields[${b}].${a.field}`
}))), n.has(d.name) && h.push({
field: `fields[${b}].name`,
message: `Duplicate field name: ${d.name}`,
type: "duplicate_name"
}), n.add(d.name);
}), {
isValid: h.length === 0,
errors: h
};
}
function Ze(u, h) {
switch (h) {
case "string":
return typeof u == "string";
case "number":
return typeof u == "number" && !isNaN(u);
case "boolean":
return typeof u == "boolean";
case "array":
return Array.isArray(u);
case "object":
return Array.isArray(u);
// Objects are represented as Field arrays
default:
return !1;
}
}
function le(u) {
switch (u) {
case "string":
return "";
case "number":
return 0;
case "boolean":
return !1;
case "array":
case "object":
return [];
default:
return "";
}
}
function Ge(u, h) {
const n = E(!0), d = E(!1), b = E(!1), f = E(!1), a = pe(() => Array.isArray(u.value.value) ? u.value.value.length : 0);
function k(i) {
var p;
return ((p = je[i]) == null ? void 0 : p.backgroundClass) || "bg-gray-500";
}
function A(i) {
var p;
return ((p = je[i]) == null ? void 0 : p.labelClass) || "text-gray-700";
}
function F(i) {
const p = ye.find((K) => K.value === i);
return p ? p.label : "String";
}
const j = (i, p) => {
p.type = i, p.arrayType = i === "array" ? "string" : p.arrayType, p.value = le(i);
}, z = (i, p) => {
p.arrayType = i, p.value = le("array");
};
function o(i, p) {
if (u.value.value || (u.value.value = []), Array.isArray(u.value.value)) {
let K;
p === null ? K = u.value.value.filter((Z, G) => G !== i) : K = u.value.value.map((Z, G) => G === i ? p : Z);
const O = {
...u.value,
value: K
};
h("update:field", O);
} else
h("update:field", u.value);
}
function g() {
h("update:field", null);
}
return {
open: n,
showAddDropdown: d,
adding: b,
editing: f,
fieldsCount: a,
fieldBackgroundClass: k,
fieldLabelClass: A,
fieldTypeLabel: F,
setFieldType: j,
setArrayType: z,
updateNestedField: o,
deleteField: g,
getDefaultValue: le
};
}
const Xe = { class: "group mb-1 flex flex-wrap sm:flex-nowrap items-center rounded bg-white px-2 py-1 gap-1" }, We = { class: "relative mr-2 h-[16px] w-[16px] flex-shrink-0" }, Qe = { class: "flex flex-col sm:flex-row sm:items-center flex-1 gap-2 sm:gap-0" }, xe = ["placeholder", "disabled"], _e = ["placeholder", "disabled"], el = { class: "flex gap-1 flex-shrink-0" }, ll = ["disabled"], al = ["disabled"], dl = { class: "flex flex-wrap sm:flex-nowrap items-center flex-1 gap-1" }, sl = {
key: 0,
class: "text-xs italic text-gray-400 flex-shrink-0"
}, tl = { class: "border border-gray-100 bg-[#f7f8fa] px-2 py-1 text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none" }, ol = { class: "flex items-center gap-1 flex-shrink-0" }, rl = ["disabled"], nl = ["disabled"], il = /* @__PURE__ */ Q({
__name: "ArrayItem",
props: {
value: {},
index: {},
arrayType: {},
editing: { type: Boolean },
fieldLabelClass: { type: Function },
fieldTypeLabel: { type: Function },
fieldBackgroundClass: { type: Function },
showTypeLabel: { type: Boolean },
showItemNumber: { type: Boolean },
itemNumberFormat: { type: Function },
placeholder: {},
disabled: { type: Boolean },
readOnly: { type: Boolean }
},
emits: ["update:value", "delete", "edit", "save", "cancel"],
setup(u, { emit: h }) {
const n = u, d = h, b = E(n.value);
de(
() => n.value,
(a) => {
b.value = a;
}
);
const f = (a) => {
switch (a) {
case "string":
return ne;
case "number":
return ie;
default:
return null;
}
};
return (a, k) => (l(), t("div", Xe, [
c("div", We, [
!a.readOnly && !a.disabled ? (l(), t("div", {
key: 0,
class: v([
"absolute inset-0 rounded p-[2px] text-white",
a.fieldBackgroundClass(a.arrayType)
])
}, [
f(a.arrayType) ? (l(), T(Y(f(a.arrayType)), {
key: 0,
size: 12
})) : m("", !0)
], 2)) : (l(), t("div", {
key: 1,
class: v(["absolute inset-0 rounded p-[2px] text-white", a.fieldBackgroundClass(a.arrayType)])
}, [
f(a.arrayType) ? (l(), T(Y(f(a.arrayType)), {
key: 0,
size: 12
})) : m("", !0)
], 2))
]),
a.editing && !a.readOnly ? (l(), t(L, { key: 0 }, [
c("div", Qe, [
a.arrayType === "number" ? M((l(), t("input", {
key: 0,
type: "number",
"onUpdate:modelValue": k[0] || (k[0] = (A) => b.value = A),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] sm:mr-2 px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": a.disabled }]),
placeholder: a.placeholder,
disabled: a.disabled
}, null, 10, xe)), [
[
H,
b.value,
void 0,
{ number: !0 }
]
]) : a.arrayType === "string" ? M((l(), t("input", {
key: 1,
type: "text",
"onUpdate:modelValue": k[1] || (k[1] = (A) => b.value = A),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] sm:mr-2 px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": a.disabled }]),
placeholder: a.placeholder,
disabled: a.disabled
}, null, 10, _e)), [
[H, b.value]
]) : m("", !0),
a.showTypeLabel ? (l(), t("div", {
key: 2,
class: v([a.fieldLabelClass(a.arrayType), "sm:mr-2 text-xs"])
}, " (" + I(a.fieldTypeLabel(a.arrayType)) + ") ", 3)) : m("", !0)
]),
c("div", el, [
c("button", {
onClick: k[2] || (k[2] = (A) => d("save", b.value)),
class: v(["p-1 text-base text-green-500", { "cursor-not-allowed": a.disabled, "hover:text-green-700": !a.disabled }]),
disabled: a.disabled
}, [
R(r(se), { size: 12 })
], 10, ll),
c("button", {
onClick: k[3] || (k[3] = (A) => d("cancel")),
class: v(["p-1 text-base text-red-500", { "cursor-not-allowed": a.disabled, "hover:text-red-700": !a.disabled }]),
disabled: a.disabled
}, [
R(r(te), { size: 12 })
], 10, al)
])
], 64)) : (l(), t(L, { key: 1 }, [
c("div", dl, [
a.showItemNumber ? (l(), t("span", sl, I(a.itemNumberFormat ? a.itemNumberFormat(a.index) : `Item ${a.index + 1}:`), 1)) : m("", !0),
c("span", tl, I(a.value), 1)
]),
c("div", ol, [
a.readOnly ? m("", !0) : (l(), t("button", {
key: 0,
onClick: k[4] || (k[4] = (A) => d("edit")),
class: v(["p-1 text-gray-300", { "cursor-not-allowed": a.disabled, "hover:text-blue-400": !a.disabled }]),
disabled: a.disabled
}, [
R(r(Ie), { size: 12 })
], 10, rl)),
a.readOnly ? m("", !0) : (l(), t("button", {
key: 1,
onClick: k[5] || (k[5] = (A) => d("delete")),
class: v(["p-1 text-base text-gray-300", { "cursor-not-allowed": a.disabled, "hover:text-red-400": !a.disabled }]),
disabled: a.disabled
}, [
R(r(ze), { size: 12 })
], 10, nl))
])
], 64))
]));
}
});
function ul(u, h) {
const n = (d) => {
u.value && !u.value.contains(d.target) && h();
};
De(() => {
document.addEventListener("click", n);
}), Ve(() => {
document.removeEventListener("click", n);
});
}
const pl = ["disabled"], yl = {
key: 0,
class: "absolute z-10 mt-1 w-full sm:w-32 rounded border border-gray-200 bg-white shadow-lg"
}, fl = ["onClick"], Oe = /* @__PURE__ */ Q({
__name: "ArrayTypeSelector",
props: {
modelValue: {},
fieldLabelClass: { type: Function },
disabled: { type: Boolean }
},
emits: ["update:modelValue"],
setup(u, { emit: h }) {
const n = h, d = E(!1), b = E();
ul(b, () => {
d.value = !1;
});
const f = () => {
d.value = !d.value;
}, a = (k) => {
n("update:modelValue", k), d.value = !1;
};
return (k, A) => (l(), t("div", {
class: "relative",
ref_key: "dropdownRef",
ref: b
}, [
c("button", {
onClick: _(f, ["stop"]),
class: v([[k.fieldLabelClass(k.modelValue), { "cursor-not-allowed": k.disabled }], "flex items-center rounded-full px-2 py-1 text-xs font-medium shadow-sm w-full sm:w-auto justify-center sm:justify-start"]),
disabled: k.disabled
}, [
ee(I(k.modelValue === "number" ? "Number" : k.modelValue === "object" ? "Object" : "String") + " ", 1),
A[0] || (A[0] = c("svg", {
class: "ml-1 h-3 w-3 flex-shrink-0",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24"
}, [
c("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M19 9l-7 7-7-7"
})
], -1))
], 10, pl),
d.value ? (l(), t("div", yl, [
(l(!0), t(L, null, W(r(Ye), (F) => (l(), t("div", {
key: F.value,
onClick: (j) => a(F.value),
class: v([k.fieldLabelClass(F.value), "m-1 flex cursor-pointer items-center rounded px-2 py-1 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"])
}, [
c("span", null, I(F.label), 1)
], 10, fl))), 128))
])) : m("", !0)
], 512));
}
}), bl = { class: "group mb-1 flex flex-wrap sm:flex-nowrap items-center rounded bg-white px-2 py-1 gap-1" }, ml = {
key: 0,
class: "relative mr-2 h-[16px] w-[16px] flex-shrink-0"
}, cl = { class: "flex flex-col sm:flex-row sm:items-center flex-1 gap-2 sm:gap-0" }, vl = ["disabled"], wl = ["onKeydown", "disabled", "aria-expanded"], gl = {
key: 0,
class: "absolute z-10 mt-1 w-full sm:w-32 rounded border border-gray-200 bg-white shadow-lg",
role: "listbox",
"aria-label": "Field type options"
}, hl = ["onClick", "onKeydown", "tabindex", "aria-selected"], kl = {
key: 0,
class: "w-full sm:w-auto"
}, Cl = ["disabled"], $l = ["disabled"], Al = ["disabled"], Tl = { class: "flex gap-1 ml-auto" }, Fl = ["disabled"], jl = ["disabled"], Ne = /* @__PURE__ */ Q({
__name: "ObjectFieldAdder",
props: {
adding: { type: Boolean },
fieldTypeLabel: { type: Function },
disabled: { type: Boolean },
field: {},
hasDuplicateAttempt: { type: Boolean },
duplicateFieldName: {}
},
emits: ["add", "cancel", "update:field"],
setup(u, { emit: h }) {
const n = u, d = h, b = E(null), f = E(!1), a = () => {
f.value = !f.value;
}, k = (o) => {
const g = { ...n.field, type: o };
switch (o) {
case "string":
g.value = "";
break;
case "number":
g.value = 0;
break;
case "boolean":
g.value = !1;
break;
case "array":
g.value = [], g.arrayType = "string";
break;
case "object":
g.value = [];
break;
default:
g.value = "";
}
d("update:field", g), f.value = !1;
}, A = () => {
n.field.name && d("add", n.field);
}, F = () => {
d("cancel");
}, j = (o) => {
b.value && !b.value.contains(o.target) && (f.value = !1);
}, z = (o) => `${Be[o].backgroundClass} ${Be[o].textClass}`;
return De(() => {
document.addEventListener("click", j);
}), Ve(() => {
document.removeEventListener("click", j);
}), (o, g) => (l(), t("div", bl, [
o.hasDuplicateAttempt ? (l(), t("div", ml, [
R(r(Le), {
size: 12,
class: "flex-shrink-0 text-amber-500"
})
])) : m("", !0),
c("div", cl, [
M(c("input", {
"onUpdate:modelValue": g[0] || (g[0] = (i) => o.field.name = i),
placeholder: "Name",
class: v(["w-full sm:w-32 rounded-md border px-2 py-1 sm:mr-2 text-xs focus:ring-2 focus:ring-blue-50", [
o.hasDuplicateAttempt ? "border-amber-300 bg-amber-50 focus:border-amber-400 focus:ring-amber-50" : "border-gray-200 bg-[#f7f8fa]",
{ "cursor-not-allowed": o.disabled }
]]),
disabled: o.disabled,
onKeydown: [
U(A, ["enter"]),
U(F, ["escape"])
],
"aria-label": "Field name"
}, null, 42, vl), [
[H, o.field.name]
]),
c("div", {
class: "relative",
ref_key: "addDropdownRef",
ref: b
}, [
c("button", {
type: "button",
onClick: a,
onKeydown: [
U(_(a, ["prevent"]), ["enter"]),
U(_(a, ["prevent"]), ["space"]),
g[1] || (g[1] = U((i) => f.value = !1, ["escape"]))
],
class: v([[z(o.field.type), { "cursor-not-allowed": o.disabled }], "flex items-center rounded-full px-2 py-1 text-xs font-medium sm:mr-2 shadow-sm w-full sm:w-auto justify-center sm:justify-start"]),
disabled: o.disabled,
"aria-expanded": f.value,
"aria-label": "Select field type",
"aria-haspopup": "listbox"
}, [
ee(I(o.fieldTypeLabel(o.field.type)) + " ", 1),
g[6] || (g[6] = c("svg", {
class: "ml-1 h-3 w-3 flex-shrink-0",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
"aria-hidden": "true"
}, [
c("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M19 9l-7 7-7-7"
})
], -1))
], 42, wl),
f.value ? (l(), t("div", gl, [
(l(!0), t(L, null, W(r(ye), (i) => (l(), t("div", {
key: i.value,
onClick: (p) => k(i.value),
onKeydown: [
U(_((p) => k(i.value), ["prevent"]), ["enter"]),
U(_((p) => k(i.value), ["prevent"]), ["space"])
],
class: v([z(i.value), "m-1 flex cursor-pointer items-center rounded px-2 py-1 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"]),
tabindex: f.value ? 0 : -1,
role: "option",
"aria-selected": o.field.type === i.value
}, [
c("span", null, I(i.label), 1)
], 42, hl))), 128))
])) : m("", !0)
], 512),
o.field.type === "array" ? (l(), t("div", kl, [
R(Oe, {
modelValue: o.field.arrayType,
"onUpdate:modelValue": g[2] || (g[2] = (i) => o.field.arrayType = i),
"field-label-class": z,
disabled: o.disabled
}, null, 8, ["modelValue", "disabled"])
])) : m("", !0),
o.field.type === "number" ? M((l(), t("input", {
key: 1,
type: "number",
"onUpdate:modelValue": g[3] || (g[3] = (i) => o.field.value = i),
placeholder: "Value",
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": o.disabled }]),
disabled: o.disabled,
onKeydown: [
U(A, ["enter"]),
U(F, ["escape"])
],
"aria-label": "Field value"
}, null, 42, Cl)), [
[
H,
o.field.value,
void 0,
{ number: !0 }
]
]) : o.field.type === "boolean" ? M((l(), t("select", {
key: 2,
"onUpdate:modelValue": g[4] || (g[4] = (i) => o.field.value = i),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": o.disabled }]),
disabled: o.disabled,
onKeydown: [
U(A, ["enter"]),
U(F, ["escape"])
],
"aria-label": "Boolean value"
}, g[7] || (g[7] = [
c("option", { value: !0 }, "true", -1),
c("option", { value: !1 }, "false", -1)
]), 42, $l)), [
[Ee, o.field.value]
]) : o.field.type === "string" ? M((l(), t("input", {
key: 3,
"onUpdate:modelValue": g[5] || (g[5] = (i) => o.field.value = i),
placeholder: "Value",
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": o.disabled }]),
disabled: o.disabled,
onKeydown: [
U(A, ["enter"]),
U(F, ["escape"])
],
"aria-label": "Field value"
}, null, 42, Al)), [
[H, o.field.value]
]) : m("", !0)
]),
c("div", Tl, [
c("button", {
onClick: A,
class: v(["p-1 text-base text-green-500", { "cursor-not-allowed": o.disabled, "hover:text-green-700": !o.disabled }]),
disabled: o.disabled,
"aria-label": "Add field",
title: "Add field"
}, [
R(r(se), { size: 12 })
], 10, Fl),
c("button", {
onClick: F,
class: v(["p-1 text-base text-red-500", { "cursor-not-allowed": o.disabled, "hover:text-red-700": !o.disabled }]),
disabled: o.disabled,
"aria-label": "Cancel",
title: "Cancel"
}, [
R(r(te), { size: 12 })
], 10, jl)
])
]));
}
}), Bl = {
key: 0,
class: "mb-1 flex items-center rounded bg-white px-2 py-1"
}, Dl = {
key: 0,
class: "relative mr-2"
}, Vl = ["disabled"], El = ["disabled"], Il = ["disabled"], zl = ["disabled"], Ll = ["disabled"], Ml = /* @__PURE__ */ Q({
__name: "ArrayItemAdder",
props: {
adding: { type: Boolean },
field: {},
newField: {},
disabled: { type: Boolean },
readOnly: { type: Boolean },
fieldLabelClass: { type: Function }
},
emits: ["add", "cancel", "update:array-type"],
setup(u, { emit: h }) {
const n = h;
return (d, b) => d.adding && d.field.type === "array" ? (l(), t("div", Bl, [
d.field.arrayType === void 0 ? (l(), t("div", Dl, [
R(Oe, {
modelValue: d.field.arrayType,
"onUpdate:modelValue": b[0] || (b[0] = (f) => d.field.arrayType = f),
"field-label-class": d.fieldLabelClass,
disabled: d.disabled
}, null, 8, ["modelValue", "field-label-class", "disabled"])
])) : m("", !0),
d.field.arrayType === "number" ? M((l(), t("input", {
key: 1,
type: "number",
"onUpdate:modelValue": b[1] || (b[1] = (f) => d.newField.value = f),
placeholder: "Value",
class: v(["w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": d.disabled }]),
disabled: d.disabled
}, null, 10, Vl)), [
[
H,
d.newField.value,
void 0,
{ number: !0 }
]
]) : d.field.arrayType === "string" ? M((l(), t("input", {
key: 2,
"onUpdate:modelValue": b[2] || (b[2] = (f) => d.newField.value = f),
placeholder: "Value",
class: v(["w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": d.disabled }]),
disabled: d.disabled
}, null, 10, El)), [
[H, d.newField.value]
]) : d.field.arrayType === "object" ? M((l(), t("input", {
key: 3,
"onUpdate:modelValue": b[3] || (b[3] = (f) => d.newField.name = f),
placeholder: "Name",
class: v(["w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": d.disabled }]),
disabled: d.disabled
}, null, 10, Il)), [
[H, d.newField.name]
]) : m("", !0),
b[6] || (b[6] = c("div", { class: "flex-1" }, null, -1)),
c("button", {
onClick: b[4] || (b[4] = (f) => n("add")),
class: v(["p-1 text-base text-green-500", { "cursor-not-allowed": d.disabled, "hover:text-green-700": !d.disabled }]),
disabled: d.disabled
}, [
R(r(se), { size: 12 })
], 10, zl),
c("button", {
onClick: b[5] || (b[5] = (f) => n("cancel")),
class: v(["ml-1 p-1 text-base text-red-500", { "cursor-not-allowed": d.disabled, "hover:text-red-700": !d.disabled }]),
disabled: d.disabled
}, [
R(r(te), { size: 12 })
], 10, Ll)
])) : m("", !0);
}
}), Ol = { class: "relative" }, Nl = { class: "group mb-1 flex flex-wrap sm:flex-nowrap items-center rounded bg-white px-2 py-1 gap-1" }, Sl = ["disabled"], Ul = { key: 0 }, Kl = { key: 1 }, Pl = { class: "relative mr-2 h-[16px] w-[16px] flex-shrink-0" }, ql = { class: "flex flex-col sm:flex-row sm:items-center flex-1 gap-2 sm:gap-0" }, Rl = ["placeholder", "disabled"], Hl = ["placeholder", "disabled"], Jl = ["disabled"], Yl = ["placeholder", "disabled"], Zl = { class: "flex gap-1 ml-auto" }, Gl = ["disabled"], Xl = ["disabled"], Wl = { class: "flex flex-wrap sm:flex-nowrap items-center flex-1 gap-1" }, Ql = {
key: 1,
class: "text-xs text-gray-400 flex-shrink-0"
}, xl = {
key: 2,
class: "text-xs text-gray-400 flex-shrink-0"
}, _l = {
key: 3,
class: "border border-gray-100 bg-[#f7f8fa] px-2 py-1 text-xs text-gray-600 flex-shrink-0"
}, ea = {
key: 4,
class: "border border-gray-100 bg-[#f7f8fa] px-2 py-1 text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none"
}, la = { class: "flex items-center gap-1 flex-shrink-0" }, aa = ["disabled"], da = ["disabled"], sa = { class: "z-5 relative ml-6" }, ta = { key: 0 }, oa = { key: 0 }, ra = { key: 1 }, na = {
key: 4,
class: "relative flex items-center"
}, ia = ["disabled"], ue = /* @__PURE__ */ Q({
__name: "ObjectField",
props: {
field: {},
level: {},
showTypeLabel: { type: Boolean },
showFieldCount: { type: Boolean },
showArrayCount: { type: Boolean },
placeholder: {},
disabled: { type: Boolean },
readOnly: { type: Boolean },
allowDelete: { type: Boolean },
allowEdit: { type: Boolean },
allowAdd: { type: Boolean },
allowExpand: { type: Boolean },
hasDuplicateName: { type: Boolean },
customIcons: {}
},
emits: ["update:field"],
setup(u, { emit: h }) {
const n = u, d = h, {
open: b,
adding: f,
editing: a,
fieldsCount: k,
fieldBackgroundClass: A,
fieldLabelClass: F,
fieldTypeLabel: j,
updateNestedField: z,
deleteField: o,
getDefaultValue: g
} = Ge(Pe(n, "field"), d), i = ke({
name: "",
type: "string",
value: g("string")
}), p = ke({
name: "",
type: "string",
value: g("string")
}), K = E(-1), O = E(""), Z = pe(() => {
if (!Array.isArray(n.field.value)) return /* @__PURE__ */ new Set();
const e = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Set();
return n.field.value.forEach((J) => {
if (J && J.name) {
const x = e.get(J.name) || 0;
e.set(J.name, x + 1), x >= 1 && $.add(J.name);
}
}), $;
}), G = (e) => Array.isArray(n.field.value) ? n.field.value.some(($) => $.name === e) : !1;
function s() {
b.value = !b.value;
}
function w() {
f.value = !0, i.name = "", i.type = n.field.arrayType || "string", i.value = g(i.type), a.value = !1, O.value = "";
}
function y() {
f.value = !1, O.value = "";
}
function C() {
if (!i.name) return;
if (G(i.name)) {
O.value = i.name;
return;
}
O.value = "";
const e = {
...i,
id: `field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
};
(e.type === "array" || e.type === "object") && (e.value = []);
const $ = {
...n.field,
value: Array.isArray(n.field.value) ? [...n.field.value, e] : [e]
};
d("update:field", $), f.value = !1;
}
function P() {
if (!Array.isArray(n.field.value)) return;
let e;
if (n.field.arrayType === "object") {
const J = {
name: i.name || `array-item-${Date.now()}-${n.field.value.length}`,
type: "object",
value: [],
id: `field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
};
e = [...n.field.value, J];
} else n.field.arrayType === "number" ? e = [...n.field.value, i.value] : e = [...n.field.value, i.value];
const $ = {
...n.field,
value: e
};
d("update:field", $), f.value = !1;
}
function X() {
a.value = !0, p.name = n.field.name, p.type = n.field.type, p.value = n.field.value, p.arrayType = n.field.arrayType, p.id = n.field.id, f.value = !1;
}
function Se(e) {
K.value = e;
}
function Ue() {
a.value = !1;
}
function Ke() {
const e = {
name: p.name,
type: p.type,
value: p.value,
arrayType: p.arrayType,
id: n.field.id
// Preserve the original ID
};
(e.type === "object" || e.type === "array") && e.type === n.field.type && Array.isArray(n.field.value) && (e.value = n.field.value, e.type === "array" && (e.arrayType = n.field.arrayType)), d("update:field", e), a.value = !1;
}
return de(() => i.name, (e) => {
O.value && e !== O.value && (O.value = "");
}), (e, $) => {
var J, x, fe, be, me, ce, ve, we, ge, he;
return l(), t("div", Ol, [
c("div", Nl, [
(e.field.type === "object" || e.field.type === "array") && e.allowExpand ? (l(), t("button", {
key: 0,
onClick: s,
class: v(["mr-2 h-[16px] w-[16px] flex-shrink-0 rounded bg-gray-300 px-[2px] text-white", { "cursor-not-allowed": e.disabled, "hover:text-gray-100": !e.disabled }]),
disabled: e.disabled
}, [
r(b) ? (l(), t("span", Ul, [
(l(), T(Y(((J = e.customIcons) == null ? void 0 : J.collapse) || r(Je)), { size: 12 }))
])) : (l(), t("span", Kl, [
(l(), T(Y(((x = e.customIcons) == null ? void 0 : x.expand) || r(Fe)), { size: 12 }))
]))
], 10, Sl)) : m("", !0),
c("div", Pl, [
!e.readOnly && !e.disabled ? (l(), t("div", {
key: 0,
class: v([
"absolute inset-0 rounded p-[2px] text-white",
r(A)(e.field.type),
{ "cursor-not-allowed": e.disabled }
])
}, [
e.field.type === "string" ? (l(), T(r(ne), {
key: 0,
size: 12
})) : m("", !0),
e.field.type === "number" ? (l(), T(r(ie), {
key: 1,
size: 12
})) : m("", !0),
e.field.type === "boolean" ? (l(), T(r($e), {
key: 2,
size: 12
})) : m("", !0),
e.field.type === "array" ? (l(), T(r(Te), {
key: 3,
size: 12
})) : m("", !0),
e.field.type === "object" ? (l(), T(r(Ae), {
key: 4,
size: 12
})) : m("", !0)
], 2)) : (l(), t("div", {
key: 1,
class: v([
"absolute inset-0 rounded p-[2px] text-white",
r(A)(e.field.type),
{ "cursor-not-allowed": e.disabled }
])
}, [
e.field.type === "string" ? (l(), T(r(ne), {
key: 0,
size: 12
})) : m("", !0),
e.field.type === "number" ? (l(), T(r(ie), {
key: 1,
size: 12
})) : m("", !0),
e.field.type === "boolean" ? (l(), T(r($e), {
key: 2,
size: 12
})) : m("", !0),
e.field.type === "array" ? (l(), T(r(Te), {
key: 3,
size: 12
})) : m("", !0),
e.field.type === "object" ? (l(), T(r(Ae), {
key: 4,
size: 12
})) : m("", !0)
], 2))
]),
r(a) && !e.readOnly ? (l(), t(L, { key: 1 }, [
c("div", ql, [
M(c("input", {
"onUpdate:modelValue": $[0] || ($[0] = (D) => p.name = D),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] sm:mr-2 px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": e.disabled }]),
placeholder: (fe = e.placeholder) == null ? void 0 : fe.name,
disabled: e.disabled
}, null, 10, Rl), [
[H, p.name]
]),
e.showTypeLabel ? (l(), t("div", {
key: 0,
class: v([r(F)(p.type), "sm:mr-2 text-xs"])
}, [
p.type === "array" ? (l(), t(L, { key: 0 }, [
ee(" (" + I(r(j)(p.type)) + "[" + I(r(j)(p.arrayType)) + "]) ", 1)
], 64)) : (l(), t(L, { key: 1 }, [
ee(" (" + I(r(j)(p.type)) + ") ", 1)
], 64))
], 2)) : m("", !0),
p.type === "number" ? M((l(), t("input", {
key: 1,
type: "number",
"onUpdate:modelValue": $[1] || ($[1] = (D) => p.value = D),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": e.disabled }]),
placeholder: (be = e.placeholder) == null ? void 0 : be.value,
disabled: e.disabled
}, null, 10, Hl)), [
[
H,
p.value,
void 0,
{ number: !0 }
]
]) : p.type === "boolean" ? M((l(), t("select", {
key: 2,
"onUpdate:modelValue": $[2] || ($[2] = (D) => p.value = D),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": e.disabled }]),
disabled: e.disabled
}, $[7] || ($[7] = [
c("option", { value: !0 }, "true", -1),
c("option", { value: !1 }, "false", -1)
]), 10, Jl)), [
[Ee, p.value]
]) : p.type === "string" ? M((l(), t("input", {
key: 3,
"onUpdate:modelValue": $[3] || ($[3] = (D) => p.value = D),
class: v(["w-full sm:w-32 rounded-md border border-gray-200 bg-[#f7f8fa] px-2 py-1 text-xs focus:ring-2 focus:ring-blue-50", { "cursor-not-allowed": e.disabled }]),
placeholder: (me = e.placeholder) == null ? void 0 : me.value,
disabled: e.disabled
}, null, 10, Yl)), [
[H, p.value]
]) : m("", !0)
]),
c("div", Zl, [
c("button", {
onClick: Ke,
class: v(["p-1 text-base text-green-500", { "cursor-not-allowed": e.disabled, "hover:text-green-700": !e.disabled }]),
disabled: e.disabled
}, [
(l(), T(Y(((ce = e.customIcons) == null ? void 0 : ce.save) || r(se)), { size: 12 }))
], 10, Gl),
c("button", {
onClick: Ue,
class: v(["p-1 text-base text-red-500", { "cursor-not-allowed": e.disabled, "hover:text-red-400": !e.disabled }]),
disabled: e.disabled
}, [
(l(), T(Y(((ve = e.customIcons) == null ? void 0 : ve.cancel) || r(te)), { size: 12 }))
], 10, Xl)
])
], 64)) : (l(), t(L, { key: 2 }, [
c("div", Wl, [
c("span", {
class: v([r(F)(e.field.type), "py-1 text-xs font-medium"])
}, I(e.field.name), 3),
e.hasDuplicateName ? (l(), T(r(Le), {
key: 0,
size: 12,
class: "text-amber-500 flex-shrink-0",
title: "Duplicate field name"
})) : m("", !0),
e.field.type === "object" && e.showFieldCount ? (l(), t("span", Ql, " { " + I(r(k)) + " } ", 1)) : m("", !0),
e.field.type === "array" && e.showArrayCount ? (l(), t("span", xl, " [ " + I(r(k)) + " ] ", 1)) : m("", !0),
e.field.type === "boolean" ? (l(), t("span", _l, I(e.field.value ? "true" : "false"), 1)) : m("", !0),
e.field.type === "number" || e.field.type === "string" ? (l(), t("span", ea, I(e.field.value), 1)) : m("", !0)
]),
c("div", la, [
e.allowEdit !== !1 && !e.readOnly ? (l(), t("button", {
key: 0,
onClick: X,
class: v(["p-1 text-gray-300", { "cursor-not-allowed": e.disabled, "hover:text-blue-400": !e.disabled }]),
disabled: e.disabled
}, [
(l(), T(Y(((we = e.customIcons) == null ? void 0 : we.edit) || r(Ie)), { size: 12 }))
], 10, aa)) : m("", !0),
e.allowDelete !== !1 && !e.readOnly ? (l(), t("button", {
key: 1,
onClick: $[4] || ($[4] = //@ts-ignore
(...D) => r(o) && r(o)(...D)),
class: v(["p-1 text-base text-gray-300", { "cursor-not-allowed": e.disabled, "hover:text-red-400": !e.disabled }]),
disabled: e.disabled
}, [
(l(), T(Y(((ge = e.customIcons) == null ? void 0 : ge.delete) || r(ze)), { size: 12 }))
], 10, da)) : m("", !0)
])
], 64))
]),
e.field.type === "object" || e.field.type === "array" ? (l(), t(L, { key: 0 }, [
r(b) ? (l(), t("div", {
key: 0,
class: v(["absolute bottom-3 left-3.5 z-0 w-0.5 bg-gray-200", r(a) ? "top-16 sm:top-8" : "top-8"])
}, null, 2)) : m("", !0),
M(c("div", sa, [
e.field.type === "object" ? (l(), t("div", ta, [
(l(!0), t(L, null, W(e.field.value, (D, V) => (l(), T(ue, {
key: D.id || `obj-${e.level}-${V}`,
field: D,
level: e.level + 1,
"show-type-label": e.showTypeLabel,
"show-field-count": e.showFieldCount,
"show-array-count": e.showArrayCount,
placeholder: e.placeholder,
disabled: e.disabled,
"read-only": e.readOnly,
"allow-delete": e.allowDelete,
"allow-edit": e.allowEdit,
"allow-add": e.allowAdd,
"allow-expand": e.allowExpand,
"custom-icons": e.customIcons,
"has-duplicate-name": Z.value.has(D.name),
"onUpdate:field": (B) => r(z)(V, B)
}, null, 8, ["field", "level", "show-type-label", "show-field-count", "show-array-count", "placeholder", "disabled", "read-only", "allow-delete", "allow-edit", "allow-add", "allow-expand", "custom-icons", "has-duplicate-name", "onUpdate:field"]))), 128))
])) : e.field.type === "array" ? (l(), t(L, { key: 1 }, [
e.field.arrayType === "object" ? (l(), t("div", oa, [
(l(!0), t(L, null, W(e.field.value, (D, V) => (l(), T(ue, {
key: D.id || `arr-${e.level}-${V}`,
field: D,
level: e.level + 1,
"show-type-label": e.showTypeLabel,
"show-field-count": e.showFieldCount,
"show-array-count": e.showArrayCount,
placeholder: e.placeholder,
disabled: e.disabled,
"read-only": e.readOnly,
"allow-delete": e.allowDelete,
"allow-edit": e.allowEdit,
"allow-add": e.allowAdd,
"allow-expand": e.allowExpand,
"custom-icons": e.customIcons,
"has-duplicate-name": Z.value.has(D.name),
"onUpdate:field": (B) => r(z)(V, B)
}, null, 8, ["field", "level", "show-type-label", "show-field-count", "show-array-count", "placeholder", "disabled", "read-only", "allow-delete", "allow-edit", "allow-add", "allow-expand", "custom-icons", "has-duplicate-name", "onUpdate:field"]))), 128))
])) : (l(), t("div", ra, [
(l(!0), t(L, null, W(e.field.value, (D, V) => (l(), T(il, {
key: V,
value: D,
index: V,
disabled: e.disabled,
"read-only": e.readOnly,
"allow-delete": e.allowDelete,
"allow-edit": e.allowEdit,
"allow-add": e.allowAdd,
"allow-expand": e.allowExpand,
"custom-icons": e.customIcons,
"array-type": e.field.arrayType,
editing: K.value === V,
"field-type-label": r(j),
"field-label-class": r(F),
"field-background-class": r(A),
"onUpdate:value": (B) => {
if (typeof B == "string" || typeof B == "number") {
let N;
if (e.field.arrayType === "string" && typeof B == "string") {
const S = [...e.field.value];
S[V] = B, N = { ...e.field, value: S };
} else if (e.field.arrayType === "number" && typeof B == "number") {
const S = [...e.field.value];
S[V] = B, N = { ...e.field, value: S };
} else
N = e.field;
d("update:field", N);
}
},
onDelete: () => {
let B;
if (e.field.arrayType === "string") {
const N = e.field.value.filter((S, oe) => oe !== V);
B = { ...e.field, value: N };
} else if (e.field.arrayType === "number") {
const N = e.field.value.filter((S, oe) => oe !== V);
B = { ...e.field, value: N };
} else
B = e.field;
d("update:field", B);
},
onEdit: () => Se(V),
onSave: (B) => {
if (typeof B == "string" || typeof B == "number") {
let N;
if (e.field.arrayType === "string" && typeof B == "string") {
const S = [...e.field.value];
S[V] = B, N = { ...e.field, value: S };
} else if (e.field.arrayType === "number" && typeof B == "number") {
const S = [...e.field.value];
S[V] = B, N = { ...e.field, value: S };
} else
N = e.field;
K.value = -1, d("update:field", N);
}
},
onCancel: $[5] || ($[5] = (B) => K.value = -1)
}, null, 8, ["value", "index", "disabled", "read-only", "allow-delete", "allow-edit", "allow-add", "allow-expand", "custom-icons", "array-type", "editing", "field-type-label", "field-label-class", "field-background-class", "onUpdate:value", "onDelete", "onEdit", "onSave"]))), 128))
]))
], 64)) : m("", !0),
r(f) && e.field.type === "object" ? (l(), T(Ne, {
key: 2,
adding: r(f),
field: i,
"field-label-class": r(F),
"field-type-label": r(j),
disabled: e.disabled,
"has-duplicate-attempt": !!O.value,
"duplicate-field-name": O.value,
onAdd: C,
onCancel: y,
"onUpdate:field": $[6] || ($[6] = (D) => Object.assign(i, D))
}, null, 8, ["adding", "field", "field-label-class", "field-type-label", "disabled", "has-duplicate-attempt", "duplicate-field-name"]