# Input Component
## Описание
Поле ввода - это UI-компонент, который предоставляет возможность ввода текстовых и числовых значений. Компонент поддерживает несколько типов ввода (текст, пароль, число, многострочный текст, битовая маска), валидацию по регулярному выражению, всплывающую подсказку, кнопку копирования и другие параметры через систему пропсов.
## Пропсы
| Название | Тип | По умолчанию | Описание |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
| `type` | `"text" \| "password" \| "number" \| "text-area" \| "bitMode"` | `"text"` | Тип поля ввода: `text` — обычный текст, `password` — скрытый ввод с кнопкой показа, `number` — числовое поле со стрелками, `text-area` — многострочное поле, `bitMode` — числовое поле, диапазон которого рассчитывается из `range` |
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для внешней обёртки компонента |
| `label` | `object` | `-` | Настройки подписи компонента |
| `label.name` | `string` | `""` | Текст заголовка |
| `label.class` | `string` | `""` | CSS-классы для стилизации заголовка |
| `componentClass` | `string` | `""` | Дополнительные CSS-классы для самого элемента ввода (`input`/`textarea`) |
| `disabled` | `boolean` | `false` | Отключает ввод: блокирует взаимодействие с элементом и визуально затемняет компонент |
| `readonly` | `boolean` | `false` | Режим только для чтения: позволяет выделять и копировать текст, но запрещает редактирование |
| `value` | `string \| number` | `undefined` | Текущее значение поля; поддерживает двустороннее связывание (`$bindable`) |
| `range` | `object` | `undefined` | Диапазон битов для типа `bitMode`: `start`/`end` — индексы, используемые для расчёта `number.maxNum` (`2^(end - start + 1) - 1`) |
| `range.start` | `number` | `undefined` | Начальный индекс бита |
| `range.end` | `number` | `undefined` | Конечный индекс бита |
| `maxlength` | `number` | `100` | Максимальное количество символов, разрешённых для ввода |
| `textareaRows` | `number` | `3` | Количество видимых строк для типа `text-area` |
| `placeholder` | `string` | `""` | Текст-подсказка, отображаемый в пустом поле ввода |
| `isValid` | `boolean` | `true` | Состояние валидации: при `false` поле подсвечивается красным; поддерживает двустороннее связывание (`$bindable`) |
| `number` | `object` | `-` | Настройки для числового ввода |
| `number.minNum` | `number` | `-1000000` | Минимальное значение диапазона |
| `number.maxNum` | `number` | `1000000` | Максимальное значение диапазона |
| `number.step` | `number` | `1` | Шаг изменения значения стрелками |
| `help` | `object` | `-` | Дополнительные настройки поля |
| `help.info` | `string` | `""` | Текст всплывающей подсказки |
| `help.copyButton` | `boolean` | `false` | Показать кнопку копирования значения |
| `help.regExp` | `string \| RegExp` | `undefined` | Регулярное выражение для валидации ввода |
| `help.autocomplete` | `"on" \| "off" \| "given-name" \| "family-name" \| "nickname" \| "username" \| "new-password" \| "current-password" \| "organization-title" \| "country-name" \| "address-level1" \| "address-level2" \| "street-address" \| "postal-code" \| "email" \| "tel" \| null` | `"off"` | Атрибут автозаполнения браузера |
| `onUpdate` | `(value: string \| number) => void` | `undefined` | Callback-функция, вызываемая при изменении значения поля; передаёт новое значение |
## События
| Название | Тип | Описание |
| -------- | --------------------------------- | --------------------------------------------- |
| onUpdate | (value: string \| number) => void | Срабатывает при изменении значения поля ввода |
## Примеры
### Базовое использование
```svelte
```
### Поле с кнопкой копирования (только для чтения)
```svelte
```
### Числовое поле со стрелками
```svelte
(inputNumber = value)}
/>
```
### Многострочное поле
```svelte
```
## Внутренняя архитектура
### Реактивность
- Переменная `showPassword` управляет отображением скрытого/видимого текста для типа `password`
- Переменная `showInfo` управляет видимостью информационной подсказки
- Переменная `isCopied` управляет состоянием кнопки копирования
- Функция `RegExpObj` разбирает строку или объект `RegExp` в регулярное выражение для валидации
- `$effect` пересчитывает `isValid` при изменении значения и `help.regExp` (для типов, отличных от `number`)
- `$effect` округляет числовое значение (`roundToClean`) при изменении `value` для типа `number`
### Сторы и зависимости
- Используется стор `twMerge` для объединения Tailwind CSS классов
- Используется компонент `InfoIcon` для отображения иконки информационной подсказки
- Применяется переход `fly` из `svelte/transition` для анимации подсказки и `fade` для индикации копирования
### Директивы
- `bind:value` для двусторонней привязки текущего значения
- `oninput` для обработки ввода и вызова `onUpdate`
- `onkeydown` блокирует ввод символа `.` для типа `number`
- `onclick` для кнопок инкремента/декремента (типы `number`/`bitMode`), кнопки копирования и кнопки показа пароля
- `onmouseenter`/`onmouseleave` для показа/скрытия информационной подсказки
### Слоты
- Компонент не использует внешних слотов
## Конструктор свойств (InputProps.svelte)
### Описание
Компонент `InputProps.svelte` предоставляет визуальный интерфейс для редактирования свойств поля ввода. Поддерживает два режима отображения: для конструктора и для редактирования.
### Пропсы конструктора
| Название | Тип | По умолчанию | Описание |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------- |
| `component` | `UIComponent & { properties: Partial }` | `-` | Объект компонента с его свойствами |
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-` | Коллбэк для обновления свойств компонента |
| `forConstructor` | `boolean` | `true` | Режим отображения (для конструктора или редактирования) |
### Особенности конструктора
- Предоставляет визуальные элементы управления для всех доступных свойств
- Поддерживает выбор типа поля: текст, пароль, число, многострочный текст, битовая маска
- Включает библиотеку готовых регулярных выражений для валидации (модальное окно с выбором шаблона)
- Для типа `bitMode` позволяет задать диапазон битов слайдером; `number.maxNum` рассчитывается автоматически
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
- Использует систему локализации через `$T('constructor.props.*')`
- Поддерживает валидацию вводимых данных через регулярные выражения
## Заметки
### Адаптивность
- Компонент использует Tailwind CSS для адаптивного дизайна
- Используются относительные единицы измерения для обеспечения масштабируемости
### Ограничения
- Для типа `password` кнопка копирования недоступна
- Символ `.` блокируется при вводе в числовое поле
- Числовые значения автоматически округляются (до 5 знаков после запятой) для устранения ошибок плавающей точки
- Подсказки не поддерживают HTML-разметку, отображают только текст
### Производительность
- Компонент использует оптимизации Svelte для минимизации перерисовок
- Используется эффективное объединение классов через `twMerge`