Language Tabs

• Compatibility
• Installation
• Prerequisites
  • Install spatie-translatable
    • Create a model and make it translatable
    • Create a migration for the model
• Setup & configuration
  • FilamentPHP V4.x
    • Method 1 (preferred): Add the LanguageTabs component to the PostForm schema
    • Method 2: Add the LanguageTabs component directly to the Filament resource
  • FilamentPHP V3.x
    • Add the LanguageTabs component to your Filament resource
  • Configure which languages to add to the tabs
  • Configure for which languages a field is required
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

This package is a Filament plugin that allows you to group multilingual fields into tabs. It can be configured which languages are required to be filled out.

#Compatibility

#Installation

Install the package via composer:

composer require pixelpeter/filament-language-tabs

Publish the config file with:

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

Optionally, publish the view:

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

#Prerequisites

#Install spatie-translatable

composer require spatie/laravel-translatable

#Create a model and make it translatable

// 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'];
}

#Create a migration for the model

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

#FilamentPHP V4.x

#Method 1 (preferred): Add the LanguageTabs component to the PostForm schema

// app/Filament/Resources/Posts/Schemas/PostForm.php
...
use Pixelpeter\FilamentLanguageTabs\Forms\Components\LanguageTabs;

class PostForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                LanguageTabs::make([
                    TextInput::make('headline')->label('headline')->required(),
                    TextInput::make('slug')->label('slug'),
                    MarkdownEditor::make('body')->label('body'),
                ]),
            ]);
    }
}

#Method 2: Add the LanguageTabs component directly to the 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
            ->components([
                LanguageTabs::make([
                    Forms\Components\TextInput::make('headline')->label('headline')->required(),
                    Forms\Components\TextInput::make('slug')->label('slug'),
                    Forms\Components\MarkdownEditor::make('body')->label('body'),   
                ]),
            ]);
    }

#FilamentPHP V3.x

#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([
                LanguageTabs::make([
                    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 configured in 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 the 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.