chore: wip

Author: Dsaquel

src/output/ConsoleLine.vue

@@ -58,7 +58,6 @@ const level = ref(1)
         v-for="arg in log.args"
         :data="arg"
         :margin-offset="0"
-        :increment="0"
       />
     </template>
 

src/output/JsonNode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, watchEffect } from 'vue'
-import { isObject, parse, word } from '../utils'
+import {  parse, isObject } from '../utils'
 const emits = defineEmits<{
   click: []
 }>()
@@ -17,6 +17,7 @@ const props = defineProps({
   open: Boolean,
 })
 
+
 const renderValue = computed(() => {
   const value = props.value
   if (Array.isArray(value)) return value
@@ -27,13 +28,13 @@ const renderValue = computed(() => {
   return value
 })
 
-watchEffect(() => console.log(props.marginOffset))
+const huh = computed(() => isObject(props.value) && props.keyData !== 'root' ? props.marginOffset - 1 : props.marginOffset)
 </script>
 
 <template>
   <div
     class="tree"
-    :style="`margin-left: ${marginOffset}rem`"
+    :style="`margin-left: ${huh}rem`"
     @click="emits('click')"
   >
     <svg
@@ -50,17 +51,13 @@ watchEffect(() => console.log(props.marginOffset))
       />
     </svg>
     <span v-if="keyData !== 'root'" class="tree__title"> {{ keyData }}: </span>
-    <span>
-      {{ renderValue }}
-    </span>
+    <span>{{ renderValue }}</span>
   </div>
 </template>
 
 <style>
 .tree {
   color: white;
-  cursor: pointer;
-  user-select: none;
   /* margin-bottom: 1em; */
   display: flex;
   align-items: center;

src/output/JsonTree.vue

@@ -13,10 +13,6 @@ const props = defineProps({
     type: Number,
     default: 1,
   },
-  increment: {
-    type: Number,
-    default: 1,
-  },
 })
 
 const open = ref(false)
@@ -25,7 +21,6 @@ const entries = computed(() => parse(props.data))
 </script>
 
 <template>
-  &nbsp;
   <JsonNode
     :keyData="keyData"
     :value="data"
@@ -36,10 +31,11 @@ const entries = computed(() => parse(props.data))
   <template v-if="entries && open">
     <div class="hah">
       <JsonTree
-        v-for="[k, v] in entries"
-        :key="k"
+        v-for="([k, v], idx) in entries"
+        :key="idx"
+        :key-data="k"
         :data="v"
-        :margin-offset="marginOffset + increment"
+        :margin-offset="marginOffset + 1"
       />
     </div>
   </template>