Add bulk actions button/dropdown customisations (#1771)

* Add Customisations for BulkActions * Add default-colors and default-styling options * Add "Customisations" doc for Bulk Actions * Fix broken test --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Jul 12, 2024 · a365801 · a365801
1 parent 11fbd70
commit a365801
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 69 deletions.
diff --git a/docs/bulk-actions/available-methods.md b/docs/bulk-actions/available-methods.md
@@ -184,61 +184,6 @@ public function configure(): void
 }
 ```
 
-## setBulkActionsThAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the table header
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsThAttributes([
-        'class' => 'bg-red-500',
-        'default' => false
-    ]);
-}
-```
-
-## setBulkActionsThCheckboxAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the Select All/None checkbox in the Table Header
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsThCheckboxAttributes([
-        'class' => 'bg-blue-500',
-        'default' => false
-    ]);
-}
-```
-
-## setBulkActionsTdAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the td containing the Bulk Actions Checkbox for the row
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsTdAttributes([
-        'class' => 'bg-green-500',
-        'default' => true
-    ]);
-}
-```
-
-## setBulkActionsTdCheckboxAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Checkbox for the row
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsTdCheckboxAttributes([
-        'class' => 'bg-green-500',
-        'default' => true
-    ]);
-}
-```
 
 ## setShouldAlwaysHideBulkActionsDropdownOption
 
@@ -345,4 +290,4 @@ public function configure(): void
 {
     $this->setClearSelectedOnFilterDisabled();
 }
-```
+```
diff --git a/docs/bulk-actions/customisations.md b/docs/bulk-actions/customisations.md
@@ -0,0 +1,106 @@
+---
+title: Customising Style
+weight: 5
+---
+
+## setBulkActionsThAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the table header
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsThAttributes([
+        'class' => 'bg-red-500',
+        'default' => false
+    ]);
+}
+```
+
+## setBulkActionsThCheckboxAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Select All/None checkbox in the Table Header
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsThCheckboxAttributes([
+        'class' => 'bg-blue-500',
+        'default' => false
+    ]);
+}
+```
+
+## setBulkActionsTdAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the td containing the Bulk Actions Checkbox for the row
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsTdAttributes([
+        'class' => 'bg-green-500',
+        'default' => true
+    ]);
+}
+```
+
+## setBulkActionsTdCheckboxAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Checkbox for the row
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsTdCheckboxAttributes([
+        'class' => 'bg-green-500',
+        'default' => true
+    ]);
+}
+```
+
+## setBulkActionsButtonAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Button in the Toolbar
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsButtonAttributes([
+        'class' => 'bg-green-500',
+        'default-colors' => true,
+        'default-styling' => true,
+    ]);
+}
+```
+
+## setBulkActionsMenuAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Menu
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsMenuAttributes([
+        'class' => 'bg-green-500',
+        'default-colors' => true,
+        'default-styling' => true,    
+    ]);
+}
+```
+
+
+## setBulkActionsMenuItemAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into Items on the Bulk Actions Menu
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsMenuItemAttributes([
+        'class' => 'bg-green-500',
+        'default-colors' => true,
+        'default-styling' => true,    
+    ]);
+}
+```
diff --git a/resources/views/components/tools/toolbar/items/bulk-actions.blade.php b/resources/views/components/tools/toolbar/items/bulk-actions.blade.php
@@ -13,10 +13,16 @@
         ])
     >
         <button
-            @class([
-                'btn dropdown-toggle d-block d-md-inline' => $component->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' => $component->isTailwind(),
-            ])
+            {{ 
+                $attributes->merge($this->getBulkActionsButtonAttributes)
+                ->class([
+                    'btn dropdown-toggle d-block d-md-inline' => $component->isBootstrap() && $this->getBulkActionsButtonAttributes['default-styling'] ?? true,
+                    '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' => $component->isTailwind()  && $this->getBulkActionsButtonAttributes['default-colors'] ?? true,
+                    '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' => $component->isTailwind()  && $this->getBulkActionsButtonAttributes['default-styling'] ?? true,
+
+                ])
+                ->except('default') 
+            }}
             type="button"
             id="{{ $tableName }}-bulkActionsDropdown" 
 
@@ -47,7 +53,16 @@
                 x-transition:leave-end="transform opacity-0 scale-95"
                 class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
             >
