Download the PHP package outl1ne/nova-multiselect-field without Composer
On this page you can find all versions of the php package outl1ne/nova-multiselect-field. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download outl1ne/nova-multiselect-field
More information about outl1ne/nova-multiselect-field
Files in outl1ne/nova-multiselect-field
Package nova-multiselect-field
Short Description A multiple select field for Laravel Nova.
License MIT
Informations about the package nova-multiselect-field
Nova Multiselect
This Laravel Nova package adds a multiselect to Nova's arsenal of fields.
Requirements
php: >=8.0
laravel/nova: ^4.1
Features
- Multi- and singleselect with search
- Asynchronous search
- Reordering functionality with drag & drop
- Dependency on other Multiselect instances
- Distinct values between multiple multiselects
- Fully compatible with light and dark modes
Screenshots
Installation
Install the package in a Laravel Nova project via Composer:
Usage
The field is used similarly to Nova's native Select field. The field type in the database should be text-based (ie string
, text
or varchar
), selected values are stored as a stringified JSON array.
Option groups
Option groups are supported. Their syntax is the same as Laravel's option group syntax.
In this example (from Nova docs), all values are grouped by the group
key:
Dependencies
You can make a Multiselect depend on another by using optionsDependOn
. The value from the optionsDependOn
Multiselect has to be the key to the options and the value must be a key-value dictionary of options as usual.
Usage:
Belongs-To-Many
You can use this field for BelongsToMany
relationship selection.
Options
Possible options you can pass to the field using the option name as a function, ie ->placeholder('Choose peanuts')
.
Option | type | default | description |
---|---|---|---|
options |
Array|callable | [] | Options in an array as key-value pairs (['id' => 'value'] ). |
api($path, $resource) |
String, String (Resource) | null | URL that can be used to fetch options asynchronously. The search string is provided in the search query parameter. The API must return object containing key-value pairs (['id' => 'value'] ). |
asyncResource($resource) |
String (Resource) | null | Provide a Resource class to fetch the options asynchronously. |
placeholder |
String | Field name | The placeholder string for the input. |
max |
Number | Infinite | The maximum number of options a user can select. |
groupSelect |
Boolean | false | For use with option groups - allows the user to select whole groups at once |
singleSelect |
Boolean | false | Makes the field act as a single select which also means the saved value will not be an array. |
saveAsJSON |
Boolean | false | When you have a SQL JSON column, you can force the field to save the values as JSON. By default, values are saved as a stringified array. |
optionsLimit |
Number | 1000 | The maximum number of options displayed at once. Other options are still accessible through searching. |
nullable |
Boolean | false | If the field is nullable an empty select will result in null else an empty array ([] ) is stored. |
reorderable |
Boolean | false | Enables (or disables) the reordering functionality of the multiselect field. |
optionsDependOn |
String, Array | null | Determines which Multiselect this field depends on. |
belongsToMany |
String (Resource) | null | Allows the Multiselect to function as a BelongsToMany field. |
belongsTo |
String (Resource) | null | Allows the Multiselect to function as a BelongsTo field. |
taggable |
Boolean | false | Makes the Multiselet to support tags (dynamically entered values). |
clearOnSelect |
Boolean | false | Clears input after an option has been selected. |
distinct |
String | Field Attribute | Syncs options between multiple multiselects in the same group and disables the options that have already been used. |
indexDelimiter |
String | ', ' |
Sets delimiter used to join values on index view |
indexValueDisplayLimit |
Number | 9999 | Define how many values can be displayed at once on index view |
indexCharDisplayLimit |
Number | 40 | Set char limit for index display value |
Localization
The translations file can be published by using the following publish command:
You can then edit the strings to your liking.
Overwriting the detail field
You can overwrite the detail view value component to customize it as you see fit.
Create a new component for NovaMultiselectDetailFieldValue
and register it in your app.js
. The component receives two props: field
and values
. The values
prop is an array of selected labels.
Overwriting the form tag field
You can overwrite the tag template in the form-field component to customize it as you see fit.
Create a new component for FormFieldTag
and register it in your app.js
. The component receives two props: option
and remove
. The option
prop is an object with, for example, the label
.
Credits
License
This project is open-sourced software licensed under the MIT license.