5.0.0

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [5.0.0](https://github.com/Okipa/laravel-bootstrap-components/compare/4.0.0...5.0.0)
+
+2020-12-02
+
+* Added Livewire support
+* Added named validation bag support
+* Templates updated
+* Methods signature update
+* Components default config update
+
+:point_right: [See the upgrade guide](/docs/upgrade-guides/from-v4-to-v5.md)
+
 ## [4.0.0](https://github.com/Okipa/laravel-bootstrap-components/compare/3.0.3...4.0.0)
 
 2020-11-14
@@ -40,6 +52,8 @@
 * Dropped Laravel 5.8 and 6.0 support
 * Dropped PHP 7.2 and 7.3 support
 
+:point_right: [See the upgrade guide](/docs/upgrade-guides/from-v2-to-v3.md)
+
 ## [2.2.3](https://github.com/Okipa/laravel-bootstrap-components/compare/2.2.2...2.2.3)
 
 2020-07-16

README.md

@@ -17,7 +17,7 @@
     </a>
 </p>
 
-Save time and take advantage of an extended set of ready-to-use and fully customizable bootstrap form components.
+Save time and take advantage of a set of dynamical, ready-to-use and fully customizable bootstrap form components.
 
 Found this package helpful? Please consider supporting my work!
 
@@ -35,7 +35,9 @@ Found this package helpful? Please consider supporting my work!
 
 ## Upgrade guide
 
+* [From V4 to V5](/docs/upgrade-guides/from-v4-to-v5.md)
 * [From V3 to V4](/docs/upgrade-guides/from-v3-to-v4.md)
+* [From V2 to V3](/docs/upgrade-guides/from-v2-to-v3.md)
 * [From V1 to V2](/docs/upgrade-guides/from-v1-to-v2.md)
 
 ## Usage
@@ -82,10 +84,10 @@ And get this HTML generated for you:
 Call this component in your view:
 
 ```blade
-{{-- helper style --}}
+{{-- Helper style --}}
 {{ inputText()->name('title')->localized(['fr', 'en']) }}
 
-{{-- facade style --}}
+{{-- Facade style --}}
 {{ InputText::name('title')->localized(['fr', 'en']) }}
 ```
 

composer.json

@@ -31,7 +31,7 @@
     "require-dev": {
         "nunomaduro/larastan": "^0.6",
         "orchestra/testbench": "^5.0||^6.0",
-        "phpmd/phpmd": "^2.8",
+        "phpmd/phpmd": "^2.9",
         "squizlabs/php_codesniffer": "^3.5"
     },
     "autoload": {

docs/api/components.md

@@ -2,7 +2,7 @@
 
 * [Form components](#form-components)
   * [Input text](#input-text)
-  * [Input e-mail](#input-e-mail)
+  * [Input email](#input-email)
   * [Input password](#input-password)
   * [Input URL](#input-url)
   * [Input tel](#input-tel)
@@ -49,7 +49,7 @@
 * Display success : `config('bootstrap-components.form.formValidation.displaySuccess')`
 * Display failure : `config('bootstrap-components.form.formValidation.displayFailure')`
 
-## Input e-mail
+## Input email
 
 **Type :** [FormAbstract](./types.md#formabstract)
 
@@ -61,6 +61,7 @@
 
 * Prepend : `<i class="fas fa-at"></i>`
 * Label positioned above : `config('bootstrap-components.form.labelPositionedAbove')`
+* Component HTML attributes: `autocomplete="on"`
 * Container classes : : `form-group`
 * Display success : `config('bootstrap-components.form.formValidation.displaySuccess')`
 * Display failure : `config('bootstrap-components.form.formValidation.displayFailure')`
@@ -77,6 +78,7 @@
 
 * Prepend : `<i class="fas fa-user-secret"></i>`
 * Label positioned above : `config('bootstrap-components.form.labelPositionedAbove')`
+* Component HTML attributes: `autocomplete="on"`
 * Container classes : : `form-group`
 * Display success : `config('bootstrap-components.form.formValidation.displaySuccess')`
 * Display failure : `config('bootstrap-components.form.formValidation.displayFailure')`
@@ -109,6 +111,7 @@
 
 * Prepend : `<i class="fas fa-phone"></i>`
 * Label positioned above : `config('bootstrap-components.form.labelPositionedAbove')`
+* Component HTML attributes: `autocomplete="on"`
 * Container classes : : `form-group`
 * Display success : `config('bootstrap-components.form.formValidation.displaySuccess')`
 * Display failure : `config('bootstrap-components.form.formValidation.displayFailure')`

docs/api/types.md

@@ -21,20 +21,20 @@
 |---|---|---|
 | containerId(string $containerId): self | No | Set the component container id. |
 | componentId(string $componentId): self | No | Set the component id. |
-| containerClasses(array $containerClasses): self | No | Set the component container classes. |
-| componentClasses(array $componentClasses): self | No | Set the component classes. |
-| containerHtmlAttributes(array $containerHtmlAttributes): self | No | Set the component container HTML attributes. |
-| componentHtmlAttributes(array $componentHtmlAttributes): self | No | Set the component HTML attributes. |
+| componentClasses(array $componentClasses): self | No | The given HTML classes will replace the component default ones. You can activate the merge mode in order to add the given classes to the default ones by setting the second argument to `true`. |
+| containerClasses(array $containerClasses): self | No | The given HTML classes will replace the component default ones. You can activate the merge mode in order to add the given classes to the default ones by setting the second argument to `true`. |
+| componentHtmlAttributes(array $componentHtmlAttributes): self | No | The given HTML attributes will replace the component default ones. You can activate the merge mode in order to add the given attributes to the default ones by setting the second argument to `true`. |
+| containerHtmlAttributes(array $containerHtmlAttributes): self | No | The given HTML attributes will replace the component default ones. You can activate the merge mode in order to add the given attributes to the default ones by setting the second argument to `true`. |
 
 **Usage**
 
 ```php
 <ComponentAbstract>
     ->containerId('container-id')
-    ->componentId('component-id')
     ->containerClasses(['container', 'classes'])
-    ->componentClasses(['component', 'classes'])
     ->containerHtmlAttributes(['container', 'html', 'attributes'])
+    ->componentId('component-id')
+    ->componentClasses(['component', 'classes'])
     ->componentHtmlAttributes(['component', 'html', 'attributes']);
 ```
 
@@ -57,6 +57,7 @@
 | caption(?string $caption): self | No | Set the component caption. |
 | displaySuccess(?bool $displaySuccess = true): self | No | Set the component input validation success display status. |
 | displayFailure(?bool $displayFailure = true): self | No | Set the component input validation failure display status. |
+| errorBag(string $errorBag): self | No | Define the name of the error bag that will contain the error related to this input. By default, the Laravel error bag is `default`. |
 
 **Usage**
 
@@ -70,15 +71,16 @@
     ->append('<i class="fas fa-hand-pointer"></i>')
     ->label('Email')
     ->labelPositionedAbove()
-    ->placeholder('Set your e-mail')
-    ->caption('Set your caption here.')
+    ->placeholder('Set your email')
+    ->caption('Your email will tested against to RFC, DNS and spoof checks.')
     ->displaySuccess(false)
-    ->displayFailure(false);
+    ->displayFailure(false)
+    ->errorBag('profileUpdate');
 ```
 
 **Components**
 
-* [Input e-mail](./components.md#input-e-mail)
+* [Input email](./components.md#input-email)
 * [Input password](./components.md#input-password)
 * [Input URL](./components.md#input-url)
 * [Input tel](./components.md#input-tel)
@@ -120,15 +122,9 @@
 <MultilingualAbstract>
     // inherits FormAbstract methods
     ->locales(['fr', 'en'])
-    ->value(function(string $locale){
-        return $name[$locale];
-    });
-    ->prepend(function(string $locale){
-        return 'prepend-' . $locale;
-    })
-    ->append(function(string $locale){
-        return 'append-' . $locale;
-    }) 
+    ->value(fn(string $locale) => $name[$locale]);
+    ->prepend(fn(string $locale) => 'prepend-' . $locale)
+    ->append(fn(string $locale) => 'append-' . $locale) 
 ```
 
 **Components**
@@ -176,9 +172,7 @@
 ```php
 <UploadableAbstract>
     // inherits FormAbstract methods
-    ->uploadedFile(function(){
-        return '<div>Some HTML</div>';
-    })
+    ->uploadedFile(fn() => '<div>Some HTML</div>')
     ->showRemoveCheckbox(true, 'Remove this file');
 ```
 
@@ -242,9 +236,7 @@
     ]), 'id', 'title')
     ->selected('id', 1)
     // or ->selected('id', [1]) in multiple mode
-    ->disabled(function(array $option){
-        return ! $option['active'];
-    })
+    ->disabled(fn(array $option) => ! $option['active'])
     ->multiple();
 ```
 

docs/upgrade-guides/from-v2-to-v3.md

@@ -0,0 +1,19 @@
+# Upgrade from v2 to v3
+
+Follow the steps below to upgrade the package.
+
+## Laravel and PHP old version support drop
+
+Whereas Laravel 8 is now supported by this package, support for any version before Laravel 7 has been dropped.
+
+Support for any version before PHP 7.4 has also been dropped.
+
+As so, you should upgrade your Laravel and PHP versions in order upgrade to V3.
+
+## See all changes
+
+See all change with the [comparison tool](https://github.com/Okipa/laravel-bootstrap-components/compare/2.2.3...3.0.0).
+
+## Undocumented changes
+
+If you see any forgotten and undocumented change, please submit a PR to add them to this upgrade guide.

docs/upgrade-guides/from-v4-to-v5.md

@@ -0,0 +1,67 @@
+# Upgrade from v4 to v5
+
+Follow the steps below to upgrade the package.
+
+## Livewire support
+
+There was an issue preventing the error message and the validation class to be displayed on form components when they were used into a livewire component.
+
+This was related to the fact the session was used to detect errors, which can't work with livewire as the `$errors` variable is passed in the blade view on re-rendering.
+
+This has been fixed and the error message + the validation class are now generated from the `$errors` variable given in the view instead of the session.
+
+## Templates updated
+
+Related to the previous point (Livewire support added), the view templates provided with this package have been updated.
+
+If you have published the views in order to make some customizations, you will have to [re-publish them](../../README.md#templates) and to redo your customizations.
+
+## Named validation bag support
+
+All form components can now correctly display validation class and error message when using a named validation bag.
+
+If you validate an email this way:
+
+```php
+Validator::make(
+    ['email' => 'spoof@email.test']
+    ['email' => ['required', 'string', 'email:rfc,dns,spoof']],
+])->validateWithBag('profileUpdate');
+```
+
+The `is-invalid` validation class and the input related error message will correctly will be displayed when the form will be submitted with:
+
+```blade
+{{ inputEmail()->name('email')->errorBag('profileUpdate') }}
+```
+
+## Methods signature update
+
+The following methods have gained the ability to merge given HTML classes or HTML attributes to the component default ones instead of replacing them.
+
+To use this new behaviour, you'll just have to set the second `$mergeMode` boolean attribute to `true`.
+
+* All components: `componentClasses`
+* All components: `containerClasses`
+* All components: `componentHtmlAttributes`
+* All components: `containerHtmlAttributes`
+* Image component: `linkClasses`
+* Image component: `linkHtmlAttributes`
+
+For example, using `inputText()->name('name')->componentClasses(['merged', 'classes'], true)` will append the `merged classes` classes to the ones defined by default on the input text component.
+
+## Components default config update
+
+The `autocomplete="on"` HTML attribute has been added in the default configuration of the following components, in order to improve the default behavior (see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete):
+
+* Input email component
+* Input password component
+* Input url component
+
+## See all changes
+
+See all change with the [comparison tool](https://github.com/Okipa/laravel-bootstrap-components/compare/4.0.0...5.0.0).
+
+## Undocumented changes
+
+If you see any forgotten and undocumented change, please submit a PR to add them to this upgrade guide.

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

@@ -1,5 +1,5 @@
 <div{{ html_attributes($containerId ? ['id' => $containerId] : null) }}{{ html_classes('component-container', 'custom-control', 'custom-' . $type, $containerClasses) }}{{ html_attributes($containerHtmlAttributes) }}>
-    <input id="{{ $componentId }}"{{ html_classes('component', 'custom-control-input', $componentClasses, $validationClass) }} type="checkbox" name="{{ $name }}"{{ html_attributes($componentHtmlAttributes) }}>
+    <input id="{{ $componentId }}"{{ html_classes('component', 'custom-control-input', $componentClasses, $validationClass($errors ?? null)) }} type="checkbox" name="{{ $name }}"{{ html_attributes($componentHtmlAttributes) }}>
     <label class="custom-control-label" for="{{ $componentId }}">@if(! empty($prepend))<span class="label-prepend">{!! $prepend !!}</span> @endif{{ $label }}@if(! empty($append))<span class="label-append">{!! $append !!}</span> @endif</label>
     @include('bootstrap-components::bootstrap-components.partials.validation-feedback')
     @include('bootstrap-components::bootstrap-components.partials.caption')

resources/views/bootstrap-components/form/file.blade.php

@@ -13,8 +13,8 @@
     @endif
         @include('bootstrap-components::bootstrap-components.partials.prepend')
         <div class="custom-file">
-            <input id="{{ $componentId }}"{{ html_classes('component', 'form-control', 'custom-file-input', $componentClasses, $validationClass) }} type="{{ $type }}" name="{{ $name }}"{{ html_attributes($componentHtmlAttributes) }}>
-            @if(($value = old($name, $value)) || $placeholder)
+            <input id="{{ $componentId }}"{{ html_classes('component', 'form-control', 'custom-file-input', $componentClasses, $validationClass($errors ?? null)) }} type="{{ $type }}" name="{{ $name }}"{{ html_attributes($componentHtmlAttributes) }}>
+            @if($placeholder || ($value = old($name, $value)))
                 <label class="custom-file-label" for="{{ $componentId }}">@if(isset($value) && $value !== ''){{ $value }}@else{{ $placeholder }}@endempty</label>
             @endif
         </div>

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

@@ -1,19 +1,19 @@
 <div{{ html_attributes($containerId ? ['id' => $containerId] : null) }}{{ html_classes('component-container', $containerClasses) }}{{ html_attributes($containerHtmlAttributes) }}>
-@if($labelPositionedAbove)
-    @include('bootstrap-components::bootstrap-components.partials.label')
-@endif
-@if(! empty($prepend) || ! empty($append))
-    <div class="input-group">
-@endif
+    @if($labelPositionedAbove)
+        @include('bootstrap-components::bootstrap-components.partials.label')
+    @endif
+    @if(! empty($prepend) || ! empty($append))
+        <div class="input-group">
+    @endif
         @include('bootstrap-components::bootstrap-components.partials.prepend')
-        <input id="{{ $componentId }}"{{ html_classes('component', 'form-control', $componentClasses, $validationClass) }} type="{{ $type }}" name="{{ $name }}" value="{{ old($name, $value) }}"{{ html_attributes($placeholder ? ['placeholder' => $placeholder] : null, $componentHtmlAttributes) }}>
+        <input id="{{ $componentId }}"{{ html_classes('component', 'form-control', $componentClasses, $validationClass($errors ?? null, $locale ?? null)) }} type="{{ $type }}" name="{{ $name }}" value="{{ old($name, $value) }}"{{ html_attributes($placeholder ? ['placeholder' => $placeholder] : null, $componentHtmlAttributes) }}>
         @include('bootstrap-components::bootstrap-components.partials.append')
         @include('bootstrap-components::bootstrap-components.partials.validation-feedback')
-@if(! empty($prepend) || ! empty($append))
-    </div>
-@endif
-@unless($labelPositionedAbove)
-    @include('bootstrap-components::bootstrap-components.partials.label')
-@endunless
-@include('bootstrap-components::bootstrap-components.partials.caption')
+    @if(! empty($prepend) || ! empty($append))
+        </div>
+    @endif
+    @unless($labelPositionedAbove)
+        @include('bootstrap-components::bootstrap-components.partials.label')
+    @endunless
+    @include('bootstrap-components::bootstrap-components.partials.caption')
 </div>

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

@@ -1,5 +1,5 @@
 <div{{ html_attributes($containerId ? ['id' => $containerId] : null) }}{{ html_classes('component-container', 'custom-control', 'custom-radio', $containerClasses) }}{{ html_attributes($containerHtmlAttributes) }}>
-    <input id="{{ $componentId }}"{{ html_classes('component', 'custom-control-input', $componentClasses, $validationClass) }} type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"{{ html_attributes($componentHtmlAttributes) }}>
+    <input id="{{ $componentId }}"{{ html_classes('component', 'custom-control-input', $componentClasses, $validationClass($errors ?? null)) }} type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"{{ html_attributes($componentHtmlAttributes) }}>
     <label class="custom-control-label" for="{{ $componentId }}">@if(! empty($prepend))<span class="label-prepend">{!! $prepend !!}</span> @endif{{ $label }}@if(! empty($append))<span class="label-append">{!! $append !!}</span> @endif</label>
     @include('bootstrap-components::bootstrap-components.partials.validation-feedback')
     @include('bootstrap-components::bootstrap-components.partials.caption')

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

@@ -6,7 +6,7 @@
         <div class="input-group">
     @endif
         @include('bootstrap-components::bootstrap-components.partials.prepend')
-        <select id="{{ $componentId }}"{{ html_classes('component', 'custom-select', $componentClasses, $validationClass) }} name="{{ $name . ($multiple ? '[]' : '') }}"{{ html_attributes($multiple ? 'multiple' : null, $componentHtmlAttributes) }}>
+        <select id="{{ $componentId }}"{{ html_classes('component', 'custom-select', $componentClasses, $validationClass($errors ?? null)) }} name="{{ $name . ($multiple ? '[]' : '') }}"{{ html_attributes($multiple ? 'multiple' : null, $componentHtmlAttributes) }}>
             @if($placeholder)
                 <option value=""{{ html_attributes(count(array_filter(Arr::pluck($options, 'selected'))) ? null : ['selected' => 'selected']) }}>{{ $placeholder }}</option>
             @endif

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

@@ -6,7 +6,7 @@
         <div class="input-group">
     @endif
         @include('bootstrap-components::bootstrap-components.partials.prepend')
-        <textarea id="{{ $componentId }}"{{ html_classes('component', 'form-control', $componentClasses, $validationClass) }} name="{{ $name }}"{{ html_attributes($placeholder ? ['placeholder' => $placeholder] : null, $componentHtmlAttributes) }}>{{ old($name, $value) }}</textarea>
+        <textarea id="{{ $componentId }}"{{ html_classes('component', 'form-control', $componentClasses, $validationClass($errors ?? null, $locale ?? null)) }} name="{{ $name }}"{{ html_attributes($placeholder ? ['placeholder' => $placeholder] : null, $componentHtmlAttributes) }}>{{ old($name, $value) }}</textarea>
         @include('bootstrap-components::bootstrap-components.partials.append')
         @include('bootstrap-components::bootstrap-components.partials.validation-feedback')
     @if(! empty($prepend) || ! empty($append))

resources/views/bootstrap-components/partials/validation-feedback.blade.php

@@ -1,11 +1,9 @@
-@isset($errors)
-    @if($errorMessage && $displayFailure)
-        <div class="invalid-feedback d-block">
-            {!! $errorMessage !!}
-        </div>
-    @elseif($displaySuccess)
-        <div class="valid-feedback d-block">
-            @lang('Field correctly filled.')
-        </div>
-    @endif
-@endisset
+@if($errorMessage = $errorMessage($errors ?? null, $locale ?? null))
+    <div class="invalid-feedback d-block">
+        {!! $errorMessage !!}
+    </div>
+@elseif($successMessage = $successMessage())
+    <div class="valid-feedback d-block">
+        {!! $successMessage !!}
+    </div>
+@endif