/laravel-views

Primary LanguagePHPMIT LicenseMIT

Laravel views

Laravel package to create beautiful common views like tables using only PHP code, inspired by Laravel Nova, these views are built with Laravel Livewire and styled using Tailwind CSS

Table View example

Installation and basic usage

Installing laravel views

composer require laravel-views/laravel-views

Publishing assets

php artisan vendor:publish --tag=public --force

or you can specify the provider

php artisan vendor:publish --tag=public --provider='LaravelViews\LaravelViewsServiceProvider' --force

Including assets

Add the following Blade directives in the head tag, and before the end body tag in your template

<html>
<head>
  ...
  @laravelViewsStyles
</head>
<body>
  ...
  @laravelViewsScripts
</body>
</html>

These blade directives are also including Laravel livewire styles and scripts, after that you may need to clear the view cache

php artisan view:clear

First table view

This is a basic usage of a table view, you can read the full table view documentation

Once you have installed the package and included the assets you can start to create a basic table view.

php artisan make:table-view UsersTableView

With this artisan command a UsersTableView.php file will be created inside app/Http/Livewire directory.

The basic usage needs a data repository (Eloquent query), headers and rows, you can customize the items to be shown, and the headers and data for each row like this example

<?php

namespace App\Http\Livewire;

use LaravelViews\Views\TableView;
use Illuminate\Database\Eloquent\Builder;
use App\User;

class UsersTableView extends TableView
{
    public function repository(): Builder
    {
        return User::query();
    }

    public function headers(): array
    {
        return ['Name', 'Email' 'Created', 'Updated'];
    }

    public function row($model)
    {
        return [$model->name, $model->email, $model->created_at, $model->updated_at];
    }
}

Rendering the table view

The easiest way to render the view is using the facade directly with a blade file

{!! LaravelViews::create(App\Http\Livewire\UsersTableView::class)->render() !!}

At this point, you would be able to see a table with some data

In the example above the view is using the User model created by default in every Laravel project, feel free to use any model you have, the method row is receiving a sinlge model object and you can use any property or public method you have difined inside your model.

This is the basic usage of the table view, but you can customize it with more features.

Read the full table view documentation

Rendering a view

From a controller

The easiest way to render a view is using the facade directly on the blade file as the example above, but it is a better practice if you inject a LaravelViews instance as a dependency in your controller.

use use LaravelViews\LaravelViews;

public function index(LaravelViews $laravelViews)
{
    $laravelViews->create(App\Http\Livewire\UsersTableView::class);

    return view('my-view', [
      'view' => $laravelViews
    ]);
}

And render it in your blade file

{!! $view->render() !!}

Specifying a layout and section

You can also return the view directly from your controller and specify the layout and section of your layout

use use LaravelViews\LaravelViews;

public function index(LaravelViews $laravelViews)
{
    $laravelViews->create(App\Http\Livewire\UsersTableView::class)
      ->layout('layout', 'section-name');

    return $laravelViews->render();
}

Send extra data

In the same way that you would send data to your views, you can send more data to the layout file

use use LaravelViews\LaravelViews;

public function index(LaravelViews $laravelViews)
{
    $laravelViews->create(App\Http\Livewire\UsersTableView::class)
      ->layout('layout', 'section-name', [
        'title' => 'My layout title'
      ]);

    return $laravelViews->render();
}

Components customization

These views are build with Tailwind CSS and you can either change the colors of the components following tailwindcss utilities or fully customize all the html of the components

Component variants using tailwindcss

If you are using Tailwind CSS or if you don't have issues using Tailwindcss and your own css styles, you can customize some utilities to change the color for each variant of the components publishing a config file

php artisan vendor:publish --tag=config

or you can specify the provider

php artisan vendor:publish --tag=config --provider='LaravelViews\LaravelViewsServiceProvider'

Inside this config file you can change the colors for each component variant

Components full customization

If you are not using taildwindcss, or if you want to have a full customization over the html components, you can publish all the blade files used for these views.

php artisan vendor:publish --tag=views

or you can specify the provider

php artisan vendor:publish --tag=views --provider='LaravelViews\LaravelViewsServiceProvider'