Add support for hide_display property

aerni · May 24, 2024 · b8e7a38 · b8e7a38
1 parent 4b63694
commit b8e7a38
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 129 deletions.
diff --git a/resources/views/default/fields/assets.blade.php b/resources/views/default/fields/assets.blade.php
@@ -1,10 +1,8 @@
-<div>
-    @formView('messages.display')
+@formView('messages.display')
 
-    @if($field->instructions && $field->instructions_position === 'above')
-        @formView('messages.instructions')
-    @endif
-</div>
+@if($field->instructions && $field->instructions_position === 'above')
+    @formView('messages.instructions')
+@endif
 
 <div
     id="{{ $field->id }}"

diff --git a/resources/views/default/fields/captcha.blade.php b/resources/views/default/fields/captcha.blade.php
@@ -1,10 +1,8 @@
-<div>
-    @formView('messages.display')
+@formView('messages.display')
 
-    @if($field->instructions && $field->instructions_position === 'above')
-        @formView('messages.instructions')
-    @endif
-</div>
+@if($field->instructions && $field->instructions_position === 'above')
+    @formView('messages.instructions')
+@endif
 
 <div
     id="{{ $field->id }}"

diff --git a/resources/views/default/fields/checkboxes.blade.php b/resources/views/default/fields/checkboxes.blade.php
@@ -1,56 +1,56 @@
-<fieldset class="flex flex-col gap-y-3">
-    <div>
+<fieldset>
+    <div class="flex flex-col gap-y-3">
         @formView('messages.legend')
 
         @if($field->instructions && $field->instructions_position === 'above')
             @formView('messages.instructions')
         @endif
-    </div>
 
-    <div class="{{ $field->inline ? 'flex items-start flex-wrap gap-x-6 gap-y-2' : 'flex flex-col gap-y-2' }}">
-        @foreach($field->options as $option => $label)
-            <div wire:key="{{ $field->id }}-{{ $option }}" class="flex items-start gap-x-3">
-                <div class="flex items-center h-5">
-                    <input
-                        id="{{ $field->id }}-{{ $option }}"
-                        name="{{ $field->id }}"
-                        value="{{ $option }}"
-                        type="checkbox"
+        <div class="{{ $field->inline ? 'flex items-start flex-wrap gap-x-6 gap-y-2' : 'flex flex-col gap-y-2' }}">
+            @foreach($field->options as $option => $label)
+                <div wire:key="{{ $field->id }}-{{ $option }}" class="flex items-start gap-x-3">
+                    <div class="flex items-center h-5">
+                        <input
+                            id="{{ $field->id }}-{{ $option }}"
+                            name="{{ $field->id }}"
+                            value="{{ $option }}"
+                            type="checkbox"
 
-                        @if($field->wire_model)
-                            wire:model.{{ $field->wire_model }}="{{ $field->key }}"
-                        @else
-                            wire:model="{{ $field->key }}"
-                        @endif
+                            @if($field->wire_model)
+                                wire:model.{{ $field->wire_model }}="{{ $field->key }}"
+                            @else
+                                wire:model="{{ $field->key }}"
+                            @endif
 
-                        @if(! $errors->has($field->key))
-                            class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
-                            @if($field->instructions)
-                                aria-describedby="{{ $field->id }}-instructions"
+                            @if(! $errors->has($field->key))
+                                class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                                @if($field->instructions)
+                                    aria-describedby="{{ $field->id }}-instructions"
+                                @endif
+                            @else
+                                class="w-4 h-4 text-indigo-600 border-red-300 rounded focus:ring-red-500"
+                                aria-invalid="true"
+                                aria-describedby="{{ $field->id }}-error"
                             @endif
-                        @else
-                            class="w-4 h-4 text-indigo-600 border-red-300 rounded focus:ring-red-500"
-                            aria-invalid="true"
-                            aria-describedby="{{ $field->id }}-error"
-                        @endif
-                    />
-                </div>
+                        />
+                    </div>
 
-                <div class="text-sm leading-5">
-                    <label
-                        for="{{ $field->id }}-{{ $option }}"
-                        class="font-medium {{ $errors->has($field->key) ? 'text-red-800' : 'text-gray-900' }}"
-                    >
-                        {{ $label }}
-                    </label>
+                    <div class="text-sm leading-5">
+                        <label
+                            for="{{ $field->id }}-{{ $option }}"
+                            class="font-medium {{ $errors->has($field->key) ? 'text-red-800' : 'text-gray-900' }}"
+                        >
+                            {{ $label }}
+                        </label>
+                    </div>
                 </div>
-            </div>
-        @endforeach
-    </div>
+            @endforeach
+        </div>
 
