From 02c69c472caa1b0358f2796366ffe9c367d2552c Mon Sep 17 00:00:00 2001
From: STAFYNIAK Sacha <sacha.st@live.fr>
Date: Mon, 17 Sep 2018 07:31:45 +0200
Subject: [PATCH] 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 
-<json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
+``` html
+<json-viewer
+  :value="jsonData"
+  :show-copy="true"
+  icon-prefix="ion"
+  :show-bigger="true"
+  :sort-keys="true" />
 ```
 
 ``` 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 @@
             <j-icon v-if="isObject" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggleNode"></j-icon>
             {{keyName}}:
         </span>
-        <commponent :is="`Json${valueType}`" :json-value="value" v-model="toggle" :key-name="keyName"></commponent>
+        <commponent :is="`Json${valueType}`" :json-value="value" v-model="toggle" :key-name="keyName" :sort-keys="sortKeys"></commponent>
     </div>
 </template>
 
@@ -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 @@
             <j-icon v-if="showCopy && !copied" class="copy" type="clipboard" @click="clip"></j-icon>
         </div>
         <div class="code-box" :class="{'more': moreCode}">
-            <json-box :value="value" :key-name="keyName"></json-box>
+            <json-box :value="value" :key-name="keyName" :sort-keys="sortKeys"></json-box>
         </div>
         <div class="more-code" @click="toggleMoreCode">
             <j-icon :type="moreCode ? 'ios-arrow-up' : 'ios-arrow-down'"></j-icon>
@@ -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 @@
     <span>
         <j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
         <span>{</span>
-        <template v-if="Object.keys(jsonValue).length">
-            <json-box v-show="value" v-for="(v, k) in jsonValue" :key="k" :key-name="k" :value="v"></json-box>
+        <template v-if="Object.keys(ordered).length">
+            <json-box v-show="value" v-for="(v, k) in ordered" :key="k" :key-name="k" :value="v"></json-box>
             <span v-show="!value" class="node-ellipsis">...</span>
         </template>
         <span>}</span>
@@ -17,7 +17,19 @@ export default {
     props: {
         jsonValue: Object,
         keyName: String,
-        value: Boolean
+        value: Boolean,
+        sortKeys: Boolean
+    },
+    computed: {
+      ordered () {
+        const ordered = {};
+        if (this.sortKeys) {
+          Object.keys(this.jsonValue).sort().forEach(function(key) {
+            ordered[key] = this.jsonValue[key];
+          });
+        }
+        return ordered;
+      }
     },
     methods: {
         toggle() {