asantibanez/ livewire-select

(v2.0.0) 3 months ago

PHP

Need help with livewire-select?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

asantibanez

177 Stars

27 Forks

MIT License

30 Commits

9 Opened issues

Description

Livewire component for dependant and/or searchable select inputs

Services available

Need anything else?

Contributors list

Andrés Santibáñez asantibanez

# 226,433

Java

PHP

mailgun

Laravel

29 commits

Readme

Livewire Select

Name: livewire-select
Brand: livewire-select
SKU: //asantibanez/livewire-select
Rating: 2.1925 (177 reviews)

Livewire component for dependant and/or searchable select inputs

Preview

Installation

You can install the package via composer:

composer require asantibanez/livewire-select

Requirements

This package uses

livewire/livewire

(https://laravel-livewire.com/) under the hood.

It also uses TailwindCSS (https://tailwindcss.com/) for base styling.

Please make sure you include both of these dependencies before using this component.

Usage

In order to use this component, you must create a new Livewire component that extends from

LivewireSelect

You can use

make:livewire

to create a new component. For example.

bash
php artisan make:livewire CarModelSelect

In the

CarModelSelect

class, instead of extending from the base Livewire

Component

class, extend from

LivewireSelect

class. Also, remove the

render

method. You'll have a class similar to this snippet.

class CarModelSelect extends LivewireSelect
{
    //
}

In this class, you must override the following methods to provide options for your select input

php
public function options($searchTerm = null) : Collection 
{
    //
}

options()

must return a collection of keyed values array items that must have at least the following keys:

value

and

description

. For example:

public function options($searchTerm = null) : Collection 
{
    return collect([
        [
            'value' => 'honda',
            'description' => 'Honda',
        ],
        [
            'value' => 'mazda',
            'description' => 'Mazda',
        ],
        [
            'value' => 'tesla',
            'description' => 'Tesla',
        ],       
    ]);
}

To render the component in a view, just use the Livewire tag or include syntax

You'll see on screen a select input with some custom styles with your defined values

Nothing fancy there. Now, let's make another select input depend on its value.

Create another component following the same process above. In this case, we will create a

CarModelSelect

with the following

options()

method.

// In CarModelSelect component
public function options($searchTerm = null) : Collection 
{
    $modelsByBrand = [
        'tesla' => [
            ['value' => 'Model S', 'description' => 'Model S'],
            ['value' => 'Model 3', 'description' => 'Model 3'],
            ['value' => 'Model X', 'description' => 'Model X'],
        ],
        'honda' => [
            ['value' => 'CRV', 'description' => 'CRV'],
            ['value' => 'Pilot', 'description' => 'Pilot'],
        ],
        'mazda' => [
            ['value' => 'CX-3', 'description' => 'CX-3'],
            ['value' => 'CX-5', 'description' => 'CX-5'],
            ['value' => 'CX-9', 'description' => 'CX-9'],
        ],
    ];

$carBrandId = $this-&gt;getDependingValue('car_brand_id');

if ($this-&gt;hasDependency('car_brand_id') &amp;&amp; $carBrandId != null) {
    return collect(data_get($modelsByBrand, $carBrandId, []));
}

return collect([
    ['value' =&gt; 'Model S', 'description' =&gt; 'Tesla - Model S'],
    ['value' =&gt; 'Model 3', 'description' =&gt; 'Tesla - Model 3'],
    ['value' =&gt; 'Model X', 'description' =&gt; 'Tesla - Model X'],
    ['value' =&gt; 'CRV', 'description' =&gt; 'Honda - CRV'],
    ['value' =&gt; 'Pilot', 'description' =&gt; 'Honda - Pilot'],
    ['value' =&gt; 'CX-3', 'description' =&gt; 'Mazda - CX-3'],
    ['value' =&gt; 'CX-5', 'description' =&gt; 'Mazda - CX-5'],
    ['value' =&gt; 'CX-9', 'description' =&gt; 'Mazda - CX-9'],
]);
}

and define it in the view like this

With these two snippets we have defined a select input that

depends-on

another select input with name

car_brand_id

. With this definition, we tell our component to listen to any updates on our

car_brand_id

input and be notified on changes.

Notice in the

options()

method the use of two other helper methods:

getDependingValue

and

hasDependency

getDependingValue('token')

will return the value of another field, in this case

car_brand_id

. If

car_brand_id

has no value, then it will return

null

hasDependency('token')

allows us to check if our component has been specified to depend on other component values. This allows us to reuse the component by checking if a dependency has been specified in our layouts.

For example if we define the same component without the

:depends-on

attribute, we can use the component and return all car models.

It should look something like this

Searchable inputs

You can define the

searchable

attribute on the component to change the behavior of your inputs. With

:searchable="true"

your component will change its behavior to allow searching the options returned in the

options()

method.

Your input will look something like this

To filter the options in the dropdown, you can use the

$searchTerm

parameter in the

options()

method.

Customizing the UI

// TODO 😬

Advanced behavior

// TODO 😬

AlpineJs support

Add AlpineJs for arrow-keys navigation, enter key for selection, enter/space keys for reset. 😎

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

License

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