@anilkumarthakur/vue3-json-viewer/dist/index.umd.js

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.

(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["@anilkumarthakur/vue3-json-viewer"]={},d.Vue))})(this,function(d,e){"use strict";var w=document.createElement("style");w.textContent=`.json-viewer-dark,.json-viewer-light{font-family:Fira Code,Courier New,Courier,monospace;font-size:14px;padding:5px;width:100%;box-sizing:border-box;border-radius:8px;box-shadow:0 4px 8px #0000001a}.json-viewer-dark{color:#f8f8f2;background-color:#282c34}.json-viewer-light{color:#282c34;background-color:#f8f8f2}.cursor-pointer{cursor:pointer}.key-dark{color:#d19a66}.key-light{color:#8d6e63}.string-value{color:#98c379}.string-value-light{color:#388e3c}.number-value{color:#d19a66}.number-value-light{color:#f57c00}.boolean-value{color:#56b6c2}.boolean-value-light{color:#0288d1}.null-value{color:#9cdcfe}.null-value-light{color:#00acc1}.date-value{color:#e5c07b}.date-value-light{color:#fbc02d}.regexp-value{color:#c678dd}.regexp-value-light{color:#7b1fa2}.toggle-btn{cursor:pointer}.toggle-btn-dark{color:#61dafb}.toggle-btn-light{color:#1976d2}.type-label{font-style:italic}.node-children{margin-left:5px;padding-left:5px}.node-children-dark{border-left:1px dashed #444}.node-children-light{border-left:1px dashed #bdbdbd}.leaf-node{padding:1px 0;display:flex;align-items:center}.leaf-node-dark{background-color:#282c34}.leaf-node-light{background-color:#f8f8f2}.copy-icon{cursor:pointer;width:12px;height:12px}.copy-icon-dark{color:#61dafb}.copy-icon-light{color:#1976d2}.margin-lr-5{margin-left:5px;margin-right:5px}.height10{height:10px}.width10{width:10px}.node-header{display:flex;align-items:center}.preview{margin-left:5px;font-style:italic}.preview-dark{color:#ccc}.preview-light{color:#333}.copy-tooltip{border-radius:4px;font-size:12px}.copy-tooltip-dark{background-color:#444;color:#f8f8f2;padding:5px}.copy-tooltip-light{background-color:#f8f8f2;color:#282c34}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter-from,.fade-leave-to{opacity:0}.copy-icon:hover{opacity:.7}.key{font-size:.8rem}
/*$vite$:1*/`,document.head.appendChild(w);function f(c,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("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 y(c,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("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 g(c,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("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"}),e.createElementVNode("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 E={key:0},u={key:0},z={key:1},S={key:2},$={key:3},b=e.defineComponent({__name:"NestedComponent",props:{data:{default:()=>{}},level:{default:0},parentKey:{default:""},darkMode:{type:Boolean,default:!0},expanded:{type:Boolean,default:!1}},setup(c){const l=c,t=e.ref(l.expanded??!1);e.onMounted(()=>{l.level===0&&(t.value=!0)});const V=e.computed(()=>typeof l.data=="object"&&!Array.isArray(l.data)&&l.data!==null&&!(l.data instanceof RegExp)&&!(l.data instanceof Map)&&!(l.data instanceof Set)),N=e.computed(()=>Array.isArray(l.data)),D=e.computed(()=>l.data instanceof RegExp),C=e.computed(()=>l.data instanceof Map),B=e.computed(()=>l.data instanceof Set),K=e.computed(()=>["string","number","boolean","object","regexp"].includes(typeof l.data)&&l.data!==null),A=e.computed(()=>typeof l.data=="string"?"string-value":typeof l.data=="number"?"number-value":typeof l.data=="boolean"?"boolean-value":l.data===null?"null-value":l.data instanceof Date?"date-value":l.data instanceof RegExp?"regexp-value":"");function k(){t.value=!t.value}function m(){const o=JSON.stringify(l.data,null,2);navigator.clipboard.writeText(o).then(()=>{p.value=!0,setTimeout(()=>p.value=!1,2e3)})}function s(o){const r=l.darkMode?["#e06c75","#e5c07b","#98c379","#56b6c2","#61afef","#c678dd"]:["#d32f2f","#fbc02d","#388e3c","#0288d1","#1976d2","#7b1fa2"];return r[o%r.length]}const p=e.ref(!1),T=e.computed(()=>{if(V.value){const o=Object.keys(l.data);return`{ ${o.slice(0,2).map(n=>`${n}: ${h(l.data[n])}`).join(", ")}${o.length>2?", ...":""} }`}else{if(N.value)return`[${l.data.slice(0,2).map(r=>h(r)).join(", ")}${l.data.length>2?", ...":""}]`;if(C.value){const o=Array.from(l.data.entries());return`Map { ${o.slice(0,2).map(n=>{const[i,a]=n;return`${i}: ${h(a)}`}).join(", ")}${o.length>2?", ...":""} }`}else if(B.value){const o=Array.from(l.data.values());return`Set { ${o.slice(0,2).map(n=>h(n)).join(", ")}${o.length>2?", ...":""} }`}}return""});function h(o){return o===null?"null":o===void 0?"undefined":typeof o=="string"?`"${o}"`:typeof o=="number"||typeof o=="boolean"?o:Array.isArray(o)?"[...]":typeof o=="object"?"{...}":o instanceof RegExp?o.toString():o instanceof Date?o.toISOString():String(o)}function L(o){return o===null?"null":o===void 0?"undefined":typeof o=="string"?`"${o}"`:typeof o=="number"||typeof o=="boolean"?o:o instanceof RegExp?o.toString():o instanceof Date?o.toISOString():String(o)}const O=e.computed(()=>l.data instanceof Date);return(o,r)=>{const n=e.resolveComponent("NestedComponent",!0);return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"json-viewer-dark":o.darkMode&&o.level===0,"json-viewer-light":!o.darkMode&&o.level===0}),style:e.normalizeStyle({marginLeft:o.level*10+"px",padding:"2px 0"})},[V.value&&!D.value&&!O.value&&!C.value&&!B.value?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("span",{class:"cursor-pointer",onClick:k},[t.value?(e.openBlock(),e.createBlock(e.unref(f),{key:0,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])):e.createCommentVNode("",!0),t.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(y),{key:1,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"type-label key"},[e.createTextVNode(e.toDisplayString(o.parentKey)+" ",1),o.level!==0?(e.openBlock(),e.createElementBlock("span",u,":")):e.createCommentVNode("",!0),r[0]||(r[0]=e.createTextVNode(" { "))],4),t.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["preview",{"preview-dark":o.darkMode,"preview-light":!o.darkMode}])},e.toDisplayString(T.value),3)),o.level!==0?(e.openBlock(),e.createElementBlock("span",{key:3,style:e.normalizeStyle({color:s(o.level)}),class:"key key-count margin-lr-5 cursor-pointer"},e.toDisplayString(Object.keys(o.data).length)+" ...",5)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(g),{class:e.normalizeClass(["copy-icon margin-lr-5 cursor-pointer",o.darkMode?"copy-icon-dark":"copy-icon-light"]),onClick:e.withModifiers(m,["stop"])},null,8,["class"]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["copy-tooltip",{"copy-tooltip-dark":o.darkMode,"copy-tooltip-light":!o.darkMode}])},"Copied!",2)):e.createCommentVNode("",!0)]),_:1}),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["node-children",o.darkMode?"node-children-dark":"node-children-light"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.data,(i,a)=>(e.openBlock(),e.createBlock(n,{key:a,darkMode:o.darkMode,data:i,level:o.level+1,parentKey:a,expanded:t.value},null,8,["darkMode","data","level","parentKey","expanded"]))),128))],2),[[e.vShow,t.value]]),e.createElementVNode("span",{class:e.normalizeClass(["toggle-btn cursor-pointer",o.darkMode?"toggle-btn-dark":"toggle-btn-light"]),onClick:k},"},",2)])):N.value?(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("span",{onClick:k,class:"cursor-pointer"},[t.value?(e.openBlock(),e.createBlock(e.unref(f),{key:0,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])):(e.openBlock(),e.createBlock(e.unref(y),{key:1,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"key type-label"},[e.createTextVNode(e.toDisplayString(o.parentKey)+":",1),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"key key-count cursor-pointer"}," ["+e.toDisplayString(o.data.length)+"]...",5)],4)]),e.createVNode(e.unref(g),{class:e.normalizeClass(["copy-icon margin-lr-5 cursor-pointer",o.darkMode?"copy-icon-dark":"copy-icon-light"]),onClick:m},null,8,["class"]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["copy-tooltip",{"copy-tooltip-dark":o.darkMode,"copy-tooltip-light":!o.darkMode}])},"Copied!",2)):e.createCommentVNode("",!0)]),_:1}),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["node-children",o.darkMode?"node-children-dark":"node-children-light"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.data,(i,a)=>(e.openBlock(),e.createBlock(n,{key:a,darkMode:o.darkMode,data:i,level:o.level+1,parentKey:`${o.parentKey}[${a}]`,expanded:t.value},null,8,["darkMode","data","level","parentKey","expanded"]))),128))],2),[[e.vShow,t.value]])])):C.value?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("span",{onClick:k,class:"cursor-pointer"},[t.value?(e.openBlock(),e.createBlock(e.unref(f),{key:0,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])):(e.openBlock(),e.createBlock(e.unref(y),{key:1,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"key type-label"},[e.createTextVNode(e.toDisplayString(o.parentKey)+": ",1),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"key key-count cursor-pointer"}," [Map]",4)],4)]),e.createVNode(e.unref(g),{class:e.normalizeClass(["copy-icon margin-lr-5 cursor-pointer",o.darkMode?"copy-icon-dark":"copy-icon-light"]),onClick:m},null,8,["class"]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["copy-tooltip",{"copy-tooltip-dark":o.darkMode,"copy-tooltip-light":!o.darkMode}])},"Copied!",2)):e.createCommentVNode("",!0)]),_:1}),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["node-children",o.darkMode?"node-children-dark":"node-children-light"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Array.from(o.data.entries()),(i,a)=>(e.openBlock(),e.createBlock(n,{key:a,darkMode:o.darkMode,data:i,level:o.level+1,parentKey:a,expanded:t.value},null,8,["darkMode","data","level","parentKey","expanded"]))),128))],2),[[e.vShow,t.value]])])):B.value?(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("span",{onClick:k,class:"cursor-pointer"},[t.value?(e.openBlock(),e.createBlock(e.unref(f),{key:0,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])):(e.openBlock(),e.createBlock(e.unref(y),{key:1,class:e.normalizeClass([["toggle-btn",o.darkMode?"toggle-btn-dark":"toggle-btn-light","cursor-pointer"],"margin-lr-5 height10 width10"])},null,8,["class"])),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"key type-label"},[e.createTextVNode(e.toDisplayString(o.parentKey)+": ",1),e.createElementVNode("span",{style:e.normalizeStyle({color:s(o.level)}),class:"key key-count cursor-pointer"}," [Set]",4)],4)]),e.createVNode(e.unref(g),{class:e.normalizeClass(["copy-icon margin-lr-5 cursor-pointer",o.darkMode?"copy-icon-dark":"copy-icon-light"]),onClick:m},null,8,["class"]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["copy-tooltip",{"copy-tooltip-dark":o.darkMode,"copy-tooltip-light":!o.darkMode}])},"Copied!",2)):e.createCommentVNode("",!0)]),_:1}),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["node-children",o.darkMode?"node-children-dark":"node-children-light"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Array.from(o.data.values()),(i,a)=>(e.openBlock(),e.createBlock(n,{key:a,darkMode:o.darkMode,data:i,level:o.level+1,parentKey:`${o.parentKey}[${a}]`,expanded:t.value},null,8,["darkMode","data","level","parentKey","expanded"]))),128))],2),[[e.vShow,t.value]])])):(e.openBlock(),e.createElementBlock("div",{key:4,class:e.normalizeClass(["leaf-node",o.darkMode?"leaf-node-dark":"leaf-node-light"])},[e.createElementVNode("span",{onClick:k},[e.createElementVNode("span",{class:e.normalizeClass(["key",o.darkMode?"key-dark":"key-light"])},e.toDisplayString(o.parentKey),3),r[1]||(r[1]=e.createTextVNode(": ")),e.createElementVNode("span",{class:e.normalizeClass(["key",A.value,o.darkMode?"value-dark":"value-light"])},e.toDisplayString(L(o.data)),3)]),K.value?(e.openBlock(),e.createBlock(e.unref(g),{key:0,class:e.normalizeClass(["copy-icon margin-lr-5 cursor-pointer",o.darkMode?"copy-icon-dark":"copy-icon-light"]),onClick:m},null,8,["class"])):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["copy-tooltip",{"copy-tooltip-dark":o.darkMode,"copy-tooltip-light":!o.darkMode}])},"Copied!",2)):e.createCommentVNode("",!0)]),_:1})],2))],6)}}}),M=e.defineComponent({__name:"JsonViewer",props:{data:{default:()=>{}},level:{default:0},parentKey:{default:""},darkMode:{type:Boolean,default:!0},expanded:{type:Boolean,default:!1}},setup(c){return(l,t)=>(e.openBlock(),e.createBlock(b,{darkMode:l.darkMode,data:l.data,level:l.level,expanded:l.expanded},null,8,["darkMode","data","level","expanded"]))}}),j={install(c){c.component("JsonViewer",M),c.component("NestedComponent",b)}};d.JsonViewer=M,d.NestedComponent=b,d.jsonViewerPlugin=j,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.umd.js.map