Skip to content

Commit

Permalink
Search - Rationalisation of blades into files (#2094)
Browse files Browse the repository at this point in the history 
* Split Search into individal blades

* Fix styling

---------

Co-authored-by: lrljoe <[email protected]>
  • Loading branch information
@lrljoe
lrljoe and lrljoe authored Nov 28, 2024
1 parent de8d3bb commit 1810979
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 51 deletions.
2 changes: 1 addition & 1 deletion resources/views/components/tools/toolbar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<x-livewire-tables::tools.toolbar.items.reorder-buttons />
@endif

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

Expand Down
57 changes: 7 additions & 50 deletions resources/views/components/tools/toolbar/items/search-field.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,20 @@
@aware(['component', 'tableName','isTailwind', 'isBootstrap'])
@aware(['isTailwind', 'isBootstrap'])

<div
@class([
'mb-3 mb-md-0 input-group' => $this->isBootstrap,
'rounded-md shadow-sm' => $this->isTailwind,
'mb-3 mb-md-0 input-group' => $isBootstrap,
'rounded-md shadow-sm' => $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>
<x-livewire-tables::tools.toolbar.items.search.icon :searchIcon="$this->getSearchIcon" :searchIconClasses="$this->getSearchIconClasses" :searchIconOtherAttributes="$this->getSearchIconOtherAttributes" />
@endif

<input
wire:model{{ $this->getSearchOptions() }}="search"
placeholder="{{ $this->getSearchPlaceholder() }}"
type="text"
{{
$attributes->merge($this->getSearchFieldAttributes())
->class([
'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'])
}}

/>
<x-livewire-tables::tools.toolbar.items.search.input />

@if ($this->hasSearch())
<div @class([
'd-inline-flex h-100 align-items-center ' => $this->isBootstrap,
])>
<div
wire:click="clearSearch"

@class([
'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $this->isBootstrap,
'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,
])
>
@if($this->isTailwind)
<x-heroicon-m-x-mark class='w-4 h-4' />
@else
<x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
@endif
</div>
</div>
@if ($this->hasSearch)
<x-livewire-tables::tools.toolbar.items.search.remove />
@endif


</div>
8 changes: 8 additions & 0 deletions resources/views/components/tools/toolbar/items/search/icon.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@props(['searchIcon','searchIconClasses','searchIconOtherAttributes'])
<div class="relative inset-y-0 left-6
inline-flex items-center
pointer-events-none">

@svg($searchIcon, $searchIconClasses, $searchIconOtherAttributes)

</div>
20 changes: 20 additions & 0 deletions resources/views/components/tools/toolbar/items/search/input.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@aware(['isTailwind', 'isBootstrap'])
<input
wire:model{{ $this->getSearchOptions() }}="search"
placeholder="{{ $this->getSearchPlaceholder() }}"
type="text"
{{
$attributes->merge($this->getSearchFieldAttributes())
->class([
'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)),
'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)),
'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)),
'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)),
'block w-full' => !$this->hasSearchIcon,
'pl-8 pr-4' => $this->hasSearchIcon,
'form-control' => $isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
])
->except(['default','default-styling','default-colors'])
}}

/>
21 changes: 21 additions & 0 deletions resources/views/components/tools/toolbar/items/search/remove.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

@aware(['isTailwind', 'isBootstrap'])

<div @class([
'd-inline-flex h-100 align-items-center ' => $isBootstrap,
])>
<div
wire:click="clearSearch"

@class([
'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $isBootstrap,
'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,
])
>
@if($isTailwind)
<x-heroicon-m-x-mark class='w-4 h-4' />
@else
<x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
@endif
</div>
</div>
6 changes: 6 additions & 0 deletions src/Traits/Helpers/SearchHelpers.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,17 @@

namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;

use Livewire\Attributes\Computed;

trait SearchHelpers
{
#[Computed]
public function hasSearch(): bool
{
return $this->search != '';
}

#[Computed]
public function getSearch(): string
{
return $this->search ?? '';
Expand All @@ -27,6 +31,7 @@ public function getSearchStatus(): bool
return $this->searchStatus;
}

#[Computed]
public function searchIsEnabled(): bool
{
return $this->getSearchStatus() === true;
Expand All @@ -42,6 +47,7 @@ public function getSearchVisibilityStatus(): bool
return $this->searchVisibilityStatus;
}

#[Computed]
public function searchVisibilityIsEnabled(): bool
{
return $this->getSearchVisibilityStatus() === true;
Expand Down

0 comments on commit 1810979

Please sign in to comment.