mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
update livewire documentation page
This commit is contained in:
Younes ENNAJI
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"dist/main.css": "/dist/main.0e8a2b07.css",
|
"dist/main.css": "/dist/main.123ef729.css",
|
||||||
"dist/main.js": "/dist/main.3be5bc06.js",
|
"dist/main.js": "/dist/main.3be5bc06.js",
|
||||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||||
|
|||||||
@@ -0,0 +1,930 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<!-- Main Content with Styled Sections -->
|
||||||
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||||
|
<!-- Table of contents - Desktop -->
|
||||||
|
<div class="w-full bg-white border-b border-slate-100 shadow-sm">
|
||||||
|
<div class="px-6 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
|
||||||
|
<a href="#requirements" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
|
||||||
|
<i class="fa-solid fa-list-check mr-1.5 text-purple-500"></i> Requirements
|
||||||
|
</a>
|
||||||
|
<span class="text-slate-300">|</span>
|
||||||
|
<a href="#installation" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
|
||||||
|
<i class="fa-solid fa-download mr-1.5 text-purple-500"></i> Installation
|
||||||
|
</a>
|
||||||
|
<span class="text-slate-300">|</span>
|
||||||
|
<a href="#usage" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
|
||||||
|
<i class="fa-solid fa-code mr-1.5 text-purple-500"></i> Usage
|
||||||
|
</a>
|
||||||
|
<span class="text-slate-300">|</span>
|
||||||
|
<a href="#events" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
|
||||||
|
<i class="fa-solid fa-bolt mr-1.5 text-purple-500"></i> Events
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content area with custom styling -->
|
||||||
|
<div class="prose prose-slate max-w-none p-6 md:p-8">
|
||||||
|
<!-- Requirements Section -->
|
||||||
|
<div id="requirements" class="scroll-mt-20">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
<span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
|
||||||
|
<i class="fa-solid fa-list-check"></i>
|
||||||
|
</span>
|
||||||
|
Requirements
|
||||||
|
</h2>
|
||||||
|
<p class="mb-4">
|
||||||
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
||||||
|
works seamlessly with <strong class="text-purple-700">Livewire v3</strong>, bringing dynamic flash notifications to your reactive components.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Version requirements -->
|
||||||
|
<div class="mb-5">
|
||||||
|
<!-- Requirements Cards Container -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<!-- PHP Card -->
|
||||||
|
<div class="group relative bg-white rounded-lg border border-indigo-200 shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-1">
|
||||||
|
<!-- Subtle accent line -->
|
||||||
|
<div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-indigo-500 to-indigo-600"></div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-full h-10 w-10 flex items-center justify-center shadow-sm group-hover:shadow transition-all">
|
||||||
|
<i class="fa-brands fa-php text-white text-lg"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ml-3">
|
||||||
|
<div class="text-xs uppercase tracking-wider text-indigo-500 font-semibold">Required</div>
|
||||||
|
<h4 class="font-bold text-slate-800">PHP Version</h4>
|
||||||
|
<div class="inline-block px-2 py-0.5 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">
|
||||||
|
v8.2 or higher
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Livewire Card -->
|
||||||
|
<div class="group relative bg-white rounded-lg border border-purple-200 shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-1">
|
||||||
|
<!-- Subtle accent line -->
|
||||||
|
<div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-purple-500 to-purple-600"></div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-full h-10 w-10 flex items-center justify-center shadow-sm group-hover:shadow transition-all">
|
||||||
|
<i class="fa-solid fa-bolt text-white text-lg"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ml-3">
|
||||||
|
<div class="text-xs uppercase tracking-wider text-purple-500 font-semibold">Required</div>
|
||||||
|
<h4 class="font-bold text-slate-800">Livewire</h4>
|
||||||
|
<div class="inline-block px-2 py-0.5 bg-purple-100 text-purple-700 text-xs font-medium rounded-full">
|
||||||
|
v3.0 or higher
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Legacy version note -->
|
||||||
|
<div class="bg-amber-50 border-l-4 border-amber-300 rounded-r-lg p-3 mt-3">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0 flex items-center justify-center">
|
||||||
|
<i class="fa-solid fa-lightbulb text-amber-500"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<h4 class="text-sm font-medium text-amber-800">Using older PHP or Livewire versions?</h4>
|
||||||
|
<p class="text-xs text-amber-700">
|
||||||
|
If you need to use PHP < v8.2 or Livewire < v3.0, use
|
||||||
|
<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v1</strong> instead.
|
||||||
|
It supports PHP ≥ v5.3 and earlier Livewire versions.
|
||||||
|
<a href="https://php-flasher.github.io/" class="text-amber-800 underline hover:text-amber-900">
|
||||||
|
Check out the v1 documentation here
|
||||||
|
</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Installation Section -->
|
||||||
|
<div id="installation" class="mt-10 scroll-mt-20">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
<span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
|
||||||
|
<i class="fa-solid fa-download"></i>
|
||||||
|
</span>
|
||||||
|
Installation
|
||||||
|
</h2>
|
||||||
|
<p class="mb-4">
|
||||||
|
To use <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> with Livewire, follow the same installation steps as in the
|
||||||
|
<a href="/laravel" class="text-purple-600 hover:text-purple-800">Laravel Installation</a> guide.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Terminal code block -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-4">
|
||||||
|
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex space-x-1 mr-4">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-slate-400 text-sm">Terminal</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-slate-400 text-sm">Installation</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-slate-900">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<div class="w-5 h-5 bg-purple-800 text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||||
|
<i class="fa-solid fa-bolt"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-slate-300 text-sm">Livewire Installation</span>
|
||||||
|
</div>
|
||||||
|
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-laravel</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mb-4">After installing, run this command to set up the required assets:</p>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex space-x-1 mr-4">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||||
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-slate-400 text-sm">Terminal</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-slate-400 text-sm">Setup Assets</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-slate-900">
|
||||||
|
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">php artisan flasher:install</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Integration callout -->
|
||||||
|
<div class="bg-purple-50 border-l-4 border-purple-400 rounded-r-lg p-5 mb-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<i class="fa-solid fa-bolt-lightning text-purple-500"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<h4 class="text-sm font-medium text-purple-800">Zero Configuration for Livewire</h4>
|
||||||
|
<p class="text-sm text-purple-700 mt-1">
|
||||||
|
PHPFlasher automatically integrates with Livewire. No additional configuration needed - flash notifications work instantly across component updates and page refreshes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Usage Section -->
|
||||||
|
<div id="usage" class="mt-10 scroll-mt-20">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
<span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
|
||||||
|
<i class="fa-solid fa-code"></i>
|
||||||
|
</span>
|
||||||
|
Usage
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="mb-4">
|
||||||
|
Using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
|
||||||
|
in Livewire components is simple. Just call the <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">flash()</code>
|
||||||
|
helper function in your component methods.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Basic Usage Example -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Basic Usage</h3>
|
||||||
|
<p class="mb-4">Dispatch notifications from your Livewire components:</p>
|
||||||
|
|
||||||
|
<!-- PHP Example -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">UserComponent.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;
|
||||||
|
|
||||||
|
use Livewire\Component;
|
||||||
|
|
||||||
|
class UserComponent extends Component
|
||||||
|
{
|
||||||
|
public function save()
|
||||||
|
{
|
||||||
|
// Save user logic here...
|
||||||
|
|
||||||
|
// Show success notification
|
||||||
|
flash()->success('User saved successfully!');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return view('livewire.user');
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pro tip box -->
|
||||||
|
<div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-5 mb-6 border border-purple-100">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<i class="fa-solid fa-lightbulb text-amber-500 text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-sm font-medium text-purple-800">Pro Tip: Notifications Persist Across Livewire Updates</h4>
|
||||||
|
<p class="text-sm text-purple-700 mt-1">
|
||||||
|
PHPFlasher automatically handles Livewire component updates and page refreshes. Notifications will display correctly even during partial page updates.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Complete component example -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Complete Component Example</h3>
|
||||||
|
<p class="mb-4">Here's a more complete example of a Livewire component with form handling and notifications:</p>
|
||||||
|
|
||||||
|
<!-- PHP Example -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">ContactForm.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;
|
||||||
|
|
||||||
|
use Livewire\Component;
|
||||||
|
use App\Models\Contact;
|
||||||
|
|
||||||
|
class ContactForm extends Component
|
||||||
|
{
|
||||||
|
public $name = '';
|
||||||
|
public $email = '';
|
||||||
|
public $message = '';
|
||||||
|
|
||||||
|
protected $rules = [
|
||||||
|
'name' => 'required|min:3',
|
||||||
|
'email' => 'required|email',
|
||||||
|
'message' => 'required|min:10',
|
||||||
|
];
|
||||||
|
|
||||||
|
public function submit()
|
||||||
|
{
|
||||||
|
$this->validate();
|
||||||
|
|
||||||
|
try {
|
||||||
|
Contact::create([
|
||||||
|
'name' => $this->name,
|
||||||
|
'email' => $this->email,
|
||||||
|
'message' => $this->message,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Success notification
|
||||||
|
flash()->success('Your message has been sent!', 'Thank you');
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
$this->reset(['name', 'email', 'message']);
|
||||||
|
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
// Error notification
|
||||||
|
flash()->error('There was a problem sending your message.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return view('livewire.contact-form');
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Related Blade view -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">The Blade View</h3>
|
||||||
|
<p class="mb-4">Here's the corresponding Blade view for the component:</p>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">contact-form.blade.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-html"><div>
|
||||||
|
<form wire:submit.prevent="submit" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
|
||||||
|
<input type="text" id="name" wire:model="name"
|
||||||
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
|
||||||
|
@error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
|
||||||
|
<input type="email" id="email" wire:model="email"
|
||||||
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
|
||||||
|
@error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
|
||||||
|
<textarea id="message" wire:model="message" rows="4"
|
||||||
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></textarea>
|
||||||
|
@error('message') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent
|
||||||
|
shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
|
||||||
|
<div wire:loading wire:target="submit" class="mr-2">
|
||||||
|
<svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||||
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div></code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notification Types -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">All Notification Types</h3>
|
||||||
|
<p class="mb-4">You can use all the standard notification types in your Livewire components:</p>
|
||||||
|
|
||||||
|
<!-- Notification types showcase -->
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
|
||||||
|
<div class="group p-4 border border-green-200 bg-gradient-to-b from-green-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
|
||||||
|
<div class="flex items-center gap-3 mb-2 text-green-700">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center group-hover:bg-green-500 group-hover:text-white transition-colors">
|
||||||
|
<i class="fa-solid fa-circle-check"></i>
|
||||||
|
</div>
|
||||||
|
<strong>Success</strong>
|
||||||
|
</div>
|
||||||
|
<p class="text-green-600 text-sm">flash()->success('Record updated successfully!')</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-4 border border-red-200 bg-gradient-to-b from-red-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
|
||||||
|
<div class="flex items-center gap-3 mb-2 text-red-700">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center group-hover:bg-red-500 group-hover:text-white transition-colors">
|
||||||
|
<i class="fa-solid fa-circle-exclamation"></i>
|
||||||
|
</div>
|
||||||
|
<strong>Error</strong>
|
||||||
|
</div>
|
||||||
|
<p class="text-red-600 text-sm">flash()->error('An error occurred while saving.')</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-4 border border-amber-200 bg-gradient-to-b from-amber-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
|
||||||
|
<div class="flex items-center gap-3 mb-2 text-amber-700">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center group-hover:bg-amber-500 group-hover:text-white transition-colors">
|
||||||
|
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||||
|
</div>
|
||||||
|
<strong>Warning</strong>
|
||||||
|
</div>
|
||||||
|
<p class="text-amber-600 text-sm">flash()->warning('Unsaved changes will be lost.')</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group p-4 border border-blue-200 bg-gradient-to-b from-blue-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
|
||||||
|
<div class="flex items-center gap-3 mb-2 text-blue-700">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center group-hover:bg-blue-500 group-hover:text-white transition-colors">
|
||||||
|
<i class="fa-solid fa-circle-info"></i>
|
||||||
|
</div>
|
||||||
|
<strong>Info</strong>
|
||||||
|
</div>
|
||||||
|
<p class="text-blue-600 text-sm">flash()->info('Your session will expire in 5 minutes.')</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Events Section -->
|
||||||
|
<div id="events" class="mt-10 scroll-mt-20">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
<span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
|
||||||
|
<i class="fa-solid fa-bolt"></i>
|
||||||
|
</span>
|
||||||
|
Events
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="mb-4">
|
||||||
|
PHPFlasher integrates with Livewire's event system, allowing you to listen for notification events in your components.
|
||||||
|
This is particularly useful for interactive notifications like SweetAlert confirmations.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">SweetAlert Events</h3>
|
||||||
|
<p class="mb-4">
|
||||||
|
For SweetAlert, you can listen to <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">sweetalert:confirmed</code>,
|
||||||
|
<code class="bg-slate-100 px-2 py-1 rounded text-purple-600">sweetalert:denied</code>, and
|
||||||
|
<code class="bg-slate-100 px-2 py-1 rounded text-purple-600">sweetalert:dismissed</code> events within your component.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Interactive example -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">UserDeleteComponent.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;
|
||||||
|
|
||||||
|
use Livewire\Attributes\On;
|
||||||
|
use Livewire\Component;
|
||||||
|
|
||||||
|
class UserComponent extends Component
|
||||||
|
{
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return <<<'HTML'
|
||||||
|
<div>
|
||||||
|
<button wire:click="deleteUser">Delete User</button>
|
||||||
|
</div>
|
||||||
|
HTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function deleteUser()
|
||||||
|
{
|
||||||
|
sweetalert()
|
||||||
|
->showDenyButton()
|
||||||
|
->info('Are you sure you want to delete the user?');
|
||||||
|
}
|
||||||
|
|
||||||
|
#[On('sweetalert:confirmed')]
|
||||||
|
public function onConfirmed(array $payload): void
|
||||||
|
{
|
||||||
|
// Delete the user here
|
||||||
|
|
||||||
|
flash()->info('User successfully deleted.');
|
||||||
|
}
|
||||||
|
|
||||||
|
#[On('sweetalert:denied')]
|
||||||
|
public function onDeny(array $payload): void
|
||||||
|
{
|
||||||
|
flash()->info('Deletion cancelled.');
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Event Payload</h3>
|
||||||
|
<p class="mb-4">Each listener method accepts an <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">array $payload</code> parameter, which contains:</p>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">PayloadStructure.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">public function sweetalertConfirmed(array $payload)
|
||||||
|
{
|
||||||
|
// Access the payload data
|
||||||
|
$promise = $payload['promise'];
|
||||||
|
$envelope = $payload['envelope'];
|
||||||
|
|
||||||
|
// $promise - Contains the resolved promise data from SweetAlert
|
||||||
|
// $envelope - Contains the notification where the event happened
|
||||||
|
|
||||||
|
// You can use this data for further processing
|
||||||
|
$userId = $envelope->getOption('userId'); // If you had set this option
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Best practices -->
|
||||||
|
<div class="bg-green-50 border-l-4 border-green-400 rounded-r-lg p-5 mb-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<i class="fa-solid fa-check-circle text-green-500"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<h4 class="text-sm font-medium text-green-800">Best Practice: Use Attributes for Events</h4>
|
||||||
|
<p class="text-sm text-green-700 mt-1">
|
||||||
|
With Livewire 3, use the new <code class="bg-slate-100 px-1 py-0.5 rounded text-purple-600">#[On('event')]</code> attribute syntax
|
||||||
|
for cleaner event handling. This makes your code more readable and follows modern PHP practices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Advanced example -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Advanced Example: CRUD Operations</h3>
|
||||||
|
<p class="mb-4">Here's a more complete example showing how to implement CRUD operations with confirmations:</p>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">TasksComponent.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;
|
||||||
|
|
||||||
|
use App\Models\Task;
|
||||||
|
use Livewire\Attributes\On;
|
||||||
|
use Livewire\Component;
|
||||||
|
|
||||||
|
class TasksComponent extends Component
|
||||||
|
{
|
||||||
|
public $tasks = [];
|
||||||
|
public $taskToDelete = null;
|
||||||
|
|
||||||
|
public $title = '';
|
||||||
|
public $description = '';
|
||||||
|
|
||||||
|
protected $rules = [
|
||||||
|
'title' => 'required|min:3',
|
||||||
|
'description' => 'required',
|
||||||
|
];
|
||||||
|
|
||||||
|
public function mount()
|
||||||
|
{
|
||||||
|
$this->tasks = Task::latest()->get();
|
||||||
|
}
|
||||||
|
|
||||||
|
public function saveTask()
|
||||||
|
{
|
||||||
|
$this->validate();
|
||||||
|
|
||||||
|
Task::create([
|
||||||
|
'title' => $this->title,
|
||||||
|
'description' => $this->description,
|
||||||
|
]);
|
||||||
|
|
||||||
|
$this->reset(['title', 'description']);
|
||||||
|
$this->tasks = Task::latest()->get();
|
||||||
|
|
||||||
|
flash()->success('Task created successfully!');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function confirmDelete($taskId)
|
||||||
|
{
|
||||||
|
$this->taskToDelete = $taskId;
|
||||||
|
|
||||||
|
sweetalert()
|
||||||
|
->showDenyButton()
|
||||||
|
->option('confirmButtonText', 'Yes, delete it!')
|
||||||
|
->option('denyButtonText', 'Cancel')
|
||||||
|
->option('taskId', $taskId) // Store taskId in the options
|
||||||
|
->warning('Are you sure you want to delete this task?', 'Confirm Deletion');
|
||||||
|
}
|
||||||
|
|
||||||
|
#[On('sweetalert:confirmed')]
|
||||||
|
public function deleteTask(array $payload)
|
||||||
|
{
|
||||||
|
$task = Task::find($this->taskToDelete);
|
||||||
|
|
||||||
|
if ($task) {
|
||||||
|
$task->delete();
|
||||||
|
$this->tasks = Task::latest()->get();
|
||||||
|
flash()->success('Task deleted successfully!');
|
||||||
|
} else {
|
||||||
|
flash()->error('Task not found.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$this->taskToDelete = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
#[On('sweetalert:denied')]
|
||||||
|
public function cancelDelete()
|
||||||
|
{
|
||||||
|
$this->taskToDelete = null;
|
||||||
|
flash()->info('Task deletion cancelled.');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return view('livewire.tasks', [
|
||||||
|
'tasks' => $this->tasks
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tips for working with Livewire component -->
|
||||||
|
<div class="bg-slate-50 border border-slate-200 rounded-xl p-6 mb-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0 p-2 bg-purple-100 rounded-full">
|
||||||
|
<i class="fa-solid fa-wand-magic-sparkles text-purple-600"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-semibold text-slate-800">Tips for Livewire Integration</h4>
|
||||||
|
<ul class="mt-2 space-y-2 text-slate-600">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
|
||||||
|
<span>Use <code class="bg-slate-100 px-1.5 py-0.5 rounded text-purple-600">wire:ignore</code> on notification container elements if you're manually placing them</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
|
||||||
|
<span>Notifications persist across Livewire updates and work with both full page refreshes and SPA navigation</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
|
||||||
|
<span>You can pass dynamic data to your notifications using component properties</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
|
||||||
|
<span>Store temporary state (like IDs for confirmation dialogs) in component properties</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SPA Mode -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Working with Livewire SPA Mode</h3>
|
||||||
|
<p class="mb-4">
|
||||||
|
PHPFlasher works seamlessly with Livewire's SPA (Single Page Application) mode, ensuring notifications are displayed correctly
|
||||||
|
during page transitions without reloading.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">nav-link.blade.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-html"><a href="{{ route('dashboard') }}" wire:navigate>Dashboard</a>
|
||||||
|
|
||||||
|
<!-- In your component -->
|
||||||
|
<script>
|
||||||
|
// PHPFlasher's notifications will persist during SPA navigation
|
||||||
|
Livewire.hook('commit', ({ component }) => {
|
||||||
|
// Any custom code that needs to run after component updates
|
||||||
|
// PHPFlasher will automatically handle the notifications
|
||||||
|
});
|
||||||
|
</script></code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Event chaining with confirmations -->
|
||||||
|
<h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Chaining Notifications with Events</h3>
|
||||||
|
<p class="mb-4">
|
||||||
|
You can create complex interaction flows by chaining notifications with events:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||||
|
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||||
|
<div class="flex space-x-1.5 mr-3">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-white opacity-80 text-xs font-medium">PublishArticle.php</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;
|
||||||
|
|
||||||
|
use Livewire\Attributes\On;
|
||||||
|
use Livewire\Component;
|
||||||
|
|
||||||
|
class PublishArticle extends Component
|
||||||
|
{
|
||||||
|
public $article;
|
||||||
|
|
||||||
|
public function confirmPublish()
|
||||||
|
{
|
||||||
|
sweetalert()
|
||||||
|
->option('title', 'Publish article?')
|
||||||
|
->option('text', 'This will make the article visible to all users')
|
||||||
|
->option('icon', 'question')
|
||||||
|
->option('showCancelButton', true)
|
||||||
|
->option('confirmButtonText', 'Yes, publish it!')
|
||||||
|
->option('cancelButtonText', 'Not yet')
|
||||||
|
->fire();
|
||||||
|
}
|
||||||
|
|
||||||
|
#[On('sweetalert:confirmed')]
|
||||||
|
public function publishArticle()
|
||||||
|
{
|
||||||
|
// Publish the article
|
||||||
|
$this->article->published = true;
|
||||||
|
$this->article->save();
|
||||||
|
|
||||||
|
// First notification
|
||||||
|
flash()->success('Article published successfully!');
|
||||||
|
|
||||||
|
// Second notification (after a delay)
|
||||||
|
sweetalert()
|
||||||
|
->timer(3000)
|
||||||
|
->option('title', 'Would you like to share it?')
|
||||||
|
->option('showCancelButton', true)
|
||||||
|
->option('confirmButtonText', 'Yes, share it!')
|
||||||
|
->option('cancelButtonText', 'No thanks')
|
||||||
|
->option('actionType', 'share') // Custom option to identify action
|
||||||
|
->fire();
|
||||||
|
}
|
||||||
|
|
||||||
|
#[On('sweetalert:confirmed')]
|
||||||
|
public function handleConfirmation(array $payload)
|
||||||
|
{
|
||||||
|
$envelope = $payload['envelope'];
|
||||||
|
$actionType = $envelope->getOption('actionType');
|
||||||
|
|
||||||
|
if ($actionType === 'share') {
|
||||||
|
// Show sharing UI
|
||||||
|
$this->dispatch('show-share-modal', articleId: $this->article->id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render()
|
||||||
|
{
|
||||||
|
return view('livewire.publish-article');
|
||||||
|
}
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Additional Integration section -->
|
||||||
|
<div id="additional-integrations" class="mt-10 scroll-mt-20">
|
||||||
|
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||||
|
<span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
|
||||||
|
<i class="fa-solid fa-plug"></i>
|
||||||
|
</span>
|
||||||
|
Additional Integrations
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="mb-4">
|
||||||
|
PHPFlasher works with other popular Livewire plugins and Laravel features.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Alpine.js integration -->
|
||||||
|
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div class="bg-white rounded-lg p-5 border border-slate-200 shadow-sm">
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M8.11 20.259L14.997 3.75l1.305.75-6.888 16.509z"></path>
|
||||||
|
<path d="M2.783 9.75L7.875 4.658 9.292 6.08 4.205 11.17zM14.713 17.926l5.091-5.092 1.424 1.425-5.091 5.091z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-slate-800">Alpine.js Integration</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-slate-600 text-sm mb-3">
|
||||||
|
PHPFlasher works perfectly with Alpine.js directives in your Livewire components.
|
||||||
|
</p>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-3 text-xs overflow-x-auto"><code class="language-html"><div x-data="{ show: false }">
|
||||||
|
<button x-on:click="show = true; $wire.showToast()">
|
||||||
|
Show Toast
|
||||||
|
</button>
|
||||||
|
</div></code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg p-5 border border-slate-200 shadow-sm">
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12.4217 4L17.5 12.9429L12.4217 18.0571H7.49975L2.5 11.9429L7.49975 4H12.4217ZM11.3929 5.71429H8.44647L5.5 11.0143L8.44647 16.3429H11.3929L14.4643 11.0143L11.3929 5.71429Z"></path>
|
||||||
|
<path d="M15.5 5.71429L18.5 11.0143L15.5 16.3429H21.5L18.5 11.0143L21.5 5.71429H15.5Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-semibold text-slate-800">Laravel Blade Integration</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-slate-600 text-sm mb-3">
|
||||||
|
Mix Blade directives with Livewire and PHPFlasher notifications.
|
||||||
|
</p>
|
||||||
|
<pre class="bg-slate-50 rounded-lg p-3 text-xs overflow-x-auto"><code class="language-php">@if (session('status'))
|
||||||
|
<script>
|
||||||
|
document.addEventListener('livewire:initialized', () => {
|
||||||
|
flasher.success('{{ session('status') }}');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endif</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer CTA -->
|
||||||
|
<div class="mt-8 mb-12">
|
||||||
|
<div
|
||||||
|
class="bg-gradient-to-tr from-purple-600 to-indigo-700 rounded-xl p-8 md:p-12 border border-purple-500 shadow-md text-center md:text-left">
|
||||||
|
<div class="flex flex-col md:flex-row md:items-center">
|
||||||
|
<div class="md:w-3/4">
|
||||||
|
<h3 class="text-3xl font-bold text-white mb-3">Ready to enhance your Livewire UI?</h3>
|
||||||
|
<p class="text-purple-100 mb-6 md:mb-0 text-lg">Start using <strong><span
|
||||||
|
class="text-white">PHP<span class="text-purple-200">Flasher</span></span></strong> today and
|
||||||
|
give your users beautiful notifications in minutes!</p>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/4 md:text-right">
|
||||||
|
<a href="#installation"
|
||||||
|
class="inline-block bg-white text-purple-700 font-medium px-6 py-3 rounded-lg hover:bg-purple-50 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-transform">
|
||||||
|
Get Started Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.animate-float {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-spin-slow {
|
||||||
|
animation: spin 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse-slow {
|
||||||
|
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse-delayed {
|
||||||
|
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in {
|
||||||
|
animation: fadeIn 1s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
"entrypoints": {
|
"entrypoints": {
|
||||||
"main": {
|
"main": {
|
||||||
"css": [
|
"css": [
|
||||||
"/dist/main.0e8a2b07.css"
|
"/dist/main.123ef729.css"
|
||||||
],
|
],
|
||||||
"js": [
|
"js": [
|
||||||
"/dist/main.3be5bc06.js"
|
"/dist/main.3be5bc06.js"
|
||||||
|
|||||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
+1
-133
@@ -3,137 +3,5 @@ permalink: /livewire/
|
|||||||
title: Livewire
|
title: Livewire
|
||||||
description: Learn how to add flash notifications to your Livewire application using PHPFlasher. This guide walks you through installation and usage, so you can engage your users with informative messages.
|
description: Learn how to add flash notifications to your Livewire application using PHPFlasher. This guide walks you through installation and usage, so you can engage your users with informative messages.
|
||||||
adapter: flasher
|
adapter: flasher
|
||||||
|
layout: livewire
|
||||||
---
|
---
|
||||||
|
|
||||||
**<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** works seamlessly with Livewire v3.
|
|
||||||
|
|
||||||
## <i class="fa-duotone fa-list-radio"></i> Requirements
|
|
||||||
|
|
||||||
> <i class="fa-brands fa-php fa-2xl text-blue-900 mr-1 mb-1"></i> **PHP** v8.2 or higher
|
|
||||||
> <i class="fa-brands fa-laravel fa-2xl text-red-900 mr-1 ml-4"></i> **Laravel** v11.0 or higher
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## <i class="fa-duotone fa-list-radio"></i> Installation
|
|
||||||
|
|
||||||
To use **<strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>** with Livewire, follow the same installation steps as in the [Laravel Installation](/laravel) guide.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
composer require php-flasher/flasher-laravel
|
|
||||||
```
|
|
||||||
|
|
||||||
After installing, run this command to set up the required assets:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
php artisan flasher:install
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## <i class="fa-duotone fa-list-radio"></i> Usage
|
|
||||||
|
|
||||||
Dispatch `notifications` from your components
|
|
||||||
|
|
||||||
{% assign id = '#/ livewire' %}
|
|
||||||
{% assign type = 'success' %}
|
|
||||||
{% assign message = 'User saved successfully!' %}
|
|
||||||
{% assign options = '{}' %}
|
|
||||||
{% include example.html %}
|
|
||||||
|
|
||||||
```php
|
|
||||||
{{ id }}
|
|
||||||
|
|
||||||
namespace App\Livewire;
|
|
||||||
|
|
||||||
use Livewire\Component;
|
|
||||||
|
|
||||||
class UserComponent extends Component
|
|
||||||
{
|
|
||||||
public function save()
|
|
||||||
{
|
|
||||||
flash()->{{ type }}('{{ message }}');
|
|
||||||
}
|
|
||||||
|
|
||||||
public function render()
|
|
||||||
{
|
|
||||||
return view('livewire.user');
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## <i class="fa-duotone fa-list-radio"></i> Events
|
|
||||||
|
|
||||||
For SweetAlert, you can listen to `sweetalert:confirmed`, `sweetalert:denied`, and `sweetalert:dismissed` events within your component.
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
messages["#/ livewire events"] = {
|
|
||||||
handler: "sweetalert",
|
|
||||||
type: "info",
|
|
||||||
message: "Are you sure you want to delete the user ?",
|
|
||||||
options: {
|
|
||||||
showDenyButton: true,
|
|
||||||
preConfirm: function() {
|
|
||||||
flasher.success('User successfully deleted.');
|
|
||||||
},
|
|
||||||
preDeny: function() {
|
|
||||||
flasher.error('Deletion cancelled.');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
```php
|
|
||||||
#/ livewire events
|
|
||||||
|
|
||||||
namespace App\Livewire;
|
|
||||||
|
|
||||||
use Livewire\Attributes\On;
|
|
||||||
use Livewire\Component;
|
|
||||||
|
|
||||||
class UserComponent extends Component
|
|
||||||
{
|
|
||||||
public function render()
|
|
||||||
{
|
|
||||||
return <<<'HTML'
|
|
||||||
<div>
|
|
||||||
<button wire:click="deleteUser">Delete User</button>
|
|
||||||
</div>
|
|
||||||
HTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
public function deleteUser()
|
|
||||||
{
|
|
||||||
sweetalert()
|
|
||||||
->showDenyButton()
|
|
||||||
->info('Are you sure you want to delete the user ?');
|
|
||||||
}
|
|
||||||
|
|
||||||
#[On('sweetalert:confirmed')]
|
|
||||||
public function onConfirmed(array $payload): void
|
|
||||||
{
|
|
||||||
flash()->info('User successfully deleted.');
|
|
||||||
}
|
|
||||||
|
|
||||||
#[On('sweetalert:denied')]
|
|
||||||
public function onDeny(array $payload): void
|
|
||||||
{
|
|
||||||
flash()->info('Deletion cancelled.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### <i class="fa-duotone fa-list-radio"></i> event handlers context
|
|
||||||
|
|
||||||
Each listener method accepts an **array $payload** parameter, which contains:
|
|
||||||
|
|
||||||
```php
|
|
||||||
public function sweetalertConfirmed(array $payload)
|
|
||||||
{
|
|
||||||
$promise = $payload['promise'];
|
|
||||||
$envelope = $payload['envelope'];
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- **promise**: The resolved promise from **SweetAlert**.
|
|
||||||
- **envelope**: The notification where the event happened.
|
|
||||||
|
|||||||
Reference in New Issue
Block a user