README

HTML control rendering helper for Laravel and Livewire

Features

Separate control rendering from control styling. Write only an interface definition and the styling will be applied based on selected templates.
Possibility to switch styles via config. It is possible to declare several styles and switch between them. Option to switch styles at runtime is coming soon.
Write less code. Using this approach you define control styles once and focus only on interface declaration.
Livewire table component. Unique Livewire table with sorting, search, filters, actions, row select, column formatters and sub details.

Install

composer require dimonka2/flatform

Publish provider:

$ php artisan vendor:publish --provider="dimonka2\flatform\FlatformServiceProvider"

Configure

Coming soon

Using in the blade

Following text creates text inputs with labels

@form([
    ['row', [
        ['text', 'label' => 'First name', 'name' => 'first_name',],
        ['text', 'label' => 'Last name', 'name' => 'last_name',],
    ]]
])

Depending on styles the code above will generate something like:

<div class="row">
    <div class="col-6 form-group">
        <label for="first_name-100">First name</label>
        <input id="first_name-100" class="  form-control form-control-alt" name="first_name" type="text">
    </div>
    <div class="col-6 form-group">
        <label for="last_name-101">Last name</label>
        <input id="last_name-101" class="  form-control form-control-alt" name="last_name" type="text">
    </div>
</div>

Included elements, inputs and components

Inputs: text, password, number, textarea, select, file, date, checkbox, radio, hidden, select2, bootstrap select, summernote
Components: alert, breadcrumb, button, dropdown, progress, tabs, card, datatable, table
Trait for datatable
HTML tags: form, text, div, row (div with class "row"), col (div with class 'col-xx')
Blade directives: stack, include, yield, section, Livewire
TableComponent: Livewire table component

Documentation

Coming soon

TableComponent

In order to create a Livewire TableComponent you cave to create a class in your Livewire folder that is derived from TableComponent class. See following sample code:

namespace App\Http\Livewire\User;

use App\Models\User;
use dimonka2\flatform\Flatform;
use dimonka2\flatform\Livewire\TableComponent;
use dimonka2\flatform\Form\Components\Table\Table;

class UserList extends TableComponent
{
protected function getTable(): ?Table
    {
        $table = new Table([
            'class' => 'table table-hover',
            'columns' => [
                ['name' => 'name'       , 'title'   => 'Name'       , 'search',    ],
                ['name' => 'email'      , 'title'   => 'Email'      , 'search',    ],
                ['name' => 'position'   , 'title'   => 'Position'   , 'search',    ],
                ['name' => 'updated_at' , 'title'   => 'Last update', 'sort' => 'Desc'  , '_format' => "date", ],
                ['name' => 'id', 'hide'],
            ],
            'order' => 'updated_at',
            'query' => User::whereNull('disabled_at'),
        ]);

        return $table;
    }
}

This component will generate a table with a user list with 4 columns.

Table component properties and functions

Class: dimonka2\flatform\Livewire\TableComponent

Table component has also few functions, that can be called, defined or overridden:

Table definition properties

Class: dimonka2\flatform\Form\Components\Table\Table

Table Column properties

Table Details properties

Table Details is a pull down row that may contain any additional details connected to the row including even Livewire components.

Example of table with details:

protected function getTable(): ?Table
    {
        $table = new Table([
            'columns' => [
                // ...
            ],
            'details' => [
                'callback' => function($row) {
                    // get a queried model from the row
                    $model = $row->_item;
                    return 'Model name: <strong>' . $model->name . '</strong>';
                    // or alternatively in Flatform language:
                    return [['span', 'text' => 'Model name: '], ['strong', 'text' => $model->name]];
                }
            ],
        ]);

        return $table;
    }
}

Table Select properties

Table Select is an additional checkbox in most left column that enables to select table rows.

Example of table with Select that will highlight selected rows using class table-primary:

protected function getTable(): ?Table
    {
        $table = new Table([
            'columns' => [
                // ...
            ],
            'select' => [
                'class' => 'table-primary',
            ],
        ]);

        return $table;
    }
}

Table Action properties

Table actions should be defined together with TableSelect as they currently rendered for selected items.

Example of table with Table Select and Actions:

    protected function getTable(): ?Table
        {
            return new Table([
                'columns' => [
                    // ...
                ],
                'select' => [
                ],
                'actions' => [
                    // in this case we just calling a normal Livewire action for this action
                    ['title' => 'Disable selected users', 'position' => 'dropdown',
                        'icon' => 'fa fa-ban', 'wire:click.prevent' => 'disableUsers', 'href' => '#'],
                ],
            ]);

        }
    }
    // handle action
    public function disableUsers()
    {
        // get selected models
        $users = $this->getSelected(true);
        // disable users one by one
        foreach ($users as $user) {
            if($user->id != Auth::user()->id) {
                $user->disabled = $disable;
                $user->update();
            }
        }
        // reload table rows in order to populate changes
        $this->reload();
    }

Table Filter properties

Filter is a basic Flatform input control that is associated with persistent input and a closure function that can be attached to filter query based on the user input.

dimonka2 / flatform

Maintainers

Details