Add ability to expand full branch

lib/json-box.vue

@@ -26,19 +26,30 @@ export default {
       default: 0
     },
     previewMode: Boolean,
+    forceExpand: Boolean,
   },
   data() {
     return {
-      expand: true
+      expand: true,
+      forceExpandMe: this.forceExpand,
     }
   },
   mounted() {
-    this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true)
+    this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true) || this.forceExpandMe
   },
   methods: {
     toggle() {
       this.expand = !this.expand
 
+      this.dispatchEvent()
+    },
+    toggleAll() {
+      this.expand = !this.expand
+      this.forceExpandMe = this.expand
+
+      this.dispatchEvent()
+    },
+    dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
@@ -64,7 +75,7 @@ export default {
     let elements = []
     let dataType
 
-    if (this.value === null || this.value === undefined) {
+    if (this.value === null || this.value === undefined) {
       dataType = JsonUndefined
     } else if (Array.isArray(this.value)) {
       dataType = JsonArray
@@ -90,7 +101,13 @@ export default {
           open: !!this.expand
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         }
       }))
     }
@@ -117,10 +134,15 @@ export default {
         depth: this.depth,
         expand: this.expand,
         previewMode: this.previewMode,
+        forceExpand: this.forceExpandMe
       },
       on: {
         'update:expand': value => {
           this.expand = value
+        },
+        'update:expandAll': value => {
+          this.expand = value
+          this.forceExpandMe = this.expand
         }
       }
     }))

lib/json-viewer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="viewer" :class="jvClass">
+  <div
+    ref="viewer"
+    :class="jvClass"
+  >
     <div 
       v-if="copyable"
       :class="`jv-tooltip ${copyText.align || 'right'}`"

lib/types/json-array.vue

@@ -18,6 +18,7 @@ export default {
     },
     sort: Boolean,
     expand: Boolean,
+    forceExpand: Boolean,
     previewMode: Boolean,
   },
   data() {
@@ -47,7 +48,13 @@ export default {
     },
     toggle() {
       this.$emit('update:expand', !this.expand)
-
+      this.dispatchEvent();
+    },
+    toggleAll() {
+      this.$emit('update:expandAll', !this.expand)
+      this.dispatchEvent();
+    },
+    dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
       } catch (e) {
@@ -56,8 +63,7 @@ export default {
         evt.initEvent('resized', true, false)
         this.$el.dispatchEvent(evt)
       }
-    },
-    
+    }
   },
   render (h) {
     let elements = []
@@ -69,7 +75,13 @@ export default {
           'open': !!this.expand,
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         }
       }))
     }
@@ -87,15 +99,13 @@ export default {
       this.value.forEach((value, key) => {
         elements.push(h(JsonBox, {
           key,
-          style: {
-            display: this.expand ? undefined : 'none'
-          },
           props: {
             sort: this.sort,
             keyName: `${key}`,
             depth: this.depth + 1,
             value,
             previewMode: this.previewMode,
+            forceExpand: this.forceExpand,
           }
         }))
       })
@@ -103,14 +113,17 @@ export default {
 
     if (!this.expand && this.value.length) {
       elements.push(h('span', {
-        style: {
-          display: undefined
-        },
         class: {
           'jv-ellipsis': true,
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         },
         attrs: {
           title: `click to reveal ${this.value.length} hidden items`

lib/types/json-object.vue

@@ -17,6 +17,7 @@ export default {
       default: 0
     },
     expand: Boolean,
+    forceExpand: Boolean,
     sort: Boolean,
     previewMode: Boolean,
   },
@@ -56,6 +57,10 @@ export default {
       this.$emit('update:expand', !this.expand)
       this.dispatchEvent();
     },
+    toggleAll() {
+      this.$emit('update:expandAll', !this.expand)
+      this.dispatchEvent();
+    },
     dispatchEvent() {
       try {
         this.$el.dispatchEvent(new Event('resized'))
@@ -77,7 +82,13 @@ export default {
           'open': !!this.expand,
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         }
       }))
     }
@@ -99,15 +110,13 @@ export default {
 
           elements.push(h(JsonBox, {
             key,
-            style: {
-              display: !this.expand ? 'none' : undefined
-            },
             props: {
               sort: this.sort,
               keyName: key,
               depth: this.depth + 1,
               value,
               previewMode: this.previewMode,
+              forceExpand: this.forceExpand,
             }
           }))
         }
@@ -116,14 +125,17 @@ export default {
 
     if (!this.expand && Object.keys(this.value).length) {
       elements.push(h('span', {
-        style: {
-          display: this.expand ? 'none' : undefined
-        },
         class: {
           'jv-ellipsis': true,
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         },
         attrs: {
           title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`