Skip to content

Commit e58bfba

Browse files
lrljoelrljoe
authored
Merge pull request #2178 from HussamAlhennawi/configuration-for-filter-pills-styling
Enable setting styles for filter pills as a configuration.
2 parents a941a16 + 4f0c1c2 commit e58bfba

File tree

7 files changed

+220
-38
lines changed

7 files changed

+220
-38
lines changed

‎docs/filters/available-component-methods.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,100 @@ public function configure(): void
121121
}
122122
```
123123

124+
## setFilterPillsItemAttributes
125+
Allows for customisation of the appearance of the "Filter Pills Item"
126+
127+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
128+
129+
#### default-colors
130+
Setting to false will disable the default colors for the Filter Pills Item, the default colors are:
131+
132+
Bootstrap: None
133+
134+
Tailwind: `bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900`
135+
136+
#### default-styling
137+
Setting to false will disable the default styling for the Filter Pills Item, the default styling is:
138+
139+
Bootstrap 4: `badge badge-pill badge-info d-inline-flex align-items-center`
140+
141+
Bootstrap 5: `badge rounded-pill bg-info d-inline-flex align-items-center`
142+
143+
Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize`
144+
145+
```php
146+
public function configure(): void
147+
{
148+
$this->setFilterPillsItemAttributes([
149+
'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900', // Add these classes to the filter pills item
150+
'default-colors' => false, // Do not output the default colors
151+
'default-styling' => true // Output the default styling
152+
]);
153+
}
154+
```
155+
156+
## setFilterPillsResetFilterButtonAttributes
157+
Allows for customisation of the appearance of the "Filter Pills Reset Filter Button"
158+
159+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
160+
161+
#### default-colors
162+
Setting to false will disable the default colors for the Filter Pills Reset Filter Button, the default colors are:
163+
164+
Bootstrap: None
165+
166+
Tailwind: `text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white`
167+
168+
#### default-styling
169+
Setting to false will disable the default styling for the Filter Pills Reset Filter Button, the default styling is:
170+
171+
Bootstrap: `text-white ml-2`
172+
173+
Tailwind: `flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none`
174+
175+
```php
176+
public function configure(): void
177+
{
178+
$this->setFilterPillsResetFilterButtonAttributes([
179+
'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the filter pills reset filter button
180+
'default-colors' => false, // Do not output the default colors
181+
'default-styling' => true // Output the default styling
182+
]);
183+
}
184+
```
185+
186+
## setFilterPillsResetAllButtonAttributes
187+
Allows for customisation of the appearance of the "Filter Pills Reset All Button"
188+
189+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
190+
191+
#### default-colors
192+
Setting to false will disable the default colors for the Filter Pills Reset All Button, the default colors are:
193+
194+
Bootstrap: None
195+
196+
Tailwind: `bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900`
197+
198+
#### default-styling
199+
Setting to false will disable the default styling for the Filter Pills Reset All Button, the default styling is:
200+
201+
Bootstrap 4: `badge badge-pill badge-light`
202+
203+
Bootstrap 5: `badge rounded-pill bg-light text-dark text-decoration-none`
204+
205+
Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium`
206+
207+
```php
208+
public function configure(): void
209+
{
210+
$this->setFilterPillsResetAllButtonAttributes([
211+
'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the filter pills reset all button
212+
'default-colors' => false, // Do not output the default colors
213+
'default-styling' => true // Output the default styling
214+
]);
215+
}
216+
```
217+
124218
---
125219

126220
## setFilterLayout

‎resources/views/components/tools/filter-pills/buttons/reset-all.blade.php‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
1-
@aware(['isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2-
@if ($isTailwind)
3-
<button
4-
wire:click.prevent="setFilterDefaults"
5-
@class([
6-
'focus:outline-none active:outline-none'
7-
])>
8-
<span @class([
9-
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
10-
'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900'
11-
])>
12-
{{ __($this->getLocalisationPath.'Clear') }}
13-
</span>
14-
</button>
15-
@else
16-
<a
17-
href="#"
18-
wire:click.prevent="setFilterDefaults"
19-
@class([
20-
'badge badge-pill badge-light' => $isBootstrap4,
21-
'badge rounded-pill bg-light text-dark text-decoration-none' => $isBootstrap5,
22-
])>
23-
{{ __($this->getLocalisationPath.'Clear') }}
24-
</a>
25-
@endif
1+
@aware(['isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2+
@if ($isTailwind)
3+
<button
4+
wire:click.prevent="setFilterDefaults"
5+
@class([
6+
'focus:outline-none active:outline-none'
7+
])>
8+
<span
9+
{{
10+
$attributes->merge($this->getFilterPillsResetAllButtonAttributes())
11+
->class([
12+
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium' => $this->getFilterPillsResetAllButtonAttributes()['default-styling'],
13+
'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900' => $this->getFilterPillsResetAllButtonAttributes()['default-colors'],
14+
])
15+
->except(['default-styling', 'default-colors'])
16+
}}
17+
>
18+
{{ __($this->getLocalisationPath.'Clear') }}
19+
</span>
20+
</button>
21+
@else
22+
<a
23+
href="#"
24+
wire:click.prevent="setFilterDefaults"
25+
{{
26+
$attributes->merge($this->getFilterPillsResetAllButtonAttributes())
27+
->class([
28+
'badge badge-pill badge-light' => $isBootstrap4 && $this->getFilterPillsResetAllButtonAttributes()['default-styling'],
29+
'badge rounded-pill bg-light text-dark text-decoration-none' => $isBootstrap5 && $this->getFilterPillsResetAllButtonAttributes()['default-styling'],
30+
])
31+
->except(['default-styling', 'default-colors'])
32+
}}
33+
>
34+
{{ __($this->getLocalisationPath.'Clear') }}
35+
</a>
36+
@endif

‎resources/views/components/tools/filter-pills/buttons/reset-filter.blade.php‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@
44
<button
55
wire:click="resetFilter('{{ $filterKey }}')"
66
type="button"
7-
@class([
8-
'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none',
9-
'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white',
10-
])
7+
{{
8+
$attributes->merge($this->getFilterPillsResetFilterButtonAttributes())
9+
->class([
10+
'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none' => $this->getFilterPillsResetFilterButtonAttributes()['default-styling'],
11+
'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $this->getFilterPillsResetFilterButtonAttributes()['default-colors'],
12+
])
13+
->except(['default-styling', 'default-colors'])
14+
}}
1115
>
1216
<span class="sr-only">{{ __($this->getLocalisationPath.'Remove filter option') }}</span>
1317
<x-heroicon-m-x-mark class="h-full" />
@@ -16,9 +20,13 @@
1620
<a
1721
href="#"
1822
wire:click="resetFilter('{{ $filterKey }}')"
19-
@class([
20-
'text-white ml-2' => ($isBootstrap),
21-
])
23+
{{
24+
$attributes->merge($this->getFilterPillsResetFilterButtonAttributes())
25+
->class([
26+
'text-white ml-2' => $isBootstrap && $this->getFilterPillsResetFilterButtonAttributes()['default-styling']
27+
])
28+
->except(['default-styling', 'default-colors'])
29+
}}
2230
>
2331
<span @class([
2432
'sr-only' => $isBootstrap4,

‎resources/views/components/tools/filter-pills/item.blade.php‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@
22
@props(['filterPillTitle', 'filterPillValue', 'filterSelectName', 'separator'])
33
<span
44
wire:key="{{ $tableName }}-filter-pill-{{ $filterSelectName }}"
5-
@class([
6-
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind,
7-
'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4,
8-
'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5,
9-
])
5+
{{
6+
$attributes->merge($this->getFilterPillsItemAttributes())
7+
->class([
8+
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $isTailwind && $this->getFilterPillsItemAttributes()['default-styling'],
9+
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && $this->getFilterPillsItemAttributes()['default-colors'],
10+
'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && $this->getFilterPillsItemAttributes()['default-styling'],
11+
'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && $this->getFilterPillsItemAttributes()['default-styling'],
12+
])
13+
->except(['default-styling', 'default-colors'])
14+
}}
1015
>
11-
{{ $filterPillTitle }}:
16+
{{ $filterPillTitle }}:
1217

1318
@if(is_array($filterPillValue))
1419
@foreach($filterPillValue as $filterPillArrayValue)

‎src/Traits/Core/Filters/HasFilterPillsStyling.php‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,24 @@
33
namespace Rappasoft\LaravelLivewireTables\Traits\Core\Filters;
44

55
use Livewire\Attributes\{Computed, Locked};
6+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\FilterPillsStylingConfiguration;
7+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\FilterPillsStylingHelpers;
68
use Rappasoft\LaravelLivewireTables\Views\Filter;
79

810
trait HasFilterPillsStyling
911
{
12+
use FilterPillsStylingConfiguration,
13+
FilterPillsStylingHelpers;
14+
1015
#[Locked]
1116
public bool $filterPillsStatus = true;
1217

18+
protected array $filterPillsItemAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
19+
20+
protected array $filterPillsResetFilterButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
21+
22+
protected array $filterPillsResetAllButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
23+
1324
public function setFilterPillsStatus(bool $status): self
1425
{
1526
$this->filterPillsStatus = $status;

‎src/Traits/Styling/Configuration/FilterPillsStylingConfiguration.php‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
4+
5+
trait FilterPillsStylingConfiguration
6+
{
7+
public function setFilterPillsItemAttributes(array $attributes = []): self
8+
{
9+
$this->filterPillsItemAttributes = [...$this->filterPillsItemAttributes, ...$attributes];
10+
11+
return $this;
12+
}
13+
14+
public function setFilterPillsResetFilterButtonAttributes(array $attributes = []): self
15+
{
16+
$this->filterPillsResetFilterButtonAttributes = [...$this->filterPillsResetFilterButtonAttributes, ...$attributes];
17+
18+
return $this;
19+
}
20+
21+
public function setFilterPillsResetAllButtonAttributes(array $attributes = []): self
22+
{
23+
$this->filterPillsResetAllButtonAttributes = [...$this->filterPillsResetAllButtonAttributes, ...$attributes];
24+
25+
return $this;
26+
}
27+
}

‎src/Traits/Styling/Helpers/FilterPillsStylingHelpers.php‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
4+
5+
use Livewire\Attributes\Computed;
6+
7+
trait FilterPillsStylingHelpers
8+
{
9+
#[Computed]
10+
public function getFilterPillsItemAttributes(): array
11+
{
12+
return $this->filterPillsItemAttributes;
13+
}
14+
15+
#[Computed]
16+
public function getFilterPillsResetFilterButtonAttributes(): array
17+
{
18+
return $this->filterPillsResetFilterButtonAttributes;
19+
}
20+
21+
#[Computed]
22+
public function getFilterPillsResetAllButtonAttributes(): array
23+
{
24+
return $this->filterPillsResetAllButtonAttributes;
25+
}
26+
}

0 commit comments

Comments
 (0)