From 262d94f7e07373e0307c2156d477816ee2ff9c11 Mon Sep 17 00:00:00 2001
From: Rocco Bruyn <rocco.bruijn@clockwork.nl>
Date: Sun, 14 Jun 2020 17:40:19 +0200
Subject: [PATCH] Add support for Date's

Fixes #47
---
 example/app.js          |  8 ++++----
 lib/json-box.vue        |  9 ++++++---
 lib/types/json-date.vue | 25 +++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 lib/types/json-date.vue

diff --git a/example/app.js b/example/app.js
index 069a3cf..8aec4bb 100644
--- a/example/app.js
+++ b/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')
           }
         ]
       }
diff --git a/lib/json-box.vue b/lib/json-box.vue
index 1c9d2e2..832ed2f 100644
--- a/lib/json-box.vue
+++ b/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
       }
diff --git a/lib/types/json-date.vue b/lib/types/json-date.vue
new file mode 100644
index 0000000..80232a7
--- /dev/null
+++ b/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>