K
KoreUI

Confirm

Feedback

Diálogos de confirmación que reutilizan el sistema de overlay, con callbacks a métodos Livewire.

Demo en vivo

Prueba los diálogos de confirmación. Al confirmar se dispara un toast de éxito como callback.

Tipos

Persistente

Introducción

Los diálogos de confirmación reutilizan el sistema de overlay. Al llamar $this->confirm() se despacha un evento que monta un componente genérico kore-confirm-dialog dentro del overlay manager. No necesitas crear componentes adicionales.

Requisito: Tu layout debe incluir tanto <livewire:kore-overlay-manager /> como <livewire:kore-feedback-manager />.

Uso básico

Agrega el trait InteractsWithFeedback y usa el método confirm() en tu componente Livewire.

Componente Livewire 
namespace App\Livewire;

use KoreUi\Core\Concerns\InteractsWithFeedback;
use Livewire\Component;

class MyComponent extends Component
{
    use InteractsWithFeedback;

    public function delete(int $id): void
    {
        $this->confirm('¿Eliminar este registro?')
            ->onConfirm('confirmDelete', [$id])
            ->send();
    }

    public function confirmDelete(int $id): void
    {
        Record::destroy($id);
        $this->toast()->success('Registro eliminado')->send();
    }
}
namespace App\Livewire;

use KoreUi\Core\Concerns\InteractsWithFeedback;
use Livewire\Component;

class MyComponent extends Component
{
    use InteractsWithFeedback;

    public function delete(int $id): void
    {
        $this->confirm('¿Eliminar este registro?')
            ->onConfirm('confirmDelete', [$id])
            ->send();
    }

    public function confirmDelete(int $id): void
    {
        Record::destroy($id);
        $this->toast()->success('Registro eliminado')->send();
    }
}

Tipos

El tipo controla el ícono y el color del botón de confirmación.

Tipo Ícono Botón confirmar
question (default)circle-helpPrimary
warningtriangle-alertDestructive
errorcircle-xDestructive
infoinfoPrimary
Cambiar tipo 
$this->confirm('¿Descartar cambios?')
    ->type('warning')
    ->send();
$this->confirm('¿Descartar cambios?')
    ->type('warning')
    ->send();

Descripción

Agrega contexto adicional debajo del título.

Con descripción 
$this->confirm('¿Eliminar cuenta permanentemente?')
    ->description('Esta acción no se puede deshacer. Todos los datos serán borrados.')
    ->type('error')
    ->send();
$this->confirm('¿Eliminar cuenta permanentemente?')
    ->description('Esta acción no se puede deshacer. Todos los datos serán borrados.')
    ->type('error')
    ->send();

Texto personalizado

Sobreescribe los textos por defecto de los botones 'Confirmar' y 'Cancelar'.

Botones personalizados 
$this->confirm('¿Publicar artículo?')
    ->confirmText('Publicar ahora')
    ->cancelText('Mantener como borrador')
    ->onConfirm('publish')
    ->send();
$this->confirm('¿Publicar artículo?')
    ->confirmText('Publicar ahora')
    ->cancelText('Mantener como borrador')
    ->onConfirm('publish')
    ->send();

Los textos por defecto son configurables en config/kore-ui.php bajo feedback.confirm.confirm_text y feedback.confirm.cancel_text.

Callbacks

Define métodos Livewire que se ejecutan al confirmar o cancelar.

onConfirm 
// Se ejecuta al hacer click en el botón de confirmar
->onConfirm('methodName', [$param1, $param2])
// Se ejecuta al hacer click en el botón de confirmar
->onConfirm('methodName', [$param1, $param2])
onCancel 
// Se ejecuta al hacer click en el botón de cancelar
->onCancel('keepEditing')
// Se ejecuta al hacer click en el botón de cancelar
->onCancel('keepEditing')

Ambos callbacks se ejecutan en el componente que llamó a $this->confirm(). El sistema usa Livewire.dispatch('kore:confirm-callback') como fallback si el componente ha sido re-renderizado.

Modo persistente

Evita que se cierre con Escape o click fuera. El usuario debe hacer click en un botón.

Confirm persistente 
$this->confirm('¿Eliminar cuenta permanentemente?')
    ->description('Esta acción no se puede deshacer.')
    ->type('error')
    ->persistent()
    ->onConfirm('deleteAccount')
    ->send();
$this->confirm('¿Eliminar cuenta permanentemente?')
    ->description('Esta acción no se puede deshacer.')
    ->type('error')
    ->persistent()
    ->onConfirm('deleteAccount')
    ->send();

Ejemplo completo

Confirm con todas las opciones disponibles.

Ejemplo completo 
$this->confirm('¿Descartar cambios sin guardar?')
    ->description('Tus cambios se perderán.')
    ->type('warning')
    ->confirmText('Sí, descartar')
    ->cancelText('Seguir editando')
    ->onConfirm('discardChanges', [$this->draftId])
    ->onCancel('keepEditing')
    ->persistent()
    ->send();
$this->confirm('¿Descartar cambios sin guardar?')
    ->description('Tus cambios se perderán.')
    ->type('warning')
    ->confirmText('Sí, descartar')
    ->cancelText('Seguir editando')
    ->onConfirm('discardChanges', [$this->draftId])
    ->onCancel('keepEditing')
    ->persistent()
    ->send();

Cómo funciona

Flujo interno del sistema de confirmación.

  1. $this->confirm(...) crea un builder Confirm enlazado al componente actual.
  2. send() despacha kore:open con name: 'kore-confirm-dialog' y atributos de overlay (type: 'confirm').
  3. El OverlayManager recibe el evento y monta ConfirmDialog.
  4. ConfirmDialog extiende OverlayComponent -- se renderiza con animación de overlay, backdrop y manejo de escape.
  5. Al aceptar o rechazar, despacha kore:confirm-callback al componente que lo invocó y llama $this->close().

Props

Prop Tipo Default Descripción
title string - Título/pregunta del diálogo (argumento de confirm())
type(type) method question Tipo: question, warning, error, info
description(text) method null Texto descriptivo debajo del título
confirmText(text) method Confirmar Texto del botón de confirmar
cancelText(text) method Cancelar Texto del botón de cancelar
onConfirm(method, params) method - Método Livewire a ejecutar al confirmar
onCancel(method) method - Método Livewire a ejecutar al cancelar
persistent() method false Evita cierre con Escape o click fuera

Configuración

Personaliza los defaults del sistema de confirmación en config/kore-ui.php.

config/kore-ui.php 
'feedback' => [
    'confirm' => [
        'size'                 => 'md',        // tamaño del overlay
        'confirm_text'         => 'Confirmar', // texto por defecto del botón confirmar
        'cancel_text'          => 'Cancelar',  // texto por defecto del botón cancelar
        'closes_on_escape'     => true,
        'closes_on_click_away' => false,       // por defecto requiere click en botón
    ],
],
'feedback' => [
    'confirm' => [
        'size'                 => 'md',        // tamaño del overlay
        'confirm_text'         => 'Confirmar', // texto por defecto del botón confirmar
        'cancel_text'          => 'Cancelar',  // texto por defecto del botón cancelar
        'closes_on_escape'     => true,
        'closes_on_click_away' => false,       // por defecto requiere click en botón
    ],
],