diff --git a/docs/columns/column-selection.md b/docs/columns/column-selection.md index fae9eb906..0d5872fbb 100644 --- a/docs/columns/column-selection.md +++ b/docs/columns/column-selection.md @@ -222,4 +222,68 @@ class DataTableColumnsSelectedListener } } -``` \ No newline at end of file +``` + +## Styling + +### setColumnSelectButtonAttributes +Allows for customisation of the appearance of the "Column Select" 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 Column Select button, the default colors are: + +Bootstrap: None + +Tailwind: `text-gray-700 bg-white border-gray-300 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 Column Select button, the default styling is: + +Bootstrap: `btn dropdown-toggle d-block w-100 d-md-inline` + +Tailwind: `inline-flex justify-center px-4 py-2 w-full text-sm font-medium rounded-md border shadow-sm focus:ring focus:ring-opacity-50` + +```php +public function configure(): void +{ + $this->setColumnSelectButtonAttributes([ + 'class' => 'focus:border-rose-300 focus:ring-1 focus:ring-rose-300 focus-visible:outline-rose-300', // Add these classes to the column select button + 'default-colors' => false, // Do not output the default colors + 'default-styling' => true // Output the default styling + ]); +} +``` + +### setColumnSelectMenuOptionCheckboxAttributes +Allows for customisation of the appearance of the "Column Select" menu option checkbox + +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 Column Select menu option checkbox, the default colors are: + +Bootstrap: None + +Tailwind: `text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600` +#### default-styling + +Setting to false will disable the default styling for the Column Select menu option checkbox, the default styling is: + +Bootstrap 4: None + +Bootstrap 5: `form-check-input` + +Tailwind: `transition duration-150 ease-in-out rounded shadow-sm focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait` + +```php +public function configure(): void +{ + $this->setColumnSelectMenuOptionCheckboxAttributes([ + 'class' => 'text-rose-300 focus:border-rose-300 focus:ring-rose-300', // Add these classes to the column select menu option checkbox + 'default-colors' => false, // Do not output the default colors + 'default-styling' => true // Output the default styling + ]); +} +``` diff --git a/resources/views/components/tools/toolbar/items/column-select.blade.php b/resources/views/components/tools/toolbar/items/column-select.blade.php index e239fb211..60de81110 100644 --- a/resources/views/components/tools/toolbar/items/column-select.blade.php +++ b/resources/views/components/tools/toolbar/items/column-select.blade.php @@ -1,192 +1,229 @@ -@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5']) -@if ($isTailwind) - -@elseif ($isBootstrap) -
$this->getColumnSelectIsHiddenOnMobile() && $isBootstrap4, - 'd-none d-md-block mb-3 mb-md-0 pl-0 pl-md-2' => $this->getColumnSelectIsHiddenOnTablet() && $isBootstrap4, - 'd-none d-sm-block mb-3 mb-md-0 md-0 ms-md-2' => $this->getColumnSelectIsHiddenOnMobile() && $isBootstrap5, - 'd-none d-md-block mb-3 mb-md-0 md-0 ms-md-2' => $this->getColumnSelectIsHiddenOnTablet() && $isBootstrap5, - ]) - > -
$isBootstrap, - ]) - wire:key="{{ $tableName }}-column-select-button" - > - - -
$isBootstrap4, - 'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5, - ]) - aria-labelledby="columnSelect-{{ $tableName }}" - > - @if($isBootstrap4) -
- -
- @elseif($isBootstrap5) -
- getSelectableSelectedColumns()->count() == $this->getSelectableColumns()->count()) checked wire:click="deselectAllColumns" @else unchecked wire:click="selectAllColumns" @endif - /> - - -
- @endif - - @foreach ($this->getColumnsForColumnSelect() as $columnSlug => $columnTitle) -
$isBootstrap5, - ]) - > - @if ($isBootstrap4) - - @elseif($isBootstrap5) - - - @endif -
- @endforeach -
-
-
-@endif +@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5']) +@if ($isTailwind) + +@elseif ($isBootstrap) +
$this->getColumnSelectIsHiddenOnMobile() && $isBootstrap4, + 'd-none d-md-block mb-3 mb-md-0 pl-0 pl-md-2' => $this->getColumnSelectIsHiddenOnTablet() && $isBootstrap4, + 'd-none d-sm-block mb-3 mb-md-0 md-0 ms-md-2' => $this->getColumnSelectIsHiddenOnMobile() && $isBootstrap5, + 'd-none d-md-block mb-3 mb-md-0 md-0 ms-md-2' => $this->getColumnSelectIsHiddenOnTablet() && $isBootstrap5, + ]) + > +
$isBootstrap, + ]) + wire:key="{{ $tableName }}-column-select-button" + > + + +
$isBootstrap4, + 'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5, + ]) + aria-labelledby="columnSelect-{{ $tableName }}" + > + @if($isBootstrap4) +
+ +
+ @elseif($isBootstrap5) +
+ merge($this->getColumnSelectMenuOptionCheckboxAttributes()) + ->class([ + 'form-check-input' => $this->getColumnSelectMenuOptionCheckboxAttributes()['default-styling'], + ]) + ->except(['default-styling', 'default-colors']) + }} + @if($this->getSelectableSelectedColumns()->count() == $this->getSelectableColumns()->count()) checked wire:click="deselectAllColumns" @else unchecked wire:click="selectAllColumns" @endif + /> + + +
+ @endif + + @foreach ($this->getColumnsForColumnSelect() as $columnSlug => $columnTitle) +
$isBootstrap5, + ]) + > + @if ($isBootstrap4) + + @elseif($isBootstrap5) + merge($this->getColumnSelectMenuOptionCheckboxAttributes()) + ->class([ + 'form-check-input' => $this->getColumnSelectMenuOptionCheckboxAttributes()['default-styling'], + ]) + ->except(['default-styling', 'default-colors']) + }} + value="{{ $columnSlug }}" + /> + + @endif +
+ @endforeach +
+
+
+@endif diff --git a/src/Traits/Styling/Configuration/ColumnSelectStylingConfiguration.php b/src/Traits/Styling/Configuration/ColumnSelectStylingConfiguration.php new file mode 100644 index 000000000..242d48d57 --- /dev/null +++ b/src/Traits/Styling/Configuration/ColumnSelectStylingConfiguration.php @@ -0,0 +1,20 @@ +columnSelectButtonAttributes = [...$this->columnSelectButtonAttributes, ...$attributes]; + + return $this; + } + + public function setColumnSelectMenuOptionCheckboxAttributes(array $attributes = []): self + { + $this->columnSelectMenuOptionCheckboxAttributes = [...$this->columnSelectMenuOptionCheckboxAttributes, ...$attributes]; + + return $this; + } +} diff --git a/src/Traits/Styling/HasColumnSelectStyling.php b/src/Traits/Styling/HasColumnSelectStyling.php new file mode 100644 index 000000000..d6b851d33 --- /dev/null +++ b/src/Traits/Styling/HasColumnSelectStyling.php @@ -0,0 +1,15 @@ + true, 'default-colors' => true, 'class' => '']; + protected array $columnSelectMenuOptionCheckboxAttributes = ['default-styling' => true, 'default-colors' => true, 'class' => '']; +} diff --git a/src/Traits/Styling/Helpers/ColumnSelectStylingHelpers.php b/src/Traits/Styling/Helpers/ColumnSelectStylingHelpers.php new file mode 100644 index 000000000..3d0d7c093 --- /dev/null +++ b/src/Traits/Styling/Helpers/ColumnSelectStylingHelpers.php @@ -0,0 +1,21 @@ +columnSelectButtonAttributes; + } + + #[Computed] + public function getColumnSelectMenuOptionCheckboxAttributes(): array + { + return $this->columnSelectMenuOptionCheckboxAttributes; + } +} diff --git a/src/Traits/WithColumnSelect.php b/src/Traits/WithColumnSelect.php index e992c72a8..0ae5364d5 100644 --- a/src/Traits/WithColumnSelect.php +++ b/src/Traits/WithColumnSelect.php @@ -7,12 +7,14 @@ use Rappasoft\LaravelLivewireTables\Traits\Configuration\ColumnSelectConfiguration; use Rappasoft\LaravelLivewireTables\Traits\Core\QueryStrings\HasQueryStringForColumnSelect; use Rappasoft\LaravelLivewireTables\Traits\Helpers\ColumnSelectHelpers; +use Rappasoft\LaravelLivewireTables\Traits\Styling\HasColumnSelectStyling; trait WithColumnSelect { use ColumnSelectConfiguration, ColumnSelectHelpers, - HasQueryStringForColumnSelect; + HasQueryStringForColumnSelect, + HasColumnSelectStyling; #[Locked] public array $columnSelectColumns = ['setupRun' => false, 'selected' => [], 'deselected' => [], 'defaultdeselected' => []];