Enable setting styles for filter pills (item, reset button and reset all button) as a configuration.

Author: HussamAlhennawi

docs/filters/available-component-methods.md

@@ -121,6 +121,100 @@ public function configure(): void
 }
 ```
 
+## setFilterPillsItemAttributes
+Allows for customisation of the appearance of the "Filter 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 Filter 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 Filter 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->setFilterPillsItemAttributes([
+    'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900', // Add these classes to the filter pills item
+    'default-colors' => false, // Do not output the default colors
+    'default-styling' => true // Output the default styling
+  ]);
+}
+```
+
+## setFilterPillsResetFilterButtonAttributes
+Allows for customisation of the appearance of the "Filter Pills Reset Filter 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 Filter Pills Reset Filter 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 Filter Pills Reset Filter Button, the default styling is:
+
+Bootstrap: `text-white ml-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->setFilterPillsResetFilterButtonAttributes([
+    'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the filter pills reset filter button
+    'default-colors' => false, // Do not output the default colors
+    'default-styling' => true // Output the default styling
+  ]);
+}
+```
+
+## setFilterPillsResetAllButtonAttributes
+Allows for customisation of the appearance of the "Filter Pills Reset 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 Filter Pills Reset 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 Filter Pills Reset 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->setFilterPillsResetAllButtonAttributes([
+    'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the filter pills reset all button
+    'default-colors' => false, // Do not output the default colors
+    'default-styling' => true // Output the default styling
+  ]);
+}
+```
+
 ---
 
 ## setFilterLayout

resources/views/components/tools/filter-pills/buttons/reset-all.blade.php

@@ -1,25 +1,36 @@
-@aware(['isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
-@if ($isTailwind)
-    <button
-        wire:click.prevent="setFilterDefaults"
-        @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'
-            ])>
-            {{ __($this->getLocalisationPath.'Clear') }}
-        </span>
-    </button>
-@else
-    <a
-        href="#"
-        wire:click.prevent="setFilterDefaults"
-        @class([
-            'badge badge-pill badge-light' => $isBootstrap4,
-            'badge rounded-pill bg-light text-dark text-decoration-none' => $isBootstrap5,
-        ])>
-        {{ __($this->getLocalisationPath.'Clear') }}
-    </a>
-@endif
+@aware(['isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
+@if ($isTailwind)
+    <button
+        wire:click.prevent="setFilterDefaults"
+        @class([
+            'focus:outline-none active:outline-none'
+        ])>
+        <span
+            {{
+                $attributes->merge($this->getFilterPillsResetAllButtonAttributes())
+                ->class([
+                    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium' => $this->getFilterPillsResetAllButtonAttributes()['default-styling'],
+                    'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900' => $this->getFilterPillsResetAllButtonAttributes()['default-colors'],
+                ])
+                ->except(['default-styling', 'default-colors'])
+            }}
+        >
+            {{ __($this->getLocalisationPath.'Clear') }}
+        </span>
+    </button>
+@else
+    <a
+        href="#"
+        wire:click.prevent="setFilterDefaults"
+        {{
+            $attributes->merge($this->getFilterPillsResetAllButtonAttributes())
+            ->class([
+                'badge badge-pill badge-light' => $isBootstrap4 && $this->getFilterPillsResetAllButtonAttributes()['default-styling'],
+                'badge rounded-pill bg-light text-dark text-decoration-none' => $isBootstrap5 && $this->getFilterPillsResetAllButtonAttributes()['default-styling'],
+            ])
+            ->except(['default-styling', 'default-colors'])
+        }}
+    >
+        {{ __($this->getLocalisationPath.'Clear') }}
+    </a>
+@endif

resources/views/components/tools/filter-pills/buttons/reset-filter.blade.php

@@ -4,10 +4,14 @@
     <button
         wire:click="resetFilter('{{ $filterKey }}')"
         type="button"
-        @class([
-            'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none',
-            'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white',
-        ])
+        {{
+            $attributes->merge($this->getFilterPillsResetFilterButtonAttributes())
+            ->class([
+                'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none' => $this->getFilterPillsResetFilterButtonAttributes()['default-styling'],
+                'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white' => $this->getFilterPillsResetFilterButtonAttributes()['default-colors'],
+            ])
+            ->except(['default-styling', 'default-colors'])
+        }}
     >
         <span class="sr-only">{{ __($this->getLocalisationPath.'Remove filter option') }}</span>
         <x-heroicon-m-x-mark class="h-full" />
@@ -16,9 +20,13 @@
     <a
         href="#"
         wire:click="resetFilter('{{ $filterKey }}')"
-        @class([
-            'text-white ml-2' => ($isBootstrap),
-        ])
+        {{
+            $attributes->merge($this->getFilterPillsResetFilterButtonAttributes())
+            ->class([
+                'text-white ml-2' => $isBootstrap && $this->getFilterPillsResetFilterButtonAttributes()['default-styling']
+            ])
+            ->except(['default-styling', 'default-colors'])
+        }}
     >
         <span @class([
             'sr-only' => $isBootstrap4,

resources/views/components/tools/filter-pills/item.blade.php

@@ -2,13 +2,18 @@
 @props(['filterPillTitle', 'filterPillValue', 'filterSelectName', 'separator'])
 <span
     wire:key="{{ $tableName }}-filter-pill-{{ $filterSelectName }}"
-    @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' => $isTailwind,
-        'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4,
-        'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5,
-    ])
+    {{
+        $attributes->merge($this->getFilterPillsItemAttributes())
+        ->class([
+            'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $isTailwind && $this->getFilterPillsItemAttributes()['default-styling'],
+            'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $isTailwind && $this->getFilterPillsItemAttributes()['default-colors'],
+            'badge badge-pill badge-info d-inline-flex align-items-center' => $isBootstrap4 && $this->getFilterPillsItemAttributes()['default-styling'],
+            'badge rounded-pill bg-info d-inline-flex align-items-center' => $isBootstrap5 && $this->getFilterPillsItemAttributes()['default-styling'],
+        ])
+        ->except(['default-styling', 'default-colors'])
+    }}
 >
-    {{ $filterPillTitle }}: 
+    {{ $filterPillTitle }}:
 
     @if(is_array($filterPillValue))
         @foreach($filterPillValue as $filterPillArrayValue)

src/Traits/Core/Filters/HasFilterPillsStyling.php

@@ -3,13 +3,24 @@
 namespace Rappasoft\LaravelLivewireTables\Traits\Core\Filters;
 
 use Livewire\Attributes\{Computed, Locked};
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\FilterPillsStylingConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\FilterPillsStylingHelpers;
 use Rappasoft\LaravelLivewireTables\Views\Filter;
 
 trait HasFilterPillsStyling
 {
+    use FilterPillsStylingConfiguration,
+        FilterPillsStylingHelpers;
+
     #[Locked]
     public bool $filterPillsStatus = true;
 
+    protected array $filterPillsItemAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
+    protected array $filterPillsResetFilterButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
+    protected array $filterPillsResetAllButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
+
     public function setFilterPillsStatus(bool $status): self
     {
         $this->filterPillsStatus = $status;

src/Traits/Styling/Configuration/FilterPillsStylingConfiguration.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
+
+trait FilterPillsStylingConfiguration
+{
+    public function setFilterPillsItemAttributes(array $attributes = []): self
+    {
+        $this->filterPillsItemAttributes = [...$this->filterPillsItemAttributes, ...$attributes];
+
+        return $this;
+    }
+
+    public function setFilterPillsResetFilterButtonAttributes(array $attributes = []): self
+    {
+        $this->filterPillsResetFilterButtonAttributes = [...$this->filterPillsResetFilterButtonAttributes, ...$attributes];
+
+        return $this;
+    }
+
+    public function setFilterPillsResetAllButtonAttributes(array $attributes = []): self
+    {
+        $this->filterPillsResetAllButtonAttributes = [...$this->filterPillsResetAllButtonAttributes, ...$attributes];
+
+        return $this;
+    }
+}

src/Traits/Styling/Helpers/FilterPillsStylingHelpers.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;
+
+use Livewire\Attributes\Computed;
+
+trait FilterPillsStylingHelpers
+{
+    #[Computed]
+    public function getFilterPillsItemAttributes(): array
+    {
+        return $this->filterPillsItemAttributes;
+    }
+
+    #[Computed]
+    public function getFilterPillsResetFilterButtonAttributes(): array
+    {
+        return $this->filterPillsResetFilterButtonAttributes;
+    }
+
+    #[Computed]
+    public function getFilterPillsResetAllButtonAttributes(): array
+    {
+        return $this->filterPillsResetAllButtonAttributes;
+    }
+}