vue3-json-viewer
Version:
vuejs展示json的组件,适配vue3
1,090 lines (1,089 loc) • 38.3 kB
JavaScript
import { defineComponent as C, ref as w, onMounted as H, h as j, computed as O, createElementBlock as A, openBlock as N, normalizeClass as S, toDisplayString as V, watch as J, inject as F, provide as I, nextTick as fe, resolveComponent as de, createCommentVNode as Z, createElementVNode as q, renderSlot as pe, createTextVNode as ve, createVNode as ye } from "vue";
const me = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/, G = C({
name: "JsonString",
props: {
/** The string value to display. */
jsonValue: {
type: String,
required: !0
}
},
/**
* Setup function for the JsonString component.
* @param props - The component's props.
*/
setup(e) {
const m = w(!0), s = w(!1), l = w(null), p = w(null);
H(() => {
l.value && p.value && l.value.offsetHeight > p.value.offsetHeight && (s.value = !0);
});
const u = () => {
m.value = !m.value;
};
return () => {
const n = e.jsonValue, t = me.test(n);
let o;
!m.value && s.value ? o = j("span", {
class: { "jv-ellipsis": !0 },
onClick: u
}, "...") : t ? o = j("span", { class: { "jv-item": !0, "jv-string": !0 }, ref: l }, [
j("span", null, '"'),
// Opening quote
j("a", { href: n, target: "_blank", class: "jv-link" }, n),
j("span", null, '"')
// Closing quote
]) : o = j("span", {
class: { "jv-item": !0, "jv-string": !0 },
ref: l
// Assign ref for height calculation
}, `"${n}"`);
const r = [];
return s.value && r.push(j("span", {
class: {
"jv-toggle": !0,
// CSS class for the toggle button
open: m.value
// Class to indicate open/closed state
},
onClick: u
})), r.push(j("span", { class: { "jv-holder-node": !0 }, ref: p })), r.push(o), j("span", {}, r);
};
}
}), he = {
class: /* @__PURE__ */ S(["jv-item", "jv-undefined"])
}, ge = /* @__PURE__ */ C({
__name: "json-undefined",
props: {
/**
* The value to display. Expected to be `null` or `undefined`.
* The `type` is set to `null` and `PropType` is used to allow `undefined` as well,
* with a default of `undefined`.
*/
jsonValue: {
type: null,
default: void 0
}
},
setup(e) {
const m = e, s = O(() => m.jsonValue === null ? "null" : "undefined");
return (l, p) => (N(), A("span", he, V(s.value), 1));
}
}), be = /* @__PURE__ */ C({
__name: "json-number",
props: {
/** The number value to display. */
jsonValue: {
type: Number,
required: !0
}
},
setup(e) {
const m = e, s = O(() => Number.isInteger(m.jsonValue));
return (l, p) => (N(), A("span", {
class: S(["jv-item", "jv-number", s.value ? "jv-number-integer" : "jv-number-float"])
}, V(e.jsonValue.toString()), 3));
}
}), je = {
class: /* @__PURE__ */ S(["jv-item", "jv-boolean"])
}, xe = /* @__PURE__ */ C({
__name: "json-boolean",
props: {
/** The boolean value to display. */
jsonValue: {
type: Boolean,
required: !0
}
},
setup(e) {
return (m, s) => (N(), A("span", je, V(e.jsonValue.toString()), 1));
}
}), _e = C({
name: "JsonObject",
props: {
/** The object value to render. */
jsonValue: {
type: Object,
required: !0
},
/** The key name of this object if it's a property of another object. */
keyName: {
type: String,
default: ""
},
/** Current nesting depth of this object. */
depth: {
type: Number,
default: 0
},
/** Whether this object should be rendered in an expanded state. */
expand: Boolean,
/** Whether to sort the keys of this object alphabetically. */
sort: Boolean,
/** Whether preview mode is enabled. */
previewMode: Boolean
},
emits: ["update:expand"],
/**
* Setup function for the JsonObject component.
* @param props - The component's props.
* @param context - The setup context, including `emit`.
*/
setup(e, { emit: m }) {
const s = w({});
let l = null;
const p = (o) => {
setTimeout(() => {
s.value = o;
}, 0);
};
J(() => e.jsonValue, (o) => {
p(o);
}, { immediate: !0, deep: !0 });
const u = O(() => {
if (!e.sort)
return s.value;
const o = Object.keys(s.value).sort(), r = {};
return o.forEach((v) => {
r[v] = s.value[v];
}), r;
}), n = () => {
if (l)
try {
l.dispatchEvent(new Event("resized"));
} catch {
const r = document.createEvent("Event");
r.initEvent("resized", !0, !1), l.dispatchEvent(r);
}
}, t = () => {
m("update:expand", !e.expand), n();
};
return () => {
const o = [];
if (o.push(j("span", { class: ["jv-item", "jv-object"] }, "{")), e.expand) {
for (const r in u.value)
if (u.value.hasOwnProperty(r)) {
const v = u.value[r];
o.push(j(K, {
key: r,
// style: { display: !props.expand ? 'none' : undefined }, // Redundant
sort: e.sort,
keyName: r,
depth: e.depth + 1,
value: v,
previewMode: e.previewMode
}));
}
}
return !e.expand && Object.keys(s.value).length > 0 && o.push(j("span", {
// style: { display: props.expand ? 'none' : undefined }, // Redundant
class: "jv-ellipsis",
onClick: t,
title: `click to reveal object content (keys: ${Object.keys(u.value).join(", ")})`
}, "...")), o.push(j("span", { class: ["jv-item", "jv-object"] }, "}")), j("span", { ref: (r) => {
l = r;
} }, o);
};
}
}), Ee = C({
name: "JsonArray",
props: {
/** The array value to render. */
jsonValue: {
type: Array,
required: !0
},
/** The key name of this array if it's a property of an object. */
keyName: {
type: String,
default: ""
},
/** Current nesting depth of this array. */
depth: {
type: Number,
default: 0
},
/** Whether to sort array items (Note: arrays are typically not sorted by key). */
sort: Boolean,
// This prop might be less relevant for arrays vs objects
/** Whether this array should be rendered in an expanded state. */
expand: Boolean,
/** Whether preview mode is enabled (potentially showing a condensed view). */
previewMode: Boolean
},
emits: ["update:expand"],
/**
* Setup function for the JsonArray component.
* @param props - The component's props.
* @param context - The setup context, including `emit`.
*/
setup(e, { emit: m }) {
const s = w([]);
let l = null;
const p = (n, t = 0) => {
t === 0 && (s.value = []), setTimeout(() => {
n && n.length > t && (s.value.push(n[t]), p(n, t + 1));
}, 0);
};
J(() => e.jsonValue, (n) => {
p(n);
}, { immediate: !0, deep: !0 });
const u = () => {
if (m("update:expand", !e.expand), l)
try {
l.dispatchEvent(new Event("resized"));
} catch {
const t = document.createEvent("Event");
t.initEvent("resized", !0, !1), l.dispatchEvent(t);
}
};
return () => {
const n = [];
return !e.previewMode && !e.keyName && n.push(j("span", {
class: {
"jv-toggle": !0,
open: !!e.expand
},
onClick: u
})), n.push(j("span", {
class: ["jv-item", "jv-array"]
}, "[")), e.expand && s.value.forEach((t, o) => {
n.push(j(K, {
// Cast JsonBox to Component
key: o,
// style: { display: props.expand ? undefined : 'none' }, // This style is redundant if items are not rendered
sort: e.sort,
depth: e.depth + 1,
value: t,
previewMode: e.previewMode
}));
}), !e.expand && s.value.length > 0 && n.push(j("span", {
class: "jv-ellipsis",
onClick: u,
title: `click to reveal ${s.value.length} hidden items`
}, "...")), n.push(j("span", {
class: ["jv-item", "jv-array"]
}, "]")), j("span", { ref: (t) => {
l = t;
} }, n);
};
}
}), we = ["title"], Te = /* @__PURE__ */ C({
__name: "json-function",
props: {
/** The Function object to represent. */
jsonValue: {
type: Function,
required: !0
}
},
setup(e) {
return (m, s) => (N(), A("span", {
class: S(["jv-item", "jv-function"]),
title: e.jsonValue.toString()
}, " <function> ", 8, we));
}
}), Se = {
class: /* @__PURE__ */ S(["jv-item", "jv-string"])
}, Ce = /* @__PURE__ */ C({
__name: "json-date",
props: {
/** The Date object to display. */
jsonValue: {
type: Date,
required: !0
}
},
setup(e) {
const m = e, s = F("timeformat", (p) => p.toLocaleString()), l = O(() => s(m.jsonValue));
return (p, u) => (N(), A("span", Se, ' "' + V(l.value) + '" ', 1));
}
}), ke = {
class: /* @__PURE__ */ S(["jv-item", "jv-regexp"])
}, Ae = /* @__PURE__ */ C({
__name: "json-regexp",
props: {
/** The RegExp object to display. */
jsonValue: {
type: RegExp,
required: !0
}
},
setup(e) {
return (m, s) => (N(), A("span", ke, V(e.jsonValue.toString()), 1));
}
}), K = C({
name: "JsonBox",
props: {
/** The JSON value to render. Can be any valid JSON type. */
value: {
type: [Object, Array, String, Number, Boolean, Function, Date],
default: null
},
/** The key name for this value, if it's part of an object. */
keyName: {
type: String,
default: ""
},
/** Whether to sort object keys alphabetically. Passed down from JsonViewer. */
sort: Boolean,
/** Current nesting depth of this component. */
depth: {
type: Number,
default: 0
},
/** Whether preview mode is enabled. Passed down from JsonViewer. */
previewMode: Boolean
},
/**
* Setup function for the JsonBox component.
* @param props - The component's props.
*/
setup(e) {
const m = F("expandDepth", 1 / 0), s = F("keyClick", () => {
}), l = w(!0);
let p = null;
H(() => {
l.value = e.previewMode || e.depth < m;
});
const u = () => {
if (l.value = !l.value, p)
try {
p.dispatchEvent(new Event("resized"));
} catch {
const t = document.createEvent("Event");
t.initEvent("resized", !0, !1), p.dispatchEvent(t);
}
};
return () => {
const n = [];
let t;
e.value === null || e.value === void 0 ? t = ge : Array.isArray(e.value) ? t = Ee : e.value instanceof Date ? t = Ce : e.value instanceof RegExp ? t = Ae : typeof e.value == "object" ? t = _e : typeof e.value == "number" ? t = be : typeof e.value == "string" ? t = G : typeof e.value == "boolean" ? t = xe : typeof e.value == "function" ? t = Te : t = G;
const o = e.value && (Array.isArray(e.value) || typeof e.value == "object" && !(e.value instanceof Date) && // Exclude Date
!(e.value instanceof RegExp));
return !e.previewMode && o && !(e.value instanceof RegExp) && n.push(
j("span", {
class: {
"jv-toggle": !0,
open: !!l.value
// Double negation to ensure boolean
},
onClick: u
})
), e.keyName && n.push(
j("span", {
class: "jv-key",
// 'jv-key' is a string, not an object
onClick: () => {
s && s(e.keyName);
}
}, `${e.keyName}:`)
// Text content as children
), n.push(
j(t, {
class: "jv-push",
// 'jv-push' is a string
jsonValue: e.value,
keyName: e.keyName,
// Pass keyName for context if needed by child
sort: e.sort,
// Pass sort for objects/arrays
depth: e.depth,
// Pass current depth
expand: l.value,
// Pass current expand state
previewMode: e.previewMode,
// Listen for 'update:expand' events from child components (e.g., JsonArray, JsonObject)
// This allows children to request a change in their own expansion state.
"onUpdate:expand": (r) => {
l.value = r;
}
})
), j(
"div",
{
class: {
"jv-node": !0,
"jv-key-node": !!e.keyName && !o,
// Apply if keyName exists and not a complex type
toggle: !e.previewMode && o
// Apply if not preview and is complex for styling indent
},
ref: (r) => {
p = r;
}
},
n
);
};
}
});
function Ne(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var L = { exports: {} };
/*!
* clipboard.js v2.0.11
* https://clipboardjs.com/
*
* Licensed MIT © Zeno Rocha
*/
var Oe = L.exports, X;
function Ve() {
return X || (X = 1, function(e, m) {
(function(l, p) {
e.exports = p();
})(Oe, function() {
return (
/******/
function() {
var s = {
/***/
686: (
/***/
function(u, n, t) {
t.d(n, {
default: function() {
return (
/* binding */
le
);
}
});
var o = t(279), r = /* @__PURE__ */ t.n(o), v = t(370), _ = /* @__PURE__ */ t.n(v), x = t(817), E = /* @__PURE__ */ t.n(x);
function g(d) {
try {
return document.execCommand(d);
} catch {
return !1;
}
}
var h = function(i) {
var a = E()(i);
return g("cut"), a;
}, b = h;
function k(d) {
var i = document.documentElement.getAttribute("dir") === "rtl", a = document.createElement("textarea");
a.style.fontSize = "12pt", a.style.border = "0", a.style.padding = "0", a.style.margin = "0", a.style.position = "absolute", a.style[i ? "right" : "left"] = "-9999px";
var c = window.pageYOffset || document.documentElement.scrollTop;
return a.style.top = "".concat(c, "px"), a.setAttribute("readonly", ""), a.value = d, a;
}
var U = function(i, a) {
var c = k(i);
a.container.appendChild(c);
var f = E()(c);
return g("copy"), c.remove(), f;
}, W = function(i) {
var a = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
container: document.body
}, c = "";
return typeof i == "string" ? c = U(i, a) : i instanceof HTMLInputElement && !["text", "search", "url", "tel", "password"].includes(i == null ? void 0 : i.type) ? c = U(i.value, a) : (c = E()(i), g("copy")), c;
}, D = W;
function $(d) {
"@babel/helpers - typeof";
return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? $ = function(a) {
return typeof a;
} : $ = function(a) {
return a && typeof Symbol == "function" && a.constructor === Symbol && a !== Symbol.prototype ? "symbol" : typeof a;
}, $(d);
}
var ee = function() {
var i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = i.action, c = a === void 0 ? "copy" : a, f = i.container, y = i.target, T = i.text;
if (c !== "copy" && c !== "cut")
throw new Error('Invalid "action" value, use either "copy" or "cut"');
if (y !== void 0)
if (y && $(y) === "object" && y.nodeType === 1) {
if (c === "copy" && y.hasAttribute("disabled"))
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
if (c === "cut" && (y.hasAttribute("readonly") || y.hasAttribute("disabled")))
throw new Error(`Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes`);
} else
throw new Error('Invalid "target" value, use a valid Element');
if (T)
return D(T, {
container: f
});
if (y)
return c === "cut" ? b(y) : D(y, {
container: f
});
}, te = ee;
function M(d) {
"@babel/helpers - typeof";
return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? M = function(a) {
return typeof a;
} : M = function(a) {
return a && typeof Symbol == "function" && a.constructor === Symbol && a !== Symbol.prototype ? "symbol" : typeof a;
}, M(d);
}
function ne(d, i) {
if (!(d instanceof i))
throw new TypeError("Cannot call a class as a function");
}
function Y(d, i) {
for (var a = 0; a < i.length; a++) {
var c = i[a];
c.enumerable = c.enumerable || !1, c.configurable = !0, "value" in c && (c.writable = !0), Object.defineProperty(d, c.key, c);
}
}
function oe(d, i, a) {
return i && Y(d.prototype, i), a && Y(d, a), d;
}
function re(d, i) {
if (typeof i != "function" && i !== null)
throw new TypeError("Super expression must either be null or a function");
d.prototype = Object.create(i && i.prototype, { constructor: { value: d, writable: !0, configurable: !0 } }), i && P(d, i);
}
function P(d, i) {
return P = Object.setPrototypeOf || function(c, f) {
return c.__proto__ = f, c;
}, P(d, i);
}
function ae(d) {
var i = se();
return function() {
var c = R(d), f;
if (i) {
var y = R(this).constructor;
f = Reflect.construct(c, arguments, y);
} else
f = c.apply(this, arguments);
return ie(this, f);
};
}
function ie(d, i) {
return i && (M(i) === "object" || typeof i == "function") ? i : ue(d);
}
function ue(d) {
if (d === void 0)
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return d;
}
function se() {
if (typeof Reflect > "u" || !Reflect.construct || Reflect.construct.sham) return !1;
if (typeof Proxy == "function") return !0;
try {
return Date.prototype.toString.call(Reflect.construct(Date, [], function() {
})), !0;
} catch {
return !1;
}
}
function R(d) {
return R = Object.setPrototypeOf ? Object.getPrototypeOf : function(a) {
return a.__proto__ || Object.getPrototypeOf(a);
}, R(d);
}
function z(d, i) {
var a = "data-clipboard-".concat(d);
if (i.hasAttribute(a))
return i.getAttribute(a);
}
var ce = /* @__PURE__ */ function(d) {
re(a, d);
var i = ae(a);
function a(c, f) {
var y;
return ne(this, a), y = i.call(this), y.resolveOptions(f), y.listenClick(c), y;
}
return oe(a, [{
key: "resolveOptions",
value: function() {
var f = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
this.action = typeof f.action == "function" ? f.action : this.defaultAction, this.target = typeof f.target == "function" ? f.target : this.defaultTarget, this.text = typeof f.text == "function" ? f.text : this.defaultText, this.container = M(f.container) === "object" ? f.container : document.body;
}
/**
* Adds a click event listener to the passed trigger.
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
*/
}, {
key: "listenClick",
value: function(f) {
var y = this;
this.listener = _()(f, "click", function(T) {
return y.onClick(T);
});
}
/**
* Defines a new `ClipboardAction` on each click event.
* @param {Event} e
*/
}, {
key: "onClick",
value: function(f) {
var y = f.delegateTarget || f.currentTarget, T = this.action(y) || "copy", B = te({
action: T,
container: this.container,
target: this.target(y),
text: this.text(y)
});
this.emit(B ? "success" : "error", {
action: T,
text: B,
trigger: y,
clearSelection: function() {
y && y.focus(), window.getSelection().removeAllRanges();
}
});
}
/**
* Default `action` lookup function.
* @param {Element} trigger
*/
}, {
key: "defaultAction",
value: function(f) {
return z("action", f);
}
/**
* Default `target` lookup function.
* @param {Element} trigger
*/
}, {
key: "defaultTarget",
value: function(f) {
var y = z("target", f);
if (y)
return document.querySelector(y);
}
/**
* Allow fire programmatically a copy action
* @param {String|HTMLElement} target
* @param {Object} options
* @returns Text copied.
*/
}, {
key: "defaultText",
/**
* Default `text` lookup function.
* @param {Element} trigger
*/
value: function(f) {
return z("text", f);
}
/**
* Destroy lifecycle.
*/
}, {
key: "destroy",
value: function() {
this.listener.destroy();
}
}], [{
key: "copy",
value: function(f) {
var y = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
container: document.body
};
return D(f, y);
}
/**
* Allow fire programmatically a cut action
* @param {String|HTMLElement} target
* @returns Text cutted.
*/
}, {
key: "cut",
value: function(f) {
return b(f);
}
/**
* Returns the support of the given action, or all actions if no action is
* given.
* @param {String} [action]
*/
}, {
key: "isSupported",
value: function() {
var f = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ["copy", "cut"], y = typeof f == "string" ? [f] : f, T = !!document.queryCommandSupported;
return y.forEach(function(B) {
T = T && !!document.queryCommandSupported(B);
}), T;
}
}]), a;
}(r()), le = ce;
}
),
/***/
828: (
/***/
function(u) {
var n = 9;
if (typeof Element < "u" && !Element.prototype.matches) {
var t = Element.prototype;
t.matches = t.matchesSelector || t.mozMatchesSelector || t.msMatchesSelector || t.oMatchesSelector || t.webkitMatchesSelector;
}
function o(r, v) {
for (; r && r.nodeType !== n; ) {
if (typeof r.matches == "function" && r.matches(v))
return r;
r = r.parentNode;
}
}
u.exports = o;
}
),
/***/
438: (
/***/
function(u, n, t) {
var o = t(828);
function r(x, E, g, h, b) {
var k = _.apply(this, arguments);
return x.addEventListener(g, k, b), {
destroy: function() {
x.removeEventListener(g, k, b);
}
};
}
function v(x, E, g, h, b) {
return typeof x.addEventListener == "function" ? r.apply(null, arguments) : typeof g == "function" ? r.bind(null, document).apply(null, arguments) : (typeof x == "string" && (x = document.querySelectorAll(x)), Array.prototype.map.call(x, function(k) {
return r(k, E, g, h, b);
}));
}
function _(x, E, g, h) {
return function(b) {
b.delegateTarget = o(b.target, E), b.delegateTarget && h.call(x, b);
};
}
u.exports = v;
}
),
/***/
879: (
/***/
function(u, n) {
n.node = function(t) {
return t !== void 0 && t instanceof HTMLElement && t.nodeType === 1;
}, n.nodeList = function(t) {
var o = Object.prototype.toString.call(t);
return t !== void 0 && (o === "[object NodeList]" || o === "[object HTMLCollection]") && "length" in t && (t.length === 0 || n.node(t[0]));
}, n.string = function(t) {
return typeof t == "string" || t instanceof String;
}, n.fn = function(t) {
var o = Object.prototype.toString.call(t);
return o === "[object Function]";
};
}
),
/***/
370: (
/***/
function(u, n, t) {
var o = t(879), r = t(438);
function v(g, h, b) {
if (!g && !h && !b)
throw new Error("Missing required arguments");
if (!o.string(h))
throw new TypeError("Second argument must be a String");
if (!o.fn(b))
throw new TypeError("Third argument must be a Function");
if (o.node(g))
return _(g, h, b);
if (o.nodeList(g))
return x(g, h, b);
if (o.string(g))
return E(g, h, b);
throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");
}
function _(g, h, b) {
return g.addEventListener(h, b), {
destroy: function() {
g.removeEventListener(h, b);
}
};
}
function x(g, h, b) {
return Array.prototype.forEach.call(g, function(k) {
k.addEventListener(h, b);
}), {
destroy: function() {
Array.prototype.forEach.call(g, function(k) {
k.removeEventListener(h, b);
});
}
};
}
function E(g, h, b) {
return r(document.body, g, h, b);
}
u.exports = v;
}
),
/***/
817: (
/***/
function(u) {
function n(t) {
var o;
if (t.nodeName === "SELECT")
t.focus(), o = t.value;
else if (t.nodeName === "INPUT" || t.nodeName === "TEXTAREA") {
var r = t.hasAttribute("readonly");
r || t.setAttribute("readonly", ""), t.select(), t.setSelectionRange(0, t.value.length), r || t.removeAttribute("readonly"), o = t.value;
} else {
t.hasAttribute("contenteditable") && t.focus();
var v = window.getSelection(), _ = document.createRange();
_.selectNodeContents(t), v.removeAllRanges(), v.addRange(_), o = v.toString();
}
return o;
}
u.exports = n;
}
),
/***/
279: (
/***/
function(u) {
function n() {
}
n.prototype = {
on: function(t, o, r) {
var v = this.e || (this.e = {});
return (v[t] || (v[t] = [])).push({
fn: o,
ctx: r
}), this;
},
once: function(t, o, r) {
var v = this;
function _() {
v.off(t, _), o.apply(r, arguments);
}
return _._ = o, this.on(t, _, r);
},
emit: function(t) {
var o = [].slice.call(arguments, 1), r = ((this.e || (this.e = {}))[t] || []).slice(), v = 0, _ = r.length;
for (v; v < _; v++)
r[v].fn.apply(r[v].ctx, o);
return this;
},
off: function(t, o) {
var r = this.e || (this.e = {}), v = r[t], _ = [];
if (v && o)
for (var x = 0, E = v.length; x < E; x++)
v[x].fn !== o && v[x].fn._ !== o && _.push(v[x]);
return _.length ? r[t] = _ : delete r[t], this;
}
}, u.exports = n, u.exports.TinyEmitter = n;
}
)
/******/
}, l = {};
function p(u) {
if (l[u])
return l[u].exports;
var n = l[u] = {
/******/
// no module.id needed
/******/
// no module.loaded needed
/******/
exports: {}
/******/
};
return s[u](n, n.exports, p), n.exports;
}
return function() {
p.n = function(u) {
var n = u && u.__esModule ? (
/******/
function() {
return u.default;
}
) : (
/******/
function() {
return u;
}
);
return p.d(n, { a: n }), n;
};
}(), function() {
p.d = function(u, n) {
for (var t in n)
p.o(n, t) && !p.o(u, t) && Object.defineProperty(u, t, { enumerable: !0, get: n[t] });
};
}(), function() {
p.o = function(u, n) {
return Object.prototype.hasOwnProperty.call(u, n);
};
}(), p(686);
}().default
);
});
}(L)), L.exports;
}
var Me = Ve();
const $e = /* @__PURE__ */ Ne(Me), Re = function(e, m) {
let s = Date.now(), l;
return (...p) => {
Date.now() - s < m && l && clearTimeout(l), l = setTimeout(() => {
e(...p);
}, m), s = Date.now();
};
}, Be = C({
name: "JsonViewer",
components: {
JsonBox: K
},
props: {
value: {
type: [Object, Array, String, Number, Boolean, Function],
required: !0
},
expanded: {
type: Boolean,
default: !1
},
expandDepth: {
type: Number,
default: 1
},
copyable: {
type: [Boolean, Object],
default: !1
},
sort: {
type: Boolean,
default: !1
},
boxed: {
type: Boolean,
default: !1
},
theme: {
type: String,
default: "light"
},
timeformat: {
type: Function,
default: (e) => e.toLocaleString()
},
previewMode: {
type: Boolean,
default: !1
},
parse: {
type: Boolean,
default: !1
}
},
emits: ["onKeyClick", "copied"],
/**
* Setup function for the JsonViewer component.
* @param props - The component's props.
* @param context - The setup context, including `emit`.
*/
setup(e, { emit: m }) {
const s = w(!1), l = w(!1), p = w(e.expanded), u = w(null), n = w(null);
I("expandDepth", e.expandDepth), I("timeformat", e.timeformat), I("keyClick", (h) => {
m("onKeyClick", h);
});
const t = O(() => "jv-container jv-" + e.theme + (e.boxed ? " boxed" : "")), o = O(() => {
if (typeof e.copyable == "boolean" && !e.copyable)
return { copyText: "copy", copiedText: "copied!", timeout: 2e3, align: "right" };
const h = e.copyable;
return {
copyText: h.copyText || "copy",
copiedText: h.copiedText || "copied!",
timeout: h.timeout || 2e3,
align: h.align || "right"
};
}), r = O(() => {
if (!e.parse || typeof e.value != "string")
return e.value;
try {
return JSON.parse(e.value);
} catch {
return e.value;
}
}), v = () => {
x();
}, x = Re(() => {
fe(() => {
n.value && (n.value.$el.clientHeight >= 250 ? l.value = !0 : l.value = !1);
});
}, 200), E = (h) => {
s.value || (s.value = !0, setTimeout(() => {
s.value = !1;
}, o.value.timeout), m("copied", h));
}, g = () => {
p.value = !p.value;
};
return J(() => e.value, () => {
v();
}), H(() => {
e.boxed && n.value && (v(), n.value.$el.addEventListener("resized", v, !0)), e.copyable && u.value && new $e(u.value, {
text: () => JSON.stringify(r.value, null, 2)
// Use parseValue for copying
}).on("success", E);
}), {
clip: u,
jsonBox: n,
copied: s,
expandableCode: l,
expandCode: p,
jvClass: t,
copyText: o,
parseValue: r,
toggleExpandCode: g
// Methods are already bound or don't need explicit exposure if not used in template
// onResized, // only called internally
// debResized, // only called internally
// onCopied, // only called internally
};
}
}), Le = (e, m) => {
const s = e.__vccOpts || e;
for (const [l, p] of m)
s[l] = p;
return s;
};
function De(e, m, s, l, p, u) {
const n = de("json-box");
return N(), A("div", {
class: S(e.jvClass)
}, [
e.copyable ? (N(), A("div", {
key: 0,
class: S(`jv-tooltip ${e.copyText.align || "right"}`)
}, [
q("span", {
ref: "clip",
class: S(["jv-button", { copied: e.copied }])
}, [
pe(e.$slots, "copy", { copied: e.copied }, () => [
ve(V(e.copied ? e.copyText.copiedText : e.copyText.copyText), 1)
])
], 2)
], 2)) : Z("", !0),
q("div", {
class: S(["jv-code", { open: e.expandCode, boxed: e.boxed }])
}, [
ye(n, {
ref: "jsonBox",
value: e.parseValue,
sort: e.sort,
"preview-mode": e.previewMode
}, null, 8, ["value", "sort", "preview-mode"])
], 2),
e.expandableCode && e.boxed ? (N(), A("div", {
key: 1,
class: "jv-more",
onClick: m[0] || (m[0] = (...t) => e.toggleExpandCode && e.toggleExpandCode(...t))
}, [
q("span", {
class: S(["jv-toggle", { open: !!e.expandCode }])
}, null, 2)
])) : Z("", !0)
], 2);
}
const Q = /* @__PURE__ */ Le(Be, [["render", De]]), Pe = (e) => {
e.component(Q.name, Q);
}, qe = {
install: Pe
};
export {
Q as JsonViewer,
qe as default
};