-                <div class="rounded-md bg-white shadow-xs dark:bg-gray-700 dark:text-white">
+                <div
+                    {{ 
+                        $attributes->merge($this->getBulkActionsMenuAttributes)
+                        ->class([
+                            'bg-white dark:bg-gray-700 dark:text-white' => $component->isTailwind() && $this->getBulkActionsMenuAttributes['default-colors'] ?? true,
+                            'rounded-md shadow-xs' => $component->isTailwind() && $this->getBulkActionsMenuAttributes['default-styling'] ?? true,
+                        ])
+                        ->except('default') 
+                    }}
+                >
                     <div class="py-1" role="menu" aria-orientation="vertical">
                         @foreach ($component->getBulkActions() as $action => $title)
                             <button
@@ -57,8 +72,15 @@ class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-l
                                 @endif
                                 wire:key="{{ $tableName }}-bulk-action-{{ $action }}"
                                 type="button"
-                                class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2 dark:text-white dark:hover:bg-gray-600"
                                 role="menuitem"
+                                {{ 
+                                    $attributes->merge($this->getBulkActionsMenuItemAttributes)
+                                    ->class([
+                                        'text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 dark:text-white dark:hover:bg-gray-600' => $component->isTailwind() && $this->getBulkActionsMenuItemAttributes['default-colors'] ?? true,
+                                        'block w-full px-4 py-2 text-sm leading-5 focus:outline-none flex items-center space-x-2' => $component->isTailwind() && $this->getBulkActionsMenuItemAttributes['default-styling'] ?? true,
+                                    ])
+                                    ->except('default') 
+                                }}
                             >
                                 <span>{{ $title }}</span>
                             </button>
@@ -68,10 +90,14 @@ class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100
             </div>
         @else
             <div
-                @class([
-                    'dropdown-menu dropdown-menu-right w-100' => $component->isBootstrap4(),
-                    'dropdown-menu dropdown-menu-end w-100' => $component->isBootstrap5(),
-                ])
+                {{ 
+                    $attributes->merge($this->getBulkActionsMenuAttributes)
+                    ->class([
+                        'dropdown-menu dropdown-menu-right w-100' => $component->isBootstrap4() && $this->getBulkActionsMenuAttributes['default-styling'] ?? true,
+                        'dropdown-menu dropdown-menu-end w-100' => $component->isBootstrap5() && $this->getBulkActionsMenuAttributes['default-styling'] ?? true,
+                    ])
+                    ->except('default') 
+                }}
                 aria-labelledby="{{ $tableName }}-bulkActionsDropdown"
             >
                 @foreach ($component->getBulkActions() as $action => $title)
@@ -82,9 +108,13 @@ class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100
                         @endif
                         wire:click="{{ $action }}"
                         wire:key="{{ $tableName }}-bulk-action-{{ $action }}"
-                        @class([
-                            'dropdown-item' => $component->isBootstrap(),
-                        ])
+                        {{ 
+                            $attributes->merge($this->getBulkActionsMenuItemAttributes)
+                                ->class([
+                                    'dropdown-item' => $component->isBootstrap() && $this->getBulkActionsMenuItemAttributes['default-styling'] ?? true,
+                                ])
+                                ->except('default') 
+                        }}
                     >
                         {{ $title }}
                     </a>

diff --git a/src/Traits/Configuration/BulkActionsConfiguration.php b/src/Traits/Configuration/BulkActionsConfiguration.php
@@ -213,4 +213,25 @@ public function setClearSelectedOnFilterDisabled(): self
 
         return $this;
     }
+
+    public function setBulkActionsButtonAttributes(array $bulkActionsButtonAttributes): self
+    {
+        $this->bulkActionsButtonAttributes = [...$this->bulkActionsButtonAttributes, ...$bulkActionsButtonAttributes];
+
+        return $this;
+    }
+
+    public function setBulkActionsMenuAttributes(array $bulkActionsMenuAttributes): self
+    {
+        $this->bulkActionsMenuAttributes = [...$this->bulkActionsMenuAttributes, ...$bulkActionsMenuAttributes];
+
+        return $this;
+    }
+
+    public function setBulkActionsMenuItemAttributes(array $bulkActionsMenuItemAttributes): self
+    {
+        $this->bulkActionsMenuItemAttributes = [...$this->bulkActionsMenuItemAttributes, ...$bulkActionsMenuItemAttributes];
+
+        return $this;
+    }
 }
