5eca6d3602
- Introduced `Confirmation` trait for reusable confirmation modal logic in Livewire components. - Added `ConfirmationModal` Livewire component for handling confirmation prompts with customizable title, subtitle, description, and styling. - Updated `captainhook.json` to increase `subjectLength` limit. - Integrated confirmation modal in the sidebar layout with `<livewire:confirmation-modal/>`.
98 lines
2.7 KiB
PHP
98 lines
2.7 KiB
PHP
<?php
|
|
|
|
namespace App\Livewire;
|
|
|
|
use Livewire\Component;
|
|
use Livewire\Attributes\On;
|
|
use TailwindMerge\TailwindMerge;
|
|
|
|
new class extends Component {
|
|
public bool $open = false;
|
|
|
|
public string $title = 'Are you sure?';
|
|
public string $subtitle = 'This action cannot be undone.';
|
|
public ?string $description = null;
|
|
|
|
public string $icon = 'lucide.triangle-alert';
|
|
public string $descriptionClass = '';
|
|
public string $acceptBtnClass = '';
|
|
|
|
public string $action = '';
|
|
public mixed $params = null;
|
|
public string $componentId = '';
|
|
|
|
#[On('open-confirmation')]
|
|
public function openModal(
|
|
string $componentId,
|
|
string $action,
|
|
mixed $params = null,
|
|
string $title = 'Are you sure?',
|
|
string $subtitle = 'This action cannot be undone.',
|
|
?string $description = null,
|
|
string $descriptionClass = '',
|
|
string $acceptBtnClass = '',
|
|
string $icon = 'lucide.triangle-alert'
|
|
): void {
|
|
$this->action = $action;
|
|
$this->componentId = $componentId;
|
|
$this->title = $title;
|
|
$this->subtitle = $subtitle;
|
|
$this->description = $description;
|
|
$this->params = $params;
|
|
|
|
$this->descriptionClass = $descriptionClass;
|
|
$this->acceptBtnClass = $acceptBtnClass;
|
|
$this->icon = $icon;
|
|
|
|
$this->open = true;
|
|
}
|
|
|
|
public function confirm(): void
|
|
{
|
|
$this->open = false;
|
|
|
|
$this->dispatch('confirmation-accepted',
|
|
action: $this->action,
|
|
params: $this->params,
|
|
componentId: $this->componentId
|
|
);
|
|
}
|
|
|
|
public function getMergedAlertClass(): string
|
|
{
|
|
return TailwindMerge::factory()->make()->merge(
|
|
'alert-warning alert-soft text-red-600',
|
|
$this->descriptionClass
|
|
);
|
|
}
|
|
|
|
public function getMergedButtonClass(): string
|
|
{
|
|
return TailwindMerge::factory()->make()->merge(
|
|
'btn-warning',
|
|
$this->acceptBtnClass
|
|
);
|
|
}
|
|
}
|
|
?>
|
|
<div>
|
|
<x-mary-modal wire:model="open" :title="$title" :subtitle="$subtitle" class="backdrop-blur" persistent>
|
|
@isset($description)
|
|
<x-mary-alert
|
|
class="{{ $this->getMergedAlertClass() }}"
|
|
:icon="$icon">
|
|
{{ $description }}
|
|
</x-mary-alert>
|
|
@endisset
|
|
<x-slot:actions>
|
|
<x-mary-button label="Cancel" @click="$wire.open = false"/>
|
|
|
|
<x-mary-button
|
|
label="Confirm"
|
|
class="{{ $this->getMergedButtonClass() }}"
|
|
wire:click="confirm"
|
|
spinner="confirm"/>
|
|
</x-slot:actions>
|
|
</x-mary-modal>
|
|
</div>
|