JsonDisplay
Source: client/lib/theme/vueda-tailwind/display/index.js
Mono, per the data-font rule: a payload is machine-generated and its nesting depends on stable character widths. Size and leading are inherited rather than set, so a read row keeps its own rhythm and a grid cell still follows
data-density.whitespace-pre-wrapkeeps the block form's indentation while still wrapping a long string value, andbreak-wordsstops an unbroken token (a URL, a hash) from widening the row. The inline form carriesdata-inline, which returns it to normal whitespace: it has no indentation to preserve, and a table cell should collapse runs of space like any other cell.
Vue component: JsonDisplay
| Slot | Default classes | Description |
|---|---|---|
| root | 2 classes | Mono, per the data-font rule: a payload is machine-generated and its nesting depends on stable character widths. Size and leading are inherited rather than set, so a read row keeps its own rhythm and a grid cell still follows data-density. whitespace-pre-wrap keeps the block form's indentation while still wrapping a long string value, and break-words stops an unbroken token (a URL, a hash) from widening the row. The inline form carries data-inline, which returns it to normal whitespace: it has no indentation to preserve, and a table cell should collapse runs of space like any other cell. |
| value | The text itself, for a skin that wants to tint or size a payload. | |
| dash | Empty-value dash slot, matching DateTimeDisplay so the two read the same. |
root
Mono, per the data-font rule: a payload is machine-generated and its nesting depends on stable character widths. Size and leading are inherited rather than set, so a read row keeps its own rhythm and a grid cell still follows
data-density.whitespace-pre-wrapkeeps the block form's indentation while still wrapping a long string value, andbreak-wordsstops an unbroken token (a URL, a hash) from widening the row. The inline form carriesdata-inline, which returns it to normal whitespace: it has no indentation to preserve, and a table cell should collapse runs of space like any other cell.
Default classes:
font-mono break-words
whitespace-pre-wrap data-[inline=true]:whitespace-normalSource: client/lib/theme/vueda-tailwind/display/JsonDisplay.theme.js:27
value
The text itself, for a skin that wants to tint or size a payload.
Default classes:
Source: client/lib/theme/vueda-tailwind/display/JsonDisplay.theme.js:31
dash
Empty-value dash slot, matching DateTimeDisplay so the two read the same.
Default classes:
Source: client/lib/theme/vueda-tailwind/display/JsonDisplay.theme.js:35