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

lib/index.js

@@ -4,4 +4,4 @@ const install = Vue => {
   Vue.component('JsonViewer', JsonView)
 }
 
-export default Object.assign(JsonView, {install})
+export default Object.assign(JsonView, { install })

lib/json-box.vue

@@ -1,60 +1,78 @@
 <template>
   <div class="jv-node">
-    <span class="jv-toggle" :class="{open: !!toggle}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
+    <span class="jv-toggle" :class="{open: !!expand}" v-if="keyName && isObject" @click.stop="toggleNode"></span>
     <span class="jv-key" v-if="keyName">
       {{keyName}}:
     </span>
-    <commponent v-model="toggle"
+    <commponent
+      :expand.sync="expand"
       :is="`Json${valueType}`"
       :json-value="value"
       :key-name="keyName"
-      :sort="sort"></commponent>
+      :sort="sort"
+      :depth="depth"></commponent>
   </div>
 </template>
 
 <script>
-import JIcon from './json-icon'
-import JsonString from './types/json-string';
-import JsonUndefined from './types/json-undefined';
-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';
+import JsonString from './types/json-string'
+import JsonUndefined from './types/json-undefined'
+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',
+  inject: ['expandDepth'],
   props: {
     value: [Object, Array, String, Number, Boolean, Function],
     keyName: String,
-    sort: Boolean
+    sort: Boolean,
+    depth: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
-      toggle: true
-    };
+      expand: true
+    }
   },
   methods: {
     toggleNode() {
-      this.toggle = !this.toggle;
+      this.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)
+      }
     }
   },
+  mounted() {
+    this.expand = this.depth >= this.expandDepth ? false : true
+  },
   computed: {
     valueType() {
       if (this.value === null || this.value === undefined) {
-        return 'Undefined';
+        return 'Undefined'
       } else if (Array.isArray(this.value)) {
-        return 'Array';
+        return 'Array'
       } else if (typeof this.value === 'object') {
-        return 'Object';
+        return 'Object'
       } else if (typeof this.value === 'number') {
-        return 'Number';
+        return 'Number'
       } else if (typeof this.value === 'string') {
-        return 'String';
+        return 'String'
       } else if (typeof this.value === 'boolean') {
-        return 'Boolean';
+        return 'Boolean'
       } else if (typeof this.value === 'function') {
-        return 'Function';
+        return 'Function'
       }
     },
     isObject() {
@@ -68,19 +86,14 @@ export default {
     JsonObject,
     JsonArray,
     JsonFunction,
-    JsonUndefined,
-    JIcon
+    JsonUndefined
   }
-};
+}
 </script>
 
 <style lang="scss">
 .jv-node {
-  font-size: 14px;
   position: relative;
-  color: #525252;
-  font-family: Consolas,Menlo,Courier,monospace;
-  white-space: nowrap;
 
   &:after {
     content: ','
@@ -90,13 +103,7 @@ export default {
       content: ''
     }
   }
-  /*.j-icon {
-      position: absolute;
-      left: -12px;
-      top: 3px;
-      color: #80848f;
-      cursor: pointer;
-  }*/
+
   & .jv-node {
     margin-left: 25px;
   }

lib/json-icon.vue

@@ -1,28 +0,0 @@
-<template>
-    <i class="j-icon" :class="{
-        [`${iconPrefix}`]: true,
-        [`${iconPrefix}-${type}`]: true
-    }" @click="iconClick"></i>
-</template>
-
-<script>
-export default {
-    name: 'JsonIcon',
-    inject: ['iconPrefix'],
-    props: {
-        iconPrefix: {
-            type: String,
-            default: ''
-        },
-        type: {
-            type: String,
-            default: ''
-        }
-    },
-    methods: {
-        iconClick(e) {
-            this.$emit('click', e);
-        }
-    }
-}
-</script>

lib/json-viewer.vue

@@ -1,37 +1,38 @@
 <template>
   <div :class="jvClass">
