[MCTB-2008] Add support for clickable fields (#1)

Author: grzegorzpro

lib/json-box.vue

@@ -33,13 +33,22 @@ export default {
       type: String,
       default: '$',
     },
+    clickable: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
       expand: true,
       forceExpandMe: this.forceExpand,
     }
   },
+  computed: {
+    thisClickable() {
+      return this.clickable && ['string', 'number', 'boolean'].includes(typeof this.value) || this.value === null;
+    },
+  },
   mounted() {
     this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true) || this.forceExpandMe
   },
@@ -149,6 +158,7 @@ export default {
         showArrayIndex: this.showArrayIndex,
         showDoubleQuotes: this.showDoubleQuotes,
         path: this.path,
+        clickable: this.clickable,
       },
       on: {
         'update:expand': value => {
@@ -157,17 +167,28 @@ export default {
         'update:expandAll': value => {
           this.expand = value
           this.forceExpandMe = this.expand
-        }
+        },
+        fieldClick: data => {
+          this.$emit('fieldClick', data);
+        },
       }
     }))
 
+    const clickHandler = {
+      click: () => {
+        this.$emit("fieldClick", {path: this.path, value: this.value});
+      },
+    };
+    const spanClass = {class: {flex: typeof this.value === 'string'}};
     return h('div', {
       class: {
         'jv-node': true,
         'jv-key-node': Boolean(this.keyName) && !complex,
-        'toggle': !this.previewMode && complex
-      }
-    }, elements)
+        'toggle': !this.previewMode && complex,
+        'jv-clickable': this.thisClickable,
+      },
+      on: this.thisClickable ? clickHandler : {},
+    }, this.thisClickable ? [h('span', spanClass, elements)] : elements)
   }
 }
 </script>
@@ -193,4 +214,15 @@ export default {
     margin-left: 25px;
   }
 }
+
+.jv-clickable span {
+  &.flex {
+    display: inline-flex;
+  }
+
+  &:hover {
+    background-color: #FFE0B2;
+    cursor: pointer;
+  }
+}
 </style>

lib/json-viewer.vue

@@ -31,7 +31,9 @@
         :preview-mode="previewMode"
         :show-array-index="showArrayIndex"
         :show-double-quotes="showDoubleQuotes"
+        :clickable="clickable"
         @keyclick="onKeyclick"
+        @fieldClick="$emit('fieldClick', $event)"
       />
     </div>
     <div 
@@ -102,7 +104,11 @@ export default {
     showDoubleQuotes: {
       type: Boolean,
       default: false,
-    }
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide () {
     return {

lib/types/json-array.vue

@@ -23,6 +23,10 @@ export default {
     showArrayIndex: Boolean,
     showDoubleQuotes: Boolean,
     path: String,
+    clickable: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -112,7 +116,13 @@ export default {
             showArrayIndex: this.showArrayIndex,
             showDoubleQuotes: this.showDoubleQuotes,
             path: `${this.path}.${key}`,
-          }
+            clickable: this.clickable,
+          },
+          on: {
+            fieldClick: (data) => {
+              this.$emit('fieldClick', data);
+            },
+          },
         }))
       })
     }

lib/types/json-object.vue

@@ -23,6 +23,10 @@ export default {
     showArrayIndex: Boolean,
     showDoubleQuotes: Boolean,
     path: String,
+    clickable: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -122,8 +126,14 @@ export default {
               forceExpand: this.forceExpand,
               showArrayIndex: this.showArrayIndex,
               showDoubleQuotes: this.showDoubleQuotes,
-              path: `${this.path}.${key}`
-            }
+              path: `${this.path}.${key}`,
+              clickable: this.clickable,
+            },
+            on: {
+              fieldClick: (data) => {
+                this.$emit('fieldClick', data);
+              },
+            },
           }))
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.2.22",
+  "version": "2.2.23",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": [
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chenfengjw163/vue-json-viewer.git"
+    "url": "git+https://github.com/nordcloud/vue-json-viewer.git"
   },
   "keywords": [
     "vue",
@@ -88,4 +88,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}