Merge branch 'master' of https://github.com/protonemedia/laravel-form-components

Author: pascalbaljet

.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,26 @@
 
 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
+
+## 2.5.3 - 2020-02-11
+
+- Bugfix for setting radio elements as checked/default
+
+## 2.5.2 - 2020-01-04
+
+- Generate ID by name *and* value (checkbox and radio elements only)
+
+## 2.5.1 - 2020-12-22
+
+- Use the `name` attribute to auto-generate an ID (if not set)
+
 ## 2.5.0 - 2020-12-22
 
 - Support for `BelongsToMany`, `MorphMany`, and `MorphToMany` relationships (select element)

README.md

@@ -6,18 +6,21 @@
 [![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](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)!
+## Launcher 🚀
 
-### 📺 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)
+Hey! We've built a Docker-based deployment tool to launch apps and sites fully containerized. You can find all features and the roadmap on our [website](https://uselauncher.com), and we are on [Twitter](https://twitter.com/uselauncher) as well!
 
 ## Features
 
+### 📺 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)
+
 * 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.
@@ -28,6 +31,8 @@ A set of Blade components to rapidly build forms with [Tailwind CSS v1](https://
 * Components classes and Blade views fully customizable.
 * Support for prefixing the components.
 
+Looking for Inertia/Vue.js support? Check out [Form Components Pro](https://github.com/protonemedia/form-components-pro)
+
 ## Requirements
 
 * PHP 7.4 + Laravel 7.0 and higher
@@ -75,7 +80,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 +135,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" />
@@ -239,7 +244,7 @@ Normally you would use a `wire:model` attribute to bind a component property wit
     @endwire
 
     <x-form-submit>Save Contact</x-form-submit>
-</form>
+</x-form>
 ```
 
 Additionally, you can pass an optional modifier to the `@wire` directive. This feature was added in v2.4.0. If you're upgrading from a previous version *and* you published the Blade views, you should republish them *or* update them manually.
@@ -249,7 +254,7 @@ Additionally, you can pass an optional modifier to the `@wire` directive. This f
     @wire('debounce.500ms')
         <x-form-input name="email" />
     @endwire
-</form>
+</x-form>
 ```
 
 ### Select elements
@@ -321,8 +326,18 @@ You can group checkbox and radio elements on the same horizontal row by adding a
 
 ```blade
 <x-form-group name="notification_channel" label="How do you want to receive your notifications?" inline>
-    <x-form-checkbox name="notification_channel" value="mail" label="Mail" />
-    <x-form-checkbox name="notification_channel" value="slack" label="Slack" />
+    <x-form-radio name="notification_channel" value="mail" label="Mail" />
+    <x-form-radio name="notification_channel" value="slack" label="Slack" />
+</x-form-group>
+```
+
+When you're not using target binding, you can use the `default` attribute to mark a radio element as checked:
+
+
+```blade
+<x-form-group name="notification_channel" label="How do you want to receive your notifications?">
+    <x-form-radio name="notification_channel" value="mail" label="Mail" default />
+    <x-form-radio name="notification_channel" value="slack" label="Slack" />
 </x-form-group>
 ```
 
@@ -396,29 +411,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">
@@ -434,9 +451,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-checkbox.blade.php

@@ -5,10 +5,10 @@
 
         @if($isWired())
             wire:model{!! $wireModifier() !!}="{{ $name }}"
-        @else
-            name="{{ $name }}"
         @endif
 
+        name="{{ $name }}"
+
         @if($label && !$attributes->get('id'))
             id="{{ $id() }}"
         @endif

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

@@ -16,10 +16,11 @@
             @if($isWired())
                 wire:model{!! $wireModifier() !!}="{{ $name }}"
             @else
-                name="{{ $name }}"
                 value="{{ $value }}"
             @endif
 
+            name="{{ $name }}"
+
             @if($label && !$attributes->get('id'))
                 id="{{ $id() }}"
             @endif
@@ -32,11 +33,12 @@
                 </div>
             </div>
         @endisset
+
+        @if($hasErrorAndShow($name))
+            <x-form-errors :name="$name" />
+        @endif
     </div>
 
     {!! $help ?? null !!}
 
-    @if($hasErrorAndShow($name))
-        <x-form-errors :name="$name" />
-    @endif
 </div>

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

@@ -4,10 +4,9 @@
 
         @if($isWired())
             wire:model{!! $wireModifier() !!}="{{ $name }}"
-        @else
-            name="{{ $name }}"
         @endif
 
+        name="{{ $name }}"
         value="{{ $value }}"
 
         @if($checked)

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

@@ -0,0 +1,27 @@
+<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
+            value="{{ $value }}"
+        @endif
+
+        name="{{ $name }}"
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+    />
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

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

@@ -4,10 +4,10 @@
     <select
         @if($isWired())
             wire:model{!! $wireModifier() !!}="{{ $name }}"
-        @else
-            name="{{ $name }}"
         @endif
 
+        name="{{ $name }}"
+
         @if($multiple)
             multiple
         @endif