Added extra styling for AlpineJs

asantibanez · Jun 11, 2020 · 92804a4 · 92804a4
1 parent 5b6a84a
commit 92804a4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/resources/views/search-option-item.blade.php b/resources/views/search-option-item.blade.php
@@ -3,7 +3,7 @@ class="{{ $styles['searchOptionItem'] }}"
 
     wire:click.stop="selectValue('{{ $option['value'] }}')"
 
-    x-bind:class="{ 'bg-gray-100': selectedIndex === {{ $index }} }"
+    x-bind:class="{ '{{ $styles['searchOptionItemActive'] }}': selectedIndex === {{ $index }}, '{{ $styles['searchOptionItemInactive'] }}': selectedIndex !== {{ $index }} }"
     x-on:mouseover="selectedIndex = {{ $index }}"
 >
     {{ $option['description'] }}

diff --git a/src/LivewireSelect.php b/src/LivewireSelect.php
@@ -213,7 +213,11 @@ public function styles()
             'search' => 'relative',
             'searchInput' => 'p-2 rounded border w-full rounded',
             'searchOptionsContainer' => 'absolute top-0 left-0 mt-12 w-full z-10',
-            'searchOptionItem' => 'bg-white p-3 border-b hover:bg-gray-100 cursor-pointer text-gray-700 text-sm',
+
+            'searchOptionItem' => 'p-3 hover:bg-gray-100 cursor-pointer text-sm',
+            'searchOptionItemActive' => 'bg-indigo-600 text-white font-medium',
+            'searchOptionItemInactive' => 'bg-white text-gray-600',
+
             'searchNoResults' => 'p-8 w-full bg-white border text-center text-xs text-gray-600',
         ];
     }