feat(doc) Adiciona exemplo de checkbox

agenciafmd · Feb 1, 2024 · 9bf2239 · 9bf2239
1 parent 88ac1bd
commit 9bf2239
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 11 deletions.
diff --git a/docs/form.md b/docs/form.md
@@ -117,27 +117,27 @@
 
 @demo
 <div class="mb-3">
-    <x-form.radio name="radio1[]" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.radio name="radio1[]" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
 </div>
 <div class="mb-3">
-    <x-form.radio name="radio2[]" label="Radio Button" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']" required/>
+    <x-form.radio name="radio2[]" label="Radio Button" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']" required/>
 </div>
 <div class="mb-3">
-    <x-form.radio name="radio3[]" label="Radio Button" hint="Selecione uma opção" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.radio name="radio3[]" label="Radio Button" hint="Selecione uma opção" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
 </div>
 @enddemo
 
 @verbatim
 
 ```blade
 <div class="mb-3">
-    <x-form.radio name="radio1[]" :values="[One' => 'One', 'Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.radio name="radio1[]" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
 </div>
 <div class="mb-3">    
-    <x-form.radio name="radio2[]" label="Radio Button" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']" required/>
+    <x-form.radio name="radio2[]" label="Radio Button" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']" required/>
 </div>
 <div class="mb-3">    
-    <x-form.radio name="radio3[]" label="Radio Button" hint="Selecione uma opção" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.radio name="radio3[]" label="Radio Button" hint="Selecione uma opção" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
 </div>
 ```
 
@@ -147,13 +147,13 @@
 
 @demo
 <div class="mb-3">
-    <x-form.radio name="inlineradio1[]" inline :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.radio name="inlineradio1[]" inline :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
 </div>
 <div class="mb-3">
-    <x-form.radio name="inlineradio2[]" inline label="Inline Radio Button" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']" required/>
+    <x-form.radio name="inlineradio2[]" inline label="Inline Radio Button" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']" required/>
 </div>
 <div class="mb-3">
-    <x-form.radio name="inlineradio3[]" inline label="Inline Radio Button" hint="Selecione uma opção" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.radio name="inlineradio3[]" inline label="Inline Radio Button" hint="Selecione uma opção" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
 </div>
 @enddemo
 
