Filament версії 4.1 вже доступний

Ми з радістю анонсуємо випуск Filament v4.1!

Після виходу v4.0 наша команда та спільнота наполегливо працювали над покращеннями:

156 виправлень помилок
39 нових функцій

Це велика кількість коду, що була перевірена, протестована та об'єднана, і це стало можливим завдяки неперевершеним зусиллям всієї спільноти. 💛

Особлива подяка:

Адам Уестон за допомогу в перенесенні покращень для багатофункціонального редактора з його чудового плагіна v3 TipTap.
@People-Sea за вивчення звітів про помилки від спільноти та численні виправлення.

# Наші улюблені нові функції в v4.1

Ось кілька основних моментів, які нас найбільше вражають.

# Нова конструкція панелі (без верхньої панелі)

Ми представили конструкцію панелі без верхньої частини. Це ідеально підходить для застосунків, які прагнуть максимально використовувати вертикальний простір. Меню користувача, кнопка сповіщень та глобальний пошук можуть бути переміщені в бічну панель, що відкриває нові можливості для оформлення.

З нетерпінням чекаємо на ваші проекти!

Щоб активувати цю конструкцію, передайте false у метод topbar() у конфігурації вашої панелі:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->topbar(false);
}

Велика подяка Нолану Норлунду за його роботу над цією функцією!

# Інструмент сітки в багатофункціональному редакторі

Тепер ви можете вставляти відповідні сітки у вміст редактора, до 12 стовпців завширшки.

Це включає асиметричні розподіли (наприклад, двостовпцева сітка, де один стовпець займає 1/3 простору). Ідеально підходить для більш складних макетів у вмісті.

Щоб активувати цю функцію, додайте інструмент grid у вашу toolbarButtons() редактора:

use Filament\Forms\Components\RichEditor;
 
RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['grid', 'attachFiles'], // Інструмент сітки можна додати в будь-яку частину панелі
    ])

# Інструмент кольору тексту в багатофункціональному редакторі

Тепер редактор підтримує вибір кольору тексту. Ви можете вибрати з стандартної палітри кольорів Tailwind або обрати власний колір. Також можна надати власну палітру кольорів для вибору користувачем.

При виборі з палітри, доступність у режимі світла/темряви обробляється автоматично для користувача.

Щоб активувати цю функцію, додайте інструмент textColor у вашу toolbarButtons() редактора:

use Filament\Forms\Components\RichEditor;
 
RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['textColor', 'attachFiles'], // Інструмент кольору тексту можна додати в будь-яку частину панелі
    ])

Ви також можете налаштувати доступну палітру кольорів, використовуючи метод textColors():

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\TextColor;
 
RichEditor::make('content')
    ->textColors([
        '#0ea5e9' => 'Brand',
        'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'),
    ])

Документація →

# Компактний стиль таблиці повторювача

В табличному повторювачі версії 4 можливо візуалізувати кожне поле форми у своїй окремій клітинці таблиці, де кожен елемент повторювача представляє рядок. У версії 4.1 деякі поля (такі як Select та TextInput) тепер можуть мати компактний дизайн, що робить їх безшовними в рамках клітинок.

Щоб активувати це, просто встановіть метод compact() на повторювач:

use Filament\Forms\Components\Repeater;
 
Repeater::make('members')
    ->table([
        // ...
    ])
    ->compact()
    ->schema([
        // ...
    ])

Документація →

# Нова таблиця для повторюваного вводу

Схожа на табличний повторювач, але для записів інфолістів. Кожен запис візуалізується в клітинці, що дозволяє виводити статичні таблиці всередині схем з текстом, іконками, зображеннями тощо.

Щоб активувати це, використовуйте метод table() на вашому компоненті RepeatableEntry:

use Filament\Infolists\Components\IconEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\RepeatableEntry\TableColumn;
use Filament\Infolists\Components\TextEntry;
 
RepeatableEntry::make('comments')
    ->table([
        TableColumn::make('Автор'),
        TableColumn::make('Назва'),
        TableColumn::make('Опубліковано'),
    ])
    ->schema([
        TextEntry::make('author.name'),
        TextEntry::make('title'),
        IconEntry::make('is_published')
            ->boolean(),
    ])

Документація →

# Компонент для порожнього стану

Новий компонент для вставлення порожніх станів у будь-якому місці вашого застосунку. Кожен порожній стан може включати заголовок, опис, іконку та дії для нижнього колонтитула. Використовуйте його, щоб допомогти користувачам зробити дію, коли немає нічого, що потрібно показати.

Щоб вставити цей компонент у вашу схему, використовуйте клас EmptyState:

use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;
use Filament\Support\Icons\Heroicon;
 
EmptyState::make('Ще немає користувачів')
    ->description('Розпочніть з створення нового користувача.')
    ->icon(Heroicon::OutlinedUser)
    ->footer([
        Action::make('createUser')
            ->icon(Heroicon::Plus),
    ])

Документація →

# Екосистема плагінів Filament v4

Екосистема плагінів продовжує зростати. Тепер доступно 224 плагіни v4 на сайті!

👉 Переглянути всі плагіни

Велика вдячність кожному автору плагінів спільноти за створення нових плагінів і оновлення існуючих. Ваша робота робить Filament потужнішим для всіх.

Ось кілька з наших нещодавно доданих улюбленців:

# Спробуйте Filament v4.1 вже сьогодні!

Оновлення — це всього лише composer update від v4.0, і ви негайно отримаєте переваги від виправлень помилок та нових функцій.

Ми з нетерпінням чекаємо, щоб побачити, що ви створите. Долучайтеся до спільноти в Filament Discord!