rework of code extandable display + remove dependancy on ionicons + README & example

lib/types/json-array.vue

@@ -1,13 +1,23 @@
 <template>
-    <span>
-        <span class="jv-toggle" :class="{open: !!value}" v-if="!keyName" @click.stop="toggle"></span>
-        <span class="jv-item jv-array">[</span>
-        <template v-if="jsonValue.length">
-            <json-box v-show="value" v-for="(val, index) in jsonValue" :key="index" :value="val"></json-box>
-            <span v-show="!value" class="jv-ellipsis" @click.stop="toggle">...</span>
-        </template>
-        <span class="jv-item jv-array"Z>]</span>
-    </span>
+  <span>
+    <span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
+    <span class="jv-item jv-array">[</span>
+    <template v-if="jsonValue.length">
+      <json-box
+        v-show="expand"
+        v-for="(val, index) in ordered"
+        :sort="sort"
+        :key="index"
+        :value="val"
+        :depth="depth + 1"></json-box>
+      <span
+        v-show="!expand"
+        class="jv-ellipsis"
+        @click.stop="toggle"
+        :title="!expand ? `click to reveal ${jsonValue.length} hidden items` : ''">...</span>
+    </template>
+    <span class="jv-item jv-array"Z>]</span>
+  </span>
 </template>
 
 <script>
@@ -16,16 +26,32 @@ export default {
   props: {
     jsonValue: Array,
     keyName: String,
-    value: Boolean
+    sort: Boolean,
+    expand: Boolean,
+    depth: Number
+  },
+  computed: {
+    ordered () {
+      if (!this.sort) {
+        return this.jsonValue
+      }
+
+      return this.jsonValue.sort()
+    }
   },
   methods: {
     toggle() {
-      this.$emit('input', !this.value);
+      this.$emit('update:expand', !this.expand)
+
+      try {
+        this.$el.dispatchEvent(new Event("resized"))
+      } catch (e) {
+        // handle IE not supporting Event constructor
+        var evt = document.createEvent("Event")
+        evt.initEvent("resized", true, false)
+        this.$el.dispatchEvent(evt)
+      }
     }
   }
-};
+}
 </script>
-
-<style>
-
-</style>

lib/types/json-boolean.vue

@@ -1,18 +1,12 @@
 <template>
-    <span class="jv-item jv-boolean">{{jsonValue}}</span>
+  <span class="jv-item jv-boolean">{{jsonValue}}</span>
 </template>
 
 <script>
 export default {
-    name: 'JsonBoolean',
-    props: {
-        jsonValue: Boolean
-    }
-};
-</script>
-
-<style lang="scss">
-.json-boolean {
-    color: #fc1e70;
+  name: 'JsonBoolean',
+  props: {
+    jsonValue: Boolean
+  }
 }
-</style>
+</script>

lib/types/json-function.vue

@@ -1,18 +1,12 @@
 <template>
-    <span class="jv-item jv-function">&lt;function&gt;</span>
+  <span class="jv-item jv-function">&lt;function&gt;</span>
 </template>
 
 <script>
 export default {
-    name: 'JsonFunction',
-    props: {
-        jsonValue: Function
-    }
-};
-</script>
-
-<style lang="scss">
-.json-function {
-    color: #067bca;
+  name: 'JsonFunction',
+  props: {
+    jsonValue: Function
+  }
 }
-</style>
+</script>

lib/types/json-number.vue

@@ -1,18 +1,12 @@
 <template>
-    <span class="jv-item jv-number">{{jsonValue}}</span>
+  <span class="jv-item jv-number">{{jsonValue}}</span>
 </template>
 
 <script>
 export default {
-    name: 'JsonNumber',
-    props: {
-        jsonValue: Number
-    }
-};
-</script>
-
-<style lang="scss">
-.json-number {
-    color: #fc1e70;
+  name: 'JsonNumber',
+  props: {
+    jsonValue: Number
+  }
 }
