Feature/fil001 132 templates update

README.md

@@ -21,8 +21,21 @@ This is the contents of the published config file:
 ```php
 return [
     'defaults' => [
-        'inputClass' => '',
-        'divClass' => 'col-6',
+        'formClass' => 'd-flex flex-column gap-8',
+        'rowClass' => 'row gy-8',
+        'colClass' => 'col-md',
+        'divClass' => 'form-group has-validation',
+        'groupClass' => 'd-flex flex-column gap-8',
+        'inputClass' => 'form-control',
+        'inputSelectClass' => 'form-select',
+        'labelClass' => 'form-label',
+        'fileInputClass' => 'form-input-file',
+        'fileInputLabelClass' => 'form-label-file',
+        'checkInputClass' => 'form-check-input',
+        'checkLabelClass' => 'form-check-label',
+        'buttonClass' => 'btn btn--primary',
+        'buttonIcon' => null,
+        'textareaRows' => 5,
     ]
 ];
 ```

config/livewire-forms.php

@@ -2,7 +2,26 @@
 
 return [
     'defaults' => [
-        'inputClass' => '',
-        'divClass' => 'col-6',
+        'formClass' => 'd-flex flex-column',
+        'rowClass' => 'row',
+        'colClass' => 'col-md',
+        'divClass' => 'form-group has-validation',
+        'gapClass' => 'gap-8',
+        'gutterClass' => 'gy-8',
+        'groupClass' => 'd-flex flex-column',
+        'inputClass' => 'form-control',
+        'inputSelectClass' => 'form-select',
+        'labelClass' => 'form-label',
+        'fileInputClass' => 'form-input-file',
+        'fileInputLabelClass' => 'form-label-file',
+        'checkDivClass' => 'form-check',
+        'checkInputClass' => 'form-check-input',
+        'checkLabelClass' => 'form-check-label',
+        'checkGapClass' => 'gap-2',
+        'imageClass' => 'img-fluid',
+        'linkClass' => 'btn btn--link',
+        'buttonClass' => 'btn btn--primary',
+        'buttonIcon' => null,
+        'textareaRows' => 5,
     ]
 ];

resources/views/components/form.blade.php

@@ -1,4 +1,10 @@
-<form wire:submit.prevent="submit">
+<form
+    wire:submit.prevent="submit"
+    @class([
+        $field->formClass ?? config('livewire-forms.defaults.formClass'),
+        $field->gapClass ?? config('livewire-forms.defaults.gapClass')
+    ])
+>
     @foreach($form->fields as $field)
         {{ optional($field)->render() }}
     @endforeach

resources/views/fields/button.blade.php

@@ -1,11 +1,19 @@
-<div class="{{ $field->divClass ?? 'col-6' }}">
-    <input
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
+    <button
         @if ($field->action)
             wire:click.prevent="{{ $field->action }}"
         @endif
         type="submit"
         name="{{ $field->getName() }}"
-        value="{{ $field->getName() }}"
+        @class([$field->class ?? config('livewire-forms.defaults.buttonClass')])
         @if ($field->dusk) dusk={{ $field->dusk }} @endif
     >
+        {{ $field->getName() }}
+        @if(config('livewire-forms.defaults.buttonIcon'))
+            <x-dynamic-component component="{{ $field->buttonIcon ?? config('livewire-forms.defaults.buttonIcon') }}" />
+        @endif
+    </button>
 </div>

resources/views/fields/checkbox-group.blade.php

@@ -0,0 +1,45 @@
+<div
+    @class([
+      $field->divClass ?? config('livewire-forms.defaults.divClass'),
+      $field->colClass ?? config('livewire-forms.defaults.colClass')
+   ])
+>
+    @include('livewire-forms::fields.label')
+
+    <div @class([
+        'd-flex flex-column',
+        $field->checkGapClass ?? config('livewire-forms.defaults.checkGapClass')
+    ])>
+        @foreach ($field->options as $key => $value)
+            <div
+                @class([
+                    $field->checkDivClass ?? config('livewire-forms.defaults.checkDivClass'),
+                    'is-invalid' => $errors->first(($field->containsFile ? 'files.' : 'fields.') . $field->getName()),
+                ])
+            >
+                <input
+                    type="checkbox"
+                    @class([
+                        $field->class ?? config('livewire-forms.defaults.checkInputClass'),
+                        'is-invalid' => $errors->first(($field->containsFile ? 'files.' : 'fields.') . $field->getName()),
+                    ])
+                    id="{{ $field->getName() . '.' . $loop->index }}"
+                    name="{{ $field->getName() }}"
+                    wire:model.{{ $field->getDebounce() }}="fields.{{ $field->getName() }}.{{ $key }}"
+                >
+                <label
+                    @class([
+                        'select-none',
+                        $field->checkOptionLabelClass ?? config('livewire-forms.defaults.checkLabelClass'),
+                    ])
+                    for="{{ $field->getName() . '.' . $loop->index }}"
+                >
+                    {{ $value }}
+                </label>
+            </div>
+        @endforeach
+    </div>
+
+    @include('livewire-forms::fields.gdpr')
+    @include('livewire-forms::fields.error')
+</div>