-    @if($errors->has($field->key))
-        @formView('messages.error')
-    @elseif($field->instructions && $field->instructions_position === 'below')
-        @formView('messages.instructions')
-    @endif
+        @if($errors->has($field->key))
+            @formView('messages.error')
+        @elseif($field->instructions && $field->instructions_position === 'below')
+            @formView('messages.instructions')
+        @endif
+    </div>
 </fieldset>
diff --git a/resources/views/default/fields/default.blade.php b/resources/views/default/fields/default.blade.php
@@ -1,10 +1,8 @@
-<div>
-    @formView('messages.display')
+@formView('messages.display')
 
-    @if($field->instructions && $field->instructions_position === 'above')
-        @formView('messages.instructions')
-    @endif
-</div>
+@if($field->instructions && $field->instructions_position === 'above')
+    @formView('messages.instructions')
+@endif
 
 <input
     id="{{ $field->id }}"

diff --git a/resources/views/default/fields/honeypot.blade.php b/resources/views/default/fields/honeypot.blade.php
@@ -1,10 +1,10 @@
-<div class="hidden" aria-hidden="true">
-    <input
-        id="{{ $this->honeypot->id }}"
-        name="{{ $this->honeypot->id }}"
-        type="text"
-        wire:model="{{ $this->honeypot->key }}"
-        tabindex="-1"
-        autocomplete="off"
-    />
-</div>
+<input
+    id="{{ $this->honeypot->id }}"
+    name="{{ $this->honeypot->id }}"
+    type="text"
+    wire:model="{{ $this->honeypot->key }}"
+    tabindex="-1"
+    autocomplete="off"
+    class="hidden"
+    aria-hidden="true"
+/>
diff --git a/resources/views/default/fields/radio.blade.php b/resources/views/default/fields/radio.blade.php
@@ -1,56 +1,56 @@
-<fieldset class="flex flex-col gap-y-3">
-    <div>
+<fieldset>
+    <div class="flex flex-col gap-y-3">
         @formView('messages.legend')
 
         @if($field->instructions && $field->instructions_position === 'above')
             @formView('messages.instructions')
         @endif
-    </div>
 
-    <div class="{{ $field->inline ? 'flex items-start flex-wrap gap-x-6 gap-y-2' : 'flex flex-col gap-y-2' }}">
-        @foreach($field->options as $option => $label)
-            <div wire:key="{{ $field->id }}-{{ $option }}" class="flex items-start gap-x-3">
-                <div class="flex items-center h-5">
-                    <input
-                        id="{{ $field->id }}-{{ $option }}"
-                        name="{{ $field->id }}"
-                        value="{{ $option }}"
-                        type="radio"
+        <div class="{{ $field->inline ? 'flex items-start flex-wrap gap-x-6 gap-y-2' : 'flex flex-col gap-y-2' }}">
+            @foreach($field->options as $option => $label)
+                <div wire:key="{{ $field->id }}-{{ $option }}" class="flex items-start gap-x-3">
+                    <div class="flex items-center h-5">
+                        <input
+                            id="{{ $field->id }}-{{ $option }}"
+                            name="{{ $field->id }}"
+                            value="{{ $option }}"
+                            type="radio"
 
-                        @if($field->wire_model)
-                            wire:model.{{ $field->wire_model }}="{{ $field->key }}"
-                        @else
-                            wire:model="{{ $field->key }}"
-                        @endif
+                            @if($field->wire_model)
+                                wire:model.{{ $field->wire_model }}="{{ $field->key }}"
+                            @else
+                                wire:model="{{ $field->key }}"
+                            @endif
 
-                        @if(! $errors->has($field->key))
-                            class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
-                            @if($field->instructions)
-                                aria-describedby="{{ $field->id }}-instructions"
+                            @if(! $errors->has($field->key))
+                                class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
+                                @if($field->instructions)
+                                    aria-describedby="{{ $field->id }}-instructions"
+                                @endif
+                            @else
+                                class="w-4 h-4 text-indigo-600 border-red-300 focus:ring-red-500"
+                                aria-invalid="true"
+                                aria-describedby="{{ $field->id }}-error"
                             @endif
-                        @else
-                            class="w-4 h-4 text-indigo-600 border-red-300 focus:ring-red-500"
-                            aria-invalid="true"
-                            aria-describedby="{{ $field->id }}-error"
-                        @endif
-                    />
-                </div>
+                        />
+                    </div>
 
