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

JSON tree rendering Vue3 component

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