Data
DataNumber
Inline number formatted via Intl.NumberFormat with sign, prefix, suffix, and colorize support.
Data
Data components handle the rendering of structured information in detail views, sidebars, and list pages. They cover everything from a single formatted number to a full activity feed with date grouping.
Components
<XADataNumber />
Renders a single number as an inline <span> using Intl.NumberFormat. Supports decimal, percent, and unit styles; compact notation; and optional color styling for positive/negative values.
<!-- Currency compact -->
<XADataNumber :value="1248000" format="decimal" notation="compact" compact-display="short" />
<!-- Result: 1.2M -->
<!-- Percent with sign coloring -->
<XADataNumber :value="-4.2" format="percent" show-sign colorize />
<!-- Unit -->
<XADataNumber :value="128" format="unit" unit="gigabyte" unit-display="short" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | string | null | The numeric value to format. |
locale | string | 'en-US' | Intl locale string. |
format | 'decimal' | 'percent' | 'unit' | 'decimal' | Intl number style. |
unit | string | '' | Unit identifier (e.g. 'gigabyte'). Only used when format is 'unit'. |
unitDisplay | 'short' | 'long' | 'narrow' | 'short' | Unit display style. |
notation | 'standard' | 'scientific' | 'engineering' | 'compact' | 'standard' | Number notation. |
compactDisplay | 'short' | 'long' | 'short' | Compact display style (used with notation: 'compact'). |
minimumFractionDigits | number | 0 | Minimum decimal places. |
maximumFractionDigits | number | 2 | Maximum decimal places. |
showSign | boolean | false | Always show + or − sign. |
colorize | boolean | false | Apply green/red color class for positive/negative values. |
prefix | string | '' | Text prepended to the formatted output. |
suffix | string | '' | Text appended to the formatted output. |
AI Context
component: XADataNumber
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Rendering a single formatted number inline. Handles decimal, percent, and unit formats; compact notation; sign display; and positive/negative colorization.