diff --git a/src/Traits/Helpers/BulkActionsHelpers.php b/src/Traits/Helpers/BulkActionsHelpers.php
@@ -230,4 +230,23 @@ public function getClearSelectedOnFilter(): bool
     {
         return $this->clearSelectedOnFilter ?? true;
     }
+
+    #[Computed]
+    public function getBulkActionsButtonAttributes(): array
+    {
+        return array_merge(['default-colors' => true, 'default-styling' => true], $this->bulkActionsButtonAttributes);
+
+    }
+
+    #[Computed]
+    public function getBulkActionsMenuAttributes(): array
+    {
+        return array_merge(['default-colors' => true, 'default-styling' => true], $this->bulkActionsMenuAttributes);
+    }
+
+    #[Computed]
+    public function getBulkActionsMenuItemAttributes(): array
+    {
+        return array_merge(['default-colors' => true, 'default-styling' => true], $this->bulkActionsMenuItemAttributes);
+    }
 }
diff --git a/src/Traits/WithBulkActions.php b/src/Traits/WithBulkActions.php
@@ -40,6 +40,12 @@ trait WithBulkActions
 
     public bool $clearSelectedOnFilter = true;
 
+    protected array $bulkActionsButtonAttributes = ['default-colors' => true, 'default-styling' => true];
+
+    protected array $bulkActionsMenuAttributes = ['default-colors' => true, 'default-styling' => true];
+
+    protected array $bulkActionsMenuItemAttributes = ['default-colors' => true, 'default-styling' => true];
+
     public function bulkActions(): array
     {
         return property_exists($this, 'bulkActions') ? $this->bulkActions : [];

diff --git a/tests/Traits/Configuration/BulkActionsConfigurationTest.php b/tests/Traits/Configuration/BulkActionsConfigurationTest.php
@@ -193,4 +193,53 @@ public function test_can_set_bulk_actions_th_checkbox_attributes(): void
 
         $this->assertSame(['default' => false, 'class' => 'bg-green-500'], $this->basicTable->getBulkActionsThCheckboxAttributes());
     }
+
+    public function test_can_set_bulk_actions_button_attributes(): void
+    {
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsButtonAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+
+        $this->basicTable->setBulkActionsButtonAttributes(['default-colors' => false, 'class' => 'bg-green-500']);
+
+        $this->assertSame(['default-colors' => false, 'default-styling' => true, 'class' => 'bg-green-500'], $this->basicTable->getBulkActionsButtonAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+
+        $this->basicTable->setBulkActionsButtonAttributes(['class' => 'bg-green-500', 'default-colors' => false]);
+
+        $this->assertSame(['default-colors' => false, 'default-styling' => true, 'class' => 'bg-green-500'], $this->basicTable->getBulkActionsButtonAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+    }
+
+    public function test_can_set_bulk_actions_menu_attributes(): void
+    {
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsButtonAttributes());
+
+        $this->basicTable->setBulkActionsMenuAttributes(['class' => 'bg-blue-500']);
+
+        $this->assertSame(['default-colors' => true, 'default-styling' => true, 'class' => 'bg-blue-500'], $this->basicTable->getBulkActionsMenuAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsButtonAttributes());
+
+        $this->basicTable->setBulkActionsMenuAttributes(['class' => 'bg-blue-500', 'default-colors' => false]);
+
+        $this->assertSame(['default-colors' => false, 'default-styling' => true, 'class' => 'bg-blue-500'], $this->basicTable->getBulkActionsMenuAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsButtonAttributes());
+    }
+
+    public function test_can_set_bulk_actions_menu_item_attributes(): void
+    {
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuItemAttributes());
+
+        $this->basicTable->setBulkActionsMenuItemAttributes(['class' => 'bg-red-500']);
+
+        $this->assertSame(['default-colors' => true, 'default-styling' => true, 'class' => 'bg-red-500'], $this->basicTable->getBulkActionsMenuItemAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+
+        $this->basicTable->setBulkActionsMenuItemAttributes(['class' => 'bg-amber-500', 'default-colors' => false]);
+
+        $this->assertSame(['default-colors' => false, 'default-styling' => true, 'class' => 'bg-amber-500'], $this->basicTable->getBulkActionsMenuItemAttributes());
+        $this->assertSame(['default-colors' => true, 'default-styling' => true], $this->basicTable->getBulkActionsMenuAttributes());
+
+    }
 }