add an option to enable key sorting before display

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 |

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 {

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;
     }

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() {