{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "json-tree-view", "title": "Json Tree View", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/json-tree-view/json-tree-view.component.ts", "content": "import {\n Component,\n EventEmitter,\n Input,\n OnInit,\n OnChanges,\n Output,\n SimpleChanges,\n booleanAttribute,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport type { JsonValue } from './types'\n\nexport type { JsonValue } from './types'\n\nfunction pathKey(path: (string | number)[]): string {\n return path.length ? path.map((p) => (typeof p === 'number' ? `[${p}]` : `.${p}`)).join('') : '$'\n}\n\nfunction typeOf(val: JsonValue): 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null' {\n if (val === null) return 'null'\n if (Array.isArray(val)) return 'array'\n return typeof val as 'object' | 'string' | 'number' | 'boolean'\n}\n\nfunction formatValue(val: JsonValue): string {\n if (val === null) return 'null'\n if (typeof val === 'string') return JSON.stringify(val)\n return String(val)\n}\n\nconst typeColor: Record = {\n string: 'text-emerald-600 dark:text-emerald-400',\n number: 'text-blue-600 dark:text-blue-400',\n boolean: 'text-amber-600 dark:text-amber-400',\n null: 'text-muted-foreground italic',\n object: 'text-foreground',\n array: 'text-foreground',\n}\n\nconst keyColor = 'text-violet-600 dark:text-violet-400'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-json-tree-node, [ui-json-tree-node]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"json-tree-node\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-dimmed]': 'dimmed ? \"\" : null',\n '[class.opacity-30]': 'dimmed',\n '[attr.role]': '\"treeitem\"',\n '[attr.aria-expanded]': 'isContainer ? open : null',\n },\n template: `\n @if (isContainer) {\n \n \n @if (open) {\n \n \n \n } @else {\n \n \n \n }\n \n {{ isRoot ? label : '\"' + label + '\"' }}\n :\n @if (open) {\n {{ type === 'array' ? '[' : '{' }}\n } @else {\n {{ collapsedPreview }}\n }\n @if (open) {\n {{ count }} {{ count === 1 ? 'item' : 'items' }}\n }\n \n @if (copiedPath === key) {\n \n \n \n } @else {\n \n \n \n \n }\n \n \n\n @if (open) {\n
\n @for (entry of entries; track entry.key) {\n \n }\n
\n {{ type === 'array' ? ']' : '}' }}\n
\n
\n }\n } @else {\n \n \n @if (isRoot) {\n {{ label }}\n } @else {\n \"{{ label }}\"\n }\n :\n {{ formattedValue }}\n \n @if (copiedPath === key) {\n \n \n \n } @else {\n \n \n \n \n }\n \n \n }\n `,\n})\nexport class UiJsonTreeNodeComponent {\n @Input() data: JsonValue = null\n @Input() path: (string | number)[] = []\n @Input() label: string | number = ''\n @Input({ transform: booleanAttribute }) isRoot = false\n @Input() search = ''\n @Input() maxDepth = 100\n @Input() copiedPath: string | null = null\n\n @Input() matchesSearchFn?: (val: JsonValue) => boolean\n @Input() isExpandedFn?: (path: (string | number)[]) => boolean\n @Input() toggleFn?: (path: (string | number)[]) => void\n\n @Output() copy = new EventEmitter<{ value: string; path: string }>()\n\n // Backwards-compat getters & setters for unit tests\n get value(): JsonValue {\n return this.data\n }\n set value(v: JsonValue) {\n this.data = v\n }\n\n get key(): string {\n return pathKey(this.path)\n }\n\n get parentKey(): string | null {\n return this.path.length ? pathKey(this.path.slice(0, -1)) : null\n }\n\n get type(): 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null' {\n return typeOf(this.data)\n }\n\n get isContainer(): boolean {\n return this.type === 'object' || this.type === 'array'\n }\n\n get isExpandable(): boolean {\n return this.isContainer\n }\n\n get open(): boolean {\n return this.isExpandedFn ? this.isExpandedFn(this.path) : false\n }\n\n get dimmed(): boolean {\n return !!this.search && !!this.matchesSearchFn && !this.matchesSearchFn(this.data)\n }\n\n get indent(): number {\n return this.isRoot ? 0 : 20\n }\n\n get entries(): { key: string; value: JsonValue }[] {\n if (Array.isArray(this.data)) return this.data.map((v, i) => ({ key: String(i), value: v }))\n if (this.data !== null && typeof this.data === 'object') {\n return Object.entries(this.data).map(([key, value]) => ({ key, value: value as JsonValue }))\n }\n return []\n }\n\n get count(): number {\n return this.entries.length\n }\n\n get formattedValue(): string {\n return formatValue(this.data)\n }\n\n get displayValue(): string {\n return this.formattedValue\n }\n\n get valueClass(): string {\n return cn(typeColor[this.type] ?? 'text-foreground', 'rounded text-left font-mono')\n }\n\n get collapsedPreview(): string {\n if (this.open || !this.isContainer) return ''\n const items = this.entries.slice(0, 3)\n const parts = items.map(({ key, value: v }) => {\n const vt = typeOf(v)\n let valStr: string\n if (vt === 'string') valStr = `\"${String(v).slice(0, 20)}\"`\n else if (vt === 'array') valStr = '[…]'\n else if (vt === 'object') valStr = '{…}'\n else valStr = formatValue(v)\n return `${Array.isArray(this.data) ? '' : `\"${key}\": `}${valStr}`\n })\n const suffix = this.count > 3 ? ', …' : ''\n const open2 = this.type === 'array' ? '[' : '{'\n const close = this.type === 'array' ? ']' : '}'\n return `${open2}${parts.join(', ')}${suffix}${close}`\n }\n\n appendPath(segment: string | number): (string | number)[] {\n return [...this.path, segment]\n }\n\n formatEntryKey(segment: string | number): string {\n return String(segment)\n }\n\n toggle(): void {\n this.toggleFn?.(this.path)\n }\n\n onToggleClick(e: MouseEvent): void {\n e.stopPropagation()\n this.toggle()\n }\n\n handleCopy(): void {\n const str = typeof this.data === 'string' ? this.data : JSON.stringify(this.data)\n const p = this.path.length ? this.key : String(this.label) || '$'\n this.copy.emit({ value: str, path: p })\n }\n\n copyValue(): void {\n this.handleCopy()\n }\n\n onCopyClick(e: MouseEvent): void {\n e.stopPropagation()\n this.handleCopy()\n }\n\n handleRowKeydown(e: KeyboardEvent): void {\n const target = e.currentTarget as HTMLElement\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n if (this.isContainer) this.toggle()\n else this.handleCopy()\n return\n }\n\n const tree = target.closest('[role=\"tree\"]')\n const rows = tree ? Array.from(tree.querySelectorAll('[data-tree-row]')) : []\n const idx = rows.indexOf(target)\n\n if (e.key === 'ArrowRight') {\n e.preventDefault()\n if (this.isContainer && !this.open) {\n this.toggle()\n } else if (this.isContainer && this.open && idx >= 0 && idx < rows.length - 1) {\n rows[idx + 1]?.focus()\n }\n return\n }\n\n if (e.key === 'ArrowLeft') {\n e.preventDefault()\n if (this.isContainer && this.open) {\n this.toggle()\n } else if (this.parentKey && tree) {\n const parent = tree.querySelector(`[data-tree-row][data-tree-id=\"${CSS.escape(this.parentKey)}\"]`)\n parent?.focus()\n }\n return\n }\n\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n e.preventDefault()\n if (idx < 0) return\n const next = e.key === 'ArrowDown' ? rows[idx + 1] : rows[idx - 1]\n next?.focus()\n return\n }\n\n if (e.key === 'Home') {\n e.preventDefault()\n rows[0]?.focus()\n return\n }\n\n if (e.key === 'End') {\n e.preventDefault()\n rows[rows.length - 1]?.focus()\n }\n }\n}\n\n/**\n * Angular port of UIPKGE JsonTreeView. Collapsible JSON viewer with\n * color-coded types, copy, search, expand-all. 1:1 React parity.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-json-tree-view, [ui-json-tree-view]',\n standalone: true,\n imports: [UiJsonTreeNodeComponent],\n host: {\n '[attr.data-slot]': '\"json-tree-view\"',\n '[attr.data-uipkge]': '\"\"',\n '[class]': 'hostClass',\n },\n template: `\n @if (showToolbar || showSearch) {\n
\n
\n \n \n \n \n {{ summary }}\n
\n
\n @if (showSearch) {\n
\n \n \n \n \n \n
\n }\n @if (search) {\n \n {{ searchMatchCount }} match{{ searchMatchCount === 1 ? '' : 'es' }}\n \n }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n }\n\n \n \n \n `,\n})\nexport class UiJsonTreeViewComponent implements OnInit, OnChanges {\n @Input() data: JsonValue = null\n @Input() expandDepth = 1\n @Input() maxDepth = 100\n @Input({ transform: booleanAttribute }) showSearch = true\n @Input({ transform: booleanAttribute }) showToolbar = true\n @Input() rootLabel = 'root'\n @Input() maxHeight?: string\n @Input('class') className?: string\n\n @Output() copy = new EventEmitter<{ value: string; path: string }>()\n\n search = ''\n copiedPath: string | null = null\n expanded = new Set()\n forcedExpanded: boolean | null = null\n\n readonly matchesSearchBound = (val: JsonValue): boolean => this.matchesSearch(val)\n readonly isExpandedBound = (path: (string | number)[]): boolean => this.expanded.has(pathKey(path))\n readonly toggleBound = (path: (string | number)[]): void => this.toggle(path)\n\n get hostClass(): string {\n return cn('bg-background flex flex-col overflow-hidden rounded-lg border font-mono text-sm', this.className)\n }\n\n get summary(): string {\n const t = typeOf(this.data)\n if (t === 'array') return `Array(${(this.data as JsonValue[]).length})`\n if (t === 'object') return `Object(${Object.keys(this.data as object).length})`\n return t\n }\n\n get searchMatchCount(): number {\n if (!this.search) return 0\n let count = 0\n const term = this.search.toLowerCase()\n const walk = (v: JsonValue) => {\n if (v === null) {\n if ('null'.includes(term)) count++\n return\n }\n if (typeof v === 'string') {\n if (v.toLowerCase().includes(term)) count++\n return\n }\n if (typeof v === 'number' || typeof v === 'boolean') {\n if (String(v).includes(term)) count++\n return\n }\n if (Array.isArray(v)) {\n v.forEach(walk)\n return\n }\n if (typeof v === 'object') {\n Object.entries(v).forEach(([k, val]) => {\n if (k.toLowerCase().includes(term)) count++\n walk(val)\n })\n }\n }\n walk(this.data)\n return count\n }\n\n ngOnInit(): void {\n this.resetExpanded()\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] || changes['expandDepth']) {\n this.resetExpanded()\n }\n }\n\n private resetExpanded(): void {\n const next = new Set()\n const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {\n if (depth >= this.expandDepth) return\n if (val !== null && typeof val === 'object') {\n next.add(pathKey(path))\n const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)\n for (const [k, v] of entries) {\n walk(v as JsonValue, [...path, k], depth + 1)\n }\n }\n }\n walk(this.data)\n this.expanded = next\n }\n\n toggle(path: (string | number)[]): void {\n const k = pathKey(path)\n const next = new Set(this.expanded)\n if (next.has(k)) next.delete(k)\n else next.add(k)\n this.expanded = next\n }\n\n expandAll(): void {\n this.forcedExpanded = true\n const next = new Set()\n const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {\n if (depth >= this.maxDepth) return\n if (val !== null && typeof val === 'object') {\n next.add(pathKey(path))\n const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)\n for (const [k, v] of entries) {\n walk(v as JsonValue, [...path, k], depth + 1)\n }\n }\n }\n walk(this.data)\n this.expanded = next\n }\n\n collapseAll(): void {\n this.forcedExpanded = false\n this.expanded = new Set()\n }\n\n onSearchInput(event: Event): void {\n this.search = (event.target as HTMLInputElement).value\n if (!this.search) {\n this.resetExpanded()\n return\n }\n const next = new Set()\n const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {\n if (depth >= this.maxDepth) return\n if (val !== null && typeof val === 'object') {\n if (this.matchesSearch(val)) next.add(pathKey(path))\n const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)\n for (const [k, v] of entries) {\n walk(v as JsonValue, [...path, k], depth + 1)\n }\n }\n }\n walk(this.data)\n this.expanded = next\n }\n\n matchesSearch(val: JsonValue): boolean {\n if (!this.search) return true\n const term = this.search.toLowerCase()\n const walk = (v: JsonValue): boolean => {\n if (v === null) return 'null'.includes(term)\n if (typeof v === 'string') return v.toLowerCase().includes(term)\n if (typeof v === 'number' || typeof v === 'boolean') return String(v).includes(term)\n if (Array.isArray(v)) return v.some(walk)\n if (typeof v === 'object') {\n return Object.entries(v).some(([k, value]) => k.toLowerCase().includes(term) || walk(value))\n }\n return false\n }\n return walk(val)\n }\n\n async onCopyNode(event: { value: string; path: string }): Promise {\n try {\n await navigator.clipboard.writeText(event.value)\n this.copiedPath = event.path\n this.copy.emit(event)\n setTimeout(() => {\n if (this.copiedPath === event.path) this.copiedPath = null\n }, 1200)\n } catch {\n this.copy.emit(event)\n }\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/json-tree-view/json-tree-view.component.ts" }, { "path": "packages/registry-angular/components/json-tree-view/types.ts", "content": "export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }\n", "type": "registry:ui", "target": "~/src/app/components/ui/json-tree-view/types.ts" }, { "path": "packages/registry-angular/components/json-tree-view/index.ts", "content": "export { UiJsonTreeViewComponent, UiJsonTreeNodeComponent } from './json-tree-view.component'\nexport type { JsonValue } from './types'\n", "type": "registry:ui", "target": "~/src/app/components/ui/json-tree-view/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [], "description": "Collapsible JSON tree viewer with color-coded value types, click-to-copy, live search/filter, and expand/collapse-all controls. Renders objects, arrays, and primitives with configurable depth and contained scrolling.", "categories": [ "display", "data" ] }