# TextField Component

## Описание

Текстовое поле - это UI-компонент, который позволяет отображать текст с различными настройками размера, стиля и оформления. Компонент поддерживает настройку размера текста, классов стилизации, фона и другие параметры через систему пропсов.

## Пропсы

| Название        | Тип                                                   | По умолчанию          | Описание                                                                                                           |
| --------------- | ----------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `id`            | `string`                                              | `crypto.randomUUID()` | Уникальный идентификатор компонента                                                                                |
| `wrapperClass`  | `string`                                              | `""`                  | CSS-классы для обертки компонента                                                                                  |
| `background`    | `boolean`                                             | `false`               | Показывать фоновое оформление: добавляет закруглённый контейнер с отступами и цветом `--back-color`                |
| `underline`     | `boolean`                                             | `false`               | Добавляет подчёркивание текста                                                                                     |
| `content`       | `object`                                              | `-`                   | Настройки содержимого текста                                                                                       |
| `content.name`  | `string`                                              | `""`                  | Текстовое содержимое                                                                                               |
| `content.class` | `string`                                              | `""`                  | CSS-классы для стилизации текста                                                                                   |
| `content.size`  | `"small" \| "base" \| "large" \| "huge" \| "massive"` | `"base"`              | Размер текста (`small` = text-sm, `base` = text-base, `large` = text-2xl, `huge` = text-4xl, `massive` = text-5xl) |

## События

Компонент не генерирует специфические события.

## Примеры

### Базовое текстовое поле

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"
</script>

<UI.TextField content={{ name: "Random text", size: "small", class: "" }} wrapperClass="text-gray-400" />
```

### Текстовое поле с настройками

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"
</script>

<UI.TextField content={{ name: "Random text", size: "base", class: "font-bold" }} wrapperClass="text-red-400" />
```

### Текстовое поле с фоном

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"
</script>

<UI.TextField content={{ name: "Random text", size: "large", class: "" }} wrapperClass="text-lime-400" background={true} />
```

## Внутренняя архитектура

### Реактивность

- Объект `textSize` определяет CSS-классы для различных размеров текста
- Переменная `background` управляет отображением фонового оформления

### Сторы и зависимости

- Используется стор `twMerge` для объединения Tailwind CSS классов

### Директивы

- `twMerge` для объединения классов обертки и текста
- `$props()` для получения пропсов компонента

### Слоты

- Компонент не использует внешних слотов

## Конструктор свойств (TextFieldProps.svelte)

### Описание

Компонент `TextFieldProps.svelte` предоставляет визуальный интерфейс для редактирования свойств компонента текстового поля. Поддерживает два режима отображения: для конструктора и для редактирования.

### Пропсы конструктора

| Название           | Тип                                                                                                                                 | По умолчанию | Описание                                                |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------- |
| `component`        | `UIComponent & { properties: Partial<ITextFieldProps> }`                                                                            | `-`          | Объект компонента с его свойствами                      |
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`          | Коллбэк для обновления свойств компонента               |
| `forConstructor`   | `boolean`                                                                                                                           | `true`       | Режим отображения (для конструктора или редактирования) |

### Особенности конструктора

- Предоставляет визуальные элементы управления для всех доступных свойств
- Поддерживает настройку размера текста и цвета
- Включает настройки оформления (жирный, курсив, фон)
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
- Использует систему локализации через `$T('constructor.props.*')`

## Заметки

### Адаптивность

- Компонент использует Tailwind CSS для адаптивного дизайна
- Текст автоматически адаптируется под размер контейнера
- Используются относительные единицы измерения для обеспечения масштабируемости

### Ограничения

- Размер текста ограничен пятью вариантами (small, base, large, huge, massive)
- При использовании фона применяется стандартное оформление с закругленными углами
- Текст всегда выравнивается по центру

### Производительность

- Компонент использует оптимизации Svelte для минимизации перерисовок
- Используется эффективное объединение классов через `twMerge`