Download the PHP package victorybiz/laravel-simple-select without Composer
On this page you can find all versions of the php package victorybiz/laravel-simple-select. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download victorybiz/laravel-simple-select
More information about victorybiz/laravel-simple-select
Files in victorybiz/laravel-simple-select
Package laravel-simple-select
Short Description Laravel Simple Select inputs component for Blade and Livewire.
License MIT
Homepage https://github.com/victorybiz/laravel-simple-select
Informations about the package laravel-simple-select
Laravel Simple Select
Laravel Simple Select inputs component for Blade and Livewire.
DEMO PREVIEW
Table of Contents
- Laravel Simple Select
- DEMO PREVIEW
- Table of Contents
- Installation
- Requirements
- JavaScript Dependencies
- Usage
- Simple Select
- Custom Option Slot
- Custom Selected Slot
- Custom Icon Slots
- Dependent Selects
- Event Listener
- Positioning
- Props / Attributes
- Slots / Custom Display
- Events
- Testing
- Changelog
- Contributing
- Security
- Credits
- License
- Laravel Package Boilerplate
Installation
You can install the package via composer:
OPTIONAL: To customize the component, you should publish the configuration file using the vendor:publish Artisan command. The configuration file will be placed in your application's config directory and view file in views directory respectively:
Requirements
This package use the following packages.
- Laravel Livewire (https://laravel-livewire.com/) is required when using Livewire
wire:model
- TailwindCSS (https://tailwindcss.com/)
- Heroicon (https://heroicons.com/)
- Alpine.js v3 (https://alpinejs.dev/)
- Popper.js (https://popper.js.org/)
Please make sure you include these dependencies before using this component.
JavaScript Dependencies
For any external JavaScript dependency, we recommend you install them through npm or yarn, and then require them in your project's JavaScript. To install each of the dependencies this package makes use of, run this command in the terminal:
If you’re using the compiled JavaScript, don’t forget to include CDN versions of the JavaScript Dependencies before it.
Usage
Simple Select
Custom Option Slot
Custom Selected Slot
Custom Icon Slots
Dependent Selects
If you have a custom select whose options depend on the selection of another select, or just some kind of condition to be met, you can listen to the updated event of the livewire model of the main select to update the options in the dependent select.
Create a livewire component as the form page
In your component view
Event Listener
Positioning
The simple-select component makes use of Popper.js
for positioning the select menu. This should remove the need for fixed positioning the select menu now. In addition to positioning the menu when opened, Popper.js will also re-position the menu as needed when the page is scrolled.
Props / Attributes
Name | Type | Default | Required | Description |
---|---|---|---|---|
id | Integer\|\|String |
Yes | Used to identify the component in events. | |
name | Integer\|\|String |
Yes | Specifies a name for component. | |
options | Array |
Yes | Array of available options: Objects, Strings or Integers. If array of objects, visible text/label will default to option.text and value default to option.value . |
|
value-field | String |
'value' |
No | Array key for option value if options is an associative array. |
text-field | String |
'text' |
No | Array key for option text if options is an associative array. |
value | Array\|\|String\|\|Integer |
null |
No | Presets the selected options. |
placeholder | String |
'Select Option' |
No | Equivalent to the placeholder attribute on a <select> input. |
searchable | Boolean |
true |
No | Show / hide options search input. |
search-input-placeholder | String |
'Search...' |
No | Equivalent to the placeholder attribute on a <input> . |
clearable | Boolean |
false |
No | Enable support for clearable selection. Use only for a non multiple select. |
class | String |
No | Equivalent to the class attribute on a <select> input. |
|
multiple | Boolean |
false |
No | Equivalent to the multiple attribute on a <select> input. This also enable multiple options tagging if set. |
max-selection | Integer |
No | Limit number of allowed selected options. | |
required | Boolean |
false |
No | Equivalent to the required attribute on a <select> input. |
disabled | Boolean |
false |
No | Equivalent to the disabled attribute on a <select> input. |
no-options | String |
'No option data.' |
No | Message to show when options list is empty. |
no-result | String |
'No results match your search.' |
No | Message to show when no option. |
on-select | String |
'select' |
No | Customize event name of an event emitted after selecting an option. |
Slots / Custom Display
Name | Description |
---|---|
customOption | Slot for custom option text template. See example above. |
customSelected | Slot for custom selected template. See example above. |
customDeselectOptionIcon | Slot for custom deselect option icon markup. See example above. |
customCaretDownIcon | Slot for custom caret down icon markup. See example above. |
customCaretUpIcon | Slot for custom caret up icon markup. See example above. |
Events
Name | Listen to | Description |
---|---|---|
Select | select |
Emitted after selecting an option. See example above. |
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
- Victory Osayi Airuoyuwa
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
Laravel Package Boilerplate
This package was generated using the Laravel Package Boilerplate.
All versions of laravel-simple-select with dependencies
illuminate/support Version ^8.0|^9.0|^10.0|^11.0
livewire/livewire Version ^2.4|^3.0