ResponsiveFilter

Компонент ResponsiveFilter — это адаптивная панель фильтров, которая автоматически меняет поведение в зависимости от ширины экрана. На мобильных устройствах открывается как нижний шторка (bottom sheet), на десктопах — как выпадающая панель с автоматическим позиционированием.

Обзор

• Основное назначение: адаптивный контейнер для фильтров таблицы или списка.
• Ключевые возможности:
  • Мобильный режим (< 640px): кнопка + нижняя шторка с оверлеем и анимацией снизу.
  • Десктопный режим (≥ 640px): кнопка + выпадающая панель с позиционированием.
  • Автоматический выбор позиции панели (сверху/снизу) в зависимости от доступного пространства.
  • Перерасчёт позиции при скролле и ресайзе.
  • Оверлей для закрытия по клику вне панели.
  • Кастомизация кнопки через слот button или проп buttonContent.

API компонента

Props

Слоты

Режимы работы

Мобильный режим (< 640px)

• Кнопка: Button с variant="outlined".
• Панель: фиксированная снизу шторка с закруглёнными верхними углами.
• Анимация: появление снизу (translate-y-full → translate-y-0).
• Оверлей: полупрозрачный фон с блюром.
• Портал: телепортируется в body с z-index: 101.

Десктопный режим (≥ 640px)

• Кнопка: Button с variant="outlined" и пунктирной рамкой.
• Панель: абсолютно позиционированная панель с тенью.
• Анимация: появление с небольшим сдвигом вниз (translate-y-2 → translate-y-0).
• Оверлей: прозрачный, для закрытия по клику вне панели.
• Позиционирование: автоматически выбирает отображение сверху или снизу от кнопки.

Состояния кнопки

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

<ResponsiveFilter button-content="Фильтры">
    <div class="p-4">
        <h4 class="mb-3 font-medium">Фильтры</h4>
        <div class="space-y-3">
            <Select v-model="status" label="Статус" :data="statuses" />
            <Select v-model="category" label="Категория" :data="categories" />
            <Button color="primary" class="w-full" @click="applyFilters">Применить</Button>
        </div>
    </div>
</ResponsiveFilter>