MeDrawer

Painel lateral deslizante com overlay, suporte a quatro direções e fechamento por Escape ou clique no overlay.

Playground

Importação

<script>
import { MeDrawer } from '@/components/global/utils/export/index'
</script>

Uso Básico

Controle a visibilidade via prop :visible e escute o evento @close para fechar.

Meu Drawer

Conteúdo do drawer.

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>

<template>
  <MeButton label="Abrir Drawer" @click="isOpen = true" />

  <MeDrawer
    :visible="isOpen"
    title="Meu Drawer"
    @close="isOpen = false"
  >
    <template #body>
      <p>Conteúdo do drawer</p>
    </template>
  </MeDrawer>
</template>

Direções

O drawer pode abrir por qualquer lado com a prop direction.

Right

Abre pela direita.

Left

Abre pela esquerda.

Top

Abre pelo topo.

Bottom

Abre pela base.

<!-- Direita (padrão) -->
<MeDrawer :visible="isOpen" direction="right" @close="isOpen = false">
  <template #body>Conteúdo</template>
</MeDrawer>

<!-- Esquerda -->
<MeDrawer :visible="isOpen" direction="left" @close="isOpen = false">
  <template #body>Conteúdo</template>
</MeDrawer>

<!-- Topo -->
<MeDrawer :visible="isOpen" direction="top" @close="isOpen = false">
  <template #body>Conteúdo</template>
</MeDrawer>

<!-- Base -->
<MeDrawer :visible="isOpen" direction="bottom" @close="isOpen = false">
  <template #body>Conteúdo</template>
</MeDrawer>

Com Footer

Use o slot #footer para adicionar ações no rodapé.

Confirmar ação

Deseja prosseguir com a operação?

<MeDrawer :visible="isOpen" title="Confirmar ação" @close="isOpen = false">
  <template #body>
    <p>Deseja prosseguir com a operação?</p>
  </template>
  <template #footer>
    <div style="display: flex; gap: 8px; justify-content: flex-end;">
      <MeButton label="Confirmar" @click="isOpen = false" />
    </div>
  </template>
</MeDrawer>

Sem Header (hiddenHeader)

Oculta o header padrão e exibe apenas um botão de fechar flutuante no canto superior direito.

Drawer sem header. Feche pelo botão flutuante ou pressione Esc.

<MeDrawer :visible="isOpen" hidden-header @close="isOpen = false">
  <template #body>
    <p>Drawer sem header.</p>
  </template>
</MeDrawer>

Título via Slot

O slot #title substitui o título padrão no header, permitindo conteúdo customizado.

Título Customizado

Conteúdo com título via slot.

<MeDrawer :visible="isOpen" @close="isOpen = false">
  <template #title>
    <span style="color: #2563eb; font-weight: bold;">
      Título Customizado
    </span>
  </template>
  <template #body>
    <p>Conteúdo com título via slot.</p>
  </template>
</MeDrawer>

Sem Padding no Body (noPaddingInBody)

Remove o padding interno do body — útil para listas, tabelas ou conteúdo que deve ocupar toda a área.

Lista completa

• Item 1
• Item 2
• Item 3

<MeDrawer
  :visible="isOpen"
  title="Lista completa"
  no-padding-in-body
  @close="isOpen = false"
>
  <template #body>
    <ul style="margin: 0; padding: 0; list-style: none;">
      <li style="padding: 16px 24px; border-bottom: 1px solid #e5e7eb;">Item 1</li>
      <li style="padding: 16px 24px; border-bottom: 1px solid #e5e7eb;">Item 2</li>
      <li style="padding: 16px 24px;">Item 3</li>
    </ul>
  </template>
</MeDrawer>

Sem fechar ao clicar fora

Por padrão, clicar no overlay fecha o drawer. Use :close-on-click-outside="false" para desativar.

Formulário

Use o botão X ou pressione Esc para fechar. Clicar fora não fecha.

<MeDrawer
  :visible="isOpen"
  title="Formulário"
  :close-on-click-outside="false"
  @close="isOpen = false"
>
  <template #body>
    <p>Use o botão X ou pressione Esc para fechar.</p>
  </template>
</MeDrawer>

API

Props

Prop	Tipo	Padrão	Descrição
visible	boolean	false	Controla a visibilidade do drawer
direction	'left' | 'right' | 'top' | 'bottom'	'right'	Direção de abertura
title	string	undefined	Título no header (substituível via slot #title)
hiddenHeader	boolean	false	Oculta o header, exibe botão flutuante de fechar
hiddenFooter	boolean	false	Oculta o footer
noPaddingInBody	boolean	false	Remove padding interno do body
closeOnClickOutside	boolean	true	Fecha ao clicar no overlay

Eventos

Evento	Payload	Descrição
close	void	Emitido ao fechar via botão, Escape ou clique no overlay

Slots

Nome	Descrição
title	Substitui o título padrão no header
body	Conteúdo principal do drawer
footer	Área de ações no rodapé

Acessibilidade

• Tecla Esc fecha o drawer quando está aberto
• O scroll da página é bloqueado enquanto o drawer está visível
• Clique no overlay (fundo escuro) fecha o drawer quando closeOnClickOutside=true

Foco no teclado

Para garantir acessibilidade completa, coloque os elementos interativos do body em ordem lógica de tabulação. O drawer não captura o foco automaticamente — considere usar autofocus no primeiro campo quando necessário.