Blade Components in Actions.

[abhaypithadiya]

Hey @luanfreitasdev, In version 5 we had a bladeComponent, which is now removed. I typically used it to open a confirmation modal on a delete button. In version 6 we do have livewire's confirm functionality, however it is not so user friendly. Is there any way to render views or bladeComponent in Actions?

[luanfreitasdev]

This would work fine, custom. Or you can use action rules:

[abhaypithadiya]

Sorry for the late reply. If there is no condition to be applied. How can i use this? i just want to render a custom button. And what if in the future there is a condition to be applied then how will this work? The bladeComponent was really useful. This helped in the bulk action button as well. If you have any example it would be great! Thank you!

[luanfreitasdev]

You can do exactly as I described above.

[abhaypithadiya]

Thank you for your quick reply!

Sorry but I still don't understand this. We don't have the render method now in the button class and we don't have the bladeComponent. I can only use action rules but here I always have to pass a condition. Do you have any example where we have something complex like a drop-down used in the actions column?

[jtbrown2-bsu]

It seems like the only way to get a blade component to always render on a button without using an action rule that's only set to true is to use methods like Blade::render or View::render with the slot() method of PowerGrid buttons. However, this doesn't allow access to Alpine in the rendered Blade component. Prior to commit 2248fa2, I could just use the bladeComponent() or render() methods of Button to render Alpine-enabled Blade components in place of the button, but now it seems we are forced to use an action rule for this.

[luanfreitasdev]

We can try to get this back

[jtbrown2-bsu]

I found that the Alpine portion wasn't working because the slot() method puts the HTML in a button by default, which breaks when you add a more complicated component with buttons in it. For example, in the old version of a project, I had a bulk actions button that acted similar to the soft deletes header button that comes with PowerGrid, opening a menu of options when you click on it using a boolean in the component's x-data attribute. That whole component contains more buttons, which were put under (not inside) the main div within the button's slot, like so:

<span class="pg-actions" x-html="toHtml">
     <!--This button is the one generated from Button::add()-->
     <button> 
          <div x-data="{ open: false }" @click.outside="open = false">
          </div>
     </button>
     <!--This button and the div below it should be inside the div from my Blade component-->
     <button x-on:click="open = ! open" title="Bulk Actions">
          Bulk Actions
     </button>
     <div x-show="open">
          <div x-on:click="$wire.dispatch('pg:bulkDelete.TestTable'); open = false">
               Bulk Delete
          </div>
     </div>
</span>

Because buttons cannot be nested in HTML, the Bulk Actions button is separated from the container, which is still in the button made from the Button::add() method. The easiest way to fix this is to change the tag to a div. I wrote this macro that roughly replicates the old functionality.

Button::macro('bladeComponent', function ($component, $params) {
     $this->tag("div");
     $this->slot(Blade::render($component, $params));

     return $this;
});

Now, when I add a button like

Button::add('bulk-actions')
     ->bladeComponent('components.tables.bulk-actions', ['tableName' => $this->tableName])

it correctly has open/close functionality from Alpine.