Dialog

Caixa de diálogo sobreposta ao conteúdo principal para foco em uma ação ou informação.

Uso

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

const aberto = ref(false)
</script>

<template>
  <Button @click="aberto = true">Abrir dialog</Button>

  <Modal v-model="aberto" title="Confirmar ação" description="Tem certeza que deseja continuar?">
    <p>Esta ação não pode ser desfeita.</p>

    <template #footer>
      <Button variant="outline" @click="aberto = false">Cancelar</Button>
      <Button @click="aberto = false">Confirmar</Button>
    </template>
  </Modal>
</template>

Tamanhos

<Modal size="sm" title="Pequeno" v-model="aberto">…</Modal>
<Modal size="md" title="Médio" v-model="aberto">…</Modal>
<Modal size="lg" title="Grande" v-model="aberto">…</Modal>
<Modal size="xl" title="Extra grande" v-model="aberto">…</Modal>
<Modal size="full" title="Tela cheia" v-model="aberto">…</Modal>

Slots

Slot	Descrição
default	Corpo do dialog
header	Substitui o header padrão (título + descrição)
footer	Rodapé com ações (botões)

Props

Prop	Tipo	Padrão
modelValue	boolean	false
title	string	—
description	string	—
size	"sm" | "md" | "lg" | "xl" | "full"	"md"
closable	boolean	true

Events

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao abrir/fechar dialog