From 3d4145773a34382a354b7b1e72f076797f2d1e44 Mon Sep 17 00:00:00 2001
From: Lucas Houssa <lucas@retinens.com>
Date: Wed, 3 Aug 2022 17:59:22 +0200
Subject: [PATCH 1/2] fix for boostrap 5 theme

---
 resources/views/components/tools/filters/select.blade.php | 2 +-
 resources/views/components/tools/toolbar.blade.php        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/tools/filters/select.blade.php b/resources/views/components/tools/filters/select.blade.php
index 564f109ba..414b6237e 100644
--- a/resources/views/components/tools/filters/select.blade.php
+++ b/resources/views/components/tools/filters/select.blade.php
@@ -20,7 +20,7 @@ class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150
         wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
         wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
         id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
-        class="form-control"
+        class="{{ $theme === 'bootstrap-4' ? 'form-control' : 'form-select' }}"
     >
         @foreach($filter->getOptions() as $key => $value)
             <option value="{{ $key }}">{{ $value }}</option>
diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
index ab1fff337..03f6f42ca 100644
--- a/resources/views/components/tools/toolbar.blade.php
+++ b/resources/views/components/tools/toolbar.blade.php
@@ -829,7 +829,7 @@ class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}"
                     <select
                         wire:model="perPage"
                         id="perPage"
-                        class="form-control"
+                        class="form-select"
                     >
                         @foreach ($component->getPerPageAccepted() as $item)
                             <option value="{{ $item }}" wire:key="per-page-{{ $item }}-{{ $component->getTableName() }}">{{ $item === -1 ? __('All') : $item }}</option>

From a0638055021df4032b4883d6671cce49b2146f06 Mon Sep 17 00:00:00 2001
From: WhereIsLucas <lucas@retinens.com>
Date: Tue, 9 Aug 2022 16:16:46 +0200
Subject: [PATCH 2/2] added form-check correct styling

---
 .../table/td/bulk-actions.blade.php           | 14 +++-
 .../table/th/bulk-actions.blade.php           | 12 ++-
 .../views/components/tools/toolbar.blade.php  | 74 ++++++++++---------
 3 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/resources/views/components/table/td/bulk-actions.blade.php b/resources/views/components/table/td/bulk-actions.blade.php
index 57bb4d02a..3fa484049 100644
--- a/resources/views/components/table/td/bulk-actions.blade.php
+++ b/resources/views/components/table/td/bulk-actions.blade.php
@@ -18,7 +18,7 @@ class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150
                 />
             </div>
         </x-livewire-tables::table.td.plain>
-    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    @elseif ($theme === 'bootstrap-4')
         <x-livewire-tables::table.td.plain>
             <input
                 wire:model="selected"
@@ -27,5 +27,17 @@ class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150
                 type="checkbox"
             />
         </x-livewire-tables::table.td.plain>
+    @elseif ($theme === 'bootstrap-5')
+        <x-livewire-tables::table.td.plain>
+            <div class="form-check">
+                <input
+                    wire:model="selected"
+                    wire:loading.attr.delay="disabled"
+                    value="{{ $row->{$this->getPrimaryKey()} }}"
+                    type="checkbox"
+                    class="form-check-input"
+                />
+            </div>
+        </x-livewire-tables::table.td.plain>
     @endif
 @endif
diff --git a/resources/views/components/table/th/bulk-actions.blade.php b/resources/views/components/table/th/bulk-actions.blade.php
index c28339c21..3e61f8a92 100644
--- a/resources/views/components/table/th/bulk-actions.blade.php
+++ b/resources/views/components/table/th/bulk-actions.blade.php
@@ -15,12 +15,22 @@ class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150
                 />
             </div>
         </x-livewire-tables::table.th.plain>
-    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    @elseif ($theme === 'bootstrap-4')
         <x-livewire-tables::table.th.plain>
             <input
                 wire:model="selectAll"
                 type="checkbox"
             />
         </x-livewire-tables::table.th.plain>
+    @elseif ($theme === 'bootstrap-5')
+        <x-livewire-tables::table.th.plain>
+            <div class="form-check">
+                <input
+                    wire:model="selectAll"
+                    type="checkbox"
+                    class="form-check-input"
+                />
+            </div>
+        </x-livewire-tables::table.th.plain>
     @endif
 @endif
diff --git a/resources/views/components/tools/toolbar.blade.php b/resources/views/components/tools/toolbar.blade.php
index 03f6f42ca..be4a95f69 100644
--- a/resources/views/components/tools/toolbar.blade.php
+++ b/resources/views/components/tools/toolbar.blade.php
@@ -75,13 +75,13 @@ class="inline-flex justify-center w-full rounded-md border border-gray-300 shado
                             @endif
                         >
                             @lang('Filters')
