mcl-test
Version:
2 lines (1 loc) • 10.7 kB
JavaScript
(function(m,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(m=typeof globalThis<"u"?globalThis:m||self,n(m.MyComponentLibrary={},m.Vue))})(this,function(m,n){"use strict";function x(e){return Object.prototype.toString.call(e).slice(8,-1).toLowerCase()}function V(e,l="",d=0,s){const{key:h,index:N,type:c="content",showComma:C=!1,length:g=1}=s||{},y=x(e);if(y==="array"){const b=D(e.map((k,f,w)=>V(k,`${l}/${f}`,d+1,{index:f,showComma:f!==w.length-1,length:g,type:c})));return[V("[",l,d,{showComma:!1,key:h,length:e.length,type:"arrayStart"})[0]].concat(b,V("]",l,d,{showComma:C,length:e.length,type:"arrayEnd"})[0])}else if(y==="object"){const b=Object.keys(e),k=D(b.map((f,w,v)=>V(e[f],/^[a-zA-Z_]\w*$/.test(f)?`${l}/${f}`:`${l}/${f}`,d+1,{key:f,showComma:w!==v.length-1,length:g,type:c})));return[V("{",l,d,{showComma:!1,key:h,index:N,length:b.length,type:"objectStart"})[0]].concat(k,V("}",l,d,{showComma:C,length:b.length,type:"objectEnd"})[0])}return[{content:e,level:d,key:h,index:N,path:l,showComma:C,length:g,type:c}]}function D(e){if(typeof Array.prototype.flat=="function")return e.flat();const l=[...e],d=[];for(;l.length;){const s=l.shift();Array.isArray(s)?l.unshift(...s):d.push(s)}return d}function L(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 s=e.map(h=>L(h,l));return l.set(e,s),s}const d={};for(const s in e)d[s]=L(e[s],l);return l.set(e,d),d}function F(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 I=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])}}),A=n.defineComponent({props:{nodeType:{required:!0,type:String},onClick:Function},render(){const{nodeType:e}=this,{onClick:l}=this,d=e==="objectStart"||e==="arrayStart";return!d&&!(e==="objectCollapsed"||e==="arrayCollapsed")?null:n.createVNode("span",{class:`vjs-carets vjs-carets-${d?"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)])])}}),O={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}},H=n.defineComponent({name:"TreeNode",props:{...O,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 d=n.computed(()=>x(e.node.content)),s=n.computed(()=>`vjs-value vjs-value-${d.value}`),h=n.computed(()=>e.showDoubleQuotes?`"${e.node.key}"`:e.node.key),N=()=>{const t=e.renderNodeKey;return t?t({node:e.node,defaultKey:h.value||""}):h.value},c=n.computed(()=>e.selectableType==="multiple"),C=n.computed(()=>e.selectableType==="single"),g=n.computed(()=>e.nodeSelectable(e.node)&&(c.value||C.value)),y=n.reactive({editing:!1}),b=t=>{var o;const a=(o=t.target)==null?void 0:o.value,i=F(a);l("valueChange",i,e.node.path)},k=n.computed(()=>{var a;let t=(a=e.node)==null?void 0:a.content;return t===null?t="null":t===void 0&&(t="undefined"),d.value==="string"?`"${t}"`:t+""}),f=()=>{const t=e.renderNodeValue;return t?t({node:e.node,defaultValue:k.value}):k.value},w=()=>{l("bracketsClick",!e.collapsed,e.node)},v=()=>{l("iconClick",!e.collapsed,e.node)},B=()=>{l("nodeClick",e.node),g.value&&e.selectOnClickNode&&l("selectedChange",e.node)},T=t=>{if(e.editable&&!y.editing){y.editing=!0;const a=i=>{var o;i.target!==t.target&&((o=i.target)==null?void 0:o.parentElement)!==t.target&&(y.editing=!1,document.removeEventListener("click",a))};document.removeEventListener("click",a),document.addEventListener("click",a)}};return()=>{const{node:t,pointer:a}=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:B,style:e.style,"data-pointer":JSON.stringify(a)},[e.showLineNumber&&n.createVNode("span",{class:"vjs-node-index"},[t.id+1]),n.createVNode("div",{class:"vjs-indent"},[Array.from(Array(t.level)).map((i,o)=>n.createVNode("div",{key:o,class:{"vjs-indent-unit":!0,"has-line":e.showLine}},null)),e.showIcon&&n.createVNode(A,{nodeType:t.type,onClick:v},null)]),t.key&&n.createVNode("span",{class:"vjs-key"},[N(),n.createVNode("span",{class:"vjs-colon"},[`:${e.showKeyValueSpace?" ":""}`])]),n.createVNode("span",null,[t.type!=="content"&&t.content?n.createVNode(I,{data:t.content.toString(),onClick:w},null):n.createVNode("span",{class:s.value,onClick:e.editable&&(!e.editableTrigger||e.editableTrigger==="click")?T:void 0,onDblclick:e.editable&&e.editableTrigger==="dblclick"?T:void 0},[e.editable&&y.editing?n.createVNode("input",{value:k.value,onChange:b,style:{padding:"3px 8px",border:"1px solid #eee",boxShadow:"none",boxSizing:"border-box",borderRadius:5,fontFamily:"inherit"}},null):f()]),t.showComma&&n.createVNode("span",null,[","]),e.showLength&&e.collapsed&&n.createVNode("span",{class:"vjs-comment"},[n.createTextVNode(" // "),t.length,n.createTextVNode(" items ")])])])}}}),$=n.defineComponent({name:"Tree",props:{...O,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:()=>{}}},emits:["nodeClick","bracketsClick","iconClick","selectedChange","update:selectedValue","update:data"],setup(e,{emit:l,slots:d}){const s=n.ref(),h=n.computed(()=>V(e.data,e.rootPath)),N=(t,a)=>h.value.reduce((i,o)=>{var S;const r=o.level>=t||o.length>=a,u=(S=e.pathCollapsible)==null?void 0:S.call(e,o);return(o.type==="objectStart"||o.type==="arrayStart")&&(r||u)?{...i,[o.path]:1}:i},{}),c=n.reactive({translateY:0,visibleData:null,hiddenPaths:N(e.deep,e.collapsedNodeLength)}),C=n.computed(()=>{let t=null;const a=[],i=h.value.length;for(let o=0;o<i;o++){const u={...h.value[o],id:o},S=c.hiddenPaths[u.path];if(t&&t.path===u.path){const P=t.type==="objectStart",j={...u,...t,showComma:u.showComma,content:P?"{...}":"[...]",type:P?"objectCollapsed":"arrayCollapsed"};t=null,a.push(j)}else if(S&&!t){t=u;continue}else{if(t)continue;a.push(u)}}return a}),g=n.computed(()=>{const t=e.selectedValue;return t&&e.selectableType==="multiple"&&Array.isArray(t)?t:[t]}),y=()=>{var a;const t=C.value;if(e.virtual){const i=e.height/e.itemHeight,o=((a=s.value)==null?void 0:a.scrollTop)||0,r=Math.floor(o/e.itemHeight);let u=r<0?0:r+i>t.length?t.length-i:r;u<0&&(u=0);const S=u+i;c.translateY=u*e.itemHeight,c.visibleData=t.filter((P,j)=>j>=u&&j<S)}else c.visibleData=t},b=()=>{y()},k=({path:t})=>{const a=e.selectableType;if(a==="multiple"){const i=g.value.findIndex(r=>r===t),o=[...g.value];i!==-1?o.splice(i,1):o.push(t),l("update:selectedValue",o),l("selectedChange",o,[...g.value])}else if(a==="single"&&g.value[0]!==t){const[i]=g.value,o=t;l("update:selectedValue",o),l("selectedChange",o,i)}},f=t=>{l("nodeClick",t)},w=(t,a)=>{if(t)c.hiddenPaths={...c.hiddenPaths,[a]:1};else{const i={...c.hiddenPaths};delete i[a],c.hiddenPaths=i}},v=(t,a)=>{e.collapsedOnClickBrackets&&w(t,a.path),l("bracketsClick",t,a)},B=(t,a)=>{w(t,a.path),l("iconClick",t,a)},T=(t,a)=>{const i=L(e.data),o=e.rootPath;new Function("data","val",`data${a.slice(o.length)}=val`)(i,t),l("update:data",i)};return n.watchEffect(()=>{C.value&&y()}),n.watch(()=>e.deep,t=>{t&&(c.hiddenPaths=N(t,e.collapsedNodeLength))}),n.watch(()=>e.collapsedNodeLength,t=>{t&&(c.hiddenPaths=N(e.deep,t))}),()=>{const t=e.renderNodeKey??d.renderNodeKey,a=e.renderNodeValue??d.renderNodeValue,{pointers:i}=e,o=c.visibleData&&c.visibleData.map(r=>n.createVNode(H,{key:r.id,node:r,collapsed:!!c.hiddenPaths[r.path],theme:e.theme,showDoubleQuotes:e.showDoubleQuotes,showLength:e.showLength,checked:g.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:t,renderNodeValue:a,onNodeClick:f,onBracketsClick:v,onIconClick:B,onSelectedChange:k,onValueChange:T,style:e.itemHeight&&e.itemHeight!==20?{lineHeight:`${e.itemHeight}px`}:{},pointer:i[r.path]},null));return n.createVNode("div",{ref:s,class:{"vjs-tree":!0,"is-virtual":e.virtual,dark:e.theme==="dark"},onScroll:e.virtual?b:void 0,style:e.showLineNumber?{paddingLeft:`${Number(h.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:`${C.value.length*e.itemHeight}px`}},[n.createVNode("div",{class:"vjs-tree-list-holder-inner",style:{transform:`translateY(${c.translateY}px)`}},[o])])]):o])}}});function E(e){e.component("jsonTree",$)}m.JsonTree=$,m.default=E,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});