Support for Bootstrap v5 (#55)

Author: DionPotkamp

.github/workflows/run-tests.yml

@@ -10,7 +10,7 @@ jobs:
             matrix:
                 php: [8.0, 7.4]
                 laravel: [8.*, 7.*]
-                framework: [tailwind, tailwind-2, bootstrap-4]
+                framework: [tailwind, tailwind-2, bootstrap-4, bootstrap-5]
                 dependency-version: [prefer-lowest, prefer-stable]
                 include:
                     -   laravel: 8.*

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 3.0.0 - 2021-09-08
+
+- Support for Bootstrap 5
+
 ## 2.5.4 - 2020-02-15
 
 - Bugfix for old nested data

README.md

@@ -6,9 +6,9 @@
 [![Total Downloads](https://img.shields.io/packagist/dt/protonemedia/laravel-form-components.svg?style=flat-square)](https://packagist.org/packages/protonemedia/laravel-form-components)
 [![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen)](https://plant.treeware.earth/protonemedia/laravel-form-components)
 
-A set of Blade components to rapidly build forms with [Tailwind CSS v1](https://tailwindcss-custom-forms.netlify.app), [Tailwind CSS v2](https://tailwindcss-forms.vercel.app) and [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/). Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!
+A set of Blade components to rapidly build forms with [Tailwind CSS v1](https://tailwindcss-custom-forms.netlify.app), [Tailwind CSS v2](https://tailwindcss-forms.vercel.app), [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) and [Bootstrap 5 Forms](https://getbootstrap.com/docs/5.1/forms/overview/). Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!
 
-#### ... 👀 There's a Pro version of this package in development: check out [formcomponents.pro](https://formcomponents.pro)!
+Looking for Inertia/Vue.js support? Check out [formcomponents.pro](https://formcomponents.pro)!
 
 ### 📺 Want to see this package in action? Join the live stream on November 19 at 14:00 CET: [https://youtu.be/7eNZS4U7xyM](https://youtu.be/7eNZS4U7xyM)
 
@@ -17,7 +17,8 @@ A set of Blade components to rapidly build forms with [Tailwind CSS v1](https://
 * Components for input, textarea, select, multi-select, checkbox and radio elements.
 * Support for Tailwind v1 with [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app).
 * Support for Tailwind v2 with [Tailwind Forms](https://tailwindcss-forms.vercel.app/).
-* Support for [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/forms/).
+* Support for [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.6/components/forms/).
+* Support for [Bootstrap 5 Forms](https://getbootstrap.com/docs/5.1/forms/overview/).
 * 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 (model binding).
 * Support for [Laravel Livewire](https://laravel-livewire.com) v2.
@@ -75,7 +76,7 @@ If you're using Tailwind, make sure the right plugin ([v1](https://github.com/ta
 </x-form>
 ```
 
-<img src="https://github.com/pascalbaljetmedia/laravel-form-components/blob/master/quick-example-form.png?raw=true" width="450" />
+<img src="https://github.com/protonemedia/laravel-form-components/blob/master/quick-example-form.png?raw=true" width="450"  alt="Quick example form"/>
 
 ## Preface
 
@@ -130,7 +131,7 @@ You can also choose to use a `placeholder` instead of a label, and of course you
 <x-form-input type="email" name="current_email" placeholder="Current email address" />
 ```
 
-By default every element shows validation errors but you can hide them if you want.
+By default, every element shows validation errors, but you can hide them if you want.
 
 ```blade
 <x-form-textarea name="description" :show-errors="false" />
@@ -406,29 +407,31 @@ By the default, the errors messages are positioned under the element. To show th
 
 ### Submit button
 
-The label defaults to *Submit* but you can use the slot to provide your own content.
+The label defaults to *Submit*, but you can use the slot to provide your own content.
 
 ```blade
 <x-form-submit>
     <span class="text-green-500">Send</span>
 </x-form-submit>
 ```
 
-### Bootstrap 4
+### Bootstrap
 
-You can switch to [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) by updating the `framework` setting in the `form-components.php` configuration file.
+You can switch to [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) or [Bootstrap 5](https://getbootstrap.com/docs/5.0/forms/overview/) by updating the `framework` setting in the `form-components.php` configuration file.
 
 ```php
 return [
-    'framework' => 'bootstrap-4',
+    'framework' => 'bootstrap-5',
 ];
 ```
 
-There is a little bit of styling added to the `form.blade.php` view to add support for inline form groups. If you want to change it or remove it, [publish the assets](#customize-the-blade-views) and update the view file.
+There is a little of styling added to the `form.blade.php` view to add support for inline form groups. If you want to change it or remove it, [publish the assets](#customize-the-blade-views) and update the view file.
+
+Bootstrap 5 changes a lot regarding forms. If you migrate from 4 to 5, make sure to read the migration logs about [forms](https://getbootstrap.com/docs/5.0/migration/#forms).
 
-#### Input prepend and append
+#### Input group / prepend and append
 
-In addition to the Tailwind features, there is also support for [input groups](https://getbootstrap.com/docs/4.1/components/forms/#auto-sizing). Use the `prepend` and `append` slots to provide the contents.
+In addition to the Tailwind features, with Bootstrap 4, there is also support for [input groups](https://getbootstrap.com/docs/4.6/components/forms/). Use the `prepend` and `append` slots to provide the contents.
 
 ```blade
 <x-form-input name="username" label="Username">
@@ -444,9 +447,28 @@ In addition to the Tailwind features, there is also support for [input groups](h
 </x-form-input>
 ```
 
+With Bootstrap 5, the [input groups](https://getbootstrap.com/docs/5.0/forms/input-group/) have been simplified. You can add as many items as you would like in any order you would like. Use the `form-input-group-text` component to add text or [checkboxes](https://getbootstrap.com/docs/5.0/forms/input-group/#checkboxes-and-radios).
+
+```blade
+<x-form-input-group label="Profile" >
+    <x-form-input name="name" placeholder="Name" id="name" />
+    <x-form-input-group-text>@</x-form-input-group-text>
+    <x-form-input name="nickname" placeholder="Nickname" id="nickname" />
+    <x-form-submit />
+</x-form-input-group>
+```
+
+#### Floating labels
+
+As of Bootstrap 5, you can add [floating labels](https://getbootstrap.com/docs/5.0/forms/floating-labels/) by adding the `floating` attribute to inputs, selects (excluding `multiple`), and textareas.
+
+```blade
+<x-form-input label="Floating Label" name="float_me" id="float_me" floating />
+```
+
 #### Help text
 
-You can add [block-level help text](https://getbootstrap.com/docs/4.1/components/forms/#help-text) to any element by using the `help` slot.
+You can add [block-level help text](https://getbootstrap.com/docs/4.6/components/forms/#help-text) to any element by using the `help` slot.
 
 ```blade
 <x-form-input name="username" label="Username">

composer.json

@@ -7,6 +7,9 @@
         "tailwindcss",
         "bootstrap",
         "bootstrap4",
+        "bootstrap5",
+        "bootstrap-4",
+        "bootstrap-5",
         "laravel",
         "form",
         "forms",

config/config.php

@@ -5,7 +5,7 @@
 return [
     'prefix' => '',
 
-    /** tailwind | tailwind-2 | bootstrap-4 */
+    /** tailwind | tailwind-2 | bootstrap-4 | bootstrap-5 */
     'framework' => 'tailwind',
 
     'components' => [
@@ -34,6 +34,16 @@
             'class' => Components\FormInput::class,
         ],
 
+        'form-input-group' => [
+            'view'  => 'form-components::{framework}.form-input-group',
+            'class' => Components\FormInputGroup::class,
+        ],
+
+        'form-input-group-text' => [
+            'view'  => 'form-components::{framework}.form-input-group-text',
+            'class' => Components\FormInputGroupText::class,
+        ],
+
         'form-label' => [
             'view'  => 'form-components::{framework}.form-label',
             'class' => Components\FormLabel::class,
@@ -44,6 +54,11 @@
             'class' => Components\FormRadio::class,
         ],
 
+        'form-range' => [
+            'view'  => 'form-components::{framework}.form-range',
+            'class' => Components\FormRange::class,
+        ],
+
         'form-select' => [
             'view'  => 'form-components::{framework}.form-select',
             'class' => Components\FormSelect::class,

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

@@ -0,0 +1,26 @@
+<div class="form-group">
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+
+    <input
+        {!! $attributes->merge(['class' => 'form-control-range' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+        type="range"
+
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+            value="{{ $value }}"
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+    />
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

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

@@ -0,0 +1,31 @@
+<div class="form-check @if(null !== $attributes->get('switch')) form-switch @endif @if(null !== $attributes->get('inline')) form-check-inline @endif">
+    <input
+        {!! $attributes->merge(['class' => 'form-check-input' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+        type="checkbox"
+
+        value="{{ $value }}"
+
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
+        @if($checked)
+            checked="checked"
+        @endif
+    />
+
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" class="form-check-label" />
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/bootstrap-5/form-errors.blade.php

@@ -0,0 +1,5 @@
+@error($name, $bag)
+    <div {!! $attributes->merge(['class' => 'invalid-feedback']) !!}>
+        {{ $message }}
+    </div>
+@enderror

resources/views/bootstrap-5/form-group.blade.php

@@ -0,0 +1,13 @@
+<div {!! $attributes->merge(['class' => ($hasError($name) ? 'is-invalid' : '')]) !!}>
+    <x-form-label :label="$label" />
+
+    <div class="@if($inline) d-flex flex-row flex-wrap inline-space @endif">
+        {!! $slot !!}
+    </div>
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" class="d-block" />
+    @endif
+</div>

resources/views/bootstrap-5/form-input-group-text.blade.php

@@ -0,0 +1 @@
+<span {!! $attributes->merge(['class' => 'input-group-text']) !!}>{!! $slot !!}</span>