add custom inputs

including: color, range, switch

config/config.php

@@ -54,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

@@ -1,4 +1,4 @@
-<div class="form-check @if(null !== $attributes->get('inline')) form-check-inline @endif">
+<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' : '')]) !!}
 

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

@@ -6,15 +6,15 @@
     @endif
 
     <input
-        {!! $attributes->merge(['class' => 'form-control' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+        {!! $attributes->merge(['class' => 'form-control' . ($type === 'color' ? ' form-control-color' : '') . ($hasError($name) ? ' is-invalid' : '')]) !!}
 
         type="{{ $type }}"
 
         @if($isWired())
             wire:model{!! $wireModifier() !!}="{{ $name }}"
         @else
             name="{{ $name }}"
-            value="{{ $value }}"
+            value="{{ $value ?? $type === 'color' ? '#000000' : '' }}"
         @endif
 
         @if($label && !$attributes->get('id'))

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

@@ -0,0 +1,24 @@
+<x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+
+<input
+    {!! $attributes->merge(['class' => 'form-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

src/Components/FormRange.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace ProtoneMedia\LaravelFormComponents\Components;
+
+class FormRange extends Component
+{
+    use HandlesValidationErrors;
+    use HandlesDefaultAndOldValue;
+
+    public string $name;
+    public string $label;
+
+    public $value;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        string $name,
+        string $label = '',
+        $bind = null,
+        $default = null,
+        $language = null,
+        bool $showErrors = true,
+    ) {
+        $this->name       = $name;
+        $this->label      = $label;
+        $this->showErrors = $showErrors;
+
+        if ($language) {
+            $this->name = "{$name}[{$language}]";
+        }
+
+        $this->setValue($name, $bind, $default, $language);
+    }
+}

tests/Feature/Bootstrap5Test.php

@@ -39,4 +39,15 @@ public function it_can_float_labels()
             ->seeElement('#name1', ['placeholder' => ' '])
             ->seeElement('#name2', ['placeholder' => 'John Doe']);
     }
+
+    /** @test */
+    public function it_can_add_custom_input_classes()
+    {
+        $this->registerTestRoute('bootstrap-custom-input');
+
+        $this->visit('/bootstrap-custom-input')
+            ->seeElement('.form-control-color', ['value' => '#000000'])
+            ->seeElementCount('.form-switch', 1)
+            ->seeElement('.form-range', ['type' => 'range']);
+    }
 }

tests/Feature/views/bootstrap-custom-input.blade.php

@@ -0,0 +1,5 @@
+<x-form>
+    <x-form-input name="color" type="color" />
+    <x-form-checkbox name="check" switch />
+    <x-form-range name="range" />
+</x-form>