Group multilingual fields into tabs

This package is a Filament plugin that allows you to group multilingual fields into tabs

Installation

You can install the package via composer:

composer require pixelpeter/filament-language-tabs

You can publish the config file with:

php artisan vendor:publish --tag="filament-language-tabs-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-language-tabs-views"

This is the contents of the published config file:

return [
    /*
    |--------------------------------------------------------------------------
    | Default Locales
    |--------------------------------------------------------------------------
    |
    | These are the locales this package will use generate the tabs
    |
    */
    'default_locales' => ['de', 'en', 'fr'],
    /*
    |--------------------------------------------------------------------------
    | Required Locales
    |--------------------------------------------------------------------------
    |
    | These are the locales this package will use to set the field as required
    | This can be used if one translation or language is optional
    |
    */
    'required_locales' => ['de', 'en'],
];

Usage

Prerequisites

Install spatie-translatable

composer require spatie/laravel-translatable

Make the model for translations

// Models/Post.php
class Post extends Model
{
    use HasFactory, HasTranslations;

    public $translatable = ['headline', 'body', 'slug'];

    protected $casts = [
        'headline' => 'array',
        'body' => 'array',
        'slug' => 'array',
    ];

    protected $guarded = ['id'];
}

// database/migrations
...    
public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->json('headline');
            $table->json('slug');
            $table->json('body');
            $table->timestamps();
        });
    }
...

Setup & configuration

Add the LanguageTabs component to your Filament resource

// app/Filament/Resources/PostResource.php
...
use Pixelpeter\FilamentLanguageTabs\Forms\Components\LanguageTabs;

class PostResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Grid::make(1)
                    ->schema([
                        LanguageTabs::make($form)
                            ->schema([
                                Forms\Components\TextInput::make('headline')->label('headline')->required(),
                                Forms\Components\TextInput::make('slug')->label('slug'),
                                Forms\Components\MarkdownEditor::make('body')->label('body'),
                            ]),

                    ]),
            ]);
    }

Configure which languages to add to the tabs

// config/filament-language-tabs.php
return [
    'default_locales' => ['de', 'en', 'fr'],
]

Configure for which languages a field is required

If a field is defined as required

...
->schema([
    Forms\Components\TextInput::make('headline')->label('headline')->required(),
    ...
]),    
...

it will only be set as required for the languages configure as required_locals

// config/filament-language-tabs.php
return [
    'required_locales' => ['de', 'en'],
]

The headline is not (marked as) required for French language

Testing

./vendor/bin/pest

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

pixelpeter
Thanks to ralphjsmit for the inspiration of creating a TestableForm to help with testing this component
All Contributors

License

The MIT License (MIT). Please see License File for more information.