Skip to content

Commit 6d93198

Browse files
rappasoftrappasoft
committed
Fix filters for all themes using alpine
- Add wrapping divs where needed
1 parent ec4bbb8 commit 6d93198

File tree

8 files changed

+187
-150
lines changed

8 files changed

+187
-150
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ A dynamic Laravel Livewire component for data tables.
99

1010
![Full Table](https://i.imgur.com/2kfibjR.png)
1111

12-
This plugin assumes you already have [Laravel Livewire](https://laravel-livewire.com) and [Alpine.js](https://github.com/alpinejs/alpine) installed and configured in your project.
13-
1412
## Installation
1513

1614
You can install the package via composer:
@@ -19,6 +17,8 @@ You can install the package via composer:
1917
composer require rappasoft/laravel-livewire-tables
2018
```
2119

20+
Please see the rest of the [installation instructions](https://github.com/rappasoft/laravel-livewire-tables/wiki/Installation-&-Configuration).
21+
2222
## Usage
2323

2424
### [Read the documentation](https://github.com/rappasoft/laravel-livewire-tables/wiki)

‎resources/views/bootstrap-4/includes/filter-pills.blade.php

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
1-
@if ($showFilters && count($this->getFiltersWithoutSearch()))
2-
<div class="mb-3">
3-
<small>@lang('Applied Filters'):</small>
1+
<div>
2+
@if ($showFilters && count($this->getFiltersWithoutSearch()))
3+
<div class="mb-3">
4+
<small>@lang('Applied Filters'):</small>
45

5-
@foreach($filters as $key => $value)
6-
@if ($key !== 'search' && strlen($value))
7-
<span
8-
wire:key="filter-pill-{{ $key }}"
9-
class="badge badge-pill badge-info d-inline-flex align-items-center"
10-
>
11-
{{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
12-
@if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
13-
{{ $customFilters[$key]->options()[$value] ?? $value }}
14-
@else
15-
{{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
16-
@endif
17-
18-
<a
19-
href="#"
20-
wire:click.prevent="removeFilter('{{ $key }}')"
21-
class="text-white ml-2"
6+
@foreach($filters as $key => $value)
7+
@if ($key !== 'search' && strlen($value))
8+
<span
9+
wire:key="filter-pill-{{ $key }}"
10+
class="badge badge-pill badge-info d-inline-flex align-items-center"
2211
>
23-
<span class="sr-only">@lang('Remove filter option')</span>
24-
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
25-
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
26-
</svg>
27-
</a>
28-
</span>
29-
@endif
30-
@endforeach
12+
{{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
13+
@if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
14+
{{ $customFilters[$key]->options()[$value] ?? $value }}
15+
@else
16+
{{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
17+
@endif
18+
19+
<a
20+
href="#"
21+
wire:click.prevent="removeFilter('{{ $key }}')"
22+
class="text-white ml-2"
23+
>
24+
<span class="sr-only">@lang('Remove filter option')</span>
25+
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
26+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
27+
</svg>
28+
</a>
29+
</span>
30+
@endif
31+
@endforeach
3132

32-
<a
33-
href="#"
34-
wire:click.prevent="resetFilters"
35-
class="badge badge-pill badge-light"
36-
>
37-
@lang('Clear')
38-
</a>
39-
</div>
40-
@endif
33+
<a
34+
href="#"
35+
wire:click.prevent="resetFilters"
36+
class="badge badge-pill badge-light"
37+
>
38+
@lang('Clear')
39+
</a>
40+
</div>
41+
@endif
42+
</div>

‎resources/views/bootstrap-4/includes/filters.blade.php

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
@if ($showFilterDropdown && ($filtersView || count($customFilters)))
2-
<div class="btn-group d-block d-md-inline">
3-
<button type="button" class="btn dropdown-toggle d-block w-100 d-md-inline" data-toggle="dropdown">
2+
<div
3+
x-cloak
4+
x-data="{ open: false }"
5+
@keydown.escape.stop="open = false"
6+
@mousedown.away="open = false"
7+
class="btn-group d-block d-md-inline"
8+
>
9+
<button
10+
@click="open = !open"
11+
type="button"
12+
class="btn dropdown-toggle d-block w-100 d-md-inline"
13+
>
414
@lang('Filters')
515

616
@if (count($this->getFiltersWithoutSearch()))
@@ -11,7 +21,11 @@
1121

1222
<span class="caret"></span>
1323
</button>
14-
<ul class="dropdown-menu w-200" role="menu">
24+
<ul
25+
class="dropdown-menu w-200 mt-3"
26+
:class="{'show' : open}"
27+
role="menu"
28+
>
1529
<li>
1630
@if ($filtersView)
1731
@include($filtersView)
@@ -34,13 +48,13 @@
3448
@if (count($this->getFiltersWithoutSearch()))
3549
<div class="dropdown-divider"></div>
3650

37-
<a
38-
href="#"
51+
<button
3952
wire:click.prevent="resetFilters"
40-
class="dropdown-item"
53+
@click="open = false"
54+
class="dropdown-item btn text-center"
4155
>
4256
@lang('Clear')
43-
</a>
57+
</button>
4458
@endif
4559
</li>
4660
</ul>

‎resources/views/bootstrap-4/includes/sorting-pills.blade.php

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
@if ($showSorting && count($sorts))
2-
<div class="mb-3">
3-
<small>@lang('Applied Sorting'):</small>
1+
<div>
2+
@if ($showSorting && count($sorts))
3+
<div class="mb-3">
4+
<small>@lang('Applied Sorting'):</small>
45

5-
@foreach($sorts as $col => $dir)
6-
<span
7-
wire:key="sorting-pill-{{ $col }}"
8-
class="badge badge-pill badge-info d-inline-flex align-items-center"
9-
>
10-
<span>{{ $sortNames[$col] ?? collect($this->columns())->pluck('text', 'column')->get($col, ucwords(strtr($col, ['_' => ' ', '-' => ' ']))) }}: {{ $dir === 'asc' ? ($sortDirectionNames[$col]['asc'] ?? 'A-Z') : ($sortDirectionNames[$col]['desc'] ?? 'Z-A') }}</span>
11-
12-
<a
13-
href="#"
14-
wire:click.prevent="removeSort('{{ $col }}')"
15-
class="text-white ml-2"
6+
@foreach($sorts as $col => $dir)
7+
<span
8+
wire:key="sorting-pill-{{ $col }}"
9+
class="badge badge-pill badge-info d-inline-flex align-items-center"
1610
>
17-
<span class="sr-only">@lang('Remove sort option')</span>
18-
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
19-
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
20-
</svg>
21-
</a>
22-
</span>
23-
@endforeach
11+
<span>{{ $sortNames[$col] ?? collect($this->columns())->pluck('text', 'column')->get($col, ucwords(strtr($col, ['_' => ' ', '-' => ' ']))) }}: {{ $dir === 'asc' ? ($sortDirectionNames[$col]['asc'] ?? 'A-Z') : ($sortDirectionNames[$col]['desc'] ?? 'Z-A') }}</span>
2412

25-
<a
26-
href="#"
27-
wire:click.prevent="resetSorts"
28-
class="badge badge-pill badge-light"
29-
>
30-
@lang('Clear')
31-
</a>
32-
</div>
33-
@endif
13+
<a
14+
href="#"
15+
wire:click.prevent="removeSort('{{ $col }}')"
16+
class="text-white ml-2"
17+
>
18+
<span class="sr-only">@lang('Remove sort option')</span>
19+
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
20+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
21+
</svg>
22+
</a>
23+
</span>
24+
@endforeach
25+
26+
<a
27+
href="#"
28+
wire:click.prevent="resetSorts"
29+
class="badge badge-pill badge-light"
30+
>
31+
@lang('Clear')
32+
</a>
33+
</div>
34+
@endif
35+
</div>

‎resources/views/bootstrap-5/includes/filter-pills.blade.php

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
1-
@if ($showFilters && count($this->getFiltersWithoutSearch()))
2-
<div class="mb-3">
3-
<small>@lang('Applied Filters'):</small>
1+
<div>
2+
@if ($showFilters && count($this->getFiltersWithoutSearch()))
3+
<div class="mb-3">
4+
<small>@lang('Applied Filters'):</small>
45

5-
@foreach($filters as $key => $value)
6-
@if ($key !== 'search' && strlen($value))
7-
<span
8-
wire:key="filter-pill-{{ $key }}"
9-
class="badge rounded-pill bg-info d-inline-flex align-items-center"
10-
>
11-
{{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
12-
@if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
13-
{{ $customFilters[$key]->options()[$value] ?? $value }}
14-
@else
15-
{{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
16-
@endif
17-
18-
<a
19-
href="#"
20-
wire:click.prevent="removeFilter('{{ $key }}')"
21-
class="text-white ms-2"
6+
@foreach($filters as $key => $value)
7+
@if ($key !== 'search' && strlen($value))
8+
<span
9+
wire:key="filter-pill-{{ $key }}"
10+
class="badge rounded-pill bg-info d-inline-flex align-items-center"
2211
>
23-
<span class="visually-hidden">@lang('Remove filter option')</span>
24-
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
25-
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
26-
</svg>
27-
</a>
28-
</span>
29-
@endif
30-
@endforeach
12+
{{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
13+
@if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
14+
{{ $customFilters[$key]->options()[$value] ?? $value }}
15+
@else
16+
{{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}
17+
@endif
18+
19+
<a
20+
href="#"
21+
wire:click.prevent="removeFilter('{{ $key }}')"
22+
class="text-white ms-2"
23+
>
24+
<span class="visually-hidden">@lang('Remove filter option')</span>
25+
<svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
26+
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
27+
</svg>
28+
</a>
29+
</span>
30+
@endif
31+
@endforeach
3132

32-
<a
33-
href="#"
34-
wire:click.prevent="resetFilters"
35-
class="badge rounded-pill bg-light text-dark text-decoration-none"
36-
>
37-
@lang('Clear')
38-
</a>
39-
</div>
40-
@endif
33+
<a
34+
href="#"
35+
wire:click.prevent="resetFilters"
36+
class="badge rounded-pill bg-light text-dark text-decoration-none"
37+
>
38+
@lang('Clear')
39+
</a>
40+
</div>
41+
@endif
42+
</div>

‎resources/views/bootstrap-5/includes/filters.blade.php

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
@if ($showFilterDropdown && ($filtersView || count($customFilters)))
2-
<div class="btn-group d-block d-md-inline">
3-
<button type="button" class="btn dropdown-toggle d-block w-100 d-md-inline" data-bs-toggle="dropdown">
2+
<div
3+
x-cloak
4+
x-data="{ open: false }"
5+
@keydown.escape.stop="open = false"
6+
@mousedown.away="open = false"
7+
class="btn-group d-block d-md-inline"
8+
>
9+
<button
10+
@click="open = !open"
11+
type="button"
12+
class="btn dropdown-toggle d-block w-100 d-md-inline"
13+
>
414
@lang('Filters')
515

616
@if (count($this->getFiltersWithoutSearch()))
@@ -11,7 +21,11 @@
1121

1222
<span class="caret"></span>
1323
</button>
14-
<ul class="dropdown-menu w-200" role="menu">
24+
<ul
25+
class="dropdown-menu w-200 mt-3"
26+
:class="{'show' : open}"
27+
role="menu"
28+
>
1529
<li>
1630
@if ($filtersView)
1731
@include($filtersView)
@@ -34,13 +48,13 @@
3448
@if (count($this->getFiltersWithoutSearch()))
3549
<div class="dropdown-divider"></div>
3650

37-
<a
38-
href="#"
51+
<button
3952
wire:click.prevent="resetFilters"
40-
class="dropdown-item"
53+
@click="open = false"
54+
class="dropdown-item text-center"
4155
>
4256
@lang('Clear')
43-
</a>
57+
</button>
4458
@endif
4559
</li>
4660
</ul>

0 commit comments

Comments
 (0)