MeDropdown

Dropdown com posicionamento dinâmico via portal (document.body). Suporta posições (bottom/top/left/right), alinhamento e trigger customizável via slot.

Playground

Importação

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

Uso Básico

<MeDropdown :button-props="{ label: 'Opções' }">
  <MeButton label="Editar" flat icon="edit" />
  <MeButton label="Duplicar" flat icon="content_copy" />
  <MeButton label="Excluir" flat icon="delete" variant="red" />
</MeDropdown>

Posições

O dropdown suporta 4 posições em relação ao trigger. Quando não há espaço suficiente, o posicionamento é ajustado automaticamente.

<MeDropdown :button-props="{ label: 'Bottom' }" position="bottom">...</MeDropdown>
<MeDropdown :button-props="{ label: 'Top' }" position="top">...</MeDropdown>
<MeDropdown :button-props="{ label: 'Left' }" position="left">...</MeDropdown>
<MeDropdown :button-props="{ label: 'Right' }" position="right">...</MeDropdown>

Alinhamento

A prop align controla o alinhamento do dropdown em relação ao eixo secundário do trigger.

<MeDropdown :button-props="{ label: 'Start' }" align="start">...</MeDropdown>
<MeDropdown :button-props="{ label: 'Center' }" align="center">...</MeDropdown>
<MeDropdown :button-props="{ label: 'End' }" align="end">...</MeDropdown>

Disabled

<MeDropdown :button-props="{ label: 'Desabilitado' }" disabled>
  <MeButton label="Item 1" flat />
</MeDropdown>

Slot #trigger Customizado

Use o slot #trigger para substituir completamente o botão padrão.

<MeDropdown>
  <template #trigger>
    <MeButton icon="more_vert" flat />
  </template>
  <MeButton label="Editar" flat icon="edit" />
  <MeButton label="Excluir" flat icon="delete" variant="red" />
</MeDropdown>

Slot #trigger-icon

Use #trigger-icon para customizar apenas o ícone do botão padrão, mantendo o resto do trigger.

<MeDropdown :button-props="{ label: 'Mais opções' }">
  <template #trigger-icon>
    <MeIcon icon="more_vert" />
  </template>
  <MeButton label="Item 1" flat />
  <MeButton label="Item 2" flat />
</MeDropdown>

closeOnClick=false

Por padrão, o dropdown fecha ao clicar em qualquer item (exceto <input> e <textarea>). Use :close-on-click="false" quando o conteúdo tiver filtros ou formulários.

<MeDropdown :button-props="{ label: 'Filtros' }" :close-on-click="false">
  <MeButton label="Filtro A" flat />
  <MeButton label="Filtro B" flat />
</MeDropdown>

Controlado com v-model:visible

Use v-model:visible para controlar a abertura/fechamento programaticamente.

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

<template>
  <MeDropdown
    v-model:visible="isOpen"
    :button-props="{ label: 'Dropdown controlado' }"
    @open="console.log('abriu')"
    @close="console.log('fechou')"
  >
    <MeButton label="Item 1" flat />
    <MeButton label="Item 2" flat />
  </MeDropdown>

  <MeButton
    :label="isOpen ? 'Fechar' : 'Abrir programaticamente'"
    outlined
    @click="isOpen = !isOpen"
  />
</template>

API

Props

Prop	Tipo	Padrão	Descrição
visible	boolean	false	Controla a visibilidade — use com v-model:visible
position	'bottom' | 'top' | 'left' | 'right'	'bottom'	Posição do dropdown em relação ao trigger
align	'start' | 'center' | 'end'	'center'	Alinhamento no eixo secundário
closeOnClick	boolean	true	Fecha ao clicar em qualquer item (exceto inputs e textareas)
disabled	boolean	false	Impede abertura do dropdown
triggerStyle	Record<string, string>	{}	Estilos inline do elemento trigger
dropdownStyle	Record<string, string>	{}	Estilos inline do painel dropdown
buttonProps	Partial<MeButtonProps>	{}	Props repassadas ao MeButton padrão

Eventos

Evento	Payload	Descrição
update:visible	boolean	Emitido ao abrir/fechar — use com v-model:visible
open	—	Emitido ao abrir o dropdown
close	—	Emitido ao fechar o dropdown

Slots

Nome	Descrição
default	Conteúdo do dropdown (itens, botões, etc.)
trigger	Substitui o MeButton padrão como trigger
trigger-icon	Substitui apenas o ícone dentro do trigger padrão

Acessibilidade

• O trigger responde a keydown.enter para abertura/fechamento via teclado
• O dropdown fecha automaticamente ao clicar fora (mousedown no document)
• Use disabled para impedir interação quando a ação não está disponível

Posicionamento inteligente

O MeDropdown detecta automaticamente o espaço disponível na viewport e inverte a posição quando necessário (ex: bottom vira top se não houver espaço abaixo).