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

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>