Skip to content

Commit

Permalink
Merge pull request rappasoft#2178 from HussamAlhennawi/configuration-…
Browse files Browse the repository at this point in the history
…for-filter-pills-styling

Enable setting styles for filter pills as a configuration.
  • Loading branch information
lrljoe authored Jan 18, 2025
2 parents a941a16 + 4f0c1c2 commit e58bfba
Show file tree
Hide file tree
Showing 7 changed files with 220 additions and 38 deletions.
94 changes: 94 additions & 0 deletions docs/filters/available-component-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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,
Expand Down
17 changes: 11 additions & 6 deletions resources/views/components/tools/filter-pills/item.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
11 changes: 11 additions & 0 deletions src/Traits/Core/Filters/HasFilterPillsStyling.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
26 changes: 26 additions & 0 deletions src/Traits/Styling/Helpers/FilterPillsStylingHelpers.php
Original file line number Diff line number Diff line change
@@ -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;
}
}

0 comments on commit e58bfba

Please sign in to comment.