FilamentF
Filament•12mo ago
charlie

From Livewire to Apine

Hi there!

This field doesn't need any request to work. What would be the appropriate way/syntax to translate live() / afterStateUpdated() methods to Alpine.js?

ColorPicker::make('background')
  ->label('Background Color')
  ->colors($this->getBackgroundColors())
  ->live()
  ->extraAttributes(['id' => 'background'])
  ->afterStateUpdated(function ($livewire) {
      $colors = json_encode($this->getBackgroundColors());
      $livewire->js(
          <<<JS
          const colors = JSON.parse('$colors');
          const color = document.querySelector('#background input[type="radio"]:checked').value;
          const shades = colors[color];
          previewTheme('gray', shades);
          window.background = shades;
          updateTheme();
      JS
      );
  }),


Preferably extracting the js code elsewhere.

Should I extend the field class or can I go with extraAttributes?

Thanks!
Was this page helpful?