Livewire and hidden fix (#3)

* wip
* WIP Livewire
* Added Livewire test
* Livewire documentation
* Update composer.json

Author: pascalbaljet

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 1.2.0 - 2020-08-01
+
+- Validation support for Laravel Livewire
+- Make hidden inputs visually hidden
+
 ## 1.1.0 - 2020-07-18
 
 - added support for Bootstrap 4

README.md

@@ -14,6 +14,7 @@ A set of Blade components to rapidly build forms with [Tailwind CSS Custom Forms
 * Support for [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app) and [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/forms/).
 * Component logic independent from Blade views, the Tailwind and Bootstrap views use the same logic.
 * Bind a target to a form (or a set of elements) to provide default values.
+* Support for [Laravel Livewire](https://laravel-livewire.com)
 * Support for Spatie's [laravel-translatable](https://github.com/spatie/laravel-translatable).
 * Re-populate forms with [old input](https://laravel.com/docs/master/requests#old-input).
 * Validation errors.
@@ -159,6 +160,51 @@ You can override the `@bind` directive by passing a target directly to the eleme
 </x-form>
 ```
 
+#### Laravel Livewire
+
+You can use the `@wire` and `@endwire` directives to use bind a form to a Livewire component. Let's take a look at the `ContactForm` example from the official Livewire documentation.
+
+```php
+use Livewire\Component;
+
+class ContactForm extends Component
+{
+    public $name;
+    public $email;
+
+    public function submit()
+    {
+        $this->validate([
+            'name' => 'required|min:6',
+            'email' => 'required|email',
+        ]);
+
+        Contact::create([
+            'name' => $this->name,
+            'email' => $this->email,
+        ]);
+    }
+
+    public function render()
+    {
+        return view('livewire.contact-form');
+    }
+}
+```
+
+Normally you would use a `wire:model` attribute to bind a component property with a form element. By using the `@wire` directive, this package will automatically use the `wire:model` attribute instead of the `name` attribute.
+
+```blade
+<x-form wire:submit.prevent="submit">
+    @wire
+        <x-form-input name="name" />
+        <x-form-input name="email" />
+    @endwire
+
+    <x-form-submit>Save Contact</x-form-submit>
+</form>
+```
+
 ### Select elements
 
 Besides the `name` attribute, the `select` element has a required `options` attribute, which should be a simple *key-value* array.

composer.json

@@ -27,9 +27,10 @@
     ],
     "require": {
         "php": "^7.4",
-        "illuminate/support": "^7.4"
+        "illuminate/support": "^7.22.4"
     },
     "require-dev": {
+        "livewire/livewire": "^1.3.2",
         "orchestra/testbench-browser-kit": "^5.1",
         "phpunit/phpunit": "^8.5",
         "spatie/laravel-translatable": "^4.4"

resources/views/bootstrap-4/form-checkbox.blade.php

@@ -1,9 +1,15 @@
 <div class="form-check">
     <input {!! $attributes->merge(['class' => 'form-check-input ' . ($hasError($name) ? 'is-invalid' : '')]) !!}
         type="checkbox"
-        name="{{ $name }}"
         value="{{ $value }}"
 
+        @if($isWired())
+            wire:model="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
+
         @if($checked)
             checked="checked"
         @endif

resources/views/bootstrap-4/form-input.blade.php

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="@if($type === 'hidden') d-none @else form-group @endif">
     <x-form-label :label="$label" :for="$name" />
 
     <div class="input-group">
@@ -11,9 +11,14 @@
         @endisset
 
         <input {!! $attributes->merge(['class' => 'form-control ' . ($hasError($name) ? 'is-invalid' : '')]) !!}
-            name="{{ $name }}"
             type="{{ $type }}"
-            value="{{ $value }}"
+
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+                value="{{ $value }}"
+            @endif
         />
 
         @isset($append)

resources/views/bootstrap-4/form-radio.blade.php

@@ -1,7 +1,13 @@
 <div class="form-check">
     <input {!! $attributes->merge(['class' => 'form-check-input ' . ($hasError($name) ? 'is-invalid' : '')]) !!}
         type="radio"
-        name="{{ $name }}"
+
+        @if($isWired())
+            wire:model="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
         value="{{ $value }}"
 
         @if($checked)

resources/views/bootstrap-4/form-select.blade.php

@@ -1,7 +1,13 @@
 <div class="form-group">
     <x-form-label :label="$label" :for="$name" />
 
-    <select name="{{ $name }}"
+    <select
+        @if($isWired())
+            wire:model="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
         @if($multiple)
             multiple
         @endif

resources/views/bootstrap-4/form-textarea.blade.php

@@ -1,8 +1,15 @@
 <div class="form-group">
     <x-form-label :label="$label" :for="$name" />
 
-    <textarea {!! $attributes->merge(['class' => 'form-control ' . ($hasError($name) ? 'is-invalid' : '')]) !!}
-        name="{{ $name }}">{!! $value !!}</textarea>
+    <textarea
+        @if($isWired())
+            wire:model="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
+        {!! $attributes->merge(['class' => 'form-control ' . ($hasError($name) ? 'is-invalid' : '')]) !!}
+    >@unless($isWired()){!! $value !!}@endunless</textarea>
 
     {!! $help ?? null !!}
 

resources/views/tailwind/form-checkbox.blade.php

@@ -1,10 +1,15 @@
-<div class="flex">
+<div class="flex flex-col">
     <label class="flex items-center">
         <input {!! $attributes->merge(['class' => 'form-checkbox']) !!}
             type="checkbox"
-            name="{{ $name }}"
             value="{{ $value }}"
 
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
             @if($checked)
                 checked="checked"
             @endif

resources/views/tailwind/form-input.blade.php

@@ -1,14 +1,18 @@
-<div class="mt-4">
+<div class="@if($type === 'hidden') hidden @else mt-4 @endif">
     <label class="block">
         <x-form-label :label="$label" />
 
         <input {!! $attributes->merge([
             'class' => 'form-input block w-full ' . ($label ? 'mt-1' : '')
         ]) !!}
-            name="{{ $name }}"
-            type="{{ $type }}"
-            value="{{ $value }}"
-        />
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+                value="{{ $value }}"
+            @endif
+
+            type="{{ $type }}" />
     </label>
 
     @if($hasErrorAndShow($name))

resources/views/tailwind/form-radio.blade.php

@@ -2,7 +2,13 @@
     <label class="inline-flex items-center">
         <input {!! $attributes->merge(['class' => 'form-radio']) !!}
             type="radio"
-            name="{{ $name }}"
+
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
             value="{{ $value }}"
 
             @if($checked)

resources/views/tailwind/form-select.blade.php

@@ -2,7 +2,13 @@
     <label class="block">
         <x-form-label :label="$label" />
 
-        <select name="{{ $name }}"
+        <select
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
             @if($multiple)
                 multiple
             @endif

resources/views/tailwind/form-textarea.blade.php

@@ -2,10 +2,15 @@
     <label class="block">
         <x-form-label :label="$label" />
 
-        <textarea {!! $attributes->merge([
-            'class' => 'form-textarea block w-full ' . ($label ? 'mt-1' : '')
-        ]) !!}
-            name="{{ $name }}">{!! $value !!}</textarea>
+        <textarea
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
+            {!! $attributes->merge(['class' => 'form-textarea block w-full ' . ($label ? 'mt-1' : '')]) !!}
+        >@unless($isWired()){!! $value !!}@endunless</textarea>
     </label>
 
     @if($hasErrorAndShow($name))

src/Components/Component.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Support\Str;
 use Illuminate\View\Component as BaseComponent;
+use ProtoneMedia\LaravelFormComponents\FormDataBinder;
 
 abstract class Component extends BaseComponent
 {
@@ -20,4 +21,24 @@ public function render()
 
         return str_replace('{framework}', $framework, $config['view']);
     }
+
+    /**
+     * Returns a boolean wether the form is wired to a Livewire component.
+     *
+     * @return boolean
+     */
+    public function isWired(): bool
+    {
+        return app(FormDataBinder::class)->isWired();
+    }
+
+    /**
+     * The inversion of 'isWired()'.
+     *
+     * @return boolean
+     */
+    public function isNotWired(): bool
+    {
+        return !$this->isWired();
+    }
 }

src/Components/Form.php

@@ -2,6 +2,7 @@
 
 namespace ProtoneMedia\LaravelFormComponents\Components;
 
+use Illuminate\Support\Facades\View;
 use Illuminate\Support\ViewErrorBag;
 
 class Form extends Component
@@ -29,7 +30,7 @@ public function __construct(string $method = 'POST')
      */
     public function hasError($bag = 'default'): bool
     {
-        $errors = request()->session()->get('errors') ?: new ViewErrorBag;
+        $errors = View::shared('errors', fn () => request()->session()->get('errors', new ViewErrorBag));
 
         return $errors->getBag($bag)->isNotEmpty();
     }

src/Components/FormCheckbox.php

@@ -34,7 +34,7 @@ public function __construct(
             $this->checked = true;
         }
 
-        if (!session()->hasOldInput()) {
+        if (!session()->hasOldInput() && $this->isNotWired()) {
             $boundValue = $this->getBoundValue($bind, $name);
 
             $this->checked = is_null($boundValue) ? $default : $boundValue;

src/Components/FormSelect.php

@@ -31,16 +31,22 @@ public function __construct(
         $this->label   = $label;
         $this->options = $options;
 
-        $default = $this->getBoundValue($bind, $name) ?: $default;
+        if ($this->isNotWired()) {
+            $default = $this->getBoundValue($bind, $name) ?: $default;
 
-        $this->selectedKey = old($name, $default);
+            $this->selectedKey = old($name, $default);
+        }
 
         $this->multiple   = $multiple;
         $this->showErrors = $showErrors;
     }
 
     public function isSelected($key): bool
     {
+        if ($this->isWired()) {
+            return false;
+        }
+
         if ($this->selectedKey === $key) {
             return true;
         }

src/Components/HandlesDefaultAndOldValue.php

@@ -12,6 +12,10 @@ private function setValue(
         $default = null,
         $language = null
     ) {
+        if ($this->isWired()) {
+            return;
+        }
+
         if (!$language) {
             $default = $this->getBoundValue($bind, $name) ?: $default;
 

src/Components/HandlesValidationErrors.php

@@ -2,6 +2,7 @@
 
 namespace ProtoneMedia\LaravelFormComponents\Components;
 
+use Illuminate\Support\Facades\View;
 use Illuminate\Support\ViewErrorBag;
 
 trait HandlesValidationErrors
@@ -32,7 +33,7 @@ public function hasErrorAndShow(string $name, string $bag = 'default'): bool
      */
     public function hasError(string $name, string $bag = 'default'): bool
     {
-        $errors = request()->session()->get('errors') ?: new ViewErrorBag;
+        $errors = View::shared('errors', fn () => request()->session()->get('errors', new ViewErrorBag));
 
         $name = str_replace(['[', ']'], ['.', ''], $name);