Skip to content

Commit d168297

Browse files
lrljoelrljoe
committed
Add Custom FIlter Input Attributes, Cleanup Filter Tests
1 parent 493959c commit d168297

File tree

58 files changed

+1284
-673
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+1284
-673
lines changed

‎docs/filter-types/filters-number.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,27 @@ weight: 9
55

66
Number filters are just HTML number inputs.
77

8+
```php
9+
public function filters(): array
10+
{
11+
return [
12+
NumberFilter::make('Amount')
13+
->filter(function(Builder $builder, string $value) {
14+
$builder->where('amount', '<', $value);
15+
}),
16+
];
17+
}
18+
```
19+
20+
Historically, min/max/placeholders were set using the "config" option, which is still available. However, it is strongly recommended to use the new setInputAttributes for enhanced customisation.
21+
22+
## Old Behaviour
23+
The following would:
24+
- Set a min of 0
25+
- Set a max of 100
26+
- Add a placeholder
27+
- Keep the default colors & styling
28+
829
```php
930
public function filters(): array
1031
{
@@ -21,3 +42,28 @@ public function filters(): array
2142
];
2243
}
2344
```
45+
46+
## New Behaviour
47+
The following would:
48+
- Set a min of 5
49+
- Set a max of 20
50+
- Set steps to be 0.5
51+
- Add a placeholder
52+
- Keep the default colors & styling
53+
54+
```php
55+
public function filters(): array
56+
{
57+
return [
58+
NumberFilter::make('Age')
59+
->setInputAttributes([
60+
'min' => '5', // Minimum Value Accepted
61+
'max' => '20', // Maximum Value Accepted
62+
'step' => '0.5', // Set step
63+
'placeholder' => 'Enter Number 0 - 100', // A placeholder value
64+
'default-colors' => true,
65+
'default-styling' => true,
66+
]),
67+
];
68+
}
69+
```

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,58 @@ TextFilter::make('Name')
208208
),
209209
```
210210

211+
## setInputAttributes
212+
Allows for customising the attributes that will apply to the input field for the filter.
213+
214+
By default, this replaces the default classes on the Filter Input, if you would like to keep them, set the default-styling and/or default-colors flags to true.
215+
216+
### TextFilter Example
217+
The following would:
218+
- Set a maxlength of 75
219+
- Set a placeholder of "Enter a Name"
220+
- Replace the default colors
221+
- Retain the default styling (e.g. rounding/shadow)
222+
223+
```php
224+
public function filters(): array
225+
{
226+
return [
227+
TextFilter::make('Name')
228+
->setInputAttributes([
229+
'maxlength' => '75',
230+
'placeholder' => 'Enter a Name',
231+
'class' => 'text-white bg-red-500 dark:bg-red-500',
232+
'default-colors' => false,
233+
'default-styling' => true,
234+
]),
235+
];
236+
}
237+
```
238+
239+
### NumberFilter Example
240+
The following would:
241+
- Set a min of 5
242+
- Set a max of 20
243+
- Set steps to be 0.5
244+
- Keep the default colors & styling
245+
246+
```php
247+
public function filters(): array
248+
{
249+
return [
250+
NumberFilter::make('Age')
251+
->setInputAttributes([
252+
'min' => '5',
253+
'max' => '20',
254+
'step' => '0.5',
255+
'default-colors' => true,
256+
'default-styling' => true,
257+
]),
258+
];
259+
}
260+
```
261+
262+
211263
## setCustomView
212264
Use a fully custom view for a filter. This will utilise solely your view when rendering this filter. Note that the following methods will no longer apply to a filter using this:
213265
- setCustomFilterLabel

‎resources/views/components/tools/filters/boolean.blade.php‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
88
<input id="thisId" type="checkbox" name="switch" class="hidden" :checked="value" />
99

10-
<button id="{{ $tableName }}-filter-{{ $filter->getKey() }}"
11-
x-ref="switchButton"
12-
type="button"
13-
@click="toggleStatusWithUpdate"
14-
:class="(value == 1 || value == true) ? 'bg-blue-600' : 'bg-neutral-200'"
15-
class="relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10"
16-
x-cloak>
17-
<span :class="(value == 1 || value == true) ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out bg-white rounded-full shadow-md"></span>
10+
<button x-cloak {{ $filterInputAttributes->merge([
11+
":class" => "(value == 1 || value == true) ? '".$filterInputAttributes['activeColor']."' : '".$filterInputAttributes['inactiveColor']."'",
12+
])
13+
->class([
14+
'relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10' => ($filterInputAttributes['default-styling'] ?? true)
15+
])
16+
->except(['default-styling','default-colors','activeColor','inactiveColor','blobColor'])
17+
}}>
18+
<span :class="(value == 1 || value == true) ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out rounded-full shadow-md {{ $filterInputAttributes['blobColor'] }}"></span>
1819
</button>
1920
<template x-if="(value == 1 || value == true)">
2021
<button @click="toggleStatusWithReset" type="button"

‎resources/views/components/tools/filters/date.blade.php‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,14 @@
44
'rounded-md shadow-sm' => $isTailwind,
55
'mb-3 mb-md-0 input-group' => $isBootstrap,
66
])>
7-
<input {{ $filter->getWireMethod('filterComponents.'.$filter->getKey()) }}
8-
wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
9-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
10-
type="date"
11-
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
12-
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
13-
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
14-
@class([
15-
'block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
16-
'form-control' => $isBootstrap,
17-
])
18-
/>
7+
<input {!! $filter->getWireMethod('filterComponents.'.$filter->getKey()) !!} {{
8+
$filterInputAttributes->merge()
9+
->class([
10+
'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
11+
'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
12+
'form-control' => $isBootstrap,
13+
])
14+
->except(['default-styling','default-colors'])
15+
}} />
1916
</div>
2017
</div>

‎resources/views/components/tools/filters/datetime.blade.php‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,14 @@
55
'rounded-md shadow-sm' => $isTailwind,
66
'mb-3 mb-md-0 input-group' => $isBootstrap,
77
])>
8-
<input {{ $filter->getWireMethod('filterComponents.'.$filter->getKey()) }}
9-
wire:key="{{ $filter->generateWireKey($tableName, 'datetime') }}"
10-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
11-
type="datetime-local"
12-
@if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
13-
@if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
14-
@if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
15-
@class([
16-
'block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind,
17-
'form-control' => $isBootstrap,
18-
])
19-
/>
8+
<input {!! $filter->getWireMethod('filterComponents.'.$filter->getKey()) !!} {{
9+
$filterInputAttributes->merge()
10+
->class([
11+
'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
12+
'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
13+
'form-control' => $isBootstrap,
14+
])
15+
->except(['default-styling','default-colors'])
16+
}} />
2017
</div>
2118
</div>

‎resources/views/components/tools/filters/multi-select-dropdown.blade.php‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,22 @@
22
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
33

44
@if ($isTailwind)
5-
<div class="rounded-md shadow-sm">
6-
<select multiple
7-
{{ $filter->getWireMethod('filterComponents.'.$filter->getKey()) }}
8-
wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
9-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
10-
class="block w-full transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
11-
>
12-
@if ($filter->getFirstOption() !== '')
13-
<option @if($filter->isEmpty($this)) selected @endif value="all">{{ $filter->getFirstOption()}}</option>
14-
@endif
15-
@foreach($filter->getOptions() as $key => $value)
16-
@if (is_iterable($value))
17-
<optgroup label="{{ $key }}">
18-
@foreach ($value as $optionKey => $optionValue)
19-
<option value="{{ $optionKey }}">{{ $optionValue }}</option>
20-
@endforeach
21-
</optgroup>
22-
@else
23-
<option value="{{ $key }}">{{ $value }}</option>
24-
@endif
25-
@endforeach
26-
</select>
27-
</div>
28-
@elseif ($isBootstrap)
5+
<div class="rounded-md shadow-sm">
6+
@endif
297
<select multiple
30-
{{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
31-
wire:key="{{ $filter->generateWireKey($tableName, 'multiselectdropdown') }}"
32-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
33-
class="{{ $isBootstrap4 ? 'form-control' : 'form-select' }}"
34-
>
35-
@if ($filter->getFirstOption() != "")
8+
{!! $filter->getWireMethod('filterComponents.'.$filter->getKey()) !!} {{
9+
$filterInputAttributes->merge([
10+
'wire:key' => $filter->generateWireKey($tableName, 'multiselectdropdown'),
11+
])
12+
->class([
13+
'block w-full transition duration-150 ease-in-out rounded-md shadow-sm focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
14+
'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
15+
'form-control' => $isBootstrap4 && ($filterInputAttributes['default-styling'] ?? true),
16+
'form-select' => $isBootstrap5 && ($filterInputAttributes['default-styling'] ?? true),
17+
])
18+
->except(['default-styling','default-colors'])
19+
}}>
20+
@if ($filter->getFirstOption() !== '')
3621
<option @if($filter->isEmpty($this)) selected @endif value="all">{{ $filter->getFirstOption()}}</option>
3722
@endif
3823
@foreach($filter->getOptions() as $key => $value)
@@ -47,5 +32,7 @@ class="{{ $isBootstrap4 ? 'form-control' : 'form-select' }}"
4732
@endif
4833
@endforeach
4934
</select>
35+
@if ($isTailwind)
36+
</div>
5037
@endif
5138
</div>

‎resources/views/components/tools/filters/multi-select.blade.php‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,57 @@
22
<x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
33

44
@if ($isTailwind)
5-
<div class="rounded-md shadow-sm">
6-
<div>
7-
<input
8-
type="checkbox"
9-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
10-
wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
11-
class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
12-
>
13-
<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif" class="dark:text-white">
5+
<div class="rounded-md shadow-sm">
6+
@endif
7+
<div @class(['form-check' => $isBootstrap])>
8+
<input id="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all{{ $filter->hasCustomPosition() ? '-'.$filter->getCustomPosition() : null }}" wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')" {{
9+
$filterInputAttributes->merge([
10+
'type' => 'checkbox'
11+
])
12+
->class([
13+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
14+
'text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 ' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
15+
'form-check-input' => $isBootstrap && ($filterInputAttributes['default-styling'] ?? true),
16+
])
17+
->except(['id','wire:key','value','default-styling','default-colors'])
18+
}}>
19+
<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all{{ $filter->hasCustomPosition() ? '-'.$filter->getCustomPosition() : null }}" @class([
20+
'dark:text-white' => $isTailwind,
21+
'form-check-label' => $isBootstrap,
22+
])>
1423
@if ($filter->getFirstOption() !== '')
1524
{{ $filter->getFirstOption() }}
1625
@else
1726
{{ __($localisationPath.'All') }}
1827
@endif
19-
</label>
20-
</div>
21-
22-
@foreach($filter->getOptions() as $key => $value)
23-
<div wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif">
24-
<input
25-
type="checkbox"
26-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
27-
value="{{ $key }}"
28-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
29-
{{ $filter->getWireMethod('filterComponents.'.$filter->getKey()) }}
30-
class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
31-
>
32-
<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif" class="dark:text-white">{{ $value }}</label>
33-
</div>
34-
@endforeach
35-
</div>
36-
@elseif ($isBootstrap)
37-
<div class="form-check">
38-
<input
39-
type="checkbox"
40-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
41-
wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
42-
class="form-check-input"
43-
>
44-
<label class="form-check-label" for="{{ $tableName }}-filter-{{ $filter->getKey() }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif-select-all">{{ __($localisationPath.'All') }}</label>
28+
</label>
4529
</div>
4630

4731
@foreach($filter->getOptions() as $key => $value)
48-
<div class="form-check" wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif">
49-
<input
50-
class="form-check-input"
51-
type="checkbox"
52-
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
53-
value="{{ $key }}"
54-
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
55-
{{ $filter->getWireMethod('filterComponents.'.$filter->getKey()) }}
56-
57-
>
58-
<label class="form-check-label" for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif">{{ $value }}</label>
32+
<div @class([
33+
'form-check' => $isBootstrap,
34+
]) wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-multiselect-{{ $key }}{{ $filter->hasCustomPosition() ? '-'.$filter->getCustomPosition() : null }}">
35+
<input {!! $filter->getWireMethod('filterComponents.'.$filter->getKey()) !!}
36+
id="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}{{ $filter->hasCustomPosition() ? '-'.$filter->getCustomPosition() : null }}"
37+
38+
wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}{{ $filter->hasCustomPosition() ? '-'.$filter->getCustomPosition() : null }}" value="{{ $key }}" {{
39+
$filterInputAttributes->merge([
40+
'type' => 'checkbox'
41+
])
42+
->class([
43+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
44+
'text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 ' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
45+
'form-check-input' => $isBootstrap && ($filterInputAttributes['default-styling'] ?? true),
46+
])
47+
->except(['id','wire:key','value','default-styling','default-colors'])
48+
}}>
49+
<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}{{ $filter->hasCustomPosition() ? '-'.$filter->getCustomPosition() : null }}" @class([
50+
'dark:text-white' => $isTailwind,
51+
'form-check-label' => $isBootstrap,
52+
])>{{ $value }}</label>
5953
</div>
6054
@endforeach
55+
@if ($isTailwind)
56+
</div>
6157
@endif
6258
</div>

0 commit comments

Comments
 (0)