solution-forest/filament-translate-field

Filament Translate Field

维护者

详情

github.com/solutionforest/filament-translate-field

主页

源码

问题

安装次数: 25,498

依赖: 0

建议者: 0

安全: 0

星标: 34

关注者: 1

分支: 11

1.3.2 2024-09-04 07:27 UTC

Requires

Requires (Dev)

MIT a57e9fc95156236ba647f8ef069072245e6fa471

  • Carly <info.woop@solutionforest.net>

laravellaravel-translatablefilamentsolution-forestfilament-translate-field

This package is not auto-updated.

Last update: 2024-09-18 07:36:09 UTC

README

Latest Version on Packagist Total Downloads

Filament Translate Field 是一个 Filament CMS 的库，简化了管理不同语言中的多个可翻译字段。

filament-translate-field-1

安装

您可以通过 composer 安装此软件包。

composer require solution-forest/filament-translate-field

重要

配置

  • 使用可翻译包（例如，"spatie/laravel-translatable" 或 "dimsav/laravel-translatable"）在模型中定义可翻译字段。
  • 在模型的 $translatable 属性中配置可翻译字段。

设置

对于 1.x.x 版本之前的版本

将插件添加到面板

要将插件添加到面板，您必须使用 plugin() 方法将其包含在配置文件中

use SolutionForest\FilamentTranslateField\FilamentTranslateFieldPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(FilamentTranslateFieldPlugin::make());
}

设置默认的可翻译地区

要设置可以用于翻译内容的地区，可以将地区数组传递给 `defaultLocales()` 插件方法

use SolutionForest\FilamentTranslateField\FilamentTranslateFieldPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(
            FilamentTranslateFieldPlugin::make()
               ->defaultLocales(['en', 'es', 'fr']),
        );
}
对于 1.x.x 版本或更高版本

设置默认的可翻译地区

由于 1.x.x 版本之后的插件是独立插件，不需要与 Filament 面板相关联，因此您需要在配置文件中全局设置它或使用 `AppServiceProvider` 中的 boot 方法。

要设置可以用于翻译内容的地区，可以将地区数组传递给 `defaultLocales()` 插件方法

use SolutionForest\FilamentTranslateField\Facades\FilamentTranslateField;
 
class AppServiceProvider extends ServiceProvider
{
   public function boot(): void
   {
       FilamentTranslateField::defaultLocales(['en', 'es', 'fr']);
   }
}

或者，您可以将配置文件 config/filament-translate-field.php 发布，并在 locales 中添加默认地区

return [
    'locales' => ['en', 'es', 'fr'],
];

用法

表单组件

通过使用 Translate 组件，您可以轻松配置您的 表单字段 以支持多种语言并为每个地区提供翻译。

use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\RichEditor;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    ->schema([
         // Your form fields here
    ])

为特定字段设置可翻译地区

默认情况下，可翻译地区可以全局设置，用于插件配置中的所有可翻译表单组件。或者，您可以通过覆盖 Translate 类中的 locales() 方法来自定义特定资源的可翻译地区。

use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()->locales(['en', 'es'])

标签

为特定字段设置可翻译标签

您可以根据每个字段实例和当前地区灵活自定义每个字段的翻译标签。您可以使用 fieldTranslatableLabel() 方法提供基于字段实例和当前地区的自定义标签。

use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

 Translate::make()
    ->schema([
        // Fields
    ])
    ->fieldTranslatableLabel(fn ($field, $locale) => __($field->getName(), locale: $locale))
为字段添加前缀/后缀地区标签

如果您只想为表单字段添加前缀或后缀地区标签，可以使用 prefixLocaleLabel() 或 suffixLocaleLabel() 方法。这使得用户更容易识别与每个字段关联的语言。

use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    ->schema([
        // Fields
    ])
    ->prefixLocaleLabel()
    ->suffixLocaleLabel()

