Layouts field for MoonShine

Requirements

• MoonShine v4.0+

Support MoonShine versions

MoonShine	Layouts
2.0+	1.0+
3.0+	2.0+
4.0+	3.0+

Quick start

Install

composer require moonshine/layouts-field

Usage

Field Layouts for MoonShine allows you to easily manage repeating groups of fields. You will be able to add, delete and sort groups consisting of basic fields. There are some restrictions on the use of fields in the Layouts field. You can use any basic fields except Relationships fields.

use MoonShine\Layouts\Fields\Layouts;

Layouts::make('Content')
    ->addLayout('Contact information', 'contacts', [
        Text::make('Name'),
        Email::make('Email'),
    ])
     ->addLayout('Banner section', 'banner', [
        Text::make('Title'),
        Image::make('Banner image', 'thumbnail'),
    ], validation: ['title' => 'required']),

Adding layouts

Layouts can be added using the following method on your Layouts fields:

addLayout(
    string $title,
    string $name,
    iterable $fields,
    ?int $limit = null,
    iterable $headingAdditionalFields = null,
    array $validation = []
)

• $title - allows you to specify the name of a group of fields that will be displayed in the form,
• $name - used to store the chosen layout in the field's value,
• $fields - accepts an array of fields that will be used to populate a group of fields in the form,
• $limit - allows you to set the max number of groups in the field,
• $headingAdditionalFields - components in header,
• $validation - validation rules.

Adding cast

The field stores its values as a single JSON string. To use the Layouts field, you need to add a cast for your model.

use MoonShine\Layouts\Casts\LayoutsCast;

class Article extends Model
{
    protected function casts(): array
    {
        return [
            'content' => LayoutsCast::class,
        ];
    }
}

Customizing the button label

You can change the default "Add layout" button's text using the ActionButton component:

Layouts::make('Content')
    ->addButton(ActionButton::make('New layout')->icon('plus')->primary())

Adding search field

You can add search input in layout list as follows:

Layouts::make('Content')
    ->addLayout('Info section', 'info', [
        // ...
    ])
    // ...
    ->addLayout('Slider section', 'slider', [
        // ...
    ])
    ->searchable()

Validation

Layouts::make('Content')
    ->addLayout(
        'Info section',
        'info',
        [
            Email::make('Email')
        ],
        validation: ['email' => ['required', 'email']],
        attributes: ['email' => 'E-mail']
    )

Layouts::make('Content')
    ->addLayout('Info section', 'info', [
        Email::make('Email')
    ]),
    ->addLayout('Additionally section', 'additionally', [
        Text::make('Title')
    ])
    ->validation([
        'info' => ['email' => 'required'],
        'additionally' => ['title' => 'required']]
    )

Layouts::make('Content')
    ->addLayout('Info section', 'info', [
        Email::make('Email')
    ], validation: ['email' => ['email']], attributes: ['email' => 'E-mail']),
    ->addLayout('Additionally section', 'additionally', [
        Text::make('Title')
    ])
    ->validation(
        [
            'info' => ['email' => ['required']],
            'additionally' => ['title' => 'required']
        ],
        attributes: ['additionally' => ['title' => 'Заголовок']]
    )