GrValue

• пишете свой компонент с величиной — плитку, ячейку, строку отчёта: приписки оформятся так же, как в остальном пакете, без копирования классов;
• валюта стоит справа — 100 ₽, а не $100: сторона задаётся тем, в какую приписку положить символ;
• величина не число — «2 ч 15 мин», «—», «н/д» выводятся как есть;
• нужна своя вёрстка вокруг значения — знак, стрелка, скрытая подпись ложатся в слоты между частями записи.

Примитив ничего не форматирует: разряды, точность и разделители — забота того, кто передаёт значение. Это не экономия, а граница ответственности: «2 ч 15 мин» и «—» такие же величины, как 1 284 500, и компонент, который попытался бы их разобрать, испортил бы обе.

Форматирование по локали в пакете есть — formatStatisticValue; оно доступно отдельно и складывается с примитивом как угодно.

Компонент не решает, чем является приписка. Это и есть его смысл: $, ₽, %, мс, «за заказ» — разные вещи, и одно правило на всех однажды соврёт.

Дефолты выбраны по частоте, а не по истине:

За ними стоит наблюдение: слева чаще пишут валюту, и она часть суммы; справа чаще единицу, и она величине не принадлежит. $14,99 и 42 % получаются сами.

Рубль пишут после числа, но он такая же часть суммы, как $ перед ней. Поэтому дефолт суффикса ему не подходит, и его меняют токенами:

<GrValue
  :value="formatted"
  suffix="₽"
  style="--gr-value-suffix-color: currentColor; --gr-value-suffix-size: 1em"
/>

Приложению, где так всегда, удобнее объявить это классом один раз:

.amount { --gr-value-suffix-color: currentColor; --gr-value-suffix-size: 1em; }

Именно currentColor и 1em, а не inherit. У пользовательского свойства inherit — ключевое слово наследования самой переменной: оно означает «возьми её значение у родителя», а у родителя её нет, и токен остаётся неопределённым. Фолбэк тогда срабатывает как обычно, и приписка выглядит нетронутой — правка молча не даёт ничего. currentColor и 1em — настоящие значения, и они означают ровно то, что нужно: цвет и кегль величины.

Сторону символа компонент не выбирает. Соблазн вывести её из локали есть, но Intl расставляет валюту по локали, а не по валюте: в ru-RU справа оказываются все, включая доллар (1 284 500,50 $), в en-US слева все, включая рубль (RUB 1,284,500.50). Привычное «₽ справа, $ и € слева» — правило смешанное и продуктовое, вывести его неоткуда. Решает потребитель, выбирая приписку.

Цвет префикса по умолчанию — inherit, а не копия роли тона. Разница видна на отрицательной сумме: краснеет вся запись, а не число без символа валюты. Поэтому тон задаётся один раз на родителе — так делает GrStatistic, — и примитиву о нём знать не нужно.

Тем же способом наследуется кегль: своей шкалы размеров у примитива нет, величина набирается кеглем места, где стоит.

Позиции приписок фиксированы: префикс слева, суффикс справа. Порядок не меняется ни пропом, ни локалью — величина, у которой приписки переставляются местами, это две разные записи, и выбрать между ними может только автор экрана.