Formatted

A small family of display-only components that route through aurora's DS_FORMATTING and DS_DATE_FORMATTER adapters. Use these instead of inline Intl.NumberFormat / toFixed calls so numeric and date display stays consistent across the app and respects the consumer-app's unit system, locale, and currency.

Four components ship from @scaler-tech/aurora/formatted:

• FormattedNumber — generic numeric display with optional scaling (K / M / B suffixes)
• FormattedValue — measurement values with type-specific units (energy, emissions, water, waste, cost)
• FormattedCurrency — money values, paired with a Currency object
• FormattedDate — dates / datetimes / relative time

All four call into the design-system adapters via inject — aurora's defaults pass values through unchanged, but a consumer app can override provideFormatting / provideDateFormatter at the root to install locale-aware formatting.

FormattedNumber

<FormattedNumber :value="1234567.89" />
<!-- → 1,234,567.89 (or locale-equivalent) -->

<FormattedNumber :value="1234567.89" :precision="0" />
<!-- → 1,234,568 -->

<FormattedNumber :value="1234567.89" scaled />
<!-- → 1.23M -->

Prop	Type	Default	Description
value	number	required	The number to format.
precision	number	2	Decimal places.
scaled	boolean	false	Apply K / M / B / T scaling for large numbers.
unitSystem	'metric' | 'imperial'	inherits	Override the consumer app's unit system.

FormattedValue

For measurement values where the unit matters semantically. Aurora's formatting adapter handles unit conversion and unit-string display per type.

<FormattedValue :value="100" type="energy" unit="kwh" />
<!-- → 100 kWh -->

<FormattedValue :value="2500000" type="emissions" unit="kg" :precision="0" />
<!-- → 2,500,000 kg CO₂e -->

<FormattedValue :value="500" type="water" unit="m3" short />
<!-- short=true uses the symbol where applicable -->

Prop	Type	Default	Description
value	number	required	The number to format.
type	'energy' | 'emissions' | 'water' | 'waste' | 'cost'	required	Measurement type — drives the unit-string formatting.
unit	per type (see below)	required	Unit of measurement, type-narrowed.
precision	number	2	Decimal places.
short	boolean	false	Use the short form of the unit (where applicable).
unitSystem	'metric' | 'imperial'	inherits	Override the consumer app's unit system.

Type → unit pairings

type	Allowed unit values
'energy'	'kwh' | 'mwh'
'emissions'	'kg' | 'lbs'
'water'	'm3' | 'gal'
'waste'	'tonnes' | 'tons'
'cost'	(uses currency-aware formatting)

FormattedCurrency

Currency-aware wrapper around FormattedNumber. Pass a Currency object ({ id, name, code, symbol }) and the value renders alongside the currency code (USD) or symbol ($).

<script setup>
const usd = { id: 1, name: 'US Dollar', code: 'USD', symbol: '$' }
</script>

<FormattedCurrency :value="100" :currency="usd" />
<!-- → 100.00 USD -->

<FormattedCurrency :value="100" :currency="usd" short />
<!-- → $100.00 -->

Prop	Type	Default	Description
value	number	required	Amount.
currency	{ id, name, code, symbol }	required	Currency descriptor.
short	boolean	false	Use the symbol ($) instead of the ISO code (USD).
precision	number	2	Decimal places.
scaled	boolean	false	Apply K / M / B scaling.
unitSystem	'metric' | 'imperial'	inherits	Override the consumer app's unit system.

FormattedDate

Renders a Date or ISO string formatted via DS_DATE_FORMATTER.

<FormattedDate :date="new Date()" />
<!-- → 2026-04-29 (locale-formatted by the consumer's adapter) -->

<FormattedDate date="2026-04-15T10:30:00Z" time />
<!-- include time -->

<FormattedDate :date="new Date(Date.now() - 7200_000)" relative />
<!-- → 2 hours ago — uses moment().fromNow() under the hood -->

Prop	Type	Default	Description
date	Date | string	required	Date value (ISO string is parsed).
time	boolean	false	Include the time portion.
relative	boolean	false	Render as relative time (e.g. "2 hours ago"). Renders via moment().fromNow() regardless of the DS_DATE_FORMATTER override.

Adapter contract

The four components consume two design-system tokens:

• DS_FORMATTING — drives FormattedNumber, FormattedValue, FormattedCurrency. Aurora ships an identity default (numbers print as-is). Override with provideFormatting(app) for locale-aware separators, scaled-number suffix conventions, and unit-system-aware decimal places.
• DS_DATE_FORMATTER — drives FormattedDate (non-relative output). Aurora ships a passthrough. Override with provideDateFormatter(app) for locale-correct date rendering.

Both adapters have sensible aurora-shipped defaults so these components work in zero-config contexts (docs, plain Vue apps) — you only need to override when you want app-specific locale or unit logic.