### Install Package via Composer

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Installs the `hostmoz/blade-bootstrap-components` package into your Laravel project using Composer. This command downloads the package and its dependencies.

```bash
composer require hostmoz/blade-bootstrap-components
```

--------------------------------

### Run Package Tests

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Executes the automated test suite for the package using PHPUnit via the Composer script.

```bash
composer test
```

--------------------------------

### Using Standard Bootstrap Form Components

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Demonstrates how to use standard Blade components provided by the package to build a simple form with Bootstrap 5 styling. Components like form, input, select, textarea, checkbox, and submit are shown.

```blade
{{-- Basic Form --}}
<x-bootstrap::form.form method="POST" action="/users">
    <x-bootstrap::form.input name="name" label="Your Name" />
    <x-bootstrap::form.select name="country_code" :options="$countries" label="Select a Country"/>
    <x-bootstrap::form.textarea name="bio" label="Biography" />
    <x-bootstrap::form.checkbox name="agree_terms" label="Agree with terms" />
    <x-bootstrap::form.submit value="Register" />
</x-bootstrap::form.form>
```

--------------------------------

### Publish Configuration File

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Publishes the package's configuration file (`config/blade-bootstrap-components.php`) allowing customization of settings like the component prefix, default JS inclusion, etc.

```bash
php artisan vendor:publish --tag=bootstrap-config
```

--------------------------------

### Triggering Livewire Modal from Livewire View

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Shows how to open a specific Livewire modal component from another Livewire component's view using the `@this->dispatch` or `$dispatch` syntax with `wire:click`. It demonstrates passing parameters (like a user ID) to the modal's `mount` method.

```blade
{{-- From another Livewire component's view --}}
<button type="button" class="btn btn-warning" wire:click="$dispatch('openModal', { component: 'edit-user-modal', arguments: { user: {{ $someUserId }} }})">
    Edit Another User
</button>
```

--------------------------------

### Publish Component Views for Customization

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Publishes the Blade views for all components to `resources/views/vendor/blade-bootstrap-components/`. This allows developers to modify the HTML structure of the components.

```bash
php artisan vendor:publish --tag=bootstrap-views
```

--------------------------------

### Creating the Livewire Modal Component View

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Provides the Blade template for the content of a Livewire modal. This view defines the HTML structure for the modal body and footer, using Bootstrap classes and `wire:model` for data binding and `wire:click` for actions, excluding the main modal backdrop/dialog structure which is handled by the root modal component.

```blade
<div>
       {{-- The modal structure (backdrop, dialog, content, header) is handled by the parent <livewire:bootstrap-modal /> --}}
       {{-- You only need to provide the *content* for the modal body and potentially a footer --}}
       
       <div class="modal-body">
           <p>Editing user: {{ $user->id }}</p>
           <div class="mb-3">
               <label for="name" class="form-label">Name</label>
               <input type="text" wire:model="name" class="form-control" id="name">
               @error('name') <span class="text-danger">{{ $message }}</span> @enderror
           </div>
           <div class="mb-3">
               <label for="email" class="form-label">Email</label>
               <input type="email" wire:model="email" class="form-control" id="email">
               @error('email') <span class="text-danger">{{ $message }}</span> @enderror
           </div>
       </div>
       <div class="modal-footer">
           <button type="button" class="btn btn-secondary" wire:click="$dispatch('closeModal')">Cancel</button>
           <button type="button" class="btn btn-primary" wire:click="save">Save Changes</button>
       </div>
   </div>
```

--------------------------------

### Create Livewire Modal Component

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Generates a new Livewire component using the Artisan command. This component will be modified to extend `ModalComponent` for use with the modal system.

```bash
php artisan make:livewire EditUserModal
```

--------------------------------

### Triggering Livewire Modal from Blade

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Shows how to open a specific Livewire modal component from a standard Blade view using JavaScript's `Livewire.dispatch` event. It demonstrates passing parameters (like a user ID) to the modal's `mount` method.

```blade
{{-- From a regular Blade view --}}
<button type="button" class="btn btn-primary" onclick="Livewire.dispatch('openModal', { component: 'edit-user-modal', arguments: { user: {{ $user->id }} }})">
    Edit User (ID: {{ $user->id }})
</button>
```

--------------------------------

### Defining a Livewire Modal Component Class

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Shows the PHP class structure for a Livewire component intended to be used as a modal. It extends `ModalComponent`, includes properties, a `mount` method for initialization, a `render` method passing data including the modal title, and a `save` method for handling form submission and closing the modal.

```php
<?php

namespace App\Livewire;

use Hostmoz\BladeBootstrapComponents\Components\Elements\ModalComponent;

class EditUserModal  extends ModalComponent
{
    public User $user;
    public string $name = '';
    public string $email = '';

    // Optional: Set a title for the modal header
    public function mount(User $user)
    {
        $this->user = $user;
        $this->name = $user->name;
        $this->email = $user->email;
    }

    public function render()
    {
        // Add modal-title attribute for the header title
        return view('livewire.edit-user-modal', [
            'modalTitle' => 'Edit User: ' . $this->user->name
        ]);
    }

    public function save()
    {
        $this->validate(['name' => 'required', 'email' => 'required|email']);
        $this->user->update(['name' => $this->name, 'email' => $this->email]);

        // Close the modal after saving
        $this->dispatch('closeModal');
    }
}
```

--------------------------------

### Using Livewire Dependent Selects Component

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Demonstrates how to use the `dependent-selects` Livewire component for creating cascading dropdowns (e.g., Country -> State -> City). It requires passing options data, labels, and names for wire models.

```blade
<livewire:bootstrap::dependent-selects
    name="location"
    :options="['countries' => $countries, 'states' => $states, 'cities' => $cities]"
    labels="['countries' => 'Country', 'states' => 'State', 'cities' => 'City']"
    wire-model-names="['countries' => 'selectedCountry', 'states' => 'selectedState', 'cities' => 'selectedCity']"
/>
```

--------------------------------

### Publish Bootstrap Assets

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Publishes required JavaScript and other assets for components like Date Pickers, Select2, etc., to your public directory. This step is necessary for components relying on frontend JavaScript.

```bash
php artisan vendor:publish --tag=bootstrap-assets --force
```

--------------------------------

### Add Livewire Modal Directive to Layout

Source: https://github.com/hostmoz/blade-bootstrap-components/blob/main/README.md

Integrates the main Livewire modal component into your application's layout file (e.g., `app.blade.php`). This directive acts as a container that renders opened modal components.

```blade
<!DOCTYPE html>
<html>
<head>
    {{-- ... head content ... --}}
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js']) {{-- Or your asset bundling --}}
</head>
<body>
    {{ $slot }} {{-- Or @yield('content') --}}

    @livewireScripts
    @livewire('bootstrap-modal') {{-- Or <livewire:bootstrap-modal /> --}}
</body>
</html>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.