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

2026-06-20 20:00:37 +03:00 · 2018-09-17 20:41:26 +02:00
parent 9d914ff252
commit c29fa5680d
28 changed files with 11956 additions and 6453 deletions
@@ -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>