Тестовое задание — выполнено

Ссылка на макет: Figma

Кратко

• Реализовал переиспользуемый компонент числового ввода NumericInput по макету.
• Ввод только цифр, визуальное форматирование группами по 3 через пробел.
• На бэкенд уходит СЫРОЕ значение без пробелов (через v-model).
• Учёл UX: вставка с очисткой, корректная работа каретки, клавиши редактирования, авто‑ширина от 72px.

Цель

• Создать переиспользуемый компонент числового ввода (далее — NumericInput) в соответствии с макетом и требованиями ниже.

Требования к функционалу

• Только цифры. Пользователь может вводить только цифры 0–9.
• Форматирование пробелами. Цифры группируются по 3 справа налево: например, 1442 → 1 442, 1234567 → 1 234 567.
• Адаптивная ширина. Минимальная ширина — 72px. Ширина увеличивается под содержимое, чтобы полностью помещалось текущее отформатированное значение (без горизонтального скролла). Ограничьте максимальную ширину разумным значением из макета/контейнера.
• Переиспользуемость. Из существующего инпута нужно выделить компонент, пригодный для использования в других частях проекта.

UX-детали (обязательные)

• Копирование/вставка. При вставке строк, содержащих нецифровые символы, допускайте только цифры; форматируйте результат по правилам выше.
• Клавиши редактирования. Корректная работа Backspace, Delete, стрелок, Home/End с учётом наличия пробелов-разделителей.
• Положение курсора. При автоматическом форматировании сохраняйте ожидаемую позицию каретки (не «прыгать» в конец).
• Очистка. Пустое значение — пустая строка без форматирования.

API компонента (минимум)

• v-model/modelValue: string | null — СЫРОЕ значение без пробелов (только цифры). То есть наружу уходит то, что нужно на бэкенд. Пустое — null.
• placeholder?: string
• disabled?: boolean
• name?: string
• Атрибуты доступности (aria-*) пробрасываются на корневой input.

Отображение в input форматируется пробелами только визуально.

Технологии

• Vue 3 + Vite + TypeScript
• Tailwind CSS (подключён через @tailwindcss/vite)

Критерии оценки

• Корректность форматирования и поведение при вводе/удалении/вставке.
• Стабильная работа каретки при автоформатировании.
• Переиспользуемость и простота API (v-model, базовые пропсы, доступность).
• Качество кода: типизация, читаемость, отсутствие лишней сложности.
• Аккуратный UI согласно макету, адаптивная ширина от 72px.

Установка и запуск

В проекте есть стандартные скрипты Vite. Можно использовать любой пакетный менеджер.

Вариант 1: npm

npm install
npm run dev

Вариант 2: pnpm

pnpm install
pnpm run dev

Вариант 3: bun

bun install
bun run dev

Сборка и предпросмотр:

npm run build
npm run preview

Проверки:

npm run type-check
npm run lint
npm run format

Тесты

Добавлены юнит‑тесты для утилит форматирования и компонента (Vitest, @testing-library/vue). Покрыто:

• Утилиты: очистка нецифровых символов, форматирование с пробелами, эвристика позиции каретки.
• Компонент: эмит только при изменении «сырого» значения, корректное визуальное форматирование, обработка вставки.

npm install
npm run test        # одноразовый прогон
npm run test:watch  # режим разработчика

Структура проекта (основное)

• src/main.ts — инициализация приложения.
• src/App.vue — пример использования компонента (список студентов, аватары, стрелки).
• src/components/NumericInput.vue — компонент числового ввода.
• src/utils/numberFormat.ts — утилиты форматирования.
• src/components/NumericInput.spec.ts — тесты компонента.
• src/utils/numberFormat.spec.ts — тесты утилит.
• public/img.png — превью для README.
• vite.config.ts, tsconfig*.json — конфигурация сборки/TS.
• eslint.config.ts — линтинг.

Как проверять результат

• Запустить dev и вручную проверить:
  • ввод только цифр, корректное группирование,
  • корректную работу удаления/вставки/стрелок,
  • удержание позиции каретки при форматировании,
  • адаптивную ширину от 72px и рост под содержимое.