-    <div class="jv-tooltip" v-if="tooltip">
-      <j-icon v-if="showBigger" type="qr-scanner" @click="bigger"></j-icon>
-      <j-icon v-if="copied" class="copied" type="checkmark"></j-icon>
-      <j-icon v-if="showCopy && !copied" class="copy" type="clipboard" @click="clip"></j-icon>
+    <div class="jv-tooltip" v-if="copyable">
+      <span class="jv-button" ref="clip" @click="clip" :class="{copied}">{{ copied ? 'copied!' : 'copy' }}</span>
     </div>
-    <div class="jv-code" :class="{'more': moreCode}">
-      <json-box :value="value" :key-name="keyName" :sort="sort"></json-box>
+    <div class="jv-code" :class="{'open': expandCode}">
+      <json-box
+        ref="jsonBox"
+        :value="value"
+        :key-name="keyName"
+        :sort="sort"></json-box>
     </div>
-    <div class="jv-more" @click="toggleMoreCode">
-      <j-icon :type="moreCode ? 'ios-arrow-up' : 'ios-arrow-down'"></j-icon>
+    <div v-if="expandableCode" class="jv-more" @click="toggleExpandCode">
+      <span class="jv-toggle" :class="{open: !!expandCode}"></span>
     </div>
 </div>
 </template>
 
 <script>
-import Vue from 'vue';
-import JIcon from './json-icon'
-import JsonBox from './json-box';
-import Clipboard from 'clipboard';
+import Vue from 'vue'
+import JsonBox from './json-box'
+import Clipboard from 'clipboard'
 
-Vue.component(JsonBox.name, JsonBox);
+Vue.component(JsonBox.name, JsonBox)
 
 export default {
   name: 'JsonViewer',
   props: {
     value: [Object, Array, String, Number, Boolean],
     keyName: String,
-    showCopy: {
-      type: Boolean,
-      default: false
+    expandDepth: {
+      type: Number,
+      default: 1
     },
-    showBigger: {
+    copyable: {
       type: Boolean,
       default: false
     },
@@ -45,62 +46,68 @@ export default {
     },
     theme: {
       type: String,
-      default: "jv-light"
-    },
-    iconPrefix: {
-      type: String,
-      default: ''
+      default: 'jv-light'
     },
   },
   provide() {
     return {
-      iconPrefix: this.iconPrefix || 'ion'
+      expandDepth: this.expandDepth,
     }
   },
   data() {
     return {
       copied: false,
-      biggerModal: false,
-      moreCode: false
-    };
+      expandableCode: false,
+      expandCode: false
+    }
+  },
+  mounted: function () {
+    this.onResized()
+    this.$el.addEventListener("resized", this.onResized, true)
   },
   computed: {
     jvClass() {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
-    },
-    tooltip() {
-      return this.showBigger || this.copied || (this.showCopy && !this.copied)
     }
   },
   methods: {
-    clip() {
-      const clipBoard = new Clipboard('.copy', {
-        text: () => {
-          return JSON.stringify(this.value, null, 2);
+    onResized() {
+      this.$nextTick(() => {
+        if (this.$refs.jsonBox.$el.clientHeight >= 250) {
+          this.expandableCode = true
+        } else {
+          this.expandableCode = false
         }
-      });
+      })
+    },
+    clip() {
+      if (this.copied) {
+        return
+      }
+
+      const clipBoard = new Clipboard(this.$refs.clip, {
+        text: () => {
+          return JSON.stringify(this.value, null, 2)
+        }
+      })
 
       clipBoard.on('success', () => {
-        this.copied = true;
+        this.copied = true
         setTimeout(() => {
-          this.copied = false;
-        }, 2000);
-        this.$emit('copied');
-        clipBoard.destroy();
-      });
+          this.copied = false
+        }, 2000)
+        this.$emit('copied')
+        clipBoard.destroy()
+      })
     },
-    bigger() {
-      this.biggerModal = true;
-    },
-    toggleMoreCode() {
-      this.moreCode = !this.moreCode;
+    toggleExpandCode() {
+      this.expandCode = !this.expandCode
     }
   },
   components: {
-    JsonBox,
-    JIcon
+    JsonBox
   }
-};
+}
 </script>
 
 <style lang="scss">
