setPerPageFieldAttributes - Customise perPage Dropdown Attributes

.gitattributes

@@ -6,7 +6,7 @@
 /.phpunit.cache                                         export-ignore
 /build                                                  export-ignore
 /database/database.sqlite                               export-ignore
-/database/sqlite.database.                              export-ignore
+/database/sqlite.database                               export-ignore
 /docs                                                   export-ignore
 /resources/views/tests                                  export-ignore
 /tests                                                  export-ignore

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
-## UNRELEASED
+## [v3.2.3] - 2024-03-01
+### New Features
+- Add capability to customise colors/styling on the Pagination Per-Page Dropdown by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1677
+
 ### Docs
 - Amend Lifecycle Hooks document to use "public" rather than "protected" methods
 
@@ -1153,4 +1156,4 @@ Ground Up Rebuild
 [0.1.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.1...v0.1.2
-[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
+[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1

docs/pagination/available-methods.md

@@ -228,3 +228,38 @@ public function configure(): void
     $this->setDisplayPaginationDetailsDisabled();
 }
 ```
+
+## setPerPageFieldAttributes
+Allows for customisation of the appearance of the "Per Page" dropdown
+
+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.
+
+### default-colors
+Setting to false will disable the default colors for the Per Page dropdown, the default colors are:
+Bootstrap: 
+None
+
+Tailwind: 
+border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600
+
+### default-styling
+Setting to false will disable the default styling for the Per Page dropdown, the default styling is:
+Bootstrap 4:
+form-control
+
+Bootstrap 5:
+form-select
+
+Tailwind:
+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
+
+```php
+public function configure(): void
+{
+    $this->setPerPageFieldAttributes([
+        '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
+        'default-colors' => false, // Do not output the default colors
+        'default-styles' => true, // Output the default styling
+    ]);
+}
+```

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

@@ -4,14 +4,17 @@
         'ms-0 ms-md-2' => $component->isBootstrap5(),
     ])
 >
-    <select
-        wire:model.live="perPage" id="{{ $tableName }}-perPage"
-
-        @class([
-                'form-control' => $component->isBootstrap4(),
-                'form-select' => $component->isBootstrap5(),
-                '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(),
+    <select wire:model.live="perPage" id="{{ $tableName }}-perPage"
+        {{ 
+            $attributes->merge($component->getPerPageFieldAttributes())
+            ->class([
+                'form-control' => $component->isBootstrap4() && $component->getPerPageFieldAttributes()['default-styling'],
+                'form-select' => $component->isBootstrap5() && $component->getPerPageFieldAttributes()['default-styling'],
+                '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'],
+                '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'],
             ])
+            ->except(['default','default-styling','default-colors']) 
+        }}
     >
         @foreach ($component->getPerPageAccepted() as $item)
             <option

src/LaravelLivewireTablesServiceProvider.php

@@ -14,7 +14,7 @@ class LaravelLivewireTablesServiceProvider extends ServiceProvider
     public function boot(): void
     {
 
-        AboutCommand::add('Rappasoft Laravel Livewire Tables', fn () => ['Version' => '3.2.2']);
+        AboutCommand::add('Rappasoft Laravel Livewire Tables', fn () => ['Version' => '3.2.3']);
 
         $this->mergeConfigFrom(
             __DIR__.'/../config/livewire-tables.php', 'livewire-tables'

src/Traits/Configuration/PaginationConfiguration.php

@@ -148,4 +148,11 @@ public function setDefaultPerPage(int $perPage): self
 
         return $this;
     }
+
+    public function setPerPageFieldAttributes(array $attributes = []): self
+    {
+        $this->perPageFieldAttributes = [...$this->perPageFieldAttributes, ...$attributes];
+
+        return $this;
+    }
 }

src/Traits/Helpers/PaginationHelpers.php

@@ -2,6 +2,8 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
 
+use Livewire\Attributes\Computed;
+
 trait PaginationHelpers
 {
     public function getPageName(): ?string
@@ -141,4 +143,10 @@ private function getPerPagePaginationSessionKey(): string
     {
         return $this->tableName.'-perPage';
     }
+
+    #[Computed]
+    public function getPerPageFieldAttributes(): array
+    {
+        return $this->perPageFieldAttributes;
+    }
 }

src/Traits/WithPagination.php

@@ -39,6 +39,8 @@ trait WithPagination
 
     protected bool $shouldShowPaginationDetails = true;
 
+    protected array $perPageFieldAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
     public function mountWithPagination(): void
     {
         $sessionPerPage = session()->get($this->getPerPagePaginationSessionKey(), $this->getPerPageAccepted()[0] ?? 10);

tests/Traits/Helpers/PaginationHelpersTest.php

@@ -128,4 +128,29 @@ public function can_disable_detailed_pagination(): void
         $this->assertFalse($this->basicTable->showPaginationDetails());
 
     }
+
+    /** @test */
+    public function can_get_pagination_field_attributes(): void
+    {
+
+        $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $this->basicTable->getPerPageFieldAttributes());
+
+        $this->basicTable->setPerPageFieldAttributes(
+            [
+                'class' => 'bg-blue-500 dark:bg-red-500',
+                'default-colors' => true,
+            ]
+        );
+
+        $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => 'bg-blue-500 dark:bg-red-500'], $this->basicTable->getPerPageFieldAttributes());
+
+        $this->basicTable->setPerPageFieldAttributes(
+            [
+                'default-styling' => false,
+            ]
+        );
+
+        $this->assertSame(['default-styling' => false, 'default-colors' => true, 'class' => 'bg-blue-500 dark:bg-red-500'], $this->basicTable->getPerPageFieldAttributes());
+
+    }
 }

tests/Traits/Visuals/PaginationVisualsTest.php

@@ -299,4 +299,94 @@ public function detailed_pagination_is_not_displayed_simple_bs5(): void
             ->assertDontSeeHtml('<span>Showing</span>')
             ->assertDontSeeHtml('<span>to</span>');
     }
+
+    /** @test */
+    public function pagination_field_can_set_colors(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'default-colors' => true,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'testclass1',
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'bg-gre-500 dark:bg-ba-500',
+                'default-colors' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ]);
+    }
+
+    /** @test */
+    public function pagination_field_can_set_styling(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'default-styling' => true,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'default-styling' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'testclass1',
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'bg-gre-500 dark:bg-ba-500',
+                'default-styling' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ]);
+    }
+
+    /** @test */
+    public function pagination_field_can_remove_default_styling_and_colors(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                '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"',
+            ])
+            ->call('setPerPageFieldAttributes', [
+                'class' => 'bg-gre-500 dark:bg-ba-500',
+                'default-styling' => false,
+                'default-colors' => false,
+            ])
+            ->assertSeeHtmlInOrder([
+                '<select wire:model.live="perPage" id="table-perPage"',
+                'class="bg-gre-500 dark:bg-ba-500"',
+            ]);
+    }
 }