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

JSON tree rendering Vue3 component

(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m["json-tree-view-vue3"]={},m.Vue))})(this,(function(m,t){"use strict";var g=document.createElement("style");g.textContent=`.json-view-item:where(:not(.root-item)){margin-inline-start:15px}.value-key{color:var(--jtv-valueKey-color);font-weight:600;white-space:nowrap;display:inline-block;padding-block:5px;padding-inline:10px 5px;margin-inline-start:10px;border-radius:2px}.value-key.can-select{cursor:pointer;transition:background-color .2s ease}.value-key.can-select:is(:hover,:focus-visible){background-color:#00000014}.value-key.can-select:focus-visible{outline:2px solid var(--jtv-hover-color);outline-offset:2px}.data-key{all:unset;box-sizing:border-box;color:var(--jtv-key-color);font-weight:600;white-space:nowrap;display:flex;align-items:center;inline-size:100%;padding-block:5px;padding-inline:5px;border-radius:2px;cursor:pointer;transition:background-color .2s ease}.data-key:is(:hover,:focus-visible){background-color:var(--jtv-hover-color)}.data-key:focus-visible{outline:2px solid var(--jtv-hover-color);outline-offset:2px}.data-key .properties{font-weight:300;opacity:.9;margin-inline-start:calc(var(--jtv-spacing-unit, 4px) * 1);-webkit-user-select:none;user-select:none}.chevron-arrow{flex-shrink:0;inline-size:var(--jtv-arrow-size);block-size:var(--jtv-arrow-size);margin-inline:5px 20px;border-inline-end:2px solid var(--jtv-arrow-color);border-block-end:2px solid var(--jtv-arrow-color);transform:rotate(-45deg);transition:transform .2s ease}.chevron-arrow.opened{margin-block-start:-3px;transform:rotate(45deg)}.expand-enter-active,.expand-leave-active{transition:opacity .2s ease,max-block-size .2s ease;overflow:hidden}.expand-enter-from,.expand-leave-to{opacity:0;max-block-size:0}.expand-enter-to,.expand-leave-from{opacity:1;max-block-size:1000px}@media(prefers-reduced-motion:reduce){.value-key.can-select,.data-key,.chevron-arrow,.expand-enter-active,.expand-leave-active{transition:none}}.root-item[data-v-9f840ee1]{--jtv-key-color: oklch(.55 .15 240);--jtv-valueKey-color: oklch(.25 .05 210);--jtv-string-color: oklch(.6 .12 230);--jtv-number-color: oklch(.65 .1 180);--jtv-boolean-color: oklch(.55 .15 40);--jtv-null-color: oklch(.55 .12 280);--jtv-arrow-color: oklch(.3 0 0);--jtv-hover-color: oklch(0 0 0 / .1);--jtv-arrow-size: 6px;--jtv-spacing-unit: 4px;display:block;inline-size:100%;block-size:auto;margin-inline-start:0}.root-item.dark[data-v-9f840ee1]{--jtv-key-color: oklch(.75 .1 220);--jtv-valueKey-color: oklch(.95 .02 90);--jtv-hover-color: oklch(1 0 0 / .1);--jtv-arrow-color: oklch(.95 .02 90)}
/*$vite$:1*/`,document.head.appendChild(g);const w=e=>Array.isArray(e),j=e=>typeof e=="object"&&e!==null&&!Array.isArray(e),S=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)",$=e=>{const c=Number(e);return Number.isNaN(c)?`"${e}":`:`${e}":`},E=(e,c)=>e===1?`${e} ${c?"element":"property"}`:`${e} ${c?"elements":"properties"}`,V=(e,c,i,s=!1)=>i?s?`${e}${c}[${c}].`:`${e}${c}.`:e,z=(e,c,i)=>i?`${e}${c}`:e.slice(0,-1),B={class:"json-view-item"},N=["aria-expanded"],J={class:"properties"},A={class:"value-key"};var h=(e=>(e[e.OBJECT=0]="OBJECT",e[e.ARRAY=1]="ARRAY",e[e.VALUE=2]="VALUE",e))(h||{});const C=t.defineComponent({name:"JsonTreeViewItem",__name:"JsonTreeViewItem",props:{data:{},maxDepth:{default:1},canSelect:{type:Boolean,default:!1}},emits:["selected"],setup(e,{emit:c}){const i=c,s=t.ref(e.data.depth<e.maxDepth),p=()=>{s.value=!s.value},f=n=>{const a={key:n.key,value:n.value,path:n.path};i("selected",a)},v=n=>i("selected",n),y=t.computed(()=>({"chevron-arrow":!0,opened:s.value})),k=t.computed(()=>({"value-key":!0,"can-select":e.canSelect})),x=t.computed(()=>{const{length:n,type:a}=e.data;return n===void 0?"":E(n,a===1)}),o=t.computed(()=>JSON.stringify(e.data.value)),r=n=>$(n.key),l=n=>S(n);return(n,a)=>{const u=t.resolveComponent("JsonTreeViewItem",!0);return t.openBlock(),t.createElementBlock("div",B,[e.data.type===0||e.data.type===1?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("button",{class:"data-key",type:"button","aria-expanded":s.value,onClick:t.withModifiers(p,["stop"])},[t.createElementVNode("div",{class:t.normalizeClass(y.value),"aria-hidden":"true"},null,2),t.createElementVNode("span",null,t.toDisplayString(e.data.key)+":",1),t.createElementVNode("span",J,t.toDisplayString(x.value),1)],8,N),t.createVNode(t.Transition,{name:"expand"},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",null,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.data.children,d=>(t.openBlock(),t.createBlock(u,{key:r(d),data:d,"max-depth":e.maxDepth,"can-select":e.canSelect,onSelected:v},null,8,["data","max-depth","can-select"]))),128))],512),[[t.vShow,s.value]])]),_:1})],64)):t.createCommentVNode("",!0),e.data.type===2?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.canSelect?"button":"div"),{key:1,class:t.normalizeClass(k.value),type:e.canSelect?"button":null,tabindex:e.canSelect?0:null,onClick:a[0]||(a[0]=d=>e.canSelect?f(e.data):null),onKeyup:[a[1]||(a[1]=t.withKeys(d=>e.canSelect?f(e.data):null,["enter"])),a[2]||(a[2]=t.withKeys(t.withModifiers(d=>e.canSelect?f(e.data):null,["prevent"]),["space"]))]},{default:t.withCtx(()=>[t.createElementVNode("span",A,t.toDisplayString(e.data.key)+":",1),t.createElementVNode("span",{style:t.normalizeStyle({color:l(e.data.value)})},t.toDisplayString(o.value),5)]),_:1},40,["class","type","tabindex"])):t.createCommentVNode("",!0)])}}}),D=((e,c)=>{const i=e.__vccOpts||e;for(const[s,p]of c)i[s]=p;return i})(t.defineComponent({name:"JsonTreeView",__name:"JsonTreeView",props:{json:{},rootKey:{default:"/"},maxDepth:{default:1},colorScheme:{default:"light"}},emits:["selected"],setup(e,{emit:c}){const i=c,s=o=>i("selected",o),p=(o,r,l,n,a)=>{const u=r.map((d,b)=>y(b.toString(),d,l+1,V(n,o,a,!0),!1));return{key:o,type:h.ARRAY,depth:l,path:n,length:u.length,children:u}},f=(o,r,l,n,a)=>{const u=Object.entries(r).map(([d,b])=>y(d,b,l+1,V(n,o,a),!0));return{key:o,type:h.OBJECT,depth:l,path:n,length:u.length,children:u}},v=(o,r,l,n,a)=>({key:o,type:h.VALUE,path:z(n,o,a),depth:l,value:r}),y=(o,r,l,n,a)=>w(r)?p(o,r,l,n,a):j(r)?f(o,r,l,n,a):v(o,r,l,n,a),k=(o,r)=>{try{const l=JSON.parse(o);return j(l)||w(l)?y(r,l,0,"",!0):v(r,l,0,"",!0)}catch{return v(r,o,0,"",!0)}},x=t.computed(()=>k(e.json,e.rootKey));return(o,r)=>(t.openBlock(),t.createBlock(C,{class:t.normalizeClass(["root-item",{dark:e.colorScheme==="dark"}]),data:x.value,"max-depth":e.maxDepth,onSelected:s},null,8,["class","data","max-depth"]))}}),[["__scopeId","data-v-9f840ee1"]]);m.JsonTreeView=D,m.JsonTreeViewItem=C,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=json-tree-view-vue3.umd.cjs.map