From 2808975c75825eb163f2669dff7214b8660b5b05 Mon Sep 17 00:00:00 2001 From: STAFYNIAK Sacha Date: Mon, 17 Sep 2018 05:44:37 +0200 Subject: [PATCH 01/15] add support for 'null' values in json objects --- examples/app.js | 5 +++-- json-box.vue | 5 ++++- types/json-null.vue | 18 ++++++++++++++++++ 3 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 types/json-null.vue diff --git a/examples/app.js b/examples/app.js index cf90e20..cdbfcec 100644 --- a/examples/app.js +++ b/examples/app.js @@ -15,10 +15,11 @@ new Vue({ b: 'a', a: 'hello word', asd2: 1, - asd: false + asd: false, + foo: null } } } }, components: {JsonViewer} -}) \ No newline at end of file +}) diff --git a/json-box.vue b/json-box.vue index 9857f48..7fa6ad3 100644 --- a/json-box.vue +++ b/json-box.vue @@ -11,6 +11,7 @@ + + From f0ce8278c96fb2907c9413e15dec982a20d10b29 Mon Sep 17 00:00:00 2001 From: STAFYNIAK Sacha Date: Mon, 17 Sep 2018 05:53:02 +0200 Subject: [PATCH 02/15] add support for 'function' values in json objects --- README.md | 11 ++++++----- examples/app.js | 3 ++- json-box.vue | 3 +++ types/json-function.vue | 18 ++++++++++++++++++ 4 files changed, 29 insertions(+), 6 deletions(-) create mode 100644 types/json-function.vue diff --git a/README.md b/README.md index 4657c7a..5a5b5d6 100644 --- a/README.md +++ b/README.md @@ -4,19 +4,19 @@ Simple json display component, based on vue ## Installing: Using npm: -``` +``` $ npm install vue-json-viewer ``` Using bower: -``` +``` $ yarn add vue-json-viewer ``` ## Example: -``` html +``` html ``` @@ -31,6 +31,7 @@ export default { {key: 'hello word'}, ], val: { + c: () = {}, b: 'a', a: 'hello word', asd2: 1, @@ -42,12 +43,12 @@ export default { } ``` ## Result: -![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png) +![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png) ## Options: -| Property | Description | +| Property | Description | | ----------- |:-------------| | value | json data | | show-copy | display the copy button | diff --git a/examples/app.js b/examples/app.js index cf90e20..5b5e1de 100644 --- a/examples/app.js +++ b/examples/app.js @@ -12,6 +12,7 @@ new Vue({ {key: 'hello word'}, ], val: { + c: () = {}, b: 'a', a: 'hello word', asd2: 1, @@ -21,4 +22,4 @@ new Vue({ } }, components: {JsonViewer} -}) \ No newline at end of file +}) diff --git a/json-box.vue b/json-box.vue index 9857f48..b79ae86 100644 --- a/json-box.vue +++ b/json-box.vue @@ -15,6 +15,7 @@ import JsonNumber from './types/json-number'; import JsonBoolean from './types/json-boolean'; import JsonObject from './types/json-object'; import JsonArray from './types/json-array'; +import JsonFunction from './types/json-function'; export default { name: 'JsonBox', @@ -44,6 +45,8 @@ export default { return 'String'; } else if (typeof this.value === 'boolean') { return 'Boolean'; + } else if (typeof this.value === 'function') { + return 'Function'; } }, isObject() { diff --git a/types/json-function.vue b/types/json-function.vue new file mode 100644 index 0000000..af50ffb --- /dev/null +++ b/types/json-function.vue @@ -0,0 +1,18 @@ + + + + + From 614a37caf269f29be76d151d6eec0e10035c856a Mon Sep 17 00:00:00 2001 From: STAFYNIAK Sacha Date: Mon, 17 Sep 2018 05:58:30 +0200 Subject: [PATCH 03/15] add support for 'undefined' values in json objects --- json-box.vue | 2 +- types/json-null.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/json-box.vue b/json-box.vue index 7fa6ad3..7a95910 100644 --- a/json-box.vue +++ b/json-box.vue @@ -35,7 +35,7 @@ export default { }, computed: { valueType() { - if (this.value === null) { + if (this.value === null || this.value === undefined) { return 'Null'; } else if (Array.isArray(this.value)) { return 'Array'; diff --git a/types/json-null.vue b/types/json-null.vue index 7e5768f..b424821 100644 --- a/types/json-null.vue +++ b/types/json-null.vue @@ -1,5 +1,5 @@ From 02c69c472caa1b0358f2796366ffe9c367d2552c Mon Sep 17 00:00:00 2001 From: STAFYNIAK Sacha Date: Mon, 17 Sep 2018 07:31:45 +0200 Subject: [PATCH 09/15] add an option to enable key sorting before display --- README.md | 28 +++++++++++++++++----------- json-box.vue | 5 +++-- json-viewer.vue | 10 +++++++--- types/json-object.vue | 18 +++++++++++++++--- 4 files changed, 42 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 4657c7a..16602a1 100644 --- a/README.md +++ b/README.md @@ -4,20 +4,25 @@ Simple json display component, based on vue ## Installing: Using npm: -``` +``` $ npm install vue-json-viewer ``` Using bower: -``` +``` $ yarn add vue-json-viewer ``` ## Example: -``` html - +``` html + ``` ``` js @@ -42,14 +47,15 @@ export default { } ``` ## Result: -![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png) +![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png) ## Options: -| Property | Description | -| ----------- |:-------------| -| value | json data | -| show-copy | display the copy button | -| show-bigger | display the bigger button | -| icon-prefix | Custom Font icon prefix | +| Property | Description | +| ----------- |:------------- | +| value | json data | +| show-copy | display the copy button | +| show-bigger | display the bigger button | +| icon-prefix | Custom Font icon prefix | +| sort-keys | Sort items by key names | diff --git a/json-box.vue b/json-box.vue index 9857f48..f806b87 100644 --- a/json-box.vue +++ b/json-box.vue @@ -4,7 +4,7 @@ {{keyName}}: - + @@ -20,7 +20,8 @@ export default { name: 'JsonBox', props: { value: [Object, Array, String, Number, Boolean], - keyName: String + keyName: String, + sortKeys: Boolean }, data() { return { diff --git a/json-viewer.vue b/json-viewer.vue index 0b22c1b..47d17a2 100644 --- a/json-viewer.vue +++ b/json-viewer.vue @@ -6,7 +6,7 @@
- +
@@ -38,6 +38,10 @@ export default { iconPrefix: { type: String, default: '' + }, + sortKeys: { + type: Boolean, + default: true } }, provide() { @@ -105,7 +109,7 @@ export default { margin-bottom: 15px; } } - + .more-code { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; @@ -148,7 +152,7 @@ export default { font-size: 18px; } } - + .j-icon { font-size: 12px; } diff --git a/types/json-object.vue b/types/json-object.vue index 96c0136..9fb9795 100644 --- a/types/json-object.vue +++ b/types/json-object.vue @@ -2,8 +2,8 @@ { -