Migrate all types

lib/types/json-array.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonBox from '../json-box'
 
 export default {
@@ -57,9 +58,9 @@ export default {
         this.$el.dispatchEvent(evt)
       }
     },
-    
+
   },
-  render (h) {
+  render () {
     let elements = []
 
     if (!this.previewMode && !this.keyName) {
@@ -68,9 +69,7 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        on: {
+        onClick: this.toggle
-          click: this.toggle
-        }
       }))
     }
 
@@ -79,9 +78,7 @@ export default {
         'jv-item': true,
         'jv-array': true,
       },
-      domProps: {
+      innerText: '['
-        innerText: '['
-      }
     }))
     if (this.expand) {
       this.value.forEach((value, key) => {
@@ -90,13 +87,11 @@ export default {
           style: {
             display: this.expand ? undefined : 'none'
           },
-          props: {
+          sort: this.sort,
-            sort: this.sort,
+          // keyName: key,
-            // keyName: key,
+          depth: this.depth + 1,
-            depth: this.depth + 1,
+          value,
-            value,
+          previewMode: this.previewMode,
-            previewMode: this.previewMode,
-          }
         }))
       })
     }
@@ -109,15 +104,9 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle
+        title: `click to reveal ${this.value.length} hidden items`,
-        },
+        innerText: '...'
-        attrs: {
-          title: `click to reveal ${this.value.length} hidden items`
-        },
-        domProps: {
-          innerText: '...'
-        }
       }))
     }
 
@@ -126,9 +115,7 @@ export default {
         'jv-item': true,
         'jv-array': true,
       },
-      domProps: {
+      innerText: ']'
-        innerText: ']'
-      }
     }))
 
     return h('span', elements)

lib/types/json-boolean.vue

@@ -1,19 +1,19 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonBoolean',
   functional: true,
   props: {
     jsonValue: Boolean
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-boolean': true,
       },
-      domProps: {
+      innerText: this.jsonValue.toString()
-        innerText: props.jsonValue.toString()
-      }
     })
   }
 }

lib/types/json-date.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonDate',
   inject: ['timeformat'],
@@ -9,18 +11,16 @@ export default {
       required: true
     }
   },
-  render (h, { props, injections }) {
+  render () {
-    const value = props.jsonValue;
+    const value = this.jsonValue;
-    const timeformat = injections.timeformat;
+    const timeformat = this.timeformat;
 
     return h('span', {
       class: {
         'jv-item': true,
         'jv-string': true,
       },
-      domProps: {
+      innerText: `"${timeformat(value)}"`
-        innerText: `"${timeformat(value)}"`
-      }
     })
   }
 };

lib/types/json-function.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonFunction',
   functional: true,
@@ -8,18 +10,16 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-function': true,
       },
       attrs: {
-        title: props.jsonValue.toString()
+        title: this.jsonValue.toString()
       },
-      domProps: {
+      innerHTML: '&lt;function&gt;'
-        innerHTML: '&lt;function&gt;'
-      }
     })
   }
 }

lib/types/json-number.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonNumber',
   functional: true,
@@ -8,8 +10,8 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
+  render () {
-    const isInteger = Number.isInteger(props.jsonValue)
+    const isInteger = Number.isInteger(this.jsonValue)
 
     return h('span', {
       class: {
@@ -18,9 +20,7 @@ export default {
         'jv-number-integer': isInteger,
         'jv-number-float': !isInteger,
       },
-      domProps: {
+      innerText: this.jsonValue.toString()
-        innerText: props.jsonValue.toString()
-      }
     })
   }
 }

lib/types/json-object.vue

@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonBox from '../json-box'
 
 export default {
@@ -67,7 +68,7 @@ export default {
       }
     }
   },
-  render (h) {
+  render () {
     let elements = []
 
     if (!this.previewMode && !this.keyName) {
@@ -76,9 +77,7 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        on: {
+        onClick: this.toggle
-          click: this.toggle
-        }
       }))
     }
 
@@ -87,9 +86,7 @@ export default {
         'jv-item': true,
         'jv-object': true,
       },
-      domProps: {
+      innerText: '{'
-        innerText: '{'
-      }
     }))
 
     if (this.expand) {
@@ -102,13 +99,12 @@ export default {
             style: {
               display: !this.expand ? 'none' : undefined
             },
-            props: {
+
-              sort: this.sort,
+            sort: this.sort,
-              keyName: key,
+            keyName: key,
-              depth: this.depth + 1,
+            depth: this.depth + 1,
-              value,
+            value,
-              previewMode: this.previewMode,
+            previewMode: this.previewMode,
-            }
           }))
         }
       }
@@ -122,15 +118,9 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle
+        title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`,
-        },
+        innerText: '...'
-        attrs: {
-          title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`
-        },
-        domProps: {
-          innerText: '...'
-        }
       }))
     }
 
@@ -139,9 +129,7 @@ export default {
         'jv-item': true,
         'jv-object': true,
       },
-      domProps: {
+      innerText: '}'
-        innerText: '}'
-      }
     }))
 
     return h('span', elements)

lib/types/json-string.vue

@@ -1,5 +1,9 @@
 <script>
+import { h } from 'vue'
+
+// TODO: check?
 const REG_LINK = /^\w+:\/\//;
+// const REG_LINK =/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
 
 export default {
   name: 'JsonString',
@@ -25,7 +29,7 @@ export default {
       this.expand = !this.expand;
     }
   },
-  render (h) {
+  render () {
     let value = this.jsonValue;
     const islink = REG_LINK.test(value)
     let domItem
@@ -35,12 +39,8 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle
+        innerText: '...'
-        },
-        domProps: {
-          innerText: '...'
-        }
       };
     } else {
       domItem = {
@@ -52,16 +52,12 @@ export default {
       }
       if (islink) {
         value = `<a href="${value}" target="_blank" class="jv-link">${value}</a>`;
-        domItem.domProps = {
+        domItem.innerHTML = `"${value.toString()}"`
-          innerHTML: `"${value.toString()}"`
-        }
       } else {
-        domItem.domProps = {
+        domItem.innerText = `"${value.toString()}"`
-          innerText: `"${value.toString()}"`
-        }
       }
     }
-    
+
 
     return h('span', {}, [
       this.canExtend && h('span', {
@@ -69,9 +65,7 @@ export default {
           'jv-toggle': true,
           open: this.expand,
         },
-        on: {
+        onClick: this.toggle,
-          click: this.toggle,
-        }
       }),
       h('span', {
         class: {

lib/types/json-undefined.vue

@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonUndefined',
   functional: true,
@@ -8,15 +10,13 @@ export default {
       default: null
     }
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-undefined': true,
       },
-      domProps: {
+      innerText: this.jsonValue === null ? 'null' : 'undefined'
-        innerText: props.jsonValue === null ? 'null' : 'undefined'
-      }
     })
   }
 }