Add Livewire widget

[phpfour]

WHY

BEFORE - What was wrong? What was happening before this PR?

There was no official widget to load a Livewire component.

AFTER - What is happening after this PR?

We're shipping an official Livewire widget.

HOW

How did you achieve that, in technical terms?

By including a widget file to load Livewire components.

Is it a breaking change?

No.

How can we test the before & after?

It can be tested with any Livewire component, here I am using https://github.com/asantibanez/livewire-charts as an example.

1. Install Livewire in a project where Backpack is already configured:

   composer require livewire/livewire

2. Install the Livewire Charts library:

   composer require asantibanez/livewire-charts
   php artisan vendor:publish --tag=livewire-charts:public

3. Create resources/views/vendor/backpack/base/dashboard.blade.php file with below content:

   @extends(backpack_view('blank'))
   
   @php
       $pieChartModel = (new \Asantibanez\LivewireCharts\Models\PieChartModel())
           ->setTitle('Expenses by Type')
           ->addSlice('Food', 100, '#f6ad55')
           ->addSlice('Shopping', 200, '#fc8181')
           ->addSlice('Travel', 300, '#90cdf4');
   
       $widgets['before_content'][] = [
           'type' => 'livewire',
           'component' => 'livewire-pie-chart',
           'wrapper' => ['class' => 'col-md-6 col-lg-4 mt-3'],
           'params' => ['pieChartModel' => $pieChartModel],
           'attributes' => ['style' => 'height: 250px; padding-top: 20px;'],
       ];
   @endphp
   
   @push('after_scripts')
       <script src="//unpkg.com/alpinejs" defer></script>
       <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
       @livewireChartsScripts
   @endpush
   

4. Visiting the dashboard will now show a chart loaded through a Livewire component:

   

DOCUMENTATION

The following section can be added to the documentation of Widgets:

Livewire Widget

You can easily load a Laravel Livewire component as a widget, all you have to specify is the component name and the parameters it expects. As an example, if a Livewire component is loaded regularly in this way:

<livewire:livewire-column-chart :column-chart-model="$columnChartModel" />

...it can be loaded in a widget using this configuration:

[
   'type' => 'livewire',
   'component' => 'livewire-column-chart',
   'params' => ['columnChartModel' => $columnChartModel],
   // 'wrapper' => ['class' => 'col-md-6'], // optional
   // 'class'   => 'card bg-dark text-white', // optional
]

Sometimes you may need to put additional HTML attributes in the container for the component – you can just pass them to the attributes key as an array:

[
   'attributes' => ['rel' => 'chart', 'style' => 'height: 250px;']
]

[tabacitu]

That sounds AWESOME. Well done @phpfour . I think there's only one thing missing from this: How can we make it easy for people to add a Livewire component... to an existing Backpack view?

For example... what if you want to add charts inside the Show operation? Or a custom component, with a... livewire datatable, let's say 😀 That wouldn't work, because you don't have @livewireStyles and @livewireScripts onpage, right?

So then I'm wondering... is there a way to check if they have been loaded already? And if not, have the widget push those to after_styles and after_scripts? Or what's the best way to proceed here, to eliminate this step?

[phpfour]

@tabacitu I just found the @pushOnce blade directive and made sure the Livewire styles and scripts are loaded into the widget...yay!!!

(btw not sure why StyleCI has pushed changes to 15 files) 😮

[scrutinizer-notifier]

The inspection completed: No new issues

[phpfour]

Closing this in favor of Laravel-Backpack/theme-tabler#20.

[tabacitu]

Since Livewire v3 launches 20 days after Backpack v6, I'm going to hold off on this PR and only merge it AFTER that. That way, we only have to support one version of Livewire. Which doesn't need workarounds because it brings its own Alpine and everything.

[tabacitu]

Livewire v3 is out! So we need to take another look at this, polish it for v3, and decide if we can/should support both, or only Livewire v3. Wooohooo!

[pxpm]