@anilkumarthakur/vue3-json-viewer
Version:
This plugin provides a Vue 3 component for rendering and interacting with JSON data in a structured and visually appealing way. It supports features like dark mode, expanding and collapsing nested objects, and more.
467 lines (466 loc) • 17.4 kB
JavaScript
import { createElementBlock as n, openBlock as o, createElementVNode as l, defineComponent as L, ref as J, onMounted as Q, computed as k, resolveComponent as U, normalizeStyle as y, normalizeClass as r, createVNode as f, withDirectives as V, createBlock as d, createCommentVNode as c, unref as i, createTextVNode as w, toDisplayString as v, withModifiers as W, Transition as $, withCtx as K, Fragment as j, renderList as B, vShow as N } from "vue";
function E(h, a) {
return o(), n("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
l("path", {
"fill-rule": "evenodd",
d: "M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z",
"clip-rule": "evenodd"
})
]);
}
function D(h, a) {
return o(), n("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
l("path", {
"fill-rule": "evenodd",
d: "M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z",
"clip-rule": "evenodd"
})
]);
}
function S(h, a) {
return o(), n("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
l("path", { d: "M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z" }),
l("path", { d: "M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z" })
]);
}
const X = { key: 0 }, Y = { key: 0 }, x = { key: 1 }, _ = { key: 2 }, ee = { key: 3 }, T = /* @__PURE__ */ L({
__name: "NestedComponent",
props: {
data: { default: () => {
} },
level: { default: 0 },
parentKey: { default: "" },
darkMode: { type: Boolean, default: !0 },
expanded: { type: Boolean, default: !1 }
},
setup(h) {
const a = h, t = J(a.expanded ?? !1);
Q(() => {
a.level === 0 && (t.value = !0);
});
const Z = k(
() => typeof a.data == "object" && !Array.isArray(a.data) && a.data !== null && !(a.data instanceof RegExp) && !(a.data instanceof Map) && !(a.data instanceof Set)
), I = k(() => Array.isArray(a.data)), z = k(() => a.data instanceof RegExp), O = k(() => a.data instanceof Map), R = k(() => a.data instanceof Set), H = k(
() => ["string", "number", "boolean", "object", "regexp"].includes(
typeof a.data
) && a.data !== null
), P = k(() => typeof a.data == "string" ? "string-value" : typeof a.data == "number" ? "number-value" : typeof a.data == "boolean" ? "boolean-value" : a.data === null ? "null-value" : a.data instanceof Date ? "date-value" : a.data instanceof RegExp ? "regexp-value" : "");
function b() {
t.value = !t.value;
}
function C() {
const e = JSON.stringify(a.data, null, 2);
navigator.clipboard.writeText(e).then(() => {
M.value = !0, setTimeout(() => M.value = !1, 2e3);
});
}
function m(e) {
const p = a.darkMode ? ["#e06c75", "#e5c07b", "#98c379", "#56b6c2", "#61afef", "#c678dd"] : ["#d32f2f", "#fbc02d", "#388e3c", "#0288d1", "#1976d2", "#7b1fa2"];
return p[e % p.length];
}
const M = J(!1), F = k(() => {
if (Z.value) {
const e = Object.keys(a.data);
return `{ ${e.slice(0, 2).map((u) => `${u}: ${A(a.data[u])}`).join(", ")}${e.length > 2 ? ", ..." : ""} }`;
} else {
if (I.value)
return `[${a.data.slice(0, 2).map((p) => A(p)).join(", ")}${a.data.length > 2 ? ", ..." : ""}]`;
if (O.value) {
const e = Array.from(a.data.entries());
return `Map { ${e.slice(0, 2).map((u) => {
const [g, s] = u;
return `${g}: ${A(s)}`;
}).join(", ")}${e.length > 2 ? ", ..." : ""} }`;
} else if (R.value) {
const e = Array.from(a.data.values());
return `Set { ${e.slice(0, 2).map((u) => A(u)).join(", ")}${e.length > 2 ? ", ..." : ""} }`;
}
}
return "";
});
function A(e) {
return e === null ? "null" : e === void 0 ? "undefined" : typeof e == "string" ? `"${e}"` : typeof e == "number" || typeof e == "boolean" ? e : Array.isArray(e) ? "[...]" : typeof e == "object" ? "{...}" : e instanceof RegExp ? e.toString() : e instanceof Date ? e.toISOString() : String(e);
}
function q(e) {
return e === null ? "null" : e === void 0 ? "undefined" : typeof e == "string" ? `"${e}"` : typeof e == "number" || typeof e == "boolean" ? e : e instanceof RegExp ? e.toString() : e instanceof Date ? e.toISOString() : String(e);
}
const G = k(() => a.data instanceof Date);
return (e, p) => {
const u = U("NestedComponent", !0);
return o(), n("div", {
class: r({
"json-viewer-dark": e.darkMode && e.level === 0,
"json-viewer-light": !e.darkMode && e.level === 0
}),
style: y({ marginLeft: e.level * 10 + "px", padding: "2px 0" })
}, [
Z.value && !z.value && !G.value && !O.value && !R.value ? (o(), n("div", X, [
l("span", {
class: "cursor-pointer",
onClick: b
}, [
t.value ? (o(), d(i(E), {
key: 0,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])) : c("", !0),
t.value ? c("", !0) : (o(), d(i(D), {
key: 1,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])),
l("span", {
style: y({ color: m(e.level) }),
class: "type-label key"
}, [
w(v(e.parentKey) + " ", 1),
e.level !== 0 ? (o(), n("span", Y, ":")) : c("", !0),
p[0] || (p[0] = w(" { "))
], 4),
t.value ? c("", !0) : (o(), n("span", {
key: 2,
class: r(["preview", {
"preview-dark": e.darkMode,
"preview-light": !e.darkMode
}])
}, v(F.value), 3)),
e.level !== 0 ? (o(), n("span", {
key: 3,
style: y({ color: m(e.level) }),
class: "key key-count margin-lr-5 cursor-pointer"
}, v(Object.keys(e.data).length) + " ...", 5)) : c("", !0)
]),
f(i(S), {
class: r([
"copy-icon margin-lr-5 cursor-pointer",
e.darkMode ? "copy-icon-dark" : "copy-icon-light"
]),
onClick: W(C, ["stop"])
}, null, 8, ["class"]),
f($, { name: "fade" }, {
default: K(() => [
M.value ? (o(), n("span", {
key: 0,
class: r(["copy-tooltip", {
"copy-tooltip-dark": e.darkMode,
"copy-tooltip-light": !e.darkMode
}])
}, "Copied!", 2)) : c("", !0)
]),
_: 1
}),
V(l("div", {
class: r([
"node-children",
e.darkMode ? "node-children-dark" : "node-children-light"
])
}, [
(o(!0), n(j, null, B(e.data, (g, s) => (o(), d(u, {
key: s,
darkMode: e.darkMode,
data: g,
level: e.level + 1,
parentKey: s,
expanded: t.value
}, null, 8, ["darkMode", "data", "level", "parentKey", "expanded"]))), 128))
], 2), [
[N, t.value]
]),
l("span", {
class: r([
"toggle-btn cursor-pointer",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light"
]),
onClick: b
}, "},", 2)
])) : I.value ? (o(), n("div", x, [
l("span", {
onClick: b,
class: "cursor-pointer"
}, [
t.value ? (o(), d(i(E), {
key: 0,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])) : (o(), d(i(D), {
key: 1,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])),
l("span", {
style: y({ color: m(e.level) }),
class: "key type-label"
}, [
w(v(e.parentKey) + ":", 1),
l("span", {
style: y({ color: m(e.level) }),
class: "key key-count cursor-pointer"
}, " [" + v(e.data.length) + "]...", 5)
], 4)
]),
f(i(S), {
class: r([
"copy-icon margin-lr-5 cursor-pointer",
e.darkMode ? "copy-icon-dark" : "copy-icon-light"
]),
onClick: C
}, null, 8, ["class"]),
f($, { name: "fade" }, {
default: K(() => [
M.value ? (o(), n("span", {
key: 0,
class: r(["copy-tooltip", {
"copy-tooltip-dark": e.darkMode,
"copy-tooltip-light": !e.darkMode
}])
}, "Copied!", 2)) : c("", !0)
]),
_: 1
}),
V(l("div", {
class: r([
"node-children",
e.darkMode ? "node-children-dark" : "node-children-light"
])
}, [
(o(!0), n(j, null, B(e.data, (g, s) => (o(), d(u, {
key: s,
darkMode: e.darkMode,
data: g,
level: e.level + 1,
parentKey: `${e.parentKey}[${s}]`,
expanded: t.value
}, null, 8, ["darkMode", "data", "level", "parentKey", "expanded"]))), 128))
], 2), [
[N, t.value]
])
])) : O.value ? (o(), n("div", _, [
l("span", {
onClick: b,
class: "cursor-pointer"
}, [
t.value ? (o(), d(i(E), {
key: 0,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])) : (o(), d(i(D), {
key: 1,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])),
l("span", {
style: y({ color: m(e.level) }),
class: "key type-label"
}, [
w(v(e.parentKey) + ": ", 1),
l("span", {
style: y({ color: m(e.level) }),
class: "key key-count cursor-pointer"
}, " [Map]", 4)
], 4)
]),
f(i(S), {
class: r([
"copy-icon margin-lr-5 cursor-pointer",
e.darkMode ? "copy-icon-dark" : "copy-icon-light"
]),
onClick: C
}, null, 8, ["class"]),
f($, { name: "fade" }, {
default: K(() => [
M.value ? (o(), n("span", {
key: 0,
class: r(["copy-tooltip", {
"copy-tooltip-dark": e.darkMode,
"copy-tooltip-light": !e.darkMode
}])
}, "Copied!", 2)) : c("", !0)
]),
_: 1
}),
V(l("div", {
class: r([
"node-children",
e.darkMode ? "node-children-dark" : "node-children-light"
])
}, [
(o(!0), n(j, null, B(Array.from(e.data.entries()), (g, s) => (o(), d(u, {
key: s,
darkMode: e.darkMode,
data: g,
level: e.level + 1,
parentKey: s,
expanded: t.value
}, null, 8, ["darkMode", "data", "level", "parentKey", "expanded"]))), 128))
], 2), [
[N, t.value]
])
])) : R.value ? (o(), n("div", ee, [
l("span", {
onClick: b,
class: "cursor-pointer"
}, [
t.value ? (o(), d(i(E), {
key: 0,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])) : (o(), d(i(D), {
key: 1,
class: r([[
"toggle-btn",
e.darkMode ? "toggle-btn-dark" : "toggle-btn-light",
"cursor-pointer"
], "margin-lr-5 height10 width10"])
}, null, 8, ["class"])),
l("span", {
style: y({ color: m(e.level) }),
class: "key type-label"
}, [
w(v(e.parentKey) + ": ", 1),
l("span", {
style: y({ color: m(e.level) }),
class: "key key-count cursor-pointer"
}, " [Set]", 4)
], 4)
]),
f(i(S), {
class: r([
"copy-icon margin-lr-5 cursor-pointer",
e.darkMode ? "copy-icon-dark" : "copy-icon-light"
]),
onClick: C
}, null, 8, ["class"]),
f($, { name: "fade" }, {
default: K(() => [
M.value ? (o(), n("span", {
key: 0,
class: r(["copy-tooltip", {
"copy-tooltip-dark": e.darkMode,
"copy-tooltip-light": !e.darkMode
}])
}, "Copied!", 2)) : c("", !0)
]),
_: 1
}),
V(l("div", {
class: r([
"node-children",
e.darkMode ? "node-children-dark" : "node-children-light"
])
}, [
(o(!0), n(j, null, B(Array.from(e.data.values()), (g, s) => (o(), d(u, {
key: s,
darkMode: e.darkMode,
data: g,
level: e.level + 1,
parentKey: `${e.parentKey}[${s}]`,
expanded: t.value
}, null, 8, ["darkMode", "data", "level", "parentKey", "expanded"]))), 128))
], 2), [
[N, t.value]
])
])) : (o(), n("div", {
key: 4,
class: r(["leaf-node", e.darkMode ? "leaf-node-dark" : "leaf-node-light"])
}, [
l("span", { onClick: b }, [
l("span", {
class: r(["key", e.darkMode ? "key-dark" : "key-light"])
}, v(e.parentKey), 3),
p[1] || (p[1] = w(": ")),
l("span", {
class: r(["key", P.value, e.darkMode ? "value-dark" : "value-light"])
}, v(q(e.data)), 3)
]),
H.value ? (o(), d(i(S), {
key: 0,
class: r([
"copy-icon margin-lr-5 cursor-pointer",
e.darkMode ? "copy-icon-dark" : "copy-icon-light"
]),
onClick: C
}, null, 8, ["class"])) : c("", !0),
f($, { name: "fade" }, {
default: K(() => [
M.value ? (o(), n("span", {
key: 0,
class: r(["copy-tooltip", {
"copy-tooltip-dark": e.darkMode,
"copy-tooltip-light": !e.darkMode
}])
}, "Copied!", 2)) : c("", !0)
]),
_: 1
})
], 2))
], 6);
};
}
}), ae = /* @__PURE__ */ L({
__name: "JsonViewer",
props: {
data: { default: () => {
} },
level: { default: 0 },
parentKey: { default: "" },
darkMode: { type: Boolean, default: !0 },
expanded: { type: Boolean, default: !1 }
},
setup(h) {
return (a, t) => (o(), d(T, {
darkMode: a.darkMode,
data: a.data,
level: a.level,
expanded: a.expanded
}, null, 8, ["darkMode", "data", "level", "expanded"]));
}
}), re = {
install(h) {
h.component("JsonViewer", ae), h.component("NestedComponent", T);
}
};
export {
ae as JsonViewer,
T as NestedComponent,
re as jsonViewerPlugin
};
//# sourceMappingURL=index.es.js.map