-            
+
                             @if ($count = $component->getFilterBadgeCount())
                                 <span class="ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900">
                                     {{ $count }}
                                 </span>
                             @endif
-            
+
                             <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none"
                                 viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -89,7 +89,7 @@ class="inline-flex justify-center w-full rounded-md border border-gray-300 shado
                             </svg>
                         </button>
                     </div>
-            
+
                     @if ($component->isFilterLayoutPopover())
                         <div
                             x-cloak
@@ -113,7 +113,7 @@ class="origin-top-left absolute left-0 mt-2 w-full md:w-56 rounded-md shadow-lg
                                                 class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
                                                 {{ $filter->getName() }}
                                             </label>
-                
+
                                             {{ $filter->render($component) }}
                                         </div>
                                     </div>
@@ -225,14 +225,14 @@ class="inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray
                                     aria-expanded="true"
                                 >
                                     @lang('Columns')
-            
+
                                     <svg class="-mr-1 ml-2 w-5 h-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                     </svg>
                                 </button>
                             </span>
                         </div>
-            
+
                         <div
                             x-cloak
                             x-show="open"
@@ -413,13 +413,13 @@ class="btn dropdown-toggle d-block w-100 d-md-inline"
                                 @endif
                             >
                                 @lang('Filters')
-                
+
                                 @if ($count = $component->getFilterBadgeCount())
                                     <span class="badge badge-info">
                                         {{ $count }}
                                     </span>
                                 @endif
-                
+
                                 <span class="caret"></span>
                             </button>
                         </div>
@@ -675,13 +675,13 @@ class="btn dropdown-toggle d-block w-100 d-md-inline"
                                 @endif
                             >
                                 @lang('Filters')
-                
+
                                 @if ($count = $component->getFilterBadgeCount())
                                     <span class="badge bg-info">
                                         {{ $count }}
                                     </span>
                                 @endif
-                
+
                                 <span class="caret"></span>
                             </button>
                         </div>
@@ -780,41 +780,45 @@ class="dropdown-menu dropdown-menu-end w-100"
                             x-bind:class="{'show' : open}"
                             aria-labelledby="columnSelect-{{ $component->getTableName() }}"
                         >
-                            <div>
+                            <div class="form-check ms-2">
+                                <input
+                                    @if($component->allDefaultVisibleColumnsAreSelected())
+                                        checked
+                                    wire:click="deselectAllColumns"
+                                    @else
+                                        unchecked
+                                    wire:click="selectAllColumns"
+                                    @endif
+                                    wire:loading.attr="disabled"
+                                    type="checkbox"
+                                    class="form-check-input"
+                                />
                                 <label
                                     wire:loading.attr="disabled"
-                                    class="px-2 mb-1"
+                                    class="form-check-label"
                                 >
-                                    <input
-                                        @if($component->allDefaultVisibleColumnsAreSelected())
-                                            checked
-                                            wire:click="deselectAllColumns"
-                                        @else
-                                            unchecked
-                                            wire:click="selectAllColumns"
-                                        @endif
-                                        wire:loading.attr="disabled"
-                                        type="checkbox"
-                                    />
-                                    <span class="ml-2">{{ __('All Columns') }}</span>
+                                    {{ __('All Columns') }}
                                 </label>
                             </div>
                             @foreach($component->getColumns() as $column)
                                 @if ($column->isVisible() && $column->isSelectable())
-                                    <div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}">
+                                    <div wire:key="columnSelect-{{ $loop->index }}-{{ $component->getTableName() }}"
+                                         class="form-check ms-2"
+                                    >
+                                        <input
+                                            wire:model="selectedColumns"
+                                            wire:target="selectedColumns"
+                                            wire:loading.attr="disabled"
+                                            type="checkbox"
+                                            class="form-check-input"
+                                            value="{{ $column->getSlug() }}"
+                                        />
                                         <label
                                             wire:loading.attr="disabled"
                                             wire:target="selectedColumns"
-                                            class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}"
-                                        >
-                                            <input
-                                                wire:model="selectedColumns"
-                                                wire:target="selectedColumns"
-                                                wire:loading.attr="disabled"
-                                                type="checkbox"
-                                                value="{{ $column->getSlug() }}"
-                                            />
-                                            <span class="ml-2">{{ $column->getTitle() }}</span>
+                                            class="{{ $loop->last ? 'mb-0' : 'mb-1' }} form-check-label"
+                                        >{{ $column->getTitle() }}</label>
+
                                         </label>
                                     </div>
                                 @endif