Merge pull request #459 from rappasoft/develop

v1.15.0

Author: rappasoft

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [1.15.0] - 2021-09-19
+
+### Added
+
+- Dark styles for Tailwind
+
+### Changed
+
+- Minimum Livewire version to 2.6.2 to avoid 2.6.1 bug.
+- Remove our custom pagination as Livewire 2.6 supports multiple pagination per page now.
+
 ## [1.14.0] - 2021-08-31
 
 ### Added
@@ -456,7 +467,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.14.0...development
+[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.15.0...development
+[1.15.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.14.0...v1.15.0
 [1.14.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.13.0...v1.14.0
 [1.13.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.12.0...v1.13.0
 [1.12.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.11.0...v1.12.0

composer.json

@@ -19,7 +19,7 @@
     ],
     "require": {
         "php": "^7.4|^8.0",
-        "livewire/livewire": "^2.5.3",
+        "livewire/livewire": "^2.6.2",
         "spatie/laravel-package-tools": "^1.4.3",
         "illuminate/contracts": "^8.0"
     },

resources/views/tailwind/components/table/cell.blade.php

@@ -1,5 +1,5 @@
 @props(['customAttributes' => []])
 
-<td {{ $attributes->merge(array_merge(['class' => 'px-3 py-2 md:px-6 md:py-4 whitespace-nowrap text-sm leading-5 text-gray-900'], $customAttributes)) }}>
+<td {{ $attributes->merge(array_merge(['class' => 'px-3 py-2 md:px-6 md:py-4 whitespace-nowrap text-sm leading-5 text-gray-900 dark:text-white'], $customAttributes)) }}>
     {{ $slot }}
 </td>

resources/views/tailwind/components/table/heading.blade.php

@@ -8,17 +8,17 @@
 ])
 
 <th
-    {{ $attributes->merge(array_merge(['class' => 'px-3 py-2 md:px-6 md:py-3 bg-gray-50'], $customAttributes)) }}
+    {{ $attributes->merge(array_merge(['class' => 'px-3 py-2 md:px-6 md:py-3 bg-gray-50 dark:bg-gray-800'], $customAttributes)) }}
 >
     @unless ($sortingEnabled && $sortable)
-        <span class="block text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+        <span class="block text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
             {{ $text ?? $slot }}
         </span>
     @else
         <button
             wire:click="sortBy('{{ $column }}', '{{ $text ?? $column }}')"
             {{ $attributes->except('class') }}
-            class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none focus:underline"
+            class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none focus:underline dark:text-gray-400"
         >
             <span>{{ $text ?? $slot }}</span>
 

resources/views/tailwind/components/table/table.blade.php

@@ -1,12 +1,12 @@
 <div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden rounded-none md:rounded-lg">
-    <table {{ $attributes->except('wire:sortable') }} class="min-w-full divide-y divide-gray-200">
+    <table {{ $attributes->except('wire:sortable') }} class="min-w-full divide-y divide-gray-200 dark:divide-none">
         <thead>
             <tr>
                 {{ $head }}
             </tr>
         </thead>
 
-        <tbody {{ $attributes->only('wire:sortable') }} class="bg-white divide-y divide-gray-200">
+        <tbody {{ $attributes->only('wire:sortable') }} class="bg-white divide-y divide-gray-200 dark:divide-none">
             {{ $body }}
         </tbody>
     </table>

resources/views/tailwind/includes/bulk-actions.blade.php

@@ -11,7 +11,7 @@ class="relative inline-block text-left z-10 w-full md:w-auto"
                     <button
                         x-on:click="open = !open"
                         type="button"
-                        class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                        class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
                         id="options-menu"
                         aria-haspopup="true"
                         x-bind:aria-expanded="open"
@@ -37,14 +37,14 @@ class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4
                 x-transition:leave-end="transform opacity-0 scale-95"
                 class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
             >
-                <div class="rounded-md bg-white shadow-xs">
+                <div class="rounded-md bg-white shadow-xs dark:bg-gray-700 dark:text-white">
                     <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                         @foreach($bulkActions as $action => $title)
                             <button
                                 wire:click="{{ $action }}"
                                 wire:key="bulk-action-{{ $action }}"
                                 type="button"
-                                class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2"
+                                class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2 dark:text-white dark:hover:bg-gray-600"
                                 role="menuitem"
                             >
                                 <span>{{ $title }}</span>

resources/views/tailwind/includes/bulk-select-row.blade.php

@@ -1,5 +1,5 @@
 @if ($bulkActionsEnabled && count($bulkActions) && (($selectPage && $rows->total() > $rows->count()) || count($selected)))
-    <x-livewire-tables::table.row wire:key="row-message" class="bg-indigo-50">
+    <x-livewire-tables::table.row wire:key="row-message" class="bg-indigo-50 dark:bg-gray-900 dark:text-white">
         <x-livewire-tables::table.cell :colspan="$colspan">
             @if (count($selected) && !$selectAll && !$selectPage)
                 <div>
@@ -13,7 +13,7 @@
                         wire:click="resetBulk"
                         wire:loading.attr="disabled"
                         type="button"
-                        class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
+                        class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
                     >
                         @lang('Unselect All')
                     </button>
@@ -30,7 +30,7 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
                         wire:click="resetBulk"
                         wire:loading.attr="disabled"
                         type="button"
-                        class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
+                        class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
                     >
                         @lang('Unselect All')
                     </button>
@@ -48,7 +48,7 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
                             wire:click="resetBulk"
                             wire:loading.attr="disabled"
                             type="button"
-                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
+                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
                         >
                             @lang('Unselect All')
                         </button>
@@ -66,7 +66,7 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
                             wire:click="selectAll"
                             wire:loading.attr="disabled"
                             type="button"
-                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
+                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
                         >
                             @lang('Select All')
                         </button>
@@ -75,7 +75,7 @@ class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium
                             wire:click="resetBulk"
                             wire:loading.attr="disabled"
                             type="button"
-                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
+                            class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
                         >
                             @lang('Unselect All')
                         </button>

resources/views/tailwind/includes/column-select.blade.php

@@ -1,25 +1,25 @@
 @if ($columnSelect)
-    <div class="w-full md:w-auto mb-4 md:mb-0 md:ml-2">
+    <div class="mb-4 w-full md:w-auto md:mb-0 md:ml-2">
         <div
             x-data="{ open: false }"
             @keydown.window.escape="open = false"
             x-on:click.away="open = false"
-            class="relative inline-block text-left w-full md:w-auto"
+            class="inline-block relative w-full text-left md:w-auto"
         >
             <div>
                 <span class="rounded-md shadow-sm">
                     <button
                         x-on:click="open = !open"
                         type="button"
-                        class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                        class="inline-flex justify-center px-4 py-2 w-full text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
                         id="column-select-menu"
                         aria-haspopup="true"
                         x-bind:aria-expanded="open"
                         aria-expanded="true"
                     >
                         @lang('Columns')
 
-                        <svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <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>
@@ -35,20 +35,20 @@ class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
+                class="absolute right-0 z-50 mt-2 w-full bg-white rounded-md divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none"
             >
-                <div class="rounded-md bg-white shadow-xs">
+                <div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
                     <div class="p-2" role="menu" aria-orientation="vertical" aria-labelledby="column-select-menu">
                         @foreach($columns as $column)
                             @if ($column->isVisible() && $column->isSelectable())
                                 <div wire:key="columnSelect-{{ $loop->index }}">
                                     <label
                                         wire:loading.attr="disabled"
                                         wire:target="columnSelectEnabled"
-                                        class="px-2 py-1 inline-flex items-center disabled:opacity-50 disabled:cursor-wait"
+                                        class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
                                     >
                                         <input
-                                            class="disabled:opacity-50 disabled:cursor-wait"
+                                            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"
                                             wire:model="columnSelectEnabled"
                                             wire:target="columnSelectEnabled"
                                             wire:loading.attr="disabled"

resources/views/tailwind/includes/filter-pills.blade.php

@@ -1,13 +1,13 @@
 <div>
     @if ($showFilters && count($this->getFiltersWithoutSearch()))
         <div class="mb-4 p-6 md:p-0">
-            <small class="text-gray-700">@lang('Applied Filters'):</small>
+            <small class="text-gray-700 dark:text-white">@lang('Applied Filters'):</small>
 
             @foreach($filters as $key => $value)
                 @if ($key !== 'search' && strlen($value))
                     <span
                         wire:key="filter-pill-{{ $key }}"
-                        class="inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700"
+                        class="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"
                     >
                         {{ $filterNames[$key] ?? collect($this->columns())->pluck('text', 'column')->get($key, ucwords(strtr($key, ['_' => ' ', '-' => ' ']))) }}:
                         @if(isset($customFilters[$key]) && method_exists($customFilters[$key], 'options'))
@@ -31,7 +31,7 @@ class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justif
             @endforeach
 
             <button class="focus:outline-none active:outline-none" wire:click.prevent="resetFilters">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900">
                     @lang('Clear')
                 </span>
             </button>

resources/views/tailwind/includes/filter-type-date.blade.php

@@ -6,6 +6,6 @@
         type="date"
         @if(isset($filter->options['min']) && strlen($filter->options['min'])) min="{{ $filter->options['min'] }}" @endif
         @if(isset($filter->options['max']) && strlen($filter->options['max'])) max="{{ $filter->options['max'] }}" @endif
-        class="flex-1 shadow-sm border-gray-300 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo @if (isset($filters[$key]) && strlen($filters[$key])) rounded-none rounded-l-md @else rounded-md @endif"
+        class="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"
     />
 </div>