@@ -172,3 +172,64 @@
 ```
 
 @endverbatim
+
+
+## Checkboxes
+
+@demo
+<div class="mb-3">
+    <x-form.checkbox name="checkbox1[]" :values="['Checkbox input' => 'Checkbox input', 'Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+<div class="mb-3">
+    <x-form.checkbox name="checkbox2[]" label="Checkbox" :values="['Checkbox input' => 'Checkbox input', 'Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']" required/>
+</div>
+<div class="mb-3">
+    <x-form.checkbox name="checkbox3[]" label="Checkbox" hint="Selecione uma opção" :values="['Checkbox input' => 'Checkbox input', 'Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+@enddemo
+
+@verbatim
+
+```blade
+<div class="mb-3">
+    <x-form.checkbox name="checkbox1[]" :values="['Checkbox input' => 'Checkbox input', 'Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+<div class="mb-3">    
+    <x-form.checkbox name="checkbox2[]" label="Checkbox" :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']" required/>
+</div>
+<div class="mb-3">    
+    <x-form.checkbox name="checkbox3[]" label="Checkbox" hint="Selecione uma opção" :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+```
+
+@endverbatim
+
+## Inline Checkboxes
+
+@demo
+<div class="mb-3">
+    <x-form.checkbox name="inlinecheckbox1[]" inline :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+<div class="mb-3">
+    <x-form.checkbox name="inlinecheckbox2[]" inline label="Inline Checkbox" :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']" required/>
+</div>
+<div class="mb-3">
+    <x-form.checkbox name="inlinecheckbox3[]" inline label="Inline Checkbox" hint="Selecione uma opção" :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+@enddemo
+
+@verbatim
+
+```blade
+<div class="mb-3">
+    <x-form.radio name="inlinecheckbox1[]" inline :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+<div class="mb-3">
+    <x-form.checkbox name="inlinecheckbox2[]" inline label="Inline Checkbox" :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']" required/>
+</div>
+<div class="mb-3">    
+    <x-form.checkbox name="inlinecheckbox3[]" inline label="Inline Checkbox" hint="Selecione uma opção" :values="['Checkbox input' => 'Checkbox input','Disabled checkbox' => 'Disabled checkbox', 'Checked checkbox' => 'Checked checkbox']"/>
+</div>
+```
+
+@endverbatim
diff --git a/src/Providers/BladeServiceProvider.php b/src/Providers/BladeServiceProvider.php
@@ -80,5 +80,6 @@ public function bootComponents(): void
         Blade::component($prefix . 'form.textarea', Components\Forms\Inputs\Textarea::class);
         Blade::component($prefix . 'form.select', Components\Forms\Inputs\Select::class);
         Blade::component($prefix . 'form.radio', Components\Forms\Inputs\Radio::class);
+        Blade::component($prefix . 'form.checkbox', Components\Forms\Inputs\Checkbox::class);
     }
 }
diff --git a/src/View/Components/Forms/Inputs/Checkbox.php b/src/View/Components/Forms/Inputs/Checkbox.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace Agenciafmd\Ui\View\Components\Forms\Inputs;
+
+use Illuminate\Support\Facades\View;
+use Illuminate\View\Component;
+
+class Checkbox extends Component
+{
+    public string $uuid;
+
+    public function __construct(
+        public string $name = '',
+        public string $label = '',
+        public string $hint = '',
+        public string $inline = '',
+        public array $values = [],
+    ) {
+        $this->uuid = '-' . str(serialize($this))
+            ->pipe('md5')
+            ->limit(5, '')
+            ->toString();
+    }
+
+    public function render(): string|View
+    {
+        return <<<'HTML'
+            @if($label)
+                <x-form.label for="{{ $name . $uuid }}" @class(['required' => $attributes->has('required')])>
+                    {{ str($label)->lower()->ucfirst() }}
+                </x-form.label>
+            @endif
+            @foreach($values as $key => $value)
+                <label class="form-check @if($inline) form-check-inline @endif">
+                    <input type="checkbox" @if($value == 'Disabled checkbox') disabled @endif @if($value == 'Checked checkbox') checked @endif name="{{ $name }}" wire:model="{{ $name }}" {{ $attributes->merge([
+                                    'id' => $name . $uuid,
+                                    'value' => $key,
+                                ])->class([
+                                    'form-check-input',
+                                    'is-invalid' => $errors->has($name),
+                            ])
+                        }}
+                    />
+                    <span class="form-check-label" for="{{ $name . $uuid }}" @class(['required' => $attributes->has('required')])>
+                        {{ str($value)->lower()->ucfirst() }}
+                    </span>
+                </label>
+            @endforeach
+            <x-form.error field="{{ $name }}"/>
+            <x-form.hint message="{{ $hint }}"/>
+        HTML;
+    }
+}
diff --git a/src/View/Components/Forms/Inputs/Radio.php b/src/View/Components/Forms/Inputs/Radio.php
@@ -32,7 +32,7 @@ public function render(): string|View
             @endif
             @foreach($values as $key => $value)
                 <label class="form-check @if($inline) form-check-inline @endif">
-                    <input type="radio" name="{{ $name }}" wire:model="{{ $name }}" {{ $attributes->merge([
+                    <input type="radio" @if($loop->first) checked @endif @if($loop->last) disabled @endif name="{{ $name }}" wire:model="{{ $name }}" {{ $attributes->merge([
                                     'id' => $name . $uuid,
                                     'value' => $key,
                                 ])->class([
@@ -41,7 +41,7 @@ public function render(): string|View
                             ])
                         }}
                     />
-                    <span for="{{ $name . $uuid }}" @class(['required' => $attributes->has('required')])>
+                    <span class="form-check-label" for="{{ $name . $uuid }}" @class(['required' => $attributes->has('required')])>
                         {{ str($value)->lower()->ucfirst() }}
                     </span>
                 </label>