Merge pull request #209 from rappasoft/develop

Develop

Author: rappasoft

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.3] - 2021-04-18
+
+### Added
+
+- Added Bootstrap 5 theme
+
+### Changed
+
+- Removed calls to custom primary color with indigo for tailwind
+- Updated search and row click sections of read me to be more clear.
+- Added resetPage to per page dropdown and filters.
+
 ## [1.0.2] - 2021-04-17
 
 ### Changed
@@ -169,7 +181,8 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 - Initial release
 
-[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.2...development
+[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.3...development
+[1.0.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.4.0...v1.0.0

README.md

@@ -34,7 +34,7 @@ This is the contents of the published config file:
 
 return [
     /**
-     * Options: tailwind | bootstrap-4.
+     * Options: tailwind | bootstrap-4 | bootstrap-5.
      */
     'theme' => 'tailwind',
 ];
@@ -160,6 +160,8 @@ public function getTableRowUrl($row): string
 }
 ```
 
+**Note:** When you have a clickable row, you might have issues with other clickable items in your cells following the row URL instead of the items action. As of right now I'd advise against using both until there is a better solution.
+
 ### Using the included blade components in the row view:
 
 To create cells, you should use the `<x-livewire-tables::table.cell>` table cell component, which will be rendered to:
@@ -170,7 +172,8 @@ To create cells, you should use the `<x-livewire-tables::table.cell>` table cell
 </td>
 ```
 
-**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`.
+**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
+Bootstrap 4, or `x-livewire-tables::bs5.table.row` and `x-livewire-tables::bs5.table.cell` for Bootstrap 5.
 
 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.
 
@@ -325,11 +328,30 @@ The search is a special built-in filter that is managed by the component, but yo
 public function query(): Builder
 {
     return User::query()
-        ->when($this->getFilter('search'), fn ($query, $term) => $query->search($term));
+        ->when($this->getFilter('search'), fn ($query, $term) => $query->where('name', 'like', '%'.$term.'%')->orWhere('email', 'like', '%'.$term.'%'));
+}
+```
+
+You can make this even more streamlined by adding a search scope to your model like so:
+
+```php
+public function scopeSearch($query, $term)
+{
+    return $query->where(
+        fn ($query) => $query->where('name', 'like', '%'.$term.'%')
+            ->orWhere('email', 'like', '%'.$term.'%')
+    );
 }
 ```
 
-You can make this even more streamlined by adding a search scope like demonstrated above. Or you can use regular where/orWhere clauses.
+And then using it like this:
+
+```php
+{
+    return User::query()
+        ->when($this->getFilter('search'), fn ($query, $term) => $query->search($term));
+}
+```
 
 ### Creating Bulk Actions
 

config/livewire-tables.php

@@ -2,7 +2,7 @@
 
 return [
     /**
-     * Options: tailwind | bootstrap-4.
+     * Options: tailwind | bootstrap-4 | bootstrap-5.
      */
     'theme' => 'tailwind',
 ];

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

@@ -15,7 +15,7 @@ class="badge badge-pill badge-info d-inline-flex align-items-center"
                         wire:click.prevent="removeFilter('{{ $key }}')"
                         class="text-white ml-2"
                     >
-                        <span class="sr-only">@lang('Remove sort option')</span>
+                        <span class="sr-only">@lang('Remove filter option')</span>
                         <svg style="width:.5em;height:.5em" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                             <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                         </svg>

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

@@ -0,0 +1,3 @@
+<td {{ $attributes }}>
+    {{ $slot }}
+</td>

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

@@ -0,0 +1,38 @@
+@props([
+    'column',
+    'sortable' => null,
+    'direction' => null,
+    'text' => null,
+])
+
+@unless ($sortable)
+    <th {{ $attributes->only('class') }}>
+        {{ $text ?? $slot }}
+    </th>
+@else
+    <th
+        wire:click="sortBy('{{ $column }}', '{{ $text ?? $column }}')"
+        {{ $attributes->only('class') }}
+        style="cursor:pointer;"
+    >
+        <div class="d-flex align-items-center">
+            <span>{{ $text }}</span>
+
+            <span class="relative d-flex align-items-center">
+                @if ($direction === 'asc')
+                    <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">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                    </svg>
+                @elseif ($direction === 'desc')
+                    <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">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                @else
+                    <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">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+                    </svg>
+                @endif
+            </span>
+        </div>
+    </th>
+@endif

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

@@ -0,0 +1,9 @@
+@foreach($columns as $column)
+    <td>
+        @if ($column->asHtml)
+            {{ new \Illuminate\Support\HtmlString($column->formatted($row)) }}
+        @else
+            {{ $column->formatted($row) }}
+        @endif
+    </td>
+@endforeach

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

@@ -0,0 +1,12 @@
+@props(['url' => null])
+
+<tr
+    {{ $attributes }}
+
+    @if ($url)
+        onclick="window.location='{{ $url }}';"
+        style="cursor:pointer"
+    @endif
+>
+    {{ $slot }}
+</tr>

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

@@ -0,0 +1,13 @@
+<div class="table-responsive">
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                {{ $head }}
+            </tr>
+        </thead>
+
+        <tbody>
+            {{ $body }}
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,29 @@
+<div
+    @if (is_numeric($refresh)) wire:poll.{{ $refresh }}ms @elseif(is_string($refresh)) wire:poll="{{ $refresh }}" @endif
+    class="container-fluid"
+>
+    @include('livewire-tables::bootstrap-5.includes.offline')
+    @include('livewire-tables::bootstrap-5.includes.sorting-pills')
+    @include('livewire-tables::bootstrap-5.includes.filter-pills')
+
+    <div class="d-md-flex justify-content-between mb-3">
+        <div class="d-md-flex">
+            @include('livewire-tables::bootstrap-5.includes.search')
+
+            <div class="ms-0 ms-md-3 mb-3 mb-md-0">
+                @include('livewire-tables::bootstrap-5.includes.filters')
+            </div>
+        </div>
+
+        <div class="d-md-flex">
+            @include('livewire-tables::bootstrap-5.includes.bulk-actions')
+
+            <div class="ms-0 ms-md-3">
+                @include('livewire-tables::bootstrap-5.includes.per-page')
+            </div>
+        </div>
+    </div>
+
+    @include('livewire-tables::bootstrap-5.includes.table')
+    @include('livewire-tables::bootstrap-5.includes.pagination')
+</div>