Made views styles customizable

resources/views/default.blade.php

@@ -1,6 +1,6 @@
 <select
     name="{{ $name }}"
-    class="{{ $styles }}"
+    class="{{ $styles['default'] }}"
     wire:model="value">
 
     <option value="">

resources/views/search-input.blade.php

@@ -4,5 +4,5 @@
     type="text"
     wire:model.debounce.300ms="searchTerm"
     placeholder="{{ $placeholder }}"
-    class="p-2 rounded border w-full rounded"
+    class="{{ $styles['searchInput'] }}"
 />

resources/views/search-no-results.blade.php

@@ -1,3 +1,3 @@
-<p class="p-8 w-full bg-white border text-center text-sm">
+<p class="{{ $styles['searchNoResults'] }}">
     No options found
 </p>

resources/views/search-option-item.blade.php

@@ -1,5 +1,6 @@
 <div
-    class="p-3 border-b hover:bg-gray-100 cursor-pointer"
-    wire:click.stop="selectValue('{{ $option['value'] }}')">
+    class="{{ $styles['searchOptionItem'] }}"
+    wire:click.stop="selectValue('{{ $option['value'] }}')"
+>
     {{ $option['description'] }}
 </div>

resources/views/search-options-container.blade.php

@@ -1,13 +1,14 @@
-<div class="absolute top-0 left-0 mt-12 w-full">
+<div class="{{ $styles['searchOptionsContainer'] }}">
     @if(!$emptyOptions)
-        <div class="w-full bg-white border">
-            @foreach($options as $option)
-                @include($searchOptionItem, [
-                    'option' => $option,
-                ])
-            @endforeach
-        </div>
+        @foreach($options as $option)
+            @include($searchOptionItem, [
+                'option' => $option,
+                'styles' => $styles,
+            ])
+        @endforeach
     @elseif ($isSearching)
-        @include($searchNoResultsView)
+        @include($searchNoResultsView, [
+            'styles' => $styles,
+        ])
     @endif
 </div>

resources/views/search-selected-option.blade.php

@@ -1,16 +1,16 @@
 <div
     id="selected-value"
-    class="{{ $styles }}"
+    class="{{ $styles['searchSelectedOption'] }}"
 >
-    <p class="w-full">
+    <p class="{{ $styles['searchSelectedOptionTitle'] }}">
         {{ data_get($selectedOption, 'title', 'Override selectedOption method for a meaningful description') }}
     </p>
 
     <button
         type="button"
         wire:click.stop="selectValue(null)"
     >
-        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+        <svg class="{{ $styles['searchSelectedOptionReset'] }}" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd"
                   d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                   clip-rule="evenodd"

resources/views/search.blade.php

@@ -1,14 +1,16 @@
-<div id="options" class="relative">
+<div id="options" class="{{ $styles['search'] }}">
 
     @include($searchInputView, [
         'name' => $name,
         'placeholder' => $placeholder,
+        'styles' => $styles,
     ])
 
     @include($searchOptionsContainer, [
         'options' => $options,
         'emptyOptions' => $emptyOptions,
         'isSearching' => $isSearching,
+        'styles' => $styles,
     ])
 
 </div>

resources/views/select.blade.php

@@ -6,7 +6,7 @@
                 'name' => $name,
                 'options' => $options,
                 'placeholder' => $placeholder,
-                'styles' => 'p-2 rounded border w-full appearance-none',
+                'styles' => $styles,
             ])
         @endif
     </div>
@@ -16,7 +16,7 @@
             <div>
                 @if(!empty($value))
                     @include($searchSelectedOptionView, [
-                        'styles' => 'p-2 rounded border w-full bg-white flex items-center',
+                        'styles' => $styles,
                         'selectedOption' => $selectedOption,
                         'value' => $value,
                         'name' => $name,
@@ -28,6 +28,7 @@
                         'options' => $options,
                         'isSearching' => !empty($searchTerm),
                         'emptyOptions' => $options->isEmpty(),
+                        'styles' => $styles,
                     ])
                 @endif
             </div>

src/LivewireSelect.php

@@ -189,6 +189,23 @@ public function allDependenciesMet()
             ->isEmpty();
     }
 
+    public function styles()
+    {
+        return [
+            'default' => 'p-2 rounded border w-full appearance-none',
+
+            'searchSelectedOption' => 'p-2 rounded border w-full bg-white flex items-center',
+            'searchSelectedOptionTitle' => 'w-full text-gray-900',
+            'searchSelectedOptionReset' => 'h-4 w-4 text-gray-500',
+
+            'search' => 'relative',
+            'searchInput' => 'p-2 rounded border w-full rounded',
+            'searchOptionsContainer' => 'absolute top-0 left-0 mt-12 w-full',
+            'searchOptionItem' => 'bg-white p-3 border-b hover:bg-gray-100 cursor-pointer text-gray-700 text-sm',
+            'searchNoResults' => 'p-8 w-full bg-white border text-center text-xs text-gray-600',
+        ];
+    }
+
     public function render()
     {
         if ($this->searchable) {
@@ -209,11 +226,14 @@ public function render()
             ? $this->allDependenciesMet()
             : true;
 
+        $styles = $this->styles();
+
         return view($this->selectView)
             ->with([
                 'options' => $options,
                 'selectedOption' => $selectedOption ?? null,
                 'shouldShow' => $shouldShow,
+                'styles' => $styles,
             ]);
     }
 }