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

A beautiful, customizable JSON viewer component for Vue 3 with TypeScript support, dark/light mode, expand/collapse controls, and syntax highlighting.

(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Vue3JsonViewer={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=e=>e===null,r=e=>e===void 0,i=e=>typeof e==`string`,a=e=>typeof e==`number`,o=e=>typeof e==`boolean`,s=e=>e instanceof Date,c=e=>e instanceof RegExp,l=e=>Array.isArray(e),u=e=>typeof e==`object`&&!!e&&!Array.isArray(e)&&!(e instanceof Date)&&!(e instanceof RegExp),d={null:`#f38ba8`,string:`#a6e3a1`,number:`#fab387`,boolean:`#f9e2af`,date:`#94e2d5`,regexp:`#cba6f7`,arrayEmpty:`#9399b2`,array:`#89b4fa`,objectEmpty:`#9399b2`,object:`#f5c2e7`,default:`#cdd6f4`},f={null:`#e03131`,string:`#2f9e44`,number:`#e8590c`,boolean:`#f59f00`,date:`#0c8599`,regexp:`#7048e8`,arrayEmpty:`#868e96`,array:`#1971c2`,objectEmpty:`#868e96`,object:`#c2255c`,default:`#343a40`},p=[`#f38ba8`,`#fab387`,`#f9e2af`,`#a6e3a1`,`#89dceb`,`#cba6f7`],m=[`#e03131`,`#e8590c`,`#f59f00`,`#2f9e44`,`#1098ad`,`#7048e8`],h=(e,t)=>{let p=t?d:f;return n(e)||r(e)?p.null:i(e)?p.string:a(e)?p.number:o(e)?p.boolean:s(e)?p.date:c(e)?p.regexp:l(e)?e.length===0?p.arrayEmpty:p.array:u(e)?Object.keys(e).length===0?p.objectEmpty:p.object:p.default},g=(e,t)=>{let n=t?p:m;return n[e%n.length]??n[0]??`#cdd6f4`},_=/^[A-Za-z_$][A-Za-z0-9_$]*$/;function v(e,t,n){return n?`${e}[${t}]`:_.test(t)?`${e}.${t}`:`${e}[${JSON.stringify(t)}]`}var y=Symbol(`json-viewer-context`);function b(e){let{defaultExpanded:n,onToggle:r,onCopy:i}=e,a=(0,t.reactive)(new Map),o=e=>{let t=a.get(e);return t===void 0?n.value:t},s=(e,t,n)=>{a.set(e,n),r?.({path:e,key:t,expanded:n})},c=(e,t)=>{s(e,t,!o(e))},l=e=>{a.clear(),n.value=e};return{isExpanded:o,setExpanded:s,toggle:c,expandAll:()=>l(!0),collapseAll:()=>l(!1),reset:l,notifyCopy:(e,t,n)=>{i?.({path:e,key:t,value:n})}}}function x(e){(0,t.provide)(y,e)}function S(){return(0,t.inject)(y,null)}var C=()=>(0,t.createVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},[(0,t.createVNode)(`polyline`,{points:`6 9 12 15 18 9`},null)]),w=()=>(0,t.createVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},[(0,t.createVNode)(`polyline`,{points:`18 15 12 9 6 15`},null)]),T=(0,t.defineComponent)({name:`RootControls`,props:{darkMode:{type:Boolean,required:!0}},emits:[`expand-all`,`collapse-all`],setup(e,{emit:n}){let r=()=>n(`expand-all`),i=()=>n(`collapse-all`),a=e=>[`jv-control-btn`,e?`jv-control-btn-dark`:`jv-control-btn-light`];return()=>(0,t.createVNode)(`div`,{class:`jv-root-controls`},[(0,t.createVNode)(`button`,{class:a(e.darkMode),onClick:r,title:`Expand All`},[(0,t.createVNode)(C,null,null),(0,t.createTextVNode)(`Expand All`)]),(0,t.createVNode)(`button`,{class:a(e.darkMode),onClick:i,title:`Collapse All`},[(0,t.createVNode)(w,null,null),(0,t.createTextVNode)(`Collapse All`)])])}}),E=e=>n(e)?`null`:r(e)?`undefined`:i(e)?`"${e}"`:o(e)?e?`true`:`false`:a(e)?String(e):s(e)?`"${e.toISOString()}"`:c(e)?e.toString():String(e),D=(e,t)=>{let l=t?`-dark`:`-light`;return n(e)||r(e)?`jv-null jv-null${l}`:i(e)?`jv-string jv-string${l}`:a(e)?`jv-number jv-number${l}`:o(e)?`jv-boolean jv-boolean${l}`:s(e)?`jv-date jv-date${l}`:c(e)?`jv-regexp jv-regexp${l}`:t?`jv-value-dark`:`jv-value-light`},O=e=>e===`object`?[`{`,`}`]:[`[`,`]`],k=(e,t,n)=>e===`object`?`obj`:t?`empty`:String(n),A=(e,t)=>{let n=e===`object`?`key`:`item`;return`${t} ${t===1?n:`${n}s`}`},j=e=>{if(typeof document>`u`)return!1;let t=document.createElement(`textarea`);t.value=e,t.setAttribute(`readonly`,``),t.style.position=`fixed`,t.style.top=`-9999px`,t.style.left=`-9999px`,document.body.appendChild(t);let n=document.getSelection(),r=n&&n.rangeCount>0?n.getRangeAt(0):null;t.select();let i=!1;try{i=document.execCommand(`copy`)===!0}catch{}return document.body.removeChild(t),n&&r&&(n.removeAllRanges(),n.addRange(r)),i},M=async e=>{let t;try{let n=JSON.stringify(e,null,2);t=n===void 0?String(e):n}catch{return!1}if(typeof navigator<`u`&&navigator.clipboard&&typeof navigator.clipboard.writeText==`function`)try{return await navigator.clipboard.writeText(t),!0}catch{}return j(t)},N=1500,P=()=>(0,t.createVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},[(0,t.createVNode)(`rect`,{x:`9`,y:`9`,width:`13`,height:`13`,rx:`2`,ry:`2`},null),(0,t.createVNode)(`path`,{d:`M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1`},null)]),F=()=>(0,t.createVNode)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`},[(0,t.createVNode)(`polyline`,{points:`20 6 9 17 4 12`},null)]),I=(0,t.defineComponent)({name:`CopyButton`,props:{darkMode:{type:Boolean,required:!0},data:{type:[Object,Array,String,Number,Boolean,Function],default:void 0},path:{type:String,default:`$`},parentKey:{type:[String,Number],default:``}},setup(e){let n=(0,t.ref)(!1),r=S(),i=t=>{t.stopPropagation(),M(e.data).then(t=>{t&&(n.value=!0,r?.notifyCopy(e.path??`$`,String(e.parentKey??``),e.data),setTimeout(()=>{n.value=!1},N))})};return()=>(0,t.createVNode)(`button`,{class:[`jv-copy-btn`,e.darkMode?`jv-copy-btn-dark`:`jv-copy-btn-light`],onClick:i,title:n.value?`Copied!`:`Copy`},[n.value?(0,t.createVNode)(F,null,null):(0,t.createVNode)(P,null,null)])}}),L=(0,t.defineComponent)({name:`TypeBadge`,props:{type:{type:String,required:!0}},setup(e,{slots:n}){return()=>(0,t.createVNode)(`span`,{class:[`jv-type-badge`,e.type===`object`?`jv-type-object`:`jv-type-array`]},[n.default?.()])}});function R(e){return typeof e==`function`||Object.prototype.toString.call(e)===`[object Object]`&&!(0,t.isVNode)(e)}var z=(0,t.defineComponent)({name:`ContainerRow`,props:{parentKey:{type:[String,Number],required:!0},isArrayItem:{type:Boolean,required:!0},isEmpty:{type:Boolean,required:!0},isExpanded:{type:Boolean,required:!0},size:{type:Number,required:!0},darkMode:{type:Boolean,required:!0},keyColor:{type:String,required:!0},bracketColor:{type:String,required:!0},data:{type:[Object,Array,String,Number,Boolean],required:!0},kind:{type:String,required:!0},path:{type:String,required:!0}},emits:[`toggle`],setup(e,{emit:n}){let r=()=>{n(`toggle`)};return()=>{let[n,i]=O(e.kind),a=k(e.kind,e.isEmpty,e.size),o=A(e.kind,e.size),s=!e.isArrayItem&&e.parentKey;return(0,t.createVNode)(`div`,{class:`jv-row`},[s&&(0,t.createVNode)(`span`,{class:`jv-key jv-clickable`,style:{color:e.keyColor},onClick:r},[(0,t.createTextVNode)(`"`),e.parentKey,(0,t.createTextVNode)(`"`)]),s&&(0,t.createVNode)(`span`,{class:`jv-colon jv-clickable`,onClick:r},[(0,t.createTextVNode)(`:`)]),(0,t.createVNode)(`span`,{class:`jv-toggle jv-type-indicator`,style:{color:e.bracketColor},onClick:r},[(0,t.createVNode)(L,{type:e.kind},R(a)?a:{default:()=>[a]}),e.isEmpty?(0,t.createVNode)(`span`,null,[n,i]):(0,t.createVNode)(`span`,null,[e.isExpanded?n:`${n}...${i}`])]),!e.isEmpty&&!e.isExpanded&&(0,t.createVNode)(`span`,{class:[`jv-count`,e.darkMode?`jv-count-dark`:`jv-count-light`],onClick:r},[o]),(0,t.createVNode)(I,{darkMode:e.darkMode,data:e.data,path:e.path,parentKey:e.parentKey},null)])}}}),B=(0,t.defineComponent)({name:`PrimitiveValue`,props:{data:{type:[Object,Array,String,Number,Boolean,Function],default:void 0},parentKey:{type:[String,Number],required:!0},isArrayItem:{type:Boolean,required:!0},isLast:{type:Boolean,required:!0},darkMode:{type:Boolean,required:!0},keyColor:{type:String,required:!0},path:{type:String,required:!0}},setup(e){return()=>{let n=!e.isArrayItem&&e.parentKey;return(0,t.createVNode)(`div`,{class:`jv-item jv-primitive`},[(0,t.createVNode)(`div`,{class:`jv-row`},[n&&(0,t.createVNode)(`span`,{class:`jv-key`,style:{color:e.keyColor}},[(0,t.createTextVNode)(`"`),e.parentKey,(0,t.createTextVNode)(`"`)]),n&&(0,t.createVNode)(`span`,{class:`jv-colon`},[(0,t.createTextVNode)(`: `)]),(0,t.createVNode)(`span`,{class:D(e.data,e.darkMode)},[E(e.data)]),!e.isLast&&(0,t.createVNode)(`span`,{class:`jv-comma`},[(0,t.createTextVNode)(`,`)]),(0,t.createVNode)(I,{darkMode:e.darkMode,data:e.data,path:e.path,parentKey:e.parentKey},null)])])}}}),V=`$`,H=(0,t.defineComponent)({name:`JsonNode`,props:{data:{type:[Object,Array,String,Number,Boolean,Function],default:void 0},parentKey:{type:[String,Number],default:``},level:{type:Number,default:0},darkMode:{type:Boolean,default:!0},expanded:{type:Boolean,default:!0},isArrayItem:{type:Boolean,default:!1},isLast:{type:Boolean,default:!0},path:{type:String,default:V}},setup(e){let n=S();if(!n){let r=(0,t.ref)(e.expanded??!0);(0,t.watch)(()=>e.expanded,e=>{n?.reset(e??!0)}),n=b({defaultExpanded:r}),x(n)}let r=n,i=()=>{r.toggle(e.path??V,String(e.parentKey??``))},a=(n,a,o)=>{let s=e.level??0,c=e.darkMode??!0,l=e.path??V,u=g(s,c),d=a.length===0,f=n===`array`,p=r.isExpanded(l);return(0,t.createVNode)(`div`,{class:`jv-item`},[(0,t.createVNode)(z,{parentKey:e.parentKey??``,isArrayItem:e.isArrayItem??!1,isEmpty:d,isExpanded:p,size:a.length,darkMode:c,keyColor:h(e.data,c),bracketColor:u,data:e.data,kind:n,path:l,onToggle:i},null),p&&!d&&(0,t.createVNode)(`div`,{class:`jv-children`,style:{borderColor:u+`40`}},[a.map(([n,r],i)=>{let o=v(l,n,f);return(0,t.createVNode)(H,{key:n,data:r,parentKey:n,level:s+1,darkMode:e.darkMode,isArrayItem:f,isLast:i===a.length-1,path:o},null)})]),p&&!d&&(0,t.createVNode)(`div`,{class:`jv-row`},[(0,t.createVNode)(`span`,{class:`jv-bracket`,style:{color:u}},[o,e.isLast?``:`,`])])])};return()=>{let n=e.level??0,i=e.darkMode??!0,o=n===0,s=e.data,c=[`jv-node`,{"jv-root":o,"jv-dark":i&&o,"jv-light":!i&&o}],d=o&&(u(s)||l(s));if(u(s)){let e=Object.entries(s);return(0,t.createVNode)(`div`,{class:c},[d&&(0,t.createVNode)(T,{darkMode:i,"onExpand-all":r.expandAll,"onCollapse-all":r.collapseAll},null),a(`object`,e,`}`)])}if(l(s)){let e=s.map((e,t)=>[String(t),e]);return(0,t.createVNode)(`div`,{class:c},[d&&(0,t.createVNode)(T,{darkMode:i,"onExpand-all":r.expandAll,"onCollapse-all":r.collapseAll},null),a(`array`,e,`]`)])}return(0,t.createVNode)(`div`,{class:c},[(0,t.createVNode)(B,{data:s,parentKey:e.parentKey??``,isArrayItem:e.isArrayItem??!1,isLast:e.isLast??!0,darkMode:i,keyColor:h(s,i),path:e.path??V},null)])}}}),U=`$`,W=(0,t.defineComponent)({name:`JsonViewer`,props:{data:{type:[Object,Array,String,Number,Boolean],default:()=>({})},level:{type:Number,default:0},parentKey:{type:[String,Number],default:``},darkMode:{type:Boolean,default:!0},expanded:{type:Boolean,default:!0}},emits:{toggle:e=>typeof e.path==`string`&&typeof e.expanded==`boolean`,copy:e=>typeof e.path==`string`},setup(e,{emit:n}){let r=b({defaultExpanded:(0,t.ref)(e.expanded??!0),onToggle:e=>n(`toggle`,e),onCopy:e=>n(`copy`,e)});return x(r),(0,t.watch)(()=>e.expanded,e=>{r.reset(e??!0)}),()=>(0,t.createVNode)(H,{darkMode:e.darkMode??!0,data:e.data??{},level:e.level??0,path:U},null)}}),G={install(e){e.component(`JsonViewer`,W),e.component(`JsonNode`,H)}};e.JsonNode=H,e.JsonViewer=W,e.JsonViewerPlugin=G,e.default=G});
//# sourceMappingURL=index.umd.js.map