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

<Meta title='@dxtmisha/ru/functional/Composables/useRouterList - Управление списком ссылок'/>

# `useRouterList`

Управление списком ссылок для роутера. Позволяет создавать навигационные меню на основе списка данных, автоматически обрабатывая активное состояние и переходы.

**Параметры:**
- `list: RefType<ConstrBind<T>[] | undefined>` — список элементов навигации. Каждый элемент должен содержать `value` и `label`.
- `selected?: Ref<string> | string` — изначально выбранный элемент или его значение. Если не указан, выбирается первый элемент списка.
- `hasTo?: boolean` — автоматическое добавление свойства `to` к элементам списка для навигации (по умолчанию `false`).

**Возвращает:**
Объект с реактивными свойствами и методами управления:
- `item: ComputedRef<T | undefined>` — Вычисляемое свойство, возвращающее объект текущего активного элемента на основе `selected`.
- `selected: Ref<string>` — Реактивная ссылка на значение (`value`) выбранного элемента. Позволяет как получать, так и устанавливать текущий выбор.
- `label: ComputedRef<NumberOrString>` — Вычисляемое свойство, возвращающее текстовую метку (`label`) текущего выбранного элемента.
- `list: ComputedRef<ConstrBind<T>[]>` — Вычисляемый список элементов. Если `hasTo` установлен в `true`, каждый элемент автоматически дополняется свойством `to` для интеграции с маршрутизацией.
- `to(name?: string): void` — Метод для программного перехода к элементу по его имени (`value`). Обновляет `selected` и выполняет `router.push`.
- `toMain(): void` — Метод для быстрого перехода к первому ("главному") элементу в списке `list`.

```typescript
import { ref } from 'vue'
import { useRouterList } from '@dxtmisha/functional'

const menuItems = ref([
  { value: 'dashboard', label: 'Дашборд' },
  { value: 'settings', label: 'Настройки' }
])

// Инициализация с выбором 'dashboard' и автоматическим созданием свойства 'to'
const { list, selected, to } = useRouterList(menuItems, 'dashboard', true)

// Список будет содержать объекты с полем 'to', например:
// { value: 'dashboard', label: 'Дашборд', to: { name: 'dashboard' } }

// Программный переход
to('settings')
```