From 92804a4423202732a0ac8b7b12abcf9301f669b9 Mon Sep 17 00:00:00 2001 From: asantibanez Date: Thu, 11 Jun 2020 17:32:30 -0500 Subject: [PATCH] Added extra styling for AlpineJs --- resources/views/search-option-item.blade.php | 2 +- src/LivewireSelect.php | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/resources/views/search-option-item.blade.php b/resources/views/search-option-item.blade.php index 6c0b731..6d64481 100644 --- 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 index c9b66c3..3422f70 100755 --- 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', ]; }