Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sertxudeveloper/livewire-combobox
Add comboboxes to your Livewire forms
https://github.com/sertxudeveloper/livewire-combobox
combobox eloquent hacktoberfest laravel livewire livewire-component selectbox selector sertxudeveloper
Last synced: about 1 month ago
JSON representation
Add comboboxes to your Livewire forms
- Host: GitHub
- URL: https://github.com/sertxudeveloper/livewire-combobox
- Owner: sertxudeveloper
- License: mit
- Created: 2022-06-07T16:46:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-23T12:11:55.000Z (about 2 months ago)
- Last Synced: 2024-09-30T04:41:38.465Z (about 2 months ago)
- Topics: combobox, eloquent, hacktoberfest, laravel, livewire, livewire-component, selectbox, selector, sertxudeveloper
- Language: PHP
- Homepage:
- Size: 447 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Add combobox to your Livewire forms
       [](https://app.codecov.io/gh/sertxudeveloper/livewire-combobox)
Do you have a large dataset, and you need to be able to display it in a dropdown?
When a basic select input is not enough, you can use a combobox!
A combobox works like a select input, but instead of a dropdown, it displays a list of options that can be filtered by
typing.
You will no longer need to download all the data at the startup, just get the data you're looking for.
## Installation
You can install the package via composer:
```bash
composer require sertxudeveloper/livewire-combobox
```
## Usage
Once you have installed the package, you can use it in your Livewire forms.
First, you need to execute the following command in your terminal:
```bash
php artisan combobox:make UsersCombobox -m User
```
This will create a new component in the `app/Livewire` directory.
The new `UsersCombobox` component will look like this:
```php
$model */
public string $model = User::class;
}
```
As you can see, the `$model` property is set to the `User` model.
This means that the component will be able to query the database using this model.
By default, the component will display the `name` column of the model.
You can change this by setting the `labelColumn` property:
```php
/**
* The column to be shown as the label.
*
* @var string
*/
public string $labelColumn = 'title'; // Default: 'name'
```
To start using the component, you need to add it to your Livewire form.
```blade
```
```blade
@livewire('users-combobox')
```
You can also pass some parameters to the component:
```blade
```
> [!WARNING]
> If you don't pass any parameters, the component will use the default values.
> It's recommended to pass the parameters to the component.
> You can also add the values overriding the default values in the class.
## Events
While interacting with the component, some events might be fired.
The name of the events depends on the component name, this allows you to have more than one combobox in your form.
- `selected-`: When the user selects an option from the dropdown.
- `cleared-`: When the user clears the selected option.
These events will be fired up, so the parent component can react to the user interaction.
> [!Note]
> The `selected` event contains the selected model as a parameter.
## Adding filters
You can filter the results by adding filters to the component.
```php
/**
* Apply filters to the query.
*
* @param Builder $query
* @return void
*/
protected function filter(Builder $query): void {
$query->where('email', 'like', "%@example.com");
}
```
The `filter` method receives the query builder as a parameter, so you can add as many filters as you want.
The filters will be applied to the query before fetching the results, so you can use them to limit the options given to the user.
## Testing
This package contains tests, you can run them using the following command:
```bash
composer test
```
## Contributing
Please see [CONTRIBUTING](https://github.com/sertxudeveloper/.github/blob/main/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
## Credits
- [Sergio Peris](https://github.com/sertxudev)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
Copyright © 2022 Sertxu Developer