diff --git a/docs/sorting/available-methods.md b/docs/sorting/available-methods.md index 85b181ae5..bd58d7064 100644 --- a/docs/sorting/available-methods.md +++ b/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 diff --git a/resources/views/components/tools/sorting-pills.blade.php b/resources/views/components/tools/sorting-pills.blade.php index 6e4266583..3815bf6c9 100644 --- a/resources/views/components/tools/sorting-pills.blade.php +++ b/resources/views/components/tools/sorting-pills.blade.php @@ -15,14 +15,28 @@ 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) }} @@ -56,14 +79,26 @@ class="focus:outline-none active:outline-none" 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) }} merge($this->getSortingPillsClearSortButtonAttributes()) + ->class([ + 'text-white ml-2' => $this->getSortingPillsClearSortButtonAttributes()['default-styling'], + ]) + ->except(['default-styling', 'default-colors']) + }} > {{ __($this->getLocalisationPath.'Remove sort option') }} @@ -74,7 +109,13 @@ class="text-white ml-2" merge($this->getSortingPillsClearAllButtonAttributes()) + ->class([ + 'badge badge-pill badge-light' => $this->getSortingPillsClearAllButtonAttributes()['default-styling'], + ]) + ->except(['default-styling', 'default-colors']) + }} > {{ __($this->getLocalisationPath.'Clear') }} @@ -96,14 +137,26 @@ class="badge badge-pill badge-light" 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) }} merge($this->getSortingPillsClearSortButtonAttributes()) + ->class([ + 'text-white ms-2' => $this->getSortingPillsClearSortButtonAttributes()['default-styling'], + ]) + ->except(['default-styling', 'default-colors']) + }} > @@ -114,7 +167,13 @@ class="text-white ms-2" 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') }} diff --git a/src/Traits/Styling/Configuration/SortingPillsStylingConfiguration.php b/src/Traits/Styling/Configuration/SortingPillsStylingConfiguration.php new file mode 100644 index 000000000..846a7a11e --- /dev/null +++ b/src/Traits/Styling/Configuration/SortingPillsStylingConfiguration.php @@ -0,0 +1,27 @@ +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; + } +} diff --git a/src/Traits/Styling/HasSortingPillsStyling.php b/src/Traits/Styling/HasSortingPillsStyling.php new file mode 100644 index 000000000..ecb8044e3 --- /dev/null +++ b/src/Traits/Styling/HasSortingPillsStyling.php @@ -0,0 +1,18 @@ + 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' => '']; +} diff --git a/src/Traits/Styling/Helpers/SortingPillsStylingHelpers.php b/src/Traits/Styling/Helpers/SortingPillsStylingHelpers.php new file mode 100644 index 000000000..a6d560797 --- /dev/null +++ b/src/Traits/Styling/Helpers/SortingPillsStylingHelpers.php @@ -0,0 +1,26 @@ +sortingPillsItemAttributes; + } + + #[Computed] + public function getSortingPillsClearSortButtonAttributes(): array + { + return $this->sortingPillsClearSortButtonAttributes; + } + + #[Computed] + public function getSortingPillsClearAllButtonAttributes(): array + { + return $this->sortingPillsClearAllButtonAttributes; + } +} diff --git a/src/Traits/WithSorting.php b/src/Traits/WithSorting.php index a4c093d7f..6d44fd91b 100644 --- a/src/Traits/WithSorting.php +++ b/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 = [];