From 054b4089c7f87fe9c789289cad1a13cde4f5268d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A3=8E=E6=A3=8B?= <fengqi.cf@antfin.com>
Date: Wed, 13 Jan 2021 20:18:08 +0800
Subject: [PATCH] feat: fix some issues

---
 History.md                |  6 ++++++
 example/app.css           |  3 +++
 example/app.js            |  6 ++++--
 lib/json-box.vue          |  7 ++++---
 lib/json-viewer.vue       | 22 ++++++++++++++++------
 lib/types/json-string.vue |  2 +-
 package.json              |  2 +-
 7 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/History.md b/History.md
index 7f5a57b..ac175ad 100644
--- a/History.md
+++ b/History.md
@@ -1,5 +1,11 @@
 ## 2.2.17 2020-12-29
 
+- fix: issues  [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/64)
+- fix: issues  [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/65)
+- fix: issues  [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/66)
+
+## 2.2.17 2020-12-29
+
 - fix: long string expand arrow display error  [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/62)
 
 ## 2.2.16 2020-11-13
diff --git a/example/app.css b/example/app.css
index acce3ab..06dea9f 100644
--- a/example/app.css
+++ b/example/app.css
@@ -1,3 +1,6 @@
 .jv-number-float {
   color: #faa !important;
+}
+.jv-key-node {
+  display: flex;
 }
\ No newline at end of file
diff --git a/example/app.js b/example/app.js
index 40ea7d2..5500ea1 100644
--- a/example/app.js
+++ b/example/app.js
@@ -36,7 +36,8 @@ new Vue({
           expand-depth={5}
           copyable={{
             copyText: '复制',
-            copiedText: '复制成功'
+            copiedText: '复制成功',
+            align: 'left'
           }}
           boxed
           timeformat={time => new Date(time)}
@@ -46,7 +47,8 @@ new Vue({
           value={this.jsonData}
           expand-depth={1}
           copyable={{
-            timeout: 4000
+            timeout: 4000,
+            align: 'left'
           }}
           scopedSlots={scopedSlots}
           onCopied={onCopied}></json-viewer>
diff --git a/lib/json-box.vue b/lib/json-box.vue
index 53ebf6c..c4bd53f 100644
--- a/lib/json-box.vue
+++ b/lib/json-box.vue
@@ -70,9 +70,9 @@ export default {
     } else if (typeof this.value === 'function') {
       dataType = JsonFunction
     }
-    const toggle = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
+    const complex = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
 
-    if (!this.previewMode && toggle) {
+    if (!this.previewMode && complex) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -117,7 +117,8 @@ export default {
     return h('div', {
       class: {
         'jv-node': true,
-        'toggle': !this.previewMode && toggle
+        'jv-key-node': Boolean(this.keyName) && !complex,
+        'toggle': !this.previewMode && complex
       }
     }, elements)
   }
diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue
index aa4181f..9250d6a 100644
--- a/lib/json-viewer.vue
+++ b/lib/json-viewer.vue
@@ -2,7 +2,7 @@
   <div :class="jvClass">
     <div 
       v-if="copyable"
-      class="jv-tooltip"
+      :class="`jv-tooltip ${copyText.align || 'right'}`"
     >
       <span  
         ref="clip" 
@@ -108,12 +108,13 @@ export default {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
     },
     copyText() {
-      const { copyText, copiedText, timeout } = this.copyable
+      const { copyText, copiedText, timeout, align } = this.copyable
 
       return {
         copyText: copyText || 'copy',
         copiedText: copiedText || 'copied!',
-        timeout: timeout || 2000
+        timeout: timeout || 2000,
+        align,
       }
     }
   },
@@ -236,6 +237,10 @@ export default {
         color: #42b983;
         word-break: break-word;
         white-space: normal;
+
+        .jv-link {
+          color: #0366d6;
+        }
       }
     }
     .jv-code {
@@ -255,7 +260,7 @@ export default {
 
   .jv-code {
     overflow: hidden;
-    padding: 20px;
+    padding: 30px 20px;
 
     &.boxed {
       max-height: 300px;
@@ -357,8 +362,13 @@ export default {
 
   .jv-tooltip {
     position: absolute;
-    right: 15px;
-    top: 10px;
+
+    &.right {
+      right: 15px;
+    }
+    &.left {
+      left: 15px;
+    }
   }
 
   .j-icon {
diff --git a/lib/types/json-string.vue b/lib/types/json-string.vue
index 1b322c2..706baad 100644
--- a/lib/types/json-string.vue
+++ b/lib/types/json-string.vue
@@ -51,7 +51,7 @@ export default {
         ref: 'itemRef',
       }
       if (islink) {
-        value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+        value = `<a href="${value}" target="_blank" class="jv-link">${value}</a>`;
         domItem.domProps = {
           innerHTML: `"${value.toString()}"`
         }
diff --git a/package.json b/package.json
index eaffbb2..78489f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": [