json-tree-view-vue3/dist/json-tree-view-vue3.es.js

JSON tree rendering Vue3 component

import { defineComponent as _, reactive as D, computed as $, resolveComponent as N, openBlock as d, createElementBlock as h, createElementVNode as g, withModifiers as B, normalizeClass as w, createTextVNode as T, toDisplayString as b, Fragment as R, renderList as K, createBlock as A, createCommentVNode as j, withKeys as C, normalizeStyle as L } from "vue";
const J = (t) => ({
  is: () => J(t),
  default: () => t
}), O = (t) => ({
  is: (a, o) => a(t) ? J(o()) : O(t),
  default: (a) => a()
}), U = (t) => ({
  is: (a, o) => a(t) ? J(o()) : O(t)
}), k = (t) => () => t, Y = { class: "json-view-item" }, z = { key: 0 }, x = ["aria-expanded"], F = { class: "properties" }, I = { key: 0 }, M = ["role", "tabindex"], q = { class: "value-key" };
var V = /* @__PURE__ */ ((t) => (t[t.OBJECT = 0] = "OBJECT", t[t.ARRAY = 1] = "ARRAY", t[t.VALUE = 2] = "VALUE", t))(V || {});
const G = /* @__PURE__ */ _({
  name: "JsonTreeViewItem",
  __name: "JsonTreeViewItem",
  props: {
    data: {},
    maxDepth: { default: 1 },
    canSelect: { type: Boolean, default: !1 }
  },
  emits: ["selected"],
  setup(t, { emit: a }) {
    const o = t, u = a, l = D({
      open: o.data.depth < o.maxDepth
    }), m = () => {
      l.open = !l.open;
    }, v = (e) => u("selected", {
      key: e.key,
      value: e.value,
      path: e.path
    }), s = (e) => u("selected", e), c = (e) => {
      const n = Number(e.key);
      return isNaN(n) ? `"${e.key}":` : `${e.key}":`;
    }, i = (e) => U(typeof e).is((n) => n === "string", k("var(--jtv-string-color)")).is((n) => n === "number", k("var(--jtv-number-color)")).is((n) => n === "boolean", k("var(--jtv-boolean-color)")).is((n) => n === "object", k("var(--jtv-null-color)")).default(k("var(--jtv-valueKey-color)")), r = $(() => ({
      "chevron-arrow": !0,
      opened: l.open
    })), f = $(() => ({
      "value-key": !0,
      "can-select": o.canSelect
    })), S = $(() => {
      const e = o.data.length;
      return o.data.type === 1 ? e === 1 ? `${e} element` : `${e} elements` : e === 1 ? `${e} property` : `${e} properties`;
    }), p = $(() => JSON.stringify(o.data.value));
    return (e, n) => {
      const E = N("JsonTreeViewItem", !0);
      return d(), h("div", Y, [
        e.data.type === 0 || e.data.type === 1 ? (d(), h("div", z, [
          g("button", {
            class: "data-key",
            "aria-expanded": l.open ? "true" : "false",
            onClick: B(m, ["stop"])
          }, [
            g("div", {
              class: w(r.value)
            }, null, 2),
            T(" " + b(e.data.key) + ": ", 1),
            g("span", F, b(S.value), 1)
          ], 8, x),
          l.open ? (d(), h("div", I, [
            (d(!0), h(R, null, K(e.data.children, (y) => (d(), A(E, {
              key: c(y),
              data: y,
              maxDepth: e.maxDepth,
              canSelect: e.canSelect,
              onSelected: s
            }, null, 8, ["data", "maxDepth", "canSelect"]))), 128))
          ])) : j("", !0)
        ])) : j("", !0),
        e.data.type === 2 ? (d(), h("div", {
          key: 1,
          class: w(f.value),
          role: e.canSelect ? "button" : void 0,
          tabindex: e.canSelect ? "0" : void 0,
          onClick: n[0] || (n[0] = (y) => v(e.data)),
          onKeyup: [
            n[1] || (n[1] = C((y) => v(e.data), ["enter"])),
            n[2] || (n[2] = C((y) => v(e.data), ["space"]))
          ]
        }, [
          g("span", q, b(e.data.key) + ":", 1),
          g("span", {
            style: L({ color: i(e.data.value) })
          }, b(p.value), 5)
        ], 42, M)) : j("", !0)
      ]);
    };
  }
}), H = /* @__PURE__ */ _({
  name: "JsonTreeView",
  __name: "JsonTreeView",
  props: {
    json: {},
    rootKey: { default: "/" },
    maxDepth: { default: 1 },
    colorScheme: { default: "light" }
  },
  emits: ["selected"],
  setup(t, { emit: a }) {
    const o = t, u = a, l = (s) => u("selected", s), m = (s, c, i, r, f) => {
      if (c instanceof Object) {
        if (c instanceof Array) {
          const p = c.map(
            (e, n) => m(
              n.toString(),
              e,
              i + 1,
              f ? `${r}${s}[${n}].` : `${r}`,
              !1
            )
          );
          return {
            key: s,
            type: V.ARRAY,
            depth: i,
            path: r,
            length: p.length,
            children: p
          };
        }
        const S = Object.entries(c).map(
          ([p, e]) => m(p, e, i + 1, f ? `${r}${s}.` : `${r}`, !0)
        );
        return {
          key: s,
          type: V.OBJECT,
          depth: i,
          path: r,
          length: S.length,
          children: S
        };
      } else
        return {
          key: s,
          type: V.VALUE,
          path: f ? `${r}${s}` : r.slice(0, -1),
          depth: i,
          value: c
        };
    }, v = $(() => {
      const s = JSON.parse(o.json);
      return s instanceof Object ? m(o.rootKey, { ...s }, 0, "", !0) : {
        key: o.rootKey,
        type: V.VALUE,
        path: "",
        depth: 0,
        value: o.json
      };
    });
    return (s, c) => (d(), A(G, {
      class: w([{ "root-item": !0, dark: s.colorScheme === "dark" }]),
      data: v.value,
      maxDepth: s.maxDepth,
      onSelected: l
    }, null, 8, ["class", "data", "maxDepth"]));
  }
}), P = (t, a) => {
  const o = t.__vccOpts || t;
  for (const [u, l] of a)
    o[u] = l;
  return o;
}, W = /* @__PURE__ */ P(H, [["__scopeId", "data-v-f85384eb"]]);
export {
  W as JsonTreeView,
  G as JsonTreeViewItem
};
//# sourceMappingURL=json-tree-view-vue3.es.js.map