Dynamically display showWhen on Fieldset

[stevebrainng]

I'm trying to dynamically display the Field set based on the value of media_disk, in the code, s3 or r2. But doing this on a Single Field type is working.

         Fieldset::make(__('packages/media::media.settings.storage'), [
           Select::make(__('packages/media::media.settings.disk'), 'media_disk')
              ->options(MediaFacade::getAvailableDrivers())
              ->searchable()
              ->hint(__('packages/media::media.settings.disk_hint')),

           $this->getS3ConfigFieldset(),
           $this->getR2ConfigFieldset(),
            ])->class(['bg-white dark:bg-neutral-800']),
        ], colSpan: 12),
        
        
    protected function getS3ConfigFieldset(): Fieldset
    {
        return Fieldset::make(__('packages/media::media.s3_disk') . ' ' . __('packages/media::media.settings.cloud_config'), [
            Text::make(__('packages/media::media.settings.access_key'), 'key')
                ->wrapName('media_disk_config'),
            
            Password::make(__('packages/media::media.settings.secret_key'), 'secret')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.region'), 'region')
                ->placeholder('us-east-1')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.bucket'), 'bucket')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.url'), 'url')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.endpoint'), 'endpoint')
                ->wrapName('media_disk_config'),

            Checkbox::make(__('packages/media::media.settings.use_path_style_endpoint'), 'use_path_style_endpoint')
                ->wrapName('media_disk_config'),
            
        ])
        ->setNameAttribute('media_disk_s3')
        ->showWhen('media_disk', '=', 's3');
    }

    protected function getR2ConfigFieldset(): Fieldset
    {
        return Fieldset::make(__('packages/media::media.r2_disk') . ' ' . __('packages/media::media.settings.cloud_config'), [
            Text::make(__('packages/media::media.settings.access_key'), 'key')
                ->wrapName('media_disk_config'),
            Password::make(__('packages/media::media.settings.secret_key'), 'secret')
                ->wrapName('media_disk_config'),
            Text::make(__('packages/media::media.settings.bucket'), 'bucket')
                ->wrapName('media_disk_config'),
            Text::make(__('packages/media::media.settings.endpoint'), 'endpoint')
                ->placeholder('https://<account_id>.r2.cloudflarestorage.com')
                ->wrapName('media_disk_config'),
            Text::make(__('packages/media::media.settings.url'), 'url')
                ->wrapName('media_disk_config'),
            Checkbox::make(__('packages/media::media.settings.use_path_style_endpoint'), 'use_path_style_endpoint')
                ->wrapName('media_disk_config'),

        ])
        ->setNameAttribute('media_disk_r2')
        ->showWhen('media_disk', '=', 'r2');
    }

[lee-to]

Unfortunately, Fieldset doesn't support ShowWhen. You can use AlpineJS.

protected function getS3ConfigFieldset(): Fieldset
    {
        return Fieldset::make(__('packages/media::media.s3_disk') . ' ' . __('packages/media::media.settings.cloud_config'), [
            Text::make(__('packages/media::media.settings.access_key'), 'key')
                ->wrapName('media_disk_config'),

            Password::make(__('packages/media::media.settings.secret_key'), 'secret')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.region'), 'region')
                ->placeholder('us-east-1')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.bucket'), 'bucket')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.url'), 'url')
                ->wrapName('media_disk_config'),

            Text::make(__('packages/media::media.settings.endpoint'), 'endpoint')
                ->wrapName('media_disk_config'),

            Checkbox::make(__('packages/media::media.settings.use_path_style_endpoint'), 'use_path_style_endpoint')
                ->wrapName('media_disk_config'),

        ])
            ->setNameAttribute('media_disk_s3')
            ->x('show', 'media_disk==`s3`');
    }

    protected function getR2ConfigFieldset(): Fieldset
    {
        return Fieldset::make(__('packages/media::media.r2_disk') . ' ' . __('packages/media::media.settings.cloud_config'), [
            Text::make(__('packages/media::media.settings.access_key'), 'key')
                ->wrapName('media_disk_config'),
            Password::make(__('packages/media::media.settings.secret_key'), 'secret')
                ->wrapName('media_disk_config'),
            Text::make(__('packages/media::media.settings.bucket'), 'bucket')
                ->wrapName('media_disk_config'),
            Text::make(__('packages/media::media.settings.endpoint'), 'endpoint')
                ->placeholder('https://<account_id>.r2.cloudflarestorage.com')
                ->wrapName('media_disk_config'),
            Text::make(__('packages/media::media.settings.url'), 'url')
                ->wrapName('media_disk_config'),
            Checkbox::make(__('packages/media::media.settings.use_path_style_endpoint'), 'use_path_style_endpoint')
                ->wrapName('media_disk_config'),

        ])
            ->setNameAttribute('media_disk_r2')
            ->x('show', 'media_disk==`r2`');
    }

    /**
     * @return list<ComponentContract>
     */
    protected function components(): iterable
	{
		return [
            FormBuilder::make()->fields([
                Fieldset::make(__('packages/media::media.settings.storage'), [
                    Select::make(__('packages/media::media.settings.disk'), 'media_disk')
                        ->xModel()
                        ->options(['s3' => 's3', 'r2' => 'r2', 'b' => 'b'])
                        ->searchable()
                        ->hint(__('packages/media::media.settings.disk_hint')),

                    $this->getS3ConfigFieldset(),
                    $this->getR2ConfigFieldset(),
                ])->class(['bg-white dark:bg-neutral-800'])->xData(['media_disk' => 's3']),
            ]),
];
}