Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions docs/filters/available-component-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
138 changes: 75 additions & 63 deletions resources/views/components/tools/toolbar/items/filter-button.blade.php
Original file line number Diff line number Diff line change
@@ -1,63 +1,75 @@
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
@props([])

<div
@class([
'ml-0 ml-md-2 mb-3 mb-md-0' => $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(),
])
>
<div
@if ($this->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,
])
>
<div>
<button
type="button"
@class([
'btn dropdown-toggle d-block w-100 d-md-inline' => $this->isBootstrap,
'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $this->isTailwind,
])
@if ($this->isFilterLayoutPopover()) x-on:click="filterPopoverOpen = !filterPopoverOpen"
aria-haspopup="true"
x-bind:aria-expanded="filterPopoverOpen"
aria-expanded="true"
@endif
@if ($this->isFilterLayoutSlideDown()) x-on:click="filtersOpen = !filtersOpen" @endif
>
{{ __($this->getLocalisationPath.'Filters') }}

@if ($count = $this->getFilterBadgeCount())
<span @class([
'badge badge-info' => $this->isBootstrap,
'ml-1 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' => $this->isTailwind,
])>
{{ $count }}
</span>
@endif

@if($this->isTailwind)
<x-heroicon-o-funnel class="-mr-1 ml-2 h-5 w-5" />
@else
<span @class([
'caret' => $this->isBootstrap,
])></span>
@endif

</button>
</div>

@if ($this->isFilterLayoutPopover())
<x-livewire-tables::tools.toolbar.items.filter-popover />
@endif

</div>
</div>
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
@props([])

<div
@class([
'ml-0 ml-md-2 mb-3 mb-md-0' => $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(),
])
>
<div
@if ($this->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,
])
>
<div>
<button
type="button"
{{
$attributes->merge($this->getFilterButtonAttributes())
->class([
'btn dropdown-toggle d-block w-100 d-md-inline' => $this->isBootstrap && $this->getFilterButtonAttributes()['default-styling'],
'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' => $this->isTailwind && $this->getFilterButtonAttributes()['default-styling'],
'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' => $this->isTailwind && $this->getFilterButtonAttributes()['default-colors'],
])
->except(['default-styling', 'default-colors'])
}}
@if ($this->isFilterLayoutPopover()) x-on:click="filterPopoverOpen = !filterPopoverOpen"
aria-haspopup="true"
x-bind:aria-expanded="filterPopoverOpen"
aria-expanded="true"
@endif
@if ($this->isFilterLayoutSlideDown()) x-on:click="filtersOpen = !filtersOpen" @endif
>
{{ __($this->getLocalisationPath.'Filters') }}

@if ($count = $this->getFilterBadgeCount())
<span
{{
$attributes->merge($this->getFilterButtonBadgeAttributes())
->class([
'badge badge-info' => $this->isBootstrap && $this->getFilterButtonBadgeAttributes()['default-styling'],
'ml-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $this->isTailwind && $this->getFilterButtonBadgeAttributes()['default-styling'],
'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $this->isTailwind && $this->getFilterButtonBadgeAttributes()['default-colors'],
])
->except(['default-styling', 'default-colors'])
}}
>
{{ $count }}
</span>
@endif

@if($this->isTailwind)
<x-heroicon-o-funnel class="-mr-1 ml-2 h-5 w-5" />
@else
<span @class([
'caret' => $this->isBootstrap,
])></span>
@endif

</button>
</div>

@if ($this->isFilterLayoutPopover())
<x-livewire-tables::tools.toolbar.items.filter-popover />
@endif

</div>
</div>
3 changes: 2 additions & 1 deletion src/Traits/Core/Filters/HandlesFilterTraits.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@ trait HandlesFilterTraits
HasFilterPillsStyling,
HasFilterQueryString,
HasFiltersStatus,
HasFiltersVisibility;
HasFiltersVisibility,
HasFilterButtonStyling;
}
16 changes: 16 additions & 0 deletions src/Traits/Core/Filters/HasFilterButtonStyling.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?php

namespace Rappasoft\LaravelLivewireTables\Traits\Core\Filters;

use Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration\FilterButtonStylingConfiguration;
use Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers\FilterButtonStylingHelpers;

trait HasFilterButtonStyling
{
use FilterButtonStylingConfiguration,
FilterButtonStylingHelpers;

protected array $filterButtonAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];

protected array $filterButtonBadgeAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => ''];
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<?php

namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Configuration;

trait FilterButtonStylingConfiguration
{
public function setFilterButtonAttributes(array $attributes = []): self
{
$this->filterButtonAttributes = [...$this->filterButtonAttributes, ...$attributes];

return $this;
}

public function setFilterButtonBadgeAttributes(array $attributes = []): self
{
$this->filterButtonBadgeAttributes = [...$this->filterButtonBadgeAttributes, ...$attributes];

return $this;
}
}
20 changes: 20 additions & 0 deletions src/Traits/Styling/Helpers/FilterButtonStylingHelpers.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<?php

namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;

use Livewire\Attributes\Computed;

trait FilterButtonStylingHelpers
{
#[Computed]
public function getFilterButtonAttributes(): array
{
return $this->filterButtonAttributes;
}

#[Computed]
public function getFilterButtonBadgeAttributes(): array
{
return $this->filterButtonBadgeAttributes;
}
}
67 changes: 67 additions & 0 deletions tests/Unit/Traits/Styling/FilterButtonStylingTest.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<?php

namespace Rappasoft\LaravelLivewireTables\Tests\Unit\Traits\Styling;

use PHPUnit\Framework\Attributes\Group;
use Rappasoft\LaravelLivewireTables\Tests\TestCase;
use Rappasoft\LaravelLivewireTables\Tests\Http\Livewire\PetsTable;

#[Group('Filters')]
final class FilterButtonStylingTest extends TestCase
{
public function test_can_get_default_filter_button_attributes(): void
{
$this->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());
}
}
Loading