├── .babelrc ├── .gitignore ├── .npmignore ├── .vscode ├── extensions.json ├── lauch.json └── settings.json ├── LICENSE ├── dist ├── bundle.cjs.js ├── bundle.esm.js ├── icon.svg └── index.css ├── img └── demo.png ├── package.json ├── readme.md ├── readme_cn.md ├── rollup.config.js ├── src ├── Components │ ├── icon.svg │ ├── json-box.vue │ ├── json-viewer.vue │ ├── types │ │ ├── json-array.vue │ │ ├── json-boolean.vue │ │ ├── json-date.vue │ │ ├── json-function.vue │ │ ├── json-number.vue │ │ ├── json-object.vue │ │ ├── json-regexp.vue │ │ ├── json-string.vue │ │ └── json-undefined.vue │ └── utils.js └── index.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-syntax-jsx"] 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .git 3 | .gitignore 4 | src 5 | img -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/lauch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Chrome", 6 | "type": "chrome", 7 | "request": "launch", 8 | "url": "http://localhost:3000", 9 | "webRoot": "${workspaceFolder}/src", 10 | "sourceMapPathOverrides": { 11 | "webpack:///src/*": "${webRoot}/*" 12 | } 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.useTabs": true, 3 | "prettier.singleQuote": true, 4 | "prettier.requireConfig": true, 5 | "prettier.jsxSingleQuote": true, 6 | "prettier.jsxBracketSameLine": true, 7 | // "editor.fontFamily": "Fira Code", 8 | "editor.fontFamily": "Fira Code Retina,Fira Code Retina,Consolas", 9 | // "editor.fontLigatures": "'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'", 10 | "editor.fontLigatures": true, 11 | "editor.fontWeight": "500", 12 | "workbench.colorTheme": "Default Dark Modern", 13 | "window.autoDetectColorScheme": false, 14 | "editor.formatOnSave": true, 15 | "vue3snippets.enable-compile-vue-file-on-did-save-code": false 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 isfive 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dist/bundle.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | var vue = require('vue'); 6 | 7 | function _typeof(o) { 8 | "@babel/helpers - typeof"; 9 | 10 | return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { 11 | return typeof o; 12 | } : function (o) { 13 | return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; 14 | }, _typeof(o); 15 | } 16 | 17 | var REG_LINK$1 = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; 18 | var script$a = { 19 | name: 'JsonString', 20 | props: { 21 | jsonValue: { 22 | type: String, 23 | required: true 24 | } 25 | }, 26 | data: function data() { 27 | return { 28 | expand: true, 29 | canExtend: false 30 | }; 31 | }, 32 | mounted: function mounted() { 33 | if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) { 34 | this.canExtend = true; 35 | } 36 | }, 37 | methods: { 38 | toggle: function toggle() { 39 | this.expand = !this.expand; 40 | } 41 | }, 42 | render: function render() { 43 | var value = this.jsonValue; 44 | var islink = REG_LINK$1.test(value); 45 | var domItem; 46 | if (!this.expand) { 47 | domItem = { 48 | 'class': { 'jv-ellipsis': true }, 49 | onClick: this.toggle, 50 | innerText: '...' 51 | }; 52 | } else { 53 | domItem = { 54 | 'class': { 55 | 'jv-item': true, 56 | 'jv-string': true 57 | }, 58 | ref: 'itemRef' 59 | }; 60 | if (islink) { 61 | value = '').concat(value, ''); 62 | domItem.innerHTML = '"'.concat(value.toString(), '"'); 63 | } else { 64 | domItem.innerText = '"'.concat(value.toString(), '"'); 65 | } 66 | } 67 | return vue.h('span', {}, [ 68 | this.canExtend && vue.h('span', { 69 | 'class': { 70 | 'jv-toggle': true, 71 | open: this.expand 72 | }, 73 | onClick: this.toggle 74 | }), 75 | vue.h('span', { 76 | 'class': { 'jv-holder-node': true }, 77 | ref: 'holderRef' 78 | }), 79 | vue.h('span', domItem) 80 | ]); 81 | } 82 | }; 83 | 84 | script$a.__file = "src/Components/types/json-string.vue"; 85 | 86 | var script$9 = { 87 | name: 'JsonUndefined', 88 | functional: true, 89 | props: { 90 | jsonValue: { 91 | type: Object, 92 | 'default': null 93 | } 94 | }, 95 | render: function render() { 96 | return vue.h('span', { 97 | 'class': { 98 | 'jv-item': true, 99 | 'jv-undefined': true 100 | }, 101 | innerText: this.jsonValue === null ? 'null' : 'undefined' 102 | }); 103 | } 104 | }; 105 | 106 | script$9.__file = "src/Components/types/json-undefined.vue"; 107 | 108 | var script$8 = { 109 | name: 'JsonNumber', 110 | functional: true, 111 | props: { 112 | jsonValue: { 113 | type: Number, 114 | required: true 115 | } 116 | }, 117 | render: function render() { 118 | var isInteger = Number.isInteger(this.jsonValue); 119 | return vue.h('span', { 120 | 'class': { 121 | 'jv-item': true, 122 | 'jv-number': true, 123 | 'jv-number-integer': isInteger, 124 | 'jv-number-float': !isInteger 125 | }, 126 | innerText: this.jsonValue.toString() 127 | }); 128 | } 129 | }; 130 | 131 | script$8.__file = "src/Components/types/json-number.vue"; 132 | 133 | var script$7 = { 134 | name: 'JsonBoolean', 135 | functional: true, 136 | props: { jsonValue: Boolean }, 137 | render: function render() { 138 | return vue.h('span', { 139 | 'class': { 140 | 'jv-item': true, 141 | 'jv-boolean': true 142 | }, 143 | innerText: this.jsonValue.toString() 144 | }); 145 | } 146 | }; 147 | 148 | script$7.__file = "src/Components/types/json-boolean.vue"; 149 | 150 | var script$6 = { 151 | name: 'JsonObject', 152 | props: { 153 | jsonValue: { 154 | type: Object, 155 | required: true 156 | }, 157 | keyName: { 158 | type: String, 159 | 'default': '' 160 | }, 161 | depth: { 162 | type: Number, 163 | 'default': 0 164 | }, 165 | expand: Boolean, 166 | sort: Boolean, 167 | previewMode: Boolean 168 | }, 169 | data: function data() { 170 | return { value: {} }; 171 | }, 172 | computed: { 173 | ordered: function ordered() { 174 | var _this = this; 175 | if (!this.sort) { 176 | return this.value; 177 | } 178 | var ordered = {}; 179 | Object.keys(this.value).sort().forEach(function (key) { 180 | ordered[key] = _this.value[key]; 181 | }); 182 | return ordered; 183 | } 184 | }, 185 | watch: { 186 | jsonValue: function jsonValue(newVal) { 187 | this.setValue(newVal); 188 | } 189 | }, 190 | mounted: function mounted() { 191 | this.setValue(this.jsonValue); 192 | }, 193 | methods: { 194 | setValue: function setValue(val) { 195 | var _this2 = this; 196 | setTimeout(function () { 197 | _this2.value = val; 198 | }, 0); 199 | }, 200 | toggle: function toggle() { 201 | this.$emit('update:expand', !this.expand); 202 | this.dispatchEvent(); 203 | }, 204 | dispatchEvent: function dispatchEvent() { 205 | try { 206 | this.$el.dispatchEvent(new Event('resized')); 207 | } catch (e) { 208 | var evt = document.createEvent('Event'); 209 | evt.initEvent('resized', true, false); 210 | this.$el.dispatchEvent(evt); 211 | } 212 | } 213 | }, 214 | render: function render() { 215 | var elements = []; 216 | if (!this.previewMode && !this.keyName) { 217 | elements.push(vue.h('span', { 218 | 'class': { 219 | 'jv-toggle': true, 220 | 'open': !!this.expand 221 | }, 222 | onClick: this.toggle 223 | })); 224 | } 225 | elements.push(vue.h('span', { 226 | 'class': { 227 | 'jv-item': true, 228 | 'jv-object': true 229 | }, 230 | innerText: '{' 231 | })); 232 | if (this.expand) { 233 | for (var key in this.ordered) { 234 | if (this.ordered.hasOwnProperty(key)) { 235 | var value = this.ordered[key]; 236 | elements.push(vue.h(script$1, { 237 | key: key, 238 | style: { display: !this.expand ? 'none' : undefined }, 239 | sort: this.sort, 240 | keyName: key, 241 | depth: this.depth + 1, 242 | value: value, 243 | previewMode: this.previewMode 244 | })); 245 | } 246 | } 247 | } 248 | if (!this.expand && Object.keys(this.value).length) { 249 | elements.push(vue.h('span', { 250 | style: { display: this.expand ? 'none' : undefined }, 251 | 'class': { 'jv-ellipsis': true }, 252 | onClick: this.toggle, 253 | title: 'click to reveal object content (keys: '.concat(Object.keys(this.ordered).join(', '), ')'), 254 | innerText: '...' 255 | })); 256 | } 257 | elements.push(vue.h('span', { 258 | 'class': { 259 | 'jv-item': true, 260 | 'jv-object': true 261 | }, 262 | innerText: '}' 263 | })); 264 | return vue.h('span', elements); 265 | } 266 | }; 267 | 268 | script$6.__file = "src/Components/types/json-object.vue"; 269 | 270 | var script$5 = { 271 | name: 'JsonArray', 272 | props: { 273 | jsonValue: { 274 | type: Array, 275 | required: true 276 | }, 277 | keyName: { 278 | type: String, 279 | 'default': '' 280 | }, 281 | depth: { 282 | type: Number, 283 | 'default': 0 284 | }, 285 | sort: Boolean, 286 | expand: Boolean, 287 | previewMode: Boolean 288 | }, 289 | data: function data() { 290 | return { value: [] }; 291 | }, 292 | watch: { 293 | jsonValue: function jsonValue(newVal) { 294 | this.setValue(newVal); 295 | } 296 | }, 297 | mounted: function mounted() { 298 | this.setValue(this.jsonValue); 299 | }, 300 | methods: { 301 | setValue: function setValue(vals) { 302 | var _this = this; 303 | var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 304 | if (index === 0) { 305 | this.value = []; 306 | } 307 | setTimeout(function () { 308 | if (vals.length > index) { 309 | _this.value.push(vals[index]); 310 | _this.setValue(vals, index + 1); 311 | } 312 | }, 0); 313 | }, 314 | toggle: function toggle() { 315 | this.$emit('update:expand', !this.expand); 316 | try { 317 | this.$el.dispatchEvent(new Event('resized')); 318 | } catch (e) { 319 | var evt = document.createEvent('Event'); 320 | evt.initEvent('resized', true, false); 321 | this.$el.dispatchEvent(evt); 322 | } 323 | } 324 | }, 325 | render: function render() { 326 | var _this2 = this; 327 | var elements = []; 328 | if (!this.previewMode && !this.keyName) { 329 | elements.push(vue.h('span', { 330 | 'class': { 331 | 'jv-toggle': true, 332 | 'open': !!this.expand 333 | }, 334 | onClick: this.toggle 335 | })); 336 | } 337 | elements.push(vue.h('span', { 338 | 'class': { 339 | 'jv-item': true, 340 | 'jv-array': true 341 | }, 342 | innerText: '[' 343 | })); 344 | if (this.expand) { 345 | this.value.forEach(function (value, key) { 346 | elements.push(vue.h(script$1, { 347 | key: key, 348 | style: { display: _this2.expand ? undefined : 'none' }, 349 | sort: _this2.sort, 350 | depth: _this2.depth + 1, 351 | value: value, 352 | previewMode: _this2.previewMode 353 | })); 354 | }); 355 | } 356 | if (!this.expand && this.value.length) { 357 | elements.push(vue.h('span', { 358 | style: { display: undefined }, 359 | 'class': { 'jv-ellipsis': true }, 360 | onClick: this.toggle, 361 | title: 'click to reveal '.concat(this.value.length, ' hidden items'), 362 | innerText: '...' 363 | })); 364 | } 365 | elements.push(vue.h('span', { 366 | 'class': { 367 | 'jv-item': true, 368 | 'jv-array': true 369 | }, 370 | innerText: ']' 371 | })); 372 | return vue.h('span', elements); 373 | } 374 | }; 375 | 376 | script$5.__file = "src/Components/types/json-array.vue"; 377 | 378 | var script$4 = { 379 | name: 'JsonFunction', 380 | functional: true, 381 | props: { 382 | jsonValue: { 383 | type: Function, 384 | required: true 385 | } 386 | }, 387 | render: function render() { 388 | return vue.h('span', { 389 | 'class': { 390 | 'jv-item': true, 391 | 'jv-function': true 392 | }, 393 | attrs: { title: this.jsonValue.toString() }, 394 | innerHTML: '<function>' 395 | }); 396 | } 397 | }; 398 | 399 | script$4.__file = "src/Components/types/json-function.vue"; 400 | 401 | var script$3 = { 402 | name: 'JsonDate', 403 | inject: ['timeformat'], 404 | functional: true, 405 | props: { 406 | jsonValue: { 407 | type: Date, 408 | required: true 409 | } 410 | }, 411 | render: function render() { 412 | var value = this.jsonValue; 413 | var timeformat = this.timeformat; 414 | return vue.h('span', { 415 | 'class': { 416 | 'jv-item': true, 417 | 'jv-string': true 418 | }, 419 | innerText: '"'.concat(timeformat(value), '"') 420 | }); 421 | } 422 | }; 423 | 424 | script$3.__file = "src/Components/types/json-date.vue"; 425 | 426 | var REG_LINK = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; 427 | var script$2 = { 428 | name: 'JsonString', 429 | props: { 430 | jsonValue: { 431 | type: RegExp, 432 | required: true 433 | } 434 | }, 435 | data: function data() { 436 | return { 437 | expand: true, 438 | canExtend: false 439 | }; 440 | }, 441 | mounted: function mounted() { 442 | if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) { 443 | this.canExtend = true; 444 | } 445 | }, 446 | methods: { 447 | toggle: function toggle() { 448 | this.expand = !this.expand; 449 | } 450 | }, 451 | render: function render() { 452 | var value = this.jsonValue; 453 | var islink = REG_LINK.test(value); 454 | var domItem; 455 | if (!this.expand) { 456 | domItem = { 457 | 'class': { 'jv-ellipsis': true }, 458 | onClick: this.toggle, 459 | innerText: '...' 460 | }; 461 | } else { 462 | domItem = { 463 | 'class': { 464 | 'jv-item': true, 465 | 'jv-string': true 466 | }, 467 | ref: 'itemRef' 468 | }; 469 | if (islink) { 470 | value = '').concat(value, ''); 471 | domItem.innerHTML = ''.concat(value.toString()); 472 | } else { 473 | domItem.innerText = ''.concat(value.toString()); 474 | } 475 | } 476 | return vue.h('span', {}, [ 477 | this.canExtend && vue.h('span', { 478 | 'class': { 479 | 'jv-toggle': true, 480 | open: this.expand 481 | }, 482 | onClick: this.toggle 483 | }), 484 | vue.h('span', { 485 | 'class': { 'jv-holder-node': true }, 486 | ref: 'holderRef' 487 | }), 488 | vue.h('span', domItem) 489 | ]); 490 | } 491 | }; 492 | 493 | script$2.__file = "src/Components/types/json-regexp.vue"; 494 | 495 | var script$1 = { 496 | name: 'JsonBox', 497 | inject: [ 498 | 'expandDepth', 499 | 'keyClick' 500 | ], 501 | props: { 502 | value: { 503 | type: [ 504 | Object, 505 | Array, 506 | String, 507 | Number, 508 | Boolean, 509 | Function, 510 | Date 511 | ], 512 | 'default': null 513 | }, 514 | keyName: { 515 | type: String, 516 | 'default': '' 517 | }, 518 | sort: Boolean, 519 | depth: { 520 | type: Number, 521 | 'default': 0 522 | }, 523 | previewMode: Boolean 524 | }, 525 | data: function data() { 526 | return { expand: true }; 527 | }, 528 | mounted: function mounted() { 529 | this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true); 530 | }, 531 | methods: { 532 | toggle: function toggle() { 533 | this.expand = !this.expand; 534 | try { 535 | this.$el.dispatchEvent(new Event('resized')); 536 | } catch (e) { 537 | var evt = document.createEvent('Event'); 538 | evt.initEvent('resized', true, false); 539 | this.$el.dispatchEvent(evt); 540 | } 541 | } 542 | }, 543 | render: function render() { 544 | var _this = this; 545 | var elements = []; 546 | var dataType; 547 | if (this.value === null || this.value === undefined) { 548 | dataType = script$9; 549 | } else if (Array.isArray(this.value)) { 550 | dataType = script$5; 551 | } else if (Object.prototype.toString.call(this.value) === '[object Date]') { 552 | dataType = script$3; 553 | } else if (_typeof(this.value) === 'object') { 554 | dataType = script$6; 555 | } else if (typeof this.value === 'number') { 556 | dataType = script$8; 557 | } else if (typeof this.value === 'string') { 558 | dataType = script$a; 559 | } else if (typeof this.value === 'boolean') { 560 | dataType = script$7; 561 | } else if (typeof this.value === 'function') { 562 | dataType = script$4; 563 | } 564 | if (this.value.constructor === RegExp) { 565 | dataType = script$2; 566 | } 567 | var complex = this.keyName && this.value && (Array.isArray(this.value) || _typeof(this.value) === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]'); 568 | if (!this.previewMode && complex) { 569 | elements.push(vue.h('span', { 570 | 'class': { 571 | 'jv-toggle': true, 572 | open: !!this.expand 573 | }, 574 | onClick: this.toggle 575 | })); 576 | } 577 | if (this.keyName) { 578 | elements.push(vue.h('span', { 579 | 'class': { 'jv-key': true }, 580 | onClick: function onClick() { 581 | _this.keyClick(_this.keyName); 582 | }, 583 | innerText: ''.concat(this.keyName, ':') 584 | })); 585 | } 586 | elements.push(vue.h(dataType, { 587 | 'class': { 'jv-push': true }, 588 | jsonValue: this.value, 589 | keyName: this.keyName, 590 | sort: this.sort, 591 | depth: this.depth, 592 | expand: this.expand, 593 | previewMode: this.previewMode, 594 | 'onUpdate:expand': function onUpdateExpand(value) { 595 | _this.expand = value; 596 | } 597 | })); 598 | return vue.h('div', { 599 | 'class': { 600 | 'jv-node': true, 601 | 'jv-key-node': Boolean(this.keyName) && !complex, 602 | toggle: !this.previewMode && complex 603 | } 604 | }, elements); 605 | } 606 | }; 607 | 608 | script$1.__file = "src/Components/json-box.vue"; 609 | 610 | var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; 611 | 612 | function getDefaultExportFromCjs (x) { 613 | return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; 614 | } 615 | 616 | var clipboard = {exports: {}}; 617 | 618 | (function (module, exports) { 619 | (function webpackUniversalModuleDefinition(root, factory) { 620 | module.exports = factory(); 621 | }(commonjsGlobal, function () { 622 | return function () { 623 | var __webpack_modules__ = { 624 | 686: function (__unused_webpack_module, __webpack_exports__, __webpack_require__) { 625 | __webpack_require__.d(__webpack_exports__, { 626 | 'default': function () { 627 | return clipboard; 628 | } 629 | }); 630 | var tiny_emitter = __webpack_require__(279); 631 | var tiny_emitter_default = __webpack_require__.n(tiny_emitter); 632 | var listen = __webpack_require__(370); 633 | var listen_default = __webpack_require__.n(listen); 634 | var src_select = __webpack_require__(817); 635 | var select_default = __webpack_require__.n(src_select); 636 | function command(type) { 637 | try { 638 | return document.execCommand(type); 639 | } catch (err) { 640 | return false; 641 | } 642 | } 643 | var ClipboardActionCut = function ClipboardActionCut(target) { 644 | var selectedText = select_default()(target); 645 | command('cut'); 646 | return selectedText; 647 | }; 648 | var actions_cut = ClipboardActionCut; 649 | function createFakeElement(value) { 650 | var isRTL = document.documentElement.getAttribute('dir') === 'rtl'; 651 | var fakeElement = document.createElement('textarea'); 652 | fakeElement.style.fontSize = '12pt'; 653 | fakeElement.style.border = '0'; 654 | fakeElement.style.padding = '0'; 655 | fakeElement.style.margin = '0'; 656 | fakeElement.style.position = 'absolute'; 657 | fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; 658 | var yPosition = window.pageYOffset || document.documentElement.scrollTop; 659 | fakeElement.style.top = ''.concat(yPosition, 'px'); 660 | fakeElement.setAttribute('readonly', ''); 661 | fakeElement.value = value; 662 | return fakeElement; 663 | } 664 | var fakeCopyAction = function fakeCopyAction(value, options) { 665 | var fakeElement = createFakeElement(value); 666 | options.container.appendChild(fakeElement); 667 | var selectedText = select_default()(fakeElement); 668 | command('copy'); 669 | fakeElement.remove(); 670 | return selectedText; 671 | }; 672 | var ClipboardActionCopy = function ClipboardActionCopy(target) { 673 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { container: document.body }; 674 | var selectedText = ''; 675 | if (typeof target === 'string') { 676 | selectedText = fakeCopyAction(target, options); 677 | } else if (target instanceof HTMLInputElement && ![ 678 | 'text', 679 | 'search', 680 | 'url', 681 | 'tel', 682 | 'password' 683 | ].includes(target === null || target === void 0 ? void 0 : target.type)) { 684 | selectedText = fakeCopyAction(target.value, options); 685 | } else { 686 | selectedText = select_default()(target); 687 | command('copy'); 688 | } 689 | return selectedText; 690 | }; 691 | var actions_copy = ClipboardActionCopy; 692 | function _typeof(obj) { 693 | '@babel/helpers - typeof'; 694 | if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { 695 | _typeof = function _typeof(obj) { 696 | return typeof obj; 697 | }; 698 | } else { 699 | _typeof = function _typeof(obj) { 700 | return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; 701 | }; 702 | } 703 | return _typeof(obj); 704 | } 705 | var ClipboardActionDefault = function ClipboardActionDefault() { 706 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 707 | var _options$action = options.action, action = _options$action === void 0 ? 'copy' : _options$action, container = options.container, target = options.target, text = options.text; 708 | if (action !== 'copy' && action !== 'cut') { 709 | throw new Error('Invalid "action" value, use either "copy" or "cut"'); 710 | } 711 | if (target !== undefined) { 712 | if (target && _typeof(target) === 'object' && target.nodeType === 1) { 713 | if (action === 'copy' && target.hasAttribute('disabled')) { 714 | throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'); 715 | } 716 | if (action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) { 717 | throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes'); 718 | } 719 | } else { 720 | throw new Error('Invalid "target" value, use a valid Element'); 721 | } 722 | } 723 | if (text) { 724 | return actions_copy(text, { container: container }); 725 | } 726 | if (target) { 727 | return action === 'cut' ? actions_cut(target) : actions_copy(target, { container: container }); 728 | } 729 | }; 730 | var actions_default = ClipboardActionDefault; 731 | function clipboard_typeof(obj) { 732 | '@babel/helpers - typeof'; 733 | if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { 734 | clipboard_typeof = function _typeof(obj) { 735 | return typeof obj; 736 | }; 737 | } else { 738 | clipboard_typeof = function _typeof(obj) { 739 | return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; 740 | }; 741 | } 742 | return clipboard_typeof(obj); 743 | } 744 | function _classCallCheck(instance, Constructor) { 745 | if (!(instance instanceof Constructor)) { 746 | throw new TypeError('Cannot call a class as a function'); 747 | } 748 | } 749 | function _defineProperties(target, props) { 750 | for (var i = 0; i < props.length; i++) { 751 | var descriptor = props[i]; 752 | descriptor.enumerable = descriptor.enumerable || false; 753 | descriptor.configurable = true; 754 | if ('value' in descriptor) 755 | descriptor.writable = true; 756 | Object.defineProperty(target, descriptor.key, descriptor); 757 | } 758 | } 759 | function _createClass(Constructor, protoProps, staticProps) { 760 | if (protoProps) 761 | _defineProperties(Constructor.prototype, protoProps); 762 | if (staticProps) 763 | _defineProperties(Constructor, staticProps); 764 | return Constructor; 765 | } 766 | function _inherits(subClass, superClass) { 767 | if (typeof superClass !== 'function' && superClass !== null) { 768 | throw new TypeError('Super expression must either be null or a function'); 769 | } 770 | subClass.prototype = Object.create(superClass && superClass.prototype, { 771 | constructor: { 772 | value: subClass, 773 | writable: true, 774 | configurable: true 775 | } 776 | }); 777 | if (superClass) 778 | _setPrototypeOf(subClass, superClass); 779 | } 780 | function _setPrototypeOf(o, p) { 781 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { 782 | o.__proto__ = p; 783 | return o; 784 | }; 785 | return _setPrototypeOf(o, p); 786 | } 787 | function _createSuper(Derived) { 788 | var hasNativeReflectConstruct = _isNativeReflectConstruct(); 789 | return function _createSuperInternal() { 790 | var Super = _getPrototypeOf(Derived), result; 791 | if (hasNativeReflectConstruct) { 792 | var NewTarget = _getPrototypeOf(this).constructor; 793 | result = Reflect.construct(Super, arguments, NewTarget); 794 | } else { 795 | result = Super.apply(this, arguments); 796 | } 797 | return _possibleConstructorReturn(this, result); 798 | }; 799 | } 800 | function _possibleConstructorReturn(self, call) { 801 | if (call && (clipboard_typeof(call) === 'object' || typeof call === 'function')) { 802 | return call; 803 | } 804 | return _assertThisInitialized(self); 805 | } 806 | function _assertThisInitialized(self) { 807 | if (self === void 0) { 808 | throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); 809 | } 810 | return self; 811 | } 812 | function _isNativeReflectConstruct() { 813 | if (typeof Reflect === 'undefined' || !Reflect.construct) 814 | return false; 815 | if (Reflect.construct.sham) 816 | return false; 817 | if (typeof Proxy === 'function') 818 | return true; 819 | try { 820 | Date.prototype.toString.call(Reflect.construct(Date, [], function () { 821 | })); 822 | return true; 823 | } catch (e) { 824 | return false; 825 | } 826 | } 827 | function _getPrototypeOf(o) { 828 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { 829 | return o.__proto__ || Object.getPrototypeOf(o); 830 | }; 831 | return _getPrototypeOf(o); 832 | } 833 | function getAttributeValue(suffix, element) { 834 | var attribute = 'data-clipboard-'.concat(suffix); 835 | if (!element.hasAttribute(attribute)) { 836 | return; 837 | } 838 | return element.getAttribute(attribute); 839 | } 840 | var Clipboard = function (_Emitter) { 841 | _inherits(Clipboard, _Emitter); 842 | var _super = _createSuper(Clipboard); 843 | function Clipboard(trigger, options) { 844 | var _this; 845 | _classCallCheck(this, Clipboard); 846 | _this = _super.call(this); 847 | _this.resolveOptions(options); 848 | _this.listenClick(trigger); 849 | return _this; 850 | } 851 | _createClass(Clipboard, [ 852 | { 853 | key: 'resolveOptions', 854 | value: function resolveOptions() { 855 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 856 | this.action = typeof options.action === 'function' ? options.action : this.defaultAction; 857 | this.target = typeof options.target === 'function' ? options.target : this.defaultTarget; 858 | this.text = typeof options.text === 'function' ? options.text : this.defaultText; 859 | this.container = clipboard_typeof(options.container) === 'object' ? options.container : document.body; 860 | } 861 | }, 862 | { 863 | key: 'listenClick', 864 | value: function listenClick(trigger) { 865 | var _this2 = this; 866 | this.listener = listen_default()(trigger, 'click', function (e) { 867 | return _this2.onClick(e); 868 | }); 869 | } 870 | }, 871 | { 872 | key: 'onClick', 873 | value: function onClick(e) { 874 | var trigger = e.delegateTarget || e.currentTarget; 875 | var action = this.action(trigger) || 'copy'; 876 | var text = actions_default({ 877 | action: action, 878 | container: this.container, 879 | target: this.target(trigger), 880 | text: this.text(trigger) 881 | }); 882 | this.emit(text ? 'success' : 'error', { 883 | action: action, 884 | text: text, 885 | trigger: trigger, 886 | clearSelection: function clearSelection() { 887 | if (trigger) { 888 | trigger.focus(); 889 | } 890 | window.getSelection().removeAllRanges(); 891 | } 892 | }); 893 | } 894 | }, 895 | { 896 | key: 'defaultAction', 897 | value: function defaultAction(trigger) { 898 | return getAttributeValue('action', trigger); 899 | } 900 | }, 901 | { 902 | key: 'defaultTarget', 903 | value: function defaultTarget(trigger) { 904 | var selector = getAttributeValue('target', trigger); 905 | if (selector) { 906 | return document.querySelector(selector); 907 | } 908 | } 909 | }, 910 | { 911 | key: 'defaultText', 912 | value: function defaultText(trigger) { 913 | return getAttributeValue('text', trigger); 914 | } 915 | }, 916 | { 917 | key: 'destroy', 918 | value: function destroy() { 919 | this.listener.destroy(); 920 | } 921 | } 922 | ], [ 923 | { 924 | key: 'copy', 925 | value: function copy(target) { 926 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { container: document.body }; 927 | return actions_copy(target, options); 928 | } 929 | }, 930 | { 931 | key: 'cut', 932 | value: function cut(target) { 933 | return actions_cut(target); 934 | } 935 | }, 936 | { 937 | key: 'isSupported', 938 | value: function isSupported() { 939 | var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [ 940 | 'copy', 941 | 'cut' 942 | ]; 943 | var actions = typeof action === 'string' ? [action] : action; 944 | var support = !!document.queryCommandSupported; 945 | actions.forEach(function (action) { 946 | support = support && !!document.queryCommandSupported(action); 947 | }); 948 | return support; 949 | } 950 | } 951 | ]); 952 | return Clipboard; 953 | }(tiny_emitter_default()); 954 | var clipboard = Clipboard; 955 | }, 956 | 828: function (module) { 957 | var DOCUMENT_NODE_TYPE = 9; 958 | if (typeof Element !== 'undefined' && !Element.prototype.matches) { 959 | var proto = Element.prototype; 960 | proto.matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector; 961 | } 962 | function closest(element, selector) { 963 | while (element && element.nodeType !== DOCUMENT_NODE_TYPE) { 964 | if (typeof element.matches === 'function' && element.matches(selector)) { 965 | return element; 966 | } 967 | element = element.parentNode; 968 | } 969 | } 970 | module.exports = closest; 971 | }, 972 | 438: function (module, __unused_webpack_exports, __webpack_require__) { 973 | var closest = __webpack_require__(828); 974 | function _delegate(element, selector, type, callback, useCapture) { 975 | var listenerFn = listener.apply(this, arguments); 976 | element.addEventListener(type, listenerFn, useCapture); 977 | return { 978 | destroy: function () { 979 | element.removeEventListener(type, listenerFn, useCapture); 980 | } 981 | }; 982 | } 983 | function delegate(elements, selector, type, callback, useCapture) { 984 | if (typeof elements.addEventListener === 'function') { 985 | return _delegate.apply(null, arguments); 986 | } 987 | if (typeof type === 'function') { 988 | return _delegate.bind(null, document).apply(null, arguments); 989 | } 990 | if (typeof elements === 'string') { 991 | elements = document.querySelectorAll(elements); 992 | } 993 | return Array.prototype.map.call(elements, function (element) { 994 | return _delegate(element, selector, type, callback, useCapture); 995 | }); 996 | } 997 | function listener(element, selector, type, callback) { 998 | return function (e) { 999 | e.delegateTarget = closest(e.target, selector); 1000 | if (e.delegateTarget) { 1001 | callback.call(element, e); 1002 | } 1003 | }; 1004 | } 1005 | module.exports = delegate; 1006 | }, 1007 | 879: function (__unused_webpack_module, exports) { 1008 | exports.node = function (value) { 1009 | return value !== undefined && value instanceof HTMLElement && value.nodeType === 1; 1010 | }; 1011 | exports.nodeList = function (value) { 1012 | var type = Object.prototype.toString.call(value); 1013 | return value !== undefined && (type === '[object NodeList]' || type === '[object HTMLCollection]') && 'length' in value && (value.length === 0 || exports.node(value[0])); 1014 | }; 1015 | exports.string = function (value) { 1016 | return typeof value === 'string' || value instanceof String; 1017 | }; 1018 | exports.fn = function (value) { 1019 | var type = Object.prototype.toString.call(value); 1020 | return type === '[object Function]'; 1021 | }; 1022 | }, 1023 | 370: function (module, __unused_webpack_exports, __webpack_require__) { 1024 | var is = __webpack_require__(879); 1025 | var delegate = __webpack_require__(438); 1026 | function listen(target, type, callback) { 1027 | if (!target && !type && !callback) { 1028 | throw new Error('Missing required arguments'); 1029 | } 1030 | if (!is.string(type)) { 1031 | throw new TypeError('Second argument must be a String'); 1032 | } 1033 | if (!is.fn(callback)) { 1034 | throw new TypeError('Third argument must be a Function'); 1035 | } 1036 | if (is.node(target)) { 1037 | return listenNode(target, type, callback); 1038 | } else if (is.nodeList(target)) { 1039 | return listenNodeList(target, type, callback); 1040 | } else if (is.string(target)) { 1041 | return listenSelector(target, type, callback); 1042 | } else { 1043 | throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList'); 1044 | } 1045 | } 1046 | function listenNode(node, type, callback) { 1047 | node.addEventListener(type, callback); 1048 | return { 1049 | destroy: function () { 1050 | node.removeEventListener(type, callback); 1051 | } 1052 | }; 1053 | } 1054 | function listenNodeList(nodeList, type, callback) { 1055 | Array.prototype.forEach.call(nodeList, function (node) { 1056 | node.addEventListener(type, callback); 1057 | }); 1058 | return { 1059 | destroy: function () { 1060 | Array.prototype.forEach.call(nodeList, function (node) { 1061 | node.removeEventListener(type, callback); 1062 | }); 1063 | } 1064 | }; 1065 | } 1066 | function listenSelector(selector, type, callback) { 1067 | return delegate(document.body, selector, type, callback); 1068 | } 1069 | module.exports = listen; 1070 | }, 1071 | 817: function (module) { 1072 | function select(element) { 1073 | var selectedText; 1074 | if (element.nodeName === 'SELECT') { 1075 | element.focus(); 1076 | selectedText = element.value; 1077 | } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { 1078 | var isReadOnly = element.hasAttribute('readonly'); 1079 | if (!isReadOnly) { 1080 | element.setAttribute('readonly', ''); 1081 | } 1082 | element.select(); 1083 | element.setSelectionRange(0, element.value.length); 1084 | if (!isReadOnly) { 1085 | element.removeAttribute('readonly'); 1086 | } 1087 | selectedText = element.value; 1088 | } else { 1089 | if (element.hasAttribute('contenteditable')) { 1090 | element.focus(); 1091 | } 1092 | var selection = window.getSelection(); 1093 | var range = document.createRange(); 1094 | range.selectNodeContents(element); 1095 | selection.removeAllRanges(); 1096 | selection.addRange(range); 1097 | selectedText = selection.toString(); 1098 | } 1099 | return selectedText; 1100 | } 1101 | module.exports = select; 1102 | }, 1103 | 279: function (module) { 1104 | function E() { 1105 | } 1106 | E.prototype = { 1107 | on: function (name, callback, ctx) { 1108 | var e = this.e || (this.e = {}); 1109 | (e[name] || (e[name] = [])).push({ 1110 | fn: callback, 1111 | ctx: ctx 1112 | }); 1113 | return this; 1114 | }, 1115 | once: function (name, callback, ctx) { 1116 | var self = this; 1117 | function listener() { 1118 | self.off(name, listener); 1119 | callback.apply(ctx, arguments); 1120 | } 1121 | listener._ = callback; 1122 | return this.on(name, listener, ctx); 1123 | }, 1124 | emit: function (name) { 1125 | var data = [].slice.call(arguments, 1); 1126 | var evtArr = ((this.e || (this.e = {}))[name] || []).slice(); 1127 | var i = 0; 1128 | var len = evtArr.length; 1129 | for (i; i < len; i++) { 1130 | evtArr[i].fn.apply(evtArr[i].ctx, data); 1131 | } 1132 | return this; 1133 | }, 1134 | off: function (name, callback) { 1135 | var e = this.e || (this.e = {}); 1136 | var evts = e[name]; 1137 | var liveEvents = []; 1138 | if (evts && callback) { 1139 | for (var i = 0, len = evts.length; i < len; i++) { 1140 | if (evts[i].fn !== callback && evts[i].fn._ !== callback) 1141 | liveEvents.push(evts[i]); 1142 | } 1143 | } 1144 | liveEvents.length ? e[name] = liveEvents : delete e[name]; 1145 | return this; 1146 | } 1147 | }; 1148 | module.exports = E; 1149 | module.exports.TinyEmitter = E; 1150 | } 1151 | }; 1152 | var __webpack_module_cache__ = {}; 1153 | function __webpack_require__(moduleId) { 1154 | if (__webpack_module_cache__[moduleId]) { 1155 | return __webpack_module_cache__[moduleId].exports; 1156 | } 1157 | var module = __webpack_module_cache__[moduleId] = { exports: {} }; 1158 | __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 1159 | return module.exports; 1160 | } 1161 | !function () { 1162 | __webpack_require__.n = function (module) { 1163 | var getter = module && module.__esModule ? function () { 1164 | return module['default']; 1165 | } : function () { 1166 | return module; 1167 | }; 1168 | __webpack_require__.d(getter, { a: getter }); 1169 | return getter; 1170 | }; 1171 | }(); 1172 | !function () { 1173 | __webpack_require__.d = function (exports, definition) { 1174 | for (var key in definition) { 1175 | if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 1176 | Object.defineProperty(exports, key, { 1177 | enumerable: true, 1178 | get: definition[key] 1179 | }); 1180 | } 1181 | } 1182 | }; 1183 | }(); 1184 | !function () { 1185 | __webpack_require__.o = function (obj, prop) { 1186 | return Object.prototype.hasOwnProperty.call(obj, prop); 1187 | }; 1188 | }(); 1189 | return __webpack_require__(686); 1190 | }().default; 1191 | })); 1192 | }(clipboard)); 1193 | var Clipboard = getDefaultExportFromCjs(clipboard.exports); 1194 | 1195 | var debounce = function debounce(func, wait) { 1196 | var startTime = Date.now(); 1197 | var timer; 1198 | return function () { 1199 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 1200 | args[_key] = arguments[_key]; 1201 | } 1202 | if (Date.now() - startTime < wait && timer) { 1203 | clearTimeout(timer); 1204 | } 1205 | timer = setTimeout(function () { 1206 | func.apply(void 0, args); 1207 | }, wait); 1208 | startTime = Date.now(); 1209 | }; 1210 | }; 1211 | 1212 | var script = { 1213 | name: 'JsonViewer', 1214 | components: { JsonBox: script$1 }, 1215 | props: { 1216 | value: { 1217 | type: [ 1218 | Object, 1219 | Array, 1220 | String, 1221 | Number, 1222 | Boolean, 1223 | Function 1224 | ], 1225 | required: true 1226 | }, 1227 | expanded: { 1228 | type: Boolean, 1229 | 'default': false 1230 | }, 1231 | expandDepth: { 1232 | type: Number, 1233 | 'default': 1 1234 | }, 1235 | copyable: { 1236 | type: [ 1237 | Boolean, 1238 | Object 1239 | ], 1240 | 'default': false 1241 | }, 1242 | sort: { 1243 | type: Boolean, 1244 | 'default': false 1245 | }, 1246 | boxed: { 1247 | type: Boolean, 1248 | 'default': false 1249 | }, 1250 | theme: { 1251 | type: String, 1252 | 'default': 'light' 1253 | }, 1254 | timeformat: { 1255 | type: Function, 1256 | 'default': function _default(value) { 1257 | return value.toLocaleString(); 1258 | } 1259 | }, 1260 | previewMode: { 1261 | type: Boolean, 1262 | 'default': false 1263 | }, 1264 | parse: { 1265 | type: Boolean, 1266 | 'default': false 1267 | } 1268 | }, 1269 | provide: function provide() { 1270 | return { 1271 | expandDepth: this.expandDepth, 1272 | timeformat: this.timeformat, 1273 | keyClick: this.keyClick 1274 | }; 1275 | }, 1276 | data: function data() { 1277 | return { 1278 | copied: false, 1279 | expandableCode: false, 1280 | expandCode: this.expanded 1281 | }; 1282 | }, 1283 | emits: ['onKeyClick'], 1284 | computed: { 1285 | jvClass: function jvClass() { 1286 | return 'jv-container ' + 'jv-' + this.theme + (this.boxed ? ' boxed' : ''); 1287 | }, 1288 | copyText: function copyText() { 1289 | var _this$copyable = this.copyable, copyText = _this$copyable.copyText, copiedText = _this$copyable.copiedText, timeout = _this$copyable.timeout, align = _this$copyable.align; 1290 | return { 1291 | copyText: copyText || 'copy', 1292 | copiedText: copiedText || 'copied!', 1293 | timeout: timeout || 2000, 1294 | align: align 1295 | }; 1296 | }, 1297 | parseValue: function parseValue() { 1298 | if (!this.parse || typeof this.value !== 'string') { 1299 | return this.value; 1300 | } 1301 | try { 1302 | return JSON.parse(this.value); 1303 | } catch (_unused) { 1304 | return this.value; 1305 | } 1306 | } 1307 | }, 1308 | watch: { 1309 | value: function value() { 1310 | this.onResized(); 1311 | } 1312 | }, 1313 | mounted: function mounted() { 1314 | var _this = this; 1315 | this.debounceResized = debounce(this.debResized.bind(this), 200); 1316 | if (this.boxed && this.$refs.jsonBox) { 1317 | this.onResized(); 1318 | this.$refs.jsonBox.$el.addEventListener('resized', this.onResized, true); 1319 | } 1320 | if (this.copyable) { 1321 | var clipBoard = new Clipboard(this.$refs.clip, { 1322 | text: function text() { 1323 | return JSON.stringify(_this.value, null, 2); 1324 | } 1325 | }); 1326 | clipBoard.on('success', function (e) { 1327 | _this.onCopied(e); 1328 | }); 1329 | } 1330 | }, 1331 | methods: { 1332 | onResized: function onResized() { 1333 | this.debounceResized(); 1334 | }, 1335 | debResized: function debResized() { 1336 | var _this2 = this; 1337 | this.$nextTick(function () { 1338 | if (!_this2.$refs.jsonBox) 1339 | return; 1340 | if (_this2.$refs.jsonBox.$el.clientHeight >= 250) { 1341 | _this2.expandableCode = true; 1342 | } else { 1343 | _this2.expandableCode = false; 1344 | } 1345 | }); 1346 | }, 1347 | keyClick: function keyClick(keyName) { 1348 | this.$emit('onKeyClick', keyName); 1349 | }, 1350 | onCopied: function onCopied(copyEvent) { 1351 | var _this3 = this; 1352 | if (this.copied) { 1353 | return; 1354 | } 1355 | this.copied = true; 1356 | setTimeout(function () { 1357 | _this3.copied = false; 1358 | }, this.copyText.timeout); 1359 | this.$emit('copied', copyEvent); 1360 | }, 1361 | toggleExpandCode: function toggleExpandCode() { 1362 | this.expandCode = !this.expandCode; 1363 | } 1364 | } 1365 | }; 1366 | 1367 | function render(_ctx, _cache, $props, $setup, $data, $options) { 1368 | var _component_json_box = vue.resolveComponent('json-box'); 1369 | return vue.openBlock(), vue.createElementBlock('div', { 'class': vue.normalizeClass($options.jvClass) }, [ 1370 | $props.copyable ? (vue.openBlock(), vue.createElementBlock('div', { 1371 | key: 0, 1372 | 'class': vue.normalizeClass('jv-tooltip '.concat($options.copyText.align || 'right')) 1373 | }, [vue.createElementVNode('span', { 1374 | ref: 'clip', 1375 | 'class': vue.normalizeClass([ 1376 | 'jv-button', 1377 | { copied: $data.copied } 1378 | ]) 1379 | }, [vue.renderSlot(_ctx.$slots, 'copy', { copied: $data.copied }, function () { 1380 | return [vue.createTextVNode(vue.toDisplayString($data.copied ? $options.copyText.copiedText : $options.copyText.copyText), 1)]; 1381 | })], 2)], 2)) : vue.createCommentVNode('v-if', true), 1382 | vue.createElementVNode('div', { 1383 | 'class': vue.normalizeClass([ 1384 | 'jv-code', 1385 | { 1386 | open: $data.expandCode, 1387 | boxed: $props.boxed 1388 | } 1389 | ]) 1390 | }, [vue.createVNode(_component_json_box, { 1391 | ref: 'jsonBox', 1392 | value: $options.parseValue, 1393 | sort: $props.sort, 1394 | 'preview-mode': $props.previewMode 1395 | }, null, 8, [ 1396 | 'value', 1397 | 'sort', 1398 | 'preview-mode' 1399 | ])], 2), 1400 | $data.expandableCode && $props.boxed ? (vue.openBlock(), vue.createElementBlock('div', { 1401 | key: 1, 1402 | 'class': 'jv-more', 1403 | onClick: _cache[0] || (_cache[0] = function () { 1404 | return $options.toggleExpandCode && $options.toggleExpandCode.apply($options, arguments); 1405 | }) 1406 | }, [vue.createElementVNode('span', { 1407 | 'class': vue.normalizeClass([ 1408 | 'jv-toggle', 1409 | { open: !!$data.expandCode } 1410 | ]) 1411 | }, null, 2)])) : vue.createCommentVNode('v-if', true) 1412 | ], 2); 1413 | } 1414 | 1415 | script.render = render; 1416 | script.__file = "src/Components/json-viewer.vue"; 1417 | 1418 | var install = function install(app) { 1419 | app.component(script.name, script); 1420 | }; 1421 | var index = { install: install }; 1422 | 1423 | exports.JsonViewer = script; 1424 | exports["default"] = index; 1425 | -------------------------------------------------------------------------------- /dist/bundle.esm.js: -------------------------------------------------------------------------------- 1 | import { h, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from 'vue'; 2 | 3 | function _typeof(o) { 4 | "@babel/helpers - typeof"; 5 | 6 | return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { 7 | return typeof o; 8 | } : function (o) { 9 | return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; 10 | }, _typeof(o); 11 | } 12 | 13 | var REG_LINK$1 = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; 14 | var script$a = { 15 | name: 'JsonString', 16 | props: { 17 | jsonValue: { 18 | type: String, 19 | required: true 20 | } 21 | }, 22 | data: function data() { 23 | return { 24 | expand: true, 25 | canExtend: false 26 | }; 27 | }, 28 | mounted: function mounted() { 29 | if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) { 30 | this.canExtend = true; 31 | } 32 | }, 33 | methods: { 34 | toggle: function toggle() { 35 | this.expand = !this.expand; 36 | } 37 | }, 38 | render: function render() { 39 | var value = this.jsonValue; 40 | var islink = REG_LINK$1.test(value); 41 | var domItem; 42 | if (!this.expand) { 43 | domItem = { 44 | 'class': { 'jv-ellipsis': true }, 45 | onClick: this.toggle, 46 | innerText: '...' 47 | }; 48 | } else { 49 | domItem = { 50 | 'class': { 51 | 'jv-item': true, 52 | 'jv-string': true 53 | }, 54 | ref: 'itemRef' 55 | }; 56 | if (islink) { 57 | value = '').concat(value, ''); 58 | domItem.innerHTML = '"'.concat(value.toString(), '"'); 59 | } else { 60 | domItem.innerText = '"'.concat(value.toString(), '"'); 61 | } 62 | } 63 | return h('span', {}, [ 64 | this.canExtend && h('span', { 65 | 'class': { 66 | 'jv-toggle': true, 67 | open: this.expand 68 | }, 69 | onClick: this.toggle 70 | }), 71 | h('span', { 72 | 'class': { 'jv-holder-node': true }, 73 | ref: 'holderRef' 74 | }), 75 | h('span', domItem) 76 | ]); 77 | } 78 | }; 79 | 80 | script$a.__file = "src/Components/types/json-string.vue"; 81 | 82 | var script$9 = { 83 | name: 'JsonUndefined', 84 | functional: true, 85 | props: { 86 | jsonValue: { 87 | type: Object, 88 | 'default': null 89 | } 90 | }, 91 | render: function render() { 92 | return h('span', { 93 | 'class': { 94 | 'jv-item': true, 95 | 'jv-undefined': true 96 | }, 97 | innerText: this.jsonValue === null ? 'null' : 'undefined' 98 | }); 99 | } 100 | }; 101 | 102 | script$9.__file = "src/Components/types/json-undefined.vue"; 103 | 104 | var script$8 = { 105 | name: 'JsonNumber', 106 | functional: true, 107 | props: { 108 | jsonValue: { 109 | type: Number, 110 | required: true 111 | } 112 | }, 113 | render: function render() { 114 | var isInteger = Number.isInteger(this.jsonValue); 115 | return h('span', { 116 | 'class': { 117 | 'jv-item': true, 118 | 'jv-number': true, 119 | 'jv-number-integer': isInteger, 120 | 'jv-number-float': !isInteger 121 | }, 122 | innerText: this.jsonValue.toString() 123 | }); 124 | } 125 | }; 126 | 127 | script$8.__file = "src/Components/types/json-number.vue"; 128 | 129 | var script$7 = { 130 | name: 'JsonBoolean', 131 | functional: true, 132 | props: { jsonValue: Boolean }, 133 | render: function render() { 134 | return h('span', { 135 | 'class': { 136 | 'jv-item': true, 137 | 'jv-boolean': true 138 | }, 139 | innerText: this.jsonValue.toString() 140 | }); 141 | } 142 | }; 143 | 144 | script$7.__file = "src/Components/types/json-boolean.vue"; 145 | 146 | var script$6 = { 147 | name: 'JsonObject', 148 | props: { 149 | jsonValue: { 150 | type: Object, 151 | required: true 152 | }, 153 | keyName: { 154 | type: String, 155 | 'default': '' 156 | }, 157 | depth: { 158 | type: Number, 159 | 'default': 0 160 | }, 161 | expand: Boolean, 162 | sort: Boolean, 163 | previewMode: Boolean 164 | }, 165 | data: function data() { 166 | return { value: {} }; 167 | }, 168 | computed: { 169 | ordered: function ordered() { 170 | var _this = this; 171 | if (!this.sort) { 172 | return this.value; 173 | } 174 | var ordered = {}; 175 | Object.keys(this.value).sort().forEach(function (key) { 176 | ordered[key] = _this.value[key]; 177 | }); 178 | return ordered; 179 | } 180 | }, 181 | watch: { 182 | jsonValue: function jsonValue(newVal) { 183 | this.setValue(newVal); 184 | } 185 | }, 186 | mounted: function mounted() { 187 | this.setValue(this.jsonValue); 188 | }, 189 | methods: { 190 | setValue: function setValue(val) { 191 | var _this2 = this; 192 | setTimeout(function () { 193 | _this2.value = val; 194 | }, 0); 195 | }, 196 | toggle: function toggle() { 197 | this.$emit('update:expand', !this.expand); 198 | this.dispatchEvent(); 199 | }, 200 | dispatchEvent: function dispatchEvent() { 201 | try { 202 | this.$el.dispatchEvent(new Event('resized')); 203 | } catch (e) { 204 | var evt = document.createEvent('Event'); 205 | evt.initEvent('resized', true, false); 206 | this.$el.dispatchEvent(evt); 207 | } 208 | } 209 | }, 210 | render: function render() { 211 | var elements = []; 212 | if (!this.previewMode && !this.keyName) { 213 | elements.push(h('span', { 214 | 'class': { 215 | 'jv-toggle': true, 216 | 'open': !!this.expand 217 | }, 218 | onClick: this.toggle 219 | })); 220 | } 221 | elements.push(h('span', { 222 | 'class': { 223 | 'jv-item': true, 224 | 'jv-object': true 225 | }, 226 | innerText: '{' 227 | })); 228 | if (this.expand) { 229 | for (var key in this.ordered) { 230 | if (this.ordered.hasOwnProperty(key)) { 231 | var value = this.ordered[key]; 232 | elements.push(h(script$1, { 233 | key: key, 234 | style: { display: !this.expand ? 'none' : undefined }, 235 | sort: this.sort, 236 | keyName: key, 237 | depth: this.depth + 1, 238 | value: value, 239 | previewMode: this.previewMode 240 | })); 241 | } 242 | } 243 | } 244 | if (!this.expand && Object.keys(this.value).length) { 245 | elements.push(h('span', { 246 | style: { display: this.expand ? 'none' : undefined }, 247 | 'class': { 'jv-ellipsis': true }, 248 | onClick: this.toggle, 249 | title: 'click to reveal object content (keys: '.concat(Object.keys(this.ordered).join(', '), ')'), 250 | innerText: '...' 251 | })); 252 | } 253 | elements.push(h('span', { 254 | 'class': { 255 | 'jv-item': true, 256 | 'jv-object': true 257 | }, 258 | innerText: '}' 259 | })); 260 | return h('span', elements); 261 | } 262 | }; 263 | 264 | script$6.__file = "src/Components/types/json-object.vue"; 265 | 266 | var script$5 = { 267 | name: 'JsonArray', 268 | props: { 269 | jsonValue: { 270 | type: Array, 271 | required: true 272 | }, 273 | keyName: { 274 | type: String, 275 | 'default': '' 276 | }, 277 | depth: { 278 | type: Number, 279 | 'default': 0 280 | }, 281 | sort: Boolean, 282 | expand: Boolean, 283 | previewMode: Boolean 284 | }, 285 | data: function data() { 286 | return { value: [] }; 287 | }, 288 | watch: { 289 | jsonValue: function jsonValue(newVal) { 290 | this.setValue(newVal); 291 | } 292 | }, 293 | mounted: function mounted() { 294 | this.setValue(this.jsonValue); 295 | }, 296 | methods: { 297 | setValue: function setValue(vals) { 298 | var _this = this; 299 | var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 300 | if (index === 0) { 301 | this.value = []; 302 | } 303 | setTimeout(function () { 304 | if (vals.length > index) { 305 | _this.value.push(vals[index]); 306 | _this.setValue(vals, index + 1); 307 | } 308 | }, 0); 309 | }, 310 | toggle: function toggle() { 311 | this.$emit('update:expand', !this.expand); 312 | try { 313 | this.$el.dispatchEvent(new Event('resized')); 314 | } catch (e) { 315 | var evt = document.createEvent('Event'); 316 | evt.initEvent('resized', true, false); 317 | this.$el.dispatchEvent(evt); 318 | } 319 | } 320 | }, 321 | render: function render() { 322 | var _this2 = this; 323 | var elements = []; 324 | if (!this.previewMode && !this.keyName) { 325 | elements.push(h('span', { 326 | 'class': { 327 | 'jv-toggle': true, 328 | 'open': !!this.expand 329 | }, 330 | onClick: this.toggle 331 | })); 332 | } 333 | elements.push(h('span', { 334 | 'class': { 335 | 'jv-item': true, 336 | 'jv-array': true 337 | }, 338 | innerText: '[' 339 | })); 340 | if (this.expand) { 341 | this.value.forEach(function (value, key) { 342 | elements.push(h(script$1, { 343 | key: key, 344 | style: { display: _this2.expand ? undefined : 'none' }, 345 | sort: _this2.sort, 346 | depth: _this2.depth + 1, 347 | value: value, 348 | previewMode: _this2.previewMode 349 | })); 350 | }); 351 | } 352 | if (!this.expand && this.value.length) { 353 | elements.push(h('span', { 354 | style: { display: undefined }, 355 | 'class': { 'jv-ellipsis': true }, 356 | onClick: this.toggle, 357 | title: 'click to reveal '.concat(this.value.length, ' hidden items'), 358 | innerText: '...' 359 | })); 360 | } 361 | elements.push(h('span', { 362 | 'class': { 363 | 'jv-item': true, 364 | 'jv-array': true 365 | }, 366 | innerText: ']' 367 | })); 368 | return h('span', elements); 369 | } 370 | }; 371 | 372 | script$5.__file = "src/Components/types/json-array.vue"; 373 | 374 | var script$4 = { 375 | name: 'JsonFunction', 376 | functional: true, 377 | props: { 378 | jsonValue: { 379 | type: Function, 380 | required: true 381 | } 382 | }, 383 | render: function render() { 384 | return h('span', { 385 | 'class': { 386 | 'jv-item': true, 387 | 'jv-function': true 388 | }, 389 | attrs: { title: this.jsonValue.toString() }, 390 | innerHTML: '<function>' 391 | }); 392 | } 393 | }; 394 | 395 | script$4.__file = "src/Components/types/json-function.vue"; 396 | 397 | var script$3 = { 398 | name: 'JsonDate', 399 | inject: ['timeformat'], 400 | functional: true, 401 | props: { 402 | jsonValue: { 403 | type: Date, 404 | required: true 405 | } 406 | }, 407 | render: function render() { 408 | var value = this.jsonValue; 409 | var timeformat = this.timeformat; 410 | return h('span', { 411 | 'class': { 412 | 'jv-item': true, 413 | 'jv-string': true 414 | }, 415 | innerText: '"'.concat(timeformat(value), '"') 416 | }); 417 | } 418 | }; 419 | 420 | script$3.__file = "src/Components/types/json-date.vue"; 421 | 422 | var REG_LINK = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; 423 | var script$2 = { 424 | name: 'JsonString', 425 | props: { 426 | jsonValue: { 427 | type: RegExp, 428 | required: true 429 | } 430 | }, 431 | data: function data() { 432 | return { 433 | expand: true, 434 | canExtend: false 435 | }; 436 | }, 437 | mounted: function mounted() { 438 | if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) { 439 | this.canExtend = true; 440 | } 441 | }, 442 | methods: { 443 | toggle: function toggle() { 444 | this.expand = !this.expand; 445 | } 446 | }, 447 | render: function render() { 448 | var value = this.jsonValue; 449 | var islink = REG_LINK.test(value); 450 | var domItem; 451 | if (!this.expand) { 452 | domItem = { 453 | 'class': { 'jv-ellipsis': true }, 454 | onClick: this.toggle, 455 | innerText: '...' 456 | }; 457 | } else { 458 | domItem = { 459 | 'class': { 460 | 'jv-item': true, 461 | 'jv-string': true 462 | }, 463 | ref: 'itemRef' 464 | }; 465 | if (islink) { 466 | value = '').concat(value, ''); 467 | domItem.innerHTML = ''.concat(value.toString()); 468 | } else { 469 | domItem.innerText = ''.concat(value.toString()); 470 | } 471 | } 472 | return h('span', {}, [ 473 | this.canExtend && h('span', { 474 | 'class': { 475 | 'jv-toggle': true, 476 | open: this.expand 477 | }, 478 | onClick: this.toggle 479 | }), 480 | h('span', { 481 | 'class': { 'jv-holder-node': true }, 482 | ref: 'holderRef' 483 | }), 484 | h('span', domItem) 485 | ]); 486 | } 487 | }; 488 | 489 | script$2.__file = "src/Components/types/json-regexp.vue"; 490 | 491 | var script$1 = { 492 | name: 'JsonBox', 493 | inject: [ 494 | 'expandDepth', 495 | 'keyClick' 496 | ], 497 | props: { 498 | value: { 499 | type: [ 500 | Object, 501 | Array, 502 | String, 503 | Number, 504 | Boolean, 505 | Function, 506 | Date 507 | ], 508 | 'default': null 509 | }, 510 | keyName: { 511 | type: String, 512 | 'default': '' 513 | }, 514 | sort: Boolean, 515 | depth: { 516 | type: Number, 517 | 'default': 0 518 | }, 519 | previewMode: Boolean 520 | }, 521 | data: function data() { 522 | return { expand: true }; 523 | }, 524 | mounted: function mounted() { 525 | this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true); 526 | }, 527 | methods: { 528 | toggle: function toggle() { 529 | this.expand = !this.expand; 530 | try { 531 | this.$el.dispatchEvent(new Event('resized')); 532 | } catch (e) { 533 | var evt = document.createEvent('Event'); 534 | evt.initEvent('resized', true, false); 535 | this.$el.dispatchEvent(evt); 536 | } 537 | } 538 | }, 539 | render: function render() { 540 | var _this = this; 541 | var elements = []; 542 | var dataType; 543 | if (this.value === null || this.value === undefined) { 544 | dataType = script$9; 545 | } else if (Array.isArray(this.value)) { 546 | dataType = script$5; 547 | } else if (Object.prototype.toString.call(this.value) === '[object Date]') { 548 | dataType = script$3; 549 | } else if (_typeof(this.value) === 'object') { 550 | dataType = script$6; 551 | } else if (typeof this.value === 'number') { 552 | dataType = script$8; 553 | } else if (typeof this.value === 'string') { 554 | dataType = script$a; 555 | } else if (typeof this.value === 'boolean') { 556 | dataType = script$7; 557 | } else if (typeof this.value === 'function') { 558 | dataType = script$4; 559 | } 560 | if (this.value.constructor === RegExp) { 561 | dataType = script$2; 562 | } 563 | var complex = this.keyName && this.value && (Array.isArray(this.value) || _typeof(this.value) === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]'); 564 | if (!this.previewMode && complex) { 565 | elements.push(h('span', { 566 | 'class': { 567 | 'jv-toggle': true, 568 | open: !!this.expand 569 | }, 570 | onClick: this.toggle 571 | })); 572 | } 573 | if (this.keyName) { 574 | elements.push(h('span', { 575 | 'class': { 'jv-key': true }, 576 | onClick: function onClick() { 577 | _this.keyClick(_this.keyName); 578 | }, 579 | innerText: ''.concat(this.keyName, ':') 580 | })); 581 | } 582 | elements.push(h(dataType, { 583 | 'class': { 'jv-push': true }, 584 | jsonValue: this.value, 585 | keyName: this.keyName, 586 | sort: this.sort, 587 | depth: this.depth, 588 | expand: this.expand, 589 | previewMode: this.previewMode, 590 | 'onUpdate:expand': function onUpdateExpand(value) { 591 | _this.expand = value; 592 | } 593 | })); 594 | return h('div', { 595 | 'class': { 596 | 'jv-node': true, 597 | 'jv-key-node': Boolean(this.keyName) && !complex, 598 | toggle: !this.previewMode && complex 599 | } 600 | }, elements); 601 | } 602 | }; 603 | 604 | script$1.__file = "src/Components/json-box.vue"; 605 | 606 | var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; 607 | 608 | function getDefaultExportFromCjs (x) { 609 | return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; 610 | } 611 | 612 | var clipboard = {exports: {}}; 613 | 614 | (function (module, exports) { 615 | (function webpackUniversalModuleDefinition(root, factory) { 616 | module.exports = factory(); 617 | }(commonjsGlobal, function () { 618 | return function () { 619 | var __webpack_modules__ = { 620 | 686: function (__unused_webpack_module, __webpack_exports__, __webpack_require__) { 621 | __webpack_require__.d(__webpack_exports__, { 622 | 'default': function () { 623 | return clipboard; 624 | } 625 | }); 626 | var tiny_emitter = __webpack_require__(279); 627 | var tiny_emitter_default = __webpack_require__.n(tiny_emitter); 628 | var listen = __webpack_require__(370); 629 | var listen_default = __webpack_require__.n(listen); 630 | var src_select = __webpack_require__(817); 631 | var select_default = __webpack_require__.n(src_select); 632 | function command(type) { 633 | try { 634 | return document.execCommand(type); 635 | } catch (err) { 636 | return false; 637 | } 638 | } 639 | var ClipboardActionCut = function ClipboardActionCut(target) { 640 | var selectedText = select_default()(target); 641 | command('cut'); 642 | return selectedText; 643 | }; 644 | var actions_cut = ClipboardActionCut; 645 | function createFakeElement(value) { 646 | var isRTL = document.documentElement.getAttribute('dir') === 'rtl'; 647 | var fakeElement = document.createElement('textarea'); 648 | fakeElement.style.fontSize = '12pt'; 649 | fakeElement.style.border = '0'; 650 | fakeElement.style.padding = '0'; 651 | fakeElement.style.margin = '0'; 652 | fakeElement.style.position = 'absolute'; 653 | fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; 654 | var yPosition = window.pageYOffset || document.documentElement.scrollTop; 655 | fakeElement.style.top = ''.concat(yPosition, 'px'); 656 | fakeElement.setAttribute('readonly', ''); 657 | fakeElement.value = value; 658 | return fakeElement; 659 | } 660 | var fakeCopyAction = function fakeCopyAction(value, options) { 661 | var fakeElement = createFakeElement(value); 662 | options.container.appendChild(fakeElement); 663 | var selectedText = select_default()(fakeElement); 664 | command('copy'); 665 | fakeElement.remove(); 666 | return selectedText; 667 | }; 668 | var ClipboardActionCopy = function ClipboardActionCopy(target) { 669 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { container: document.body }; 670 | var selectedText = ''; 671 | if (typeof target === 'string') { 672 | selectedText = fakeCopyAction(target, options); 673 | } else if (target instanceof HTMLInputElement && ![ 674 | 'text', 675 | 'search', 676 | 'url', 677 | 'tel', 678 | 'password' 679 | ].includes(target === null || target === void 0 ? void 0 : target.type)) { 680 | selectedText = fakeCopyAction(target.value, options); 681 | } else { 682 | selectedText = select_default()(target); 683 | command('copy'); 684 | } 685 | return selectedText; 686 | }; 687 | var actions_copy = ClipboardActionCopy; 688 | function _typeof(obj) { 689 | '@babel/helpers - typeof'; 690 | if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { 691 | _typeof = function _typeof(obj) { 692 | return typeof obj; 693 | }; 694 | } else { 695 | _typeof = function _typeof(obj) { 696 | return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; 697 | }; 698 | } 699 | return _typeof(obj); 700 | } 701 | var ClipboardActionDefault = function ClipboardActionDefault() { 702 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 703 | var _options$action = options.action, action = _options$action === void 0 ? 'copy' : _options$action, container = options.container, target = options.target, text = options.text; 704 | if (action !== 'copy' && action !== 'cut') { 705 | throw new Error('Invalid "action" value, use either "copy" or "cut"'); 706 | } 707 | if (target !== undefined) { 708 | if (target && _typeof(target) === 'object' && target.nodeType === 1) { 709 | if (action === 'copy' && target.hasAttribute('disabled')) { 710 | throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'); 711 | } 712 | if (action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) { 713 | throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes'); 714 | } 715 | } else { 716 | throw new Error('Invalid "target" value, use a valid Element'); 717 | } 718 | } 719 | if (text) { 720 | return actions_copy(text, { container: container }); 721 | } 722 | if (target) { 723 | return action === 'cut' ? actions_cut(target) : actions_copy(target, { container: container }); 724 | } 725 | }; 726 | var actions_default = ClipboardActionDefault; 727 | function clipboard_typeof(obj) { 728 | '@babel/helpers - typeof'; 729 | if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { 730 | clipboard_typeof = function _typeof(obj) { 731 | return typeof obj; 732 | }; 733 | } else { 734 | clipboard_typeof = function _typeof(obj) { 735 | return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; 736 | }; 737 | } 738 | return clipboard_typeof(obj); 739 | } 740 | function _classCallCheck(instance, Constructor) { 741 | if (!(instance instanceof Constructor)) { 742 | throw new TypeError('Cannot call a class as a function'); 743 | } 744 | } 745 | function _defineProperties(target, props) { 746 | for (var i = 0; i < props.length; i++) { 747 | var descriptor = props[i]; 748 | descriptor.enumerable = descriptor.enumerable || false; 749 | descriptor.configurable = true; 750 | if ('value' in descriptor) 751 | descriptor.writable = true; 752 | Object.defineProperty(target, descriptor.key, descriptor); 753 | } 754 | } 755 | function _createClass(Constructor, protoProps, staticProps) { 756 | if (protoProps) 757 | _defineProperties(Constructor.prototype, protoProps); 758 | if (staticProps) 759 | _defineProperties(Constructor, staticProps); 760 | return Constructor; 761 | } 762 | function _inherits(subClass, superClass) { 763 | if (typeof superClass !== 'function' && superClass !== null) { 764 | throw new TypeError('Super expression must either be null or a function'); 765 | } 766 | subClass.prototype = Object.create(superClass && superClass.prototype, { 767 | constructor: { 768 | value: subClass, 769 | writable: true, 770 | configurable: true 771 | } 772 | }); 773 | if (superClass) 774 | _setPrototypeOf(subClass, superClass); 775 | } 776 | function _setPrototypeOf(o, p) { 777 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { 778 | o.__proto__ = p; 779 | return o; 780 | }; 781 | return _setPrototypeOf(o, p); 782 | } 783 | function _createSuper(Derived) { 784 | var hasNativeReflectConstruct = _isNativeReflectConstruct(); 785 | return function _createSuperInternal() { 786 | var Super = _getPrototypeOf(Derived), result; 787 | if (hasNativeReflectConstruct) { 788 | var NewTarget = _getPrototypeOf(this).constructor; 789 | result = Reflect.construct(Super, arguments, NewTarget); 790 | } else { 791 | result = Super.apply(this, arguments); 792 | } 793 | return _possibleConstructorReturn(this, result); 794 | }; 795 | } 796 | function _possibleConstructorReturn(self, call) { 797 | if (call && (clipboard_typeof(call) === 'object' || typeof call === 'function')) { 798 | return call; 799 | } 800 | return _assertThisInitialized(self); 801 | } 802 | function _assertThisInitialized(self) { 803 | if (self === void 0) { 804 | throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); 805 | } 806 | return self; 807 | } 808 | function _isNativeReflectConstruct() { 809 | if (typeof Reflect === 'undefined' || !Reflect.construct) 810 | return false; 811 | if (Reflect.construct.sham) 812 | return false; 813 | if (typeof Proxy === 'function') 814 | return true; 815 | try { 816 | Date.prototype.toString.call(Reflect.construct(Date, [], function () { 817 | })); 818 | return true; 819 | } catch (e) { 820 | return false; 821 | } 822 | } 823 | function _getPrototypeOf(o) { 824 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { 825 | return o.__proto__ || Object.getPrototypeOf(o); 826 | }; 827 | return _getPrototypeOf(o); 828 | } 829 | function getAttributeValue(suffix, element) { 830 | var attribute = 'data-clipboard-'.concat(suffix); 831 | if (!element.hasAttribute(attribute)) { 832 | return; 833 | } 834 | return element.getAttribute(attribute); 835 | } 836 | var Clipboard = function (_Emitter) { 837 | _inherits(Clipboard, _Emitter); 838 | var _super = _createSuper(Clipboard); 839 | function Clipboard(trigger, options) { 840 | var _this; 841 | _classCallCheck(this, Clipboard); 842 | _this = _super.call(this); 843 | _this.resolveOptions(options); 844 | _this.listenClick(trigger); 845 | return _this; 846 | } 847 | _createClass(Clipboard, [ 848 | { 849 | key: 'resolveOptions', 850 | value: function resolveOptions() { 851 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 852 | this.action = typeof options.action === 'function' ? options.action : this.defaultAction; 853 | this.target = typeof options.target === 'function' ? options.target : this.defaultTarget; 854 | this.text = typeof options.text === 'function' ? options.text : this.defaultText; 855 | this.container = clipboard_typeof(options.container) === 'object' ? options.container : document.body; 856 | } 857 | }, 858 | { 859 | key: 'listenClick', 860 | value: function listenClick(trigger) { 861 | var _this2 = this; 862 | this.listener = listen_default()(trigger, 'click', function (e) { 863 | return _this2.onClick(e); 864 | }); 865 | } 866 | }, 867 | { 868 | key: 'onClick', 869 | value: function onClick(e) { 870 | var trigger = e.delegateTarget || e.currentTarget; 871 | var action = this.action(trigger) || 'copy'; 872 | var text = actions_default({ 873 | action: action, 874 | container: this.container, 875 | target: this.target(trigger), 876 | text: this.text(trigger) 877 | }); 878 | this.emit(text ? 'success' : 'error', { 879 | action: action, 880 | text: text, 881 | trigger: trigger, 882 | clearSelection: function clearSelection() { 883 | if (trigger) { 884 | trigger.focus(); 885 | } 886 | window.getSelection().removeAllRanges(); 887 | } 888 | }); 889 | } 890 | }, 891 | { 892 | key: 'defaultAction', 893 | value: function defaultAction(trigger) { 894 | return getAttributeValue('action', trigger); 895 | } 896 | }, 897 | { 898 | key: 'defaultTarget', 899 | value: function defaultTarget(trigger) { 900 | var selector = getAttributeValue('target', trigger); 901 | if (selector) { 902 | return document.querySelector(selector); 903 | } 904 | } 905 | }, 906 | { 907 | key: 'defaultText', 908 | value: function defaultText(trigger) { 909 | return getAttributeValue('text', trigger); 910 | } 911 | }, 912 | { 913 | key: 'destroy', 914 | value: function destroy() { 915 | this.listener.destroy(); 916 | } 917 | } 918 | ], [ 919 | { 920 | key: 'copy', 921 | value: function copy(target) { 922 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { container: document.body }; 923 | return actions_copy(target, options); 924 | } 925 | }, 926 | { 927 | key: 'cut', 928 | value: function cut(target) { 929 | return actions_cut(target); 930 | } 931 | }, 932 | { 933 | key: 'isSupported', 934 | value: function isSupported() { 935 | var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [ 936 | 'copy', 937 | 'cut' 938 | ]; 939 | var actions = typeof action === 'string' ? [action] : action; 940 | var support = !!document.queryCommandSupported; 941 | actions.forEach(function (action) { 942 | support = support && !!document.queryCommandSupported(action); 943 | }); 944 | return support; 945 | } 946 | } 947 | ]); 948 | return Clipboard; 949 | }(tiny_emitter_default()); 950 | var clipboard = Clipboard; 951 | }, 952 | 828: function (module) { 953 | var DOCUMENT_NODE_TYPE = 9; 954 | if (typeof Element !== 'undefined' && !Element.prototype.matches) { 955 | var proto = Element.prototype; 956 | proto.matches = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector || proto.webkitMatchesSelector; 957 | } 958 | function closest(element, selector) { 959 | while (element && element.nodeType !== DOCUMENT_NODE_TYPE) { 960 | if (typeof element.matches === 'function' && element.matches(selector)) { 961 | return element; 962 | } 963 | element = element.parentNode; 964 | } 965 | } 966 | module.exports = closest; 967 | }, 968 | 438: function (module, __unused_webpack_exports, __webpack_require__) { 969 | var closest = __webpack_require__(828); 970 | function _delegate(element, selector, type, callback, useCapture) { 971 | var listenerFn = listener.apply(this, arguments); 972 | element.addEventListener(type, listenerFn, useCapture); 973 | return { 974 | destroy: function () { 975 | element.removeEventListener(type, listenerFn, useCapture); 976 | } 977 | }; 978 | } 979 | function delegate(elements, selector, type, callback, useCapture) { 980 | if (typeof elements.addEventListener === 'function') { 981 | return _delegate.apply(null, arguments); 982 | } 983 | if (typeof type === 'function') { 984 | return _delegate.bind(null, document).apply(null, arguments); 985 | } 986 | if (typeof elements === 'string') { 987 | elements = document.querySelectorAll(elements); 988 | } 989 | return Array.prototype.map.call(elements, function (element) { 990 | return _delegate(element, selector, type, callback, useCapture); 991 | }); 992 | } 993 | function listener(element, selector, type, callback) { 994 | return function (e) { 995 | e.delegateTarget = closest(e.target, selector); 996 | if (e.delegateTarget) { 997 | callback.call(element, e); 998 | } 999 | }; 1000 | } 1001 | module.exports = delegate; 1002 | }, 1003 | 879: function (__unused_webpack_module, exports) { 1004 | exports.node = function (value) { 1005 | return value !== undefined && value instanceof HTMLElement && value.nodeType === 1; 1006 | }; 1007 | exports.nodeList = function (value) { 1008 | var type = Object.prototype.toString.call(value); 1009 | return value !== undefined && (type === '[object NodeList]' || type === '[object HTMLCollection]') && 'length' in value && (value.length === 0 || exports.node(value[0])); 1010 | }; 1011 | exports.string = function (value) { 1012 | return typeof value === 'string' || value instanceof String; 1013 | }; 1014 | exports.fn = function (value) { 1015 | var type = Object.prototype.toString.call(value); 1016 | return type === '[object Function]'; 1017 | }; 1018 | }, 1019 | 370: function (module, __unused_webpack_exports, __webpack_require__) { 1020 | var is = __webpack_require__(879); 1021 | var delegate = __webpack_require__(438); 1022 | function listen(target, type, callback) { 1023 | if (!target && !type && !callback) { 1024 | throw new Error('Missing required arguments'); 1025 | } 1026 | if (!is.string(type)) { 1027 | throw new TypeError('Second argument must be a String'); 1028 | } 1029 | if (!is.fn(callback)) { 1030 | throw new TypeError('Third argument must be a Function'); 1031 | } 1032 | if (is.node(target)) { 1033 | return listenNode(target, type, callback); 1034 | } else if (is.nodeList(target)) { 1035 | return listenNodeList(target, type, callback); 1036 | } else if (is.string(target)) { 1037 | return listenSelector(target, type, callback); 1038 | } else { 1039 | throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList'); 1040 | } 1041 | } 1042 | function listenNode(node, type, callback) { 1043 | node.addEventListener(type, callback); 1044 | return { 1045 | destroy: function () { 1046 | node.removeEventListener(type, callback); 1047 | } 1048 | }; 1049 | } 1050 | function listenNodeList(nodeList, type, callback) { 1051 | Array.prototype.forEach.call(nodeList, function (node) { 1052 | node.addEventListener(type, callback); 1053 | }); 1054 | return { 1055 | destroy: function () { 1056 | Array.prototype.forEach.call(nodeList, function (node) { 1057 | node.removeEventListener(type, callback); 1058 | }); 1059 | } 1060 | }; 1061 | } 1062 | function listenSelector(selector, type, callback) { 1063 | return delegate(document.body, selector, type, callback); 1064 | } 1065 | module.exports = listen; 1066 | }, 1067 | 817: function (module) { 1068 | function select(element) { 1069 | var selectedText; 1070 | if (element.nodeName === 'SELECT') { 1071 | element.focus(); 1072 | selectedText = element.value; 1073 | } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { 1074 | var isReadOnly = element.hasAttribute('readonly'); 1075 | if (!isReadOnly) { 1076 | element.setAttribute('readonly', ''); 1077 | } 1078 | element.select(); 1079 | element.setSelectionRange(0, element.value.length); 1080 | if (!isReadOnly) { 1081 | element.removeAttribute('readonly'); 1082 | } 1083 | selectedText = element.value; 1084 | } else { 1085 | if (element.hasAttribute('contenteditable')) { 1086 | element.focus(); 1087 | } 1088 | var selection = window.getSelection(); 1089 | var range = document.createRange(); 1090 | range.selectNodeContents(element); 1091 | selection.removeAllRanges(); 1092 | selection.addRange(range); 1093 | selectedText = selection.toString(); 1094 | } 1095 | return selectedText; 1096 | } 1097 | module.exports = select; 1098 | }, 1099 | 279: function (module) { 1100 | function E() { 1101 | } 1102 | E.prototype = { 1103 | on: function (name, callback, ctx) { 1104 | var e = this.e || (this.e = {}); 1105 | (e[name] || (e[name] = [])).push({ 1106 | fn: callback, 1107 | ctx: ctx 1108 | }); 1109 | return this; 1110 | }, 1111 | once: function (name, callback, ctx) { 1112 | var self = this; 1113 | function listener() { 1114 | self.off(name, listener); 1115 | callback.apply(ctx, arguments); 1116 | } 1117 | listener._ = callback; 1118 | return this.on(name, listener, ctx); 1119 | }, 1120 | emit: function (name) { 1121 | var data = [].slice.call(arguments, 1); 1122 | var evtArr = ((this.e || (this.e = {}))[name] || []).slice(); 1123 | var i = 0; 1124 | var len = evtArr.length; 1125 | for (i; i < len; i++) { 1126 | evtArr[i].fn.apply(evtArr[i].ctx, data); 1127 | } 1128 | return this; 1129 | }, 1130 | off: function (name, callback) { 1131 | var e = this.e || (this.e = {}); 1132 | var evts = e[name]; 1133 | var liveEvents = []; 1134 | if (evts && callback) { 1135 | for (var i = 0, len = evts.length; i < len; i++) { 1136 | if (evts[i].fn !== callback && evts[i].fn._ !== callback) 1137 | liveEvents.push(evts[i]); 1138 | } 1139 | } 1140 | liveEvents.length ? e[name] = liveEvents : delete e[name]; 1141 | return this; 1142 | } 1143 | }; 1144 | module.exports = E; 1145 | module.exports.TinyEmitter = E; 1146 | } 1147 | }; 1148 | var __webpack_module_cache__ = {}; 1149 | function __webpack_require__(moduleId) { 1150 | if (__webpack_module_cache__[moduleId]) { 1151 | return __webpack_module_cache__[moduleId].exports; 1152 | } 1153 | var module = __webpack_module_cache__[moduleId] = { exports: {} }; 1154 | __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 1155 | return module.exports; 1156 | } 1157 | !function () { 1158 | __webpack_require__.n = function (module) { 1159 | var getter = module && module.__esModule ? function () { 1160 | return module['default']; 1161 | } : function () { 1162 | return module; 1163 | }; 1164 | __webpack_require__.d(getter, { a: getter }); 1165 | return getter; 1166 | }; 1167 | }(); 1168 | !function () { 1169 | __webpack_require__.d = function (exports, definition) { 1170 | for (var key in definition) { 1171 | if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 1172 | Object.defineProperty(exports, key, { 1173 | enumerable: true, 1174 | get: definition[key] 1175 | }); 1176 | } 1177 | } 1178 | }; 1179 | }(); 1180 | !function () { 1181 | __webpack_require__.o = function (obj, prop) { 1182 | return Object.prototype.hasOwnProperty.call(obj, prop); 1183 | }; 1184 | }(); 1185 | return __webpack_require__(686); 1186 | }().default; 1187 | })); 1188 | }(clipboard)); 1189 | var Clipboard = getDefaultExportFromCjs(clipboard.exports); 1190 | 1191 | var debounce = function debounce(func, wait) { 1192 | var startTime = Date.now(); 1193 | var timer; 1194 | return function () { 1195 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 1196 | args[_key] = arguments[_key]; 1197 | } 1198 | if (Date.now() - startTime < wait && timer) { 1199 | clearTimeout(timer); 1200 | } 1201 | timer = setTimeout(function () { 1202 | func.apply(void 0, args); 1203 | }, wait); 1204 | startTime = Date.now(); 1205 | }; 1206 | }; 1207 | 1208 | var script = { 1209 | name: 'JsonViewer', 1210 | components: { JsonBox: script$1 }, 1211 | props: { 1212 | value: { 1213 | type: [ 1214 | Object, 1215 | Array, 1216 | String, 1217 | Number, 1218 | Boolean, 1219 | Function 1220 | ], 1221 | required: true 1222 | }, 1223 | expanded: { 1224 | type: Boolean, 1225 | 'default': false 1226 | }, 1227 | expandDepth: { 1228 | type: Number, 1229 | 'default': 1 1230 | }, 1231 | copyable: { 1232 | type: [ 1233 | Boolean, 1234 | Object 1235 | ], 1236 | 'default': false 1237 | }, 1238 | sort: { 1239 | type: Boolean, 1240 | 'default': false 1241 | }, 1242 | boxed: { 1243 | type: Boolean, 1244 | 'default': false 1245 | }, 1246 | theme: { 1247 | type: String, 1248 | 'default': 'light' 1249 | }, 1250 | timeformat: { 1251 | type: Function, 1252 | 'default': function _default(value) { 1253 | return value.toLocaleString(); 1254 | } 1255 | }, 1256 | previewMode: { 1257 | type: Boolean, 1258 | 'default': false 1259 | }, 1260 | parse: { 1261 | type: Boolean, 1262 | 'default': false 1263 | } 1264 | }, 1265 | provide: function provide() { 1266 | return { 1267 | expandDepth: this.expandDepth, 1268 | timeformat: this.timeformat, 1269 | keyClick: this.keyClick 1270 | }; 1271 | }, 1272 | data: function data() { 1273 | return { 1274 | copied: false, 1275 | expandableCode: false, 1276 | expandCode: this.expanded 1277 | }; 1278 | }, 1279 | emits: ['onKeyClick'], 1280 | computed: { 1281 | jvClass: function jvClass() { 1282 | return 'jv-container ' + 'jv-' + this.theme + (this.boxed ? ' boxed' : ''); 1283 | }, 1284 | copyText: function copyText() { 1285 | var _this$copyable = this.copyable, copyText = _this$copyable.copyText, copiedText = _this$copyable.copiedText, timeout = _this$copyable.timeout, align = _this$copyable.align; 1286 | return { 1287 | copyText: copyText || 'copy', 1288 | copiedText: copiedText || 'copied!', 1289 | timeout: timeout || 2000, 1290 | align: align 1291 | }; 1292 | }, 1293 | parseValue: function parseValue() { 1294 | if (!this.parse || typeof this.value !== 'string') { 1295 | return this.value; 1296 | } 1297 | try { 1298 | return JSON.parse(this.value); 1299 | } catch (_unused) { 1300 | return this.value; 1301 | } 1302 | } 1303 | }, 1304 | watch: { 1305 | value: function value() { 1306 | this.onResized(); 1307 | } 1308 | }, 1309 | mounted: function mounted() { 1310 | var _this = this; 1311 | this.debounceResized = debounce(this.debResized.bind(this), 200); 1312 | if (this.boxed && this.$refs.jsonBox) { 1313 | this.onResized(); 1314 | this.$refs.jsonBox.$el.addEventListener('resized', this.onResized, true); 1315 | } 1316 | if (this.copyable) { 1317 | var clipBoard = new Clipboard(this.$refs.clip, { 1318 | text: function text() { 1319 | return JSON.stringify(_this.value, null, 2); 1320 | } 1321 | }); 1322 | clipBoard.on('success', function (e) { 1323 | _this.onCopied(e); 1324 | }); 1325 | } 1326 | }, 1327 | methods: { 1328 | onResized: function onResized() { 1329 | this.debounceResized(); 1330 | }, 1331 | debResized: function debResized() { 1332 | var _this2 = this; 1333 | this.$nextTick(function () { 1334 | if (!_this2.$refs.jsonBox) 1335 | return; 1336 | if (_this2.$refs.jsonBox.$el.clientHeight >= 250) { 1337 | _this2.expandableCode = true; 1338 | } else { 1339 | _this2.expandableCode = false; 1340 | } 1341 | }); 1342 | }, 1343 | keyClick: function keyClick(keyName) { 1344 | this.$emit('onKeyClick', keyName); 1345 | }, 1346 | onCopied: function onCopied(copyEvent) { 1347 | var _this3 = this; 1348 | if (this.copied) { 1349 | return; 1350 | } 1351 | this.copied = true; 1352 | setTimeout(function () { 1353 | _this3.copied = false; 1354 | }, this.copyText.timeout); 1355 | this.$emit('copied', copyEvent); 1356 | }, 1357 | toggleExpandCode: function toggleExpandCode() { 1358 | this.expandCode = !this.expandCode; 1359 | } 1360 | } 1361 | }; 1362 | 1363 | function render(_ctx, _cache, $props, $setup, $data, $options) { 1364 | var _component_json_box = resolveComponent('json-box'); 1365 | return openBlock(), createElementBlock('div', { 'class': normalizeClass($options.jvClass) }, [ 1366 | $props.copyable ? (openBlock(), createElementBlock('div', { 1367 | key: 0, 1368 | 'class': normalizeClass('jv-tooltip '.concat($options.copyText.align || 'right')) 1369 | }, [createElementVNode('span', { 1370 | ref: 'clip', 1371 | 'class': normalizeClass([ 1372 | 'jv-button', 1373 | { copied: $data.copied } 1374 | ]) 1375 | }, [renderSlot(_ctx.$slots, 'copy', { copied: $data.copied }, function () { 1376 | return [createTextVNode(toDisplayString($data.copied ? $options.copyText.copiedText : $options.copyText.copyText), 1)]; 1377 | })], 2)], 2)) : createCommentVNode('v-if', true), 1378 | createElementVNode('div', { 1379 | 'class': normalizeClass([ 1380 | 'jv-code', 1381 | { 1382 | open: $data.expandCode, 1383 | boxed: $props.boxed 1384 | } 1385 | ]) 1386 | }, [createVNode(_component_json_box, { 1387 | ref: 'jsonBox', 1388 | value: $options.parseValue, 1389 | sort: $props.sort, 1390 | 'preview-mode': $props.previewMode 1391 | }, null, 8, [ 1392 | 'value', 1393 | 'sort', 1394 | 'preview-mode' 1395 | ])], 2), 1396 | $data.expandableCode && $props.boxed ? (openBlock(), createElementBlock('div', { 1397 | key: 1, 1398 | 'class': 'jv-more', 1399 | onClick: _cache[0] || (_cache[0] = function () { 1400 | return $options.toggleExpandCode && $options.toggleExpandCode.apply($options, arguments); 1401 | }) 1402 | }, [createElementVNode('span', { 1403 | 'class': normalizeClass([ 1404 | 'jv-toggle', 1405 | { open: !!$data.expandCode } 1406 | ]) 1407 | }, null, 2)])) : createCommentVNode('v-if', true) 1408 | ], 2); 1409 | } 1410 | 1411 | script.render = render; 1412 | script.__file = "src/Components/json-viewer.vue"; 1413 | 1414 | var install = function install(app) { 1415 | app.component(script.name, script); 1416 | }; 1417 | var index = { install: install }; 1418 | 1419 | export { script as JsonViewer, index as default }; 1420 | -------------------------------------------------------------------------------- /dist/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /dist/index.css: -------------------------------------------------------------------------------- 1 | .jv-container{box-sizing:border-box;position:relative}.jv-container.boxed{border:1px solid #eee;border-radius:6px}.jv-container.boxed:hover{box-shadow:0 2px 7px rgba(0,0,0,.15);border-color:transparent;position:relative}.jv-container.jv-light{background:#fff;white-space:nowrap;color:#525252;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-dark{background:#282c34;white-space:nowrap;color:#fff;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-light .jv-ellipsis{color:#999;background-color:#eee;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px 4px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;user-select:none}.jv-container.jv-dark .jv-ellipsis{color:#f8f8f8;background-color:#2c3e50;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px 4px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;user-select:none}.jv-container.jv-light .jv-button{color:#49b3ff}.jv-container.jv-dark .jv-button{color:#49b3ff}.jv-container.jv-light .jv-key{color:#111;margin-right:4px}.jv-container.jv-dark .jv-key{color:#fff;margin-right:4px}.jv-container.jv-dark .jv-item.jv-array{color:#111}.jv-container.jv-dark .jv-item.jv-array{color:#fff}.jv-container.jv-dark .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-dark .jv-item.jv-function{color:#067bca}.jv-container.jv-dark .jv-item.jv-number{color:#fc1e70}.jv-container.jv-dark .jv-item.jv-object{color:#fff}.jv-container.jv-dark .jv-item.jv-undefined{color:#e08331}.jv-container.jv-dark .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-dark .jv-item.jv-string .jv-link{color:#0366d6}.jv-container.jv-dark .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-dark .jv-code .jv-toggle:hover:before{background:#eee}.jv-container.jv-light .jv-item.jv-array{color:#111}.jv-container.jv-light .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-light .jv-item.jv-function{color:#067bca}.jv-container.jv-light .jv-item.jv-number{color:#fc1e70}.jv-container.jv-light .jv-item.jv-object{color:#111}.jv-container.jv-light .jv-item.jv-undefined{color:#e08331}.jv-container.jv-light .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-light .jv-item.jv-string .jv-link{color:#0366d6}.jv-container.jv-light .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-light .jv-code .jv-toggle:hover:before{background:#eee}.jv-container .jv-code{overflow:hidden;padding:30px 20px}.jv-container .jv-code.boxed{max-height:300px}.jv-container .jv-code.open{max-height:initial!important;overflow:visible;overflow-x:auto;padding-bottom:45px}.jv-container .jv-toggle{background-image:url(./icon.svg);background-repeat:no-repeat;background-size:contain;background-position:center center;cursor:pointer;width:10px;height:10px;margin-right:2px;display:inline-block;transition:transform .1s}.jv-container .jv-toggle.open{transform:rotate(90deg)}.jv-container .jv-more{position:absolute;z-index:1;bottom:0;left:0;right:0;height:40px;width:100%;text-align:center;cursor:pointer}.jv-container .jv-more .jv-toggle{position:relative;top:40%;z-index:2;color:#888;transition:all .1s;transform:rotate(90deg)}.jv-container .jv-more .jv-toggle.open{transform:rotate(-90deg)}.jv-container .jv-more:after{content:"";width:100%;height:100%;position:absolute;bottom:0;left:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(230,230,230,.3) 100%);transition:all .1s}.jv-container .jv-more:hover .jv-toggle{top:50%;color:#111}.jv-container .jv-more:hover:after{background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(230,230,230,.3) 100%)}.jv-container .jv-button{position:relative;cursor:pointer;display:inline-block;padding:5px;z-index:5}.jv-container .jv-button.copied{opacity:.4;cursor:default}.jv-container .jv-tooltip{position:absolute}.jv-container .jv-tooltip.right{right:15px}.jv-container .jv-tooltip.left{left:15px}.jv-container .j-icon{font-size:12px}.jv-node .jv-toggle.open+.jv-key+.jv-push>.jv-item.jv-array:last-of-type,.jv-node .jv-toggle.open+.jv-key+.jv-push>.jv-item.jv-object:last-of-type{margin-left:12px}.jv-node .jv-toggle:not(.open)+.jv-key+.jv-push>.jv-item.jv-array:last-of-type,.jv-node .jv-toggle:not(.open)+.jv-key+.jv-push>.jv-item.jv-object:last-of-type,.jv-node .jv-toggle:not(.open)+.jv-key+.jv-push>.jv-node:last-of-type{margin-left:0}.jv-node{position:relative}.jv-node:after{content:","}.jv-node:last-of-type:after{content:""}.jv-node.toggle{margin-left:13px!important}.jv-node .jv-node{margin-left:25px} -------------------------------------------------------------------------------- /img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qiuquanwu/vue3-json-viewer/b4db8d7963545561c720232058631b026011eaf7/img/demo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-json-viewer", 3 | "version": "2.3.0", 4 | "description": "vuejs展示json的组件,适配vue3", 5 | "main": "dist/bundle.cjs.js", 6 | "module": "dist/bundle.esm.js", 7 | "types": "dist/bundle.d.ts", 8 | "style": "dist/index.css", 9 | "files": [ 10 | "dist" 11 | ], 12 | "scripts": { 13 | "build": "rollup -c" 14 | }, 15 | "keywords": [ 16 | "vue", 17 | "json", 18 | "vue-next", 19 | "vue3" 20 | ], 21 | "author": "qiuquanwu <“919403255@qq.com>", 22 | "license": "ISC", 23 | "homepage": "https://vjv-doc-qiuquanwu.vercel.app/", 24 | "bugs": {}, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/qiuquanwu/vue3-json-viewer" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.11.1", 31 | "@babel/plugin-syntax-jsx": "^7.10.4", 32 | "@babel/preset-env": "^7.11.0", 33 | "@rollup/plugin-commonjs": "^21.0.2", 34 | "@rollup/plugin-node-resolve": "^13.1.3", 35 | "@vue/compiler-sfc": "^3.2.31", 36 | "clean-css": "^5.2.4", 37 | "rollup": "^2.23.1", 38 | "rollup-plugin-babel": "^4.4.0", 39 | "rollup-plugin-css-only": "^3.1.0", 40 | "rollup-plugin-dts": "^4.1.0", 41 | "rollup-plugin-jsx": "^1.0.3", 42 | "rollup-plugin-node-resolve": "^5.2.0", 43 | "rollup-plugin-styles": "^4.0.0", 44 | "rollup-plugin-stylus-css-modules": "^1.5.0", 45 | "rollup-plugin-terser": "^7.0.2", 46 | "rollup-plugin-unassert": "^0.3.0", 47 | "rollup-plugin-vue": "^6.0.0", 48 | "rollup-plugin-vue-inline-svg": "^1.1.2", 49 | "stylus": "^0.56.0", 50 | "typescript": "^4.5.5" 51 | }, 52 | "peerDependencies": { 53 | "vue": "^3.2.0" 54 | }, 55 | "contributors": [ 56 | { 57 | "name": "陈峰", 58 | "email": "chenfengjw@hotmail.com" 59 | }, 60 | { 61 | "name": "Sacha Stafyniak", 62 | "email": "sacha.stafyniak@gmail.com" 63 | }, 64 | { 65 | "name": "邱权武", 66 | "email": "9194032@qq.com" 67 | } 68 | ], 69 | "dependencies": { 70 | "clipboard": "^2.0.10" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # vue3-json-viewer 2 | 3 | [中文版](readme_cn.md) 4 | 5 | Simple and easy-to-use json content display component suitable for `vue3` and `vite`. 6 | When developing with `vue3`+`vite`, I found that I needed to use the display json data component, and found that `vue-json-viewer` can only be compatible with `vue2`, so it took an hour to rewrite the adaptation of `vue3`. 7 | Original author: [github](https://github.com/chenfengjw163/vue-json-viewer) 8 | 9 | ## Install 10 | 11 | Requires `clipboard` 12 | 13 | ``` 14 | $ npm install clipboard --save 15 | ``` 16 | 17 | Then install `vue3-json-viewer` 18 | 19 | ``` 20 | $ npm install vue3-json-viewer --save 21 | ``` 22 | 23 | ## RecentUpdate 24 | - dark theme support 25 | - Add click event for keyNode 26 | - Support RegExp types 27 | 28 | ## Doc 29 | > [document](https://vjv-doc-qiuquanwu.vercel.app/) 30 | ## Usage 31 | 32 | main.js 33 | 34 | ```js 35 | import { createApp } from "vue"; 36 | import App from "./App.vue"; 37 | import JsonViewer from "vue3-json-viewer"; 38 | // if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css" 39 | import "vue3-json-viewer/dist/index.css"; 40 | const app = createApp(App); 41 | app.use(JsonViewer); 42 | app.mount("#app"); 43 | ``` 44 | 45 | App.vue 46 | 47 | ``` html 48 | 56 | 57 | 76 | 77 | 82 | 83 | 84 | ``` 85 | 86 | ![](./img/demo.png) 87 | -------------------------------------------------------------------------------- /readme_cn.md: -------------------------------------------------------------------------------- 1 | # vue3-json-viewer 2 | 3 | 简单易用的json内容展示组件,适配vue3和vite。 4 | 在使用vue3+vite开发时，发现需要用到显示json数据组件，发现vue-json-viewer只能兼容vue2，于是花了一个小时，重写的vue3的适配。 5 | 原作者：[github](https://github.com/chenfengjw163/vue-json-viewer) 6 | 7 | ## 安装 8 | 9 | 需要依赖clipboard，先安装clipboard 10 | 11 | ``` 12 | $ npm install clipboard --save 13 | ``` 14 | 15 | 再安装vue3-json-viewer 16 | 17 | ``` 18 | $ npm install vue3-json-viewer --save 19 | ``` 20 | ## 近期更新 21 | - 暗夜主题支持 22 | - 添加key节点点击事件 23 | - 支持正则表达式类型 24 | 25 | ## 使用 26 | 27 | main.js 28 | 29 | ```js 30 | import { createApp } from 'vue' 31 | import App from './App.vue' 32 | import JsonViewer from "vue3-json-viewer" 33 | // if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css" 34 | import "vue3-json-viewer/dist/index.css" 35 | const app = createApp(App) 36 | //全局引入 37 | app.use(JsonViewer) 38 | app.mount('#app') 39 | ``` 40 | 41 | App.vue 42 | 43 | ``` html 44 | 52 | 53 | 72 | 73 | 78 | 79 | ``` 80 | 81 | ![](./img/demo.png) -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel' 2 | import { nodeResolve } from "@rollup/plugin-node-resolve"; 3 | import VuePlugin from 'rollup-plugin-vue' 4 | import unassert from 'rollup-plugin-unassert'; 5 | import commonjs from "@rollup/plugin-commonjs" 6 | import css from 'rollup-plugin-css-only' // 提取css，压缩能力不行 7 | import CleanCSS from 'clean-css' // 压缩css 8 | import { writeFileSync } from 'fs' // 写文件 9 | import { terser } from 'rollup-plugin-terser' 10 | import pkg from './package.json' 11 | // import svg from 'rollup-plugin-vue-inline-svg'; 12 | import dts from "rollup-plugin-dts"; 13 | const extensions = [".js"]; 14 | 15 | 16 | export default [{ 17 | input: './src/index.js', 18 | // output: { 19 | // file: './dist/bundle.esm.js', 20 | // format: 'esm', //若打包commonjs 21 | // assetFileNames: "[name]-[hash][extname]" 22 | // }, 23 | output: [ 24 | { file: pkg.main, format: 'cjs' }, 25 | { file: pkg.module, format: 'es' } 26 | ], 27 | external: ["vue", "@vue/compiler-sfc", "./index.css"], 28 | plugins: [ 29 | 30 | nodeResolve({ 31 | browser: true, 32 | extensions: ['.ts', '.mjs', '.js', '.json', '.node'] 33 | }), 34 | 35 | VuePlugin({ css: true }), 36 | babel({ 37 | exclude: "node_modules/**", 38 | extensions, 39 | runtimeHelpers: true, 40 | }), 41 | 42 | commonjs(), 43 | 44 | css({ 45 | output(style) { 46 | // 压缩 css 写入 dist/vue-rollup-component-template.css 47 | writeFileSync('./dist/index.css', new CleanCSS().minify(style).styles) 48 | } 49 | }), 50 | // css: false 将 161 | -------------------------------------------------------------------------------- /src/Components/json-viewer.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 166 | 167 | 461 | -------------------------------------------------------------------------------- /src/Components/types/json-array.vue: -------------------------------------------------------------------------------- 1 | 124 | -------------------------------------------------------------------------------- /src/Components/types/json-boolean.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /src/Components/types/json-date.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /src/Components/types/json-function.vue: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /src/Components/types/json-number.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /src/Components/types/json-object.vue: -------------------------------------------------------------------------------- 1 | 136 | -------------------------------------------------------------------------------- /src/Components/types/json-regexp.vue: -------------------------------------------------------------------------------- 1 | 78 | -------------------------------------------------------------------------------- /src/Components/types/json-string.vue: -------------------------------------------------------------------------------- 1 | 78 | -------------------------------------------------------------------------------- /src/Components/types/json-undefined.vue: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /src/Components/utils.js: -------------------------------------------------------------------------------- 1 | export const debounce = function(func, wait) { 2 | let startTime = Date.now(); 3 | let timer; 4 | 5 | return (...args) => { 6 | if (Date.now() - startTime < wait && timer) { 7 | clearTimeout(timer); 8 | } 9 | timer = setTimeout(() => { 10 | func(...args); 11 | }, wait); 12 | startTime = Date.now(); 13 | } 14 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import JsonViewer from './Components/json-viewer.vue' 2 | export { 3 | JsonViewer 4 | } 5 | const install=(app)=>{ 6 | app.component(JsonViewer.name,JsonViewer ) 7 | } 8 | 9 | export default { 10 | install, 11 | } 12 | --------------------------------------------------------------------------------