Getting Started

Minimal Steps

Installation:
```
composer require hungnm28/livewire-form
```
Laravel auto-discovers the package. No additional configuration is required for basic usage.

First Use Case: Replace a simple form in your Blade view with the package’s components. For example, convert this:

<form>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <button type="submit">Submit</button>
</form>

To this:

<x-lf::form>
    <x-lf::form.input name="email" label="Email" />
    <x-lf::btn.primary type="submit">Submit</x-lf::btn.primary>
</x-lf::form>

Tailwind Setup: Ensure your tailwind.config.js includes the package’s views:

content: [
    './resources/**/*.blade.php',
    './vendor/hungnm28/livewire-form/resources/views/**/*.blade.php',
],

Livewire Integration: Bind form fields to Livewire properties:
```
<x-lf::form.input wire:model="form.email" label="Email" />
```

Where to Look First

Component Reference: Focus on the Components section of the README for available elements (e.g., <x-lf::form.input />, <x-lf::btn.primary />).
Livewire Binding: Use wire:model for two-way data binding with Livewire components.
Blade Prefix: All components are prefixed with lf:: (e.g., <x-lf::form />).

Implementation Patterns

Usage Patterns

1. Form Construction

Basic Form:

<x-lf::form wire:submit="save">
    <x-lf::form.input name="name" label="Name" wire:model="form.name" />
    <x-lf::form.select
        name="role"
        label="Role"
        :data="['admin' => 'Admin', 'user' => 'User']"
        wire:model="form.role"
    />
    <x-lf::btn.primary type="submit">Save</x-lf::btn.primary>
</x-lf::form>

Validation Handling: Use Livewire’s built-in validation with wire:model and $rules in your Livewire component.

2. Modals and Asides

Livewire-Controlled Modal:

<x-lf::modal wire:model="showModal" title="Edit User" size="md">
    <x-lf::form.input wire:model="form.name" label="Name" />
    <x-lf::btn.primary wire:click="save">Update</x-lf::btn.primary>
</x-lf::modal>

Alpine.js-Controlled Modal (no Livewire):

<x-lf::modal id="custom-modal" title="Custom Modal">
    <!-- Content -->
</x-lf::modal>

Trigger via JavaScript:

window.dispatchEvent(new CustomEvent('open-modal', { detail: 'custom-modal' }));

3. Tables with Actions

Sortable Table:

<x-lf::table title="Users">
    <x-lf::table.thead>
        <x-lf::table.tr>
            <x-lf::table.th sortable direction="asc">Name</x-lf::table.th>
            <x-lf::table.th>Email</x-lf::table.th>
        </x-lf::table.tr>
    </x-lf::table.thead>
    <x-lf::table.tbody>
        @foreach($users as $user)
            <x-lf::table.tr>
                <x-lf::table.td>{{ $user->name }}</x-lf::table.td>
                <x-lf::table.td>{{ $user->email }}</x-lf::table.td>
                <x-lf::table.actions>
                    <x-lf::btn.link.primary href="{{ route('users.edit', $user) }}">Edit</x-lf::btn.link.primary>
                </x-lf::table.actions>
            </x-lf::table.tr>
        @endforeach
    </x-lf::table.tbody>
</x-lf::table>

4. Layouts and Navigation

Admin Layout:

<x-lf::layout title="Admin Dashboard">
    <x-slot:aside>
        <x-lf::aside>
            <x-lf::aside.item title="Dashboard" icon="home" url="/admin" />
            <x-lf::aside.item title="Users" icon="users" url="/admin/users" />
        </x-lf::aside>
    </x-slot:aside>
    <x-lf::navbar title="Dashboard" />
    <main class="p-4">
        <!-- Page content -->
    </main>
</x-lf::layout>

Workflows

1. Rapid Prototyping

Use the package to scaffold forms, modals, and tables quickly. Replace placeholders with actual data binding later.
Example: Build a CRUD interface in hours instead of days.

2. Consistent Styling

Leverage Tailwind’s utility classes to maintain consistency across forms. Override defaults by publishing views and customizing the Blade templates.

3. Livewire + Alpine Integration

Use Alpine.js for client-side interactions (e.g., modals, theme toggles) while relying on Livewire for server-side logic.
Example: Toggle a modal with Alpine but submit form data via Livewire.

4. Theming

Customize the primary color scheme by extending Tailwind’s primary-* classes in your CSS. Example:

@layer components {
    .primary-500 { @apply bg-blue-600; }
    .primary-600 { @apply bg-blue-700; }
}

Integration Tips

1. Custom Validation Messages

Extend Livewire’s validation messages to work with the package’s form components. Example:

public function rules()
{
    return [
        'email' => 'required|email',
        'name' => 'required|min:3',
    ];
}

public function messages()
{
    return [
        'email.required' => 'The email field is required.',
        'name.min' => 'The name must be at least 3 characters.',
    ];
}

Display errors in your Blade view:

<x-lf::form.input
    name="email"
    label="Email"
    wire:model="form.email"
    :error="$errors->first('email')"
/>

2. Dynamic Forms

Use Livewire’s wire:ignore and Alpine.js to build dynamic forms. Example:

<div wire:ignore>
    <template x-for="field in fields" :key="field.id">
        <x-lf::form.input
            :name="'fields[' + field.id + '][name]'"
            label="Field Name"
            wire:model="form.fields.@{{ field.id }}.name"
        />
    </template>
</div>

3. Asset Management

If you publish assets, import them in your JavaScript entry point:
```
import './vendor/livewire-form/app';
```

For direct vendor imports:

import '../../vendor/hungnm28/livewire-form/resources/js/app';

4. Livewire Component Aliases

// config/livewire-form.php
'livewire' => [
    'components' => [
        'user-form' => \Hungnm28\LivewireForm\Livewire\UserForm::class,
    ],
],

Use in Blade:
```
<user-form />
```

Gotchas and Tips

Pitfalls

1. Alpine.js Conflicts

Issue: If your app overrides Livewire’s Alpine.js instance, the package’s interactive features (modals, theme toggles) may break.
Solution:
- Ensure Livewire’s default Alpine setup is used by not overriding it in your app’s JavaScript.
- Isolate the package’s Alpine dependencies by using Vite or Laravel Mix to bundle its assets separately.

2. Tailwind Configuration

Issue: Forgetting to add the package’s views to tailwind.config.js will result in missing Tailwind classes.

Solution:

// tailwind.config.js
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/hungnm28/live

Livewire Form Laravel Package