Skip to content

Commit ea69c65

Browse files
lrljoelrljoe
committed
Split Search into individal blades
1 parent 772c49c commit ea69c65

File tree

6 files changed

+62
-51
lines changed

6 files changed

+62
-51
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<x-livewire-tables::tools.toolbar.items.reorder-buttons />
2929
@endif
3030

31-
@if ($this->searchIsEnabled() && $this->searchVisibilityIsEnabled())
31+
@if ($this->searchIsEnabled && $this->searchVisibilityIsEnabled)
3232
<x-livewire-tables::tools.toolbar.items.search-field />
3333
@endif
3434

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

Lines changed: 7 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,20 @@
1-
@aware(['component', 'tableName','isTailwind', 'isBootstrap'])
1+
@aware(['isTailwind', 'isBootstrap'])
22

33
<div
44
@class([
5-
'mb-3 mb-md-0 input-group' => $this->isBootstrap,
6-
'rounded-md shadow-sm' => $this->isTailwind,
5+
'mb-3 mb-md-0 input-group' => $isBootstrap,
6+
'rounded-md shadow-sm' => $isTailwind,
77
'flex' => !$this->hasSearchIcon,
88
'relative inline-flex flex-row' => $this->hasSearchIcon,
99
])>
1010

1111
@if($this->hasSearchIcon)
12-
<div class="relative inset-y-0 left-6
13-
inline-flex items-center
14-
pointer-events-none">
15-
16-
@svg($this->getSearchIcon, $this->getSearchIconClasses, $this->getSearchIconOtherAttributes())
17-
18-
</div>
12+
<x-livewire-tables::tools.toolbar.items.search.icon :searchIcon="$this->getSearchIcon" :searchIconClasses="$this->getSearchIconClasses" :searchIconOtherAttributes="$this->getSearchIconOtherAttributes" />
1913
@endif
2014

21-
<input
22-
wire:model{{ $this->getSearchOptions() }}="search"
23-
placeholder="{{ $this->getSearchPlaceholder() }}"
24-
type="text"
25-
{{
26-
$attributes->merge($this->getSearchFieldAttributes())
27-
->class([
28-
'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)),
29-
'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)),
30-
'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)),
31-
'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)),
32-
'block w-full' => !$this->hasSearchIcon,
33-
'pl-8 pr-4' => $this->hasSearchIcon,
34-
'form-control' => $this->isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
35-
])
36-
->except(['default','default-styling','default-colors'])
37-
}}
38-
39-
/>
15+
<x-livewire-tables::tools.toolbar.items.search.input />
4016

41-
@if ($this->hasSearch())
42-
<div @class([
43-
'd-inline-flex h-100 align-items-center ' => $this->isBootstrap,
44-
])>
45-
<div
46-
wire:click="clearSearch"
47-
48-
@class([
49-
'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $this->isBootstrap,
50-
'inline-flex h-full items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $this->isTailwind,
51-
])
52-
>
53-
@if($this->isTailwind)
54-
<x-heroicon-m-x-mark class='w-4 h-4' />
55-
@else
56-
<x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
57-
@endif
58-
</div>
59-
</div>
17+
@if ($this->hasSearch)
18+
<x-livewire-tables::tools.toolbar.items.search.remove />
6019
@endif
61-
62-
6320
</div>

‎resources/views/components/tools/toolbar/items/search/icon.blade.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@props(['searchIcon','searchIconClasses','searchIconOtherAttributes'])
2+
<div class="relative inset-y-0 left-6
3+
inline-flex items-center
4+
pointer-events-none">
5+
6+
@svg($searchIcon, $searchIconClasses, $searchIconOtherAttributes)
7+
8+
</div>

‎resources/views/components/tools/toolbar/items/search/input.blade.php‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@aware(['isTailwind', 'isBootstrap'])
2+
<input
3+
wire:model{{ $this->getSearchOptions() }}="search"
4+
placeholder="{{ $this->getSearchPlaceholder() }}"
5+
type="text"
6+
{{
7+
$attributes->merge($this->getSearchFieldAttributes())
8+
->class([
9+
'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' => $isTailwind && $this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
10+
'rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 rounded-md focus:ring focus:ring-opacity-50' => $isTailwind && !$this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-styling'] ?? true)),
11+
'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-gray-300' => $isTailwind && $this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
12+
'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring-indigo-200' => $isTailwind && !$this->hasSearch() && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
13+
'block w-full' => !$this->hasSearchIcon,
14+
'pl-8 pr-4' => $this->hasSearchIcon,
15+
'form-control' => $isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
16+
])
17+
->except(['default','default-styling','default-colors'])
18+
}}
19+
20+
/>

‎resources/views/components/tools/toolbar/items/search/remove.blade.php‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
@aware(['isTailwind', 'isBootstrap'])
3+
4+
<div @class([
5+
'd-inline-flex h-100 align-items-center ' => $isBootstrap,
6+
])>
7+
<div
8+
wire:click="clearSearch"
9+
10+
@class([
11+
'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $isBootstrap,
12+
'inline-flex h-full items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind,
13+
])
14+
>
15+
@if($isTailwind)
16+
<x-heroicon-m-x-mark class='w-4 h-4' />
17+
@else
18+
<x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
19+
@endif
20+
</div>
21+
</div>

‎src/Traits/Helpers/SearchHelpers.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<?php
22

33
namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
4+
use Livewire\Attributes\Computed;
45

56
trait SearchHelpers
67
{
8+
#[Computed]
79
public function hasSearch(): bool
810
{
911
return $this->search != '';
1012
}
1113

14+
#[Computed]
1215
public function getSearch(): string
1316
{
1417
return $this->search ?? '';
@@ -27,6 +30,7 @@ public function getSearchStatus(): bool
2730
return $this->searchStatus;
2831
}
2932

33+
#[Computed]
3034
public function searchIsEnabled(): bool
3135
{
3236
return $this->getSearchStatus() === true;
@@ -42,6 +46,7 @@ public function getSearchVisibilityStatus(): bool
4246
return $this->searchVisibilityStatus;
4347
}
4448

49+
#[Computed]
4550
public function searchVisibilityIsEnabled(): bool
4651
{
4752
return $this->getSearchVisibilityStatus() === true;

0 commit comments

Comments
 (0)