-                <div class="text-sm leading-5">
-                    <label
-                        for="{{ $field->id }}-{{ $option }}"
-                        class="font-medium {{ $errors->has($field->key) ? 'text-red-800' : 'text-gray-900' }}"
-                    >
-                        {{ $label }}
-                    </label>
+                    <div class="text-sm leading-5">
+                        <label
+                            for="{{ $field->id }}-{{ $option }}"
+                            class="font-medium {{ $errors->has($field->key) ? 'text-red-800' : 'text-gray-900' }}"
+                        >
+                            {{ $label }}
+                        </label>
+                    </div>
                 </div>
-            </div>
-        @endforeach
-    </div>
+            @endforeach
+        </div>
 
-    @if($errors->has($field->key))
-        @formView('messages.error')
-    @elseif($field->instructions && $field->instructions_position === 'below')
-        @formView('messages.instructions')
-    @endif
+        @if($errors->has($field->key))
+            @formView('messages.error')
+        @elseif($field->instructions && $field->instructions_position === 'below')
+            @formView('messages.instructions')
+        @endif
+    </div>
 </fieldset>
diff --git a/resources/views/default/fields/select.blade.php b/resources/views/default/fields/select.blade.php
@@ -1,10 +1,8 @@
-<div>
-    @formView('messages.display')
+@formView('messages.display')
 
-    @if($field->instructions && $field->instructions_position === 'above')
-        @formView('messages.instructions')
-    @endif
-</div>
+@if($field->instructions && $field->instructions_position === 'above')
+    @formView('messages.instructions')
+@endif
 
 <select
     id="{{ $field->id }}"

diff --git a/resources/views/default/fields/textarea.blade.php b/resources/views/default/fields/textarea.blade.php
@@ -1,10 +1,8 @@
-<div>
-    @formView('messages.display')
+@formView('messages.display')
 
-    @if($field->instructions && $field->instructions_position === 'above')
-        @formView('messages.instructions')
-    @endif
-</div>
+@if($field->instructions && $field->instructions_position === 'above')
+    @formView('messages.instructions')
+@endif
 
 <textarea
     id="{{ $field->id }}"

diff --git a/resources/views/default/messages/display.blade.php b/resources/views/default/messages/display.blade.php
@@ -1,7 +1,7 @@
 <label
     for="{{ $field->id }}"
     id="{{ $field->id }}-label"
-    class="block text-sm font-medium text-gray-700"
+    class="{{ $field->hide_display ? 'sr-only' : 'block text-sm font-medium text-gray-700 [&_+_p]:-mt-2' }}"
 >
     {{ $field->display }}
 </label>
diff --git a/resources/views/default/messages/instructions.blade.php b/resources/views/default/messages/instructions.blade.php
@@ -1,3 +1,5 @@
 @if($field->instructions)
-    <p id="{{ $field->id }}-instructions" class="text-[13px] text-gray-500">{{ $field->instructions }}</p>
+    <p id="{{ $field->id }}-instructions" class="text-[13px] text-gray-500">
+        {{ $field->instructions }}
+    </p>
 @endif
diff --git a/resources/views/default/messages/legend.blade.php b/resources/views/default/messages/legend.blade.php
@@ -1,6 +1,6 @@
 <legend
     id="{{ $field->id }}-legend"
-    class="text-sm font-medium text-gray-900"
+    class="{{ $field->hide_display ? 'sr-only' : 'text-sm font-medium text-gray-900 [&_+_p]:-mt-3' }}"
 >
     {{ $field->display }}
 </legend>
diff --git a/src/Fields/Concerns/WithDefaultProperties.php b/src/Fields/Concerns/WithDefaultProperties.php
@@ -7,6 +7,7 @@
 use Aerni\LivewireForms\Fields\Properties\WithDisplay;
 use Aerni\LivewireForms\Fields\Properties\WithHandle;
 use Aerni\LivewireForms\Fields\Properties\WithHidden;
+use Aerni\LivewireForms\Fields\Properties\WithHideDisplay;
 use Aerni\LivewireForms\Fields\Properties\WithId;
 use Aerni\LivewireForms\Fields\Properties\WithInstructions;
 use Aerni\LivewireForms\Fields\Properties\WithInstructionsPosition;
@@ -23,6 +24,7 @@ trait WithDefaultProperties
     use WithDisplay;
     use WithHandle;
     use WithHidden;
+    use WithHideDisplay;
     use WithId;
     use WithInstructions;
     use WithInstructionsPosition;

diff --git a/src/Fields/Properties/WithHideDisplay.php b/src/Fields/Properties/WithHideDisplay.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace Aerni\LivewireForms\Fields\Properties;
+
+trait WithHideDisplay
+{
+    protected function hideDisplayProperty(?bool $hideDisplay = null): bool
+    {
+        return $hideDisplay ?? (bool) $this->field->get('hide_display');
+    }
+}