+2.2.22

lib/json-box.vue

@@ -10,7 +10,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,10 @@ export default {
     forceExpand: Boolean,
     showArrayIndex: Boolean,
     showDoubleQuotes: Boolean,
+    path: {
+      type: String,
+      default: '$',
+    },
   },
   data() {
     return {
@@ -121,6 +125,11 @@ export default {
         },
         domProps: {
           innerText: this.showDoubleQuotes ? `"${this.keyName}":` : `${this.keyName}:`
+        },
+        on: {
+          click: () => {
+            this.onKeyclick(this.path);
+          }
         }
       }))
     }
@@ -139,6 +148,7 @@ export default {
         forceExpand: this.forceExpandMe,
         showArrayIndex: this.showArrayIndex,
         showDoubleQuotes: this.showDoubleQuotes,
+        path: this.path,
       },
       on: {
         'update:expand': value => {

lib/json-viewer.vue

@@ -31,6 +31,7 @@
         :preview-mode="previewMode"
         :show-array-index="showArrayIndex"
         :show-double-quotes="showDoubleQuotes"
+        @keyclick="onKeyclick"
       />
     </div>
     <div 
@@ -100,13 +101,14 @@ export default {
     },
     showDoubleQuotes: {
       type: Boolean,
-      default: true,
+      default: false,
     }
   },
   provide () {
     return {
       expandDepth: this.expandDepth,
       timeformat: this.timeformat,
+      onKeyclick: this.onKeyclick,
     }
   },
   data () {
@@ -180,6 +182,9 @@ export default {
     },
     toggleExpandCode () {
       this.expandCode = !this.expandCode
+    },
+    onKeyclick(path) {
+      this.$emit('keyclick', path)
     }
   }
 }

lib/types/json-array.vue

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

lib/types/json-object.vue

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