README

Requirements

• Tailwind
• Alpine JS
• @stack('scripts') in layout blade

Installation

You can install the package via composer:

composer require mt1sk/livewire-multiselect

Usage

1) Add LivewireMultiselect\HasSelect trait to your component

class Index extends Component
{
    use LivewireMultiselect\HasSelect;

2) Add select listener to your component

protected $listeners = ['select'];

3) Add variables for an available options and a selected ones to your component

// for selected options - multiple
public ?array $teamFilter = null;
// for selected option - single
public int|string|null $teamFilter = null;

// available options
public ?Collection $teams = null;

4) Add the select to your page

<livewire:multiselect parentId="{{ $this->id }}"
                      name="teamFilter"
                      label="name"
                      :selected="$teamFilter"
                      title="{{ __('Teams') }}"
                      :options="$teams"
                      :multiselect="true"
                      styles="w-full"></livewire:multiselect>

Events

Multiselect component emits a select event, which is caught by HasSelect trait and sets values to a proper variables in your component.
This trait also calls selected function on your component, if it exists, and passes a select name and selected items. You can define a selected method in your component to react on the changes:
Works only if :simpleForm="false"

multiselect

public function selected(string $name, array $value)
{
    if ($name === 'teamFilter') {
        // do something
    }
}

select

public function selected(string $name, int|string|null $value)

Props

Additional functionality

You can refresh selected items by calling in your component

// reset component variables
$this->reset('teamFilter');
$this->anotherFilter = [2,3];
// reset options on all component selects
$this->emitTo('multiselect', 'refresh', $this);

// you can also do something like this,
// BUT ALL NOT PASSED SELECTS, WITHIN THE COMPONENT, WILL BE RESET TO EMPTY.
$this->emitTo('multiselect', 'refresh', ['id' => $this->id, 'teamFilter' => [2]]);

You can also refresh available options

$teams = $this->teams->take(3);
// $teams - available options
// 'teamFilter' - select name
// $this->id - component id(parentId)
$this->emitTo('multiselect', 'refreshOptions', $teams, 'teamFilter', $this->id);

Customizing

You can customize a select look by publishing its view

php artisan vendor:publish --tag=multiselect:views

License

The MIT License (MIT). Please see License File for more information.