refactor lib: clean directories + clean options + add theming capabilities + remove usage of ionicon (for arrows)

lib/index.js

@@ -0,0 +1,7 @@
+import JsonView from './json-viewer'
+
+const install = Vue => {
+  Vue.component('JsonViewer', JsonView)
+}
+
+export default Object.assign(JsonView, {install})

lib/json-box.vue

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

lib/json-icon.vue

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,243 @@
+<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>
+    <div class="jv-code" :class="{'more': moreCode}">
+      <json-box :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>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import JIcon from './json-icon'
+import JsonBox from './json-box';
+import Clipboard from 'clipboard';
+
+Vue.component(JsonBox.name, JsonBox);
+
+export default {
+  name: 'JsonViewer',
+  props: {
+    value: [Object, Array, String, Number, Boolean],
+    keyName: String,
+    showCopy: {
+      type: Boolean,
+      default: false
+    },
+    showBigger: {
+      type: Boolean,
+      default: false
+    },
+    sort: {
+      type: Boolean,
+      default: false
+    },
+    boxed: {
+      type: Boolean,
+      default: false
+    },
+    theme: {
+      type: String,
+      default: "jv-light"
+    },
+    iconPrefix: {
+      type: String,
+      default: ''
+    },
+  },
+  provide() {
+    return {
+      iconPrefix: this.iconPrefix || 'ion'
+    }
+  },
+  data() {
+    return {
+      copied: false,
+      biggerModal: false,
+      moreCode: false
+    };
+  },
+  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);
+        }
+      });
+
+      clipBoard.on('success', () => {
+        this.copied = true;
+        setTimeout(() => {
+          this.copied = false;
+        }, 2000);
+        this.$emit('copied');
+        clipBoard.destroy();
+      });
+    },
+    bigger() {
+      this.biggerModal = true;
+    },
+    toggleMoreCode() {
+      this.moreCode = !this.moreCode;
+    }
+  },
+  components: {
+    JsonBox,
+    JIcon
+  }
+};
+</script>
+
+<style lang="scss">
+.jv-container {
+  box-sizing: border-box;
+  position: relative;
+
+  &.boxed {
+    border: 1px solid #eee;
+    border-radius: 6px;
+
+    &:hover {
+      box-shadow: 0 2px 7px rgba(0,0,0,.15);
+      border-color: transparent;
+      position: relative
+    }
+  }
+
+  &.jv-light {
+    background: #fff;
+
+    .jv-ellipsis {
+      color: #999;
+      background-color: #eee;
+      display: inline-block;
+      line-height: 0.9;
+      font-size: 0.9em;
+      padding: 0px 4px 2px 4px;
+      border-radius: 3px;
+      vertical-align: 2px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .jv-key { color: #111111 }
+    .jv-item {
+      &.jv-array { color: #111111 }
+      &.jv-boolean { color: #fc1e70 }
+      &.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;
+      }
+      &:hover {
+        &:before {
+          background: #eee;
+        }
+      }
+    }
+  }
+
+  .jv-code {
+    max-height: 300px;
+    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 {
+      max-height: initial;
+      overflow: visible;
+      overflow-x: auto;
+      margin-bottom: 15px;
+    }
+  }
+
+  .jv-more {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    cursor: pointer;
+
+    .jv-toggle {
+      position: relative;
+      z-index: 2;
+    }
+
+    &:after {
+      content: "";
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      box-shadow: inset 0 -15px 30px #fff;
+    }
+  }
+
+  .jv-tooltip {
+    position: absolute;
+    right: 12px;
+    top: 5px;
+    color: #b2b2b2;
+    cursor: pointer;
+
+    .copied {
+      color: #19be6b;
+    }
+
+    .j-icon {
+      margin-left: 5px;
+      font-size: 18px;
+    }
+  }
+
+  .j-icon {
+    font-size: 12px;
+  }
+}
+</style>

lib/types/json-array.vue

@@ -0,0 +1,31 @@
+<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>
+</template>
+
+<script>
+export default {
+  name: 'JsonArray',
+  props: {
+    jsonValue: Array,
+    keyName: String,
+    value: Boolean
+  },
+  methods: {
+    toggle() {
+      this.$emit('input', !this.value);
+    }
+  }
+};
+</script>
+
+<style>
+
+</style>

lib/types/json-boolean.vue

@@ -0,0 +1,18 @@
+<template>
+    <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;
+}
+</style>

lib/types/json-function.vue

@@ -0,0 +1,18 @@
+<template>
+    <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;
+}
+</style>

lib/types/json-number.vue

@@ -0,0 +1,18 @@
+<template>
+    <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;
+}
+</style>

lib/types/json-object.vue

@@ -0,0 +1,49 @@
+<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>
+</template>
+
+<script>
+import JIcon from '../json-icon'
+export default {
+  name: 'JsonObject',
+  props: {
+    jsonValue: Object,
+    keyName: String,
+    value: Boolean,
+    sort: Boolean
+  },
+  computed: {
+    ordered () {
+      if (!this.sortKeys) {
+        return this.jsonValue;
+      }
+
+      const ordered = {};
+      Object.keys(this.jsonValue).sort().forEach(key => {
+        ordered[key] = this.jsonValue[key];
+      });
+      return ordered;
+    }
+  },
+  methods: {
+    toggle() {
+      this.$emit('input', !this.value);
+    }
+  },
+  components: {
+      JIcon
+  }
+};
+</script>
+
+<style>
+
+</style>

lib/types/json-string.vue

@@ -0,0 +1,18 @@
+<template>
+    <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;
+}
+</style>

lib/types/json-undefined.vue

@@ -0,0 +1,18 @@
+<template>
+    <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;
+}
+</style>