Command

Paleta de comandos modal com busca em tempo real. Ideal para atalhos de teclado (⌘K) e busca rápida de ações.

Uso

<script setup lang="ts">
import { Command, Button } from '@halfbyte/maka'
import { ref } from 'vue'

const aberto = ref(false)

const comandos = [
  { value: 'novo-arquivo',   label: 'Novo arquivo',   group: 'Arquivo' },
  { value: 'abrir',          label: 'Abrir…',         group: 'Arquivo' },
  { value: 'salvar',         label: 'Salvar',         group: 'Arquivo' },
  { value: 'configuracoes',  label: 'Configurações',  group: 'Sistema' },
  { value: 'tema',           label: 'Alternar tema',  group: 'Sistema' },
]
</script>

<template>
  <Button @click="aberto = true">Abrir paleta (⌘K)</Button>

  <Command
    v-model="aberto"
    :items="comandos"
    placeholder="Pesquisar comandos…"
    @select="(val) => console.log(val)"
  />
</template>

Com atalho de teclado

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

const aberto = ref(false)

function onKeydown(e: KeyboardEvent) {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault()
    aberto.value = true
  }
}

onMounted(() => document.addEventListener('keydown', onKeydown))
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
</script>

Props

Prop	Tipo	Padrão
modelValue	boolean	false
items	CommandItem[]	[]
placeholder	string	"Pesquisar…"
emptyText	string	"Nenhum resultado encontrado."

CommandItem

Campo	Tipo	Descrição
value	string	Identificador único do item
label	string	Texto principal
description	string	Texto secundário (opcional)
group	string	Grupo ao qual o item pertence
disabled	boolean	Desabilita o item (opcional)

Slots

Slot	Descrição
icon-{value}	Ícone à esquerda do item
suffix-{value}	Conteúdo à direita do item (ex: Kbd)

Events

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao abrir/fechar
select	string	Emitido ao selecionar um comando