Add setFilterLabelAttributes Capability (#1397)

* Add setFilterLabelAttributes Capability * Update filter-label to use customLabelAttributes to avoid any potential conflicts * Adjust documentation for setCustomFilterLabel --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Oct 8, 2023 · 16ccfe1 · 16ccfe1
1 parent 154f726
commit 16ccfe1
Show file tree

Hide file tree

Showing 16 changed files with 135 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
-## [3.0.0-beta.2] - Removing superfluous item from blade
+## [UNRELEASED]
 - Removes superfluous @endphp from the DateRangeFilter blade
 - Removes reference to remote/published 3rd party assets
+- Add setFilterLabelAttributes Capability Per-Filter
 
 ## [3.0.0-beta.1] - 3.x Amends
 - Amending Documentation for Reordering

diff --git a/docs/filters/available-methods.md b/docs/filters/available-methods.md
@@ -332,26 +332,52 @@ SelectFilter::make('Active')
     ->setCustomFilterLabel('path.to.blade')
 ```
 
-You will receive two properties to your blade, filter (the filter instance), and theme (your chosen theme).  You may access the filter layout as shown below
-
-Example blade:
+You will receive several properties to your blade, explained here:
+- $filter (the filter instance)
+- $filterLayout ('slide-down' or 'popover')
+- $tableName (the table name)
+- $isTailwind (bool - is theme Tailwind)
+- $isBootstrap (bool - is theme Bootstrap 4 or Bootstrap 5)
+- $isBootstrap4 (bool - is theme Bootstrap 4)
+- $isBootstrap5 (bool - is theme Bootstrap 5)
+- $customLabelAttributes (array -> any customLabel attributes set using setFilterLabelAttributes())
+
+Example label blade:
 ```php
-@aware(['component'])
-@props(['filter'])
+@props(['filter', 'filterLayout' => 'popover', 'tableName' => 'table', 'isTailwind' => false, 'isBootstrap' => false, 'isBootstrap4' => false, 'isBootstrap5' => false, 'customLabelAttributes' => [])
+
+
+<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}"
+
+    {{
+        $attributes->merge($customLabelAttributes)
+            ->class(['block text-sm font-medium leading-5 text-gray-700 dark:text-white' => $isTailwind && $customLabelAttributes['default'] ?? true])
+            ->class(['d-block' => $isBootstrap && $filterLayout == 'slide-down' && $customLabelAttributes['default'] ?? true])
+            ->class(['mb-2' => $isBootstrap && $filterLayout == 'popover' && $customLabelAttributes['default'] ?? true])
+            ->except('default')
+    }}
 
-<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}" 
-    @class([
-        'block text-sm font-large leading-5 text-red-700 dark:text-red-700' => $component->isTailwind(),
-        'd-block' => $component->isBootstrap4() && $component->isFilterLayoutSlideDown(),
-        'mb-2' => $component->isBootstrap4() && $component->isFilterLayoutPopover(),
-        'd-block display-4' => $component->isBootstrap5() && $component->isFilterLayoutSlideDown(),
-        'mb-2 display-4' => $component->isBootstrap5() && $component->isFilterLayoutPopover(),
-    ])
 >
     {{ $filter->getName() }}
 </label>
 ```
 
+### setFilterLabelAttributes
+Set custom attributes for a Filter Label.  At present it is recommended to only use this for "class" and "style" attributes to avoid conflicts.
+
+By default, this replaces the default classes on the Filter Label wrapper, if you would like to keep them, set the default flag to true.
+
+```php
+TextFilter::make('Name')
+    ->setFilterLabelAttributes(
+        [
+            'class' => 'text-xl', 
+            'default' => true,
+        ]
+    ),
+```
+
+
 ### Config
 
 If the filter takes any config options, you can set them with the `config` method:

diff --git a/resources/views/components/tools/filter-label.blade.php b/resources/views/components/tools/filter-label.blade.php
@@ -1,12 +1,25 @@
 @aware(['component', 'tableName'])
-@props(['filter', 'filterLayout' => 'popover', 'tableName' => 'table'])
-
-<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}"
-    @class([
-        'block text-sm font-medium leading-5 text-gray-700 dark:text-white' => $component->isTailwind(),
-        'd-block' => $component->isBootstrap() && $filterLayout == 'slide-down',
-        'mb-2' => $component->isBootstrap() && $filterLayout == 'popover',
-    ])
->
-    {{ $filter->getName() }}
-</label>
+@props(['filter', 'filterLayout' => 'popover', 'tableName' => 'table', 'isTailwind' => false, 'isBootstrap' => false, 'isBootstrap4' => false, 'isBootstrap5' => false])
+
+@php
+    $customLabelAttributes = $filter->getFilterLabelAttributes();
+@endphp
+
+@if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
+    @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName, 'isTailwind' => $isTailwind, 'isBootstrap' => $isBootstrap, 'isBootstrap4' => $isBootstrap4, 'isBootstrap5' => $isBootstrap5, 'customLabelAttributes' => $customLabelAttributes])
+@elseif(!$filter->hasCustomPosition())
+    <label for="{{ $tableName }}-filter-{{ $filter->getKey() }}"
+
+        {{
+            $attributes->merge($customLabelAttributes)
+                ->class(['block text-sm font-medium leading-5 text-gray-700 dark:text-white' => $isTailwind && $customLabelAttributes['default'] ?? true])
+                ->class(['d-block' => $isBootstrap && $filterLayout == 'slide-down' && $customLabelAttributes['default'] ?? true])
+                ->class(['mb-2' => $isBootstrap && $filterLayout == 'popover' && $customLabelAttributes['default'] ?? true])
+                ->except('default')
+        }}
+
+    >
+        {{ $filter->getName() }}
+    </label>
+
+@endif
diff --git a/resources/views/components/tools/filters/date-range.blade.php b/resources/views/components/tools/filters/date-range.blade.php
@@ -17,19 +17,14 @@
         }
     }
 
-
-
 @endphp
 
 <div x-cloak id="{{ $tableName }}-dateRangeFilter-{{ $filterKey }}" x-data="flatpickrFilter($wire, '{{ $filterKey }}', @js($filter->getConfigs()), $refs.dateRangeInput, '{{ App::currentLocale() }}')" >
 
 
     <div>
-        @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-            @include($filter->getCustomFilterLabel(), ['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-        @elseif(!$filter->hasCustomPosition())
-            <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName" />
-        @endif
+        <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
 
             <div
                 @class([
@@ -55,4 +50,4 @@
             </div>
 
     </div>
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/date.blade.php b/resources/views/components/tools/filters/date.blade.php
@@ -1,9 +1,6 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(), ['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName" />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
 
     <div @class([
         "rounded-md shadow-sm" => $isTailwind,
@@ -22,4 +19,4 @@
             ])
         />
     </div>
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/datetime.blade.php b/resources/views/components/tools/filters/datetime.blade.php
@@ -1,9 +1,5 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(), ['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName" />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
 
     <div @class([
         "rounded-md shadow-sm" => $isTailwind,
@@ -22,4 +18,4 @@
             ])
         />
     </div>
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/multi-select-dropdown.blade.php b/resources/views/components/tools/filters/multi-select-dropdown.blade.php
@@ -1,9 +1,6 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName"  />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
 
     @if ($isTailwind)
         <div class="rounded-md shadow-sm">
@@ -52,4 +49,4 @@ class="{{ $isBootstrap4 ? 'form-control' : 'form-select' }}"
             @endforeach
         </select>
     @endif
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/multi-select.blade.php b/resources/views/components/tools/filters/multi-select.blade.php
@@ -1,9 +1,6 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName" />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
 
     @if ($isTailwind)
         <div class="rounded-md">
@@ -62,4 +59,4 @@ class="form-check-input"
             </div>
         @endforeach
     @endif
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/number-range.blade.php b/resources/views/components/tools/filters/number-range.blade.php
@@ -4,11 +4,8 @@
     $currentMax = $maxRange = $filter->getConfig('maxRange');
 @endphp
 <div id="{{ $tableName }}-numberRange-{{ $filterKey }}" x-data="numberRangeFilter($wire,'{{ $filterKey }}', '{{ $tableName }}-numberRange-{{ $filterKey }}-wrapper', @js($filter->getConfigs()), '{{ $tableName }}-numberRange-{{ $filterKey }}')" x-on:mousedown.away.throttle.2000ms="updateWireable" x-on:touchstart.away.throttle.2000ms="updateWireable" x-on:mouseleave.throttle.2000ms="updateWireable">
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName  ])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName" />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
 
         <div @class([
             'mt-4 h-22 pt-8 pb-4 grid gap-10' => $isTailwind,
@@ -38,4 +35,4 @@
                 <div class='range-slider__progress'></div>
             </div>
         </div>
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/number.blade.php b/resources/views/components/tools/filters/number.blade.php
@@ -1,9 +1,6 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName"  />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
 
     <div @class([
         "rounded-md shadow-sm" => $isTailwind,
@@ -22,4 +19,4 @@
             ])
         />
     </div>
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/select.blade.php b/resources/views/components/tools/filters/select.blade.php
@@ -1,9 +1,5 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName"  />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
 
     <div @class([
         'rounded-md shadow-sm' => $isTailwind,
@@ -32,4 +28,4 @@
             @endforeach
         </select>
     </div>
-</div>
+</div>
diff --git a/resources/views/components/tools/filters/text-field.blade.php b/resources/views/components/tools/filters/text-field.blade.php
@@ -1,9 +1,5 @@
 <div>
-    @if($filter->hasCustomFilterLabel() && !$filter->hasCustomPosition())
-        @include($filter->getCustomFilterLabel(),['filter' => $filter, 'filterLayout' => $filterLayout, 'tableName' => $tableName])
-    @elseif(!$filter->hasCustomPosition())
-        <x-livewire-tables::tools.filter-label :filter="$filter" :filterLayout="$filterLayout" :tableName="$tableName" />
-    @endif
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
 
     <div @class([
         "rounded-md shadow-sm" => $isTailwind,
@@ -22,4 +18,4 @@
             ])
         />
     </div>
-</div>
+</div>
diff --git a/src/Views/Filter.php b/src/Views/Filter.php
@@ -35,6 +35,8 @@ abstract class Filter
 
     protected ?string $filterCustomLabel = null;
 
+    protected array $filterLabelAttributes = [];
+
     protected ?int $filterSlidedownRow = null;
 
     protected ?int $filterSlidedownColspan = null;

diff --git a/src/Views/Traits/Configuration/FilterConfiguration.php b/src/Views/Traits/Configuration/FilterConfiguration.php
@@ -118,4 +118,11 @@ public function setFilterDefaultValue($value): self
 
         return $this;
     }
+
+    public function setFilterLabelAttributes(array $filterLabelAttributes): self
+    {
+        $this->filterLabelAttributes = [...['default' => false], ...$filterLabelAttributes];
+
+        return $this;
+    }
 }
diff --git a/src/Views/Traits/Helpers/FilterHelpers.php b/src/Views/Traits/Helpers/FilterHelpers.php
@@ -240,4 +240,14 @@ public function hasFilterDefaultValue(): bool
     {
         return ! is_null($this->filterDefaultValue);
     }
+
+    public function getFilterLabelAttributes(): array
+    {
+        return [...['default' => true], ...$this->filterLabelAttributes];
+    }
+
+    public function hasFilterLabelAttributes(): bool
+    {
+        return $this->getFilterLabelAttributes() != ['default' => true] && $this->getFilterLabelAttributes() != ['default' => false];
+    }
 }
diff --git a/tests/Views/Traits/Helpers/FilterHelpersTest.php b/tests/Views/Traits/Helpers/FilterHelpersTest.php
@@ -353,4 +353,31 @@ public function can_get_filter_custom_filter_pills_blade(): void
         $this->assertTrue($filter->hasCustomPillBlade());
         $this->assertSame('foo', $filter->getCustomPillBlade());
     }
+
+    /** @test */
+    public function can_get_filter_label_attributes(): void
+    {
+        $filter1 = TextFilter::make('Filter1');
+        $filter2 = TextFilter::make('Filter2')->setFilterLabelAttributes(
+            ['class' => 'text-xl', 'default' => true]
+        );
+        $filter3 = TextFilter::make('Filter3')->setFilterLabelAttributes(
+            ['class' => 'text-2xl', 'default' => false]
+        );
+
+        $this->assertFalse($filter1->hasFilterLabelAttributes());
+        $this->assertTrue($filter2->hasFilterLabelAttributes());
+        $this->assertTrue($filter3->hasFilterLabelAttributes());
+
+        $this->assertSame($filter1->getFilterLabelAttributes(), ['default' => true]);
+        $this->assertSame($filter2->getFilterLabelAttributes(), ['default' => true, 'class' => 'text-xl']);
+        $this->assertSame($filter3->getFilterLabelAttributes(), ['default' => false, 'class' => 'text-2xl']);
+
+        $filter1->setFilterLabelAttributes(
+            ['class' => 'text-3xl', 'default' => false]
+        );
+        $this->assertTrue($filter1->hasFilterLabelAttributes());
+        $this->assertSame($filter1->getFilterLabelAttributes(), ['default' => false, 'class' => 'text-3xl']);
+
+    }
 }