Download the PHP package asantibanez/livewire-select without Composer
On this page you can find all versions of the php package asantibanez/livewire-select. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download asantibanez/livewire-select
More information about asantibanez/livewire-select
Files in asantibanez/livewire-select
Package livewire-select
Short Description Livewire dropdown select component
License MIT
Homepage https://github.com/asantibanez/livewire-select
Informations about the package livewire-select
Livewire Select
Livewire component for dependant and/or searchable select inputs
Preview
Installation
You can install the package via composer:
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.
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.
In this class, you must override the following methods to provide options for your select input
options()
must return a collection of keyed values array items that must have at least the following
keys: value
and description
. For example:
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.
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
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
- Andrés Santibáñez
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of livewire-select with dependencies
illuminate/support Version ^6.0|^7.0|^8.0|^9.0|^10.0
livewire/livewire Version ^2.0