Add Livewire widget

[phpfour]

This adds an official Livewire widget.

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;']
]

HOW TO TEST

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 the 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:

   

[tabacitu]

Closing in favor of #20 - widgets should live in CRUD, not themes.

[niladam]

In favor of #20 ? Isn't this the same as...this ?:)

[tabacitu]

Haha good catch. It's Laravel-Backpack/CRUD#4971