Skip to content

Commit 1810979

Browse files
lrljoelrljoe
authored
Search - Rationalisation of blades into files (#2094)
* Split Search into individal blades * Fix styling --------- Co-authored-by: lrljoe <lrljoe@users.noreply.github.com>
1 parent de8d3bb commit 1810979

File tree

6 files changed

+63
-51
lines changed

6 files changed

+63
-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: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22

33
namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
44

5+
use Livewire\Attributes\Computed;
6+
57
trait SearchHelpers
68
{
9+
#[Computed]
710
public function hasSearch(): bool
811
{
912
return $this->search != '';
1013
}
1114

15+
#[Computed]
1216
public function getSearch(): string
1317
{
1418
return $this->search ?? '';
@@ -27,6 +31,7 @@ public function getSearchStatus(): bool
2731
return $this->searchStatus;
2832
}
2933

34+
#[Computed]
3035
public function searchIsEnabled(): bool
3136
{
3237
return $this->getSearchStatus() === true;
@@ -42,6 +47,7 @@ public function getSearchVisibilityStatus(): bool
4247
return $this->searchVisibilityStatus;
4348
}
4449

50+
#[Computed]
4551
public function searchVisibilityIsEnabled(): bool
4652
{
4753
return $this->getSearchVisibilityStatus() === true;

0 commit comments

Comments
 (0)