`prefixLocaleLabel

filament-translate-field-3

suffixLocaleLabel:

filament-translate-field-4

设置地区显示名称

默认情况下，前缀/后缀地区显示名称由地区代码生成，并用括号括起来，"()"。您可以使用 preformLocaleLabelUsing() 方法自定义此内容。

use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    ->preformLocaleLabelUsing(fn (string $locale, string $label) => "[{$label}]");

注入当前表单字段

此外，如果您需要访问当前表单字段实例，可以将 $field 参数注入到回调函数中。这允许您根据正在处理的字段执行特定操作或条件。

use Filament\Forms\Components\Component;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    // ...
    ->prefixLocaleLabel(function(Component $field) {
        // need return boolean value
        return $field->getName() == 'title';
    })
    ->suffixLocaleLabel(function(Component $field) {
        // need return boolean value
        return $field->getName() == 'title';
    })

filament-translate-field-5

添加操作

您可以使用 actions() 方法为每个子组件容器添加操作。

use Filament\Forms\Components\Actions\Action;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    ->actions([
        Action::make('fillDumpTitle')
    ])

如果您有多个 Translate 组件并且每个组件中都有操作，请使用 id() 方法为 Translate 组件添加 id。

注入当前子容器上的地区

如果您希望访问传递给操作的地区，请定义一个 $arguments 参数，并从 $arguments 中获取 locale 的值。

use Filament\Forms\Components\Actions\Action;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    ->actions([
        Action::make('fillDumpTitle')
            ->action(function (array $arguments) {
                $locale = $arguments['locale'];
                // ...
            })
    ])

将区域设置注入到表单字段中

如果您想访问字段的当前区域实例，请定义一个 $locale 参数

use Filament\Forms\Components\TextInput;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

Translate::make()
    ->schema(fn (string $locale) => [TextInput::make('title')->required($locale == 'en')])

移除样式容器

默认情况下，翻译组件及其内容都包含在一个样式为卡的容器中。您可以使用 contained() 移除样式容器

use SolutionForest\FilamentTranslateField\Forms\Component\Translate;
 
Translate::make()
    ->contained(false)

排除

“排除”功能允许您指定您不想包含在翻译过程中的字段。这对于包含动态内容或不应翻译成其他语言的字段非常有用。

use SolutionForest\FilamentTranslateField\Forms\Component\Translate;
 
Translate::make([
        Forms\Components\TextInput::make('title'),
        Forms\Components\TextInput::make('description'),
    ])
    ->exclude(['description'])

无排除

{
    "title": {
        "en": "Dump",
        "es": "Dump",
        "fr": "Dump"
    },
    "description": {
        "en": null,
        "es": null,
        "fr": null
    }
}

有排除

{
    "title": {
        "en": "Dump",
        "es": "Dump",
        "fr": "Dump"
    },
    "description": null
}

发布视图

要发布视图，请使用

php artisan vendor:publish --provider="SolutionForest\\FilamentTranslateField\\FilamentTranslateFieldServiceProvider" --tag="filament-translate-field-views"

发布配置文件

要发布配置文件，请使用

php artisan vendor:publish --provider="SolutionForest\\FilamentTranslateField\\FilamentTranslateFieldServiceProvider" --tag="filament-translate-field-config"

示例

演示

FIlament.Translate.Field.Demo-2.mp4

示例代码

在 Filament 面板中

use SolutionForest\FilamentTranslateField\FilamentTranslateFieldPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
            ->plugin(FilamentTranslateFieldPlugin::make()
                ->defaultLocales(['en', 'es', 'fr'])
            );
}

在 app/Filament/Resources/NewsResource.php 中

use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\RichEditor;
use Filament\Resources\Resource;
use SolutionForest\FilamentTranslateField\Forms\Component\Translate;

class NewsResource extends Resource
{
    // ...
    
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Translate::make()
                    ->columnSpanFull()
                    ->columns(2)
                    ->schema([
                        TextInput::make('title')->required(), 
                        Textarea::make('short_desc'),
                       RichEditor::make('description')->columnSpanFull(),
                    ])
                    ->fieldTranslatableLabel(fn ($field, $locale) => __($field->getName(), locale: $locale))
                    ->actions([
                        Forms\Components\Actions\Action::make('testy')
                            ->label("Fill dump title")
                            ->visible(fn ($arguments) => $arguments['locale']  == 'en')
                            ->action(function ($set, $arguments) {
                                $locale = $arguments['locale'] ?? null;
                                if (! $locale) {
                                    return;
                                }
                                $set("title.$locale", fake()->text(50));
                            })
                    ]),
            ]);
    }
    
    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                
                Tables\Columns\ColumnGroup::make('Data')
                    ->columns([
                        Tables\Columns\TextColumn::make('title')
                            ->getStateUsing(fn ($record) => new HtmlString(collect($record->title)
                                ->map(fn ($state, $locale) => <<<Html
                                    <div class="flex gap-2">
                                        <div class="text-sm text-gray-500">$locale</div>
                                        <div>$state</div>
                                    </div>
                                Html)
                                ->implode(''))),
                        Tables\Columns\TextColumn::make('short_desc')
                            ->getStateUsing(fn ($record) => new HtmlString(collect($record->short_desc)
                                ->map(fn ($state, $locale) => <<<Html
                                    <div class="flex gap-2">
                                        <div class="text-sm text-gray-500">$locale</div>
                                        <div>$state</div>
                                    </div>
                                Html)
                                ->implode(''))),
                        Tables\Columns\TextColumn::make('description')
                            ->getStateUsing(fn ($record) => new HtmlString(collect($record->description)
                                ->map(fn ($state, $locale) => <<<Html
                                    <div class="flex gap-2">
                                        <div class="text-sm text-gray-500">$locale</div>
                                        <div>$state</div>
                                    </div>
                                Html)
                                ->implode(''))),
                    ]),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ]);
    }
    
    // ...
}

在 app/Models/News.php 中

use Illuminate\Database\Eloquent\Model;
use Spatie\Translatable\HasTranslations;

class News extends Model
{
    use HasTranslations;
    // ...

    protected $guarded = ['id'];

    public $translatable = ['title', 'short_desc', 'description'];

    public $casts = [
        'title' => 'json',
        'short_desc' => 'json',
        'description' => 'json',
    ];

    // ...
}

在 resources/lang/en.json 中

{
    "title": "Title",
    "short_desc": "Short description",
    "description": "Description"
}

在 resources/lang/es.json 中

{
    "title": "Título",
    "short_desc": "Breve descripción",
    "description": "Descripción"
}

在 resources/lang/fr.json 中

{
    "title": "Titre",
    "short_desc": "Brève description",
    "description": "Description"
}

在给定的示例中，当您保存模型时，数据将按以下格式存储

{
  "id": 1,
  "title": {
    "en": "Dump",
    "es": "Dump",
    "fr": "Dump"
  },
  "short_desc": {
    "en": null,
    "es": null,
    "fr": null
  },
  "description": {
    "en": null,
    "es": null,
    "fr": null
  }
}

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

如果您发现任何与安全相关的问题，请通过电子邮件info+package@solutionforest.net联系，而不是使用问题跟踪器。

致谢

许可证

Filament Tree 是一个开源软件，许可证为MIT许可证。

关于 Solution Forest

Solution Forest 是一家总部位于香港的网站开发代理机构。我们帮助客户解决问题。我们热爱开源。

我们建立了一系列一流的产品