Context Menu

Menu de contexto exibido ao clicar com o botão direito sobre um elemento.

Uso

<script setup lang="ts">
import { ContextMenu } from '@halfbyte/maka'

const itens = [
  { value: 'copiar', label: 'Copiar' },
  { value: 'colar', label: 'Colar' },
  { value: 'excluir', label: 'Excluir' },
]

function onSelect(value: string) {
  console.log(value)
}
</script>

<template>
  <ContextMenu :items="itens" @select="onSelect">
    <div style="padding: 32px; border: 1px dashed; border-radius: 8px">
      Clique com o botão direito aqui
    </div>
  </ContextMenu>
</template>

Com grupos

<ContextMenu :groups="grupos" @select="onSelect">
  <div>Área de contexto</div>
</ContextMenu>

Props

Prop	Tipo	Descrição
items	MenuItem[]	Lista plana de itens (exclusivo com groups)
groups	MenuGroup[]	Grupos de itens (exclusivo com items)

MenuItem

Campo	Tipo	Descrição
value	string	Identificador único do item
label	string	Texto exibido
disabled	boolean	Desabilita o item (opcional)

MenuGroup

Campo	Tipo	Descrição
label	string	Rótulo do grupo (opcional)
items	MenuItem[]	Lista de itens pertencentes ao grupo

Slots

Slot	Descrição
default	Elemento que define a área de contexto
icon-{value}	Ícone personalizado para um item
content	Conteúdo totalmente customizado do menu

Events

Evento	Payload	Descrição
select	string	Emitido ao clicar em um item