mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2026-01-24 12:03:17 +00:00
🛠️ Replace Livewire\Volt\Component with Livewire\Component across all Blade views for consistency with updated Livewire conventions.
This commit is contained in:
@@ -76,7 +76,6 @@ This application is a Laravel application and its main Laravel ecosystems packag
|
||||
- livewire/flux (FLUXUI_FREE) - v2
|
||||
- livewire/flux-pro (FLUXUI_PRO) - v2
|
||||
- livewire/livewire (LIVEWIRE) - v4
|
||||
- livewire/volt (VOLT) - v1
|
||||
- laravel/mcp (MCP) - v0
|
||||
- laravel/pint (PINT) - v1
|
||||
- laravel/sail (SAIL) - v1
|
||||
@@ -327,132 +326,6 @@ accordion, autocomplete, avatar, badge, brand, breadcrumbs, button, calendar, ca
|
||||
->assertSeeLivewire(CreatePost::class);
|
||||
</code-snippet>
|
||||
|
||||
=== volt/core rules ===
|
||||
|
||||
## Livewire Volt
|
||||
|
||||
- This project uses Livewire Volt for interactivity within its pages. New pages requiring interactivity must also use Livewire Volt.
|
||||
- Make new Volt components using `vendor/bin/sail artisan make:volt [name] [--test] [--pest]`.
|
||||
- Volt is a class-based and functional API for Livewire that supports single-file components, allowing a component's PHP logic and Blade templates to coexist in the same file.
|
||||
- Livewire Volt allows PHP logic and Blade templates in one file. Components use the `@volt` directive.
|
||||
- You must check existing Volt components to determine if they're functional or class-based. If you can't detect that, ask the user which they prefer before writing a Volt component.
|
||||
|
||||
### Volt Functional Component Example
|
||||
|
||||
<code-snippet name="Volt Functional Component Example" lang="php">
|
||||
@volt
|
||||
<?php
|
||||
use function Livewire\Volt\{state, computed};
|
||||
|
||||
state(['count' => 0]);
|
||||
|
||||
$increment = fn () => $this->count++;
|
||||
$decrement = fn () => $this->count--;
|
||||
|
||||
$double = computed(fn () => $this->count * 2);
|
||||
?>
|
||||
|
||||
<div>
|
||||
<h1>Count: {{ $count }}</h1>
|
||||
<h2>Double: {{ $this->double }}</h2>
|
||||
<button wire:click="increment">+</button>
|
||||
<button wire:click="decrement">-</button>
|
||||
</div>
|
||||
@endvolt
|
||||
</code-snippet>
|
||||
|
||||
### Volt Class Based Component Example
|
||||
To get started, define an anonymous class that extends Livewire\Volt\Component. Within the class, you may utilize all of the features of Livewire using traditional Livewire syntax:
|
||||
|
||||
<code-snippet name="Volt Class-based Volt Component Example" lang="php">
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public $count = 0;
|
||||
|
||||
public function increment()
|
||||
{
|
||||
$this->count++;
|
||||
}
|
||||
} ?>
|
||||
|
||||
<div>
|
||||
<h1>{{ $count }}</h1>
|
||||
<button wire:click="increment">+</button>
|
||||
</div>
|
||||
</code-snippet>
|
||||
|
||||
### Testing Volt & Volt Components
|
||||
- Use the existing directory for tests if it already exists. Otherwise, fallback to `tests/Feature/Volt`.
|
||||
|
||||
<code-snippet name="Livewire Test Example" lang="php">
|
||||
use Livewire\Volt\Volt;
|
||||
|
||||
test('counter increments', function () {
|
||||
Volt::test('counter')
|
||||
->assertSee('Count: 0')
|
||||
->call('increment')
|
||||
->assertSee('Count: 1');
|
||||
});
|
||||
</code-snippet>
|
||||
|
||||
<code-snippet name="Volt Component Test Using Pest" lang="php">
|
||||
declare(strict_types=1);
|
||||
|
||||
use App\Models\{User, Product};
|
||||
use Livewire\Volt\Volt;
|
||||
|
||||
test('product form creates product', function () {
|
||||
$user = User::factory()->create();
|
||||
|
||||
Volt::test('pages.products.create')
|
||||
->actingAs($user)
|
||||
->set('form.name', 'Test Product')
|
||||
->set('form.description', 'Test Description')
|
||||
->set('form.price', 99.99)
|
||||
->call('create')
|
||||
->assertHasNoErrors();
|
||||
|
||||
expect(Product::where('name', 'Test Product')->exists())->toBeTrue();
|
||||
});
|
||||
</code-snippet>
|
||||
|
||||
### Common Patterns
|
||||
|
||||
<code-snippet name="CRUD With Volt" lang="php">
|
||||
<?php
|
||||
|
||||
use App\Models\Product;
|
||||
use function Livewire\Volt\{state, computed};
|
||||
|
||||
state(['editing' => null, 'search' => '']);
|
||||
|
||||
$products = computed(fn() => Product::when($this->search,
|
||||
fn($q) => $q->where('name', 'like', "%{$this->search}%")
|
||||
)->get());
|
||||
|
||||
$edit = fn(Product $product) => $this->editing = $product->id;
|
||||
$delete = fn(Product $product) => $product->delete();
|
||||
|
||||
?>
|
||||
|
||||
<!-- HTML / UI Here -->
|
||||
</code-snippet>
|
||||
|
||||
<code-snippet name="Real-Time Search With Volt" lang="php">
|
||||
<flux:input
|
||||
wire:model.live.debounce.300ms="search"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</code-snippet>
|
||||
|
||||
<code-snippet name="Loading States With Volt" lang="php">
|
||||
<flux:button wire:click="save" wire:loading.attr="disabled">
|
||||
<span wire:loading.remove>Save</span>
|
||||
<span wire:loading>Saving...</span>
|
||||
</flux:button>
|
||||
</code-snippet>
|
||||
|
||||
=== pint/core rules ===
|
||||
|
||||
## Laravel Pint Code Formatter
|
||||
|
||||
Reference in New Issue
Block a user