Skip to content

Commit 6bc6850

Browse files
lrljoelrljoe
committed
Add Visual Test for PaginationWrapper
1 parent ca42680 commit 6bc6850

File tree

4 files changed

+181
-137
lines changed

4 files changed

+181
-137
lines changed

‎resources/views/components/pagination.blade.php‎

Lines changed: 127 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -6,150 +6,148 @@
66
$this->getParametersForConfigurableArea('before-pagination')
77
)
88

9-
@if ($this->isTailwind)
10-
<div {{ $this->getPaginationWrapperAttributesBag() }}>
11-
@if ($this->paginationVisibilityIsEnabled())
12-
<div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
13-
<div>
14-
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
15-
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
16-
@if($this->showPaginationDetails())
17-
<span>@lang('livewire-tables::Showing')</span>
18-
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
19-
<span>@lang('livewire-tables::to')</span>
20-
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
21-
<span>@lang('livewire-tables::of')</span>
22-
<span class="font-medium"><span x-text="paginationTotalItemCount"></span></span>
23-
<span>@lang('livewire-tables::results')</span>
24-
@endif
25-
</p>
26-
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple'))
27-
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
28-
@if($this->showPaginationDetails())
29-
<span>@lang('livewire-tables::Showing')</span>
30-
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
31-
<span>@lang('livewire-tables::to')</span>
32-
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
33-
@endif
34-
</p>
35-
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor'))
36-
@else
37-
<p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
38-
@lang('livewire-tables::Showing')
39-
<span class="font-medium">{{ $this->getRows->count() }}</span>
40-
@lang('livewire-tables::results')
41-
</p>
42-
@endif
43-
</div>
44-
45-
@if ($this->paginationIsEnabled())
46-
{{ $this->getRows->links('livewire-tables::specific.tailwind.'.(!$this->isPaginationMethod('standard') ? 'simple-' : '').'pagination') }}
9+
@if ($this->isTailwind && $this->paginationIsEnabled() && $this->paginationVisibilityIsEnabled())
10+
<div {{ $this->getPaginationWrapperAttributesBag()->class([
11+
"mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0" => $this->isTailwind && ($this->getPaginationWrapperAttributes['default'] ?? true)
12+
])
13+
->except(['default', 'default-colors', 'default-styling'])
14+
}}
15+
>
16+
@if ($this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
17+
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
18+
@if($this->showPaginationDetails())
19+
<span>@lang('livewire-tables::Showing')</span>
20+
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
21+
<span>@lang('livewire-tables::to')</span>
22+
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
23+
<span>@lang('livewire-tables::of')</span>
24+
<span class="font-medium"><span x-text="paginationTotalItemCount"></span></span>
25+
<span>@lang('livewire-tables::results')</span>
4726
@endif
48-
</div>
27+
</p>
28+
@elseif ($this->isPaginationMethod('simple'))
29+
<p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
30+
@if($this->showPaginationDetails())
31+
<span>@lang('livewire-tables::Showing')</span>
32+
<span class="font-medium">{{ $this->getRows->firstItem() }}</span>
33+
<span>@lang('livewire-tables::to')</span>
34+
<span class="font-medium">{{ $this->getRows->lastItem() }}</span>
35+
@endif
36+
</p>
37+
@elseif ($this->isPaginationMethod('cursor'))
38+
@else
39+
<p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
40+
@lang('livewire-tables::Showing')
41+
<span class="font-medium">{{ $this->getRows->count() }}</span>
42+
@lang('livewire-tables::results')
43+
</p>
4944
@endif
45+
{{ $this->getRows->links('livewire-tables::specific.tailwind.'.(!$this->isPaginationMethod('standard') ? 'simple-' : '').'pagination') }}
5046
</div>
51-
@elseif ($this->isBootstrap4)
52-
<div {{ $this->getPaginationWrapperAttributesBag() }}>
53-
@if ($this->paginationVisibilityIsEnabled())
54-
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
55-
<div class="row mt-3">
56-
<div class="col-12 col-md-6 overflow-auto">
57-
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.pagination') }}
58-
</div>
47+
@elseif ($this->isBootstrap4 && $this->paginationIsEnabled() && $this->paginationVisibilityIsEnabled())
48+
<div {{ $this->getPaginationWrapperAttributesBag()
49+
->except(['default', 'default-colors', 'default-styling'])
50+
}}
51+
>
52+
@if ($this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
53+
<div class="row mt-3">
54+
<div class="col-12 col-md-6 overflow-auto">
55+
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.pagination') }}
56+
</div>
5957

60-
<div class="col-12 col-md-6 text-center text-md-right text-muted">
61-
@if($this->showPaginationDetails())
62-
<span>@lang('livewire-tables::Showing')</span>
63-
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
64-
<span>@lang('livewire-tables::to')</span>
65-
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
66-
<span>@lang('livewire-tables::of')</span>
67-
<strong><span x-text="paginationTotalItemCount"></span></strong>
68-
<span>@lang('livewire-tables::results')</span>
69-
@endif
70-
</div>
58+
<div class="col-12 col-md-6 text-center text-md-right text-muted">
59+
@if($this->showPaginationDetails())
60+
<span>@lang('livewire-tables::Showing')</span>
61+
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
62+
<span>@lang('livewire-tables::to')</span>
63+
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
64+
<span>@lang('livewire-tables::of')</span>
65+
<strong><span x-text="paginationTotalItemCount"></span></strong>
66+
<span>@lang('livewire-tables::results')</span>
67+
@endif
68+
</div>
69+
</div>
70+
@elseif ($this->isPaginationMethod('simple'))
71+
<div class="row mt-3">
72+
<div class="col-12 col-md-6 overflow-auto">
73+
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
7174
</div>
72-
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple'))
73-
<div class="row mt-3">
74-
<div class="col-12 col-md-6 overflow-auto">
75-
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
76-
</div>
7775

78-
<div class="col-12 col-md-6 text-center text-md-right text-muted">
79-
@if($this->showPaginationDetails())
80-
<span>@lang('livewire-tables::Showing')</span>
81-
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
82-
<span>@lang('livewire-tables::to')</span>
83-
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
84-
@endif
85-
</div>
76+
<div class="col-12 col-md-6 text-center text-md-right text-muted">
77+
@if($this->showPaginationDetails())
78+
<span>@lang('livewire-tables::Showing')</span>
79+
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
80+
<span>@lang('livewire-tables::to')</span>
81+
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
82+
@endif
8683
</div>
87-
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor'))
88-
<div class="row mt-3">
89-
<div class="col-12 col-md-6 overflow-auto">
90-
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
91-
</div>
84+
</div>
85+
@elseif ($this->isPaginationMethod('cursor'))
86+
<div class="row mt-3">
87+
<div class="col-12 col-md-6 overflow-auto">
88+
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
9289
</div>
93-
@else
94-
<div class="row mt-3">
95-
<div class="col-12 text-muted">
96-
@lang('livewire-tables::Showing')
97-
<strong>{{ $this->getRows->count() }}</strong>
98-
@lang('livewire-tables::results')
99-
</div>
90+
</div>
91+
@else
92+
<div class="row mt-3">
93+
<div class="col-12 text-muted">
94+
@lang('livewire-tables::Showing')
95+
<strong>{{ $this->getRows->count() }}</strong>
96+
@lang('livewire-tables::results')
10097
</div>
101-
@endif
98+
</div>
10299
@endif
103100
</div>
104-
@elseif ($this->isBootstrap5)
105-
<div {{ $this->getPaginationWrapperAttributesBag() }} >
106-
@if ($this->paginationVisibilityIsEnabled())
107-
@if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
108-
<div class="row mt-3">
109-
<div class="col-12 col-md-6 overflow-auto">
110-
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.pagination') }}
111-
</div>
112-
<div class="col-12 col-md-6 text-center text-md-end text-muted">
113-
@if($this->showPaginationDetails())
114-
<span>@lang('livewire-tables::Showing')</span>
115-
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
116-
<span>@lang('livewire-tables::to')</span>
117-
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
118-
<span>@lang('livewire-tables::of')</span>
119-
<strong><span x-text="paginationTotalItemCount"></span></strong>
120-
<span>@lang('livewire-tables::results')</span>
121-
@endif
122-
</div>
101+
@elseif ($this->isBootstrap5 && $this->paginationIsEnabled() && $this->paginationVisibilityIsEnabled())
102+
<div {{ $this->getPaginationWrapperAttributesBag()
103+
->except(['default', 'default-colors', 'default-styling'])
104+
}}
105+
>
106+
@if ($this->isPaginationMethod('standard') && $this->getRows->lastPage() > 1)
107+
<div class="row mt-3">
108+
<div class="col-12 col-md-6 overflow-auto">
109+
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.pagination') }}
110+
</div>
111+
<div class="col-12 col-md-6 text-center text-md-end text-muted">
112+
@if($this->showPaginationDetails())
113+
<span>@lang('livewire-tables::Showing')</span>
114+
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
115+
<span>@lang('livewire-tables::to')</span>
116+
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
117+
<span>@lang('livewire-tables::of')</span>
118+
<strong><span x-text="paginationTotalItemCount"></span></strong>
119+
<span>@lang('livewire-tables::results')</span>
120+
@endif
121+
</div>
122+
</div>
123+
@elseif ($this->isPaginationMethod('simple'))
124+
<div class="row mt-3">
125+
<div class="col-12 col-md-6 overflow-auto">
126+
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
123127
</div>
124-
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple'))
125-
<div class="row mt-3">
126-
<div class="col-12 col-md-6 overflow-auto">
127-
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
128-
</div>
129-
<div class="col-12 col-md-6 text-center text-md-end text-muted">
130-
@if($this->showPaginationDetails())
131-
<span>@lang('livewire-tables::Showing')</span>
132-
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
133-
<span>@lang('livewire-tables::to')</span>
134-
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
135-
@endif
136-
</div>
128+
<div class="col-12 col-md-6 text-center text-md-end text-muted">
129+
@if($this->showPaginationDetails())
130+
<span>@lang('livewire-tables::Showing')</span>
131+
<strong>{{ $this->getRows->count() ? $this->getRows->firstItem() : 0 }}</strong>
132+
<span>@lang('livewire-tables::to')</span>
133+
<strong>{{ $this->getRows->count() ? $this->getRows->lastItem() : 0 }}</strong>
134+
@endif
137135
</div>
138-
@elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor'))
139-
<div class="row mt-3">
140-
<div class="col-12 col-md-6 overflow-auto">
141-
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
142-
</div>
136+
</div>
137+
@elseif ($this->isPaginationMethod('cursor'))
138+
<div class="row mt-3">
139+
<div class="col-12 col-md-6 overflow-auto">
140+
{{ $this->getRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
143141
</div>
144-
@else
145-
<div class="row mt-3">
146-
<div class="col-12 text-muted">
147-
@lang('livewire-tables::Showing')
148-
<strong>{{ $this->getRows->count() }}</strong>
149-
@lang('livewire-tables::results')
150-
</div>
142+
</div>
143+
@else
144+
<div class="row mt-3">
145+
<div class="col-12 text-muted">
146+
@lang('livewire-tables::Showing')
147+
<strong>{{ $this->getRows->count() }}</strong>
148+
@lang('livewire-tables::results')
151149
</div>
152-
@endif
150+
</div>
153151
@endif
154152
</div>
155153
@endif

‎src/Traits/Styling/HasPaginationStyling.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ trait HasPaginationStyling
1111
use PaginationStylingConfiguration,
1212
PaginationStylingHelpers;
1313

14+
// Used In Frontend
1415
#[Locked]
1516
public string $paginationTheme = 'tailwind';
1617

@@ -22,6 +23,7 @@ trait HasPaginationStyling
2223

2324
// Used In Frontend
2425
protected array $paginationWrapperAttributes = ['class' => ''];
25-
26+
27+
// Used In Frontend
2628
protected ?string $customPaginationBlade;
2729
}

‎src/Traits/Styling/Helpers/PaginationStylingHelpers.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ public function hasCustomPaginationBlade(): bool
6161
#[Computed]
6262
public function getCustomPaginationBlade(): string
6363
{
64-
return $this->customPaginationBlade ? '';
64+
return $this->customPaginationBlade ?? '';
6565
}
6666

6767
}

0 commit comments

Comments
 (0)