v3.4.11 (#1878)

## [v3.4.11] - 2024-08-23
### New Features
- Add setIconLeft/setIconRight for Actions by @lrljoe in #1877

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.4.11] - 2024-08-23
+### New Features
+- Add setIconLeft/setIconRight for Actions by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1877
+
 ## [v3.4.10] - 2024-08-23
 ### Bug Fixes
 - Default UseComputedProperties to True to default to new views by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1873

docs/misc/actions.md

@@ -84,6 +84,38 @@ public function actions(): array
 }
 ```
 
+### setIconLeft
+
+setIconLeft is used to prepend the Icon to the Text (Non-Default Behaviour)
+
+```php
+public function actions(): array
+{
+ return [
+ Action::make('Edit Item')
+ ->setIcon("fas fa-edit")
+ ->setIconAttributes(['class' => 'font-4xl text-4xl'])
+ ->setIconLeft(),
+ ];
+}
+```
+
+### setIconRight
+
+setIconRight is used to append the Icon to the Text (Default Behaviour)
+
+```php
+public function actions(): array
+{
+ return [
+ Action::make('Edit Item')
+ ->setIcon("fas fa-edit")
+ ->setIconAttributes(['class' => 'font-4xl text-4xl'])
+ ->setIconRight(),
+ ];
+}
+```
+
 ### setRoute
 
 Used for non-wireable butons, to set the route that the action button should take the user to upon clicking.

resources/views/includes/actions/button.blade.php

@@ -1,5 +1,5 @@
 <a {{ $attributes->merge()
- ->class(['justify-center text-center items-center inline-flex rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && $attributes['default-styling'] ?? true])
+ ->class(['justify-center text-center items-center inline-flex space-x-2 rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && $attributes['default-styling'] ?? true])
  ->class(['focus:border-indigo-300 focus:ring-indigo-200' => $isTailwind && $attributes['default-colors'] ?? true])
  ->class(['btn btn-sm btn-success' => $isBootstrap && $attributes['default-styling'] ?? true])
  ->class(['' => $isBootstrap && $attributes['default-colors'] ?? true])
@@ -12,13 +12,22 @@
  wire:navigate
  @endif
  >
- {{ $action->getLabel() }}
 
- @if($action->hasIcon())
+ @if($action->hasIcon() && $action->getIconRight())
+ <span>{{ $action->getLabel() }}</span>
  <i {{ $action->getIconAttributes()
- ->class(["ms-1 ". $action->getIcon() => $isBootstrap])
- ->class(["ml-1 ". $action->getIcon() => $isTailwind])
- ->except('default-styling')
- }}></i>
+ ->class(["ms-1 ". $action->getIcon() => $isBootstrap])
+ ->class(["ml-1 ". $action->getIcon() => $isTailwind])
+ ->except('default-styling')
+ }}
+ ></i>
+ @elseif($action->hasIcon() && !$action->getIconRight())
+ <i {{ $action->getIconAttributes()
+ ->class(["ms-1 ". $action->getIcon() => $isBootstrap])
+ ->class(["ml-1 ". $action->getIcon() => $isTailwind])
+ ->except('default-styling')
+ }}
+ ></i>
+ <span>{{ $action->getLabel() }}</span>
  @endif
 </a>

src/Views/Traits/Core/HasIcon.php

@@ -11,6 +11,8 @@ trait HasIcon
 
  public array $iconAttributes = ['default-styling' => true];
 
+ public bool $iconRight = true;
+
  public function setIcon(string $icon): self
  {
  $this->icon = $icon;
@@ -39,4 +41,23 @@ public function getIconAttributes(): ComponentAttributeBag
  {
  return new ComponentAttributeBag([...['default-styling' => true], ...$this->iconAttributes]);
  }
+
+ public function getIconRight(): bool
+ {
+ return $this->iconRight ?? true;
+ }
+
+ public function setIconLeft(): self
+ {
+ $this->iconRight = false;
+
+ return $this;
+ }
+
+ public function setIconRight(): self
+ {
+ $this->iconRight = true;
+
+ return $this;
+ }
 }

tests/Views/Actions/ActionTest.php

@@ -296,6 +296,42 @@ public function exportBulk($items)
 
  }
 
+ public function test_can_set_icon_to_right_default(): void
+ {
+ $action = Action::make('Update Summaries')
+ ->setActionAttributes(['class' => 'dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800', 'default-styling' => true, 'default-colors' => true])
+ ->setIcon('fas fa-minus')
+ ->setIconAttributes(['class' => 'font-sm text-sm'])
+ ->setWireAction('wire:click')
+ ->setWireActionParams('testactionparams');
+ $this->assertTrue($action->getIconRight());
+ }
+
+ public function test_can_set_icon_to_left(): void
+ {
+ $action = Action::make('Update Summaries')
+ ->setActionAttributes(['class' => 'dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800', 'default-styling' => true, 'default-colors' => true])
+ ->setIcon('fas fa-minus')
+ ->setIconAttributes(['class' => 'font-sm text-sm'])
+ ->setIconLeft()
+ ->setWireAction('wire:click')
+ ->setWireActionParams('testactionparams');
+ $this->assertFalse($action->getIconRight());
+ }
+
+ public function test_can_set_icon_to_right(): void
+ {
+ $action = Action::make('Update Summaries')
+ ->setActionAttributes(['class' => 'dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800', 'default-styling' => true, 'default-colors' => true])
+ ->setIcon('fas fa-minus')
+ ->setIconAttributes(['class' => 'font-sm text-sm'])
+ ->setWireAction('wire:click')
+ ->setWireActionParams('testactionparams')
+ ->setIconLeft()
+ ->setIconRight();
+ $this->assertTrue($action->getIconRight());
+ }
+
  public function test_action_renders_correctly(): void
  {
  $action = Action::make('Update Summaries')
@@ -305,6 +341,6 @@ public function test_action_renders_correctly(): void
  )
  ->route('dashboard22');
 
- $this->assertStringContainsString('<a class="focus:border-indigo-300 focus:ring-indigo-200 justify-center text-center items-center inline-flex rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50 dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800" href="dashboard22"', $action->render());
+ $this->assertStringContainsString('<a class="focus:border-indigo-300 focus:ring-indigo-200 justify-center text-center items-center inline-flex space-x-2 rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50 dark:bg-green-500 dark:text-white dark:border-green-600 dark:hover:border-green-900 dark:hover:bg-green-800" href="dashboard22"', $action->render());
  }
 }