Merge pull request #338 from laradumps/improve-json-viewer

Improve JSON Viewer

package.json

@@ -1,6 +1,6 @@
 {
     "name": "laradumps",
-    "version": "3.4.0",
+    "version": "3.4.1",
     "private": false,
     "description": "LaraDumps a friendly app designed to boost your PHP coding and debugging experience. https://github.com/laradumps/app",
     "author": "Luan Freitas <[email protected]>",

src/renderer/components/DumpJson.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VueJsonPretty from "vue-json-pretty";
-import { computed, defineProps, onMounted } from "vue";
+import { computed, defineProps } from "vue";
 import { Payload } from "@/types/Payload";
 
 const props = defineProps<{
@@ -14,21 +14,53 @@ const value = computed(() => {
 
     return JSON.parse(props.payload.json?.string ?? "");
 });
-</script>
 
-<style>
-.vjs-tree-node:hover {
-    background-color: transparent !important;
+function countNodes(obj: any): number {
+    if (typeof obj !== 'object' || obj === null) return 0;
+
+    let count = 0;
+    const stack = [obj];
+
+    while (stack.length) {
+        const node = stack.pop();
+        if (typeof node === 'object' && node !== null) {
+            count++;
+            for (const key in node) {
+                if (Object.prototype.hasOwnProperty.call(node, key)) {
+                    stack.push(node[key]);
+                }
+            }
+        }
+    }
+
+    return count;
 }
-</style>
+
+const shouldCollapse = computed(() => countNodes(value.value) >= 4);
+</script>
 
 <template>
     <div class="text-base-content">
         <VueJsonPretty
+            :data="value"
             :show-icon="true"
             :show-lenght="true"
             :show-line="false"
-            :data="value"
+            :show-line-number="true"
+            :item-height="28"
+            v-bind:collapsed-node-length="shouldCollapse ? 4 : undefined"
+            :show-double-quotes="false"
         />
     </div>
 </template>
+<style>
+.vjs-tree-node:hover {
+    background-color: transparent !important;
+}
+.vjs-node-index {
+    @apply text-base-content/40
+}
+.vjs-carets {
+    @apply text-base-content/70 top-[6px] cursor-pointer right-[2px] absolute
+}
+</style>