Fmt
FmtPercent
Formats a percentage value with optional color coding, sign, trend arrow, and custom thresholds.
Fmt
The Fmt category provides stateless display formatters. Each component is a thin wrapper around native Intl APIs, VueUse, or Nuxt utilities — they accept a raw value and render formatted output without any side effects.
Components
<XAFmtPercent />
Formats a percentage value with configurable decimal places, optional sign, color coding (threshold-based or change-based), and a trend arrow icon.
<XAFmtPercent :value="85.5" />
<!-- Output: 85.5% -->
<XAFmtPercent :value="25" :colorize="true" />
<!-- Output: 25% (red — below 50 threshold) -->
<XAFmtPercent :value="-12.5" :colorize-change="true" :show-sign="true" :show-trend="true" :trend="-1" />
<!-- Output: -12.5% (red, with down arrow) -->
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Number | required | Percentage value (0–100 scale by default) |
decimals | Number | 1 | Number of decimal places |
showSign | Boolean | false | Show + for positive values |
colorize | Boolean | false | Color by threshold: <low = red, <medium = yellow, else green |
colorizeChange | Boolean | false | Color as change: positive = green, negative = red |
thresholds | Object | { low: 50, medium: 75 } | Custom thresholds for colorize mode |
showTrend | Boolean | false | Show a trend arrow icon |
trend | Number | 0 | Trend direction: 1 (up), -1 (down), 0 (none) |
locale | String | 'en-US' | BCP 47 locale tag |
textClass | String | '' | Additional CSS classes |
AI Context
component: XAFmtPercent
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Displaying percentage values with optional threshold-based color coding (colorize) or change-direction color coding (colorizeChange). Covers both progress metrics and delta values. Stateless and purely presentational.