You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
vue-json-pretty
Advanced tools
vue-json-pretty - npm Package Compare versions
Comparing version 1.8.3 to 1.9.0
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueJsonPretty=t():e.VueJsonPretty=t()}(this,(function(){return function(){"use strict";var e={102:function(e,t,l){function o(e,t,l,o,n,s,a,i){var r,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=l,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),a?(r=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__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=r):n&&(r=i?function(){n.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:n),r)if(c.functional){c._injectStyles=r;var h=c.render;c.render=function(e,t){return r.call(t),h(e,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,r):[r]}return{exports:e,options:c}}l.r(t),l.d(t,{default:function(){return h}});var n=o({props:{data:{required:!0,type:String},collapsedOnClickBrackets:Boolean},methods:{toggleBrackets(e){this.collapsedOnClickBrackets&&this.$emit("click",e)}}},(function(){var e=this,t=e.$createElement;return(e._self._c||t)("span",{staticClass:"vjs-tree__brackets",on:{click:function(t){return t.stopPropagation(),e.toggleBrackets(t)}}},[e._v(e._s(e.data))])}),[],!1,null,null,null).exports,s=o({props:{checked:{type:Boolean,default:!1},isMultiple:Boolean},data:()=>({focus:!1}),computed:{uiType(){return this.isMultiple?"checkbox":"radio"},model:{get(){return this.checked},set(e){this.$emit("input",e)}}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("label",{class:["vjs-check-controller",e.checked?"is-checked":""],on:{click:function(e){e.stopPropagation()}}},[l("span",{class:"vjs-check-controller__inner is-"+e.uiType}),"checkbox"===e.uiType?l("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],class:"vjs-check-controller__original is-"+e.uiType,attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e.model},on:{change:[function(t){var l=e.model,o=t.target,n=!!o.checked;if(Array.isArray(l)){var s=e._i(l,null);o.checked?s<0&&(e.model=l.concat([null])):s>-1&&(e.model=l.slice(0,s).concat(l.slice(s+1)))}else e.model=n},function(t){return e.$emit("change",e.model)}],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):"radio"===e.uiType?l("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],class:"vjs-check-controller__original is-"+e.uiType,attrs:{type:"radio"},domProps:{checked:e._q(e.model,null)},on:{change:[function(t){e.model=null},function(t){return e.$emit("change",e.model)}],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):l("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],class:"vjs-check-controller__original is-"+e.uiType,attrs:{type:e.uiType},domProps:{value:e.model},on:{change:function(t){return e.$emit("change",e.model)},focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},input:function(t){t.target.composing||(e.model=t.target.value)}}})])}),[],!1,null,null,null);function a(e){return Object.prototype.toString.call(e).slice(8,-1).toLowerCase()}function i(e,t="root",l=0,{key:o,index:n,type:s="content",showComma:r=!1,length:c=1}={}){const h=a(e);if("array"===h){const n=e.map(((e,o,n)=>i(e,`${t}[${o}]`,l+1,{index:o,showComma:o!==n.length-1,length:c,type:s}))).reduce(((e,t)=>e.concat(t)),[]);return[i("[",t,l,{key:o,length:e.length,type:"arrayStart"})[0]].concat(n,i("]",t,l,{showComma:r,length:e.length,type:"arrayEnd"})[0])}if("object"===h){const a=Object.keys(e),h=a.map(((o,n,a)=>i(e[o],o.includes(".")?`${t}["${o}"]`:`${t}.${o}`,l+1,{key:o,showComma:n!==a.length-1,length:c,type:s}))).reduce(((e,t)=>e.concat(t)),[]);return[i("{",t,l,{key:o,index:n,length:a.length,type:"objectStart"})[0]].concat(h,i("}",t,l,{showComma:r,length:a.length,type:"objectEnd"})[0])}const d=Object.entries({content:e,level:l,key:o,index:n,path:t,showComma:r,length:c,type:s}).reduce(((e,[t,l])=>void 0!==l?{...e,[t]:l}:e),{});return"object"===a(d)?[d]:d}var r=o({components:{Brackets:n,CheckController:s.exports},props:{node:{required:!0,type:Object},collapsed:Boolean,collapsedOnClickBrackets:Boolean,showDoubleQuotes:Boolean,showLength:Boolean,checked:Boolean,selectableType:{type:String,default:""},showSelectController:{type:Boolean,default:!1},showLine:{type:Boolean,default:!0},selectOnClickNode:{type:Boolean,default:!0},pathSelectable:{type:Function,default:()=>!0},highlightSelectedNode:{type:Boolean,default:!0},customValueFormatter:{type:Function,default:null}},computed:{valueClass(){return"vjs-value vjs-value__"+this.dataType},dataType(){return a(this.node.content)},prettyKey(){return this.showDoubleQuotes?`"${this.node.key}"`:this.node.key},selectable(){return this.pathSelectable(this.node.path,this.node.content)&&(this.isMultiple||this.isSingle)},isMultiple(){return"multiple"===this.selectableType},isSingle(){return"single"===this.selectableType}},methods:{defaultFormatter(e){let t=e+"";return"string"===this.dataType&&(t=`"${t}"`),t},valueFormatter(e){return this.customValueFormatter?this.customValueFormatter(e,this.node.key,this.node.path,this.defaultFormatter(e)):this.defaultFormatter(e)},onBracketsClick(){this.$emit("brackets-click",!this.collapsed,this.node.path)},onCheckedChange(){this.$emit("selected-change",this.node)},onTreeNodeClick(){this.$emit("tree-node-click",this.node),this.selectable&&this.selectOnClickNode&&this.$emit("selected-change",this.node)}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{class:{"vjs-tree__node":!0,"has-selector":e.showSelectController,"is-highlight":e.highlightSelectedNode&&e.checked},on:{click:e.onTreeNodeClick}},[e.showSelectController&&e.selectable&&"objectEnd"!==e.node.type&&"arrayEnd"!==e.node.type?[l("check-controller",{attrs:{"is-multiple":e.isMultiple,checked:e.checked},on:{change:e.onCheckedChange}})]:e._e(),e._l(e.node.level,(function(t,o){return l("div",{key:o,class:{"vjs-tree__indent":!0,"has-line":e.showLine}})})),e.node.key?l("span",{staticClass:"vjs-key"},[e._v(e._s(e.prettyKey)+":")]):e._e(),l("span",["content"!==e.node.type?l("brackets",{attrs:{data:e.node.content,"collapsed-on-click-brackets":e.collapsedOnClickBrackets},on:{click:e.onBracketsClick}}):e.customValueFormatter?l("span",{class:e.valueClass,domProps:{innerHTML:e._s(e.valueFormatter(e.node.content))}}):l("span",{class:e.valueClass,domProps:{textContent:e._s(e.valueFormatter(e.node.content))}}),e.node.showComma?l("span",[e._v(",")]):e._e(),e.showLength&&e.collapsed?l("span",{staticClass:"vjs-comment"},[e._v(" // "+e._s(e.node.length)+" items ")]):e._e()],1)],2)}),[],!1,null,null,null),c=o({name:"VueJsonPretty",components:{TreeNode:r.exports},props:{data:{type:[String,Number,Boolean,Array,Object],default:null},deep:{type:Number,default:1/0},deepCollapseChildren:{type:Boolean,default:!1},path:{type:String,default:"root"},virtual:{type:Boolean,default:!1},itemHeight:{type:Number,default:20},showLength:{type:Boolean,default:!1},showDoubleQuotes:{type:Boolean,default:!0},selectableType:{type:String,default:""},showSelectController:{type:Boolean,default:!1},showLine:{type:Boolean,default:!0},selectOnClickNode:{type:Boolean,default:!0},value:{type:[Array,String],default:()=>""},pathSelectable:{type:Function,default:()=>!0},highlightSelectedNode:{type:Boolean,default:!0},collapsedOnClickBrackets:{type:Boolean,default:!0},customValueFormatter:{type:Function,default:null},virtualLines:{type:Number,default:10}},data(){return{translateY:0,visibleData:null,hiddenPaths:i(this.data,this.path).reduce(((e,t)=>{const l=this.deepCollapseChildren?t.level>=this.deep:t.level===this.deep;return"objectStart"!==t.type&&"arrayStart"!==t.type||!l?e:{...e,[t.path]:1}}),{})}},computed:{flatData(){let e=null;return i(this.data,this.path).reduce(((t,l,o)=>{const n={...l,id:o},s=this.hiddenPaths[n.path];if(e&&e.path===n.path){const l="objectStart"===e.type,o={...e,...n,content:l?"{...}":"[...]",type:l?"objectCollapsed":"arrayCollapsed"};return e=null,t.concat(o)}return s&&!e?(e=n,t):e?t:t.concat(n)}),[])},selectedPaths:{get(){return this.value&&"single"===this.selectableType?[this.value]:this.value||[]},set(e){this.$emit("input",e)}},propsError(){return!this.selectableType||this.selectOnClickNode||this.showSelectController?"":"When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail."}},watch:{propsError:{handler(e){if(e)throw new Error("[VueJsonPretty] "+e)},immediate:!0},flatData:{handler(){this.onTreeScroll()},immediate:!0}},methods:{onTreeScroll(){if(this.virtual){const e=this.virtualLines,t=this.$refs.tree&&this.$refs.tree.scrollTop||0,l=Math.floor(t/this.itemHeight);let o=l<0?0:l+e>this.flatData.length?this.flatData.length-e:l;o<0&&(o=0);const n=o+e;this.translateY=o*this.itemHeight,this.visibleData=this.flatData.filter(((e,t)=>t>=o&&t<n))}else this.visibleData=this.flatData},onSelectedChange({path:e}){const t=this.selectableType;if("multiple"===t){const t=this.selectedPaths.findIndex((t=>t===e)),l=[...this.selectedPaths];-1!==t?this.selectedPaths.splice(t,1):this.selectedPaths.push(e),this.$emit("change",this.selectedPaths,l)}else if("single"===t&&this.selectedPaths!==e){const t=this.selectedPaths,l=e;this.selectedPaths=l,this.$emit("change",l,t)}},onTreeNodeClick({content:e,path:t}){this.$emit("click",t,e)},onBracketsClick(e,t){if(e)this.hiddenPaths={...this.hiddenPaths,[t]:1};else{const e={...this.hiddenPaths};delete e[t],this.hiddenPaths=e}}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{ref:"tree",class:{"vjs-tree":!0,"is-virtual":e.virtual},on:{scroll:e.onTreeScroll}},[l("div",{style:e.virtual&&{height:e.flatData.length*e.itemHeight+"px"}},[l("div",{style:e.virtual&&{transform:"translateY("+e.translateY+"px)"}},e._l(e.visibleData,(function(t){return l("tree-node",{key:t.id,attrs:{node:t,collapsed:!!e.hiddenPaths[t.path],"custom-value-formatter":e.customValueFormatter,"show-double-quotes":e.showDoubleQuotes,"show-length":e.showLength,"collapsed-on-click-brackets":e.collapsedOnClickBrackets,checked:e.selectedPaths.includes(t.path),"selectable-type":e.selectableType,"show-line":e.showLine,"show-select-controller":e.showSelectController,"select-on-click-node":e.selectOnClickNode,"path-selectable":e.pathSelectable,"highlight-selected-node":e.highlightSelectedNode},on:{"tree-node-click":e.onTreeNodeClick,"brackets-click":e.onBracketsClick,"selected-change":e.onSelectedChange}})})),1)])])}),[],!1,null,null,null).exports,h=Object.assign({},c,{version:"1.8.3"})}},t={};function l(o){if(t[o])return t[o].exports;var n=t[o]={exports:{}};return e[o](n,n.exports,l),n.exports}return l.d=function(e,t){for(var o in t)l.o(t,o)&&!l.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l(102)}()})); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueJsonPretty=t():e.VueJsonPretty=t()}(this,(function(){return function(){"use strict";var e={668:function(e,t,l){function n(e,t,l,n,s,a,o,i){var r,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=l,c._compiled=!0),n&&(c.functional=!0),a&&(c._scopeId="data-v-"+a),o?(r=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)},c._ssrRegister=r):s&&(r=i?function(){s.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:s),r)if(c.functional){c._injectStyles=r;var d=c.render;c.render=function(e,t){return r.call(t),d(e,t)}}else{var h=c.beforeCreate;c.beforeCreate=h?[].concat(h,r):[r]}return{exports:e,options:c}}l.r(t),l.d(t,{default:function(){return p}});var s=n({props:{data:{required:!0,type:String}},methods:{toggleBrackets(e){this.$emit("click",e)}}},(function(){var e=this,t=e.$createElement;return(e._self._c||t)("span",{staticClass:"vjs-tree-brackets",on:{click:function(t){return t.stopPropagation(),e.toggleBrackets(t)}}},[e._v(e._s(e.data))])}),[],!1,null,null,null).exports,a=n({props:{checked:{type:Boolean,default:!1},isMultiple:Boolean},computed:{uiType(){return this.isMultiple?"checkbox":"radio"},model:{get(){return this.checked},set(e){this.$emit("input",e)}}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("label",{class:["vjs-check-controller",e.checked?"is-checked":""],on:{click:function(e){e.stopPropagation()}}},[l("span",{class:"vjs-check-controller-inner is-"+e.uiType}),l("input",{class:"vjs-check-controller-original is-"+e.uiType,attrs:{type:e.uiType},domProps:{checked:e.model},on:{change:function(t){return e.$emit("change",e.model)}}})])}),[],!1,null,null,null).exports,o=n({props:{nodeType:{type:String,required:!0}},computed:{isOpen(){return"objectStart"===this.nodeType||"arrayStart"===this.nodeType},isClose(){return"objectCollapsed"===this.nodeType||"arrayCollapsed"===this.nodeType}},methods:{handleClick(){this.$emit("click")}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return e.isOpen||e.isClose?l("span",{class:"vjs-carets vjs-carets-"+(e.isOpen?"open":"close"),on:{click:e.handleClick}},[l("svg",{attrs:{viewBox:"0 0 1024 1024",focusable:"false","data-icon":"caret-down",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true"}},[l("path",{attrs:{d:"M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"}})])]):e._e()}),[],!1,null,null,null);function i(e){return Object.prototype.toString.call(e).slice(8,-1).toLowerCase()}function r(e,t="root",l=0,{key:n,index:s,type:a="content",showComma:o=!1,length:d=1}={}){const h=i(e);if("array"===h){const s=c(e.map(((e,n,s)=>r(e,`${t}[${n}]`,l+1,{index:n,showComma:n!==s.length-1,length:d,type:a}))));return[r("[",t,l,{key:n,length:e.length,type:"arrayStart"})[0]].concat(s,r("]",t,l,{showComma:o,length:e.length,type:"arrayEnd"})[0])}if("object"===h){const i=Object.keys(e),h=c(i.map(((n,s,o)=>r(e[n],n.includes(".")?`${t}["${n}"]`:`${t}.${n}`,l+1,{key:n,showComma:s!==o.length-1,length:d,type:a}))));return[r("{",t,l,{key:n,index:s,length:i.length,type:"objectStart"})[0]].concat(h,r("}",t,l,{showComma:o,length:i.length,type:"objectEnd"})[0])}return[{content:e,level:l,key:n,index:s,path:t,showComma:o,length:d,type:a}]}function c(e){if("function"==typeof Array.prototype.flat)return e.flat();const t=[...e],l=[];for(;t.length;){const e=t.shift();Array.isArray(e)?t.unshift(...e):l.push(e)}return l}function d(e,t=new WeakMap){if(null===e)return e;if(e instanceof Date)return new Date(e);if(e instanceof RegExp)return new RegExp(e);if("object"!=typeof e)return e;if(t.get(e))return t.get(e);if(Array.isArray(e)){const l=e.map((e=>d(e,t)));return t.set(e,l),l}const l={};for(const n in e)l[n]=d(e[n],t);return t.set(e,l),l}var h=n({components:{Brackets:s,CheckController:a,Carets:o.exports},props:{node:{required:!0,type:Object},collapsed:Boolean,showDoubleQuotes:Boolean,showLength:Boolean,checked:Boolean,selectableType:{type:String,default:""},showSelectController:{type:Boolean,default:!1},showLine:{type:Boolean,default:!0},showLineNumber:{type:Boolean,default:!1},selectOnClickNode:{type:Boolean,default:!0},nodeSelectable:{type:Function,default:()=>!0},highlightSelectedNode:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!1},editable:{type:Boolean,default:!1},editableTrigger:{type:String,default:"click"}},data:()=>({editing:!1}),computed:{valueClass(){return"vjs-value vjs-value-"+this.dataType},dataType(){return i(this.node.content)},prettyKey(){return this.showDoubleQuotes?`"${this.node.key}"`:this.node.key},selectable(){return this.nodeSelectable(this.node)&&(this.isMultiple||this.isSingle)},isMultiple(){return"multiple"===this.selectableType},isSingle(){return"single"===this.selectableType},defaultValue(){const e=(this.node?.content??"")+"";return"string"===this.dataType?`"${e}"`:e}},methods:{handleInputChange(e){const t=function(e){let t;return t="null"===e?null:"undefined"===e?void 0:"true"===e||"false"!==e&&(e[0]+e[e.length-1]==='""'||e[0]+e[e.length-1]==="''"?e.slice(1,-1):"number"==typeof Number(e)&&!isNaN(Number(e))||"NaN"===e?Number(e):e),t}(e.target?.value);this.$emit("value-change",t,this.node.path)},handleIconClick(){this.$emit("icon-click",!this.collapsed,this.node.path)},handleBracketsClick(){this.$emit("brackets-click",!this.collapsed,this.node.path)},handleSelectedChange(){this.$emit("selected-change",this.node)},handleNodeClick(){this.$emit("node-click",this.node),this.selectable&&this.selectOnClickNode&&this.$emit("selected-change",this.node)},handleValueEdit(e){if(this.editable&&!this.editing){this.editing=!0;const t=l=>{l.target!==e.target&&l.target?.parentElement!==e.target&&(this.editing=!1,document.removeEventListener("click",t))};document.removeEventListener("click",t),document.addEventListener("click",t)}}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{class:{"vjs-tree-node":!0,"has-selector":e.showSelectController,"has-carets":e.showIcon,"is-highlight":e.highlightSelectedNode&&e.checked},on:{click:e.handleNodeClick}},[e.showLineNumber?l("span",{staticClass:"vjs-node-index"},[e._v("\n "+e._s(e.node.id+1)+"\n ")]):e._e(),e.showSelectController&&e.selectable&&"objectEnd"!==e.node.type&&"arrayEnd"!==e.node.type?l("check-controller",{attrs:{"is-multiple":e.isMultiple,checked:e.checked},on:{change:e.handleSelectedChange}}):e._e(),l("div",{staticClass:"vjs-indent"},[e._l(e.node.level,(function(t,n){return l("div",{key:n,class:{"vjs-indent-unit":!0,"has-line":e.showLine}})})),e.showIcon?l("carets",{attrs:{"node-type":e.node.type},on:{click:e.handleIconClick}}):e._e()],2),e.node.key?l("span",{staticClass:"vjs-key"},[e._v(e._s(e.prettyKey)+":")]):e._e(),l("span",["content"!==e.node.type?l("brackets",{attrs:{data:e.node.content},on:{click:e.handleBracketsClick}}):l("span",{class:e.valueClass,on:{click:function(t){!e.editable||e.editableTrigger&&"click"!==e.editableTrigger||e.handleValueEdit(t)},dblclick:function(t){e.editable&&"dblclick"===e.editableTrigger&&e.handleValueEdit(t)}}},[e.editable&&e.editing?l("input",{style:{padding:"3px 8px",border:"1px solid #eee",boxShadow:"none",boxSizing:"border-box",borderRadius:5,fontFamily:"inherit"},domProps:{value:e.defaultValue},on:{change:e.handleInputChange}}):e._t("value",[e._v(e._s(e.defaultValue))],{node:e.node,defaultValue:e.defaultValue})],2),e.node.showComma?l("span",[e._v(",")]):e._e(),e.showLength&&e.collapsed?l("span",{staticClass:"vjs-comment"},[e._v(" // "+e._s(e.node.length)+" items ")]):e._e()],1)],1)}),[],!1,null,null,null),u=n({name:"VueJsonPretty",components:{TreeNode:h.exports},model:{prop:"data"},props:{data:{type:[String,Number,Boolean,Array,Object],default:null},deep:{type:Number,default:1/0},rootPath:{type:String,default:"root"},virtual:{type:Boolean,default:!1},height:{type:Number,default:400},itemHeight:{type:Number,default:20},showLength:{type:Boolean,default:!1},showDoubleQuotes:{type:Boolean,default:!0},selectableType:{type:String,default:""},showSelectController:{type:Boolean,default:!1},showLine:{type:Boolean,default:!0},showLineNumber:{type:Boolean,default:!1},selectOnClickNode:{type:Boolean,default:!0},selectedValue:{type:[Array,String],default:()=>""},nodeSelectable:{type:Function,default:()=>!0},highlightSelectedNode:{type:Boolean,default:!0},collapsedOnClickBrackets:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!1},editable:{type:Boolean,default:!1},editableTrigger:{type:String,default:"click"}},data(){return{translateY:0,visibleData:null,hiddenPaths:r(this.data,this.rootPath).reduce(((e,t)=>{const l=t.level>=this.deep;return"objectStart"!==t.type&&"arrayStart"!==t.type||!l?e:{...e,[t.path]:1}}),{})}},computed:{originFlatData(){return r(this.data,this.rootPath)},flatData({originFlatData:e,hiddenPaths:t}){let l=null;const n=[],s=e.length;for(let a=0;a<s;a++){const s={...e[a],id:a},o=t[s.path];if(l&&l.path===s.path){const e="objectStart"===l.type,t={...s,...l,showComma:s.showComma,content:e?"{...}":"[...]",type:e?"objectCollapsed":"arrayCollapsed"};l=null,n.push(t)}else{if(o&&!l){l=s;continue}if(l)continue;n.push(s)}}return n},selectedPaths:{get(){const e=this.selectedValue;return e&&"multiple"===this.selectableType&&Array.isArray(e)?e:[e]},set(e){this.$emit("update:selectedValue",e)}},propsError(){return!this.selectableType||this.selectOnClickNode||this.showSelectController?"":"When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail."}},watch:{propsError:{handler(e){if(e)throw new Error("[VueJsonPretty] "+e)},immediate:!0},flatData:{handler(e){this.updateVisibleData(e)},immediate:!0}},methods:{updateVisibleData(e){if(this.virtual){const t=this.height/this.itemHeight,l=this.$refs.tree&&this.$refs.tree.scrollTop||0,n=Math.floor(l/this.itemHeight);let s=n<0?0:n+t>e.length?e.length-t:n;s<0&&(s=0);const a=s+t;this.translateY=s*this.itemHeight,this.visibleData=e.filter(((e,t)=>t>=s&&t<a))}else this.visibleData=e},handleTreeScroll(){this.updateVisibleData(this.flatData)},handleSelectedChange({path:e}){const t=this.selectableType;if("multiple"===t){const t=this.selectedPaths.findIndex((t=>t===e)),l=[...this.selectedPaths];-1!==t?this.selectedPaths.splice(t,1):this.selectedPaths.push(e),this.$emit("selected-change",this.selectedPaths,l)}else if("single"===t&&this.selectedPaths[0]!==e){const[t]=this.selectedPaths,l=e;this.selectedPaths=l,this.$emit("selected-change",l,t)}},handleNodeClick(e){this.$emit("node-click",e)},updateCollapsedPaths(e,t){if(e)this.hiddenPaths={...this.hiddenPaths,[t]:1};else{const e={...this.hiddenPaths};delete e[t],this.hiddenPaths=e}},handleBracketsClick(e,t){this.collapsedOnClickBrackets&&this.updateCollapsedPaths(e,t),this.$emit("brackets-click",e)},handleIconClick(e,t){this.updateCollapsedPaths(e,t),this.$emit("icon-click",e)},handleValueChange(e,t){const l=d(this.data),n=this.rootPath;new Function("data","val",`data${t.slice(n.length)}=val`)(l,e),this.$emit("input",l)}}},(function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{ref:"tree",class:{"vjs-tree":!0,"is-virtual":e.virtual},style:e.showLineNumber?{paddingLeft:12*Number(e.flatData.length.toString().length)+"px"}:{},on:{scroll:function(t){e.virtual&&e.handleTreeScroll()}}},[l("div",{staticClass:"vjs-tree-list",style:e.virtual&&{height:e.height+"px"}},[l("div",{staticClass:"vjs-tree-list-holder",style:e.virtual&&{height:e.flatData.length*e.itemHeight+"px"}},[l("div",{staticClass:"vjs-tree-list-holder-inner",style:e.virtual&&{transform:"translateY("+e.translateY+"px)"}},e._l(e.visibleData,(function(t){return l("tree-node",{key:t.id,style:e.itemHeight&&20!==e.itemHeight?{lineHeight:e.itemHeight+"px"}:{},attrs:{node:t,collapsed:!!e.hiddenPaths[t.path],"show-double-quotes":e.showDoubleQuotes,"show-length":e.showLength,"collapsed-on-click-brackets":e.collapsedOnClickBrackets,checked:e.selectedPaths.includes(t.path),"selectable-type":e.selectableType,"show-line":e.showLine,"show-line-number":e.showLineNumber,"show-select-controller":e.showSelectController,"select-on-click-node":e.selectOnClickNode,"node-selectable":e.nodeSelectable,"highlight-selected-node":e.highlightSelectedNode,"show-icon":e.showIcon,editable:e.editable,"editable-trigger":e.editableTrigger},on:{"node-click":e.handleNodeClick,"brackets-click":e.handleBracketsClick,"icon-click":e.handleIconClick,"selected-change":e.handleSelectedChange,"value-change":e.handleValueChange},scopedSlots:e._u([{key:"value",fn:function(t){return[e._t("nodeValue",null,{node:t.node,defaultValue:t.defaultValue})]}}],null,!0)})})),1)])])])}),[],!1,null,null,null).exports,p=Object.assign({},u,{version:"1.9.0"})}},t={};function l(n){if(t[n])return t[n].exports;var s=t[n]={exports:{}};return e[n](s,s.exports,l),s.exports}return l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l(668)}()})); |
| { | ||
| "name": "vue-json-pretty", | ||
| "version": "1.8.3", | ||
| "version": "1.9.0", | ||
| "description": "A JSON tree view component that is easy to use and also supports data selection.", | ||
@@ -5,0 +5,0 @@ "author": "leezng <im.leezng@gmail.com>", |
@@ -33,4 +33,5 @@ <p align="center"> | ||
| - As a JSON Formatter. | ||
| - Get item data from JSON. | ||
| - Support get item data from JSON. | ||
| - Support big data. | ||
| - Support editable. | ||
@@ -49,9 +50,15 @@ ## Environment Support | ||
| ```bash | ||
| $ npm install vue-json-pretty --save | ||
| $ npm install vue-json-pretty@v1-latest --save | ||
| ``` | ||
| ```bash | ||
| $ yarn add vue-json-pretty | ||
| $ yarn add vue-json-pretty@v1-latest | ||
| ``` | ||
| ## Use Vue3 | ||
| ```bash | ||
| $ npm install vue-json-pretty --save | ||
| ``` | ||
| ## Usage | ||
@@ -64,3 +71,3 @@ | ||
| <div> | ||
| <vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty> | ||
| <vue-json-pretty :data="{ key: 'value' }" /> | ||
| </div> | ||
@@ -105,36 +112,44 @@ </template> | ||
| - If you are using only the normal features (JSON pretty), just focus on the `base` properties. | ||
| - If you are using higher features (Get data), you can use `base` and `higher` attributes. | ||
| | Property | Description | Type | Default | | ||
| | ------------------------ | ----------------------------------------------- | -------------------- | ------- | | ||
| | data(v-model) | JSON data, support v-model when use editable | JSON object | - | | ||
| | deep | Paths greater than this depth will be collapsed | number | - | | ||
| | showLength | Show the length when collapsed | boolean | false | | ||
| | showLine | Show the line | boolean | true | | ||
| | showLineNumber | Show the line number | boolean | false | | ||
| | showIcon | Show the icon | boolean | false | | ||
| | showDoubleQuotes | Show doublequotes on key | boolean | true | | ||
| | virtual | Use virtual scroll | boolean | false | | ||
| | height | The height of list when using virtual | number | 400 | | ||
| | itemHeight | The height of node when using virtual | number | 20 | | ||
| | selectedValue.sync | Selected data path | string, array | - | | ||
| | rootPath | Root data path | string | `root` | | ||
| | nodeSelectable | Defines whether a data path supports selection | function(node) | - | | ||
| | selectableType | Support path select, default none | `multiple`, `single` | - | | ||
| | showSelectController | Show the select controller | boolean | false | | ||
| | selectOnClickNode | Trigger select when click node | boolean | true | | ||
| | highlightSelectedNode | Support highlighting selected nodes | boolean | true | | ||
| | collapsedOnClickBrackets | Support click brackets to collapse | boolean | true | | ||
| | editable | Support editable | boolean | false | | ||
| | editableTrigger | Trigger | `click`, `dblclick` | `click` | | ||
| | Attribute | Level | Description | Type | Default | | ||
| | ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- | | ||
| | data | normal | JSON data | JSON object | - | | ||
| | deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity | | ||
| | deepCollapseChildren | normal | Whether children collapsed by `deep` prop should also be collapsed | boolean | false | | ||
| | showLength | normal | Whether to show the length when closed | boolean | false | | ||
| | showLine | normal | Whether to show the line | boolean | true | | ||
| | showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true | | ||
| | virtual | normal | Whether to use virtual scrolling, usually used for big data | boolean | false | | ||
| | itemHeight | normal | The height of each item when using virtual scrolling | number | auto | | ||
| | virtualLines | normal | The number of lines to render when virtual scrolling is enabled | number | 10 | | ||
| | v-model | higher | Defines value when the tree can be selected | string, array | - | | ||
| | path | higher | Root data path | string | root | | ||
| | pathSelectable | higher | Defines whether a data path supports selection | function(path, content) | - | | ||
| | selectableType | higher | Defines the selected type, this feature is not supported by default | multiple, single | - | | ||
| | showSelectController | higher | Whether to show the select controller at left | boolean | false | | ||
| | selectOnClickNode | higher | Whether to change selected value when click node | boolean | true | | ||
| | highlightSelectedNode | higher | Highlight current node when selected | boolean | true | | ||
| | collapsedOnClickBrackets | higher | Collapsed control | boolean | true | | ||
| | customValueFormatter | higher | A function that can return different html or strings to display for values in the data. | function(data, key, path, defaultFormatResult) | - | | ||
| ## Events | ||
| | Event Name | Description | Callback Parameters | | ||
| | ---------- | ---------------------------------------------------------------------------- | ------------------- | | ||
| | click | triggered when a data item is clicked | (path, data) | | ||
| | change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) | | ||
| | Event Name | Description | Parameters | | ||
| | --------------- | ---------------------------------------- | -------------------- | | ||
| | node-click | triggers when click node | (node: NodeData) | | ||
| | brackets-click | triggers when click brackets | (collapsed: boolean) | | ||
| | icon-click | triggers when click icon | (collapsed: boolean) | | ||
| | selected-change | triggers when the selected value changed | (newVal, oldVal) | | ||
| ## Major Contributors | ||
| ## Slots | ||
| [](https://github.com/rchl) | ||
| [](https://github.com/blackmad) | ||
| | Slot Name | Description | Parameters | | ||
| | --------- | ----------------- | ---------------------- | | ||
| | nodeValue | render node value | { node, defaultValue } | | ||
| ## Contributors | ||
| <a href="https://github.com/leezng/vue-json-pretty/graphs/contributors"> | ||
| <img src="https://contrib.rocks/image?repo=leezng/vue-json-pretty" /> | ||
| </a> |
@@ -6,34 +6,44 @@ 简体中文 | [English](./README.md) | ||
| - 一个 JSON 美化工具 | ||
| - 提取字段层级数据 | ||
| - 支持字段层级数据提取 | ||
| - 支持大数据虚拟滚动 | ||
| - 支持编辑 | ||
| ## Props | ||
| - 若仅使用基础功能(JSON 美化)，只需关注功能级别为 `基础` 的属性。 | ||
| - 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。 | ||
| | 属性 | 说明 | 类型 | 默认值 | | ||
| | ------------------------ | ------------------------------ | -------------------- | ------------- | | ||
| | data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - | | ||
| | deep | 深度，大于该深度的路径将被折叠 | number | Infinity | | ||
| | showLength | 在数据折叠的时候展示长度 | boolean | false | | ||
| | showLine | 展示标识线 | boolean | true | | ||
| | showLineNumber | 展示行计数 | boolean | false | | ||
| | showIcon | 展示图标 | boolean | false | | ||
| | showDoubleQuotes | 展示 key 名的双引号 | boolean | true | | ||
| | virtual | 使用虚拟滚动(大数据量) | boolean | false | | ||
| | height | 使用虚拟滚动时，定义总高度 | number | 400 | | ||
| | itemHeight | 使用虚拟滚动时，定义节点高度 | number | 20 | | ||
| | selectedValue.sync | 双向绑定选中的数据路径 | string, array | string, array | | ||
| | rootPath | 定义最顶层数据路径 | string | `root` | | ||
| | nodeSelectable | 定义哪些数据路径可以被选择 | function(node) | - | | ||
| | selectableType | 定义选择功能，默认无 | `multiple`, `single` | - | | ||
| | showSelectController | 展示选择器 | boolean | false | | ||
| | selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true | | ||
| | highlightSelectedNode | 支持高亮已选择节点 | boolean | true | | ||
| | collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true | | ||
| | editable | 支持可编辑 | boolean | false | | ||
| | editableTrigger | 触发编辑的时机 | `click`, `dblclick` | `click` | | ||
| | 属性 | 级别 | 说明 | 类型 | 默认值 | | ||
| | ------------------------ | ---- | ----------------------------------------- | ---------------------------------------------- | ------------- | | ||
| | data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - | | ||
| | deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity | | ||
| | showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false | | ||
| | showLine | 基础 | 是否显示缩紧标识线 | boolean | true | | ||
| | showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true | | ||
| | virtual | 基础 | 是否使用虚拟滚动(大数据量时) | boolean | false | | ||
| | itemHeight | 基础 | 使用虚拟滚动时，定义每一行高度 | number | auto | | ||
| | v-model | 高级 | 双向绑定选中的数据层级 | string, array | string, array | | ||
| | path | 高级 | 定义最顶层数据层级 | string | root | | ||
| | pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | function(path, content) | - | | ||
| | selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | multiple, single | - | | ||
| | showSelectController | 高级 | 是否展示选择控制器 | boolean | false | | ||
| | selectOnClickNode | 高级 | 是否在点击节点的时候触发 v-model 双向绑定 | boolean | true | | ||
| | highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true | | ||
| | collapsedOnClickBrackets | 高级 | 是否支持折叠 | boolean | true | | ||
| | customValueFormatter | 高级 | 可以进行值的自定义渲染 | function(data, key, path, defaultFormatResult) | - | | ||
| ## Events | ||
| | 事件名 | 说明 | 回调参数 | | ||
| | ------ | -------------------------------------- | ---------------- | | ||
| | click | 点击某一个数据层级时触发的事件 | (path, data) | | ||
| | change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) | | ||
| | 事件名称 | 说明 | 回调参数 | | ||
| | --------------- | -------------------- | -------------------- | | ||
| | node-click | 点击节点时触发 | (node: NodeData) | | ||
| | brackets-click | 点击括号时触发 | (collapsed: boolean) | | ||
| | icon-click | 点击图标时触发 | (collapsed: boolean) | | ||
| | selected-change | 选中值发生变化时触发 | (newVal, oldVal) | | ||
| ## Slots | ||
| | 插槽名 | 描述 | 参数 | | ||
| | --------- | ---------- | ---------------------- | | ||
| | nodeValue | 渲染节点值 | { node, defaultValue } | |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
32021
3.64%- Number of lines in readme file
152
10.95%No dependency changes