json-format-tree/dist/main.umd.cjs

json格式化组件,配合json-source-map实现高亮效果

(function(V,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(V=typeof globalThis<"u"?globalThis:V||self,n(V.MyComponentLibrary={},V.Vue))})(this,function(V,n){"use strict";function O(e){return Object.prototype.toString.call(e).slice(8,-1).toLowerCase()}function T(e,l="",c=0,r){const{key:C,index:k,type:m="content",showComma:s=!1,length:N=1}=r||{},f=O(e);if(f==="array"){const b=$(e.map((w,g,j)=>T(w,`${l}/${g}`,c+1,{index:g,showComma:g!==j.length-1,length:N,type:m})));return[T("[",l,c,{showComma:!1,key:C,length:e.length,type:"arrayStart"})[0]].concat(b,T("]",l,c,{showComma:s,length:e.length,type:"arrayEnd"})[0])}else if(f==="object"){const b=Object.keys(e),w=$(b.map((g,j,P)=>T(e[g],/^[a-zA-Z_]\w*$/.test(g)?`${l}/${g}`:`${l}/${g}`,c+1,{key:g,showComma:j!==P.length-1,length:N,type:m})));return[T("{",l,c,{showComma:!1,key:C,index:k,length:b.length,type:"objectStart"})[0]].concat(w,T("}",l,c,{showComma:s,length:b.length,type:"objectEnd"})[0])}return[{content:e,level:c,key:C,index:k,path:l,showComma:s,length:N,type:m}]}function $(e){if(typeof Array.prototype.flat=="function")return e.flat();const l=[...e],c=[];for(;l.length;){const r=l.shift();Array.isArray(r)?l.unshift(...r):c.push(r)}return c}function D(e,l=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(l.get(e))return l.get(e);if(Array.isArray(e)){const r=e.map(C=>D(C,l));return l.set(e,r),r}const c={};for(const r in e)c[r]=D(e[r],l);return l.set(e,c),c}function H(e){let l;return e==="null"?l=null:e==="undefined"?l=void 0:e==="true"?l=!0:e==="false"?l=!1:e[0]+e[e.length-1]==='""'||e[0]+e[e.length-1]==="''"?l=e.slice(1,-1):typeof Number(e)=="number"&&!isNaN(Number(e))||e==="NaN"?l=Number(e):l=e,l}const E=n.defineComponent({props:{data:{required:!0,type:String},onClick:Function},render(){const{data:e}=this,{onClick:l}=this;return n.createVNode("span",{class:"vjs-tree-brackets",onClick:l},[e])}}),K=n.defineComponent({props:{nodeType:{required:!0,type:String},onClick:Function},render(){const{nodeType:e}=this,{onClick:l}=this,c=e==="objectStart"||e==="arrayStart";return!c&&!(e==="objectCollapsed"||e==="arrayCollapsed")?null:n.createVNode("span",{class:`vjs-carets vjs-carets-${c?"open":"close"}`,onClick:l},[n.createVNode("svg",{viewBox:"0 0 1024 1024",focusable:"false","data-icon":"caret-down",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true"},[n.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}},M=n.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:l}){const c=n.computed(()=>O(e.node.content)),r=n.computed(()=>`vjs-value vjs-value-${c.value}`),C=n.computed(()=>e.showDoubleQuotes?`"${e.node.key}"`:e.node.key),k=()=>{const a=e.renderNodeKey;return a?a({node:e.node,defaultKey:C.value||""}):C.value},m=n.computed(()=>e.selectableType==="multiple"),s=n.computed(()=>e.selectableType==="single"),N=n.computed(()=>e.nodeSelectable(e.node)&&(m.value||s.value)),f=n.reactive({editing:!1}),b=a=>{var t;const y=(t=a.target)==null?void 0:t.value,L=H(y);l("valueChange",L,e.node.path)},w=n.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}):w.value},j=()=>{l("bracketsClick",!e.collapsed,e.node)},P=()=>{l("iconClick",!e.collapsed,e.node)},F=()=>{l("nodeClick",e.node),N.value&&e.selectOnClickNode&&l("selectedChange",e.node)},x=a=>{if(e.editable&&!f.editing){f.editing=!0;const y=L=>{var t;L.target!==a.target&&((t=L.target)==null?void 0:t.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 n.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)},[e.showLineNumber&&n.createVNode("span",{class:"vjs-node-index"},[a.id+1]),n.createVNode("div",{class:"vjs-indent"},[Array.from(Array(a.level)).map((L,t)=>n.createVNode("div",{key:t,class:{"vjs-indent-unit":!0,"has-line":e.showLine}},null)),e.showIcon&&n.createVNode(K,{nodeType:a.type,onClick:P},null)]),a.key&&n.createVNode("span",{class:"vjs-key"},[k(),n.createVNode("span",{class:"vjs-colon"},[`:${e.showKeyValueSpace?" ":""}`])]),n.createVNode("span",null,[a.type!=="content"&&a.content?n.createVNode(E,{data:a.content.toString(),onClick:j},null):n.createVNode("span",{class:r.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?n.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&&n.createVNode("span",null,[","]),e.showLength&&e.collapsed&&n.createVNode("span",{class:"vjs-comment"},[n.createTextVNode(" // "),a.length,n.createTextVNode(" items ")])])])}}}),A=n.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:l,slots:c,expose:r}){const C=n.ref(),k=n.computed(()=>T(e.data,e.rootPath)),m=(t,i)=>k.value.reduce((d,o)=>{var S;const u=o.level>=t||o.length>=i,h=(S=e.pathCollapsible)==null?void 0:S.call(e,o);return(o.type==="objectStart"||o.type==="arrayStart")&&(u||h)?{...d,[o.path]:1}:d},{}),s=n.reactive({translateY:0,visibleData:null,hiddenPaths:m(e.deep,e.collapsedNodeLength)}),N=n.computed(()=>{let t=null;const i=[],d=k.value.length;for(let o=0;o<d;o++){const h={...k.value[o],id:o},S=s.hiddenPaths[h.path];if(t&&t.path===h.path){const B=t.type==="objectStart",v={...h,...t,showComma:h.showComma,content:B?"{...}":"[...]",type:B?"objectCollapsed":"arrayCollapsed"};t=null,i.push(v)}else if(S&&!t){t=h;continue}else{if(t)continue;i.push(h)}}return i}),f=n.computed(()=>{const t=e.selectedValue;return t&&e.selectableType==="multiple"&&Array.isArray(t)?t:[t]}),b=()=>{var i;const t=N.value;if(e.virtual){const d=e.height/e.itemHeight,o=((i=C.value)==null?void 0:i.scrollTop)||0,u=Math.floor(o/e.itemHeight);let h=u<0?0:u+d>t.length?t.length-d:u;h<0&&(h=0);const S=h+d;s.translateY=h*e.itemHeight,s.visibleData=t.filter((B,v)=>v>=h&&v<S)}else s.visibleData=t},w=()=>{b()},g=({path:t})=>{const i=e.selectableType;if(i==="multiple"){const d=f.value.findIndex(u=>u===t),o=[...f.value];d!==-1?o.splice(d,1):o.push(t),l("update:selectedValue",o),l("selectedChange",o,[...f.value])}else if(i==="single"&&f.value[0]!==t){const[d]=f.value,o=t;l("update:selectedValue",o),l("selectedChange",o,d)}},j=t=>{l("nodeClick",t)},P=(t,i)=>{if(t)s.hiddenPaths={...s.hiddenPaths,[i]:1};else{const d={...s.hiddenPaths};delete d[i],s.hiddenPaths=d}},F=(t,i)=>{e.collapsedOnClickBrackets&&P(t,i.path),l("bracketsClick",t,i)},x=(t,i)=>{P(t,i.path),l("iconClick",t,i)},a=(t,i)=>{const d=D(e.data),o=e.rootPath;new Function("data","val",`data${i.slice(o.length)}=val`)(d,t),l("update:data",d)};n.watchEffect(()=>{N.value&&b()}),n.watch(()=>e.deep,t=>{t&&(s.hiddenPaths=m(t,e.collapsedNodeLength))}),n.watch(()=>e.collapsedNodeLength,t=>{t&&(s.hiddenPaths=m(e.deep,t))});const y={};return r({getContentPoint:()=>y}),()=>{const t=e.renderNodeKey??c.renderNodeKey,i=e.renderNodeValue??c.renderNodeValue,{pointers:d}=e,o=s.visibleData&&s.visibleData.map((u,h)=>{function S(q){return q.replace(/\\u([0-9A-Fa-f]{4})/g,function(Q,J){return String.fromCodePoint(parseInt(J,16))})}let B=S(u.path);const v=d?d[B]:"";return e.renderEffect&&e.renderEffect(v,u,h),v&&(y[JSON.stringify(v)]=u.content),n.createVNode(M,{key:u.id,node:u,collapsed:!!s.hiddenPaths[u.path],theme:e.theme,showDoubleQuotes:e.showDoubleQuotes,showLength:e.showLength,checked:f.value.includes(u.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:t,renderNodeValue:i,onNodeClick:j,onBracketsClick:F,onIconClick:x,onSelectedChange:g,onValueChange:a,style:e.itemHeight&&e.itemHeight!==20?{lineHeight:`${e.itemHeight}px`}:{},pointer:d[B]},null)});return n.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?n.createVNode("div",{class:"vjs-tree-list",style:{height:`${e.height}px`}},[n.createVNode("div",{class:"vjs-tree-list-holder",style:{height:`${N.value.length*e.itemHeight}px`}},[n.createVNode("div",{class:"vjs-tree-list-holder-inner",style:{transform:`translateY(${s.translateY}px)`}},[o])])]):o])}}});function p(e){e.component("jsonTree",A)}V.JsonTree=A,V.default=p,Object.defineProperties(V,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});