README

Pacote Laravel para renderização simples, fluente e customizável de componentes HTML — compatível tanto com Blade puro quanto com Livewire 3.

Ele facilita o desenvolvimento de interfaces limpas e reutilizáveis, eliminando duplicação de HTML e permitindo composição de componentes de forma elegante, com suporte para atributos dinâmicos, callbacks e views overrideáveis.

Instalação

Via Composer:

composer require cliqueti/html

O pacote utiliza autodiscovery. Nada mais é necessário.

Publicar Views (opcional)

Se quiser personalizar a aparência dos componentes:

php artisan vendor:publish --tag=views --provider="CliqueTi\LaravelHtml\Providers\HtmlProvider"

Isso criará:

resources/views/vendor/cliqueti-html/

Uso dos Componentes

Todos os componentes são acessados via Facade:

{!! Html::input(...) !!}
{!! Html::label(...) !!}
{!! Html::select(...) !!}
{!! Html::selectMultiple(...) !!}
{!! Html::checkbox(...) !!}
{!! Html::radio(...) !!}
{!! Html::textarea(...) !!}
{!! Html::button(...) !!}
{!! Html::link(...) !!}
{!! Html::table(...)->column(...)->make() !!}

Componentes

Label

{!! Html::label(text: 'Nome', attrs: ['class' => 'form-label']) !!}

Input

name é opcional (compatível com Livewire).

{!! Html::input(
    type: 'text',
    name: 'name',
    params: [
        'placeholder' => 'Digite seu nome',
        'class' => 'form-control',
        'wire:model.live' => 'state.name'
    ]
) !!}

Textarea

{!! Html::textarea(
    name: 'obs',
    value: 'Texto inicial',
    attrs: ['class' => 'form-control']
) !!}

Checkbox

{!! Html::checkbox(
    name: 'active',
    value: 1,
    checked: true,
    attrs: ['class' => 'form-check-input']
) !!}

Radio

{!! Html::radio(
    name: 'gender',
    value: 'M',
    checkedValue: old('gender'),
    attrs: ['class' => 'form-check-input']
) !!}

Select (simples)

{!! Html::select(
    name: 'status',
    options: ['Ativo', 'Inativo', 'Pendente'],
    attrs: ['class' => 'form-select']
) !!}

Select (associativo com selected)

{!! Html::select(
    name: 'tipo',
    options: [
        10 => 'Opção A',
        15 => 'Opção B'
    ],
    selected: 15
) !!}

Select com concatenação

{!! Html::select(
    name: 'user_id',
    options: \App\Models\User::select('id','name','email')->get(),
    display: 'name,email',
    separator: ' - '
) !!}

Resultado:

Paulo Brandeburski - paulo@cliqueti.com.br

Select Multiple

{!! Html::selectMultiple(
    name: 'roles',
    options: $roles,
    selected: [1, 3],
    display: 'name',
    attrs: ['class' => 'form-select']
) !!}

Link

{!! Html::link(
    text: 'Editar',
    href: route('users.edit', $id),
    attrs: ['class' => 'btn btn-primary']
) !!}

Button

{!! Html::button(
    text: 'Salvar',
    attrs: ['class' => 'btn btn-success', 'wire:click' => 'save']
) !!}

Tabela (Table Component)

O componente de tabela é poderoso, flexível e fácil de usar.

Exemplo básico

{!! Html::table(data: $users, attrs: ['class' => 'table table-striped'])
    ->column(header: 'ID', key: 'id')
    ->column(header: 'Nome', key: 'name')
    ->column(header: 'Email', key: 'email')
    ->make()
!!}

Acesso seguro a relacionamento

->column(header: 'Time', key: 'team.name')

Mesmo se $user->team for null, nenhum erro é lançado.

Callback para formatação

->column(header: 'Criado em', callback: fn($u) => $u->created_at->format('d/m/Y'))

Callback com componentes HTML

->column(
    header: 'Ações',
    attrs: ['style' => 'width: 8rem'],
    callback: function ($user) {
        return Html::link(
            text: 'Editar',
            href: '#',
            attrs: ['class' => 'btn btn-sm btn-primary', 'wire:click' => "edit({$user->id})"]
        );
    }
)

Exemplo completo em Livewire

Componente:

class Team extends Component
{
    public ?Collection $teams = null;

    public function mount()
    {
        $this->teams = \App\Models\Team::all();
    }

    public function render()
    {
        return view('livewire.global.team');
    }
}

View:

{!! Html::table(data: $teams)
    ->column(header: 'ID', key: 'id')
    ->column(header: 'Nome', key: 'name')
    ->column(header: 'Time', key: 'team.name')
    ->column(header: 'Ações', callback: fn($t) =>
        Html::link(
            text: 'Editar',
            href: '#',
            attrs: ['wire:click' => "edit({$t->id})", 'class' => 'btn btn-warning btn-sm']
        )
    )
    ->make()
!!}

Sobrescrevendo Views

Para personalizar qualquer componente:

1. Publique as views:

php artisan vendor:publish --tag=views

1. Edite em:

resources/views/vendor/cliqueti-html/

Licença

MIT License.