A dynamic Laravel Livewire component for tab forms

Overview

Latest Stable Version Total Downloads Latest Unstable Version License PHP Version Require

A dynamic Laravel Livewire component for tab forms.

Tabs form

Installation

You can install the package via composer:

composer require vildanbina/livewire-tabs

TailwindCSS

The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.

php artisan vendor:publish --tag=livewire-tabs-views

Usage

Creating a Tab Container

You can create livewire component php artisan make:livewire UserTab to make the initial Livewire component. Open your component class and make sure it extends the TabsComponent class:



namespace App\Http\Livewire;

use Vildanbina\LivewireTabs\TabsComponent;
use App\Models\User;

class UserTab extends TabsComponent
{
    // My custom class property
    public $userId;
    
    /*
     * Will return App\Models\User instance or will create empty User (based on $userId parameter) 
     */
    public function model()
    {
        return User::findOrNew($this->userId);
    }
}

When you need to display tabs form, based on above example we need to pass $userId value and to display tabs form:

">
<livewire:user-tabs user-id="3"/>

Or when you want to create new user, let blank user-id attribute, or don't put that.

When you want to have current tab instance. You can use:

$tabsFormInstance->getCurrentTab();

When you want to go to specific tab. You can use:

$tabsFormInstance->setTab($tab);

You can customize tab footer buttons, create some view and put that view to method:

public function tabFooter()
{
    return view('livewire-tabs::tabs-footer');
}

Creating a Tab Item

You can create tabs form tab. Open or create your tab class (at App\Tabs folder) and make sure it extends the Tab class:



namespace App\Tabs;

use Vildanbina\LivewireTabs\Components\Tab;
use Illuminate\Validation\Rule;

class General extends Tab
{
    // Tab view located at resources/views/tabs/general.blade.php 
    protected string $view = 'tabs.general';

    /*
     * Initialize tab fields
     */
    public function mount()
    {
        $this->mergeState([
            'name'                  => $this->model->name,
            'email'                 => $this->model->email,
        ]);
    }
    
    /*
    * Tab icon 
    */
    public function icon()
    {
        return view('icons.home');
    }

    /*
     * When Tabs Form has submitted
     */
    public function save($state)
    {
        $user = $this->model;

        $user->name     = $state['name'];
        $user->email    = $state['email'];
        
        $user->save();
    }

    /*
     * Tab Validation
     */
    public function validate()
    {
        return [
            [
                'state.name'     => ['required', Rule::unique('users', 'name')->ignoreModel($this->model)],
                'state.email'    => ['required', Rule::unique('users', 'email')->ignoreModel($this->model)],
            ],
            [
                'state.name'     => __('Name'),
                'state.email'    => __('Email'),
            ],
        ];
    }

    /*
     * Tab Title
     */
    public function title(): string
    {
        return __('General');
    }
}

In Tab class, you can use livewire hooks example:

use Vildanbina\LivewireTabs\Components\Tab;

class General extends Tab
{
    public function onTabIn($name, $value)
    {
        // Something you want
    }

    public function onTabOut($name, $value)
    {
        // Something you want
    }

    public function updating($name, $value)
    {
        // Something you want
    }

    public function updatingState($name, $value)
    {
        // Something you want
    }
    
    public function updated($name, $value)
    {
        // Something you want
    }

    public function updatedState($name, $value)
    {
        // Something you want
    }
}

Each tab need to have view, you can pass view path in $view property.

After create tab class, you need to put that tab to tabs form:



namespace App\Http\Livewire;

use App\Tabs\General;
use Vildanbina\LivewireTabs\TabsComponent;

class UserTab extends TabsComponent
{
    public array $tabs = [
        General::class,
        // Other tabs...
    ];
   
    ...
}

Building Tailwind CSS for production

Because some classes are dynamically build and to compile js you should add some classes to the purge safelist so your tailwind.config.js should look something like this:

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",

        "./vendor/vildanbina/livewire-tabs/resources/views/*.blade.php",
    ]
};

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please e-mail [email protected] to report any security vulnerabilities instead of the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

You might also like...
This is a Reddit-like clone named Scroller, made for the project component of COSC 360 - Web Programming.

The COSC 360 Project Due Dates: See Milestone Dates Overview: The project is designed to help develop your skills for full stack development. With thi

Laravel-Blog is a blog application written in Laravel 4.2.
Laravel-Blog is a blog application written in Laravel 4.2.

创造不息,交付不止 Introduction Laravel-Blog is a blog project written in Laravel 4.2. Screenshots Article List Page Article composing page Single post page Ad

Projeto Web Site do Curso Laravel Developer utilizando o Framework PHP Laravel

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

A simple helpdesk tickets system for Laravel 5.1+ which integrates smoothly with Laravel default users and auth system
A simple helpdesk tickets system for Laravel 5.1+ which integrates smoothly with Laravel default users and auth system

