README

此 Laravel Nova 包为 Nova 的字段库添加了多选功能。

要求

• php: >=8.0
• laravel/nova: ^4.1

功能

• 带搜索的多选和单选
• 异步搜索
• 拖放重新排序功能
• 依赖于其他多选实例
• 多个多选之间的唯一值
• 完全兼容浅色和深色模式

屏幕截图

安装

使用 Composer 在 Laravel Nova 项目中安装此包

composer require outl1ne/nova-multiselect-field

用法

该字段的使用方式与 Nova 的原生选择字段类似。数据库中的字段类型应该是基于文本的（即 string、text 或 varchar），选定的值以字符串化的 JSON 数组的形式存储。

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),
    ];
}

选项组

支持选项组。它们的语法与 Laravel 的选项组语法 相同。

在此示例（来自 Nova 文档）中，所有值都按 group 键分组

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

依赖关系

您可以通过使用 optionsDependOn 来使多选依赖于另一个多选。来自 optionsDependOn 的多选值必须是选项的键，而值必须是通常的键值选项字典。

用法

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

多对多

您可以使用此字段进行 BelongsToMany 关系选择。

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

选项

您可以通过将选项名称作为函数传递到字段中，例如 ->placeholder('选择花生')，来传递可能的选项。

本地化

可以使用以下发布命令发布翻译文件

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

然后您可以根据需要编辑字符串。

覆盖详细字段

您可以覆盖详细视图值组件以自定义它。

为 NovaMultiselectDetailFieldValue 创建一个新组件并在您的 app.js 中注册它。该组件接收两个属性：field 和 values。values 属性是一个包含所选标签的数组。

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

覆盖表单标签字段

您可以在表单字段组件中覆盖标签模板以自定义它。

为 FormFieldTag 创建一个新组件并在您的 app.js 中注册它。该组件接收两个属性：option 和 remove。option 属性是一个具有例如 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);
});

鸣谢

• Tarvo Reinpalu
• shentao/vue-multiselect

许可证

此项目是开源软件，根据 MIT 许可证 许可。