Merge pull request #85 from chenfengjw163/develop

Develop

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:

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 | 展开当前节点下的所有节点 | 
 
 ## 主题
 

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 />

lib/json-box.vue

@@ -26,19 +26,31 @@ export default {
       default: 0
     },
     previewMode: Boolean,
+    forceExpand: Boolean,
+    showArrayIndex: 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 +76,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 +102,13 @@ export default {
           open: !!this.expand
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         }
       }))
     }
@@ -117,10 +135,16 @@ export default {
         depth: this.depth,
         expand: this.expand,
         previewMode: this.previewMode,
+        forceExpand: this.forceExpandMe,
+        showArrayIndex: this.showArrayIndex,
       },
       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'}`"
@@ -26,6 +29,7 @@
         :value="value"
         :sort="sort"
         :preview-mode="previewMode"
+        :show-array-index="showArrayIndex"
       />
     </div>
     <div 
@@ -88,6 +92,10 @@ export default {
     previewMode: {
       type: Boolean,
       default: false,
+    },
+    showArrayIndex: {
+      type: Boolean,
+      default: true,
     }
   },
   provide () {

lib/types/json-array.vue

@@ -18,7 +18,9 @@ export default {
     },
     sort: Boolean,
     expand: Boolean,
+    forceExpand: Boolean,
     previewMode: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -47,7 +49,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 +64,7 @@ export default {
         evt.initEvent('resized', true, false)
         this.$el.dispatchEvent(evt)
       }
-    },
-    
+    }
   },
   render (h) {
     let elements = []
@@ -69,7 +76,13 @@ export default {
           'open': !!this.expand,
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         }
       }))
     }
@@ -87,15 +100,14 @@ export default {
       this.value.forEach((value, key) => {
         elements.push(h(JsonBox, {
           key,
-          style: {
-            display: this.expand ? undefined : 'none'
-          },
           props: {
             sort: this.sort,
-            keyName: `${key}`,
+            keyName: this.showArrayIndex ? `${key}`: '',
             depth: this.depth + 1,
             value,
             previewMode: this.previewMode,
+            forceExpand: this.forceExpand,
+            showArrayIndex: this.showArrayIndex,
           }
         }))
       })
@@ -103,14 +115,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,8 +17,10 @@ export default {
       default: 0
     },
     expand: Boolean,
+    forceExpand: Boolean,
     sort: Boolean,
     previewMode: Boolean,
+    showArrayIndex: Boolean,
   },
   data() {
     return {
@@ -56,6 +58,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 +83,13 @@ export default {
           'open': !!this.expand,
         },
         on: {
-          click: this.toggle
+          click: (event) => {
+            if (event.altKey) {
+              this.toggleAll()
+            } else {
+              this.toggle()
+            }
+          }
         }
       }))
     }
@@ -99,15 +111,14 @@ 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,
+              showArrayIndex: this.showArrayIndex,
             }
           }))
         }
@@ -116,14 +127,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(', ')})`

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"],