Add Icon to Search Input

docs/search/available-methods.md

@@ -192,3 +192,39 @@ public function configure(): void
     $this->setTrimSearchStringDisabled();
 }
 ```
+
+## Search Icon
+
+To help customise, a "Search Input Icon" has been added, allowing for the addition of an icon to the search input field.
+
+At present, the Search Icon is only available as a "left aligned" icon.
+
+This is presently only available for Tailwind implementations
+
+### setSearchIcon
+
+This adds an Icon to the Search Input Field, which expects an icon path (e.g. heroicon-m-magnifying-glass)
+
+```php
+public function configure(): void
+{
+    $this->setSearchIcon('heroicon-m-magnifying-glass');
+}
+```
+
+### setSearchIconAttributes
+
+This allows you to specify attributes for the Search Icon for the Input Field.
+
+Note that classes will be injected prior to styles, due to the behaviour of icons.
+
+```php
+public function configure(): void
+{
+    $this->setSearchIconAttributes([
+        'class' => 'h-4 w-4',
+        'style' => 'color: #000000',
+    ]);
+}
+
+```

resources/views/components/tools/toolbar/items/search-field.blade.php

@@ -3,20 +3,34 @@
 <div 
     @class([
         'mb-3 mb-md-0 input-group' => $this->isBootstrap,
-        'flex rounded-md shadow-sm' => $this->isTailwind,
+        'rounded-md shadow-sm' => $this->isTailwind,
+        'flex' => !$this->hasSearchIcon,
+        'relative inline-flex flex-row' => $this->hasSearchIcon,
     ])>
+
+        @if($this->hasSearchIcon)
+            <div class="relative inset-y-0 left-6
+                        inline-flex items-center 
+                        pointer-events-none">
+
+                    @svg($this->getSearchIcon, $this->getSearchIconClasses, $this->getSearchIconOtherAttributes())
+
+            </div>
+        @endif
+
         <input
             wire:model{{ $this->getSearchOptions() }}="search"
             placeholder="{{ $this->getSearchPlaceholder() }}"
             type="text"
             {{ 
                 $attributes->merge($this->getSearchFieldAttributes())
                 ->class([
-                    'block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-none rounded-l-md focus:ring-0 focus:border-gray-300' => $this->isTailwind && $this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
-                    'block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-md focus:ring focus:ring-opacity-50' => $this->isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
+                    'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-none rounded-l-md focus:ring-0 focus:border-gray-300' => $this->isTailwind && $this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
+                    'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-md focus:ring focus:ring-opacity-50' => $this->isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
                     'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-gray-300' => $this->isTailwind && $this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
                     'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring-indigo-200' => $this->isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
-
+                    'block w-full' => !$this->hasSearchIcon,
+                    'pl-8 pr-4' => $this->hasSearchIcon,
                     'form-control' => $this->isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
                 ])
                 ->except(['default','default-styling','default-colors']) 

src/Traits/Configuration/SearchConfiguration.php

@@ -147,20 +147,6 @@ public function setSearchLazy(): self
         return $this;
     }
 
-    public function setSearchPlaceholder(string $placeholder): self
-    {
-        $this->searchPlaceholder = $placeholder;
-
-        return $this;
-    }
-
-    public function setSearchFieldAttributes(array $attributes = []): self
-    {
-        $this->setCustomAttributes('searchFieldAttributes', array_merge(['default' => false, 'default-colors' => false, 'default-styling' => false], $attributes));
-
-        return $this;
-    }
-
     public function setTrimSearchString(bool $status): self
     {
         $this->trimSearchString = $status;

src/Traits/Helpers/SearchHelpers.php

@@ -121,25 +121,6 @@ public function getSearchOptions(): string
         return '.live';
     }
 
-    public function getSearchPlaceholder(): string
-    {
-        if ($this->hasSearchPlaceholder()) {
-            return $this->searchPlaceholder;
-        }
-
-        return __($this->getLocalisationPath().'Search');
-    }
-
-    public function hasSearchPlaceholder(): bool
-    {
-        return $this->searchPlaceholder !== null;
-    }
-
-    public function getSearchFieldAttributes(): array
-    {
-        return $this->getCustomAttributes('searchFieldAttributes', true);
-    }
-
     public function shouldTrimSearchString(): bool
     {
         return $this->trimSearchString ?? false;

src/Traits/Styling/HasSearchFieldStyling.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling;
+
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Search\{HasSearchIcon, HasSearchInput};
+
+trait HasSearchFieldStyling
+{
+    use HasSearchIcon,
+        HasSearchInput;
+}

src/Traits/Styling/Search/HasSearchIcon.php

@@ -0,0 +1,76 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Search;
+
+use Livewire\Attributes\Computed;
+
+trait HasSearchIcon
+{
+    protected bool $searchIconSet = false;
+
+    protected ?string $searchIcon = null;
+
+    protected array $searchIconAttributes = ['class' => 'h-4 w-4', 'style' => 'color: #000000'];
+
+    #[Computed]
+    public function hasSearchIcon(): bool
+    {
+        return $this->searchIconSet;
+    }
+
+    #[Computed]
+    public function getSearchIcon(): string
+    {
+        return $this->hasSearchIcon() ? $this->searchIcon : 'heroicon-m-magnifying-glass';
+    }
+
+    #[Computed]
+    public function getSearchIconClasses(): string
+    {
+        return $this->getSearchIconAttributes()['class'];
+
+    }
+
+    #[Computed]
+    public function getSearchIconAttributes(): array
+    {
+        return $this->searchIconAttributes;
+    }
+
+    #[Computed]
+    public function getSearchIconOtherAttributes(): array
+    {
+        return collect($this->getSearchIconAttributes())->except('class')->toArray();
+    }
+
+    protected function setSearchIconStatus(bool $searchIconStatus): self
+    {
+        $this->searchIconSet = $searchIconStatus;
+
+        return $this;
+    }
+
+    protected function searchIconEnabled(): self
+    {
+        return $this->setSearchIconStatus(true);
+    }
+
+    protected function searchIconDisabled(): self
+    {
+        return $this->setSearchIconStatus(false);
+    }
+
+    protected function setSearchIcon(string $searchIcon): self
+    {
+        $this->searchIcon = $searchIcon;
+
+        return $this->searchIconEnabled();
+    }
+
+    protected function setSearchIconAttributes(array $searchIconAttributes): self
+    {
+        $this->searchIconAttributes = array_merge($this->searchIconAttributes, $searchIconAttributes);
+
+        return $this->searchIconEnabled();
+    }
+}

src/Traits/Styling/Search/HasSearchInput.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Search;
+
+use Livewire\Attributes\Computed;
+
+trait HasSearchInput
+{
+    protected array $searchFieldAttributes = [];
+
+    protected ?string $searchPlaceholder = null;
+
+    protected function setSearchFieldAttributes(array $attributes = []): self
+    {
+        $this->setCustomAttributes('searchFieldAttributes', array_merge(['default' => false, 'default-colors' => false, 'default-styling' => false], $attributes));
+
+        return $this;
+    }
+
+    public function getSearchFieldAttributes(): array
+    {
+        return $this->getCustomAttributes('searchFieldAttributes', true);
+    }
+
+    public function setSearchPlaceholder(string $placeholder): self
+    {
+        $this->searchPlaceholder = $placeholder;
+
+        return $this;
+    }
+
+    public function getSearchPlaceholder(): string
+    {
+        if ($this->hasSearchPlaceholder()) {
+            return $this->searchPlaceholder;
+        }
+
+        return __($this->getLocalisationPath().'Search');
+    }
+
+    public function hasSearchPlaceholder(): bool
+    {
+        return $this->searchPlaceholder !== null;
+    }
+}

src/Traits/WithSearch.php

@@ -8,20 +8,20 @@
 use Rappasoft\LaravelLivewireTables\Traits\Configuration\SearchConfiguration;
 use Rappasoft\LaravelLivewireTables\Traits\Core\QueryStrings\HasQueryStringForSearch;
 use Rappasoft\LaravelLivewireTables\Traits\Helpers\SearchHelpers;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\HasSearchFieldStyling;
 
 trait WithSearch
 {
     use SearchConfiguration,
         SearchHelpers;
     use HasQueryStringForSearch;
+    use HasSearchFieldStyling;
 
     public string $search = '';
 
     #[Locked]
     public bool $searchStatus = true;
 
-    protected ?string $searchPlaceholder = null;
-
     protected bool $searchVisibilityStatus = true;
 
     protected ?bool $searchFilterBlur = null;
@@ -36,8 +36,6 @@ trait WithSearch
 
     protected ?int $searchFilterThrottle = null;
 
-    protected array $searchFieldAttributes = [];
-
     protected bool $trimSearchString = false;
 
     // TODO