• Stars
    star
    325
  • Rank 125,658 (Top 3 %)
  • Language
    PHP
  • License
    MIT License
  • Created about 5 years ago
  • Updated 23 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Laravel Nova package that adds a multiselect to Nova's arsenal of fields.

Nova Multiselect

Latest Version on Packagist Total Downloads

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

Detail View

Form View

Installation

Install the package in a Laravel Nova project via Composer:

composer require outl1ne/nova-multiselect-field

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.

use Outl1ne\MultiselectField\Multiselect;

public function fields(Request $request)
{
    return [
      Multiselect::make('Football teams')
        ->options([
          'liverpool' => 'Liverpool FC',
          'tottenham' => 'Tottenham Hotspur',
        ])

        // Optional:
        ->placeholder('Choose football teams') // Placeholder text
        ->max(4) // Maximum number of items the user can choose
        ->saveAsJSON() // Saves value as JSON if the database column is of JSON type
        ->optionsLimit(5) // How many items to display at once
        ->reorderable() // Allows reordering functionality
        ->singleSelect() // If you want a searchable single select field
        ->distinct('football') // Disables values used by other multiselects in same distinct group
        ->taggable() // Possible to add values ("tags") on the fly

        // Async model querying
        Multiselect::make('Artists')
          ->asyncResource(Artist::class),

          // If you want a custom search, create your own endpoint:
          ->api('/api/multiselect/artists?something=false', Artist::class),
    ];
}

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:

->options([
    'MS' => ['label' => 'Small', 'group' => 'Men Sizes'],
    'MM' => ['label' => 'Medium', 'group' => 'Men Sizes'],
    'WS' => ['label' => 'Small', 'group' => 'Women Sizes'],
    'WM' => ['label' => 'Medium', 'group' => 'Women Sizes'],
])

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:

Multiselect::make('Country', 'country')
    ->options([
        'IT' => 'Italy',
        'SG' => 'Singapore',
    ]),

Multiselect::make('Language', 'language')
    ->optionsDependOn('country', [
        'IT' => [
            'it' => 'Italian',
        ],
        'SG' => [
            'en' => 'English',
            'ms' => 'Malay',
            'zh' => 'Chinese',
        ]
    ]),

    // Optionally define max number of values
    ->optionsDependOnMax([
        'IT' => 1,
        'SG' => 3,
    ])

Belongs-To-Many

You can use this field for BelongsToMany relationship selection.

// Add your BelongsToMany relationship to your model:
public function categories()
{
    return $this->belongsToMany(\App\Models\Category::class);
}

// Add the field to your Resource for asynchronous option querying:
Multiselect::make('Categories', 'categories')
  ->belongsToMany(\App\Nova\Resources\Category::class),

// Alternatively, you can set the second argument to 'false' to
// query the options on page load and prevent the user from having
// to first type in order to view the available options. Note: Not
// recommended for unbounded relationship row counts.
Multiselect::make('Categories', 'categories')
  ->belongsToMany(\App\Nova\Resources\Category::class, false),

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:

php artisan vendor:publish --provider="Outl1ne\MultiselectField\FieldServiceProvider" --tag="translations"

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.

// in NovaMultiselectDetailFieldValue.vue

<template>
  <div class="relative rounded-lg bg-white shadow border border-60" v-if="values">
    <div class="overflow-hidden rounded-b-lg rounded-t-lg">
      <div class="border-b border-50 cursor-text font-mono text-sm py-2 px-4" v-for="(value, i) of values" :key="i">
        {{ value }}
      </div>
    </div>
  </div>

  <div v-else>β€”</div>
</template>

<script>
export default {
  props: ['field', 'values'],
};
</script>
// in app.js

import NovaMultiselectDetailFieldValue from './NovaMultiselectDetailFieldValue';

Nova.booting((Vue, router, store) => {
  Vue.component('nova-multiselect-detail-field-value', NovaMultiselectDetailFieldValue);
});

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.

// in FormFieldTag.vue

<template>
  <span class="multiselect__tag">
    <span>{{ option.label.trim() }}</span>
    <i class="multiselect__tag-icon" @click="remove(option)"></i>
  </span>
</template>

<script>
export default {
  props: ['option', 'remove'],
};
</script>
// in app.js

import FormFieldTag from './FormFieldTag';

Nova.booting((Vue, router, store) => {
  Vue.component('form-multiselect-field-tag', FormFieldTag);
});

Credits

License

This project is open-sourced software licensed under the MIT license.

More Repositories

1

nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.
Vue
273
star
2

nova-settings

A Laravel Nova tool for editing custom settings using native Nova fields.
PHP
267
star
3

nova-menu-builder