-</style>
+</script>

lib/types/json-object.vue

@@ -1,49 +1,62 @@
 <template>
-    <span>
-        <span class="jv-toggle" :class="{open: !!value}" v-if="!keyName" @click.stop="toggle"></span>
-        <span class="jv-item jv-object">{</span>
-        <template v-if="Object.keys(ordered).length">
-            <json-box v-show="value" v-for="(v, k) in ordered" :sort="sort" :key="k" :key-name="k" :value="v"></json-box>
-            <span v-show="!value" class="jv-ellipsis" @click.stop="toggle">...</span>
-        </template>
-        <span class="jv-item jv-object">}</span>
-    </span>
+  <span>
+    <span class="jv-toggle" :class="{open: !!expand}" v-if="!keyName" @click.stop="toggle"></span>
+    <span class="jv-item jv-object">{</span>
+    <template v-if="Object.keys(ordered).length">
+      <json-box
+        v-show="expand"
+        v-for="(v, k) in ordered"
+        :sort="sort"
+        :key="k"
+        :key-name="k"
+        :value="v"
+        :depth="depth + 1"></json-box>
+      <span
+        v-show="!expand"
+        class="jv-ellipsis"
+        @click.stop="toggle"
+        :title="!expand ? `click to reveal object content (keys: ${Object.keys(ordered).join(', ')})` : ''">...</span>
+    </template>
+    <span class="jv-item jv-object">}</span>
+  </span>
 </template>
 
 <script>
-import JIcon from '../json-icon'
 export default {
   name: 'JsonObject',
   props: {
     jsonValue: Object,
     keyName: String,
-    value: Boolean,
-    sort: Boolean
+    expand: Boolean,
+    sort: Boolean,
+    depth: Number
   },
   computed: {
     ordered () {
-      if (!this.sortKeys) {
-        return this.jsonValue;
+      if (!this.sort) {
+        return this.jsonValue
       }
 
-      const ordered = {};
+      const ordered = {}
       Object.keys(this.jsonValue).sort().forEach(key => {
-        ordered[key] = this.jsonValue[key];
-      });
-      return ordered;
+        ordered[key] = this.jsonValue[key]
+      })
+      return ordered
     }
   },
   methods: {
     toggle() {
-      this.$emit('input', !this.value);
+      this.$emit('update:expand', !this.expand)
+
+      try {
+        this.$el.dispatchEvent(new Event("resized"))
+      } catch (e) {
+        // handle IE not supporting Event constructor
+        var evt = document.createEvent("Event")
+        evt.initEvent("resized", true, false)
+        this.$el.dispatchEvent(evt)
+      }
     }
-  },
-  components: {
-      JIcon
   }
-};
+}
 </script>
-
-<style>
-
-</style>

lib/types/json-string.vue

@@ -1,18 +1,12 @@
 <template>
-    <span class="jv-item jv-string">"{{jsonValue}}"</span>
+  <span class="jv-item jv-string">"{{jsonValue}}"</span>
 </template>
 
 <script>
 export default {
-    name: 'JsonString',
-    props: {
-        jsonValue: String
-    }
-};
-</script>
-
-<style lang="scss">
-.json-string {
-    color: #42b983;
+  name: 'JsonString',
+  props: {
+    jsonValue: String
+  }
 }
-</style>
+</script>

lib/types/json-undefined.vue

@@ -1,18 +1,12 @@
 <template>
-    <span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
+  <span class="jv-item jv-undefined">{{ jsonValue === null ? 'null' : 'undefined' }}</span>
 </template>
 
 <script>
 export default {
-    name: 'JsonUndefined',
-    props: {
-        jsonValue: Object
-    }
-};
-</script>
-
-<style lang="scss">
-.json-undefined {
-    color: #e08331;
+  name: 'JsonUndefined',
+  props: {
+    jsonValue: Object
+  }
 }
-</style>
+</script>