Merge pull request #48 from rokkie/date-support

Add support for Date's

example/app.js

@@ -71,8 +71,8 @@ new Vue({
             the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
             and published the first algorithm intended to be carried out by such a machine.
             As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
-            bornAt: '1815-12-10T00:00:00.000Z',
-            diedAt: '1852-11-27T00:00:00.000Z'
+            bornAt: new Date('1815-12-10T00:00:00.000Z'),
+            diedAt: new Date('1852-11-27T00:00:00.000Z')
           }, {
             id: '5968fcad629fa84ab65a5246',
             firstname: 'Grace',
@@ -99,8 +99,8 @@ new Vue({
             she was a pioneer of computer programming who invented one of the first compiler related tools.
             She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
             an early high-level programming language still in use today.`,
-            bornAt: '1815-12-10T00:00:00.000Z',
-            diedAt: '1852-11-27T00:00:00.000Z'
+            bornAt: new Date('1815-12-10T00:00:00.000Z'),
+            diedAt: new Date('1852-11-27T00:00:00.000Z')
           }
         ]
       }

lib/json-box.vue

@@ -6,13 +6,14 @@ import JsonBoolean from './types/json-boolean'
 import JsonObject from './types/json-object'
 import JsonArray from './types/json-array'
 import JsonFunction from './types/json-function'
+import JsonDate from './types/json-date'
 
 export default {
   name: 'JsonBox',
   inject: ['expandDepth'],
   props: {
     value: {
-      type: [Object, Array, String, Number, Boolean, Function],
+      type: [Object, Array, String, Number, Boolean, Function, Date],
       default: null
     },
     keyName: {
@@ -55,6 +56,8 @@ export default {
       dataType = JsonUndefined
     } else if (Array.isArray(this.value)) {
       dataType = JsonArray
+    } else if (Object.prototype.toString.call(this.value) === '[object Date]') {
+      dataType = JsonDate
     } else if (typeof this.value === 'object') {
       dataType = JsonObject
     } else if (typeof this.value === 'number') {
@@ -66,7 +69,7 @@ export default {
     } else if (typeof this.value === 'function') {
       dataType = JsonFunction
     }
-    const toggle = this.keyName && (this.value && (Array.isArray(this.value) || typeof this.value === 'object'))
+    const toggle = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
 
     if (toggle) {
       elements.push(h('span', {
@@ -110,7 +113,7 @@ export default {
     }))
 
     return h('div', {
-      class: { 
+      class: {
         'jv-node': true,
         'toggle': toggle
       }

lib/types/json-date.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+  name: 'JsonDate',
+  functional: true,
+  props: {
+    jsonValue: {
+      type: Date,
+      required: true
+    }
+  },
+  render (h, { props }) {
+    const value = props.jsonValue;
+
+    return h('span', {
+      class: {
+        'jv-item': true,
+        'jv-string': true,
+      },
+      domProps: {
+        innerText: `"${value.toLocaleString()}"`
+      }
+    })
+  }
+};
+</script>