Skip to content

Commit ce515bd

Browse files
lrljoelrljoe
committed
Add setFilterPopoverAttributes
1 parent fffa20d commit ce515bd

File tree

11 files changed

+348
-184
lines changed

11 files changed

+348
-184
lines changed

‎docs/filters/available-methods.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,30 @@ public function configure(): void
206206
}
207207
```
208208

209+
### setFilterPopoverAttributes
210+
211+
Allows for the customisation of the appearance of the Filter Popover Menu.
212+
213+
Note the addition of a "default-width" boolean, allowing you to customise the width more smoothly without impacting other applied classes.
214+
215+
You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.
216+
217+
You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array.
218+
219+
```php
220+
public function configure(): void
221+
{
222+
$this->setFilterPopoverAttributes(
223+
[
224+
'class' => 'w-96',
225+
'default-width' => false,
226+
'default-colors' => true,
227+
'default-styling' => true,
228+
'x-transition:enter' => 'transition ease-out duration-100',
229+
]
230+
);
231+
}
232+
```
209233

210234
----
211235

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

Lines changed: 38 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,60 @@
1-
@aware([ 'tableName','isBootstrap','isBootstrap4','isBootstrap5'])
1+
@aware(['tableName'])
22
@if($this->isBootstrap)
3-
<ul
4-
x-cloak
5-
@class([
6-
'dropdown-menu w-100 mt-md-5' => $this->isBootstrap4,
7-
'dropdown-menu w-100' => $this->isBootstrap5,
8-
])
9-
x-bind:class="{ 'show': filterPopoverOpen }"
10-
role="menu"
11-
>
3+
<ul x-cloak {{ $attributes
4+
->merge($this->getFilterPopoverAttributes)
5+
->merge(['role' => 'menu'])
6+
->class([
7+
'w-100' => $this->getFilterPopoverAttributes['default-width'] ?? true,
8+
'dropdown-menu mt-md-5' => $this->isBootstrap4,
9+
'dropdown-menu' => $this->isBootstrap5,
10+
]) }} x-bind:class="{ 'show': filterPopoverOpen }">
1211
@foreach ($this->getVisibleFilters() as $filter)
13-
<div
14-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-toolbar"
15-
@class([
16-
'p-2' => $this->isBootstrap,
17-
])
18-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper"
19-
>
12+
<div id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper" wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-toolbar" class="p-2">
2013
{{ $filter->setGenericDisplayData($this->getFilterGenericData)->render() }}
2114
</div>
2215
@endforeach
2316

2417
@if ($this->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
25-
<div
26-
@class([
27-
'dropdown-divider' => $this->isBootstrap,
28-
])
29-
>
30-
</div>
31-
32-
<button
33-
wire:click.prevent="setFilterDefaults" x-on:click="filterPopoverOpen = false"
34-
@class([
35-
'dropdown-item btn text-center' => $this->isBootstrap4,
36-
'dropdown-item text-center' => $this->isBootstrap5,
37-
])
38-
>
39-
{{ __($this->getLocalisationPath.'Clear') }}
40-
</button>
18+
<div class='dropdown-divider'></div>
19+
<x-livewire-tables::tools.toolbar.items.filter-popover.clear-button />
4120
@endif
4221
</ul>
4322
@else
44-
<div
45-
x-cloak x-show="filterPopoverOpen"
46-
x-transition:enter="transition ease-out duration-100"
47-
x-transition:enter-start="transform opacity-0 scale-95"
48-
x-transition:enter-end="transform opacity-100 scale-100"
49-
x-transition:leave="transition ease-in duration-75"
50-
x-transition:leave-start="transform opacity-100 scale-100"
51-
x-transition:leave-end="transform opacity-0 scale-95"
52-
class="origin-top-left absolute left-0 mt-2 w-full md:w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50 dark:bg-gray-700 dark:text-white dark:divide-gray-600"
53-
role="menu"
54-
aria-orientation="vertical"
55-
aria-labelledby="filters-menu"
56-
>
23+
<div x-cloak x-show="filterPopoverOpen"
24+
{{
25+
$attributes
26+
->merge($this->getFilterPopoverAttributes)
27+
->merge([
28+
'role' => 'menu',
29+
'aria-orientation' => 'vertical',
30+
'aria-labelledby' => 'filters-menu',
31+
'x-transition:enter' => 'transition ease-out duration-100',
32+
'x-transition:enter-start' => 'transform opacity-0 scale-95',
33+
'x-transition:enter-end' => 'transform opacity-100 scale-100',
34+
'x-transition:leave' => 'transition ease-in duration-75',
35+
'x-transition:leave-start' => 'transform opacity-100 scale-100',
36+
'x-transition:leave-end' => 'transform opacity-0 scale-95',
37+
])
38+
->class([
39+
'w-full md:w-56' => $this->getFilterPopoverAttributes['default-width'] ?? true,
40+
'origin-top-left absolute left-0 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 divide-y focus:outline-none z-50' => $this->getFilterPopoverAttributes['default-styling'] ?? true,
41+
'bg-white divide-gray-100 ring-black dark:bg-gray-700 dark:text-white dark:divide-gray-600' => $this->getFilterPopoverAttributes['default-colors'] ?? true,
42+
])
43+
->except(['x-cloak', 'x-show', 'default','default-width', 'default-styling','default-colors'])
44+
}}>
45+
5746
@foreach ($this->getVisibleFilters() as $filter)
5847
<div class="py-1" role="none">
59-
<div
60-
class="block px-4 py-2 text-sm text-gray-700 space-y-1"
61-
role="menuitem"
62-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper"
63-
>
48+
<div id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper" wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-toolbar" class="block px-4 py-2 text-sm text-gray-700 space-y-1" role="menuitem">
6449
{{ $filter->setGenericDisplayData($this->getFilterGenericData)->render() }}
6550
</div>
6651
</div>
6752
@endforeach
6853

6954
@if ($this->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
7055
<div class="block px-4 py-3 text-sm text-gray-700 dark:text-white" role="menuitem">
71-
<button
72-
x-on:click="filterPopoverOpen = false"
73-
wire:click.prevent="setFilterDefaults"
74-
type="button"
75-
class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-600"
76-
>
77-
{{ __($this->getLocalisationPath.'Clear') }}
78-
</button>
56+
<x-livewire-tables::tools.toolbar.items.filter-popover.clear-button />
7957
</div>
8058
@endif
8159
</div>
82-
@endif
60+
@endif

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<button type="button" wire:click.prevent="setFilterDefaults" x-on:click="filterPopoverOpen = false" @class([
2+
'w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-600' => $this->isTailwind,
3+
'dropdown-item btn text-center' => $this->isBootstrap4,
4+
'dropdown-item text-center' => $this->isBootstrap5,
5+
])>
6+
{{ __($this->getLocalisationPath.'Clear') }}
7+
</button>

‎src/Traits/Configuration/FilterConfiguration.php‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
44

55
use Rappasoft\LaravelLivewireTables\DataTransferObjects\FilterGenericData;
6-
use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
76

87
trait FilterConfiguration
98
{
@@ -70,51 +69,6 @@ public function setFilterPillsDisabled(): self
7069
return $this;
7170
}
7271

73-
public function setFilterLayout(string $type): self
74-
{
75-
if (! in_array($type, ['popover', 'slide-down'], true)) {
76-
throw new DataTableConfigurationException('Invalid filter layout type');
77-
}
78-
79-
$this->filterLayout = $type;
80-
81-
return $this;
82-
}
83-
84-
public function setFilterLayoutPopover(): self
85-
{
86-
$this->setFilterLayout('popover');
87-
88-
return $this;
89-
}
90-
91-
public function setFilterLayoutSlideDown(): self
92-
{
93-
$this->setFilterLayout('slide-down');
94-
95-
return $this;
96-
}
97-
98-
public function setFilterSlideDownDefaultStatus(bool $status): self
99-
{
100-
$this->filterSlideDownDefaultVisible = $status;
101-
102-
return $this;
103-
}
104-
105-
public function setFilterSlideDownDefaultStatusDisabled(): self
106-
{
107-
$this->setFilterSlideDownDefaultStatus(false);
108-
109-
return $this;
110-
}
111-
112-
public function setFilterSlideDownDefaultStatusEnabled(): self
113-
{
114-
$this->setFilterSlideDownDefaultStatus(true);
115-
116-
return $this;
117-
}
11872

11973
public function generateFilterGenericData(): array
12074
{

‎src/Traits/Helpers/FilterHelpers.php‎

Lines changed: 0 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -63,21 +63,6 @@ public function filtersVisibilityIsDisabled(): bool
6363
return $this->getFiltersVisibilityStatus() === false;
6464
}
6565

66-
public function getFilterSlideDownDefaultStatus(): bool
67-
{
68-
return $this->filterSlideDownDefaultVisible;
69-
}
70-
71-
public function filtersSlideDownIsDefaultVisible(): bool
72-
{
73-
return $this->getFilterSlideDownDefaultStatus() === true;
74-
}
75-
76-
public function filtersSlideDownIsDefaultHidden(): bool
77-
{
78-
return $this->getFilterSlideDownDefaultStatus() === false;
79-
}
80-
8166
public function getFilterPillsStatus(): bool
8267
{
8368
return $this->filterPillsStatus;
@@ -273,31 +258,6 @@ public function resetFilter($filter): void
273258

274259
}
275260

276-
public function getFilterLayout(): string
277-
{
278-
return $this->filterLayout;
279-
}
280-
281-
public function isFilterLayoutPopover(): bool
282-
{
283-
return $this->getFilterLayout() === 'popover';
284-
}
285-
286-
public function isFilterLayoutSlideDown(): bool
287-
{
288-
return $this->getFilterLayout() === 'slide-down';
289-
}
290-
291-
/**
292-
* Get whether any filter has a configured slide down row.
293-
*/
294-
public function hasFiltersWithSlidedownRows(): bool
295-
{
296-
return $this->getFilters()
297-
->reject(fn (Filter $filter) => ! $filter->hasFilterSlidedownRow())
298-
->count() > 0;
299-
}
300-
301261
/**
302262
* Get whether filter has a configured slide down row.
303263
*/
@@ -306,37 +266,6 @@ public function getVisibleFilters(): Collection
306266
return $this->getFilters()->reject(fn (Filter $filter) => $filter->isHiddenFromMenus());
307267
}
308268

309-
/**
310-
* Get filters sorted by row
311-
*
312-
* @return array<mixed>
313-
*/
314-
public function getFiltersByRow(): array
315-
{
316-
$orderedFilters = [];
317-
$filterList = ($this->hasFiltersWithSlidedownRows()) ? $this->getVisibleFilters()->sortBy('filterSlidedownRow') : $this->getVisibleFilters();
318-
if ($this->hasFiltersWithSlidedownRows()) {
319-
foreach ($filterList as $filter) {
320-
$orderedFilters[(string) $filter->getFilterSlidedownRow()][] = $filter;
321-
}
322-
323-
if (empty($orderedFilters['1'])) {
324-
$orderedFilters['1'] = (isset($orderedFilters['99']) ? $orderedFilters['99'] : []);
325-
if (isset($orderedFilters['99'])) {
326-
unset($orderedFilters['99']);
327-
}
328-
}
329-
} else {
330-
$orderedFilters = Arr::wrap($filterList);
331-
$orderedFilters['1'] = $orderedFilters['0'] ?? [];
332-
if (isset($orderedFilters['0'])) {
333-
unset($orderedFilters['0']);
334-
}
335-
}
336-
ksort($orderedFilters);
337-
338-
return $orderedFilters;
339-
}
340269

341270
public function hasFilterGenericData(): bool
342271
{

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
4+
5+
use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
6+
7+
trait FilterMenuStylingConfiguration
8+
{
9+
/**
10+
* Used to set attributes for the Filter Popover
11+
*/
12+
public function setFilterPopoverAttributes(array $filterPopoverAttributes): self
13+
{
14+
$this->filterPopoverAttributes = array_merge($this->filterPopoverAttributes, $filterPopoverAttributes);
15+
16+
return $this;
17+
}
18+
19+
public function setFilterLayout(string $type): self
20+
{
21+
if (! in_array($type, ['popover', 'slide-down'], true)) {
22+
throw new DataTableConfigurationException('Invalid filter layout type');
23+
}
24+
25+
$this->filterLayout = $type;
26+
27+
return $this;
28+
}
29+
30+
public function setFilterLayoutPopover(): self
31+
{
32+
$this->setFilterLayout('popover');
33+
34+
return $this;
35+
}
36+
37+
public function setFilterLayoutSlideDown(): self
38+
{
39+
$this->setFilterLayout('slide-down');
40+
41+
return $this;
42+
}
43+
44+
public function setFilterSlideDownDefaultStatus(bool $status): self
45+
{
46+
$this->filterSlideDownDefaultVisible = $status;
47+
48+
return $this;
49+
}
50+
51+
public function setFilterSlideDownDefaultStatusDisabled(): self
52+
{
53+
$this->setFilterSlideDownDefaultStatus(false);
54+
55+
return $this;
56+
}
57+
58+
public function setFilterSlideDownDefaultStatusEnabled(): self
59+
{
60+
$this->setFilterSlideDownDefaultStatus(true);
61+
62+
return $this;
63+
}
64+
65+
}

0 commit comments

Comments
 (0)