A simple helpdesk tickets system for Laravel 5.1+ which integrates smoothly with Laravel default users and auth system, demo is available at: http://ticketit.kordy.info/tickets

mini Project in Laravel and vue js. Real World Laravel 8x + vue js Dashboard.Task management and project management system
mini Project in Laravel and vue js. Real World Laravel 8x + vue js Dashboard.Task management and project management system

mini Project in Laravel and vue js. Real World Laravel 8x + vue js Dashboard.Task management and project management system. Dashboard features such as: Complete Dashboard, Custom Authentication, Email Verification, custom-login-register-forgot password (without jetstream).

A powerful open source Laravel Blog with WYSWYG and CRUD (Create Read Update Delete) built on Laravel 5.8 and Bootstrap 4
A powerful open source Laravel Blog with WYSWYG and CRUD (Create Read Update Delete) built on Laravel 5.8 and Bootstrap 4

Larablog A powerful open source Laravel Blog with WYSWYG and CRUD (Create Read Update Delete) built on Laravel 5.8 and Bootstrap 4 Table of contents F

Laravel Angular Time Tracker is a simple time tracking application built on Laravel 5.2, Angular 2, and Bootstrap 3.

Laravel 5.2, Angular 2, and Bootstrap 3.3.* Time Tracker Laravel Angular Time Tracker is a simple time tracking application built on Laravel 5.2, Angu

Mini is a small Laravel application with 2 modules to go with the book Laravel: The Modular Way

Mini Mini is a small Laravel application with 2 modules to go with the book Laravel: The Modular Way Install Clone this repo git clone [email protected]:

Voyager - The Missing Laravel Admin
Voyager - The Missing Laravel Admin

Voyager - The Missing Laravel Admin Made with ❤️ by The Control Group Website & Documentation: https://voyager.devdojo.com/ Video Tutorial Here: https

Releases(v1.1)
Owner
Vildan Bina
Experienced Full Stack Engineer with a demonstrated history of working in the information technology and services industry. Skilled in PHP (Laravel), Javascript
Vildan Bina
Keep your forms alive, avoid `TokenMismatchException` by gently poking your Laravel app.

Poke Keep your forms alive, avoid TokenMismatchException by gently poking your Laravel app. Keep this package free Your support allows me to keep this

Laragear 12 Nov 28, 2022
LaraEstimate is a complete Dynamic Estimates/Quotes System made with Laravel 7 and VueJS.

LaraEstimate LaraEstimate is a complete Dynamic Estimates/Quotes System made with Laravel 7 and VueJS. The system has the following features: Allows t

Tiago S. P. Rodrigues 133 Dec 12, 2022
SARA: Dynamic licensing system with PHP

This license system allows you to dynamically create a license with Domain, IP address and Time.

Arcface 6 Nov 16, 2022
Simple Dynamic DNS Web management self-hosting. Run over dnsmasq.

MyDDNS [BETA] Simple Dynamic DNS Web management self-hosting. It use dnsmasq. It was inspired on duckdns.org. Preparation You need root access to a se

Iván Eixarch 4 Jul 6, 2022
Dynamic photo package for blog posts and other features, integrating CKEditor Smart WYSIWYG

Dynamic Photo Dynamic Photo is a package to assist in integration with CKEditor, a powerful WYSIWYG. With the package it is possible to send photos dy

Michael Frank 7 Jul 18, 2022
A fully responsive and dynamic web app to present all products for a start-up called Zarafah

A fully responsive and dynamic web app to present all products for a start-up called Zarafah. Made of HTML, CSS, TailwindCss, Vanilla JavaScript, AlpineJS, Laravelphp, Laravel Breeze, Jotform Api for forms submissions and Mailchimp Api for Newsletter.

Mostafa Said 7 Dec 11, 2022
QuidPHP/Core is a PHP library that provides an extendable platform to create dynamic applications

QuidPHP/Core About QuidPHP/Core is a PHP library that provides an extendable platform to create dynamic applications. It is part of the QuidPHP packag

QuidPHP 4 Jul 2, 2022
This is a visitor management system, developed by the use of Laravel 8 combined with Jetstream, Livewire and Tailwind CSS.

This is a visitor management system, developed by the use of Laravel 8 combined with Jetstream, Livewire and Tailwind CSS.

Marios Tsouras 0 Apr 23, 2022
YouTubeClone - Web Projects Build By Laravel Framework v8 & LiveWire it's Small project to upload video Like Youtube

YouTubeClone YouTubeClone - Web Projects Build By Laravel Framework & LiveWire it's Small project to upload video Like Youtube Use Laravel v8.80.0 Ima

Hesham Adel 1 Jan 24, 2022
A component-centric backend communication layer for Alpine.js

A component-centric backend communication layer for Alpine.js. Installation Install using the following command: composer require radio/radio Install

Radio.js 75 Dec 20, 2021