resources/views/fields/checkbox.blade.php

@@ -1,14 +1,31 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
-    <input
-        @include('livewire-forms::fields.binding')
-        id="{{ $field->getName() }}"
-        type="checkbox"
-        class="{{ $field->class ?? config('livewire-forms.defaults.inputClass') }}"
-        name="{{ $field->getName() }}"
-        @if ($field->dusk) dusk={{ $field->dusk }} @endif
-    >
+<div
+    @class([
+      $field->divClass ?? config('livewire-forms.defaults.divClass'),
+      $field->colClass ?? config('livewire-forms.defaults.colClass')
+    ])
+>
+    <div @class([$field->checkDivClass ?? config('livewire-forms.defaults.checkDivClass')])>
+        <input
+            @include('livewire-forms::fields.binding')
+            id="{{ $field->getName() }}"
+            type="checkbox"
+            @class([
+                $field->class ?? config('livewire-forms.defaults.checkInputClass'),
+                'is-invalid' => $errors->has('fields.' . $field->getName()),
+            ])
+            name="{{ $field->getName() }}"
+            @if ($field->dusk) dusk={{ $field->dusk }} @endif
+        >
 
-    @include('livewire-forms::fields.label')
+        <label
+            @class([
+              $field->checkLabelClass ?? config('livewire-forms.defaults.checkLabelClass')
+            ])
+            for="{{ $field->getName() }}"
+        >
+            {!! $field->getLabel() !!}
+        </label>
+    </div>
 
     @include('livewire-forms::fields.gdpr')
 

resources/views/fields/date.blade.php

@@ -1,13 +1,18 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
     @include('livewire-forms::fields.label')
 
     <input
         @include('livewire-forms::fields.binding')
         id="{{ $field->getName() }}"
         type="date"
-        class="{{ $field->class }}"
+        @class([
+            $field->class ?? config('livewire-forms.defaults.inputClass'),
+            'is-invalid' => $errors->has('fields.' . $field->getName()),
+        ])
         name="{{ $field->getName() }}"
-        placeholder="{{ $field->getLabel() }}"
         @if($field->readOnly) disabled @endif
         value="{{ $field->getValue() }}"
         @if ($field->dusk) dusk={{ $field->dusk }} @endif

resources/views/fields/error.blade.php

@@ -1,3 +1,5 @@
 @error(($field->containsFile ? 'files.' : 'fields.') . $field->getName())
-    <span class="form-error">{{ $message }}</span>
+    <span class="invalid-feedback">
+        {{ $message }}
+    </span>
 @enderror

resources/views/fields/file.blade.php

@@ -1,9 +1,15 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
     @include('livewire-forms::fields.label')
 
     <input
         type="file"
-        class="{{ $field->class }}"
+        @class([
+            $field->class ?? config('livewire-forms.defaults.inputClass'),
+            'is-invalid' => $errors->has('fields.' . $field->getName()),
+        ])
         id="{{ $field->getName() }}"
         name="{{ $field->getName() }}"
         placeholder="{{ $field->getLabel() }}"

resources/views/fields/group.blade.php

@@ -1,3 +1,16 @@
-@foreach ($field->getNestedFields() as $_field)
-    {{ $_field->render() }}
-@endforeach
+<fieldset
+    @class([
+      $field->groupClass ?? config('livewire-forms.defaults.groupClass'),
+      $field->colClass ?? config('livewire-forms.defaults.colClass'),
+      $field->gapClass ?? config('livewire-forms.defaults.gapClass')
+    ])
+>
+    @if($field->legendTitle)
+        <legend>{{ $field->legendTitle }}</legend>
+    @endif
+
+    @foreach ($field->getNestedFields() as $_field)
+        {{ $_field->render() }}
+    @endforeach
+</fieldset>
+i

resources/views/fields/image.blade.php

@@ -1,9 +1,12 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
     @include('livewire-forms::fields.label')
 
     @if($field->getValue())
         <img
