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

JSON tree rendering Vue3 component

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