112 lines
7 KiB
PHP
112 lines
7 KiB
PHP
@php
|
|
if (! isset($scrollTo)) {
|
|
$scrollTo = 'body';
|
|
}
|
|
|
|
$scrollIntoViewJsSnippet = ($scrollTo !== false)
|
|
? <<<JS
|
|
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
|
|
JS
|
|
: '';
|
|
|
|
$pageName = $paginator->getPageName();
|
|
$isLengthAware = method_exists($paginator, 'total');
|
|
@endphp
|
|
|
|
@if ($paginator->hasPages())
|
|
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="portal-pagination flex flex-col gap-3 rounded-md border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-card)] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<p class="m-0 text-[12px] leading-5 text-[color:var(--color-ink-3)]">
|
|
@if ($isLengthAware)
|
|
{{ __('Zeige') }}
|
|
<span class="font-mono font-semibold text-[color:var(--color-ink)]">{{ $paginator->firstItem() }}</span>
|
|
{{ __('bis') }}
|
|
<span class="font-mono font-semibold text-[color:var(--color-ink)]">{{ $paginator->lastItem() }}</span>
|
|
{{ __('von') }}
|
|
<span class="font-mono font-semibold text-[color:var(--color-ink)]">{{ $paginator->total() }}</span>
|
|
@else
|
|
{{ __('Seite') }}
|
|
<span class="font-mono font-semibold text-[color:var(--color-ink)]">{{ $paginator->currentPage() }}</span>
|
|
<span class="text-[color:var(--color-ink-4)]">·</span>
|
|
{{ __('einfache Navigation') }}
|
|
@endif
|
|
</p>
|
|
|
|
<div class="flex flex-wrap items-center gap-1.5">
|
|
@if ($paginator->onFirstPage())
|
|
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}" class="inline-flex h-9 min-w-9 cursor-default items-center justify-center rounded-[4px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] px-3 text-[12px] font-semibold text-[color:var(--color-ink-4)]">
|
|
{{ __('Zurück') }}
|
|
</span>
|
|
@else
|
|
<button
|
|
type="button"
|
|
wire:click="previousPage('{{ $pageName }}')"
|
|
x-on:click="{{ $scrollIntoViewJsSnippet }}"
|
|
wire:loading.attr="disabled"
|
|
aria-label="{{ __('pagination.previous') }}"
|
|
class="inline-flex h-9 min-w-9 cursor-pointer items-center justify-center rounded-[4px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] px-3 text-[12px] font-semibold text-[color:var(--color-hub)] transition hover:border-[color:var(--color-hub)] hover:bg-[color:var(--color-hub-soft)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-hub)]/25 disabled:cursor-wait disabled:opacity-60"
|
|
>
|
|
{{ __('Zurück') }}
|
|
</button>
|
|
@endif
|
|
|
|
@if ($isLengthAware)
|
|
@foreach ($elements as $element)
|
|
@if (is_string($element))
|
|
<span aria-disabled="true" class="inline-flex h-9 min-w-9 cursor-default items-center justify-center rounded-[4px] px-2 text-[12px] font-semibold text-[color:var(--color-ink-4)]">
|
|
{{ $element }}
|
|
</span>
|
|
@endif
|
|
|
|
@if (is_array($element))
|
|
@foreach ($element as $page => $url)
|
|
@if ($page === $paginator->currentPage())
|
|
<span
|
|
aria-current="page"
|
|
class="is-active inline-flex h-9 min-w-9 cursor-default items-center justify-center rounded-[4px] border border-[color:var(--color-hub)] bg-[color:var(--color-hub)] px-3 text-[12px] font-bold text-[color:var(--color-ink-on-dark)] shadow-[0_0_0_2px_var(--color-hub-soft)]"
|
|
>
|
|
{{ $page }}
|
|
</span>
|
|
@else
|
|
<button
|
|
type="button"
|
|
wire:key="paginator-{{ $pageName }}-page-{{ $page }}"
|
|
wire:click="gotoPage({{ $page }}, '{{ $pageName }}')"
|
|
x-on:click="{{ $scrollIntoViewJsSnippet }}"
|
|
wire:loading.attr="disabled"
|
|
aria-label="{{ __('Go to page :page', ['page' => $page]) }}"
|
|
class="inline-flex h-9 min-w-9 cursor-pointer items-center justify-center rounded-[4px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] px-3 text-[12px] font-semibold text-[color:var(--color-ink-2)] transition hover:border-[color:var(--color-hub)] hover:bg-[color:var(--color-hub-soft)] hover:text-[color:var(--color-hub)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-hub)]/25 disabled:cursor-wait disabled:opacity-60"
|
|
>
|
|
{{ $page }}
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
@endforeach
|
|
@else
|
|
<span
|
|
aria-current="page"
|
|
class="is-active inline-flex h-9 min-w-9 cursor-default items-center justify-center rounded-[4px] border border-[color:var(--color-hub)] bg-[color:var(--color-hub)] px-3 text-[12px] font-bold text-[color:var(--color-ink-on-dark)] shadow-[0_0_0_2px_var(--color-hub-soft)]"
|
|
>
|
|
{{ $paginator->currentPage() }}
|
|
</span>
|
|
@endif
|
|
|
|
@if ($paginator->hasMorePages())
|
|
<button
|
|
type="button"
|
|
wire:click="nextPage('{{ $pageName }}')"
|
|
x-on:click="{{ $scrollIntoViewJsSnippet }}"
|
|
wire:loading.attr="disabled"
|
|
aria-label="{{ __('pagination.next') }}"
|
|
class="inline-flex h-9 min-w-9 cursor-pointer items-center justify-center rounded-[4px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] px-3 text-[12px] font-semibold text-[color:var(--color-hub)] transition hover:border-[color:var(--color-hub)] hover:bg-[color:var(--color-hub-soft)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-hub)]/25 disabled:cursor-wait disabled:opacity-60"
|
|
>
|
|
{{ __('Weiter') }}
|
|
</button>
|
|
@else
|
|
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}" class="inline-flex h-9 min-w-9 cursor-default items-center justify-center rounded-[4px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] px-3 text-[12px] font-semibold text-[color:var(--color-ink-4)]">
|
|
{{ __('Weiter') }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</nav>
|
|
@endif
|