feat(radio) estiliza o componente e cria o agrupamento

agenciafmd · Feb 19, 2024 · 0e12588 · 0e12588
1 parent e12496b
commit 0e12588
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 68 deletions.
diff --git a/docs/form.md b/docs/form.md
@@ -30,12 +30,12 @@
         @endphp
         <x-form.select name="select" label="Select" :options="$options" required/>
     </div>
-    <div class="mb-3"> 
+    {{--<div class="mb-3"> 
         <x-form.radio name="radio[]" label="Radio Button" hint="Selecione uma opção" :values="['One' => 'One', 'Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']" required/>
     </div>
     <div class="mb-3"> 
         <x-form.radio name="radio[]" label="Radio Button" inline hint="Selecione uma opção" :values="['One' => 'One', 'Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']" required/>
-    </div>
+    </div>--}}
 </x-form>
 @enddemo
 
@@ -76,10 +76,10 @@
     <x-form.textarea name="message" placeholder="Mensagem..."/>
 </div>
 <div class="mb-3">
-    <x-form.textarea label="mensagem" name="message" placeholder="Mensagem..." required/>
+    <x-form.textarea label="Mensagem" name="message" placeholder="Mensagem..." required/>
 </div>
 <div class="mb-3">
-    <x-form.textarea label="mensagem" name="message" hint="Max 1000 chars" maxlength="1000" placeholder="Mensagem..."/>
+    <x-form.textarea label="Mensagem" name="message" hint="Máx. 1000 caracteres" maxlength="1000" placeholder="Mensagem..."/>
 </div>
 @enddemo
 
@@ -90,10 +90,10 @@
     <x-form.textarea name="message" placeholder="Mensagem..."/>
 </div>
 <div class="mb-3">
-    <x-form.textarea label="mensagem" name="message" placeholder="Mensagem..." required/>
+    <x-form.textarea label="Mensagem" name="message" placeholder="Mensagem..." required/>
 </div>
 <div class="mb-3">
-    <x-form.textarea label="mensagem" name="message" hint="Max 1000 chars" maxlength="1000" placeholder="Mensagem..."/>
+    <x-form.textarea label="Mensagem" name="message" hint="Máx. 1000 caracteres" maxlength="1000" placeholder="Mensagem..."/>
 </div>
 ```
 
@@ -167,57 +167,47 @@
 
 @demo
 <div class="mb-3">
-    <x-form.radio name="radio1" :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
+    <x-form.radio name="radio1" label="Option 01" value="option01"/>
+    <x-form.radio name="radio1" label="Option 02" value="option02"/>
+    <x-form.radio name="radio1" label="Option 03" value="option03" disabled/>
 </div>
 <div class="mb-3">
-    <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/>
+    <x-form.group label="Escolha uma opção" hint="Somente um item é permitido" required>
+        <x-form.radio name="radio2" label="Option 01" value="option01"/>
+        <x-form.radio name="radio2" label="Option 02" value="option02"/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" disabled/>
+    </x-form.group>
 </div>
 <div class="mb-3">
-    <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']"/>
+    <x-form.group label="Escolha uma opção" hint="Estes radios estão no formato inline" required>
+        <x-form.radio name="radio3" label="Option 01" value="option01" inline/>
+        <x-form.radio name="radio3" label="Option 02" value="option02" inline/>
+        <x-form.radio name="radio3" label="Option 03" value="option03" inline disabled/>
+    </x-form.group>
 </div>
 @enddemo
 
 @verbatim
 
 ```blade
 <div class="mb-3">
-    <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="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']" required/>
+    <x-form.radio name="radio1" label="Option 01" value="option01"/>
+    <x-form.radio name="radio1" label="Option 02" value="option02"/>
+    <x-form.radio name="radio1" label="Option 03" value="option03" disabled/>
 </div>
