abdulmajeed-jamaan/filament-translatable-tabs

This package inspired by this filament-translatable-fields, but allowing filament like customizability on the Tabs and Fields components in context of each locale.

Filament Translatable Tabs

Automatically generate tabs for translations.

Works seamlessly with spatie/laravel-translatable, lara-zeus/translatable-pro, but it can be used standalone as well.

Supported Filament versions

Installation

You can install the package via composer:

composer require abdulmajeed-jamaan/filament-translatable-tabs

Then in any registered service provider boot() method configure the following:

TranslatableTabs::configureUsing(function (TranslatableTabs $component) {
    $component
        // locales labels
        ->localesLabels([
            'ar' => __('locales.ar'),
            'en' => __('locales.en')
        ])
        // default locales
        ->locales(['ar', 'en']);
});

Usage

// Single Field
TextInput::make('title')
    ->translatableTabs();

// Multiple Fields
TranslatableTabs::make('anyLabel')
    ->schema([
        Forms\Components\TextInput::make("title"),
        Forms\Components\Textarea::make("content")
    ]);

Customizations

You can customize Tab and Field based on locale using the following methods:

use AbdulmajeedJamaan\FilamentTranslatableTabs\TranslatableTabs;
use AbdulmajeedJamaan\FilamentTranslatableTabs\TranslatableTab;
use Filament\Forms\Components\Field;

$customizeTab = function (TranslatableTab $component, string $locale) {
    // ...
};

$customizeField = function (Field $component, string $locale) {
    // ...
};

// Globally in boot method
TranslatableTabs::configureUsing(function (TranslatableTabs $component) {
    $component
        ->modifyTabsUsing($customizeTab)
        ->modifyFieldsUsing($customizeField);
});

// Single Field
TextInput::make()
    ->translatableTabs()
    ->modifyTabsUsing($customizeTab)
    ->modifyFieldsUsing($customizeField)

// Multiple Fields
TranslatableTabs::make('anyLabel')
    ->modifyTabsUsing($customizeTab)
    ->modifyFieldsUsing($customizeField)
    ->schema([
        Forms\Components\TextInput::make("title"),
        Forms\Components\Textarea::make("content")
    ]);

Override the default locale

You can add the method locale to change it on the fly:

$localesFn = function () {
    return ['ar', 'en'];
    
    // also you can override label using:
    return [
        'ar' => 'Arabic',
        'en' => 'English'
    ]
}
// Single Field
TextInput::make('title')
    ->translatableTabs()
    ->locales($localesFn);

// Multiple Fields
TranslatableTabs::make('anyLabel')
    ->locales($localesFn)
    ->schema([
        Forms\Components\TextInput::make("title"),
        Forms\Components\Textarea::make("content")
    ]);

Pre made configurations

In order to have similar experience to the preview set the following:

TranslatableTabs::configureUsing(function (TranslatableTabs $component) {
    $component
        ->addDirectionByLocale()
        ->addEmptyBadgeWhenAllFieldsAreEmpty(emptyLabel: __('locales.empty'))
        ->addSetActiveTabThatHasValue();
});

Local development

The repository includes a Workbench app: a Filament panel with a Post resource that uses translatable tabs, for trying changes in the browser.

composer install
composer serve

This builds the app (SQLite database, migrations, seed data, Filament assets) and starts a server. Opening it logs you in as the seeded user (test@example.com / password) and redirects you to the edit form of a translated post.

Run the tests with composer test.

Changelog

Please see Releases 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

• Abdulmajeed-Jamaan
• All Contributors

License

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