Migrate box and viewer

lib/json-box.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonString from './types/json-string'
 import JsonUndefined from './types/json-undefined'
 import JsonNumber from './types/json-number'
@@ -49,7 +50,7 @@ export default {
       }
     }
   },
-  render (h) {
+  render () {
     let elements = []
     let dataType
 
@@ -78,9 +79,7 @@ export default {
           'jv-toggle': true,
           open: !!this.expand
         },
-        on: {
-          click: this.toggle
-        }
+        onClick: this.toggle
       }))
     }
 
@@ -89,9 +88,7 @@ export default {
         class: {
           'jv-key': true
         },
-        domProps: {
-          innerText: `${this.keyName}:`
-        }
+        innerText: `${this.keyName}:`
       }))
     }
 
@@ -99,18 +96,14 @@ export default {
       class: {
         'jv-push': true
       },
-      props: {
-        jsonValue: this.value,
-        keyName: this.keyName,
-        sort: this.sort,
-        depth: this.depth,
-        expand: this.expand,
-        previewMode: this.previewMode,
-      },
-      on: {
-        'update:expand': value => {
-          this.expand = value
-        }
+      jsonValue: this.value,
+      keyName: this.keyName,
+      sort: this.sort,
+      depth: this.depth,
+      expand: this.expand,
+      previewMode: this.previewMode,
+      'onUpdate:expand': value => {
+        this.expand = value
       }
     }))
 

lib/json-viewer.vue

@@ -1,11 +1,11 @@
 <template>
   <div ref="viewer" :class="jvClass">
-    <div 
+    <div
       v-if="copyable"
       :class="`jv-tooltip ${copyText.align || 'right'}`"
     >
-      <span  
-        ref="clip" 
+      <span
+        ref="clip"
         class="jv-button"
         :class="{copied}"
       >
@@ -17,8 +17,8 @@
         </slot>
       </span>
     </div>
-    <div 
-      class="jv-code" 
+    <div
+      class="jv-code"
       :class="{'open': expandCode, boxed}"
     >
       <json-box
@@ -28,13 +28,13 @@
         :preview-mode="previewMode"
       />
     </div>
-    <div 
-      v-if="expandableCode && boxed" 
-      class="jv-more" 
+    <div
+      v-if="expandableCode && boxed"
+      class="jv-more"
       @click="toggleExpandCode"
     >
-      <span 
-        class="jv-toggle" 
+      <span
+        class="jv-toggle"
         :class="{open: !!expandCode}"
       />
     </div>
@@ -334,7 +334,7 @@ export default {
 
     &:hover {
       .jv-toggle {
-        top: 50%; 
+        top: 50%;
         color: #111;
       }