Initial Commit

Author: lrljoe

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

@@ -3,20 +3,38 @@
 <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">
+                <x-heroicon-m-magnifying-glass {{ $attributes->merge($this->getSearchIconAttributes())
+                    ->class([
+                        'w-4 h-4' => (($this->getSearchIconAttributes()['default'] ?? true) || ($this->getSearchIconAttributes()['default-styling'] ?? true)),
+                    ]) 
+                }}
+                />
+
+            </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

@@ -154,13 +154,6 @@ public function setSearchPlaceholder(string $placeholder): self
         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

@@ -135,11 +135,6 @@ 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/Configuration/SearchFieldStylingConfiguration.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
+
+trait SearchFieldStylingConfiguration
+{
+    protected function setSearchIcon(string $searchIcon): self
+    {
+        $this->searchIcon = $searchIcon;
+        $this->searchIconSet = true;
+
+        return $this;
+    }
+
+    public function setSearchIconAttributes(array $attributes = []): self
+    {
+        $this->setCustomAttributes('searchIconAttributes', array_merge(['default' => false, 'default-colors' => false, 'default-styling' => false], $attributes));
+
+        return $this;
+    }
+
+
+    public function setSearchFieldAttributes(array $attributes = []): self
+    {
+        $this->setCustomAttributes('searchFieldAttributes', array_merge(['default' => false, 'default-colors' => false, 'default-styling' => false], $attributes));
+
+        return $this;
+    }
+}

src/Traits/Styling/HasSearchFieldStyling.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling;
+
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\SearchFieldStylingConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\SearchFieldStylingHelpers;
+
+trait HasSearchFieldStyling
+{
+    use SearchFieldStylingConfiguration,
+    SearchFieldStylingHelpers;
+    
+    protected array $searchFieldAttributes = [];
+
+    protected bool $searchIconSet = false;
+
+    protected ?string $searchIcon = null;
+
+    protected array $searchIconAttributes = ['default-colors' => true, 'default-styling' => true];
+    
+}

src/Traits/Styling/Helpers/SearchFieldStylingHelpers.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
+
+use Livewire\Attributes\Computed;
+
+trait SearchFieldStylingHelpers
+{
+
+    public function getSearchFieldAttributes(): array
+    {
+        return $this->getCustomAttributes('searchFieldAttributes', true);
+    }
+
+    #[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 getSearchIconAttributes(): array
+    {
+        return $this->getCustomAttributes('searchIconAttributes', true, false);
+    }
+
+}

src/Traits/WithSearch.php

@@ -8,12 +8,14 @@
 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 = '';
 
@@ -36,10 +38,9 @@ trait WithSearch
 
     protected ?int $searchFilterThrottle = null;
 
-    protected array $searchFieldAttributes = [];
-
     protected bool $trimSearchString = false;
 
+
     // TODO
     public function applySearch(): Builder
     {