Add support for Form Sliders.

Author: b4oshany

assets/sample-slider-form.png

@@ -0,0 +1,83 @@
+
+## Examples
+
+
+### FormComponent Example
+
+```php
+namespace App\Http\Livewire\Clients;
+
+use Bastinald\LaravelLivewireForms\Components\Button;
+use Bastinald\LaravelLivewireForms\Components\FormComponent;
+use Bastinald\LaravelLivewireForms\Components\Input;
+use Bastinald\LaravelLivewireForms\Components\Select;
+
+class CreateClientForm extends FormComponent
+{
+    public $gridClass = 'row';
+
+    public function fields()
+    {
+        return [
+            Input::make('name', 'Name')
+                ->col_md()
+                ->placeholder('Full Name'),
+            Input::make('email', 'Email')
+                ->type('email')
+                ->placeholder('Email, example: [email protected]')
+                ->col_md(),
+            Select::make('gender', 'Gender')
+                ->placeholder('Gender')
+                ->options(['Male', 'Female'])
+                ->col_md()
+                ->addAttrs(['class' => 'd-block w-full']),
+            Input::make('phone_no', 'Contact Number')
+                ->placeholder('(xxx) xxx xxxxx')
+                ->col_md(),
+            Input::make('street_address', 'Street Address')
+                ->col_md(),
+            Input::make('city', 'City')
+                ->col_md(),
+            Input::make('state', 'State / Parist')
+                ->col_md(),
+            Input::make('country', 'Country')
+                ->col_md(),
+        ];
+    }
+
+    public function buttons()
+    {
+        return [
+            Button::make('Cancel', 'secondary')->url(route('team.index')),
+            Button::make()->click('submit'),
+        ];
+    }
+}
+```
+
+#### Form View
+
+![Example Form](assets/sample-form.png)
+
+
+### FormSliderComponent Example
+
+```php
+namespace App\Http\Livewire\Clients;
+
+use Bastinald\LaravelLivewireForms\Components\Button;
+use Bastinald\LaravelLivewireForms\Components\FormSliderComponent;
+use Bastinald\LaravelLivewireForms\Components\Input;
+use Bastinald\LaravelLivewireForms\Components\Select;
+
+class CreateClientForm extends FormSliderComponent
+{
+
+    public $btnIcon = 'fa fa-user';
+    public $btnText = 'Add Client';
+    public $gridClass = 'row';
+
+    ...
+
+}
+```

examples.md

@@ -91,6 +91,27 @@ class Login extends FormComponent
             ->name('login')
             ->middleware('guest');
     }
+}
+```
+
+## Form Slider
+
+Create a form that slides out by specifying a `title`, `layout` and `route` to use:
+
+```php
+class Login extends FormSliderComponent
+{
+    public $title = 'Login';
+    public $layout = 'layouts.card';
+    public $btnText = 'Login';
+
+    public function route()
+    {
+        return Route::get('/login', static::class)
+            ->name('login')
+            ->middleware('guest');
+    }
+}
 ```
 
 The `route` method is made available by using my [laravel-livewire-routes](https://github.com/bastinald/laravel-livewire-routes) package.
@@ -115,6 +136,7 @@ class UpdateUserForm extends FormComponent
     {
         $this->data = $user->toArray();
     }
+}
 ```
 
 ## Accessing Data
@@ -422,3 +444,7 @@ class CreateClientForm extends FormComponent
 
 ![Example Form](assets/sample-form.png)
 
+
+### Other Examples
+
+For more examples, read the [example.md](example.md) document.

readme.md

@@ -0,0 +1,33 @@
+<?php
+
+namespace Bastinald\LaravelLivewireForms\Components;
+
+class FormSliderComponent extends FormComponent {
+
+
+    public $btnIcon = '';
+    public $btnText = 'Execute';
+    public $btnAttrs = [];
+    public $sliderActive = false;
+
+    public function toggleSlider() {
+        $this->sliderActive = ! $this->sliderActive;
+    }
+
+    public function showSlider() {
+        $this->sliderActive = true;
+    }
+
+    public function hideSlider() {
+        $this->sliderActive = false;
+    }
+
+    public function render()
+    {
+        return view('laravel-livewire-forms::form-slider-component')
+            ->layout($this->layout ?? config('livewire.layout'));
+    }
+
+}
+
+?>

src/Components/FormSliderComponent.php

@@ -0,0 +1,78 @@
+<div>
+    <button wire:click="showSlider" type='button' class='px-3 py-2 btn btn-success shadow-none uppercase tracking-wider hover:bg-blue-200 focus:outline-none'>
+        <i class="{{ $btnIcon }}"></i>
+        <span>{{ __($btnText) }}</span>
+    </button>
+
+
+    @if( $sliderActive )
+        <div class="lw-slider-form-holder"  >
+            <div class="lw-slider-form slider-active" >
+                <button wire:click="hideSlider" type='button' class='btn-close px-3 py-2 btn btn-danger btn-xs'>
+                    <i class="fa fa-close"></i>
+                </button>
+
+                @section('title', __($title))
+                <form  class="{{ $gridClass }}" >
+                    @foreach($this->fields() as $field)
+                        {{ $field->render()->with($field->data()) }}
+                    @endforeach
+
+                    <div class="col-md-12">
+                        <div class="d-flex justify-content-end gap-2">
+                            @foreach($this->buttons() as $button)
+                                {{ $button->render()->with($button->data()) }}
+                            @endforeach
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    @endif
+    <style>
+        .lw-slider-form-holder {
+            width: 100%;
+            height: 100vh;
+            z-index: 1000000;
+            background-color: #80808069;
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        .lw-slider-form-holder .lw-slider-form {
+            background-color: white;
+            position: absolute;
+            right: 0;
+            width: 40%;
+            max-width: 720px;
+            padding: 40px;
+            height: 100%;
+            padding-top: 100px;
+            box-shadow: 4px 4px 10px black;
+        }
+        .lw-slider-form-holder .lw-slider-form button.btn-close {
+            padding: 2px 10px !important;
+            float: right;
+            margin-top: -30px;
+        }
+
+        @media (max-width: 576px) {
+            .lw-slider-form-holder .lw-slider-form {
+                width: 100%;
+            }
+        }
+        @media (max-width: 768px) {
+            .lw-slider-form-holder .lw-slider-form {
+                width: 100%;
+            }
+        }
+        @media (max-width: 992px) {
+            .lw-slider-form-holder .lw-slider-form {
+                width: 100%;
+            }
+        }
+    </style>
+</div>
+