Add setFilterPopoverAttributes

docs/filters/available-methods.md

@@ -206,6 +206,30 @@ public function configure(): void
 }
 ```
 
+### setFilterPopoverAttributes
+
+Allows for the customisation of the appearance of the Filter Popover Menu.
+
+Note the addition of a "default-width" boolean, allowing you to customise the width more smoothly without impacting other applied classes.
+
+You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.
+
+You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array.
+
+```php
+public function configure(): void
+{
+    $this->setFilterPopoverAttributes(
+        [
+        'class' => 'w-96',
+        'default-width' => false,
+        'default-colors' => true,
+        'default-styling' => true, 
+        'x-transition:enter' => 'transition ease-out duration-100',
+        ]
+    );
+}
+```
 
 ----
 

resources/views/components/tools/toolbar/items/filter-popover.blade.php

@@ -1,82 +1,60 @@
-@aware([ 'tableName','isBootstrap','isBootstrap4','isBootstrap5'])
+@aware(['tableName'])
 @if($this->isBootstrap)
-    <ul
-        x-cloak
-        @class([
-            'dropdown-menu w-100 mt-md-5' => $this->isBootstrap4,
-            'dropdown-menu w-100' => $this->isBootstrap5,
-        ])
-        x-bind:class="{ 'show': filterPopoverOpen }"
-        role="menu"
-    >
+    <ul x-cloak {{ $attributes
+            ->merge($this->getFilterPopoverAttributes)
+            ->merge(['role' => 'menu'])
+            ->class([
+                'w-100' => $this->getFilterPopoverAttributes['default-width'] ?? true,
+                'dropdown-menu mt-md-5' => $this->isBootstrap4,
+                'dropdown-menu' => $this->isBootstrap5,
+            ]) }} x-bind:class="{ 'show': filterPopoverOpen }">
         @foreach ($this->getVisibleFilters() as $filter)
-            <div
-                wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-toolbar"
-                @class([
-                    'p-2' => $this->isBootstrap,
-                ])
-                id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper"
-            >
+            <div id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper" wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-toolbar" class="p-2">
                 {{ $filter->setGenericDisplayData($this->getFilterGenericData)->render() }}
             </div>
         @endforeach
 
         @if ($this->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
-            <div
-                @class([
-                    'dropdown-divider' => $this->isBootstrap,
-                ])
-            >
-            </div>
-
-            <button
-                wire:click.prevent="setFilterDefaults" x-on:click="filterPopoverOpen = false"
-                @class([
-                    'dropdown-item btn text-center' => $this->isBootstrap4,
-                    'dropdown-item text-center' => $this->isBootstrap5,
-                ])
-            >
-                {{ __($this->getLocalisationPath.'Clear') }}
-            </button>
+            <div class='dropdown-divider'></div>
+            <x-livewire-tables::tools.toolbar.items.filter-popover.clear-button />
         @endif
     </ul>
 @else
-    <div
-        x-cloak x-show="filterPopoverOpen"
-        x-transition:enter="transition ease-out duration-100"
-        x-transition:enter-start="transform opacity-0 scale-95"
-        x-transition:enter-end="transform opacity-100 scale-100"
-        x-transition:leave="transition ease-in duration-75"
-        x-transition:leave-start="transform opacity-100 scale-100"
-        x-transition:leave-end="transform opacity-0 scale-95"
-        class="origin-top-left absolute left-0 mt-2 w-full md:w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50 dark:bg-gray-700 dark:text-white dark:divide-gray-600"
-        role="menu"
-        aria-orientation="vertical"
-        aria-labelledby="filters-menu"
-    >
+    <div x-cloak x-show="filterPopoverOpen"
+        {{ 
+            $attributes
+            ->merge($this->getFilterPopoverAttributes)
+            ->merge([
+                'role' => 'menu',
+                'aria-orientation' => 'vertical',
+                'aria-labelledby' => 'filters-menu',
+                'x-transition:enter' => 'transition ease-out duration-100',
+                'x-transition:enter-start' => 'transform opacity-0 scale-95',
+                'x-transition:enter-end' => 'transform opacity-100 scale-100',
+                'x-transition:leave' => 'transition ease-in duration-75',
+                'x-transition:leave-start' => 'transform opacity-100 scale-100',
+                'x-transition:leave-end' => 'transform opacity-0 scale-95',
+            ])
+            ->class([
+                'w-full md:w-56' => $this->getFilterPopoverAttributes['default-width'] ?? true,
+                'origin-top-left absolute left-0 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 divide-y focus:outline-none z-50' => $this->getFilterPopoverAttributes['default-styling'] ?? true,
+                'bg-white divide-gray-100 ring-black dark:bg-gray-700 dark:text-white dark:divide-gray-600' => $this->getFilterPopoverAttributes['default-colors'] ?? true,
+            ])
+            ->except(['x-cloak', 'x-show', 'default','default-width', 'default-styling','default-colors']) 
+        }}>
+
         @foreach ($this->getVisibleFilters() as $filter)
             <div class="py-1" role="none">
-                <div
-                    class="block px-4 py-2 text-sm text-gray-700 space-y-1"
-                    role="menuitem"
-                    id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper"
-                >
+                <div id="{{ $tableName }}-filter-{{ $filter->getKey() }}-wrapper" wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-toolbar" class="block px-4 py-2 text-sm text-gray-700 space-y-1" role="menuitem">
                     {{ $filter->setGenericDisplayData($this->getFilterGenericData)->render() }}
                 </div>
             </div>
         @endforeach
 
         @if ($this->hasAppliedVisibleFiltersWithValuesThatCanBeCleared())
             <div class="block px-4 py-3 text-sm text-gray-700 dark:text-white" role="menuitem">
-                <button
-                    x-on:click="filterPopoverOpen = false"
-                    wire:click.prevent="setFilterDefaults"
-                    type="button"
-                    class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-600"
-                >
-                    {{ __($this->getLocalisationPath.'Clear') }}
-                </button>
+                <x-livewire-tables::tools.toolbar.items.filter-popover.clear-button />
             </div>
         @endif
     </div>
-@endif
+@endif

resources/views/components/tools/toolbar/items/filter-popover/clear-button.blade.php

@@ -0,0 +1,7 @@
+<button type="button" wire:click.prevent="setFilterDefaults" x-on:click="filterPopoverOpen = false" @class([
+        'w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-600' => $this->isTailwind,
+        'dropdown-item btn text-center' => $this->isBootstrap4,
+        'dropdown-item text-center' => $this->isBootstrap5,
+    ])>
+    {{ __($this->getLocalisationPath.'Clear') }}
+</button>

src/Traits/Configuration/FilterConfiguration.php

@@ -3,7 +3,6 @@
 namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
 
 use Rappasoft\LaravelLivewireTables\DataTransferObjects\FilterGenericData;
-use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
 
 trait FilterConfiguration
 {
@@ -70,52 +69,6 @@ public function setFilterPillsDisabled(): self
         return $this;
     }
 
-    public function setFilterLayout(string $type): self
-    {
-        if (! in_array($type, ['popover', 'slide-down'], true)) {
-            throw new DataTableConfigurationException('Invalid filter layout type');
-        }
-
-        $this->filterLayout = $type;
-
-        return $this;
-    }
-
-    public function setFilterLayoutPopover(): self
-    {
-        $this->setFilterLayout('popover');
-
-        return $this;
-    }
-
-    public function setFilterLayoutSlideDown(): self
-    {
-        $this->setFilterLayout('slide-down');
-
-        return $this;
-    }
-
-    public function setFilterSlideDownDefaultStatus(bool $status): self
-    {
-        $this->filterSlideDownDefaultVisible = $status;
-
-        return $this;
-    }
-
-    public function setFilterSlideDownDefaultStatusDisabled(): self
-    {
-        $this->setFilterSlideDownDefaultStatus(false);
-
-        return $this;
-    }
-
-    public function setFilterSlideDownDefaultStatusEnabled(): self
-    {
-        $this->setFilterSlideDownDefaultStatus(true);
-
-        return $this;
-    }
-
     public function generateFilterGenericData(): array
     {
         return (new FilterGenericData($this->getTableName(), $this->getFilterLayout(), $this->isTailwind(), $this->isBootstrap4(), $this->isBootstrap5()))->toArray();

src/Traits/Helpers/FilterHelpers.php

@@ -63,21 +63,6 @@ public function filtersVisibilityIsDisabled(): bool
         return $this->getFiltersVisibilityStatus() === false;
     }
 
-    public function getFilterSlideDownDefaultStatus(): bool
-    {
-        return $this->filterSlideDownDefaultVisible;
-    }
-
-    public function filtersSlideDownIsDefaultVisible(): bool
-    {
-        return $this->getFilterSlideDownDefaultStatus() === true;
-    }
-
-    public function filtersSlideDownIsDefaultHidden(): bool
-    {
-        return $this->getFilterSlideDownDefaultStatus() === false;
-    }
-
     public function getFilterPillsStatus(): bool
     {
         return $this->filterPillsStatus;
@@ -273,31 +258,6 @@ public function resetFilter($filter): void
 
     }
 
-    public function getFilterLayout(): string
-    {
-        return $this->filterLayout;
-    }
-
-    public function isFilterLayoutPopover(): bool
-    {
-        return $this->getFilterLayout() === 'popover';
-    }
-
-    public function isFilterLayoutSlideDown(): bool
-    {
-        return $this->getFilterLayout() === 'slide-down';
-    }
-
-    /**
-     * Get whether any filter has a configured slide down row.
-     */
-    public function hasFiltersWithSlidedownRows(): bool
-    {
-        return $this->getFilters()
-            ->reject(fn (Filter $filter) => ! $filter->hasFilterSlidedownRow())
-            ->count() > 0;
-    }
-
     /**
      * Get whether filter has a configured slide down row.
      */
@@ -306,38 +266,6 @@ public function getVisibleFilters(): Collection
         return $this->getFilters()->reject(fn (Filter $filter) => $filter->isHiddenFromMenus());
     }
 
-    /**
-     * Get filters sorted by row
-     *
-     * @return array<mixed>
-     */
-    public function getFiltersByRow(): array
-    {
-        $orderedFilters = [];
-        $filterList = ($this->hasFiltersWithSlidedownRows()) ? $this->getVisibleFilters()->sortBy('filterSlidedownRow') : $this->getVisibleFilters();
-        if ($this->hasFiltersWithSlidedownRows()) {
-            foreach ($filterList as $filter) {
-                $orderedFilters[(string) $filter->getFilterSlidedownRow()][] = $filter;
-            }
-
-            if (empty($orderedFilters['1'])) {
-                $orderedFilters['1'] = (isset($orderedFilters['99']) ? $orderedFilters['99'] : []);
-                if (isset($orderedFilters['99'])) {
-                    unset($orderedFilters['99']);
-                }
-            }
-        } else {
-            $orderedFilters = Arr::wrap($filterList);
-            $orderedFilters['1'] = $orderedFilters['0'] ?? [];
-            if (isset($orderedFilters['0'])) {
-                unset($orderedFilters['0']);
-            }
-        }
-        ksort($orderedFilters);
-
-        return $orderedFilters;
-    }
-
     public function hasFilterGenericData(): bool
     {
         return ! empty($this->filterGenericData);

src/Traits/Styling/Configuration/FilterMenuStylingConfiguration.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;
+
+use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
+
+trait FilterMenuStylingConfiguration
+{
+    /**
+     * Used to set attributes for the Filter Popover
+     */
+    public function setFilterPopoverAttributes(array $filterPopoverAttributes): self
+    {
+        $this->filterPopoverAttributes = array_merge($this->filterPopoverAttributes, $filterPopoverAttributes);
+
+        return $this;
+    }
+
+    public function setFilterLayout(string $type): self
+    {
+        if (! in_array($type, ['popover', 'slide-down'], true)) {
+            throw new DataTableConfigurationException('Invalid filter layout type');
+        }
+
+        $this->filterLayout = $type;
+
+        return $this;
+    }
+
+    public function setFilterLayoutPopover(): self
+    {
+        $this->setFilterLayout('popover');
+
+        return $this;
+    }
+
+    public function setFilterLayoutSlideDown(): self
+    {
+        $this->setFilterLayout('slide-down');
+
+        return $this;
+    }
+
+    public function setFilterSlideDownDefaultStatus(bool $status): self
+    {
+        $this->filterSlideDownDefaultVisible = $status;
+
+        return $this;
+    }
+
+    public function setFilterSlideDownDefaultStatusDisabled(): self
+    {
+        $this->setFilterSlideDownDefaultStatus(false);
+
+        return $this;
+    }
+
+    public function setFilterSlideDownDefaultStatusEnabled(): self
+    {
+        $this->setFilterSlideDownDefaultStatus(true);
+
+        return $this;
+    }
+}