diff --git a/apps/desktop/src/components/common/JsonTree.vue b/apps/desktop/src/components/common/JsonTree.vue index c881c94192..5af0c3684e 100644 --- a/apps/desktop/src/components/common/JsonTree.vue +++ b/apps/desktop/src/components/common/JsonTree.vue @@ -2,7 +2,7 @@ import { computed, defineComponent, h, nextTick, ref, shallowRef, watch, type VNodeChild } from "vue"; import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller"; import { ChevronDown, ChevronRight } from "@lucide/vue"; -import { createJsonTreeRoot, getJsonTreeChildren, getVisibleJsonTreeNodes, isJsonTreeContainer, isJsonTreeInitiallyExpanded, jsonTreeContainerKind, jsonTreeContainerSummary, type JsonTreeNode } from "@/lib/common/jsonTree"; +import { createJsonTreeRoot, getJsonTreeChildren, getVisibleJsonTreeNodes, isJsonTreeClosingNode, isJsonTreeContainer, isJsonTreeInitiallyExpanded, jsonTreeContainerKind, jsonTreeContainerSummary, type JsonTreeNode } from "@/lib/common/jsonTree"; import { isLosslessJsonNumber } from "@/lib/common/safeJsonFormat"; defineOptions({ name: "JsonTree" }); @@ -137,12 +137,21 @@ function renderJsonNode(node: JsonTreeNode): VNodeChild { if (containerValue !== undefined) { const kind = jsonTreeContainerKind(containerValue); - rowChildren.push(h("span", { class: `json-tree-bracket is-${kind}` }, kind === "array" ? "[" : "{"), h("span", { class: "json-tree-summary" }, jsonTreeContainerSummary(containerValue, expanded)), h("span", { class: `json-tree-bracket is-${kind}` }, kind === "array" ? "]" : "}")); + rowChildren.push(h("span", { class: `json-tree-bracket is-${kind}` }, kind === "array" ? "[" : "{")); + if (!expanded) { + rowChildren.push(h("span", { class: "json-tree-summary" }, jsonTreeContainerSummary(containerValue)), h("span", { class: `json-tree-bracket is-${kind}` }, kind === "array" ? "]" : "}")); + } } else { rowChildren.push(highlightedJsonSpan(scalarClass(node.value), scalarText(node.value))); } - const children = containerValue !== undefined && expanded ? h("div", { class: "json-tree-children" }, getJsonTreeChildren(node).map(renderJsonNode)) : null; + const children = + containerValue !== undefined && expanded + ? h("div", { class: "json-tree-children" }, [ + ...getJsonTreeChildren(node).map(renderJsonNode), + h("div", { class: "json-tree-row", style: { paddingInlineStart: indent } }, [h("span", { class: `json-tree-bracket json-tree-closing is-${jsonTreeContainerKind(containerValue)}` }, jsonTreeContainerKind(containerValue) === "array" ? "]" : "}")]), + ]) + : null; return h("div", { key: node.path, class: "json-tree-node", "data-json-path": node.path }, [h("div", { class: "json-tree-row", style: { paddingInlineStart: indent } }, rowChildren), children]); } @@ -154,7 +163,7 @@ const JsonTreeRoot = defineComponent({ }, }); -const visibleNodes = computed(() => getVisibleJsonTreeNodes(rootNode.value, isNodeExpanded)); +const visibleNodes = computed(() => getVisibleJsonTreeNodes(rootNode.value, isNodeExpanded, props.virtualized)); function refresh(resetScroll = false) { if (!props.virtualized) return; @@ -180,24 +189,31 @@ defineExpose({ expandAll, collapseAll, resetExpansion, refresh });
- -