composer require ziffmedia/nova-select-plus

• Version ^1.0 supports Nova 2-3
• Version ^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),

Default: '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>")

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')),

    // 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'),

    // 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%');
        })

• Note: this will apply before any ajaxSearchable() functionality, it will not replace it but be applied along with ajaxSearchable() if it exists

Given 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);
        })

When integrating SelectPlus in Nova’s index pages, optimizing the loading and querying of related models to ensure smooth and efficient performance is crucial.

Utilize Laravel’s $with method to eagerly load related models when querying the database. This minimizes the number of queries executed and reduces database load, enhancing performance.

    // inside the Nova resource:
    $with = ['statesVisited'];

    public function fields()
    {
        SelectPlus::make('States Visited', 'statesVisited', State::class);
    }