v3 - Add setSearchFieldAttribute Options (#1361)

* Add setSearchFieldAttribute Options


---------

Co-authored-by: lrljoe <[email protected]>

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [Unreleased] - 3.x - setSearchFieldAttributes
+- Add setSearchFieldAttributes() and getSearchFieldAttributes()
+
 ## [Unreleased] - 3.x - Missing Tests
 
 ## [Unreleased] - 3.x - Missing pagination tests

docs/datatable/available-methods.md

@@ -271,6 +271,31 @@ public function configure(): void
     return ['default' => true];
   });
 }
+
+```
+### setSearchFieldAttributes
+
+Set a list of attributes to override on the search field
+
+```php
+public function configure(): void
+{
+  $this->setSearchFieldAttributes([
+    'class' => 'this that',
+  ]);
+}
+```
+
+By default, this replaces the default classes on the search field, if you would like to keep them, set the default flag to true.
+
+```php
+public function configure(): void
+{
+  $this->setSearchFieldAttributes([
+    'default' => true,
+    'class' => 'added these classes',
+  ]);
+}
 ```
 
 ## Offline

resources/views/components/tools/toolbar/bootstrap.blade.php

@@ -45,9 +45,11 @@
                     wire:model{{ $component->getSearchOptions() }}="search"
                     placeholder="{{ $component->getSearchPlaceholder() }}"
                     type="text"
-                    @class([
-                        'form-control' => $component->isBootstrap(),
-                    ])
+                    {{ 
+                        $attributes->merge($component->getSearchFieldAttributes())
+                        ->class(['form-control' => $component->getSearchFieldAttributes()['default'] ?? true])
+                        ->except('default') 
+                    }}
                 >
 
                 @if ($component->hasSearch())

resources/views/components/tools/toolbar/tailwind.blade.php

@@ -35,7 +35,12 @@ class="inline-flex justify-center items-center w-full md:w-auto px-4 py-2 border
                     wire:model{{ $component->getSearchOptions() }}="search"
                     placeholder="{{ $component->getSearchPlaceholder() }}"
                     type="text"
-                    class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 @if ($component->hasSearch()) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif"
+                    {{ 
+                        $attributes->merge($component->getSearchFieldAttributes())
+                        ->class(['block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 @if ($component->hasSearch()) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif' => $component->getSearchFieldAttributes()['default'] ?? true])
+                        ->except('default') 
+                    }}
+
                 />
 
                 @if ($component->hasSearch())

src/Traits/Configuration/SearchConfiguration.php

@@ -149,4 +149,11 @@ public function setSearchPlaceholder(string $placeholder): self
 
         return $this;
     }
+
+    public function setSearchFieldAttributes(array $attributes = []): self
+    {
+        $this->searchFieldAttributes = $attributes;
+
+        return $this;
+    }
 }

src/Traits/Helpers/SearchHelpers.php

@@ -130,4 +130,9 @@ public function hasSearchPlaceholder(): bool
     {
         return $this->searchPlaceholder !== null;
     }
+
+    public function getSearchFieldAttributes(): array
+    {
+        return count($this->searchFieldAttributes) ? $this->searchFieldAttributes : ['default' => true];
+    }
 }

src/Traits/WithSearch.php

@@ -31,6 +31,8 @@ trait WithSearch
 
     public ?string $searchPlaceholder = null;
 
+    protected array $searchFieldAttributes = [];
+
     // TODO
     public function applySearch(): Builder
     {

tests/Traits/Configuration/SearchConfigurationTest.php

@@ -193,4 +193,15 @@ public function can_set_search_placeholder(): void
         $this->assertSame('Anthony', $this->basicTable->getSearchPlaceholder());
 
     }
+
+    /** @test */
+    public function can_set_search_field_attributes(): void
+    {
+        $this->assertSame(['default' => true], $this->basicTable->getSearchFieldAttributes());
+
+        $this->basicTable->setSearchFieldAttributes(['class' => 'bg-blue', 'style' => 'font-size: 3em;']);
+
+        $this->assertSame(['class' => 'bg-blue', 'style' => 'font-size: 3em;'], $this->basicTable->getSearchFieldAttributes());
+
+    }
 }