feat: fix some issues

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)
   }

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 {

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()}"`
         }