-<div class="mb-3">    
-    <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>
-```
-
-@endverbatim
-
-## Inline Radios
-
-@demo
 <div class="mb-3">
-    <x-form.radio name="inlineradio1" inline :values="['Option 1' => 'Option 1','Option 2' => 'Option 2', 'Option 3' => 'Option 3', 'Option 4' => 'Option 4']"/>
+    <x-form.group label="Escolha uma opção" hint="Somente um item é permitido" required>
+        <x-form.radio name="radio2" label="Option 01" value="option01"/>
+        <x-form.radio name="radio2" label="Option 02" value="option02"/>
+        <x-form.radio name="radio2" label="Option 03" value="option03" disabled/>
+    </x-form.group>
 </div>
 <div class="mb-3">
-    <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="['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="inlineradio1" inline :values="['One' => 'One', 'Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
-</div>
-<div class="mb-3">
-    <x-form.radio name="inlineradio2" inline label="Inline Radio" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']" required/>
-</div>
-<div class="mb-3">    
-    <x-form.radio name="inlineradio3" inline label="Inline Radio" hint="Selecione uma opção" :values="['One' => 'One','Two' => 'Two', 'Three' => 'Three', 'Four' => 'Four']"/>
+    <x-form.group label="Escolha uma opção" hint="Estes radios estão no formato inline" required>
+        <x-form.radio name="radio3" label="Option 01" value="option01" inline/>
+        <x-form.radio name="radio3" label="Option 02" value="option02" inline/>
+        <x-form.radio name="radio3" label="Option 03" value="option03" inline disabled/>
+    </x-form.group>
 </div>
 ```
 

diff --git a/src/Providers/BladeServiceProvider.php b/src/Providers/BladeServiceProvider.php
@@ -71,17 +71,18 @@ public function bootComponents(): void
         Blade::component($prefix . 'btn.primary', Components\Buttons\Primary::class);
         Blade::component($prefix . 'form.error', Components\Forms\Error::class);
         Blade::component($prefix . 'form', Components\Forms\Form::class);
+        Blade::component($prefix . 'form.group', Components\Forms\Group::class);
         Blade::component($prefix . 'form.hint', Components\Forms\Hint::class);
-        Blade::component($prefix . 'form.plaintext', Components\Forms\Inputs\Plaintext::class);
-        Blade::component($prefix . 'form.input', Components\Forms\Inputs\Input::class);
         Blade::component($prefix . 'form.label', Components\Forms\Label::class);
-        Blade::component($prefix . 'page.form', Components\Pages\Form::class);
-        Blade::component($prefix . 'page.header', Components\Pages\Header::class);
-        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);
+        Blade::component($prefix . 'form.input', Components\Forms\Inputs\Input::class);
+        Blade::component($prefix . 'form.plaintext', Components\Forms\Inputs\Plaintext::class);
+        Blade::component($prefix . 'form.radio', Components\Forms\Inputs\Radio::class);
+        Blade::component($prefix . 'form.select', Components\Forms\Inputs\Select::class);
+        Blade::component($prefix . 'form.textarea', Components\Forms\Inputs\Textarea::class);
         Blade::component($prefix . 'form.toggle', Components\Forms\Inputs\Toggle::class);
         Blade::component($prefix . 'form.toggle-notification', Components\Forms\Inputs\ToggleNotification::class);
+        Blade::component($prefix . 'page.form', Components\Pages\Form::class);
+        Blade::component($prefix . 'page.header', Components\Pages\Header::class);
     }
 }
diff --git a/src/View/Components/Forms/Group.php b/src/View/Components/Forms/Group.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Agenciafmd\Ui\View\Components\Forms;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Group extends Component
+{
+    public function __construct(
+        public string $name = '',
+        public string $label = '',
+        public string $hint = '',
+    ) {
+    }
+
+    public function render(): string|View
+    {
+        return <<<'HTML'
+            @if($label)
+                <x-form.label for="{{ $name }}" @class(['required' => $attributes->has('required')])>
+                    {{ str($label)->lower()->ucfirst() }}
+                </x-form.label>
+            @endif
+        
+            {{ $slot }}
+
+            <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
@@ -12,9 +12,7 @@ class Radio extends Component
     public function __construct(
         public string $name = '',
         public string $label = '',
-        public string $hint = '',
-        public string $inline = '',
-        public array $values = [],
+        public bool $inline = false,
     ) {
         $this->uuid = '-' . str(serialize($this))
             ->pipe('md5')
@@ -25,29 +23,25 @@ public function __construct(
     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="radio" @if($loop->first) checked @endif @if($loop->last) disabled @endif name="{{ $name }}" wire:model="{{ $name }}" {{ $attributes->merge([
+            <label @class([
+                    'form-check',
+                    'required' => $attributes->has('required'),
+                    'form-check-inline' => $inline
+                ])>
+                <input wire:model="{{ $name }}" {{ $attributes->merge([
+                                    'type' => 'radio',
+                                    'name' => $name,
                                     '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 }}"/>
+                @if($label)
+                    <span class="form-check-label">{{ str($label)->lower()->ucfirst() }}</span>
+                @endif
+            </label>
         HTML;
     }
 }