From 6c1da0769a17745fa7b002af4628915d5f8a8e2a Mon Sep 17 00:00:00 2001
From: Maksim Lanin <mslanin@avito.ru>
Date: Fri, 17 Dec 2021 16:43:16 +0300
Subject: [PATCH 1/4] Add ability to expand full branch

---
 lib/json-box.vue          | 30 ++++++++++++++++++++++++++----
 lib/json-viewer.vue       |  5 ++++-
 lib/types/json-array.vue  | 35 ++++++++++++++++++++++++-----------
 lib/types/json-object.vue | 28 ++++++++++++++++++++--------
 4 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/lib/json-box.vue b/lib/json-box.vue
index fb622e2..1c4b23c 100644
--- a/lib/json-box.vue
+++ b/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
         }
       }
     }))
diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue
index 1519c78..3f31385 100644
--- a/lib/json-viewer.vue
+++ b/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'}`"
diff --git a/lib/types/json-array.vue b/lib/types/json-array.vue
index c2b40fb..946a6a6 100644
--- a/lib/types/json-array.vue
+++ b/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`
diff --git a/lib/types/json-object.vue b/lib/types/json-object.vue
index 24415f9..be645cd 100644
--- a/lib/types/json-object.vue
+++ b/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(', ')})`

From 343bad03b4c5a03d1e785b354319347df4b4754c Mon Sep 17 00:00:00 2001
From: "fengqi.cf" <fengqi.cf@antfin.com>
Date: Sat, 18 Dec 2021 15:43:44 +0800
Subject: [PATCH 2/4] feat: support showArrayIndex

---
 example/app.js            | 1 +
 lib/json-box.vue          | 4 +++-
 lib/json-viewer.vue       | 5 +++++
 lib/types/json-array.vue  | 4 +++-
 lib/types/json-object.vue | 2 ++
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/example/app.js b/example/app.js
index 5500ea1..4409a71 100644
--- a/example/app.js
+++ b/example/app.js
@@ -40,6 +40,7 @@ new Vue({
             align: 'left'
           }}
           boxed
+          show-array-index={false}
           timeformat={time => new Date(time)}
           sort></json-viewer>
         <hr />
diff --git a/lib/json-box.vue b/lib/json-box.vue
index 1c4b23c..8afb4bf 100644
--- a/lib/json-box.vue
+++ b/lib/json-box.vue
@@ -27,6 +27,7 @@ export default {
     },
     previewMode: Boolean,
     forceExpand: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -134,7 +135,8 @@ export default {
         depth: this.depth,
         expand: this.expand,
         previewMode: this.previewMode,
-        forceExpand: this.forceExpandMe
+        forceExpand: this.forceExpandMe,
+        showArrayIndex: this.showArrayIndex,
       },
       on: {
         'update:expand': value => {
diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue
index 3f31385..5365041 100644
--- a/lib/json-viewer.vue
+++ b/lib/json-viewer.vue
@@ -29,6 +29,7 @@
         :value="value"
         :sort="sort"
         :preview-mode="previewMode"
+        :show-array-index="showArrayIndex"
       />
     </div>
     <div 
@@ -91,6 +92,10 @@ export default {
     previewMode: {
       type: Boolean,
       default: false,
+    },
+    showArrayIndex: {
+      type: Boolean,
+      default: true,
     }
   },
   provide () {
diff --git a/lib/types/json-array.vue b/lib/types/json-array.vue
index 946a6a6..4b789b0 100644
--- a/lib/types/json-array.vue
+++ b/lib/types/json-array.vue
@@ -20,6 +20,7 @@ export default {
     expand: Boolean,
     forceExpand: Boolean,
     previewMode: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -101,11 +102,12 @@ export default {
           key,
           props: {
             sort: this.sort,
-            keyName: `${key}`,
+            keyName: this.showArrayIndex ? `${key}`: '',
             depth: this.depth + 1,
             value,
             previewMode: this.previewMode,
             forceExpand: this.forceExpand,
+            showArrayIndex: this.showArrayIndex,
           }
         }))
       })
diff --git a/lib/types/json-object.vue b/lib/types/json-object.vue
index be645cd..77644e7 100644
--- a/lib/types/json-object.vue
+++ b/lib/types/json-object.vue
@@ -20,6 +20,7 @@ export default {
     forceExpand: Boolean,
     sort: Boolean,
     previewMode: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -117,6 +118,7 @@ export default {
               value,
               previewMode: this.previewMode,
               forceExpand: this.forceExpand,
+              showArrayIndex: this.showArrayIndex,
             }
           }))
         }

From 15c590580dd06eb8593b280379650fd90cc56ed3 Mon Sep 17 00:00:00 2001
From: "fengqi.cf" <fengqi.cf@antfin.com>
Date: Sat, 18 Dec 2021 16:13:10 +0800
Subject: [PATCH 3/4] feat: 2.2.21

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7d0047b..06c76b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": ["vue-json-viewer.js", "ssr.js", "style.css"],

From a2114f64f0e7ad0003b30f6627d7e09f2d568d9d Mon Sep 17 00:00:00 2001
From: "fengqi.cf" <fengqi.cf@antfin.com>
Date: Sat, 18 Dec 2021 16:21:04 +0800
Subject: [PATCH 4/4] feat: RM

---
 README.md    |  7 +++++++
 README_CN.md | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/README.md b/README.md
index 59aa593..a97e290 100644
--- a/README.md
+++ b/README.md
@@ -160,6 +160,8 @@ import 'vue-json-viewer/style.css'
 | `expanded` | Default expand the view | `false` |
 | `timeformat` | custom time format function | time => time.toLocaleString() |
 | `preview-mode` | no expand mode | `false` |
+| `show-array-index` | array show index | `true` |
+
 
 ## Listeners
 
@@ -173,6 +175,11 @@ import 'vue-json-viewer/style.css'
 | ----------- |:------------- | ----------- |
 | `copy` | Custom content for copy button | `{copied: boolean}` |
 
+## shortcut keys
+| Name | Description | Scope |
+| ----------- |:------------- | ----------- |
+| `alt` + click | expand all node |  |
+
 ## Theming
 
 To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps:
diff --git a/README_CN.md b/README_CN.md
index 48811bf..68e1f64 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -154,6 +154,25 @@ import 'vue-json-viewer/style.css'
 | `expanded` | 默认展开视图 | `false` |
 | `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() |
 | `preview-mode` | 不可折叠模式，默认全部展开 | `false` |
+| `show-array-index` | 是否显示数组索引 | `true` |
+
+
+## 事件
+
+| 事件 | 描述 | 值 |
+| ----------- |:------------- | ----------- |
+| `copied` | 复制文本后的事件 |  |
+
+## Slots
+
+| 名称 | 描述 | Scope |
+| ----------- |:------------- | ----------- |
+| `copy` | 自定义拷贝按钮 | `{copied: boolean}` |
+
+## 快捷键
+| 名称 | 描述 | 
+| ----------- |:------------- | 
+| `alt` + click | 展开当前节点下的所有节点 | 
 
 ## 主题