La versión estable de Filament v4.5 ha sido oficialmente lanzada, consolidando aún más esta poderosa herramienta para construir administraciones y paneles internos con Laravel. Esta actualización combina varias mejoras de la serie 4.x con funcionalidades nuevas que elevan la productividad tanto en el desarrollo como en la experiencia del usuario.

Qué trae Filament v4.5: características, ejemplos y uso real

Filament v4.5 no es una actualización menor; incorpora avances significativos en interacción, edición de contenido, formularios dinámicos y mejores prácticas de arquitectura, sin perder la esencia declarativa y centrada en esquemas que caracteriza al framework.

Editor enriquecido con mentions (@menciones)

Una de las grandes novedades es el soporte nativo de @mentions dentro del Rich Editor. Esto permite que el usuario escriba un carácter de activación como @ o # y se despliegue un listado de posibles menciones (usuarios, etiquetas, registros, etc.).

Ejemplo de código para habilitar menciones

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\MentionProvider;

RichEditor::make('content')
    ->mentions([
        MentionProvider::forModel(User::class),
        // Puedes agregar proveedores para tags, issues, etc.
    ]);

En el editor, al escribir @nombre, el usuario verá sugerencias en tiempo real y podrá seleccionar el registro deseado para insertarlo como token inline estilizado.

Redimensionar imágenes en el Rich Editor

Los usuarios ahora pueden cambiar el tamaño de las imágenes en el editor enriquecido. Cuando está habilitado, los usuarios pueden hacer clic en una imagen y arrastrar los controladores de cambio de tamaño para cambiar su tamaño. La relación de aspecto siempre se conserva.

Para habilitar el cambio de tamaño de la imagen:

use Filament\Forms\Components\RichEditor;
 
RichEditor::make('content')
    ->resizableImages()

Control de proporción de aspecto en imágenes

Filament v4.5 ahora permite forzar que las imágenes subidas cumplan con una relación de aspecto específica, como 16:9 o 1:1. Si la imagen no coincide con el aspecto requerido, Filament abrirá automáticamente un editor sencillo para recortarla antes de subirla completamente.

Uso en un formulario

use Filament\Forms\Components\FileUpload;

FileUpload::make('banner')
    ->image()
    ->imageAspectRatio('16:9')
    ->automaticallyOpenImageEditorForAspectRatio();

Esto mejora la consistencia visual del contenido y evita que el usuario cargue imágenes mal dimensionadas que rompan el diseño del panel.

Acciones con JavaScript directamente en esquemas

Una de las mejoras más interesantes para la experiencia del desarrollador es la capacidad de definir acciones JavaScript puras dentro de esquemas de Filament. Esto significa que puedes ejecutar lógica interactiva sin hacer una llamada al servidor, ofreciendo una experiencia más fluida y reactiva para el usuario.

Ejemplo: autogenerar slugs

use Filament\Actions\Action;
use Filament\Forms\Components\TextInput;

TextInput::make('title')
    ->live(onBlur: true)
    ->afterContent(
        Action::make('generateSlug')
            ->jsAction(<<<'JS'
                $set('slug', $get('title')
                    .toLowerCase()
                    .replaceAll(' ', '-'));
            JS)
    );

TextInput::make('slug');

En este ejemplo, cuando el usuario termine de editar el campo title, se ejecutará JavaScript que genera un slug automáticamente y lo coloca en el campo correspondiente sin necesidad de recargar la página.

Nuevo método saved() para un control más limpio

Antes, para evitar que un campo se guardara en la base de datos era común usar dehydrated(false) u otros trucos. Con Filament v4.5 puedes usar el nuevo método saved(false) directamente, haciéndolo más legible y explícito.

Ejemplo:

TextInput::make('password_confirmation')    
  ->password()
  ->saved(false);

También puedes usar una closure cuando la decisión de guardar depende de otras condiciones del estado del formulario.

Autenticación de dos factores más sencilla

Configurar autenticación multifactor (2FA) ahora es más sencillo y elegante gracias a traits incluidos que proveen valores predeterminados coherentes. Esto reduce la cantidad de código repetitivo que tenías que escribir y permite enfocarte en tus reglas de negocio.

Ejemplo de uso básico

use Filament\Auth\MultiFactor\App\Contracts\HasAppAuthentication;
use Filament\Auth\MultiFactor\App\Concerns\InteractsWithAppAuthentication;

class User extends Authenticatable implements FilamentUser, HasAppAuthentication
{
    use InteractsWithAppAuthentication;
}

Estos traits manejan detalles como casting de columnas y características del flujo de autenticación 2FA sin necesidad de implementarlas desde cero.

Guía de arquitectura modular (DDD)

Para proyectos grandes, especialmente aquellos que siguen principios como Domain-Driven Design (DDD), v4.5 incluye documentación extensa y consejos prácticos sobre:

  • Estructura de módulos independientes
  • Registro condicional de plugins por panel
  • Compartición de recursos entre diferentes paneles
  • Estructura de carpetas recomendada para proyectos a gran escala

Esto facilita la organización de proyectos SaaS o aplicaciones con múltiples contextos lógicos.

Otras mejoras notables

Además de las características anteriores, Filament v4.5 incorpora:

  • Soporte para traducciones y localizaciones más completas
  • Optimización de formularios y validación más robusta
  • Componentes adicionales y refinamientos de UX
  • Correcciones de rendimiento heredadas de la evolución de la serie 4.x

Estas mejoras no solo hacen Filament más potente, sino también más amigable para equipos y proyectos de cualquier tamaño.

¿Por qué esta actualización importa?

La serie 4.x de Filament ha sido un gran paso hacia una plataforma más estable, flexible y moderna comparada con versiones anteriores. Desde tablas más rápidas y renderizado parcialmente optimizado, hasta formularios más expresivos y un Rich Editor mejorado, Filament v4 ha significado un avance enorme en la forma de construir paneles administrativos con Laravel.

La versión 4.5 continúa esta trayectoria ofreciendo herramientas que se sienten modernas y orientadas hacia las necesidades reales de desarrollo day-to-day.

Cómo actualizar a Filament v4.5

Actualizar a la versión estable v4.5 desde una versión anterior de la serie 4.x es sencillo:

composer update filament/filament

Después de actualizar, revisa tu proyecto y tus recursos para asegurarte de que todo encaje con las nuevas APIs y características. Como siempre, es recomendable probar primero en un entorno de desarrollo o staging antes de actualizar producción.

Conclusión

La v4.5 estable de Filament es un release que refuerza la posición de este framework como una de las herramientas líderes para construir paneles administrativos robustos y personalizables con Laravel. Con mejoras en edición de contenido, interacción del usuario, validación de formularios y arquitectura, esta actualización merece atención tanto de desarrolladores que ya usan Filament como de quienes lo están evaluando para sus próximos proyectos.

Ya puedes descargarla, explorar sus nuevas APIs y comenzar a aprovechar todo lo que Filament v4.5 ofrece.
¿La has probado ya? Cuéntanos en los comentarios qué funcionalidad te ha sido más útil o cómo planeas usarla en tus proyectos.

Puedes leer el post del anuncio oficial en el blog de filament o haciendo click aquí.

Categorizado en:

FilamentPHP, Noticias,