spatie/laravel-blade-x

Allow additional attributes to be passed to component on registration

Closed this issue · 2 comments

Currently it seems very tedious to create components that are all based on a single generic and determine their behaviour based on a handful of properties.

I would propose something like below code as a solution to that issue. I've used inputs as an example as that is where I noticed the most duplication in a medium sized application.

Old

// Provider
BladeX::component('components.form.input.date')->tag('input-date');
BladeX::component('components.form.input.date-time')->tag('input-date-time');
BladeX::component('components.form.input.email')->tag('input-email');
BladeX::component('components.form.input.number')->tag('input-number');
BladeX::component('components.form.input.text')->tag('input-text');
BladeX::component('components.form.input.password')->tag('input-password');
BladeX::component('components.form.input.textarea')->tag('input-textarea');

// Generic Input
<input type="{{ $type }}" />

// Components
@include('components.form.input._input', ['type' => 'text'])
@include('components.form.input._input', ['type' => 'email'])
@include('components.form.input._input', ['type' => 'password'])
...

New

BladeX::component('components.form.input', 'input-password', ['type' => "password"])
BladeX::component('components.form.input', 'input-date', ['type' => "date"]);
BladeX::component('components.form.input', 'input-date-time', ['type' => "datetime-local"]);
BladeX::component('components.form.input', 'input-email', ['type' => "email"]);
BladeX::component('components.form.input', 'input-number', ['type' => "number"]);
BladeX::component('components.form.input', 'input-text', ['type' => "text"]);
BladeX::component('components.form.input', 'input-password', ['type' => "password"]);
BladeX::component('components.form.input', 'input-textarea', ['type' => "textarea"]);

We will consider this when creating a new major version of the package.

I don't know if it's similar enough or it should be a new issue but I would like to pass all attributes in the view that aren't part of the view model to the component view as $attr array for example.

The usecase would be to pass additional classes, an ID or data attributes to the component without the need to define all possible attributes.
In combination with something like the Laravel community HTML package it would be easy to "implode" all of them to an attribute string or even a whole tag.

So instead of doing:

<input type="{{ $type }}" value="{{ $value }}" />

The component could get reduced to:

<input {{ HTML::attr($attr) }} />

And this would also allow to pass a placeholder or inject an autocomplete attribute or whatever without changing the component view and handling every single edge case.

I would say that we all know how many HTML attributes there are and how many JS libraries want a data attribute or special class.