Skip to content

Commit c067e7b

Browse files
nguillauminnguillaumin
committed
Added Bootstrap 5 theme
It's almost identical to the Bootstrap 4 one, except that Bootstrap 5 has renamed left/right with start/end, and added a `bs` prefix to their data attributes.
1 parent 84e99f8 commit c067e7b

20 files changed

+401
-4
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
44

55
## [Unreleased]
66

7+
### Added
8+
9+
- Added Bootstrap 5 theme
10+
711
## [1.0.2] - 2021-04-17
812

913
### Changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ This is the contents of the published config file:
3434

3535
return [
3636
/**
37-
* Options: tailwind | bootstrap-4.
37+
* Options: tailwind | bootstrap-4 | bootstrap-5.
3838
*/
3939
'theme' => 'tailwind',
4040
];
@@ -170,7 +170,8 @@ To create cells, you should use the `<x-livewire-tables::table.cell>` table cell
170170
</td>
171171
```
172172

173-
**Note:** The default `x-livewire-tables::table.row` and `x-livewire-tables::table.cell` default to Tailwind, for Bootstrap specific versions use `x-livewire-tables::bs4.table.row` and `x-livewire-tables::bs4.table.cell`.
173+
**Note:** The default `x-livewire-tables::table.row` and `x-livewire-tables::table.cell` default to Tailwind, for Bootstrap specific versions use `x-livewire-tables::bs4.table.row` and `x-livewire-tables::bs4.table.cell` for
174+
Bootstrap 4, or `x-livewire-tables::bs5.table.row` and `x-livewire-tables::bs5.table.cell` for Bootstrap 5.
174175

175176
There is also a Tailwind alias of `x-livewire-tables::tw.table.row` and `x-livewire-tables::tw.table.cell` if you want to be specific.
176177

‎config/livewire-tables.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
return [
44
/**
5-
* Options: tailwind | bootstrap-4.
5+
* Options: tailwind | bootstrap-4 | bootstrap-5.
66
*/
77
'theme' => 'tailwind',
88
];

‎resources/views/bootstrap-5/components/table/cell.blade.php

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<td {{ $attributes }}>
2+
{{ $slot }}
3+
</td>

‎resources/views/bootstrap-5/components/table/heading.blade.php

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@props([
2+
'column',
3+
'sortable' => null,
4+
'direction' => null,
5+
'text' => null,
6+
])
7+
8+
@unless ($sortable)
9+
<th {{ $attributes->only('class') }}>
10+
{{ $text ?? $slot }}
11+
</th>
12+
@else
13+
<th
14+
wire:click="sortBy('{{ $column }}', '{{ $text ?? $column }}')"
15+
{{ $attributes->only('class') }}
16+
style="cursor:pointer;"
17+
>
18+
<div class="d-flex align-items-center">
19+
<span>{{ $text }}</span>
20+
21+
<span class="relative d-flex align-items-center">
22+
@if ($direction === 'asc')
23+
<svg xmlns="http://www.w3.org/2000/svg" class="ms-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
24+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
25+
</svg>
26+
@elseif ($direction === 'desc')
27+
<svg xmlns="http://www.w3.org/2000/svg" class="ms-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
28+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
29+
</svg>
30+
@else
31+
<svg xmlns="http://www.w3.org/2000/svg" class="ms-1" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
32+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
33+
</svg>
34+
@endif
35+
</span>
36+
</div>
37+
</th>
38+
@endif

‎resources/views/bootstrap-5/components/table/row-columns.blade.php

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@foreach($columns as $column)
2+
<td>
3+
@if ($column->asHtml)
4+
{{ new \Illuminate\Support\HtmlString($column->formatted($row)) }}
5+
@else
6+
{{ $column->formatted($row) }}
7+
@endif
8+
</td>
9+
@endforeach

‎resources/views/bootstrap-5/components/table/row.blade.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@props(['url' => null])
2+
3+
<tr
4+
{{ $attributes }}
5+
6+
@if ($url)
7+
onclick="window.location='{{ $url }}';"
8+
style="cursor:pointer"
9+
@endif
10+
>
11+
{{ $slot }}
12+
</tr>

‎resources/views/bootstrap-5/components/table/table.blade.php

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="table-responsive">
2+
<table class="table table-striped">
3+
<thead>
4+
<tr>
5+
{{ $head }}
6+
</tr>
7+
</thead>
8+
9+
<tbody>
10+
{{ $body }}
11+
</tbody>
12+
</table>
13+
</div>

‎resources/views/bootstrap-5/datatable.blade.php

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div
2+
@if (is_numeric($refresh)) wire:poll.{{ $refresh }}ms @elseif(is_string($refresh)) wire:poll="{{ $refresh }}" @endif
3+
class="container-fluid"
4+
>
5+
@include('livewire-tables::bootstrap-5.includes.offline')
6+
@include('livewire-tables::bootstrap-5.includes.sorting-pills')
7+
@include('livewire-tables::bootstrap-5.includes.filter-pills')
8+
9+
<div class="d-md-flex justify-content-between mb-3">
10+
<div class="d-md-flex">
11+
@include('livewire-tables::bootstrap-5.includes.search')
12+
13+
<div class="ms-0 ms-md-3 mb-3 mb-md-0">
14+
@include('livewire-tables::bootstrap-5.includes.filters')
15+
</div>
16+
</div>
17+
18+
<div class="d-md-flex">
19+
@include('livewire-tables::bootstrap-5.includes.bulk-actions')
20+
21+
<div class="ms-0 ms-md-3">
22+
@include('livewire-tables::bootstrap-5.includes.per-page')
23+
</div>
24+
</div>
25+
</div>
26+
27+
@include('livewire-tables::bootstrap-5.includes.table')
28+
@include('livewire-tables::bootstrap-5.includes.pagination')
29+
</div>

‎resources/views/bootstrap-5/includes/bulk-actions.blade.php

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@if (count($bulkActions))
2+
<div class="dropdown mb-3 mb-md-0 d-block d-md-inline">
3+
<button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="bulkActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
4+
{{ __('Bulk Actions') }}
5+
</button>
6+
7+
<div class="dropdown-menu dropdown-menu-end w-100" aria-labelledby="bulkActions">
8+
@foreach($bulkActions as $action => $title)
9+
<a href="#" wire:click.prevent="{{ $action }}" class="dropdown-item">{{ $title }}</a>
10+
@endforeach
11+
</div>
12+
</div>
13+
@endif

0 commit comments

Comments
 (0)