fix: use daisyUI-themed pagination

lang/es.json

@@ -666,5 +666,11 @@
   "{1} :count monthly|[2,*] :count monthly": "{1} :count mensual|[2,*] :count mensuales",
   "{1} :count weekly|[2,*] :count weekly": "{1} :count semanal|[2,*] :count semanales",
   "{1} Snapshots older than :count day will be deleted automatically during the next cleanup run.|[2,*] Snapshots older than :count days will be deleted automatically during the next cleanup run.": "{1} Los snapshots con más de :count día se eliminarán automáticamente en la próxima limpieza.|[2,*] Los snapshots con más de :count días se eliminarán automáticamente en la próxima limpieza.",
-  "{1} the last :count day|[2,*] the last :count days": "{1} el último :count día|[2,*] los últimos :count días"
+  "{1} the last :count day|[2,*] the last :count days": "{1} el último :count día|[2,*] los últimos :count días",
+  "Go to page :page": "Ir a la página :page",
+  "of": "de",
+  "Pagination Navigation": "Navegación de paginación",
+  "results": "resultados",
+  "Showing": "Mostrando",
+  "to": "a"
 }

lang/fr.json

@@ -666,5 +666,11 @@
   "{1} :count monthly|[2,*] :count monthly": "{1} :count mensuel|[2,*] :count mensuels",
   "{1} :count weekly|[2,*] :count weekly": "{1} :count hebdomadaire|[2,*] :count hebdomadaires",
   "{1} Snapshots older than :count day will be deleted automatically during the next cleanup run.|[2,*] Snapshots older than :count days will be deleted automatically during the next cleanup run.": "{1} Les snapshots plus anciens que :count jour seront automatiquement supprimés lors du prochain nettoyage.|[2,*] Les snapshots plus anciens que :count jours seront automatiquement supprimés lors du prochain nettoyage.",
-  "{1} the last :count day|[2,*] the last :count days": "{1} le dernier :count jour|[2,*] les :count derniers jours"
+  "{1} the last :count day|[2,*] the last :count days": "{1} le dernier :count jour|[2,*] les :count derniers jours",
+  "Go to page :page": "Aller à la page :page",
+  "of": "sur",
+  "Pagination Navigation": "Navigation de pagination",
+  "results": "résultats",
+  "Showing": "Affichage de",
+  "to": "à"
 }

resources/css/app.css

@@ -18,3 +18,9 @@
         padding: 0.75rem;
     }
 }
+
+/* Mary UI's pagination wrapper uses overflow-y-auto, which causes a brief
+   scrollbar flash during Livewire's DOM morph on page changes. */
+.mary-table-pagination > div:last-child {
+    overflow-y: visible;
+}

resources/views/vendor/livewire/tailwind.blade.php

@@ -0,0 +1,106 @@
+@php
+if (! isset($scrollTo)) {
+    $scrollTo = 'body';
+}
+
+$scrollIntoViewJsSnippet = ($scrollTo !== false)
+    ? <<<JS
+       (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
+    JS
+    : '';
+@endphp
+
+<div>
+    @if ($paginator->hasPages())
+        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
+            <div class="flex justify-between flex-1 sm:hidden">
+                @if ($paginator->onFirstPage())
+                    <span class="btn btn-sm btn-disabled">{!! __('pagination.previous') !!}</span>
+                @else
+                    <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" class="btn btn-sm">
+                        {!! __('pagination.previous') !!}
+                    </button>
+                @endif
+
+                @if ($paginator->hasMorePages())
+                    <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" class="btn btn-sm">
+                        {!! __('pagination.next') !!}
+                    </button>
+                @else
+                    <span class="btn btn-sm btn-disabled">{!! __('pagination.next') !!}</span>
+                @endif
+            </div>
+
+            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                <div>
+                    <p class="text-sm text-base-content/70">
+                        <span>{!! __('Showing') !!}</span>
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        <span>{!! __('to') !!}</span>
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                        <span>{!! __('of') !!}</span>
+                        <span class="font-medium">{{ $paginator->total() }}</span>
+                        <span>{!! __('results') !!}</span>
+                    </p>
+                </div>
+
+                <div>
+                    <div class="join">
+                        {{-- Previous Page Link --}}
+                        @if ($paginator->onFirstPage())
+                            <span class="join-item btn btn-sm btn-disabled" aria-label="{{ __('pagination.previous') }}">
+                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        @else
+                            <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="join-item btn btn-sm" aria-label="{{ __('pagination.previous') }}">
+                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </button>
+                        @endif
+
+                        {{-- Pagination Elements --}}
+                        @foreach ($elements as $element)
+                            {{-- "Three Dots" Separator --}}
+                            @if (is_string($element))
+                                <span class="join-item btn btn-sm btn-disabled">{{ $element }}</span>
+                            @endif
+
+                            {{-- Array Of Links --}}
+                            @if (is_array($element))
+                                @foreach ($element as $page => $url)
+                                    <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
+                                        @if ($page == $paginator->currentPage())
+                                            <span class="join-item btn btn-sm btn-active" aria-current="page">{{ $page }}</span>
+                                        @else
+                                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="join-item btn btn-sm" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                                {{ $page }}
+                                            </button>
+                                        @endif
+                                    </span>
+                                @endforeach
+                            @endif
+                        @endforeach
+
+                        {{-- Next Page Link --}}
+                        @if ($paginator->hasMorePages())
+                            <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="join-item btn btn-sm" aria-label="{{ __('pagination.next') }}">
+                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </button>
+                        @else
+                            <span class="join-item btn btn-sm btn-disabled" aria-label="{{ __('pagination.next') }}">
+                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        @endif
+                    </div>
+                </div>
+            </div>
+        </nav>
+    @endif
+</div>