## Режим действий

Свойства `action`, `actionLabel`, `actionDescription` и `actionBars` предназначены для переключения Bars в контекстный режим действий при выборе элементов или выполнении массовых операций.

**Свойства:**

- `action` — активирует режим действий с полной заменой контента
- `actionLabel` — основной заголовок для режима действий (обычно счётчик выбранных элементов)
- `actionDescription` — дополнительное описание или инструкция для текущего действия
- `actionBars` — массив кнопок действий для операций над выбранными элементами

Свойства работают совместно: когда `action = true`, компонент заменяет стандартный контент (label, description, bars) на варианты для действий (actionLabel, actionDescription, actionBars). Кнопка назад автоматически трансформируется в кнопку выхода (iconClose) для возврата из режима действий. Все общие атрибуты кнопок из `buttonAttrs` применяются к `actionBars`, сохраняя согласованную стилизацию. Режим действий обычно контролируется внешним состоянием выбора и используется для временных фокусированных операций с возможностью выхода обратно в обычный вид.

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

const selectedItems = ref([])
const actionMode = computed(() => selectedItems.value.length > 0)

const handleSelect = (id) => {
  const index = selectedItems.value.indexOf(id)
  if (index > -1) {
    selectedItems.value.splice(index, 1)
  } else {
    selectedItems.value.push(id)
  }
}

const handleShare = () => {
  console.log('Поделиться выбранными:', selectedItems.value)
}

const handleDelete = () => {
  console.log('Удалить выбранные:', selectedItems.value)
  selectedItems.value = []
}
</script>

<template>
  <!-- Стандартный режим с обычной навигацией -->
  <Bars
    :action="actionMode"
    label="Контакты"
    description="Управление контактами"
    icon-back="arrow_back"
    icon-close="close"
    :bars="[
      { icon: 'add', label: 'Добавить' },
      { icon: 'search', label: 'Поиск' }
    ]"
    :action-label="`Выбрано: ${selectedItems.length}`"
    action-description="Выберите действие"
    :action-bars="[
      { icon: 'share', onClick: handleShare },
      { icon: 'delete', onClick: handleDelete }
    ]"
  />

  <!-- Режим действий всегда активен -->
  <Bars
    action
    action-label="Выбрано 5 элементов"
    action-description="Выберите действие"
    icon-close="close"
    :action-bars="[
      { icon: 'edit', label: 'Изменить' },
      { icon: 'archive', label: 'Архивировать' },
      { icon: 'delete', label: 'Удалить' }
    ]"
  />

  <!-- С v-model для двусторонней привязки -->
  <Bars
    v-model:action="actionMode"
    label="Сообщения"
    :action-label="`Сообщений: ${selectedItems.length}`"
    :action-bars="[
      { icon: 'mark_email_read' },
      { icon: 'delete' }
    ]"
  />
</template>
```
