Skip to content

Commit ac641df

Browse files
lrljoelrljoe
authored
setPerPageFieldAttributes - Customise perPage Dropdown Attributes (rappasoft#1677)
* Add capability to customise colors/styling on the Pagination Per-Page Dropdown --------- Co-authored-by: lrljoe <[email protected]>
1 parent 56ce863 commit ac641df

File tree

10 files changed

+184
-11
lines changed

10 files changed

+184
-11
lines changed

‎.gitattributes‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
/.phpunit.cache export-ignore
77
/build export-ignore
88
/database/database.sqlite export-ignore
9-
/database/sqlite.database. export-ignore
9+
/database/sqlite.database export-ignore
1010
/docs export-ignore
1111
/resources/views/tests export-ignore
1212
/tests export-ignore

‎CHANGELOG.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22

33
All notable changes to `laravel-livewire-tables` will be documented in this file
44

5-
## UNRELEASED
5+
## [v3.2.3] - 2024-03-01
6+
### New Features
7+
- Add capability to customise colors/styling on the Pagination Per-Page Dropdown by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1677
8+
69
### Docs
710
- Amend Lifecycle Hooks document to use "public" rather than "protected" methods
811

@@ -1153,4 +1156,4 @@ Ground Up Rebuild
11531156
[0.1.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.3...v0.1.4
11541157
[0.1.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.2...v0.1.3
11551158
[0.1.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.1...v0.1.2
1156-
[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
1159+
[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1

‎docs/pagination/available-methods.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,3 +228,38 @@ public function configure(): void
228228
$this->setDisplayPaginationDetailsDisabled();
229229
}
230230
```
231+
232+
## setPerPageFieldAttributes
233+
Allows for customisation of the appearance of the "Per Page" dropdown
234+
235+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
236+
237+
### default-colors
238+
Setting to false will disable the default colors for the Per Page dropdown, the default colors are:
239+
Bootstrap:
240+
None
241+
242+
Tailwind:
243+
border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600
244+
245+
### default-styling
246+
Setting to false will disable the default styling for the Per Page dropdown, the default styling is:
247+
Bootstrap 4:
248+
form-control
249+
250+
Bootstrap 5:
251+
form-select
252+
253+
Tailwind:
254+
block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50
255+
256+
```php
257+
public function configure(): void
258+
{
259+
$this->setPerPageFieldAttributes([
260+
'class' => 'border-red-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-red-700 dark:text-white dark:border-red-600', // Add these classes to the dropdown
261+
'default-colors' => false, // Do not output the default colors
262+
'default-styles' => true, // Output the default styling
263+
]);
264+
}
265+
```

‎resources/views/components/tools/toolbar/items/pagination-dropdown.blade.php‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@
44
'ms-0 ms-md-2' => $component->isBootstrap5(),
55
])
66
>
7-
<select
8-
wire:model.live="perPage" id="{{ $tableName }}-perPage"
9-
10-
@class([
11-
'form-control' => $component->isBootstrap4(),
12-
'form-select' => $component->isBootstrap5(),
13-
'block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 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' => $component->isTailwind(),
7+
<select wire:model.live="perPage" id="{{ $tableName }}-perPage"
8+
{{
9+
$attributes->merge($component->getPerPageFieldAttributes())
10+
->class([
11+
'form-control' => $component->isBootstrap4() && $component->getPerPageFieldAttributes()['default-styling'],
12+
'form-select' => $component->isBootstrap5() && $component->getPerPageFieldAttributes()['default-styling'],
13+
'block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50' => $component->isTailwind() && $component->getPerPageFieldAttributes()['default-styling'],
14+
'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600' => $component->isTailwind() && $component->getPerPageFieldAttributes()['default-colors'],
1415
])
16+
->except(['default','default-styling','default-colors'])
17+
}}
1518
>
1619
@foreach ($component->getPerPageAccepted() as $item)
1720
<option

‎src/LaravelLivewireTablesServiceProvider.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class LaravelLivewireTablesServiceProvider extends ServiceProvider
1414
public function boot(): void
1515
{
1616

17-
AboutCommand::add('Rappasoft Laravel Livewire Tables', fn () => ['Version' => '3.2.2']);
17+
AboutCommand::add('Rappasoft Laravel Livewire Tables', fn () => ['Version' => '3.2.3']);
1818

1919
$this->mergeConfigFrom(
2020
__DIR__.'/../config/livewire-tables.php', 'livewire-tables'

‎src/Traits/Configuration/PaginationConfiguration.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,4 +148,11 @@ public function setDefaultPerPage(int $perPage): self
148148

149149
return $this;
150150
}
151+
152+
public function setPerPageFieldAttributes(array $attributes = []): self
153+
{
154+
$this->perPageFieldAttributes = [...$this->perPageFieldAttributes, ...$attributes];
155+
156+
return $this;
157+
}
151158
}

‎src/Traits/Helpers/PaginationHelpers.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
44

5+
use Livewire\Attributes\Computed;
6+
57
trait PaginationHelpers
68
{
79
public function getPageName(): ?string
@@ -141,4 +143,10 @@ private function getPerPagePaginationSessionKey(): string
141143
{
142144
return $this->tableName.'-perPage';
143145
}
146+
147+
#[Computed]
148+
public function getPerPageFieldAttributes(): array
149+
{
150+
return $this->perPageFieldAttributes;
151+
}
144152
}

‎src/Traits/WithPagination.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ trait WithPagination
3939

4040
protected bool $shouldShowPaginationDetails = true;
4141

42+
protected array $perPageFieldAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
43+
4244
public function mountWithPagination(): void
4345
{
4446
$sessionPerPage = session()->get($this->getPerPagePaginationSessionKey(), $this->getPerPageAccepted()[0] ?? 10);

‎tests/Traits/Helpers/PaginationHelpersTest.php‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,29 @@ public function can_disable_detailed_pagination(): void
128128
$this->assertFalse($this->basicTable->showPaginationDetails());
129129

130130
}
131+
132+
/** @test */
133+
public function can_get_pagination_field_attributes(): void
134+
{
135+
136+
$this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $this->basicTable->getPerPageFieldAttributes());
137+
138+
$this->basicTable->setPerPageFieldAttributes(
139+
[
140+
'class' => 'bg-blue-500 dark:bg-red-500',
141+
'default-colors' => true,
142+
]
143+
);
144+
145+
$this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => 'bg-blue-500 dark:bg-red-500'], $this->basicTable->getPerPageFieldAttributes());
146+
147+
$this->basicTable->setPerPageFieldAttributes(
148+
[
149+
'default-styling' => false,
150+
]
151+
);
152+
153+
$this->assertSame(['default-styling' => false, 'default-colors' => true, 'class' => 'bg-blue-500 dark:bg-red-500'], $this->basicTable->getPerPageFieldAttributes());
154+
155+
}
131156
}

‎tests/Traits/Visuals/PaginationVisualsTest.php‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,4 +299,94 @@ public function detailed_pagination_is_not_displayed_simple_bs5(): void
299299
->assertDontSeeHtml('<span>Showing</span>')
300300
->assertDontSeeHtml('<span>to</span>');
301301
}
302+
303+
/** @test */
304+
public function pagination_field_can_set_colors(): void
305+
{
306+
Livewire::test(PetsTable::class)
307+
->assertSeeHtmlInOrder([
308+
'<select wire:model.live="perPage" id="table-perPage"',
309+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
310+
])
311+
->call('setPerPageFieldAttributes', [
312+
'default-colors' => true,
313+
])
314+
->assertSeeHtmlInOrder([
315+
'<select wire:model.live="perPage" id="table-perPage"',
316+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
317+
])
318+
->call('setPerPageFieldAttributes', [
319+
'class' => 'testclass1',
320+
])
321+
->assertSeeHtmlInOrder([
322+
'<select wire:model.live="perPage" id="table-perPage"',
323+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 testclass1"',
324+
])
325+
->call('setPerPageFieldAttributes', [
326+
'class' => 'bg-gre-500 dark:bg-ba-500',
327+
'default-colors' => false,
328+
])
329+
->assertSeeHtmlInOrder([
330+
'<select wire:model.live="perPage" id="table-perPage"',
331+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 bg-gre-500 dark:bg-ba-500"',
332+
]);
333+
}
334+
335+
/** @test */
336+
public function pagination_field_can_set_styling(): void
337+
{
338+
Livewire::test(PetsTable::class)
339+
->assertSeeHtmlInOrder([
340+
'<select wire:model.live="perPage" id="table-perPage"',
341+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
342+
])
343+
->call('setPerPageFieldAttributes', [
344+
'default-styling' => true,
345+
])
346+
->assertSeeHtmlInOrder([
347+
'<select wire:model.live="perPage" id="table-perPage"',
348+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
349+
])
350+
->call('setPerPageFieldAttributes', [
351+
'default-styling' => false,
352+
])
353+
->assertSeeHtmlInOrder([
354+
'<select wire:model.live="perPage" id="table-perPage"',
355+
'class="border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
356+
])
357+
->call('setPerPageFieldAttributes', [
358+
'class' => 'testclass1',
359+
])
360+
->assertSeeHtmlInOrder([
361+
'<select wire:model.live="perPage" id="table-perPage"',
362+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 testclass1"',
363+
])
364+
->call('setPerPageFieldAttributes', [
365+
'class' => 'bg-gre-500 dark:bg-ba-500',
366+
'default-styling' => false,
367+
])
368+
->assertSeeHtmlInOrder([
369+
'<select wire:model.live="perPage" id="table-perPage"',
370+
'class="border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 bg-gre-500 dark:bg-ba-500"',
371+
]);
372+
}
373+
374+
/** @test */
375+
public function pagination_field_can_remove_default_styling_and_colors(): void
376+
{
377+
Livewire::test(PetsTable::class)
378+
->assertSeeHtmlInOrder([
379+
'<select wire:model.live="perPage" id="table-perPage"',
380+
'class="block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
381+
])
382+
->call('setPerPageFieldAttributes', [
383+
'class' => 'bg-gre-500 dark:bg-ba-500',
384+
'default-styling' => false,
385+
'default-colors' => false,
386+
])
387+
->assertSeeHtmlInOrder([
388+
'<select wire:model.live="perPage" id="table-perPage"',
389+
'class="bg-gre-500 dark:bg-ba-500"',
390+
]);
391+
}
302392
}

0 commit comments

Comments
 (0)