https://github.com/devsrv/livewire-modal

Turn Laravel Livewire Component into Modal.
https://github.com/devsrv/livewire-modal

alpine-js laravel livewire livewire-component modal

Last synced: about 1 month ago
JSON representation

Turn Laravel Livewire Component into Modal.

• Host: GitHub
• URL: https://github.com/devsrv/livewire-modal
• Owner: devsrv
• License: mit
• Created: 2021-05-01T15:25:15.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-11-30T16:42:42.000Z (12 months ago)
• Last Synced: 2024-10-01T14:48:01.931Z (about 1 month ago)
• Topics: alpine-js, laravel, livewire, livewire-component, modal
• Language: PHP
• Homepage:
• Size: 34.2 KB
• Stars: 14
• Watchers: 1
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Livewire Modal

[![Latest Version on Packagist](https://img.shields.io/packagist/v/devsrv/livewire-modal.svg?style=flat-square)](https://packagist.org/packages/devsrv/livewire-modal)

[![Total Downloads](https://img.shields.io/packagist/dt/devsrv/livewire-modal.svg?style=flat-square)](https://packagist.org/packages/devsrv/livewire-modal)

Turn Laravel Livewire Component into Modal.



## 🏷 Features

- Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )

- Skeleton loading indicator 

- Support alert message ( info, warning, success, danger ) 

- Trigger from Alpine Component / Vanilla JS / Livewire Class Component

## 🧾 Requirements

| **Bootstrap**  | 4 or 5 | *no bootstrap support coming soon*

|---|---|---|

| Jquery  |   | *for bootstrap 4 only* 

|  Laravel | >= 7 |   |

|  Livewire | >= 2.0  |   |

|  Alpine JS |  |   |

## 📥 Installation

```shell

composer require devsrv/livewire-modal

```

#### Include the base modal component

```html

    ...

    @livewireStyles

    

    ...

     👈

    @livewireScripts

```

#### Publish assets

```shell

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public

```

#### Publish config

```shell

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=config

```

> config support bootstrap theme: bs4 | bs5

 

### 📌 Updating

> **Important:** when updating the package make sure to re-publish the assets with `--force` flag

```shell

php artisan vendor:publish --provider="devsrv\LivewireModal\LivewireModalServiceProvider" --tag=public --force

```

## ⚗️ Usage

###  Create Livewire Component 

No consideration required, create livewire component as usual. Use livewire's `mount` to handle passed parameters

### ✨ Open Modal

###### ✔️ From Alpine Component

```html



  open

  



```


###### ✔️ Via Vanilla JS

```html

  open

```

###### ✔️ Via Trigger Blade Component

```html

open

```

###### ✔️ From Livewire Class

```php

$this->dispatchBrowserEvent('open-x-modal', ['title' => 'My Modal', 'modal' => 'product.order', 'args' => ['id' => 1, 'rate' => 20]]);

```

> 💡 Modal size supports `sm` `lg` `xl`        *// completely optional*

## 🌈 Bonus

you are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:

```html

    


        ...

    

    ...


    

        ...

        Save

    

```

#### ✌🏼 Two reasons to use this component

🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes

🟢 alert notification message which can be triggered by: 

```php 

$this->info('Hi !, i am an alert');  // support `info` `warning` `success` `danger`

```

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

## 👋🏼 Say Hi! 

Leave a ⭐ if you find this package useful 👍🏼,

don't forget to let me know in [Twitter](https://twitter.com/srvrksh)