Skip to content

Commit 6673286

Browse files
HussamAlhennawiHussamAlhennawi
committed
Enable setting styles for filter button and filter button badge as a configuration.
1 parent e58bfba commit 6673286

File tree

6 files changed

+194
-64
lines changed

6 files changed

+194
-64
lines changed

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,67 @@ public function configure(): void
8383
}
8484
```
8585

86+
## setFilterButtonAttributes
87+
Allows for customisation of the appearance of the "Filter Button"
88+
89+
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.
90+
91+
#### default-colors
92+
Setting to false will disable the default colors for the Filter Button, the default colors are:
93+
94+
Bootstrap: None
95+
96+
Tailwind: `border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600`
97+
98+
#### default-styling
99+
Setting to false will disable the default styling for the Filter Button, the default styling is:
100+
101+
Bootstrap: `btn dropdown-toggle d-block w-100 d-md-inline`
102+
103+
Tailwind: `inline-flex justify-center w-full rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50`
104+
105+
```php
106+
public function configure(): void
107+
{
108+
$this->setFilterPillsItemAttributes([
109+
'class' => 'border-rose-300 bg-white text-rose-700 hover:bg-rose-50 focus:border-stone-300 focus:ring-stone-200', // Add these classes to the filter button
110+
'default-colors' => false, // Do not output the default colors
111+
'default-styling' => true // Output the default styling
112+
]);
113+
}
114+
```
115+
116+
## setFilterButtonBadgeAttributes
117+
Allows for customisation of the appearance of the "Filter Button Badge"
118+
119+
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.
120+
121+
#### default-colors
122+
Setting to false will disable the default colors for the Filter Button Badge, the default colors are:
123+
124+
Bootstrap: None
125+
126+
Tailwind: `bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900`
127+
128+
#### default-styling
129+
Setting to false will disable the default styling for the Filter Button Badge, the default styling is:
130+
131+
Bootstrap: `badge badge-info`
132+
133+
Tailwind: `ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize`
134+
135+
```php
136+
137+
public function configure(): void
138+
{
139+
$this->setFilterButtonBadgeAttributes([
140+
'class' => 'bg-rose-100 text-rose-800', // Add these classes to the filter button badge
141+
'default-colors' => false, // Do not output the default colors
142+
'default-styling' => true // Output the default styling
143+
]);
144+
}
145+
```
146+
86147
---
87148

88149
## setFilterPillsStatus

‎resources/views/components/tools/toolbar/items/filter-button.blade.php‎

Lines changed: 75 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,75 @@
1-
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2-
@props([])
3-
4-
<div
5-
@class([
6-
'ml-0 ml-md-2 mb-3 mb-md-0' => $this->isBootstrap4,
7-
'ms-0 ms-md-2 mb-3 mb-md-0' => $this->isBootstrap5 && $this->searchIsEnabled(),
8-
'mb-3 mb-md-0' => $this->isBootstrap5 && !$this->searchIsEnabled(),
9-
])
10-
>
11-
<div
12-
@if ($this->isFilterLayoutPopover())
13-
x-data="{ filterPopoverOpen: false }"
14-
x-on:keydown.escape.stop="if (!this.childElementOpen) { filterPopoverOpen = false }"
15-
x-on:mousedown.away="if (!this.childElementOpen) { filterPopoverOpen = false }"
16-
@endif
17-
@class([
18-
'btn-group d-block d-md-inline' => $this->isBootstrap,
19-
'relative block md:inline-block text-left' => $this->isTailwind,
20-
])
21-
>
22-
<div>
23-
<button
24-
type="button"
25-
@class([
26-
'btn dropdown-toggle d-block w-100 d-md-inline' => $this->isBootstrap,
27-
'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $this->isTailwind,
28-
])
29-
@if ($this->isFilterLayoutPopover()) x-on:click="filterPopoverOpen = !filterPopoverOpen"
30-
aria-haspopup="true"
31-
x-bind:aria-expanded="filterPopoverOpen"
32-
aria-expanded="true"
33-
@endif
34-
@if ($this->isFilterLayoutSlideDown()) x-on:click="filtersOpen = !filtersOpen" @endif
35-
>
36-
{{ __($this->getLocalisationPath.'Filters') }}
37-
38-
@if ($count = $this->getFilterBadgeCount())
39-
<span @class([
40-
'badge badge-info' => $this->isBootstrap,
41-
'ml-1 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' => $this->isTailwind,
42-
])>
43-
{{ $count }}
44-
</span>
45-
@endif
46-
47-
@if($this->isTailwind)
48-
<x-heroicon-o-funnel class="-mr-1 ml-2 h-5 w-5" />
49-
@else
50-
<span @class([
51-
'caret' => $this->isBootstrap,
52-
])></span>
53-
@endif
54-
55-
</button>
56-
</div>
57-
58-
@if ($this->isFilterLayoutPopover())
59-
<x-livewire-tables::tools.toolbar.items.filter-popover />
60-
@endif
61-
62-
</div>
63-
</div>
1+
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2+
@props([])
3+
4+
<div
5+
@class([
6+
'ml-0 ml-md-2 mb-3 mb-md-0' => $this->isBootstrap4,
7+
'ms-0 ms-md-2 mb-3 mb-md-0' => $this->isBootstrap5 && $this->searchIsEnabled(),
8+
'mb-3 mb-md-0' => $this->isBootstrap5 && !$this->searchIsEnabled(),
9+
])
10+
>
11+
<div
12+
@if ($this->isFilterLayoutPopover())
13+
x-data="{ filterPopoverOpen: false }"
14+
x-on:keydown.escape.stop="if (!this.childElementOpen) { filterPopoverOpen = false }"
15+
x-on:mousedown.away="if (!this.childElementOpen) { filterPopoverOpen = false }"
16+
@endif
17+
@class([
18+
'btn-group d-block d-md-inline' => $this->isBootstrap,
19+
'relative block md:inline-block text-left' => $this->isTailwind,
20+
])
21+
>
22+
<div>
23+
<button
24+
type="button"
25+
{{
26+
$attributes->merge($this->getFilterButtonAttributes())
27+
->class([
28+
'btn dropdown-toggle d-block w-100 d-md-inline' => $this->isBootstrap && $this->getFilterButtonAttributes()['default-styling'],
29+
'inline-flex justify-center w-full rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $this->isTailwind && $this->getFilterButtonAttributes()['default-styling'],
30+
'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $this->isTailwind && $this->getFilterButtonAttributes()['default-colors'],
31+
])
32+
->except(['default-styling', 'default-colors'])
33+
}}
34+
@if ($this->isFilterLayoutPopover()) x-on:click="filterPopoverOpen = !filterPopoverOpen"
35+
aria-haspopup="true"
36+
x-bind:aria-expanded="filterPopoverOpen"
37+
aria-expanded="true"
38+
@endif
39+
@if ($this->isFilterLayoutSlideDown()) x-on:click="filtersOpen = !filtersOpen" @endif
40+
>
41+
{{ __($this->getLocalisationPath.'Filters') }}
42+
43+
@if ($count = $this->getFilterBadgeCount())
44+
<span
45+
{{
46+
$attributes->merge($this->getFilterButtonBadgeAttributes())
47+
->class([
48+
'badge badge-info' => $this->isBootstrap && $this->getFilterButtonBadgeAttributes()['default-styling'],
49+
'ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $this->isTailwind && $this->getFilterButtonBadgeAttributes()['default-styling'],
50+
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $this->isTailwind && $this->getFilterButtonBadgeAttributes()['default-colors'],
51+
])
52+
->except(['default-styling', 'default-colors'])
53+
}}
54+
>
55+
{{ $count }}
56+
</span>
57+
@endif
58+
59+
@if($this->isTailwind)
60+
<x-heroicon-o-funnel class="-mr-1 ml-2 h-5 w-5" />
61+
@else
62+
<span @class([
63+
'caret' => $this->isBootstrap,
64+
])></span>
65+
@endif
66+
67+
</button>
68+
</div>
69+
70+
@if ($this->isFilterLayoutPopover())
71+
<x-livewire-tables::tools.toolbar.items.filter-popover />
72+
@endif
73+
74+
</div>
75+
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@ trait HandlesFilterTraits
1010
HasFilterPillsStyling,
1111
HasFilterQueryString,
1212
HasFiltersStatus,
13-
HasFiltersVisibility;
13+
HasFiltersVisibility,
14+
HasFilterButtonStyling;
1415
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Core\Filters;
4+
5+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\FilterButtonStylingConfiguration;
6+
use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\FilterButtonStylingHelpers;
7+
8+
trait HasFilterButtonStyling
9+
{
10+
use FilterButtonStylingConfiguration,
11+
FilterButtonStylingHelpers;
12+
13+
protected array $filterButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
14+
15+
protected array $filterButtonBadgeAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
16+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
4+
5+
trait FilterButtonStylingConfiguration
6+
{
7+
public function setFilterButtonAttributes(array $attributes = []): self
8+
{
9+
$this->filterButtonAttributes = [...$this->filterButtonAttributes, ...$attributes];
10+
11+
return $this;
12+
}
13+
14+
public function setFilterButtonBadgeAttributes(array $attributes = []): self
15+
{
16+
$this->filterButtonBadgeAttributes = [...$this->filterButtonBadgeAttributes, ...$attributes];
17+
18+
return $this;
19+
}
20+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
4+
5+
use Livewire\Attributes\Computed;
6+
7+
trait FilterButtonStylingHelpers
8+
{
9+
#[Computed]
10+
public function getFilterButtonAttributes(): array
11+
{
12+
return $this->filterButtonAttributes;
13+
}
14+
15+
#[Computed]
16+
public function getFilterButtonBadgeAttributes(): array
17+
{
18+
return $this->filterButtonBadgeAttributes;
19+
}
20+
}

0 commit comments

Comments
 (0)