Skip to content

A awesome package for easy dynamic forms with Laravel Livewire and Bootstrap v4

License

Notifications You must be signed in to change notification settings

nodus-it/livewire-forms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Livewire Forms

License Latest Stable Version Total Downloads Unit-Tests codecov

An awesome package for easy dynamic forms with Laravel Livewire and Bootstrap v4.

Some special input types may require external javascript dependencies (besides Bootstrap).

The following inputs are currently supported:

  • Checkbox
  • Code (requires CodeMirror.js)
  • Color
  • Date
  • Datetime (composed of a date and a time input)
  • Decimal/Money (own implementation with currency and custom unit support)
  • File
  • Hidden
  • Number
  • Password
  • Radio (Bootstrap radio button group)
  • RichTextarea (requires Quill.js)
  • Select (requires bootstrap-select)
  • Text
  • Textarea
  • Time
  • It's also possible to create your own custom input types...

Installation

You can install the package via composer:

composer require nodus-it/livewire-forms

Include the JavaScript after the @livewireScripts directive on every page that will be using Livewire.

...
<body>
    ...
    @livewireScripts
    <script src="{{ asset( 'livewire-forms/livewire-forms.js' ) }}"></script>
</body>
</html>

You can publish the config file with:

php artisan vendor:publish --provider="Nodus\Packages\LivewireForms\LivewireFormsServiceProvider" --tag="livewire-forms:config"

You can publish the blade views with:

php artisan vendor:publish --provider="Nodus\Packages\LivewireForms\LivewireFormsServiceProvider" --tag="livewire-forms:views"

Usage

Minimal form view example

class UserForm extends FormView
{
    public function inputs()
    {
        $this->addText('name')
            ->setValidations('required|unique:users,name')
            ->setSize(4);
        $this->addSelect('country')
            ->setOptions(['DE' => ['label' => 'DE']])
            ->setValidations('required')
            ->setDefaultValue('DE');
        $this->addInput(CustomFileUploadInput::class, 'picture')

        $this->addSection('tenants.views.contact');
        $this->addText('email')
            ->setValidations('required|email');
        $this->addText('phone')
            ->setValidations('required');
    }

    public function submitCreate(array $values)
    {
        User::query()->create($values);
    
        return redirect()->back();
    }

    public function submitUpdate(array $values, User $user)
    {
        $user->update($values);
        
        return redirect()->back();
    }
}

View integration

Add your created form like any other Livewire component to your blade templates:

<livewire:user-form />

In case you want to prepopulate the input fields with an existing dataset, pass the desired model or array as attribute:

<livewire:user-form :model-or-array="$user" />

If you need to pass some custom data inside your forms, you can do so by passing additional data as array via the "additional-view-parameter" attribute:

<livewire:user-form :additional-view-parameter="['customKey' => 'customData']" />

All the given additional parameter can then be acccess directly in your form like so:

public function submitCreate(array $values)
{
    $this->customKey // resolves via __get() Magic to "customData"
}

Roadmap/TODO

  • File input
  • All Inputs
    • improve multiple support
    • check if we should support more properties
    • custom property system
  • New inputs
    • High-level input types e.g. Phone or Email (incl. automatic validation and input mode defaults)
    • Maybe add also support for native select inputs
  • Extensibility
    • override default classes (class overload)
    • external extensions (e.g. remote select)
  • Post Handling
    • Validation: add support for array validation rules
    • Improve validation exception handling if such is thrown inside the submit methods
  • Find another solution for the integration of external plugins like bootstrap-select than using "wire:ignore" due to several drawbacks that come with this, such as no possibility for dynamic select option updates.

Testing

composer test

License

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