import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/functional/# Управление списками'/>

# Управление списками

Класс **ListDataRef** — это контроллер для управления сложными списками данных, выпадающими меню и деревьями в экосистеме **Vue 3**. Он автоматизирует рутинные задачи по фильтрации, выделению элементов, управлению фокусом и работе со вложенными структурами.

## Инициализация и Данные

Контроллер принимает реактивные источники данных и предоставляет оптимизированные наборы свойств для отрисовки компонентов.

```javascript
import { ref } from 'vue'
import { ListDataRef } from '@dxtmisha/functional'

const items = ref([{ value: 1, label: 'Пункт' }, ...])
const controller = new ListDataRef(items)

// 1. Полный набор данных для отрисовки (с состоянием focus/selected/disabled)
const list = controller.fullData 

// 2. Оптимизированный список (liteData)
// Автоматически упрощает структуру при очень больших объемах данных
const fastList = controller.liteData 

// 3. Плоская карта всех элементов (включая вложенные)
const flatMap = controller.map
```

## Выделение и Состояние

Автоматическое управление множественным или одиночным выбором с учетом лимитов и текущего состояния локали.

```javascript
const selected = ref([1])
// Чтобы пропустить необязательные аргументы, используйте undefined
const controller = new ListDataRef(items, undefined, undefined, undefined, undefined, selected)

// 1. Получение выбранных значений и названий
controller.selectedValues // ComputedRef<[1]>
controller.selectedNames  // ComputedRef<['Пункт']>

// 2. Проверка лимитов (min/max)
controller.isSelectedMax  // True, если выбрано максимально допустимое кол-во
```

## Навигация и Фокус

Контроллер предоставляет систему методов для «умного» перемещения по списку. Навигация автоматически пропускает неактивные элементы и заголовки групп, работая только с доступными для выбора пунктами.

```javascript
const focus = ref(1)
const controller = new ListDataRef(items, focus)

// 1. Состояния фокуса и поиска
controller.isFocus()        // Проверка корректности текущего фокуса
controller.isHighlight()    // Есть ли совпадения при поиске
controller.highlightFirstItem // Индекс первого найденного элемента

// 2. Относительная навигация (от выделенного элемента)
const next = controller.getSelectedNext() // Индекс следующего доступного пункта
const prev = controller.getSelectedPrev() // Индекс предыдущего доступного пункта

// 3. Свободная навигация (по шагам или объектам)
const item = controller.getItemByStep(currentItem, 2) // Через 2 пункта от текущего
const firstInGroup = controller.getFirstItemByParent('group-id') // Первый в группе
```

## Работа с вложенностью

Для работы с группами или древовидными структурами используется метод `getSubList()`. Он создает новый экземпляр контроллера для вложенных данных, сохраняя общую связь с глобальным состоянием фокуса и выделения.

```javascript
// Внутри компонента группы или выпадающего меню:
const subController = controller.getSubList(groupItem)

// subController будет автоматически следить за изменениями в родительском списке
const subItems = subController.fullData
```
