El equipo de Filament ha anunciado emocionantes detalles sobre el próximo lanzamiento de Filament v4 Beta, y sin duda es la versión más esperada hasta la fecha. Filament v4 es el lanzamiento más grande y repleto de características que Filament haya tenido nunca, superando incluso a la masiva v3 que requirió más de 100 versiones menores.

Las características más destacadas de Filament v4

Recursos Anidados (Nested Resources)

Una de las solicitudes más longevas de la comunidad finalmente se hace realidad. Los recursos anidados permiten operar sobre un recurso de Filament dentro del contexto de un recurso padre.

Ejemplo práctico: En un sistema de gestión de aprendizaje, tendrías un CourseResource para tu modelo Course. Dentro de un curso, también tendrías muchos objetos Lesson relacionados. Anteriormente en v3, solo podías editar registros de Lesson mediante un modal dentro del CourseResource. Ahora, con v4, puedes editar una Lesson en el contexto de su Course relacionado, pero en una página completa.

Crear un recurso anidado es sencillo: usa el comando make:filament-resource como lo harías para crear un recurso normal, pero añade la bandera –nested.

php artisan make:filament-resource LessonResource --nested

Autenticación Multi-Factor (MFA) Integrada

La autenticación multi-factor se considera casi una necesidad en la era moderna de autenticación de aplicaciones, y Filament v4 la incluye de serie.

Características de MFA:

• Autenticación por app: Compatible con Google Authenticator, Authy o Microsoft Authenticator
• Autenticación por email: Envío de códigos de un solo uso al correo electrónico
• Configuración automática: Solo tienes que habilitar el sistema y Filament hará el trabajo por ti

use Filament\Auth\MultiFactor\App\AppAuthentication;
use Filament\Auth\MultiFactor\Email\EmailAuthentication;

public function panel(Panel $panel): Panel 
{
    return $panel
        ->multiFactorAuthentication([
            AppAuthentication::make(),
            EmailAuthentication::make()->codeExpiryMinutes(2),
        ], isRequired: true);
}

Tablas con Datos Estáticos

Otro cambio revolucionario: las tablas de Filament ahora pueden tomar datos estáticos que no están respaldados por modelos y mostrarlos con todas las mismas características que conoces y amas.

Anteriormente, la recomendación era crear un “Modelo” respaldado por Sushi, pero esto no funcionaba en todas las situaciones. Ahora es tan simple como pasar un array de datos al método records():

Table::make()
    ->records([
        ['name' => 'Juan', 'email' => 'juan@example.com'],
        ['name' => 'María', 'email' => 'maria@example.com'],
    ])
    ->columns([
        TextColumn::make('name'),
        TextColumn::make('email'),
    ]);

Mejoras en Rendimiento y Experiencia de Usuario

Renderizado Parcial

Con el renderizado parcial en Filament v4, solo la parte específica del formulario que necesita actualizarse se refresca, proporcionando una experiencia de usuario más fluida y rápida.

Iconos Heroicons Mejorados

La nueva clase enum Heroicon proporciona autocompletado IDE para ayudarte a encontrar rápidamente el icono que necesitas, sin más cadenas mágicas. Cada icono está disponible en variantes sólidas y delineadas.

use Filament\Support\Enums\Heroicon;

// Antes
->icon('heroicon-o-star')

// Ahora
->icon(Heroicon::OutlinedStar)

Esquemas Unificados y Flexibilidad

Sistema de Esquemas Server-Driven UI

Los esquemas forman la base del enfoque Server-Driven UI de Filament. Te permiten construir interfaces de usuario en PHP usando objetos de configuración estructurados.

Componentes disponibles:

• Campos de formulario
• Entradas de lista de información
• Componentes de diseño
• Componentes principales como texto y botones

Nuevos Componentes

Editor de Código: Permite a los usuarios escribir y editar código directamente en la interfaz, compatible con HTML, CSS, JavaScript, PHP y JSON.

Componente Slider: Permite a los usuarios seleccionar uno o más valores numéricos arrastrando un control a lo largo de una pista, ideal para rangos, calificaciones o porcentajes.

Repetidores de Tabla: Muestran elementos de repetidor en un diseño de tabla usando columnas definidas.

Configuración de Zona Horaria Global

La nueva facade FilamentTimezone te permite establecer una zona horaria predeterminada para Filament globalmente, simplificando la configuración por defecto en múltiples componentes como DateTimePicker, TextColumn y TextEntry.

FilamentTimezone::set('Europe/Madrid');

Mejoras en Accesibilidad

Filament v4 toma la accesibilidad en serio con:

• Etiquetas dinámicas: Se ajustan basándose en la profundidad del esquema
• Gestión de contraste de colores: Usando colores OKLCH para cumplir con las directrices WCAG
• Container Queries: Nueva característica CSS que permite a los elementos reaccionar al tamaño de su contenedor padre

Compatibilidad con Tailwind CSS v4

Tailwind CSS v4 es una actualización importante centrada en el rendimiento, flexibilidad y estándares web modernos, con un sistema de configuración renovado y construcciones más rápidas.

¿Cuándo Estará Disponible?

Aunque el equipo no ha dado una fecha exacta, se espera que la beta esté disponible “en un futuro cercano” según el anuncio oficial. El equipo ha confirmado que están trabajando en los detalles finales del lanzamiento.

Conclusión

Filament v4 promete ser un salto cuántico en funcionalidad y experiencia de desarrollador. Con recursos anidados nativos, autenticación multi-factor integrada, soporte para datos estáticos en tablas y mejoras significativas en rendimiento, esta versión consolidará aún más a Filament como la herramienta de referencia para construir paneles administrativos en Laravel.

La combinación de nuevas características potentes con mejoras en la experiencia de usuario hace de Filament v4 una actualización imprescindible para cualquier desarrollador Laravel que trabaje con interfaces administrativas.

¿Estás emocionado por estas nuevas características? ¡Comparte tus pensamientos sobre qué característica de Filament v4 esperas más!