diff --git a/docs/filters/available-component-methods.md b/docs/filters/available-component-methods.md index bf3c51c43..de4339fa4 100644 --- a/docs/filters/available-component-methods.md +++ b/docs/filters/available-component-methods.md @@ -83,6 +83,67 @@ public function configure(): void } ``` +## setFilterButtonAttributes +Allows for customisation of the appearance of the "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 Button, the default colors are: + +Bootstrap: None + +Tailwind: `border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600` + +#### default-styling +Setting to false will disable the default styling for the Filter Button, the default styling is: + +Bootstrap: `btn dropdown-toggle d-block w-100 d-md-inline` + +Tailwind: `inline-flex justify-center w-full rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50` + +```php +public function configure(): void +{ + $this->setFilterButtonAttributes([ + 'class' => 'border-rose-300 bg-white text-rose-700 hover:bg-rose-50 focus:border-stone-300 focus:ring-stone-200', // Add these classes to the filter button + 'default-colors' => false, // Do not output the default colors + 'default-styling' => true // Output the default styling + ]); +} +``` + +## setFilterButtonBadgeAttributes +Allows for customisation of the appearance of the "Filter Button Badge" + +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 Button Badge, 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 Button Badge, the default styling is: + +Bootstrap: `badge badge-info` + +Tailwind: `ml-1 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->setFilterButtonBadgeAttributes([ + 'class' => 'bg-rose-100 text-rose-800', // Add these classes to the filter button badge + 'default-colors' => false, // Do not output the default colors + 'default-styling' => true // Output the default styling + ]); +} +``` + --- ## setFilterPillsStatus diff --git a/resources/views/components/tools/toolbar/items/filter-button.blade.php b/resources/views/components/tools/toolbar/items/filter-button.blade.php index 452c0d2e9..b58bbb642 100644 --- a/resources/views/components/tools/toolbar/items/filter-button.blade.php +++ b/resources/views/components/tools/toolbar/items/filter-button.blade.php @@ -1,63 +1,75 @@ -@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5']) -@props([]) - -
$this->isBootstrap4, - 'ms-0 ms-md-2 mb-3 mb-md-0' => $this->isBootstrap5 && $this->searchIsEnabled(), - 'mb-3 mb-md-0' => $this->isBootstrap5 && !$this->searchIsEnabled(), - ]) -> -
isFilterLayoutPopover()) - x-data="{ filterPopoverOpen: false }" - x-on:keydown.escape.stop="if (!this.childElementOpen) { filterPopoverOpen = false }" - x-on:mousedown.away="if (!this.childElementOpen) { filterPopoverOpen = false }" - @endif - @class([ - 'btn-group d-block d-md-inline' => $this->isBootstrap, - 'relative block md:inline-block text-left' => $this->isTailwind, - ]) - > -
- -
- - @if ($this->isFilterLayoutPopover()) - - @endif - -
-
+@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5']) +@props([]) + +
$this->isBootstrap4, + 'ms-0 ms-md-2 mb-3 mb-md-0' => $this->isBootstrap5 && $this->searchIsEnabled(), + 'mb-3 mb-md-0' => $this->isBootstrap5 && !$this->searchIsEnabled(), + ]) +> +
isFilterLayoutPopover()) + x-data="{ filterPopoverOpen: false }" + x-on:keydown.escape.stop="if (!this.childElementOpen) { filterPopoverOpen = false }" + x-on:mousedown.away="if (!this.childElementOpen) { filterPopoverOpen = false }" + @endif + @class([ + 'btn-group d-block d-md-inline' => $this->isBootstrap, + 'relative block md:inline-block text-left' => $this->isTailwind, + ]) + > +
+ +
+ + @if ($this->isFilterLayoutPopover()) + + @endif + +
+
diff --git a/src/Traits/Core/Filters/HandlesFilterTraits.php b/src/Traits/Core/Filters/HandlesFilterTraits.php index 249c303e3..1fafebe2e 100644 --- a/src/Traits/Core/Filters/HandlesFilterTraits.php +++ b/src/Traits/Core/Filters/HandlesFilterTraits.php @@ -10,5 +10,6 @@ trait HandlesFilterTraits HasFilterPillsStyling, HasFilterQueryString, HasFiltersStatus, - HasFiltersVisibility; + HasFiltersVisibility, + HasFilterButtonStyling; } diff --git a/src/Traits/Core/Filters/HasFilterButtonStyling.php b/src/Traits/Core/Filters/HasFilterButtonStyling.php new file mode 100644 index 000000000..976f016eb --- /dev/null +++ b/src/Traits/Core/Filters/HasFilterButtonStyling.php @@ -0,0 +1,16 @@ + true, 'default-colors' => true, 'class' => '']; + + protected array $filterButtonBadgeAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => '']; +} diff --git a/src/Traits/Styling/Configuration/FilterButtonStylingConfiguration.php b/src/Traits/Styling/Configuration/FilterButtonStylingConfiguration.php new file mode 100644 index 000000000..bada5a047 --- /dev/null +++ b/src/Traits/Styling/Configuration/FilterButtonStylingConfiguration.php @@ -0,0 +1,20 @@ +filterButtonAttributes = [...$this->filterButtonAttributes, ...$attributes]; + + return $this; + } + + public function setFilterButtonBadgeAttributes(array $attributes = []): self + { + $this->filterButtonBadgeAttributes = [...$this->filterButtonBadgeAttributes, ...$attributes]; + + return $this; + } +} diff --git a/src/Traits/Styling/Helpers/FilterButtonStylingHelpers.php b/src/Traits/Styling/Helpers/FilterButtonStylingHelpers.php new file mode 100644 index 000000000..e0120b61f --- /dev/null +++ b/src/Traits/Styling/Helpers/FilterButtonStylingHelpers.php @@ -0,0 +1,20 @@ +filterButtonAttributes; + } + + #[Computed] + public function getFilterButtonBadgeAttributes(): array + { + return $this->filterButtonBadgeAttributes; + } +} diff --git a/tests/Unit/Traits/Styling/FilterButtonStylingTest.php b/tests/Unit/Traits/Styling/FilterButtonStylingTest.php new file mode 100644 index 000000000..2f205f2fb --- /dev/null +++ b/tests/Unit/Traits/Styling/FilterButtonStylingTest.php @@ -0,0 +1,67 @@ +assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $this->basicTable->getFilterButtonAttributes()); + } + + public function test_can_get_default_filter_button_badge_attributes(): void + { + $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $this->basicTable->getFilterButtonBadgeAttributes()); + } + + public function test_can_change_default_filter_button_attributes(): void + { + $testTableDefault = new class extends PetsTable + { + public function configure(): void + { + parent::configure(); + $this->useComputedPropertiesDisabled(); + + } + + public function publiclySetFilterButtonAttributes(array $attributes = []) + { + $this->setFilterButtonAttributes($attributes); + } + }; + $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $testTableDefault->getFilterButtonAttributes()); + $testTableDefault->publiclySetFilterButtonAttributes(['class' => 'bg-blue-500']); + $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => 'bg-blue-500'], $testTableDefault->getFilterButtonAttributes()); + $testTableDefault->publiclySetFilterButtonAttributes(['class' => 'bg-blue-500', 'default-colors' => false]); + $this->assertSame(['default-styling' => true, 'default-colors' => false, 'class' => 'bg-blue-500'], $testTableDefault->getFilterButtonAttributes()); + } + + public function test_can_change_default_filter_button_badge_attributes(): void + { + $testTableDefault = new class extends PetsTable + { + public function configure(): void + { + parent::configure(); + $this->useComputedPropertiesDisabled(); + + } + + public function publiclySetFilterButtonBadgeAttributes(array $attributes = []) + { + $this->setFilterButtonBadgeAttributes($attributes); + } + }; + $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => ''], $testTableDefault->getFilterButtonBadgeAttributes()); + $testTableDefault->publiclySetFilterButtonBadgeAttributes(['class' => 'bg-blue-500']); + $this->assertSame(['default-styling' => true, 'default-colors' => true, 'class' => 'bg-blue-500'], $testTableDefault->getFilterButtonBadgeAttributes()); + $testTableDefault->publiclySetFilterButtonBadgeAttributes(['class' => 'bg-blue-500', 'default-colors' => false]); + $this->assertSame(['default-styling' => true, 'default-colors' => false, 'class' => 'bg-blue-500'], $testTableDefault->getFilterButtonBadgeAttributes()); + } +}