@@ -121,6 +128,10 @@ export default {
 
   &.jv-light {
     background: #fff;
+    white-space: nowrap;
+    color: #525252;
+    font-size: 14px;
+    font-family: Consolas, Menlo, Courier, monospace;
 
     .jv-ellipsis {
       color: #999;
@@ -134,6 +145,7 @@ export default {
       cursor: pointer;
       user-select: none;
     }
+    .jv-button { color: #49b3ff }
     .jv-key { color: #111111 }
     .jv-item {
       &.jv-array { color: #111111 }
@@ -141,17 +153,23 @@ export default {
       &.jv-function { color: #067bca }
       &.jv-number { color: #fc1e70 }
       &.jv-object { color: #111111 }
-      &.jv-string { color: #42b983 }
       &.jv-undefined { color: #e08331 }
-    }
-    .jv-toggle {
-      &:before {
-        padding: 0px 2px;
-        border-radius: 2px;
+      &.jv-string {
+        color: #42b983;
+        word-break: break-word;
+        white-space: normal;
       }
-      &:hover {
+    }
+    .jv-code {
+      .jv-toggle {
         &:before {
-          background: #eee;
+          padding: 0px 2px;
+          border-radius: 2px;
+        }
+        &:hover {
+          &:before {
+            background: #eee;
+          }
         }
       }
     }
@@ -162,49 +180,55 @@ export default {
     overflow: hidden;
     padding: 20px;
 
-    .jv-toggle {
-      cursor: pointer;
-
-      &:before {
-        content: "⏶";
-        padding: 0px 2px;
-        border-radius: 2px;
-        position: absolute;
-      }
-      &:after {
-        content: " ";
-        position: relative;
-        display: inline-block;
-        width: 8px;
-      }
-
-      &.open {
-        &:before {
-          content: "⏷";
-        }
-      }
-    }
-
-    &.more {
+    &.open {
       max-height: initial;
       overflow: visible;
       overflow-x: auto;
-      margin-bottom: 15px;
+      padding-bottom: 45px;
+    }
+  }
+
+  .jv-toggle {
+    cursor: pointer;
+
+    &:before {
+      content: "⏷";
+      padding: 0px 2px;
+      border-radius: 2px;
+      position: absolute;
+    }
+    &:after {
+      content: " ";
+      position: relative;
+      display: inline-block;
+      width: 8px;
+    }
+
+    &.open {
+      &:before {
+        content: "⏶";
+      }
     }
   }
 
   .jv-more {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: absolute;
+    z-index: 1;
     bottom: 0;
     left: 0;
     right: 0;
+    height: 40px;
+    width: 100%;
     text-align: center;
     cursor: pointer;
 
     .jv-toggle {
       position: relative;
+      top:40%;
       z-index: 2;
+      color: #888;
+      transition: all 0.1s;
+      // background: red;
     }
 
     &:after {
@@ -215,25 +239,39 @@ export default {
       bottom: 0;
       left: 0;
       z-index: 1;
-      box-shadow: inset 0 -15px 30px #fff;
+      background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 1) 100%);
+      transition: all 0.1s;
+    }
+
+    &:hover {
+      .jv-toggle {
+        top:50%;
+        color: #111;
+      }
+
+      &:after {
+      background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(230, 230, 230, 0.3) 100%);
+      }
+    }
+  }
+
+  .jv-button {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px;
+    z-index: 5;
+
+    &.copied {
+      opacity: 0.4;
+      cursor: default;
     }
   }
 
   .jv-tooltip {
     position: absolute;
-    right: 12px;
-    top: 5px;
-    color: #b2b2b2;
-    cursor: pointer;
-
-    .copied {
-      color: #19be6b;
-    }
-
-    .j-icon {
-      margin-left: 5px;
-      font-size: 18px;
-    }
+    right: 15px;
+    top: 10px;
   }
 
   .j-icon {

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>