From 6e7c4eb113919b55f998546544633dab3afdf6e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B3=B0?= <chenfengjw@gmail.com>
Date: Fri, 31 May 2019 22:53:11 +0800
Subject: [PATCH] highlight links & fix some issue

---
 example/app.js            |  3 ++-
 lib/json-viewer.vue       | 35 +++++++++++++++++------------------
 lib/types/json-object.vue |  2 +-
 lib/types/json-string.vue | 10 +++++++++-
 package.json              |  2 +-
 5 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/example/app.js b/example/app.js
index 6f76a98..06a95d4 100644
--- a/example/app.js
+++ b/example/app.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import JsonViewer from '../vue-json-viewer'
+import JsonViewer from '../lib'
 
 Vue.use(JsonViewer)
 
@@ -34,6 +34,7 @@ new Vue({
           {
             id: '5968fcad629fa84ab65a5247',
             firstname: 'Ada',
+            link: 'http://google.com',
             lastname: 'Lovelace',
             awards: null,
             known: [
diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue
index e937eef..6226a9c 100644
--- a/lib/json-viewer.vue
+++ b/lib/json-viewer.vue
@@ -8,7 +8,6 @@
         ref="clip" 
         class="jv-button"
         :class="{copied}"
-        @click="clip" 
       >{{ copied ? 'copied!' : 'copy' }}</span>
     </div>
     <div 
@@ -97,6 +96,16 @@ export default {
       this.onResized()
       this.$refs.jsonBox.$el.addEventListener("resized", this.onResized, true)
     }
+    if (this.copyable) {
+      const clipBoard = new Clipboard(this.$refs.clip, {
+        text: () => {
+          return JSON.stringify(this.value, null, 2)
+        }
+      });
+      clipBoard.on('success', () => {
+        this.onCopied()
+      })
+    }
   },
   methods: {
     onResized () {
@@ -108,25 +117,15 @@ export default {
         }
       })
     },
-    clip () {
+    onCopied() {
       if (this.copied) {
-        return
+        return;
       }
-
-      const clipBoard = new Clipboard(this.$refs.clip, {
-        text: () => {
-          return JSON.stringify(this.value, null, 2)
-        }
-      })
-
-      clipBoard.on('success', () => {
-        this.copied = true
-        setTimeout(() => {
-          this.copied = false
-        }, 2000)
-        this.$emit('copied')
-        clipBoard.destroy()
-      })
+      this.copied = true
+      setTimeout(() => {
+        this.copied = false
+      }, 2000)
+      this.$emit('copied')
     },
     toggleExpandCode () {
       this.expandCode = !this.expandCode
diff --git a/lib/types/json-object.vue b/lib/types/json-object.vue
index 62bbddd..729bd9e 100644
--- a/lib/types/json-object.vue
+++ b/lib/types/json-object.vue
@@ -26,7 +26,7 @@ export default {
       }
 
       const ordered = {}
-      Object.keys(this.jsonValue).sort().forEach(key => {
+      Object.keys(this.jsonValue).forEach(key => {
         ordered[key] = this.jsonValue[key]
       })
       return ordered
diff --git a/lib/types/json-string.vue b/lib/types/json-string.vue
index be39379..8faf941 100644
--- a/lib/types/json-string.vue
+++ b/lib/types/json-string.vue
@@ -1,4 +1,6 @@
 <script>
+const REG_LINK = /^\w+:\/\//;
+
 export default {
   name: 'JsonString',
   functional: true,
@@ -9,13 +11,19 @@ export default {
     }
   },
   render (h, { props }) {
+    let value = props.jsonValue;
+    
+    if (REG_LINK.test(value)) {
+      value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+    }
+
     return h('span', {
       class: {
         'jv-item': true,
         'jv-string': true,
       },
       domProps: {
-        innerHTML: `"${props.jsonValue.toString()}"`
+        innerHTML: `"${value.toString()}"`
       }
     })
   }
diff --git a/package.json b/package.json
index 4a7dc0a..687fe78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": [