Skip to main content

General

Delete Confirm code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/delete-confirm.blade.php

@props([
    'name',
    'title',
    'description' => null,
    'action',
    'method' => 'DELETE',
    'confirmLabel' => 'Delete',
    'item' => null,
    'show' => false,
])

@php
    /*
    | Destructive confirmation modal with form, alert and footer actions.
    | Pair with a trigger button that dispatches open-modal with the same name.
    |
    | Usage:
    |   <x-ui.button.delete size="sm" x-on:click.prevent="$dispatch('open-modal', 'confirm-post-deletion')" />
    |
    |   <x-ui.delete-confirm
    |       name="confirm-post-deletion"
    |       title="Delete this post?"
    |       description="This cannot be undone."
    |       :action="route('posts.destroy', $post)"
    |       :item="$post->title"
    |       confirm-label="Delete post"
    |   />
    |
    | With extra fields (e.g. password confirmation):
    |   <x-ui.delete-confirm ...>
    |       <x-ui.field label="Password" for="password">...</x-ui.field>
    |   </x-ui.delete-confirm>
    */
    $formId = 'delete-form-'.$name;
@endphp

<x-ui.modal :name="$name" :title="$title" :description="$description" :show="$show">
    <form id="{{ $formId }}" method="POST" action="{{ $action }}">
        @csrf
        @method($method)
        {{ $slot }}
    </form>

    @if ($item)
        <x-ui.alert variant="danger">
            "{{ $item }}" will be permanently deleted.
        </x-ui.alert>
    @elseif (isset($alert))
        {{ $alert }}
    @endif

    <x-slot:footer>
        <x-ui.button variant="outline" x-on:click="$dispatch('close-modal', '{{ $name }}')">
            Cancel
        </x-ui.button>
        <x-ui.button type="submit" :form="$formId" variant="danger" icon="trash">
            {{ $confirmLabel }}
        </x-ui.button>
    </x-slot:footer>
</x-ui.modal>