# Accordion Component

## Описание

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

## Пропсы

| Название       | Тип                                                    | По умолчанию          | Описание                                                      |
| -------------- | ------------------------------------------------------ | --------------------- | ------------------------------------------------------------- |
| `id`           | `string`                                               | `crypto.randomUUID()` | Уникальный идентификатор компонента                           |
| `isOpen`       | `boolean`                                              | `false`               | Состояние открытия/закрытия аккордеона                        |
| `wrapperClass` | `string`                                               | `""`                  | Дополнительные CSS-классы для обертки компонента              |
| `size`         | `object`                                               | `-`                   | Размеры сетки содержимого (количество колонок и строк)        |
| `size.height`  | `number`                                               | `1`                   | Количество строк в сетке содержимого                          |
| `size.width`   | `number`                                               | `1`                   | Количество колонок в сетке содержимого                        |
| `label`        | `object`                                               | `-`                   | Настройки заголовка аккордеона                                |
| `label.name`   | `string`                                               | `""`                  | Текст заголовка аккордеона                                    |
| `label.class`  | `string`                                               | `"text-left"`         | CSS-классы для стилизации текста заголовка                    |
| `label.icon`   | `ConstructorOfATypedSvelteComponent \| string \| null` | `null`                | Иконка, отображаемая в заголовке (SVG строка или компонент)   |
| `children`     | `Snippet`                                              | `undefined`           | Слот для содержимого, которое будет отображаться при открытии |
| `image`        | `string`                                               | `""`                  | URL изображения для фона содержимого аккордеона               |

## События

Компонент не генерирует специфические события, но использует встроенную функцию `toggle()` для переключения состояния открытия/закрытия при клике на кнопку заголовка.

## Примеры

### Базовое использование

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

<UI.Accordion label={{ name: "Accordion" }} isOpen={true}>
  <div class="flex flex-col">
    <h1>Содержимое компонента</h1>
    <h1>Содержимое компонента</h1>
    <h1>Содержимое компонента</h1>
  </div>
</UI.Accordion>
```

### Вложенные аккордеоны

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

<UI.Accordion label={{ name: "Main Accordion" }} isOpen={true}>
  <UI.Accordion label={{ name: "Nested Accordion 1", class: "" }} isOpen={false} wrapperClass="col-span-3">
    <h6>Содержимое вложенного Accordion 1</h6>
    <h5>Содержимое вложенного Accordion 1</h5>
    <h4>Содержимое вложенного Accordion 1</h4>
    <h3>Содержимое вложенного Accordion 1</h3>
    <h2>Содержимое вложенного Accordion 1</h2>
    <h1>Содержимое вложенного Accordion 1</h1>
  </UI.Accordion>
  <UI.Accordion label={{ name: "Nested Accordion 2", class: "" }} isOpen={false} wrapperClass="col-span-3">
    <h1>Содержимое вложенного Accordion 2</h1>
    <h2>Содержимое вложенного Accordion 2</h2>
    <h3>Содержимое вложенного Accordion 2</h3>
    <h4>Содержимое вложенного Accordion 2</h4>
    <h5>Содержимое вложенного Accordion 2</h5>
  </UI.Accordion>
  <UI.Accordion label={{ name: "Nested Accordion 3", class: "" }} isOpen={false} wrapperClass="col-span-3">
    <h4>Содержимое вложенного Accordion 3</h4>
    <h3>Содержимое вложенного Accordion 3</h3>
    <h2>Содержимое вложенного Accordion 3</h2>
    <h1>Содержимое вложенного Accordion 3</h1>
  </UI.Accordion>
</UI.Accordion>
```

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

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

- Переменная `isOpen` является реактивной и управляет состоянием отображения содержимого
- Функция `toggle()` изменяет состояние `isOpen`, вызывая повторный рендеринг компонента

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

- Используется стор `twMerge` для объединения Tailwind CSS классов
- Применяется переход `slide` из `svelte/transition` для анимации открытия/закрытия

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

- `transition:slide` для анимации открытия/закрытия содержимого
- `@render children` для отображения переданного содержимого
- `bind:isOpen` в конструкторе свойств для двусторонней привязки состояния

### Слоты

- `children` - слот для содержимого, которое отображается внутри аккордеона при его открытии

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

### Описание

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

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

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

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

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

## Заметки

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

- Компонент использует Tailwind CSS для адаптивного дизайна
- Сетка содержимого адаптируется под размеры экрана (sm:p-3)
- Используются относительные единицы измерения для обеспечения масштабируемости

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

- При использовании изображения фона высота строк сетки устанавливается в `minmax(6.5rem, auto)` вместо `auto`
- Необходимо убедиться, что переданный компонент иконки является валидным Svelte компонентом или SVG строкой
- Размеры сетки должны быть положительными числами (по умолчанию 1x1)

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

- Компонент использует оптимизации Svelte для минимизации перерисовок
- Содержимое аккордеона рендерится только при его открытии (`{#if isOpen}`)
- Используется эффективное объединение классов через `twMerge`