Allow multiple rating fields in one form (#1)

* Update the for and id field attributes with the form field name so you can use multiple start fields * remove unnecessary new method * use id to identify each field --------- Co-authored-by: Mo Khosh <[email protected]>
mokhosh · Mar 24, 2024 · 1a3b8b7 · 1a3b8b7
1 parent f2fdc59
commit 1a3b8b7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/resources/views/half-stars/component.blade.php b/resources/views/half-stars/component.blade.php
@@ -1,4 +1,5 @@
 @php
+    $id = $getId();
     $isDisabled = $isDisabled();
     $color = $getColor();
     $colorClass = match ($color) {
@@ -42,14 +43,14 @@
             <input
                 type="radio"
                 value="0"
-                id="star-0"
+                id="{{ $id }}-star-0"
                 class="!hidden peer"
                 @disabled($isDisabled)
                 {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
             >
 
             <label
-                for="star-0"
+                for="{{ $id }}-star-0"
                 @class([
                     "text-slate-300 peer-checked:text-danger-500",
                     "group-hover:!text-slate-300 peer-hover:!text-danger-500 cursor-pointer" => ! $isDisabled,
@@ -61,7 +62,7 @@ class="!hidden peer"
 
         @foreach ($getStarsArray() as $value)
             <label
-                for="star-{{ $value - 0.5 }}"
+                for="{{ $id }}-star-{{ $value - 0.5 }}"
                 @class([
                     "shrink-0 relative {$halfSizeClass} overflow-hidden {$colorClass} peer-checked:text-slate-300",
                     "{$groupHoverColorClass} peer-hover:!text-slate-300 cursor-pointer" => ! $isDisabled,
@@ -73,15 +74,15 @@ class="!hidden peer"
             <input
                 type="radio"
                 value="{{ $value - 0.5 }}"
-                id="star-{{ $value - 0.5 }}"
+                id="{{ $id }}-star-{{ $value - 0.5 }}"
                 class="!hidden peer"
                 wire:loading.attr="disabled"
                 @disabled($isDisabled)
                 {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
             >
 
             <label
-                for="star-{{ $value }}"
+                for="{{ $id }}-star-{{ $value }}"
                 @class([
                     "shrink-0 relative {$halfSizeClass} overflow-hidden {$colorClass} peer-checked:text-slate-300",
                     "{$groupHoverColorClass} peer-hover:!text-slate-300 cursor-pointer" => ! $isDisabled,
@@ -93,7 +94,7 @@ class="!hidden peer"
             <input
                 type="radio"
                 value="{{ $value }}"
-                id="star-{{ $value }}"
+                id="{{ $id }}-star-{{ $value }}"
                 class="!hidden peer"
                 wire:loading.attr="disabled"
                 @disabled($isDisabled)

diff --git a/resources/views/simple/component.blade.php b/resources/views/simple/component.blade.php
@@ -1,4 +1,5 @@
 @php
+    $id = $getId();
     $isDisabled = $isDisabled();
     $color = $getColor();
     $colorClass = match ($color) {
@@ -35,14 +36,14 @@
             <input
                 type="radio"
                 value="0"
-                id="star-0"
+                id="{{ $id }}-star-0"
                 class="!hidden peer"
                 @disabled($isDisabled)
                 {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
             >
 
             <label
-                for="star-0"
+                for="{{ $id }}-star-0"
                 @class([
                     "text-slate-300 peer-checked:text-danger-500",
                     "group-hover:!text-slate-300 peer-hover:!text-danger-500 cursor-pointer" => ! $isDisabled,
@@ -54,7 +55,7 @@ class="!hidden peer"
 
         @foreach ($getStarsArray() as $value)
             <label
-                for="star-{{ $value }}"
+                for="{{ $id }}-star-{{ $value }}"
                 @class([
                     "{$colorClass} peer-checked:text-slate-300",
                     "{$groupHoverColorClass} peer-hover:!text-slate-300 cursor-pointer" => ! $isDisabled,
@@ -66,7 +67,7 @@ class="!hidden peer"
             <input
                 type="radio"
                 value="{{ $value }}"
-                id="star-{{ $value }}"
+                id="{{ $id }}-star-{{ $value }}"
                 class="!hidden peer"
                 wire:loading.attr="disabled"
                 @disabled($isDisabled)