vue-json-tree/dist/json-tree.js

Vue component that renders JSON data in a collapsible tree structure.

!function(e){var n={};function t(r){if(n[r])return n[r].exports;var s=n[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,t),s.l=!0,s.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var s in e)t.d(r,s,function(n){return e[n]}.bind(null,s));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=4)}([function(e,n,t){var r=t(2);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);(0,t(5).default)("649ee1f2",r,!1,{})},function(e,n,t){"use strict";var r=t(0);t.n(r).a},function(e,n,t){(n=t(3)(!1)).push([e.i,"\n.json-tree {\n  color: #394359;\n  display: flex;\n  flex-direction: column;\n  font-family: Menlo, Monaco, Consolas, monospace;\n  font-size: 12px;\n  line-height: 20px;\n}\n.json-tree-root {\n  background-color: #f7f8f9;\n  border-radius: 3px;\n  margin: 2px 0;\n  min-width: 560px;\n  padding: 10px;\n}\n.json-tree-ending,\n.json-tree-row {\n  border-radius: 2px;\n  display: flex;\n}\n.json-tree-paired,\n.json-tree-row:hover {\n  background-color: #bce2ff;\n}\n.json-tree-expando {\n  cursor: pointer;\n}\n.json-tree-sign {\n  font-weight: 700;\n}\n.json-tree-collapsed {\n  color: gray;\n  font-style: italic;\n}\n.json-tree-value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.json-tree-value-string {\n  color: #9aab3a;\n}\n.json-tree-value-boolean {\n  color: #ff0080;\n}\n.json-tree-value-number {\n  color: #4f7096;\n}\n.json-tree-value-null {\n  color: #c7444a;\n}\n",""]),e.exports=n},function(e,n,t){"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=function(e,n){var t=e[1]||"",r=e[3];if(!r)return t;if(n&&"function"==typeof btoa){var s=(o=r,i=btoa(unescape(encodeURIComponent(JSON.stringify(o)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(i),"/*# ".concat(c," */")),a=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[t].concat(a).concat([s]).join("\n")}var o,i,c;return[t].join("\n")}(n,e);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var s={};if(r)for(var a=0;a<this.length;a++){var o=this[a][0];null!=o&&(s[o]=!0)}for(var i=0;i<e.length;i++){var c=[].concat(e[i]);r&&s[c[0]]||(t&&(c[2]?c[2]="".concat(t," and ").concat(c[2]):c[2]=t),n.push(c))}},n}},function(e,n,t){"use strict";t.r(n);var r=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("span",{staticClass:"json-tree",class:{"json-tree-root":0===e.parsed.depth}},[e.parsed.primitive?t("span",{staticClass:"json-tree-row"},[e._l(2*e.parsed.depth+3,(function(n){return t("span",{key:n,staticClass:"json-tree-indent"},[e._v(" ")])})),e._v(" "),e.parsed.key?t("span",{staticClass:"json-tree-key"},[e._v(e._s(e.parsed.key))]):e._e(),e._v(" "),e.parsed.key?t("span",{staticClass:"json-tree-colon"},[e._v(": ")]):e._e(),e._v(" "),t("span",{staticClass:"json-tree-value",class:"json-tree-value-"+e.parsed.type,attrs:{title:""+e.parsed.value}},[e._v(e._s(""+e.parsed.value))]),e._v(" "),e.parsed.last?e._e():t("span",{staticClass:"json-tree-comma"},[e._v(",")]),e._v(" "),t("span",{staticClass:"json-tree-indent"},[e._v(" ")])],2):e._e(),e._v(" "),e.parsed.primitive?e._e():t("span",{staticClass:"json-tree-deep"},[t("span",{staticClass:"json-tree-row json-tree-expando",on:{click:function(n){e.expanded=!e.expanded},mouseover:function(n){e.hovered=!0},mouseout:function(n){e.hovered=!1}}},[t("span",{staticClass:"json-tree-indent"},[e._v(" ")]),e._v(" "),t("span",{staticClass:"json-tree-sign"},[e._v(e._s(e.expanded?"-":"+"))]),e._v(" "),e._l(2*e.parsed.depth+1,(function(n){return t("span",{key:n,staticClass:"json-tree-indent"},[e._v(" ")])})),e._v(" "),e.parsed.key?t("span",{staticClass:"json-tree-key"},[e._v(e._s(e.parsed.key))]):e._e(),e._v(" "),e.parsed.key?t("span",{staticClass:"json-tree-colon"},[e._v(": ")]):e._e(),e._v(" "),t("span",{staticClass:"json-tree-open"},[e._v(e._s("array"===e.parsed.type?"[":"{"))]),e._v(" "),t("span",{directives:[{name:"show",rawName:"v-show",value:!e.expanded,expression:"!expanded"}],staticClass:"json-tree-collapsed"},[e._v(" /* "+e._s(e.format(e.parsed.value.length))+" */ ")]),e._v(" "),t("span",{directives:[{name:"show",rawName:"v-show",value:!e.expanded,expression:"!expanded"}],staticClass:"json-tree-close"},[e._v(e._s("array"===e.parsed.type?"]":"}"))]),e._v(" "),t("span",{directives:[{name:"show",rawName:"v-show",value:!e.expanded&&!e.parsed.last,expression:"!expanded && !parsed.last"}],staticClass:"json-tree-comma"},[e._v(",")]),e._v(" "),t("span",{staticClass:"json-tree-indent"},[e._v(" ")])],2),e._v(" "),t("span",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"json-tree-deeper"},e._l(e.parsed.value,(function(n,r){return t("json-tree",{key:r,attrs:{kv:n,level:e.level}})})),1),e._v(" "),t("span",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"json-tree-row"},[t("span",{staticClass:"json-tree-ending",class:{"json-tree-paired":e.hovered}},[e._l(2*e.parsed.depth+3,(function(n){return t("span",{key:n,staticClass:"json-tree-indent"},[e._v(" ")])})),e._v(" "),t("span",{staticClass:"json-tree-close"},[e._v(e._s("array"===e.parsed.type?"]":"}"))]),e._v(" "),e.parsed.last?e._e():t("span",{staticClass:"json-tree-comma"},[e._v(",")]),e._v(" "),t("span",{staticClass:"json-tree-indent"},[e._v(" ")])],2)])])])};function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}r._withStripped=!0;var a={name:"json-tree",props:{level:{type:Number,default:1/0},kv:{type:Object},raw:{type:String},data:{}},data:function(){return{expanded:!0,hovered:!1}},computed:{parsed:function(){if(this.kv)return this.kv;var e;try{this.raw?e=JSON.parse(this.raw):void 0!==this.data?e=this.data:(e="[Vue JSON Tree] No data passed.",console.warn(e))}catch(n){e="[Vue JSON Tree] Invalid raw JSON.",console.warn(e)}finally{return function e(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:void 0,o={depth:t,last:r,primitive:!0,key:JSON.stringify(a)};if("object"!==s(n))return Object.assign(o,{type:s(n),value:JSON.stringify(n)});if(null===n)return Object.assign(o,{type:"null",value:"null"});if(Array.isArray(n)){var i=n.map((function(r,s){return e(r,t+1,s===n.length-1)}));return Object.assign(o,{primitive:!1,type:"array",value:i})}var c=Object.keys(n),l=c.map((function(r,s){return e(n[r],t+1,s===c.length-1,r)}));return Object.assign(o,{primitive:!1,type:"object",value:l})}(e)}}},methods:{format:function(e){return e>1?"".concat(e," items"):e?"1 item":"no items"}},created:function(){this.expanded=this.parsed.depth<this.level}};t(1);var o=function(e,n,t,r,s,a,o,i){var c,l="function"==typeof e?e.options:e;if(n&&(l.render=n,l.staticRenderFns=t,l._compiled=!0),r&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),o?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),s&&s.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=c):s&&(c=i?function(){s.call(this,this.$root.$options.shadowRoot)}:s),c)if(l.functional){l._injectStyles=c;var p=l.render;l.render=function(e,n){return c.call(n),p(e,n)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,c):[c]}return{exports:e,options:l}}(a,r,[],!1,null,null,null);o.options.__file="src/json-tree.vue";var i=o.exports;window.Vue&&Vue.component("json-tree",i)},function(e,n,t){"use strict";function r(e,n){for(var t=[],r={},s=0;s<n.length;s++){var a=n[s],o=a[0],i={id:e+":"+s,css:a[1],media:a[2],sourceMap:a[3]};r[o]?r[o].parts.push(i):t.push(r[o]={id:o,parts:[i]})}return t}t.r(n),t.d(n,"default",(function(){return f}));var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},o=s&&(document.head||document.getElementsByTagName("head")[0]),i=null,c=0,l=!1,p=function(){},d=null,u="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(e,n,t,s){l=t,d=s||{};var o=r(e,n);return v(o),function(n){for(var t=[],s=0;s<o.length;s++){var i=o[s];(c=a[i.id]).refs--,t.push(c)}n?v(o=r(e,n)):o=[];for(s=0;s<t.length;s++){var c;if(0===(c=t[s]).refs){for(var l=0;l<c.parts.length;l++)c.parts[l]();delete a[c.id]}}}}function v(e){for(var n=0;n<e.length;n++){var t=e[n],r=a[t.id];if(r){r.refs++;for(var s=0;s<r.parts.length;s++)r.parts[s](t.parts[s]);for(;s<t.parts.length;s++)r.parts.push(_(t.parts[s]));r.parts.length>t.parts.length&&(r.parts.length=t.parts.length)}else{var o=[];for(s=0;s<t.parts.length;s++)o.push(_(t.parts[s]));a[t.id]={id:t.id,refs:1,parts:o}}}}function h(){var e=document.createElement("style");return e.type="text/css",o.appendChild(e),e}function _(e){var n,t,r=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(r){if(l)return p;r.parentNode.removeChild(r)}if(u){var s=c++;r=i||(i=h()),n=j.bind(null,r,s,!1),t=j.bind(null,r,s,!0)}else r=h(),n=g.bind(null,r),t=function(){r.parentNode.removeChild(r)};return n(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;n(e=r)}else t()}}var y,m=(y=[],function(e,n){return y[e]=n,y.filter(Boolean).join("\n")});function j(e,n,t,r){var s=t?"":r.css;if(e.styleSheet)e.styleSheet.cssText=m(n,s);else{var a=document.createTextNode(s),o=e.childNodes;o[n]&&e.removeChild(o[n]),o.length?e.insertBefore(a,o[n]):e.appendChild(a)}}function g(e,n){var t=n.css,r=n.media,s=n.sourceMap;if(r&&e.setAttribute("media",r),d.ssrId&&e.setAttribute("data-vue-ssr-id",n.id),s&&(t+="\n/*# sourceURL="+s.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}}]);