## Описание

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

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

**Основные возможности:**

- Структурированная текстовая иерархия (метка и описание с динамическим обновлением)
- Настраиваемая кнопка назад с навигацией и переключением иконки закрытия
- Гибкие массивы кнопок (bars) для основных действий справа
- Режим действий с отдельным контентом и набором кнопок для массовых операций
- Двусторонняя привязка (v-model:action) для синхронизации состояния
- Единые атрибуты кнопок (buttonAttrs) для согласованной стилизации
- Обработка событий для взаимодействий кликов и навигации
- Интеграция системы скелетонов для состояний загрузки
- Кастомизация иконок для кнопок назад и закрытия

**Типичные сценарии использования:**

- Заголовки экранов приложения с навигацией и действиями
- Панели инструментов для разделов и страниц
- Контекстные панели действий для операций с выбранными элементами
- Заголовки поиска с элементами управления фильтрами и сортировкой
- Экраны настроек с обратной навигацией
- Заголовки списков с поддержкой массовых действий
- Интерфейсы множественного выбора с режимом действий

```html
<script setup>
import { ref } from 'vue'

const actionMode = ref(false)
const selectedCount = ref(0)

const handleSearch = () => {
  console.log('Нажат поиск')
}

const handleFilter = () => {
  console.log('Нажат фильтр')
}

const handleDelete = () => {
  console.log('Удалить выбранные элементы')
  actionMode.value = false
  selectedCount.value = 0
}
</script>

<template>
  <div class="app-layout">
    <!-- Стандартный заголовок с навигацией и действиями -->
    <Bars
      label="Сообщения"
      description="Ваши беседы"
      icon-back="arrow_back"
      :bars="[
        { icon: 'search', onClick: handleSearch },
        { icon: 'filter_list', onClick: handleFilter },
        { icon: 'more_vert' }
      ]"
    />

    <!-- Заголовок с режимом действий для массовых операций -->
    <Bars
      v-model:action="actionMode"
      label="Контакты"
      description="Управление контактами"
      :action-label="`Выбрано: ${selectedCount}`"
      action-description="Выберите действие"
      icon-back="arrow_back"
      icon-close="close"
      :bars="[
        { icon: 'add' },
        { icon: 'search' }
      ]"
      :action-bars="[
        { icon: 'share' },
        { icon: 'delete', onClick: handleDelete }
      ]"
    />

    <!-- Панель инструментов с пользовательскими атрибутами кнопок -->
    <Bars
      label="Настройки"
      :button-attrs="{ secondary: true }"
      :bars="[
        { icon: 'sync', label: 'Синхр.' },
        { icon: 'info', label: 'Инфо' }
      ]"
    />
  </div>
</template>
```

> Bars разработан как UI-компонент верхнего уровня для создания согласованных заголовков приложений, панелей инструментов и контекстных интерфейсов действий с комплексной поддержкой навигации, управления действиями и массовых операций.

