object-visualizer/dist/object-visualizer.js

Visualize JSON object to DOM.

import { defineComponent as p, openBlock as l, createElementBlock as r, createElementVNode as o, toDisplayString as c, createCommentVNode as y, ref as S, watch as K, computed as $, resolveComponent as b, unref as a, withModifiers as w, Fragment as x, renderList as O, createBlock as A, withDirectives as _, vShow as j, resolveDynamicComponent as N, mergeProps as E, createVNode as q } from "vue";
const F = ["role", "aria-level"], V = { class: "key" }, z = {
  key: 0,
  class: "separator"
}, D = /* @__PURE__ */ o("span", { class: "value" }, "null", -1), T = p({
  inheritAttrs: !1
}), J = /* @__PURE__ */ p({
  ...T,
  __name: "NullWrapper",
  props: {
    data: null,
    name: null,
    role: null,
    ariaLevel: null
  },
  setup(e) {
    return (n, s) => (l(), r("span", {
      class: "null",
      role: e.role,
      "aria-level": e.ariaLevel
    }, [
      o("span", V, c(e.name), 1),
      e.name !== "" ? (l(), r("span", z, ":\xA0")) : y("", !0),
      D
    ], 8, F));
  }
}), M = ["role", "aria-level"], P = { class: "key" }, G = {
  key: 0,
  class: "separator"
}, H = /* @__PURE__ */ o("span", { class: "value" }, "true", -1), I = p({
  inheritAttrs: !1
}), Q = /* @__PURE__ */ p({
  ...I,
  __name: "TrueWrapper",
  props: {
    data: { type: Boolean },
    name: null,
    role: null,
    ariaLevel: null
  },
  setup(e) {
    return (n, s) => (l(), r("span", {
      class: "true",
      role: e.role,
      "aria-level": e.ariaLevel
    }, [
      o("span", P, c(e.name), 1),
      e.name !== "" ? (l(), r("span", G, ":\xA0")) : y("", !0),
      H
    ], 8, M));
  }
}), R = ["role", "aria-level"], X = { class: "key" }, Y = {
  key: 0,
  class: "separator"
}, Z = /* @__PURE__ */ o("span", { class: "value" }, "false", -1), ee = p({
  inheritAttrs: !1
}), ae = /* @__PURE__ */ p({
  ...ee,
  __name: "FalseWrapper",
  props: {
    data: { type: Boolean },
    name: null,
    role: null,
    ariaLevel: null
  },
  setup(e) {
    return (n, s) => (l(), r("span", {
      class: "false",
      role: e.role,
      "aria-level": e.ariaLevel
    }, [
      o("span", X, c(e.name), 1),
      e.name !== "" ? (l(), r("span", Y, ":\xA0")) : y("", !0),
      Z
    ], 8, R));
  }
}), ne = ["role", "aria-level"], te = { class: "key" }, le = {
  key: 0,
  class: "separator"
}, se = { class: "value" }, re = p({
  inheritAttrs: !1
}), de = /* @__PURE__ */ p({
  ...re,
  __name: "NumberWrapper",
  props: {
    data: null,
    name: null,
    role: null,
    ariaLevel: null
  },
  setup(e) {
    return (n, s) => (l(), r("span", {
      class: "number",
      role: e.role,
      "aria-level": e.ariaLevel
    }, [
      o("span", te, c(e.name), 1),
      e.name !== "" ? (l(), r("span", le, ":\xA0")) : y("", !0),
      o("span", se, c(e.data), 1)
    ], 8, ne));
  }
}), ie = ["role", "aria-level"], oe = { class: "key" }, ue = {
  key: 0,
  class: "separator"
}, ce = /* @__PURE__ */ o("span", { class: "quotes" }, '"', -1), pe = { class: "value" }, me = /* @__PURE__ */ o("span", { class: "quotes" }, '"', -1), ve = p({
  inheritAttrs: !1
}), ge = /* @__PURE__ */ p({
  ...ve,
  __name: "StringWrapper",
  props: {
    data: null,
    name: null,
    role: null,
    ariaLevel: null
  },
  setup(e) {
    return (n, s) => (l(), r("span", {
      class: "string",
      role: e.role,
      "aria-level": e.ariaLevel
    }, [
      o("span", oe, c(e.name), 1),
      e.name !== "" ? (l(), r("span", ue, ":\xA0")) : y("", !0),
      ce,
      o("span", pe, c(JSON.stringify(e.data).slice(1, -1)), 1),
      me
    ], 8, ie));
  }
}), k = /* @__PURE__ */ new Set();
function U(e) {
  const n = S(!1), s = () => {
    n.value = !n.value;
  }, u = S(!1), v = () => {
    n.value = !1, u.value = !u.value;
  };
  K(() => e.collapseSignal, v);
  const t = S(!1), f = () => {
    n.value = !0, t.value = !t.value;
  };
  K(() => e.expandSignal, f);
  const C = (h) => {
    k.clear(), h.metaKey === !0 && h.shiftKey === !0 ? v() : h.metaKey === !0 ? f() : s();
  };
  return K(
    () => e.data,
    () => {
      e.expandOnCreatedAndUpdated(e.path) ? f() : v();
    },
    { immediate: !0 }
  ), {
    isExpanding: n,
    innerCollapseSignal: u,
    innerExpandSignal: t,
    handleClick: C
  };
}
const fe = ["role", "aria-expanded", "aria-level"], ye = {
  key: 0,
  class: "value"
}, he = {
  key: 0,
  class: "value"
}, xe = p({
  inheritAttrs: !1,
  components: {}
}), W = /* @__PURE__ */ p({
  ...xe,
  __name: "ArrayWrapper",
  props: {
    path: null,
    data: null,
    name: null,
    expandOnCreatedAndUpdated: null,
    getKeys: null,
    role: null,
    ariaLevel: null,
    collapseSignal: { type: Boolean, default: !1 },
    expandSignal: { type: Boolean, default: !1 }
  },
  setup(e) {
    const n = e, { isExpanding: s, innerExpandSignal: u, innerCollapseSignal: v, handleClick: t } = U(n), f = $(() => n.getKeys(n.data, n.path)), C = (g) => n.data[g], h = k.has(n.data);
    return k.add(n.data), (g, m) => {
      const d = b("wrapper");
      return l(), r("span", {
        class: "array",
        role: e.role,
        "aria-expanded": a(s),
        "aria-level": e.ariaLevel,
        onClick: m[5] || (m[5] = w(
          (...i) => a(t) && a(t)(...i),
          ["self"]
        ))
      }, [
        o("span", {
          class: "indicator",
          onClick: m[0] || (m[0] = (...i) => a(t) && a(t)(...i))
        }, c(a(s) ? "\u25BC" : "\u25B6"), 1),
        o("span", {
          class: "key",
          onClick: m[1] || (m[1] = (...i) => a(t) && a(t)(...i))
        }, c(e.name === "" ? "" : e.name), 1),
        o("span", {
          class: "separator",
          onClick: m[2] || (m[2] = (...i) => a(t) && a(t)(...i))
        }, c(e.name === "" ? "" : ": "), 1),
        o("span", {
          class: "count",
          onClick: m[3] || (m[3] = (...i) => a(t) && a(t)(...i))
        }, c(a(s) === !1 && e.data.length >= 2 ? "(" + e.data.length + ")" : ""), 1),
        o("span", {
          class: "preview",
          onClick: m[4] || (m[4] = (...i) => a(t) && a(t)(...i))
        }, c(a(s) ? "Array(" + e.data.length + ")" : "[...]"), 1),
        a(h) ? (l(), r(x, { key: 0 }, [
          a(s) ? (l(), r("span", ye, [
            (l(!0), r(x, null, O(a(f), (i) => (l(), A(d, {
              key: i,
              name: i,
              path: [...e.path, i],
              data: C(i),
              "expand-signal": a(u),
              "collapse-signal": a(v),
              expandOnCreatedAndUpdated: () => !1,
              getKeys: e.getKeys,
              "aria-level": e.ariaLevel
            }, null, 8, ["name", "path", "data", "expand-signal", "collapse-signal", "expandOnCreatedAndUpdated", "getKeys", "aria-level"]))), 128))
          ])) : y("", !0)
        ], 64)) : (l(), r(x, { key: 1 }, [
          a(s) ? (l(), r("span", he, [
            (l(!0), r(x, null, O(a(f), (i) => (l(), A(d, {
              key: i,
              name: i,
              path: [...e.path, i],
              data: C(i),
              "expand-signal": a(u),
              "collapse-signal": a(v),
              expandOnCreatedAndUpdated: e.expandOnCreatedAndUpdated,
              getKeys: e.getKeys,
              "aria-level": e.ariaLevel
            }, null, 8, ["name", "path", "data", "expand-signal", "collapse-signal", "expandOnCreatedAndUpdated", "getKeys", "aria-level"]))), 128))
          ])) : y("", !0)
        ], 64))
      ], 8, fe);
    };
  }
}), Ce = ["role", "aria-expanded", "aria-level"], $e = {
  key: 0,
  class: "value"
}, Ae = {
  key: 1,
  class: "value"
}, ke = p({
  inheritAttrs: !1,
  components: {}
}), B = /* @__PURE__ */ p({
  ...ke,
  __name: "ObjectWrapper",
  props: {
    path: null,
    data: null,
    name: null,
    expandOnCreatedAndUpdated: null,
    getKeys: null,
    role: null,
    ariaLevel: null,
    collapseSignal: { type: Boolean, default: !1 },
    expandSignal: { type: Boolean, default: !1 }
  },
  setup(e) {
    const n = e, { isExpanding: s, innerExpandSignal: u, innerCollapseSignal: v, handleClick: t } = U(n), f = $(() => n.getKeys(n.data, n.path)), C = k.has(n.data);
    return k.add(n.data), (h, g) => {
      const m = b("wrapper");
      return l(), r("span", {
        class: "object",
        role: e.role,
        "aria-expanded": a(s),
        "aria-level": e.ariaLevel,
        onClick: g[4] || (g[4] = w(
          (...d) => a(t) && a(t)(...d),
          ["self"]
        ))
      }, [
        o("span", {
          class: "indicator",
          onClick: g[0] || (g[0] = (...d) => a(t) && a(t)(...d))
        }, c(a(s) ? "\u25BC" : "\u25B6"), 1),
        o("span", {
          class: "key",
          onClick: g[1] || (g[1] = (...d) => a(t) && a(t)(...d))
        }, c(e.name === "" ? "" : e.name), 1),
        o("span", {
          class: "separator",
          onClick: g[2] || (g[2] = (...d) => a(t) && a(t)(...d))
        }, c(e.name === "" ? "" : ": "), 1),
        o("span", {
          class: "preview",
          onClick: g[3] || (g[3] = (...d) => a(t) && a(t)(...d))
        }, c(a(s) ? "" : "{...}"), 1),
        a(C) ? (l(), r(x, { key: 0 }, [
          a(s) ? (l(), r("span", $e, [
            (l(!0), r(x, null, O(a(f), (d) => (l(), A(m, {
              key: d,
              class: "value",
              name: d,
              path: [...e.path, d],
              data: e.data[d],
              "expand-signal": a(u),
              "collapse-signal": a(v),
              expandOnCreatedAndUpdated: () => !1,
              getKeys: e.getKeys,
              "aria-level": e.ariaLevel
            }, null, 8, ["name", "path", "data", "expand-signal", "collapse-signal", "expandOnCreatedAndUpdated", "getKeys", "aria-level"]))), 128))
          ])) : y("", !0)
        ], 64)) : _((l(), r("span", Ae, [
          (l(!0), r(x, null, O(a(f), (d) => (l(), A(m, {
            key: d,
            class: "value",
            name: d,
            path: [...e.path, d],
            data: e.data[d],
            "expand-signal": a(u),
            "collapse-signal": a(v),
            expandOnCreatedAndUpdated: e.expandOnCreatedAndUpdated,
            getKeys: e.getKeys,
            "aria-level": e.ariaLevel
          }, null, 8, ["name", "path", "data", "expand-signal", "collapse-signal", "expandOnCreatedAndUpdated", "getKeys", "aria-level"]))), 128))
        ], 512)), [
          [j, a(s)]
        ])
      ], 8, Ce);
    };
  }
}), Oe = (e) => Object.prototype.toString.call(e).slice(8, -1), L = p({
  inheritAttrs: !1,
  props: {
    path: {
      required: !0,
      type: Array
    },
    data: {
      required: !0
    },
    name: {
      required: !0,
      type: String
    },
    collapseSignal: {
      default: !1,
      type: Boolean
    },
    expandSignal: {
      default: !1,
      type: Boolean
    },
    expandOnCreatedAndUpdated: {
      required: !0,
      type: Function
    },
    getKeys: {
      required: !0,
      type: Function
    },
    ariaLevel: {
      required: !0,
      type: Number
    }
  },
  setup(e) {
    const n = $(() => Oe(e.data)), s = $(() => {
      switch (n.value) {
        case "Null":
          return "null-wrapper";
        case "Boolean":
          return e.data ? "true-wrapper" : "false-wrapper";
        case "Number":
          return "number-wrapper";
        case "String":
          return "string-wrapper";
        case "Array":
          return "array-wrapper";
        case "Object":
          return "object-wrapper";
      }
    }), u = $(() => e.ariaLevel === 0 ? n.value === "Array" || n.value === "Object" ? "tree" : void 0 : n.value === "Array" || n.value === "Object" ? "group" : "treeitem"), v = $(() => {
      const t = {};
      return u.value !== void 0 && (t.role = u.value, t.ariaLevel = e.ariaLevel + 1), t;
    });
    return {
      is: s,
      role: u,
      attrs: v
    };
  },
  components: {
    NullWrapper: J,
    TrueWrapper: Q,
    FalseWrapper: ae,
    NumberWrapper: de,
    StringWrapper: ge,
    ArrayWrapper: W,
    ObjectWrapper: B
  }
});
W.components.Wrapper = L;
B.components.Wrapper = L;
const Se = (e, n) => {
  const s = e.__vccOpts || e;
  for (const [u, v] of n)
    s[u] = v;
  return s;
};
function Ke(e, n, s, u, v, t) {
  return l(), A(N(e.is), E({
    name: e.name,
    path: e.path,
    data: e.data,
    "collapse-signal": e.collapseSignal,
    "expand-signal": e.expandSignal,
    expandOnCreatedAndUpdated: e.expandOnCreatedAndUpdated,
    getKeys: e.getKeys,
    class: e.ariaLevel === 0 ? "object-visualizer" : void 0
  }, e.attrs), null, 16, ["name", "path", "data", "collapse-signal", "expand-signal", "expandOnCreatedAndUpdated", "getKeys", "class"]);
}
const Le = /* @__PURE__ */ Se(L, [["render", Ke]]), be = { class: "object-visualizer" }, Ue = /* @__PURE__ */ p({
  __name: "ObjectVisualizer",
  props: {
    data: null,
    rootName: { default: "" },
    expandOnCreatedAndUpdated: { type: Function, default: () => !1 },
    getKeys: { type: Function, default: (e, n) => Object.keys(e) }
  },
  setup(e) {
    return (n, s) => (l(), r("section", be, [
      q(Le, {
        data: e.data,
        name: e.rootName,
        "expand-on-created-and-updated": e.expandOnCreatedAndUpdated,
        "get-keys": e.getKeys,
        path: [],
        "aria-level": 0
      }, null, 8, ["data", "name", "expand-on-created-and-updated", "get-keys"])
    ]));
  }
});
export {
  Ue as ObjectVisualizer
};