README

Compatibility

Installation

composer require MadZee-M/moonshine-tom-select

Usage

use MadZeeM\MoonshineTomSelect\Fields\TomSelect;


TomSelect::make('Select')

Данное поле полностью совместима с текущим основным полем MoonShine, поэтому можно сделать так, для быстрой интеграции:

- use MoonShine\UI\Fields\Select;
+ use MadZeeM\MoonshineTomSelect\Fields\TomSelect as Select;

Также вместо BelongsTo и BelongsToMany можно воспользоваться

use MadZeeM\MoonshineTomSelect\Fields\TomSelectBelongsTo;
use MadZeeM\MoonshineTomSelect\Fields\TomSelectBelongsToMany;

TomSelectBelongs::make('Select')
TomSelectBelongsToMany::make('Select')

И точно также для быстрой интеграции, можно сделать:

- use MoonShine\Laravel\Fields\Relationships\BelongsTo;
+ use MadZeeM\MoonshineTomSelect\Fields\TomSelectBelongsTo as BelongsTo;

- use MoonShine\Laravel\Fields\Relationships\BelongsToMany;
+ use MadZeeM\MoonshineTomSelect\Fields\TomSelectBelongsToMany as BelongsToMany;

Plugins

The addPlugins() method allows you to add new plugins to the default plugins

Official plugins: https://tom-select.js.org/plugins

addPlugins(array|string $plugin, array $pluginOptions = [])

TomSelect::make('Select')
    ->addPlugins('checkbox_options', [...])
    
TomSelect::make('Select')
    ->addPlugins(['checkbox_options', '...'])
    
TomSelect::make('Select')
    ->addPlugins([
        'checkbox_options' => [...]
    ])

Вы можете создавать собственные плагины.

<script>
    document.addEventListener('moonshine:select.add_plugin', function({ detail: createPlugin }) {
        createPlugin('myPlugin', function(pluginOptions) {
            console.log(pluginOptions, this.getValue())

            this.on('change', value => {
                //
            })
        })
    })
</script>

TomSelect::make('Select')
    ->addPlugins('myPlugin', [
        'foo' => 'bar'
    ])

Full documentation: https://tom-select.js.org/docs/plugins

Settings

Этот settings() метод разрешает использовать все пользовательские настройки

Все доступные настройки: https://tom-select.js.org/docs/#general-configuration

settings(array $settings)

TomSelect::make('Select')
    ->settings([
        'maxOptions' => 100,
        'maxItems' => 100,
        'hideSelected' => false
    ])

Для всех именных настроек, есть очень удобный метод fieldNames()

fieldNames(
    ?string $valueField = null,         // default: value
    ?string $labelField = null,         // default: label
    ?string $descriptionField = null,   // default: description

    ?string $childrenField = null,      // default: values
    ?string $optgroupValueField = null, // default: value
    ?string $optgroupLabelField = null, // default: label
    ?string $optgroupField = null,      // default: optgroup

    ?array $searchField = null,         // default: ['label']
    ?string $disabledField = null,      // default: disabled
    ?string $sortField = null           // default: $order
)

TomSelect::make('Select')
    ->fieldNames(
        valueField: 'id',
        labelField: 'name',
        childrenField: 'children',
    )

Для дополнительной настройки асинхронности, можно воспользоваться методом asyncSettings()

asyncSettings(array $settings)

TomSelect::make('Select')
    ->asyncSettings([
        // Можно менять название поля поиска
        'queryKey' => 'query',
        
        // Можно отправить текущие активные значения, просто указываем название 
        'selectedValuesKey' => '_value',
        
        // Если результат обвернуть например в data, то указываем этот ключ
        'resultKey' => 'data',
        
        // Если хотите, чтобы вместе с запросом, шли все поля текущей формы, то задаем TRUE
        'withAllFields' => false,
    ])

Этот asyncOnInit() метод теперь поддерживает "Загрузчик", после открытия селекта

asyncOnInit(bool $whenOpen = true, bool $withLoading = false)

TomSelect::make('Select')
    ->asyncOnInit(withLoading: true)

С этим multiple() методом автоматически задается поиск, если хотите отключить, просто указываем withoutSearchable() после метода

TomSelect::make('Select')
  ->multiple()
  ->withoutSearchable()