Merge pull request rappasoft#2179 from HussamAlhennawi/configuration-for-sorting-pills-styling

Enable setting styles for sorting pills as a configuration.

Author: lrljoe

docs/sorting/available-methods.md

@@ -153,6 +153,102 @@ public function configure(): void
 }
 ```
 
+## setSortingPillsItemAttributes
+Allows for customisation of the appearance of the "Sorting Pills Item"
+
+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 Sorting Pills Item, the default colors are:
+
+Bootstrap: None
+
+Tailwind: `bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900`
+
+#### default-styling
+Setting to false will disable the default styling for the Sorting Pills Item, the default styling is:
+
+Bootstrap 4: `badge badge-pill badge-info d-inline-flex align-items-center`
+
+Bootstrap 5: `badge rounded-pill bg-info d-inline-flex align-items-center`
+
+Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize`
+
+```php
+public function configure(): void
+{
+  $this->setSortingPillsItemAttributes([
+    'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900', // Add these classes to the sorting pills item
+    'default-colors' => false, // Do not output the default colors
+    'default-styling' => true // Output the default styling
+  ]);
+}
+```
+
+## setSortingPillsClearSortButtonAttributes
+Allows for customisation of the appearance of the "Sorting Pills Clear Sort Button"
+
+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 Sorting Pills Clear Sort Button, the default colors are:
+
+Bootstrap: None
+
+Tailwind: `text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white`
+
+#### default-styling
+Setting to false will disable the default styling for the Sorting Pills Clear Sort Button, the default styling is:
+
+Bootstrap 4: `text-white ml-2`
+
+Bootstrap 5: `text-white ms-2`
+
+Tailwind: `flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none`
+
+```php
+public function configure(): void
+{
+  $this->setSortingPillsClearSortButtonAttributes([
+    'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the sorting pills clear sort button
+    'default-colors' => false, // Do not output the default colors
+    'default-styling' => true // Output the default styling
+  ]);
+}
+```
+
+## setSortingPillsClearAllButtonAttributes
+Allows for customisation of the appearance of the "Sorting Pills Clear All Button"
+
+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 Sorting Pills Clear All Button, the default colors are:
+
+Bootstrap: None
+
+Tailwind: `bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900`
+
+#### default-styling
+Setting to false will disable the default styling for the Sorting Pills Clear All Button, the default styling is:
+
+Bootstrap 4: `badge badge-pill badge-light`
+
+Bootstrap 5: `badge rounded-pill bg-light text-dark text-decoration-none`
+
+Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium`
+
+```php
+public function configure(): void
+{
+  $this->setSortingPillsClearAllButtonAttributes([
+    'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the sorting pills clear all button
+    'default-colors' => false, // Do not output the default colors
+    'default-styling' => true // Output the default styling
+  ]);
+}
+```
+
 ---
 
 ## setDefaultSortingLabels

resources/views/components/tools/sorting-pills.blade.php

@@ -15,14 +15,28 @@
 
                     <span
                         wire:key="{{ $tableName }}-sorting-pill-{{ $columnSelectName }}"
-                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900"
+                        {{
+                            $attributes->merge($this->getSortingPillsItemAttributes())
+                            ->class([
+                                'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $this->getSortingPillsItemAttributes()['default-styling'],
+                                'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $this->getSortingPillsItemAttributes()['default-colors'],
+                            ])
+                            ->except(['default-styling', 'default-colors'])
+                        }}
                     >
                         {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }}
 
                         <button
                             wire:click="clearSort('{{ $columnSelectName }}')"
                             type="button"
-                            class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
+                            {{
+                                $attributes->merge($this->getSortingPillsClearSortButtonAttributes())
+                                ->class([
+                                    'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none' => $this->getSortingPillsClearSortButtonAttributes()['default-styling'],
+                                    'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $this->getSortingPillsClearSortButtonAttributes()['default-colors'],
+                                ])
+                                ->except(['default-styling', 'default-colors'])
+                            }}
                         >
                             <span class="sr-only">{{ __($this->getLocalisationPath.'Remove sort option') }}</span>
                             <x-heroicon-m-x-mark class="h-3 w-3" />
@@ -34,7 +48,16 @@ class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justif
                     wire:click.prevent="clearSorts"
                     class="focus:outline-none active:outline-none"
                 >
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900">
+                    <span
+                        {{
+                            $attributes->merge($this->getSortingPillsClearAllButtonAttributes())
+                            ->class([
+                                'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium' => $this->getSortingPillsClearAllButtonAttributes()['default-styling'],
+                                'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900' => $this->getSortingPillsClearAllButtonAttributes()['default-colors'],
+                            ])
+                            ->except(['default-styling', 'default-colors'])
+                        }}
+                    >
                         {{ __($this->getLocalisationPath.'Clear') }}
                     </span>
                 </button>
@@ -56,14 +79,26 @@ class="focus:outline-none active:outline-none"
 
                     <span
                         wire:key="{{ $tableName . '-sorting-pill-' . $columnSelectName }}"
-                        class="badge badge-pill badge-info d-inline-flex align-items-center"
+                        {{
+                            $attributes->merge($this->getSortingPillsItemAttributes())
+                            ->class([
+                                'badge badge-pill badge-info d-inline-flex align-items-center' => $this->getSortingPillsItemAttributes()['default-styling'],
+                            ])
+                            ->except(['default-styling', 'default-colors'])
+                        }}
                     >
                         {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }}
 
                         <a
                             href="#"
                             wire:click="clearSort('{{ $columnSelectName }}')"
-                            class="text-white ml-2"
+                            {{
+                                $attributes->merge($this->getSortingPillsClearSortButtonAttributes())
+                                ->class([
+                                    'text-white ml-2' => $this->getSortingPillsClearSortButtonAttributes()['default-styling'],
+                                ])
+                                ->except(['default-styling', 'default-colors'])
+                            }}
                         >
                             <span class="sr-only">{{ __($this->getLocalisationPath.'Remove sort option') }}</span>
                             <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
@@ -74,7 +109,13 @@ class="text-white ml-2"
                 <a
                     href="#"
                     wire:click.prevent="clearSorts"
-                    class="badge badge-pill badge-light"
+                    {{
+                        $attributes->merge($this->getSortingPillsClearAllButtonAttributes())
+                        ->class([
+                            'badge badge-pill badge-light' => $this->getSortingPillsClearAllButtonAttributes()['default-styling'],
+                        ])
+                        ->except(['default-styling', 'default-colors'])
+                    }}
                 >
                     {{ __($this->getLocalisationPath.'Clear') }}
                 </a>
@@ -96,14 +137,26 @@ class="badge badge-pill badge-light"
 
                     <span
                         wire:key="{{ $tableName }}-sorting-pill-{{ $columnSelectName }}"
-                        class="badge rounded-pill bg-info d-inline-flex align-items-center"
+                        {{
+                            $attributes->merge($this->getSortingPillsItemAttributes())
+                            ->class([
+                                'badge rounded-pill bg-info d-inline-flex align-items-center' => $this->getSortingPillsItemAttributes()['default-styling'],
+                            ])
+                            ->except(['default-styling', 'default-colors'])
+                        }}
                     >
                         {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }}
 
                         <a
                             href="#"
                             wire:click="clearSort('{{ $columnSelectName }}')"
-                            class="text-white ms-2"
+                            {{
+                                $attributes->merge($this->getSortingPillsClearSortButtonAttributes())
+                                ->class([
+                                    'text-white ms-2' => $this->getSortingPillsClearSortButtonAttributes()['default-styling'],
+                                ])
+                                ->except(['default-styling', 'default-colors'])
+                            }}
                         >
                             <span class="visually-hidden">{{ __($this->getLocalisationPath.'Remove sort option') }}</span>
                             <x-heroicon-m-x-mark class="laravel-livewire-tables-btn-smaller" />
@@ -114,7 +167,13 @@ class="text-white ms-2"
                 <a
                     href="#"
                     wire:click.prevent="clearSorts"
-                    class="badge rounded-pill bg-light text-dark text-decoration-none"
+                    {{
+                        $attributes->merge($this->getSortingPillsClearAllButtonAttributes())
+                        ->class([
+                            'badge rounded-pill bg-light text-dark text-decoration-none' => $this->getSortingPillsClearAllButtonAttributes()['default-styling'],
+                        ])
+                        ->except(['default-styling', 'default-colors'])
+                    }}
                 >
                     {{ __($this->getLocalisationPath.'Clear') }}
                 </a>

src/Traits/Styling/Configuration/SortingPillsStylingConfiguration.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
+
+trait SortingPillsStylingConfiguration
+{
+    public function setSortingPillsItemAttributes(array $attributes = []): self
+    {
+        $this->sortingPillsItemAttributes = [...$this->sortingPillsItemAttributes, ...$attributes];
+
+        return $this;
+    }
+
+    public function setSortingPillsClearSortButtonAttributes(array $attributes = []): self
+    {
+        $this->sortingPillsClearSortButtonAttributes = [...$this->sortingPillsClearSortButtonAttributes, ...$attributes];
+
+        return $this;
+    }
+
+    public function setSortingPillsClearAllButtonAttributes(array $attributes = []): self
+    {
+        $this->sortingPillsClearAllButtonAttributes = [...$this->sortingPillsClearAllButtonAttributes, ...$attributes];
+
+        return $this;
+    }
+}

src/Traits/Styling/HasSortingPillsStyling.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling;
+
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\SortingPillsStylingConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\SortingPillsStylingHelpers;
+
+trait HasSortingPillsStyling
+{
+    use SortingPillsStylingConfiguration,
+        SortingPillsStylingHelpers;
+
+    protected array $sortingPillsItemAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
+    protected array $sortingPillsClearSortButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
+    protected array $sortingPillsClearAllButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+}

src/Traits/Styling/Helpers/SortingPillsStylingHelpers.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
+
+use Livewire\Attributes\Computed;
+
+trait SortingPillsStylingHelpers
+{
+    #[Computed]
+    public function getSortingPillsItemAttributes(): array
+    {
+        return $this->sortingPillsItemAttributes;
+    }
+
+    #[Computed]
+    public function getSortingPillsClearSortButtonAttributes(): array
+    {
+        return $this->sortingPillsClearSortButtonAttributes;
+    }
+
+    #[Computed]
+    public function getSortingPillsClearAllButtonAttributes(): array
+    {
+        return $this->sortingPillsClearAllButtonAttributes;
+    }
+}

src/Traits/WithSorting.php

@@ -7,12 +7,14 @@
 use Rappasoft\LaravelLivewireTables\Traits\Configuration\SortingConfiguration;
 use Rappasoft\LaravelLivewireTables\Traits\Core\QueryStrings\HasQueryStringForSort;
 use Rappasoft\LaravelLivewireTables\Traits\Helpers\SortingHelpers;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\HasSortingPillsStyling;
 
 trait WithSorting
 {
     use SortingConfiguration,
-        SortingHelpers;
-    use HasQueryStringForSort;
+        SortingHelpers,
+        HasQueryStringForSort,
+        HasSortingPillsStyling;
 
     public array $sorts = [];