json-format-tree
Version:
json格式化组件,配合json-source-map实现高亮效果
2 lines (1 loc) • 11.2 kB
JavaScript
(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v.MyComponentLibrary={},v.Vue))})(this,function(v,t){"use strict";function $(e){return Object.prototype.toString.call(e).slice(8,-1).toLowerCase()}function P(e,n="",c=0,u){const{key:C,index:k,type:m="content",showComma:s=!1,length:N=1}=u||{},f=$(e);if(f==="array"){const b=p(e.map((w,g,L)=>P(w,`${n}/${g}`,c+1,{index:g,showComma:g!==L.length-1,length:N,type:m})));return[P("[",n,c,{showComma:!1,key:C,length:e.length,type:"arrayStart"})[0]].concat(b,P("]",n,c,{showComma:s,length:e.length,type:"arrayEnd"})[0])}else if(f==="object"){const b=Object.keys(e),w=p(b.map((g,L,B)=>P(e[g],/^[a-zA-Z_]\w*$/.test(g)?`${n}/${g}`:`${n}/${g}`,c+1,{key:g,showComma:L!==B.length-1,length:N,type:m})));return[P("{",n,c,{showComma:!1,key:C,index:k,length:b.length,type:"objectStart"})[0]].concat(w,P("}",n,c,{showComma:s,length:b.length,type:"objectEnd"})[0])}return[{content:e,level:c,key:C,index:k,path:n,showComma:s,length:N,type:m}]}function p(e){if(typeof Array.prototype.flat=="function")return e.flat();const n=[...e],c=[];for(;n.length;){const u=n.shift();Array.isArray(u)?n.unshift(...u):c.push(u)}return c}function D(e,n=new WeakMap){if(e==null)return e;if(e instanceof Date)return new Date(e);if(e instanceof RegExp)return new RegExp(e);if(typeof e!="object")return e;if(n.get(e))return n.get(e);if(Array.isArray(e)){const u=e.map(C=>D(C,n));return n.set(e,u),u}const c={};for(const u in e)c[u]=D(e[u],n);return n.set(e,c),c}function H(e){let n;return e==="null"?n=null:e==="undefined"?n=void 0:e==="true"?n=!0:e==="false"?n=!1:e[0]+e[e.length-1]==='""'||e[0]+e[e.length-1]==="''"?n=e.slice(1,-1):typeof Number(e)=="number"&&!isNaN(Number(e))||e==="NaN"?n=Number(e):n=e,n}const E=t.defineComponent({props:{data:{required:!0,type:String},onClick:Function},render(){const{data:e}=this,{onClick:n}=this;return t.createVNode("span",{class:"vjs-tree-brackets",onClick:n},[e])}}),M=t.defineComponent({props:{nodeType:{required:!0,type:String},onClick:Function},render(){const{nodeType:e}=this,{onClick:n}=this,c=e==="objectStart"||e==="arrayStart";return!c&&!(e==="objectCollapsed"||e==="arrayCollapsed")?null:t.createVNode("span",{class:`vjs-carets vjs-carets-${c?"open":"close"}`,onClick:n},[t.createVNode("svg",{viewBox:"0 0 1024 1024",focusable:"false","data-icon":"caret-down",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true"},[t.createVNode("path",{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"},null)])])}}),I={showLength:{type:Boolean,default:!1},showDoubleQuotes:{type:Boolean,default:!0},renderNodeKey:Function,renderNodeValue:Function,selectableType:String,showSelectController:{type:Boolean,default:!1},showLine:{type:Boolean,default:!1},showLineNumber:{type:Boolean,default:!1},selectOnClickNode:{type:Boolean,default:!0},nodeSelectable:{type:Function,default:()=>!0},highlightSelectedNode:{type:Boolean,default:!1},showIcon:{type:Boolean,default:!0},theme:{type:String,default:"light"},showKeyValueSpace:{type:Boolean,default:!0},editable:{type:Boolean,default:!1},editableTrigger:{type:String,default:"click"},onNodeClick:{type:Function},onBracketsClick:{type:Function},onIconClick:{type:Function},onValueChange:{type:Function}},K=t.defineComponent({name:"TreeNode",props:{...I,node:{type:Object,required:!0},collapsed:Boolean,checked:Boolean,style:Object,onSelectedChange:{type:Function},pointer:{type:Object,default:()=>{}}},emits:["nodeClick","bracketsClick","iconClick","selectedChange","valueChange"],setup(e,{emit:n}){const c=t.computed(()=>$(e.node.content)),u=t.computed(()=>`vjs-value vjs-value-${c.value}`),C=t.computed(()=>e.showDoubleQuotes?`"${e.node.key}"`:e.node.key),k=()=>{const a=e.renderNodeKey;return a?a({node:e.node,defaultKey:C.value||"",pointer:e.pointer}):C.value},m=t.computed(()=>e.selectableType==="multiple"),s=t.computed(()=>e.selectableType==="single"),N=t.computed(()=>e.nodeSelectable(e.node)&&(m.value||s.value)),f=t.reactive({editing:!1}),b=a=>{var V;const y=(V=a.target)==null?void 0:V.value,T=H(y);n("valueChange",T,e.node.path)},w=t.computed(()=>{var y;let a=(y=e.node)==null?void 0:y.content;return a===null?a="null":a===void 0&&(a="undefined"),c.value==="string"?`"${a}"`:a+""}),g=()=>{const a=e.renderNodeValue;return a?a({node:e.node,defaultValue:w.value,pointer:e.pointer}):w.value},L=()=>{n("bracketsClick",!e.collapsed,e.node)},B=()=>{n("iconClick",!e.collapsed,e.node)},F=()=>{n("nodeClick",e.node),N.value&&e.selectOnClickNode&&n("selectedChange",e.node)},x=a=>{if(e.editable&&!f.editing){f.editing=!0;const y=T=>{var V;T.target!==a.target&&((V=T.target)==null?void 0:V.parentElement)!==a.target&&(f.editing=!1,document.removeEventListener("click",y))};document.removeEventListener("click",y),document.addEventListener("click",y)}};return()=>{const{node:a,pointer:y}=e;return t.createVNode("div",{class:{"vjs-tree-node":!0,"has-selector":e.showSelectController,"has-carets":e.showIcon,"is-highlight":e.highlightSelectedNode&&e.checked,dark:e.theme==="dark"},onClick:F,style:e.style,"data-pointer":JSON.stringify(y),"data-path":a.path},[e.showLineNumber&&t.createVNode("span",{class:"vjs-node-index"},[a.id+1]),t.createVNode("div",{class:"vjs-indent"},[Array.from(Array(a.level)).map((T,V)=>t.createVNode("div",{key:V,class:{"vjs-indent-unit":!0,"has-line":e.showLine}},null)),e.showIcon&&t.createVNode(M,{nodeType:a.type,onClick:B},null)]),a.key&&t.createVNode("span",{class:"vjs-key"},[k(),t.createVNode("span",{class:"vjs-colon"},[`:${e.showKeyValueSpace?" ":""}`])]),t.createVNode("span",null,[a.type!=="content"&&a.content?t.createVNode(E,{data:a.content.toString(),onClick:L},null):t.createVNode("span",{class:u.value,onClick:e.editable&&(!e.editableTrigger||e.editableTrigger==="click")?x:void 0,onDblclick:e.editable&&e.editableTrigger==="dblclick"?x:void 0},[e.editable&&f.editing?t.createVNode("input",{value:w.value,onChange:b,style:{padding:"3px 8px",border:"1px solid #eee",boxShadow:"none",boxSizing:"border-box",borderRadius:5,fontFamily:"inherit"}},null):g()]),a.showComma&&t.createVNode("span",null,[","]),e.showLength&&e.collapsed&&t.createVNode("span",{class:"vjs-comment"},[t.createTextVNode(" // "),a.length,t.createTextVNode(" items ")])])])}}}),A=t.defineComponent({name:"Tree",props:{...I,data:{type:[String,Number,Boolean,Array,Object],default:null},collapsedNodeLength:{type:Number,default:1/0},deep:{type:Number,default:8},pathCollapsible:{type:Function,default:()=>!1},rootPath:{type:String,default:""},virtual:{type:Boolean,default:!1},height:{type:Number,default:400},itemHeight:{type:Number,default:20},selectedValue:{type:[String,Array],default:()=>""},collapsedOnClickBrackets:{type:Boolean,default:!0},style:Object,onSelectedChange:{type:Function},theme:{type:String,default:"light"},pointers:{type:Object,default:()=>{}},renderEffect:{type:Function}},emits:["nodeClick","bracketsClick","iconClick","selectedChange","update:selectedValue","update:data"],setup(e,{emit:n,slots:c,expose:u}){const C=t.ref(),k=t.computed(()=>P(e.data,e.rootPath)),m=(l,i)=>k.value.reduce((d,o)=>{var j;const r=o.level>=l||o.length>=i,h=(j=e.pathCollapsible)==null?void 0:j.call(e,o);return(o.type==="objectStart"||o.type==="arrayStart")&&(r||h)?{...d,[o.path]:1}:d},{}),s=t.reactive({translateY:0,visibleData:null,hiddenPaths:m(e.deep,e.collapsedNodeLength)}),N=t.computed(()=>{let l=null;const i=[],d=k.value.length;for(let o=0;o<d;o++){const h={...k.value[o],id:o},j=s.hiddenPaths[h.path];if(l&&l.path===h.path){const O=l.type==="objectStart",S={...h,...l,showComma:h.showComma,content:O?"{...}":"[...]",type:O?"objectCollapsed":"arrayCollapsed"};l=null,i.push(S)}else if(j&&!l){l=h;continue}else{if(l)continue;i.push(h)}}return i}),f=t.computed(()=>{const l=e.selectedValue;return l&&e.selectableType==="multiple"&&Array.isArray(l)?l:[l]}),b=()=>{var i;const l=N.value;if(e.virtual){const d=e.height/e.itemHeight,o=((i=C.value)==null?void 0:i.scrollTop)||0,r=Math.floor(o/e.itemHeight);let h=r<0?0:r+d>l.length?l.length-d:r;h<0&&(h=0);const j=h+d;s.translateY=h*e.itemHeight,s.visibleData=l.filter((O,S)=>S>=h&&S<j)}else s.visibleData=l},w=()=>{b()},g=({path:l})=>{const i=e.selectableType;if(i==="multiple"){const d=f.value.findIndex(r=>r===l),o=[...f.value];d!==-1?o.splice(d,1):o.push(l),n("update:selectedValue",o),n("selectedChange",o,[...f.value])}else if(i==="single"&&f.value[0]!==l){const[d]=f.value,o=l;n("update:selectedValue",o),n("selectedChange",o,d)}},L=l=>{n("nodeClick",l)},B=(l,i)=>{if(l)s.hiddenPaths={...s.hiddenPaths,[i]:1};else{const d={...s.hiddenPaths};delete d[i],s.hiddenPaths=d}},F=(l,i)=>{e.collapsedOnClickBrackets&&B(l,i.path),n("bracketsClick",l,i)},x=(l,i)=>{B(l,i.path),n("iconClick",l,i)},a=(l,i)=>{const d=D(e.data),o=e.rootPath;new Function("data","val",`data${i.slice(o.length)}=val`)(d,l),n("update:data",d)};t.watchEffect(()=>{N.value&&b()}),t.watch(()=>e.deep,l=>{l&&(s.hiddenPaths=m(l,e.collapsedNodeLength))}),t.watch(()=>e.collapsedNodeLength,l=>{l&&(s.hiddenPaths=m(e.deep,l))});const y={},T={},V=()=>y,q=()=>T;function Q(l){return l.replace(/~1/g,"/").replace(/~0/g,"~")}return u({getContentPoint:V,getPointPathMap:q}),()=>{const l=e.renderNodeKey??c.renderNodeKey,i=e.renderNodeValue??c.renderNodeValue,{pointers:d}=e,o=s.visibleData&&s.visibleData.map((r,h)=>{function j(R){return Q(R).replace(/\\u([0-9A-Fa-f]{4})/g,function(z,Y){return String.fromCodePoint(parseInt(Y,16))})}let O=j(r.path);const S=d?d[O]:"";return e.renderEffect&&e.renderEffect(S,r,h),S&&(y[JSON.stringify(S)]=r.content,T[JSON.stringify(r)]=S),t.createVNode(K,{key:r.id,node:r,collapsed:!!s.hiddenPaths[r.path],theme:e.theme,showDoubleQuotes:e.showDoubleQuotes,showLength:e.showLength,checked:f.value.includes(r.path),selectableType:e.selectableType,showLine:e.showLine,showLineNumber:e.showLineNumber,showSelectController:e.showSelectController,selectOnClickNode:e.selectOnClickNode,nodeSelectable:e.nodeSelectable,highlightSelectedNode:e.highlightSelectedNode,editable:e.editable,editableTrigger:e.editableTrigger,showIcon:e.showIcon,showKeyValueSpace:e.showKeyValueSpace,renderNodeKey:l,renderNodeValue:i,onNodeClick:L,onBracketsClick:F,onIconClick:x,onSelectedChange:g,onValueChange:a,style:e.itemHeight&&e.itemHeight!==20?{lineHeight:`${e.itemHeight}px`}:{},pointer:d[O]},null)});return t.createVNode("div",{ref:C,class:{"vjs-tree":!0,"is-virtual":e.virtual,dark:e.theme==="dark"},onScroll:e.virtual?w:void 0,style:e.showLineNumber?{paddingLeft:`${Number(k.value.length.toString().length)*12}px`,...e.style}:e.style},[e.virtual?t.createVNode("div",{class:"vjs-tree-list",style:{height:`${e.height}px`}},[t.createVNode("div",{class:"vjs-tree-list-holder",style:{height:`${N.value.length*e.itemHeight}px`}},[t.createVNode("div",{class:"vjs-tree-list-holder-inner",style:{transform:`translateY(${s.translateY}px)`}},[o])])]):o])}}});function J(e){e.component("jsonTree",A)}v.JsonTree=A,v.default=J,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});