2
0
mirror of https://github.com/tenrok/vue-json-viewer.git synced 2026-06-23 20:40:38 +03:00

Add support for Date's

Fixes #47
This commit is contained in:
Rocco Bruyn
2020-06-14 17:40:19 +02:00
parent d27a9f7f3e
commit 262d94f7e0
3 changed files with 35 additions and 7 deletions
+4 -4
View File
@@ -71,8 +71,8 @@ new Vue({
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, 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. 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.`, 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', bornAt: new Date('1815-12-10T00:00:00.000Z'),
diedAt: '1852-11-27T00:00:00.000Z' diedAt: new Date('1852-11-27T00:00:00.000Z')
}, { }, {
id: '5968fcad629fa84ab65a5246', id: '5968fcad629fa84ab65a5246',
firstname: 'Grace', 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 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, 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.`, an early high-level programming language still in use today.`,
bornAt: '1815-12-10T00:00:00.000Z', bornAt: new Date('1815-12-10T00:00:00.000Z'),
diedAt: '1852-11-27T00:00:00.000Z' diedAt: new Date('1852-11-27T00:00:00.000Z')
} }
] ]
} }
+5 -2
View File
@@ -6,13 +6,14 @@ import JsonBoolean from './types/json-boolean'
import JsonObject from './types/json-object' import JsonObject from './types/json-object'
import JsonArray from './types/json-array' import JsonArray from './types/json-array'
import JsonFunction from './types/json-function' import JsonFunction from './types/json-function'
import JsonDate from './types/json-date'
export default { export default {
name: 'JsonBox', name: 'JsonBox',
inject: ['expandDepth'], inject: ['expandDepth'],
props: { props: {
value: { value: {
type: [Object, Array, String, Number, Boolean, Function], type: [Object, Array, String, Number, Boolean, Function, Date],
default: null default: null
}, },
keyName: { keyName: {
@@ -55,6 +56,8 @@ export default {
dataType = JsonUndefined dataType = JsonUndefined
} else if (Array.isArray(this.value)) { } else if (Array.isArray(this.value)) {
dataType = JsonArray dataType = JsonArray
} else if (Object.prototype.toString.call(this.value) === '[object Date]') {
dataType = JsonDate
} else if (typeof this.value === 'object') { } else if (typeof this.value === 'object') {
dataType = JsonObject dataType = JsonObject
} else if (typeof this.value === 'number') { } else if (typeof this.value === 'number') {
@@ -66,7 +69,7 @@ export default {
} else if (typeof this.value === 'function') { } else if (typeof this.value === 'function') {
dataType = JsonFunction 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) { if (toggle) {
elements.push(h('span', { elements.push(h('span', {
+25
View File
@@ -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>