composer require ziffmedia/nova-select-plus
^1.0
supports Nova 2-3^2.0
supports Nova 4 (with Vue 3, dark mode support, etc)This Nova component was built to satisfy the use cases just beyond Nova's built-in <select>
component. Here are
some scenarios where you might want SelectPlus
(which uses vue-select
) over the simple Select
:
The default Nova experience for BelongsToMany
and MorphsToMany
is to have a separate UI screen for
attaching/detaching and syncing relationships through a "Pivot" model. For simple relationships (relationships that do
not have addition pivot values or the only value in the pivot table is there for ordering), it is benefitial to move
this Selection to the Form workflow instead of a separate workflow.
For Select's that have between a handful to several 1000 options, it is more peformant to load the full list of options only on the screen that needs it: the Form screen.
There are 2 options for Ajax Options, the default is to load them all on the Form load. The second is to allow for full option searching (in this case you can write you own ajax search resolver).
Through ->reorderable()
, you can enable a SelectPlus
field to be reorderable. This allows, at BelongsToMany->sync()
time, to populate a pivot value useful for ordering relations.
use ZiffMedia\NovaSelectPlus\SelectPlus;
// setup model like normal:
public function statesLivedIn()
{
return $this->belongsToMany(State::class, 'state_user_lived_in')->withTimestamps();
}
// add Nova Resource Field
SelectPlus::make('States Lived In', 'statesLivedIn', State::class),
->label(string|closure $attribute)
Pick a different attribute to use as the labelDefault: 'name'
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
->label('code')
If a closure is provided, it will be called and the value can be utilized. Additionally, the output may be HTML as the component will v-html
the output on the frontend:
// Using php 7.4 short functions:
SelectPlus::make('States Visited', 'statesVisited', State::class)
->label(fn ($state) => $state->name . " <span class=\"text-xs\">({$state->code})</span>")
->usingIndexLabel()
& ->usingDetailLabel()
Default is to produce a count of the number of items on the index and detail screen
If a string name is provided, the name attribute is plucked and comma joined:
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
->usingIndexLabel('name'),
If a closure is provided, it will be called, and the value will be utilized. If the value is a string, it will be placed:
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
->usingIndexLabel(fn($models) => $models->first()->name ?? ''),
If an array is returned, the Index and Detail screens will produce a <ol>
or <ul>
list:
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
->usingIndexLabel(fn($models) => $models->pluck('name')),
->reorderable(string $pivotOrderAttribute)
- Ability to reorder multiple selects // assuming in the User model:
public function statesVisited()
{
return $this->belongsToMany(State::class, 'state_user_visited')
->withPivot('order')
->orderBy('order')
->withTimestamps();
}
// inside the Nova resource:
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
->reorderable('order'),
->optionsQuery(closure)
- Ability to apply changes to options query object // inside the Nova resource (exclude all states that start with C)
SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
->optionsQuery(function (Builder $query) {
$query->where('name', 'NOT LIKE', 'C%');
})
ajaxSearchable()
functionality, it will not replace it but be applied along with ajaxSearchable()
if it exists->ajaxSearchable(string|closure|true)
Ajax search for valuesGiven a string, models will be search the resources via the provided attribute using WHERE LIKE. Given a callback, returning a Collection will populate the dropdown:
SelectPlus::make('States Visited', 'statesVisited', State::class)
->ajaxSearchable(function ($search) {
return StateModel::where('name', 'LIKE', "%{$search}%")->limit(5);
})