Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teofanis/searchable-dropdown
Searchable dropdown component Laravel Package
https://github.com/teofanis/searchable-dropdown
alpinejs dropdown laravel livewire multiselect searchable-dropdown tailwindcss
Last synced: 4 months ago
JSON representation
Searchable dropdown component Laravel Package
- Host: GitHub
- URL: https://github.com/teofanis/searchable-dropdown
- Owner: teofanis
- License: mit
- Created: 2020-12-29T18:32:00.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-30T23:01:19.000Z (almost 2 years ago)
- Last Synced: 2024-09-18T17:15:29.326Z (4 months ago)
- Topics: alpinejs, dropdown, laravel, livewire, multiselect, searchable-dropdown, tailwindcss
- Language: Blade
- Homepage:
- Size: 35.2 KB
- Stars: 6
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Searchable Dropdown
[](https://packagist.org/packages/teofanis/searchable-dropdown)
[](https://travis-ci.org/teofanis/searchable-dropdown)
[](https://scrutinizer-ci.com/g/teofanis/searchable-dropdown)
[](https://packagist.org/packages/teofanis/searchable-dropdown)
Searchable dropdown is a dropdown component built with Alpine JS, tailwind and Blade components.
It can be used as a normal dropdown or a multiple selection dropdown.
## Installation
You can install the package via composer:
```bash
composer require teofanis/searchable-dropdown
```
Publish the dropdowns' config and asset files
```bash
php artisan vendor:publish --tag=searchable-dropdown-config
php artisan vendor:publish --tag=searchable-dropdown-assets
```
Finally add the dropdown styles and scripts in the head section of your layout file.
```bash
@searchableDropdownStyles
@searchableDropdownScripts
```
## Usage
Here's an example of how you could use the dropdown inside your blade views.
#Simple select & Multiselect
-Select
```
```
-Multiselect
```
```
#Customization & Props
| Props | Required | Context | Description | Type | Example |
|------------------------|-------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------|--------------|--------------------------------------------------------|
| name | yes | any | Used as "name" attribute on input fields and used to internally by the dropdown | string | name="pizzaOptions" |
| entangle | Required within Livewire components | Livewire | The dropdown will share its state with the "entangled" property of the Livewire components its rendered in. | string | entangle="pizzaToppings" |
| context | Required within Livewire components | Livewire | The dropdown will use the context to setup the state-sharing with livewire component. (Won't be required in future release) | LW | :context="$this" |
| inLivewire | Required within Livewire components | Livewire | Similarly to the context prop, this will be used in the initial setup of the component. (Won't be required in future release) | boolean | :in_live_wire="true" |
| value | no | any | Used as any value attribute on input fields | string/array | value="old('name')" \|\| :value="[1,2,3]" |
| data | yes | any | Populates the dropdown list, collection keys will be returned for selections and values will be displayed. | Collection | :data="dataProvider()" |
| xModel | no | Alpine | An option prop when you want to bind an apline js x-data field as a model of the dropdown. | string | x_model="modelName" |
| multiselect | multiselect | any | Used to behave like a multiple option dropdown or a single option dropdown | boolean | :multiselect="true" |
| alignListItems | no | any | Aligns the text on the dropdown list. You can pass a tailwind class for text-alignment e.g(text-left, text-right, text-center etc.) | string | align_items="text-left" |
| disabled | no | any | Disable the dropdown interaction | boolean | :disabled="true" |
| label | no | any | Displays the prop value as as label of the dropdown | string | label="My Dropdown Label" |
| placeholder | no | any | Sets the placeholder text for the dropdown | string | placeholder="My Placeholder Text" |
| searchFieldPlaceholder | no | any | Sets the placeholder for the search field | string | search_field_placeholder="My Search field Placeholder" |
| noResultsMessage | no | any | Sets the message of the no-results block when filtering | string | no_results_message="No options found" |
Most props have default values set in config/searchable-dropdown-config.php that serve as a base for most use-cases.
Placeholder Defaults
```php
'placeholders' => [
'default-no-results-message' => 'No Results Found',
'default-placeholder' => 'Select an option',
'default-search-placeholder' => 'Search...',
]
```
Setting Defaults
```php
'settings' => [
'default-is-multiselect' => false,
'default-is-in-livewire' => false,
'default-list-item-alignment' => 'text-left'
],
```
Theme Styles
With the theme styles, you can do some small adjustments on color pallete of the dropdown as well as style the wrapper, label or button all using tailwind classes
```php
'styles' => [
'theme' => [
'default-text-color' => 'text-gray-900',
'default-primary-color' => 'indigo-600',
'default-secondary-color' => 'white',
],
'classes' => [
'wrapper' => 'inline-block w-full rounded-md shadow-sm',
'label' => 'block tracking-wide text-xs font-bold mb-4 char-style-medium cursor-pointer leading-none text-mbr_blue font-hairline',
'button' => 'relative z-0 w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5',
]
],
```
To Fully customize the look & feel of the dropdown, publish the packages' views.
### Testing
``` bash
composer test
```
### Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
### Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
## Credits
- [Teofanis Papadopulos](https://github.com/teofanis)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.