Merge branch 'develop' into vue3

README.md

@@ -160,12 +160,16 @@ 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` |
+| `show-double-quotes` | show double quotes | `false` |
+
 
 ## Listeners
 
 | Listener | Description | Value |
 | ----------- |:------------- | ----------- |
 | `copied` | Emits copyEvent after text copied | Clipboard success event |
+| `keyclick` | click key event |  |
 
 ## Slots
 
@@ -173,6 +177,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,27 @@ import 'vue-json-viewer/style.css'
 | `expanded` | 默认展开视图 | `false` |
 | `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() |
 | `preview-mode` | 不可折叠模式，默认全部展开 | `false` |
+| `show-array-index` | 是否显示数组索引 | `true` |
+| `show-double-quotes` | 展示key双引号 | `false` |
+
+
+## 事件
+
+| 事件 | 描述 | 值 |
+| ----------- |:------------- | ----------- |
+| `copied` | 复制文本后的事件 |  |
+| `keyclick` | 点击key的事件 |  |
+
+## Slots
+
+| 名称 | 描述 | Scope |
+| ----------- |:------------- | ----------- |
+| `copy` | 自定义拷贝按钮 | `{copied: boolean}` |
+
+## 快捷键
+| 名称 | 描述 | 
+| ----------- |:------------- | 
+| `alt` + click | 展开当前节点下的所有节点 | 
 
 ## 主题
 

example/App.vue

@@ -13,6 +13,9 @@
       boxed
       :timeformat="(time) => new Date(time)"
       sort
+      show-double-quotes
+      :show-array-index="false"
+      :onKeyclick="onKeyclick"
       ></json-viewer>
     <hr />
     <json-viewer
@@ -101,6 +104,9 @@ export default {
   methods: {
     onCopied(copyEvent) {
       alert(`Text successfully copied!\n${copyEvent.text}`);
+    },
+    onKeyclick(path) {
+      alert(`Key Click!\n${path}`);
     }
   }
 };

lib/json-box.vue

@@ -11,7 +11,7 @@ import JsonDate from './types/json-date'
 
 export default {
   name: 'JsonBox',
-  inject: ['expandDepth'],
+  inject: ['expandDepth', 'onKeyclick'],
   props: {
     value: {
       type: [Object, Array, String, Number, Boolean, Function, Date],
@@ -29,6 +29,11 @@ export default {
     previewMode: Boolean,
     forceExpand: Boolean,
     showArrayIndex: Boolean,
+    showDoubleQuotes: Boolean,
+    path: {
+      type: String,
+      default: '$',
+    },
   },
   data() {
     return {
@@ -117,7 +122,10 @@ export default {
         class: {
           'jv-key': true
         },
-        innerText: `${this.keyName}:`
+        innerText: this.showDoubleQuotes ? `"${this.keyName}":` : `${this.keyName}:`,
+        onClick: () => {
+          this.onKeyclick(this.path);
+        }
       }))
     }
 
@@ -133,6 +141,8 @@ export default {
       previewMode: this.previewMode,
       forceExpand: this.forceExpandMe,
       showArrayIndex: this.showArrayIndex,
+      showDoubleQuotes: this.showDoubleQuotes,
+      path: this.path,
       'onUpdate:expand': value => {
         this.expand = value
       },

lib/json-viewer.vue

@@ -30,6 +30,8 @@
         :sort="sort"
         :preview-mode="previewMode"
         :show-array-index="showArrayIndex"
+        :show-double-quotes="showDoubleQuotes"
+        @keyclick="onKeyclick"
       />
     </div>
     <div
@@ -96,12 +98,17 @@ export default {
     showArrayIndex: {
       type: Boolean,
       default: true,
+    },
+    showDoubleQuotes: {
+      type: Boolean,
+      default: false,
     }
   },
   provide () {
     return {
       expandDepth: this.expandDepth,
       timeformat: this.timeformat,
+      onKeyclick: this.onKeyclick,
     }
   },
   data () {
@@ -175,6 +182,9 @@ export default {
     },
     toggleExpandCode () {
       this.expandCode = !this.expandCode
+    },
+    onKeyclick(path) {
+      this.$emit('keyclick', path)
     }
   }
 }

lib/types/json-array.vue

@@ -22,6 +22,8 @@ export default {
     forceExpand: Boolean,
     previewMode: Boolean,
     showArrayIndex: Boolean,
+    showDoubleQuotes: Boolean,
+    path: String,
   },
   data() {
     return {
@@ -107,6 +109,8 @@ export default {
           previewMode: this.previewMode,
           forceExpand: this.forceExpand,
           showArrayIndex: this.showArrayIndex,
+          showDoubleQuotes: this.showDoubleQuotes,
+          path: `${this.path}.${key}`,
         }))
       })
     }

lib/types/json-object.vue

@@ -22,6 +22,8 @@ export default {
     sort: Boolean,
     previewMode: Boolean,
     showArrayIndex: Boolean,
+    showDoubleQuotes: Boolean,
+    path: String,
   },
   data() {
     return {
@@ -118,6 +120,8 @@ export default {
             previewMode: this.previewMode,
             forceExpand: this.forceExpand,
             showArrayIndex: this.showArrayIndex,
+            showDoubleQuotes: this.showDoubleQuotes,
+            path: `${this.path}.${key}`
           }))
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": [