-            class="{{ $field->class ?? 'img-fluid' }}"
+            class="{{ $field->class ?? config('livewire-forms.defaults.imageClass') }}"
             src="{{ isset($files_[$field->getName()]) ? $files_[$field->getName()]->temporaryUrl() : $field->getValue() }}"
             alt="{{ $field->altText ?? optional($field->getValue())->name  }}"
             id="{{ $field->getName() }}"

resources/views/fields/label.blade.php

@@ -1,6 +1,9 @@
 <label
     for="{{ $field->getName() }}"
-    class="{{ $field->labelClass }} {{ ($field->getValue() ? 'changed' : '') }}"
+    @class([
+        $field->labelClass ?? config('livewire-forms.defaults.labelClass'),
+        $field->getValue() ? 'changed' : ''
+    ])
 >
     {{ $field->getLabel() }}
 </label>

resources/views/fields/link.blade.php

@@ -1,7 +1,10 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
     <a
         href="{{ $field->getValue() }}"
-        class="{{ $field->class }}"
+        class="{{ $field->class ?? config('livewire-forms.defaults.linkClass') }}"
         title="{{ $field->getName() }}"
         @if ($field->target) target="{{ $field->target }}" @endif
         @if ($field->dusk) dusk={{ $field->dusk }} @endif

resources/views/fields/multi-file.blade.php

@@ -1,9 +1,15 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
     @include('livewire-forms::fields.label')
 
     <input
         type="file"
-        class="{{ $field->class }}"
+        @class([
+            $field->class ?? config('livewire-forms.defaults.inputClass'),
+            'is-invalid' => $errors->has('fields.' . $field->getName()),
+        ])
         id="{{ $field->getName() }}"
         name="{{ $field->getName() }}[]"
         placeholder="{{ $field->getLabel() }}"

resources/views/fields/multi-select.blade.php

@@ -1,10 +1,16 @@
-<div class="{{ $field->divClass ?? config('livewire-forms.defaults.divClass') }}">
+<div @class([
+    $field->divClass ?? config('livewire-forms.defaults.divClass'),
+    $field->colClass ?? config('livewire-forms.defaults.colClass')])
+>
     @include('livewire-forms::fields.label')
 
     <select
         @include('livewire-forms::fields.binding')
         id="{{ $field->getName() }}"
-        class="{{ $field->class }}"
+        @class([
+            $field->class ?? config('livewire-forms.defaults.inputSelectClass'),
+            'is-invalid' => $errors->has('fields.' . $field->getName()),
+        ])
         name="{{ $field->getName() }}[]"
         @if($field->readOnly) disabled @endif
         multiple

resources/views/fields/radio-group.blade.php

@@ -0,0 +1,43 @@
+<div
+    @class([
+      $field->divClass ?? config('livewire-forms.defaults.divClass'),
+      $field->colClass ?? config('livewire-forms.defaults.colClass')
+    ])
+>
+    @include('livewire-forms::fields.label')
+
+    <div @class([
+        'd-flex flex-column',
+        $field->checkGapClass ?? config('livewire-forms.defaults.checkGapClass')
+    ])>
+        @foreach ($field->options as $key => $value)
+            <div
+                @class([
+                  $field->checkDivClass ?? config('livewire-forms.defaults.checkDivClass')
+                ])
+            >
+                <input
+                    @include('livewire-forms::fields.binding')
+                    type="radio"
+                    @class([
+                        $field->class ?? config('livewire-forms.defaults.checkInputClass'),
+                        'is-invalid' => $errors->has('fields.' . $field->getName()),
+                    ])
+                    id="{{ $field->getName() . '.' . $loop->index }}"
+                    name="{{ $field->getName() }}"
+                    value="{{ $field->useValueAsKeys ? $value : $key }}"
+                    @if ($field->dusk) dusk={{ $field->dusk }} @endif
+                >
+                <label
+                    @class([config('livewire-forms.defaults.checkLabelClass')])
+                    for="{{ $field->getName() . '.' . $loop->index }}"
+                >
+                    {{ $value }}
+                </label>
+            </div>
+        @endforeach
+    </div>
+
+    @include('livewire-forms::fields.gdpr')
+    @include('livewire-forms::fields.error')
+</div>

resources/views/fields/row.blade.php

@@ -1,4 +1,9 @@
-<div class="{{ $field->divClass ?? 'row' }}">
+<div
+    @class([
+      $field->rowClass ?? config('livewire-forms.defaults.rowClass'),
+      $field->gutterClass ?? config('livewire-forms.defaults.gutterClass')
+    ])
+>
     @foreach ($field->getNestedFields() as $_field)
         {{ $_field->render() }}
     @endforeach