Filament Title With Slug Laravel Package

Getting Started

Minimal Setup

1. Installation (unchanged):

   composer require blendbyte/filament-title-with-slug
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Blendbyte\FilamentTitleWithSlug\FilamentTitleWithSlugServiceProvider" --tag="config"
   

2. First Use Case (updated for responsive improvements): Replace a standard TextInput with TitleWithSlugInput in a Filament resource:

   use Blendbyte\FilamentTitleWithSlug\TitleWithSlugInput;
   
   TitleWithSlugInput::make('title')
       ->required()
       ->maxLength(255)
       ->slug('slug') // Maps to a slug field
       ->responsive(); // Now fully optimized for all screen sizes
   

3. Where to Look First:

   • README.md for updated responsive behavior.
   • Config file for visual customization options (e.g., responsive_layout).
   • Tests for responsive edge-case examples.

Implementation Patterns

Core Workflows

1. Basic Integration (with responsive improvements):

   TitleWithSlugInput::make('post_title')
       ->rules(['unique:posts,title'])
       ->slug('post_slug')
       ->livePreviewUrl(fn (string $slug) => route('posts.show', $slug))
       ->responsive(); // Auto-adjusts layout for mobile/desktop
   

2. Dynamic Slug Generation (unchanged):

   TitleWithSlugInput::make('name')
       ->slug('url')
       ->slugGenerator(fn (string $title) => Str::slug($title, '-')
           ->replace(['and', 'the', 'an'], '')
           ->lower());
   

3. Responsive Layout Control (NEW): Explicitly configure responsive behavior:

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->responsive([
           'md' => 'stack', // Stack fields on medium screens
           'lg' => 'inline', // Show inline on large screens
       ]);
   

4. Resource-Level Configuration (unchanged):

   public static function form(Form $form): array
   {
       return [
           TitleWithSlugInput::make('title')
               ->required()
               ->slug('slug')
               ->responsive()
               ->livePreviewUrl(fn ($slug) => "/posts/$slug"),
           // Other fields...
       ];
   }
   

5. Table Column Integration (unchanged):

   SlugColumn::make('slug')
       ->url(fn ($record) => route('posts.show', $record->slug))
       ->openUrlInNewTab()
       ->responsive(); // Now supports responsive table columns
   

Advanced Patterns

1. Custom Preview URLs (unchanged):

   TitleWithSlugInput::make('event_name')
       ->slug('event_slug')
       ->livePreviewUrl(fn ($slug) => route('events.preview', ['slug' => $slug, 'year' => now()->year]));
   

2. Slug Validation (unchanged):

   TitleWithSlugInput::make('product_name')
       ->slug('product_slug')
       ->rules([
           'unique:products,slug',
           'regex:/^[a-z0-9\-]+$/i',
       ]);
   

3. Multi-Language Support (unchanged):

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->slugGenerator(fn ($title, $locale) => Str::slug(__($title), '-', $locale));
   

4. Responsive Slug Input (NEW): Optimize slug input for touch devices:

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->responsiveSlugInput([
           'touch' => true, // Enable touch-friendly UI
           'minWidth' => '200px', // Minimum width for mobile
       ]);
   

Gotchas and Tips

Common Pitfalls

1. Responsive Layout Conflicts (NEW):

   • Issue: Fields appearing misaligned due to responsive changes.
   • Fix: Explicitly set responsive behavior or use defaults:

     // Avoid implicit conflicts
     TitleWithSlugInput::make('title')
         ->slug('slug')
         ->responsive('stack'); // Force stack layout
     

2. Slug Field Mismatch (unchanged):

   • Fix: Ensure slug() matches a database column.

3. Live Preview URL Conflicts (unchanged):

   • Fix: Use named routes with all parameters.

4. Slug Collisions (unchanged):

   • Fix: Use ->unique() or custom logic.

5. Config Overrides (unchanged):

   • Fix: Publish and override config for responsive settings:

     // config/filament-title-with-slug.php
     'responsive' => [
         'default' => 'inline',
         'mobile' => 'stack',
     ],
     

Debugging Tips

1. Check Responsive Behavior: Log responsive settings to debug layout issues:

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->responsive()
       ->afterStateUpdated(fn ($state, $set) => {
           logger()->debug("Responsive layout: " . $this->getResponsiveLayout());
       });
   

2. Validate Database Sync (unchanged): Ensure slugs update correctly.

3. Clear Cached Views (unchanged):

   php artisan filament:cache:clear
   

Extension Points

1. Custom Responsive Rules (NEW): Extend responsive behavior for specific use cases:

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->responsive(fn ($screen) => $screen === 'xs' ? 'stack' : 'inline');
   

2. Event Listeners (unchanged): Trigger actions on slug changes.

3. Testing (unchanged): Mock slug generation in tests.

4. Localization (unchanged): Adapt slugs per locale.

5. Performance (NEW): Optimize responsive slug suggestions:

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->suggestions(function (string $query) {
           return Post::where('slug', 'like', "%{$query}%")
               ->limit(5)
               ->pluck('slug')
               ->toArray(); // Ensure array for responsive rendering
       });
   

6. Visual Customization (NEW): Style the responsive input:

   TitleWithSlugInput::make('title')
       ->slug('slug')
       ->responsive()
       ->extraAttributes(['class' => 'filament-responsive-input']);