feat: Add PreviewMode

lib/json-box.vue

@@ -24,7 +24,8 @@ export default {
     depth: {
       type: Number,
       default: 0
-    }
+    },
+    previewMode: Boolean,
   },
   data() {
     return {
@@ -32,7 +33,7 @@ export default {
     }
   },
   mounted() {
-    this.expand = this.depth >= this.expandDepth ? false : true
+    this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true)
   },
   methods: {
     toggle() {
@@ -71,7 +72,7 @@ export default {
     }
     const toggle = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
 
-    if (toggle) {
+    if (!this.previewMode && toggle) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -103,7 +104,8 @@ export default {
         keyName: this.keyName,
         sort: this.sort,
         depth: this.depth,
-        expand: this.expand
+        expand: this.expand,
+        previewMode: this.previewMode,
       },
       on: {
         'update:expand': value => {
@@ -115,7 +117,7 @@ export default {
     return h('div', {
       class: {
         'jv-node': true,
-        'toggle': toggle
+        'toggle': !this.previewMode && toggle
       }
     }, elements)
   }

lib/json-viewer.vue

@@ -25,6 +25,7 @@
         ref="jsonBox"
         :value="value"
         :sort="sort"
+        :preview-mode="previewMode"
       />
     </div>
     <div 
@@ -83,6 +84,10 @@ export default {
     timeformat: {
       type: Function,
       default: value => value.toLocaleString(),
+    },
+    previewMode: {
+      type: Boolean,
+      default: false,
     }
   },
   provide () {

lib/types/json-array.vue

@@ -17,7 +17,8 @@ export default {
       default: 0
     },
     sort: Boolean,
-    expand: Boolean
+    expand: Boolean,
+    previewMode: Boolean,
   },
   data() {
     return {
@@ -61,7 +62,7 @@ export default {
   render (h) {
     let elements = []
 
-    if (!this.keyName) {
+    if (!this.previewMode && !this.keyName) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -94,6 +95,7 @@ export default {
             // keyName: key,
             depth: this.depth + 1,
             value,
+            previewMode: this.previewMode,
           }
         }))
       })

lib/types/json-object.vue

@@ -17,7 +17,8 @@ export default {
       default: 0
     },
     expand: Boolean,
-    sort: Boolean
+    sort: Boolean,
+    previewMode: Boolean,
   },
   data() {
     return {
@@ -69,7 +70,7 @@ export default {
   render (h) {
     let elements = []
 
-    if (!this.keyName) {
+    if (!this.previewMode && !this.keyName) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -106,6 +107,7 @@ export default {
               keyName: key,
               depth: this.depth + 1,
               value,
+              previewMode: this.previewMode,
             }
           }))
         }