@componentWhen Blade directive

[royduin]

Just like the @includeWhen directive which can be found here in the docs. I'd like to have a @componentWhen directive. When the boolean is false it will just return the slot.

This makes it possible to conditionally wrap slots with Blade components. Example:

input.blade.php

@componentWhen($useFormGroup, 'form-group')
    <input type="text" name="{{ $name }}" class="form-control">
@endcomponent

form-group.blade.php

<div class="form-group">
    {{ $slot }}
</div>

[royduin]

Just found another issue requesting this: #618

[sisve]

Isn't this just wrapping the @component in an @if? I do not see the need to add another directive for such a simple case.

I understand that there's an existing includeWhen directive, and that is relevant when we decide the name for a new directive. But the existence of includeWhen alone does not justify adding this new directive. If it did, then we would never be able to get rid of any of them since they both are justifying their presence with "there's another one with a similar name already".

[royduin]

In that case the slot (or in my example the input) won't render at all. To achieve the behavior as I described with a normal @component will look like:

input.blade.php

@component('form-group')
    <input type="text" name="{{ $name }}" class="form-control">
@endcomponentWhen

form-group.blade.php

@if($useFormGroup)
    <div class="form-group">
@endif
    {{ $slot }}
@if($useFormGroup)
    </div>
@endif

A @componentWhen directive is much cleaner.

[royduin]

I found a way to do this with the new component classes:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class FormGroup extends Component
{
    public $use;

    public function __construct($use = true)
    {
        $this->use = $use;
    }

    public function render()
    {
        return function (array $data) {
            if (!$data['use']) {
                return (string)$data['slot'];
            }

            return (string)view('components.form-group', ['slot' => $data['slot']]);
        };
    }
}

By default it will be wrapped:

<x-form-group>
    Test
</x-form-group>

To disable it:

<x-form-group :use="false">
    Test
</x-form-group>

But it's not that pretty...