GrNumberInput

• значение числовое — количество, цена, процент: v-model даёт number, а не строку;
• есть шаг и границы — step, min, max с кнопками ± и удержанием;
• важна точность — precision вместе с разделителем и группировкой разрядов по локали;
• пустое значение допустимо — null означает «не заполнено», а не ноль.

Разница с GrInput type="number" не косметическая: нативное числовое поле отдаёт строку, теряет значение на неверном вводе и по-разному ведёт себя в браузерах. Здесь модель — number | null, и null отличается от нуля.

v-model — number | null, где null означает «пусто». Так же, как у GrSlider: числовой контрол отдаёт число, а не строку, которую потребителю приходится разбирать самому.

Возражение против числовой модели было такое: незавершённый ввод («-», «1,») числом не является, а превращать его в NaN на каждом нажатии нельзя. Оно снимается разделением ролей — незавершённый набор просто не обязан быть моделью:

• черновик — строка ровно в том виде, в каком её набирают. Живёт внутри поля, пока набор не завершён, и именно он показывается на экране;
• модель — число. Пока черновик не разбирается в число, модель говорит null, а не хранит полуфабрикат.

Коммит (change, потеря фокуса, шаг кнопкой или клавишей) снимает черновик: применяются min/max и precision, и показ снова считается от модели. Именно поэтому precision="2" не превращает «7» в «7.00» прямо под курсором — только по завершении ввода.

decimalSeparator перестаёт быть частью значения и остаётся тем, чем и был, — способом показа и ввода дробной части. В модели 1,25 при decimal-separator="," лежит как 1.25.

<GrNumberInput v-model="qty" controls :min="1" :max="10" />

controls показывает кнопки, controlsDirection ставит их столбиком справа или по бокам поля.

Кнопка гаснет на своей границе — на максимуме «+» недоступна, а не молча бездействует. В readonly гаснут обе: кнопка, которая заведомо получит отказ, вводит в заблуждение. Удержание кнопки шагает повторно (пауза 400 мс, затем каждые 60 мс) и останавливается на границе, при отпускании и при уходе курсора. Финальный клик такого удержания шага не даёт — это хвост жеста, а не новое намерение. Клавиатурная активация (Enter/Space) под это правило не подпадает никогда: она шагает всегда, даже если жест до неё оборвался без клика.

Фокус кнопка себе не забирает: нажав Enter на «+», клавиатурный пользователь остаётся на ней и может нажать снова. Поле фокусируется только тогда, когда шаг пришёл от него самого — стрелками ↑/↓.

step задаёт величину шага, precision — сколько знаков оставлять. Дробный шаг не копит двоичную погрешность и без precision: результат округляется до разрядности большего из операндов, поэтому три нажатия ↑ при step="0.1" дают 0.3, а не 0.30000000000000004.

PageUp/PageDown шагают крупно — по тому же правилу, что у GrSlider: десять шагов либо десятая часть диапазона, что крупнее. Без заданных min/max диапазона не существует, и остаются десять шагов.

useGrouping показывает значение с разделителями разрядов, пока поле не в фокусе: при правке группировка мешала бы. Локаль берётся из пропа locale, а если он не задан — из i18n-адаптера пакета, так что в мультиязычном приложении её не нужно передавать каждому полю.

При группировке отформатированное значение уходит в aria-valuetext — иначе диктор читал бы сырое число. Без группировки атрибут не выставляется: aria-valuenow уже несёт то же самое.

clearable добавляет крестик; он не показывается при пустом значении, в readonly и disabled. Очистка эмитит clear и возвращает фокус в поле.

Набор событий совпадает с GrInput: update:modelValue, change, focus, blur, clear.

state (default | success | warning | danger) задаёт оттенок рамки, invalid форсирует красную. disabled гасит поле токенами --gr-disabled-*, а не прозрачностью: opacity разбавляет выверенные на AA цвета текста.

readonly-поле ведёт себя как текст: стрелки, PageUp/PageDown и Home/End отдаются нативной каретке, значение не меняется ни клавишами, ни кнопками «±» (они в этом состоянии недоступны), ни автоповтором.