This Laravel Nova package allows you to create and manage menus and menu items.
PHP
233
star
4

nova-translatable

A Laravel Nova package that allows you to make any input field translatable.
PHP
189
star
5

nova-page-manager

Static page and region manager for Laravel Nova - designed for headless CMS's.
PHP
176
star
6

nova-simple-repeatable

A Laravel Nova simple repeatable rows field.
Vue
73
star
7

nova-detached-filters

This Laravel Nova package allows you to detach filters from the filter dropdown and show them on a card
PHP
58
star
8

nova-tailwind

This Laravel Nova package loads the full Tailwind CSS in the Nova admin panel.
JavaScript
56
star
9

nova-media-field

Simple media field with multiple image support, image browsing and thumbnail generation
Vue
55
star
10

nova-notes-field

This Laravel Nova package adds a notes field to Nova's arsenal of fields.
PHP
49
star
11

nova-media-hub

This Laravel Nova package allows you to manage media and media fields.
PHP
44
star
12

nova-table-field

Table field for Laravel Nova
Vue
40
star
13

nova-translations-loader

This package helps with loading translations inside a Nova package.
PHP
39
star
14

nova-multiselect-filter

Multiselect filter for Laravel Nova.
Vue
38
star
15

nova-blog

A Laravel Nova package that allows you to create a blog, manage blogposts and posts' content.
PHP
36
star
16

nova-drafts

A Laravel Nova package that allows you to make drafts of your current resources.
PHP
29
star
17

nova-color-field

A Laravel Nova package that adds a color picker to Nova's arsenal of fields.
Vue
26
star
18

nova-input-filter

Simple Laravel Nova input filter. Works as additional search field out of the box.
PHP
22
star
19

laravel-scout-batch-searchable

This Laravel package allows for batching of Scout updates.
PHP
18
star
20

nova-locale-field

A Laravel Nova field that allows you to manage multiple localisations of a model.
Vue
17
star
21

nova-inline-text-field

This Laravel Nova package adds an inline text field to Nova's arsenal of fields.
Vue
17
star
22

nova-resizable

A simple tool to allow resizing of nova resource table.
JavaScript
16
star
23

nova-locale-manager

An extremely simple Laravel Nova tool for managing locales.
PHP
15
star
24

nova-lang

This Laravel Nova package allows you to sort Nova resource's index view and assign locales to resources
Vue
14
star
25

create-frontend

JavaScript
11
star
26

nova-redirects

Redirect manager for Laravel Nova
PHP
11
star
27

laravel-generate-storage-structure

This package generates the Laravel storage folder structure. Useful when mounting an empty directory to replace `storage/` in production or staging environments.
PHP
9
star
28

nova-grid

Allow placing fields in a grid formation using ->size() helpers.
Vue
8
star
29

nova-charcounted-fields

Mirror of elevate-digital/nova-charcounted-fields.
Vue
7
star
30

laravel-create-frontend

PHP
7
star
31

core-js

A collection of JS functionalities that we commonly need to use.
JavaScript
6
star
32

core-scss

This is a SCSS partial that provides some utility mixins and default styles that fit our workflow.
CSS
5
star
33

nova-trumbowyg-field

This Laravel Nova package adds a Trumbowyg field to Nova's arsenal of fields.
PHP
5
star
34

laravel-thumbor

PHP
5
star
35

stylelint-config-rules

This is a set of rules for StyleLint.
JavaScript
4
star
36

react-countdown

JavaScript
4
star
37

softreport-linux-client

Repository to retrieve version data from server and send it to SoftReport backend
JavaScript
4
star
38

eslint-config-rules

This is a set of rules for ESLint.
JavaScript
4
star
39

nova-tooltip-field

This Laravel Nova package adds a tooltip field to Nova's arsenal of fields.
Vue
3
star
40

laravel-elastic-logger

Package to listen to Laravel MessageLogged event and queue the log data to be sent to Elastic logs over API.
PHP
3
star
41

nova-currency-vat-field

A Laravel Nova Currency field extension with VAT toggle.
Vue
3
star
42

laravel-healthz

Health check route for Laravel application.
PHP
2
star
43

laravel-console-over-http

PHP
2
star
44

nova-openai

PHP
2
star
45

using-models-in-laravel-migrations

Article about how to use models in Laravel migrations
PHP
1
star
46

nova-account-settings

PHP
1
star
47

laravel-google-cloud-queues

Manage Google Cloud queues from Laravel app.
PHP
1
star
48

nova-release-tracking

Github Action to track nova releases
JavaScript
1
star
49

nova-translations-loader-php

A Laravel Nova package that simplifies the loading of translations inside other packages.
PHP
1
star