vue3-json-viewer/dist/vue3-json-viewer.js

vuejs展示json的组件,适配vue3

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),Q=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/,D=t.defineComponent({name:"JsonString",props:{jsonValue:{type:String,required:!0}},setup(e){const h=t.ref(!0),s=t.ref(!1),f=t.ref(null),v=t.ref(null);t.onMounted(()=>{f.value&&v.value&&f.value.offsetHeight>v.value.offsetHeight&&(s.value=!0)});const l=()=>{h.value=!h.value};return()=>{const o=e.jsonValue,n=Q.test(o);let r;!h.value&&s.value?r=t.h("span",{class:{"jv-ellipsis":!0},onClick:l},"..."):n?r=t.h("span",{class:{"jv-item":!0,"jv-string":!0},ref:f},[t.h("span",null,'"'),t.h("a",{href:o,target:"_blank",class:"jv-link"},o),t.h("span",null,'"')]):r=t.h("span",{class:{"jv-item":!0,"jv-string":!0},ref:f},`"${o}"`);const a=[];return s.value&&a.push(t.h("span",{class:{"jv-toggle":!0,open:h.value},onClick:l})),a.push(t.h("span",{class:{"jv-holder-node":!0},ref:v})),a.push(r),t.h("span",{},a)}}}),W={class:t.normalizeClass(["jv-item","jv-undefined"])},ee=t.defineComponent({__name:"json-undefined",props:{jsonValue:{type:null,default:void 0}},setup(e){const h=e,s=t.computed(()=>h.jsonValue===null?"null":"undefined");return(f,v)=>(t.openBlock(),t.createElementBlock("span",W,t.toDisplayString(s.value),1))}}),te=t.defineComponent({__name:"json-number",props:{jsonValue:{type:Number,required:!0}},setup(e){const h=e,s=t.computed(()=>Number.isInteger(h.jsonValue));return(f,v)=>(t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["jv-item","jv-number",s.value?"jv-number-integer":"jv-number-float"])},t.toDisplayString(e.jsonValue.toString()),3))}}),ne={class:t.normalizeClass(["jv-item","jv-boolean"])},oe=t.defineComponent({__name:"json-boolean",props:{jsonValue:{type:Boolean,required:!0}},setup(e){return(h,s)=>(t.openBlock(),t.createElementBlock("span",ne,t.toDisplayString(e.jsonValue.toString()),1))}}),re=t.defineComponent({name:"JsonObject",props:{jsonValue:{type:Object,required:!0},keyName:{type:String,default:""},depth:{type:Number,default:0},expand:Boolean,sort:Boolean,previewMode:Boolean},emits:["update:expand"],setup(e,{emit:h}){const s=t.ref({});let f=null;const v=r=>{setTimeout(()=>{s.value=r},0)};t.watch(()=>e.jsonValue,r=>{v(r)},{immediate:!0,deep:!0});const l=t.computed(()=>{if(!e.sort)return s.value;const r=Object.keys(s.value).sort(),a={};return r.forEach(y=>{a[y]=s.value[y]}),a}),o=()=>{if(f)try{f.dispatchEvent(new Event("resized"))}catch{const a=document.createEvent("Event");a.initEvent("resized",!0,!1),f.dispatchEvent(a)}},n=()=>{h("update:expand",!e.expand),o()};return()=>{const r=[];if(r.push(t.h("span",{class:["jv-item","jv-object"]},"{")),e.expand){for(const a in l.value)if(l.value.hasOwnProperty(a)){const y=l.value[a];r.push(t.h($,{key:a,sort:e.sort,keyName:a,depth:e.depth+1,value:y,previewMode:e.previewMode}))}}return!e.expand&&Object.keys(s.value).length>0&&r.push(t.h("span",{class:"jv-ellipsis",onClick:n,title:`click to reveal object content (keys: ${Object.keys(l.value).join(", ")})`},"...")),r.push(t.h("span",{class:["jv-item","jv-object"]},"}")),t.h("span",{ref:a=>{f=a}},r)}}}),ae=t.defineComponent({name:"JsonArray",props:{jsonValue:{type:Array,required:!0},keyName:{type:String,default:""},depth:{type:Number,default:0},sort:Boolean,expand:Boolean,previewMode:Boolean},emits:["update:expand"],setup(e,{emit:h}){const s=t.ref([]);let f=null;const v=(o,n=0)=>{n===0&&(s.value=[]),setTimeout(()=>{o&&o.length>n&&(s.value.push(o[n]),v(o,n+1))},0)};t.watch(()=>e.jsonValue,o=>{v(o)},{immediate:!0,deep:!0});const l=()=>{if(h("update:expand",!e.expand),f)try{f.dispatchEvent(new Event("resized"))}catch{const n=document.createEvent("Event");n.initEvent("resized",!0,!1),f.dispatchEvent(n)}};return()=>{const o=[];return!e.previewMode&&!e.keyName&&o.push(t.h("span",{class:{"jv-toggle":!0,open:!!e.expand},onClick:l})),o.push(t.h("span",{class:["jv-item","jv-array"]},"[")),e.expand&&s.value.forEach((n,r)=>{o.push(t.h($,{key:r,sort:e.sort,depth:e.depth+1,value:n,previewMode:e.previewMode}))}),!e.expand&&s.value.length>0&&o.push(t.h("span",{class:"jv-ellipsis",onClick:l,title:`click to reveal ${s.value.length} hidden items`},"...")),o.push(t.h("span",{class:["jv-item","jv-array"]},"]")),t.h("span",{ref:n=>{f=n}},o)}}}),ie=["title"],ue=t.defineComponent({__name:"json-function",props:{jsonValue:{type:Function,required:!0}},setup(e){return(h,s)=>(t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["jv-item","jv-function"]),title:e.jsonValue.toString()}," <function> ",8,ie))}}),le={class:t.normalizeClass(["jv-item","jv-string"])},se=t.defineComponent({__name:"json-date",props:{jsonValue:{type:Date,required:!0}},setup(e){const h=e,s=t.inject("timeformat",v=>v.toLocaleString()),f=t.computed(()=>s(h.jsonValue));return(v,l)=>(t.openBlock(),t.createElementBlock("span",le,' "'+t.toDisplayString(f.value)+'" ',1))}}),ce={class:t.normalizeClass(["jv-item","jv-regexp"])},fe=t.defineComponent({__name:"json-regexp",props:{jsonValue:{type:RegExp,required:!0}},setup(e){return(h,s)=>(t.openBlock(),t.createElementBlock("span",ce,t.toDisplayString(e.jsonValue.toString()),1))}}),$=t.defineComponent({name:"JsonBox",props:{value:{type:[Object,Array,String,Number,Boolean,Function,Date],default:null},keyName:{type:String,default:""},sort:Boolean,depth:{type:Number,default:0},previewMode:Boolean},setup(e){const h=t.inject("expandDepth",1/0),s=t.inject("keyClick",()=>{}),f=t.ref(!0);let v=null;t.onMounted(()=>{f.value=e.previewMode||e.depth<h});const l=()=>{if(f.value=!f.value,v)try{v.dispatchEvent(new Event("resized"))}catch{const n=document.createEvent("Event");n.initEvent("resized",!0,!1),v.dispatchEvent(n)}};return()=>{const o=[];let n;e.value===null||e.value===void 0?n=ee:Array.isArray(e.value)?n=ae:e.value instanceof Date?n=se:e.value instanceof RegExp?n=fe:typeof e.value=="object"?n=re:typeof e.value=="number"?n=te:typeof e.value=="string"?n=D:typeof e.value=="boolean"?n=oe:typeof e.value=="function"?n=ue:n=D;const r=e.value&&(Array.isArray(e.value)||typeof e.value=="object"&&!(e.value instanceof Date)&&!(e.value instanceof RegExp));return!e.previewMode&&r&&!(e.value instanceof RegExp)&&o.push(t.h("span",{class:{"jv-toggle":!0,open:!!f.value},onClick:l})),e.keyName&&o.push(t.h("span",{class:"jv-key",onClick:()=>{s&&s(e.keyName)}},`${e.keyName}:`)),o.push(t.h(n,{class:"jv-push",jsonValue:e.value,keyName:e.keyName,sort:e.sort,depth:e.depth,expand:f.value,previewMode:e.previewMode,"onUpdate:expand":a=>{f.value=a}})),t.h("div",{class:{"jv-node":!0,"jv-key-node":!!e.keyName&&!r,toggle:!e.previewMode&&r},ref:a=>{v=a}},o)}}});function de(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}};/*!
 * clipboard.js v2.0.11
 * https://clipboardjs.com/
 *
 * Licensed MIT © Zeno Rocha
 */var pe=A.exports,L;function ve(){return L||(L=1,function(e,h){(function(f,v){e.exports=v()})(pe,function(){return function(){var s={686:function(l,o,n){n.d(o,{default:function(){return X}});var r=n(279),a=n.n(r),y=n(370),x=n.n(y),_=n(817),E=n.n(_);function b(p){try{return document.execCommand(p)}catch{return!1}}var g=function(u){var i=E()(u);return b("cut"),i},j=g;function k(p){var u=document.documentElement.getAttribute("dir")==="rtl",i=document.createElement("textarea");i.style.fontSize="12pt",i.style.border="0",i.style.padding="0",i.style.margin="0",i.style.position="absolute",i.style[u?"right":"left"]="-9999px";var c=window.pageYOffset||document.documentElement.scrollTop;return i.style.top="".concat(c,"px"),i.setAttribute("readonly",""),i.value=p,i}var R=function(u,i){var c=k(u);i.container.appendChild(c);var d=E()(c);return b("copy"),c.remove(),d},P=function(u){var i=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{container:document.body},c="";return typeof u=="string"?c=R(u,i):u instanceof HTMLInputElement&&!["text","search","url","tel","password"].includes(u==null?void 0:u.type)?c=R(u.value,i):(c=E()(u),b("copy")),c},B=P;function w(p){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?w=function(i){return typeof i}:w=function(i){return i&&typeof Symbol=="function"&&i.constructor===Symbol&&i!==Symbol.prototype?"symbol":typeof i},w(p)}var I=function(){var u=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},i=u.action,c=i===void 0?"copy":i,d=u.container,m=u.target,C=u.text;if(c!=="copy"&&c!=="cut")throw new Error('Invalid "action" value, use either "copy" or "cut"');if(m!==void 0)if(m&&w(m)==="object"&&m.nodeType===1){if(c==="copy"&&m.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if(c==="cut"&&(m.hasAttribute("readonly")||m.hasAttribute("disabled")))throw new Error(`Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes`)}else throw new Error('Invalid "target" value, use a valid Element');if(C)return B(C,{container:d});if(m)return c==="cut"?j(m):B(m,{container:d})},q=I;function S(p){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?S=function(i){return typeof i}:S=function(i){return i&&typeof Symbol=="function"&&i.constructor===Symbol&&i!==Symbol.prototype?"symbol":typeof i},S(p)}function J(p,u){if(!(p instanceof u))throw new TypeError("Cannot call a class as a function")}function z(p,u){for(var i=0;i<u.length;i++){var c=u[i];c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(p,c.key,c)}}function F(p,u,i){return u&&z(p.prototype,u),i&&z(p,i),p}function H(p,u){if(typeof u!="function"&&u!==null)throw new TypeError("Super expression must either be null or a function");p.prototype=Object.create(u&&u.prototype,{constructor:{value:p,writable:!0,configurable:!0}}),u&&O(p,u)}function O(p,u){return O=Object.setPrototypeOf||function(c,d){return c.__proto__=d,c},O(p,u)}function K(p){var u=Z();return function(){var c=T(p),d;if(u){var m=T(this).constructor;d=Reflect.construct(c,arguments,m)}else d=c.apply(this,arguments);return U(this,d)}}function U(p,u){return u&&(S(u)==="object"||typeof u=="function")?u:Y(p)}function Y(p){if(p===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return p}function Z(){if(typeof Reflect>"u"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch{return!1}}function T(p){return T=Object.setPrototypeOf?Object.getPrototypeOf:function(i){return i.__proto__||Object.getPrototypeOf(i)},T(p)}function V(p,u){var i="data-clipboard-".concat(p);if(u.hasAttribute(i))return u.getAttribute(i)}var G=function(p){H(i,p);var u=K(i);function i(c,d){var m;return J(this,i),m=u.call(this),m.resolveOptions(d),m.listenClick(c),m}return F(i,[{key:"resolveOptions",value:function(){var d=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};this.action=typeof d.action=="function"?d.action:this.defaultAction,this.target=typeof d.target=="function"?d.target:this.defaultTarget,this.text=typeof d.text=="function"?d.text:this.defaultText,this.container=S(d.container)==="object"?d.container:document.body}},{key:"listenClick",value:function(d){var m=this;this.listener=x()(d,"click",function(C){return m.onClick(C)})}},{key:"onClick",value:function(d){var m=d.delegateTarget||d.currentTarget,C=this.action(m)||"copy",N=q({action:C,container:this.container,target:this.target(m),text:this.text(m)});this.emit(N?"success":"error",{action:C,text:N,trigger:m,clearSelection:function(){m&&m.focus(),window.getSelection().removeAllRanges()}})}},{key:"defaultAction",value:function(d){return V("action",d)}},{key:"defaultTarget",value:function(d){var m=V("target",d);if(m)return document.querySelector(m)}},{key:"defaultText",value:function(d){return V("text",d)}},{key:"destroy",value:function(){this.listener.destroy()}}],[{key:"copy",value:function(d){var m=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{container:document.body};return B(d,m)}},{key:"cut",value:function(d){return j(d)}},{key:"isSupported",value:function(){var d=arguments.length>0&&arguments[0]!==void 0?arguments[0]:["copy","cut"],m=typeof d=="string"?[d]:d,C=!!document.queryCommandSupported;return m.forEach(function(N){C=C&&!!document.queryCommandSupported(N)}),C}}]),i}(a()),X=G},828:function(l){var o=9;if(typeof Element<"u"&&!Element.prototype.matches){var n=Element.prototype;n.matches=n.matchesSelector||n.mozMatchesSelector||n.msMatchesSelector||n.oMatchesSelector||n.webkitMatchesSelector}function r(a,y){for(;a&&a.nodeType!==o;){if(typeof a.matches=="function"&&a.matches(y))return a;a=a.parentNode}}l.exports=r},438:function(l,o,n){var r=n(828);function a(_,E,b,g,j){var k=x.apply(this,arguments);return _.addEventListener(b,k,j),{destroy:function(){_.removeEventListener(b,k,j)}}}function y(_,E,b,g,j){return typeof _.addEventListener=="function"?a.apply(null,arguments):typeof b=="function"?a.bind(null,document).apply(null,arguments):(typeof _=="string"&&(_=document.querySelectorAll(_)),Array.prototype.map.call(_,function(k){return a(k,E,b,g,j)}))}function x(_,E,b,g){return function(j){j.delegateTarget=r(j.target,E),j.delegateTarget&&g.call(_,j)}}l.exports=y},879:function(l,o){o.node=function(n){return n!==void 0&&n instanceof HTMLElement&&n.nodeType===1},o.nodeList=function(n){var r=Object.prototype.toString.call(n);return n!==void 0&&(r==="[object NodeList]"||r==="[object HTMLCollection]")&&"length"in n&&(n.length===0||o.node(n[0]))},o.string=function(n){return typeof n=="string"||n instanceof String},o.fn=function(n){var r=Object.prototype.toString.call(n);return r==="[object Function]"}},370:function(l,o,n){var r=n(879),a=n(438);function y(b,g,j){if(!b&&!g&&!j)throw new Error("Missing required arguments");if(!r.string(g))throw new TypeError("Second argument must be a String");if(!r.fn(j))throw new TypeError("Third argument must be a Function");if(r.node(b))return x(b,g,j);if(r.nodeList(b))return _(b,g,j);if(r.string(b))return E(b,g,j);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function x(b,g,j){return b.addEventListener(g,j),{destroy:function(){b.removeEventListener(g,j)}}}function _(b,g,j){return Array.prototype.forEach.call(b,function(k){k.addEventListener(g,j)}),{destroy:function(){Array.prototype.forEach.call(b,function(k){k.removeEventListener(g,j)})}}}function E(b,g,j){return a(document.body,b,g,j)}l.exports=y},817:function(l){function o(n){var r;if(n.nodeName==="SELECT")n.focus(),r=n.value;else if(n.nodeName==="INPUT"||n.nodeName==="TEXTAREA"){var a=n.hasAttribute("readonly");a||n.setAttribute("readonly",""),n.select(),n.setSelectionRange(0,n.value.length),a||n.removeAttribute("readonly"),r=n.value}else{n.hasAttribute("contenteditable")&&n.focus();var y=window.getSelection(),x=document.createRange();x.selectNodeContents(n),y.removeAllRanges(),y.addRange(x),r=y.toString()}return r}l.exports=o},279:function(l){function o(){}o.prototype={on:function(n,r,a){var y=this.e||(this.e={});return(y[n]||(y[n]=[])).push({fn:r,ctx:a}),this},once:function(n,r,a){var y=this;function x(){y.off(n,x),r.apply(a,arguments)}return x._=r,this.on(n,x,a)},emit:function(n){var r=[].slice.call(arguments,1),a=((this.e||(this.e={}))[n]||[]).slice(),y=0,x=a.length;for(y;y<x;y++)a[y].fn.apply(a[y].ctx,r);return this},off:function(n,r){var a=this.e||(this.e={}),y=a[n],x=[];if(y&&r)for(var _=0,E=y.length;_<E;_++)y[_].fn!==r&&y[_].fn._!==r&&x.push(y[_]);return x.length?a[n]=x:delete a[n],this}},l.exports=o,l.exports.TinyEmitter=o}},f={};function v(l){if(f[l])return f[l].exports;var o=f[l]={exports:{}};return s[l](o,o.exports,v),o.exports}return function(){v.n=function(l){var o=l&&l.__esModule?function(){return l.default}:function(){return l};return v.d(o,{a:o}),o}}(),function(){v.d=function(l,o){for(var n in o)v.o(o,n)&&!v.o(l,n)&&Object.defineProperty(l,n,{enumerable:!0,get:o[n]})}}(),function(){v.o=function(l,o){return Object.prototype.hasOwnProperty.call(l,o)}}(),v(686)}().default})}(A)),A.exports}var ye=ve();const me=de(ye),he=function(e,h){let s=Date.now(),f;return(...v)=>{Date.now()-s<h&&f&&clearTimeout(f),f=setTimeout(()=>{e(...v)},h),s=Date.now()}},ge=t.defineComponent({name:"JsonViewer",components:{JsonBox:$},props:{value:{type:[Object,Array,String,Number,Boolean,Function],required:!0},expanded:{type:Boolean,default:!1},expandDepth:{type:Number,default:1},copyable:{type:[Boolean,Object],default:!1},sort:{type:Boolean,default:!1},boxed:{type:Boolean,default:!1},theme:{type:String,default:"light"},timeformat:{type:Function,default:e=>e.toLocaleString()},previewMode:{type:Boolean,default:!1},parse:{type:Boolean,default:!1}},emits:["onKeyClick","copied"],setup(e,{emit:h}){const s=t.ref(!1),f=t.ref(!1),v=t.ref(e.expanded),l=t.ref(null),o=t.ref(null);t.provide("expandDepth",e.expandDepth),t.provide("timeformat",e.timeformat),t.provide("keyClick",g=>{h("onKeyClick",g)});const n=t.computed(()=>"jv-container jv-"+e.theme+(e.boxed?" boxed":"")),r=t.computed(()=>{if(typeof e.copyable=="boolean"&&!e.copyable)return{copyText:"copy",copiedText:"copied!",timeout:2e3,align:"right"};const g=e.copyable;return{copyText:g.copyText||"copy",copiedText:g.copiedText||"copied!",timeout:g.timeout||2e3,align:g.align||"right"}}),a=t.computed(()=>{if(!e.parse||typeof e.value!="string")return e.value;try{return JSON.parse(e.value)}catch{return e.value}}),y=()=>{_()},_=he(()=>{t.nextTick(()=>{o.value&&(o.value.$el.clientHeight>=250?f.value=!0:f.value=!1)})},200),E=g=>{s.value||(s.value=!0,setTimeout(()=>{s.value=!1},r.value.timeout),h("copied",g))},b=()=>{v.value=!v.value};return t.watch(()=>e.value,()=>{y()}),t.onMounted(()=>{e.boxed&&o.value&&(y(),o.value.$el.addEventListener("resized",y,!0)),e.copyable&&l.value&&new me(l.value,{text:()=>JSON.stringify(a.value,null,2)}).on("success",E)}),{clip:l,jsonBox:o,copied:s,expandableCode:f,expandCode:v,jvClass:n,copyText:r,parseValue:a,toggleExpandCode:b}}}),be=(e,h)=>{const s=e.__vccOpts||e;for(const[f,v]of h)s[f]=v;return s};function je(e,h,s,f,v,l){const o=t.resolveComponent("json-box");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(e.jvClass)},[e.copyable?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(`jv-tooltip ${e.copyText.align||"right"}`)},[t.createElementVNode("span",{ref:"clip",class:t.normalizeClass(["jv-button",{copied:e.copied}])},[t.renderSlot(e.$slots,"copy",{copied:e.copied},()=>[t.createTextVNode(t.toDisplayString(e.copied?e.copyText.copiedText:e.copyText.copyText),1)])],2)],2)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["jv-code",{open:e.expandCode,boxed:e.boxed}])},[t.createVNode(o,{ref:"jsonBox",value:e.parseValue,sort:e.sort,"preview-mode":e.previewMode},null,8,["value","sort","preview-mode"])],2),e.expandableCode&&e.boxed?(t.openBlock(),t.createElementBlock("div",{key:1,class:"jv-more",onClick:h[0]||(h[0]=(...n)=>e.toggleExpandCode&&e.toggleExpandCode(...n))},[t.createElementVNode("span",{class:t.normalizeClass(["jv-toggle",{open:!!e.expandCode}])},null,2)])):t.createCommentVNode("",!0)],2)}const M=be(ge,[["render",je]]),_e=e=>{e.component(M.name,M)},xe={install:_e};exports.JsonViewer=M;exports.default=xe;