refactor|feat: Aprimora transições e apaga cliente de forma permanente.
This commit is contained in:
parent
c788a80d03
commit
4afc2b4e0a
|
|
@ -3,42 +3,35 @@
|
|||
- 'showQuestion' controla a visibilidade.
|
||||
- '@sure.window' é o evento que dispara a abertura.
|
||||
-->
|
||||
<div x-data="{showQuestion: false}"
|
||||
@sure.window="showQuestion = true"
|
||||
x-cloak {{-- x-cloak é bom para evitar "piscadas" na tela --}}
|
||||
>
|
||||
<div x-data="{showQuestion: false, clientId: null}" @sure.window="showQuestion = true; clientId = $event.detail.id"
|
||||
x-cloak {{-- x-cloak é bom para evitar "piscadas" na tela --}}>
|
||||
|
||||
<!--
|
||||
1. O OVERLAY (Fundo)
|
||||
Copiado 1-para-1 do seu 'create-user'
|
||||
-->
|
||||
<div x-show="showQuestion"
|
||||
class="modal-overlay"
|
||||
x-transition:enter.duration.300ms
|
||||
x-transition:leave.duration.300ms
|
||||
>
|
||||
|
||||
<div x-show="showQuestion" class="modal-overlay" x-transition:enter.duration.300ms
|
||||
x-transition:leave.duration.300ms>
|
||||
|
||||
<!--
|
||||
2. O CONTAINER (Card)
|
||||
Copiado 1-para-1 do seu 'create-user'
|
||||
-->
|
||||
<div x-on:click.outside="showQuestion = false"
|
||||
x-show="showQuestion"
|
||||
x-transition:enter="transition-enter"
|
||||
x-transition:enter-start="transition-enter-start"
|
||||
x-transition:enter-end="transition-enter-end"
|
||||
x-transition:leave="transition-leave"
|
||||
x-transition:leave-start="transition-leave-start"
|
||||
x-transition:leave-end="transition-leave-end"
|
||||
class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de alerta menor --}}
|
||||
>
|
||||
<div x-on:click.outside="showQuestion = false" x-show="showQuestion" x-transition:enter="transition-enter"
|
||||
x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
|
||||
x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
|
||||
x-transition:leave-end="transition-leave-end" class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm'
|
||||
para um modal de alerta menor --}}>
|
||||
|
||||
<!-- 3. O NOVO CONTEÚDO (Confirmação) -->
|
||||
|
||||
|
||||
<!-- Ícone de Alerta -->
|
||||
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
<div
|
||||
class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
|
@ -47,12 +40,12 @@ class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de aler
|
|||
<h3 class="modal-title" id="modal-title">
|
||||
Confirmar Exclusão
|
||||
</h3>
|
||||
|
||||
|
||||
<!-- Descrição -->
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Você tem certeza que deseja excluir este cliente?
|
||||
Todos os seus dados serão removidos permanentemente.
|
||||
Você tem certeza que deseja excluir este cliente?
|
||||
Todos os seus dados serão removidos permanentemente.
|
||||
Esta ação não pode ser desfeita.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -60,24 +53,17 @@ class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de aler
|
|||
|
||||
<!-- Botões (usando a estrutura do 'create-user') -->
|
||||
<div class="form-footer mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
|
||||
|
||||
<!--
|
||||
O botão "Sim, Excluir" deve vir primeiro no HTML
|
||||
para o 'flex-row-reverse' funcionar.
|
||||
-->
|
||||
<button type="button"
|
||||
{{--
|
||||
Aqui, ele dispara o evento 'confirm-delete'
|
||||
(que seu Livewire pode ouvir) e fecha o modal.
|
||||
--}}
|
||||
@click="$dispatch('confirm-delete'); showQuestion = false"
|
||||
class="btn-submit bg-red-600 hover:bg-red-700 focus:ring-red-500 w-full sm:w-auto">
|
||||
<button type="button" @click="$dispatch('confirm-delete', [clientId]); showQuestion = false"
|
||||
class="btn-submit bg-red-600 hover:bg-red-700 focus:ring-red-500 w-full sm:w-auto">
|
||||
Sim, Excluir
|
||||
</button>
|
||||
|
||||
<button type="button"
|
||||
@click="showQuestion = false"
|
||||
class="btn-cancel mt-3 sm:mt-0 w-full sm:w-auto">
|
||||
<button type="button" @click="showQuestion = false" class="btn-cancel mt-3 sm:mt-0 w-full sm:w-auto">
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue