[Request] Add autodismiss option

[sat-on-site]

Hello, good package! First of all, thank you for your work.

I think it would be interesting to include a auto-dismiss option.

[mattlibera]

Hey, thanks! Glad the package is coming in handy.

I have thought about this too, and would like to see this implemented. I'll see what I can do here but my time is a bit limited. My thoughts:

• should be vanilla Javascript
• should be able to get basic POC via conditionally adding a setTimeout for calling @this.dismiss() inside the message component.

Some nice-to-have:

• would like to have some sort of a visual indicator on the message itself that it will disappear... progress bar or something.
• would also be nice if hovering over the alert would pause the auto-dismiss

If you have any suggestions, or even a quick PR, that would be great. Thanks!

[mattlibera]

@sat-on-site Naturally I ended up poking at this today to satisfy my curiosity.

I think I have a rough solution that checks all the boxes, but could probably use some tweaking / cleaning up.

If you would like to play around, please feel free to use the feature/auto-dismiss-v2 branch. Syntax should be:

flash('My Message')->dismissAfter(4)->info()->livewire($this);

My biggest concern is figuring out how to get the additional JS and CSS that are needed loaded in properly. But this should at least be a starting point.

[MACscr]

did you get this working? would be nice to have this in the main branch

[mattlibera]

Hey @MACscr - I will need to see if I can find some time to review what I hacked together. I remember feeling OK-but-not-great about what I ended up doing.

Have you been using the feature branch? If so, any feedback?

[Gelidan]

Hey @mattlibera thanks for the package!

For a quick and dirty auto dismiss here, what I use:

<div class="mx-5"  x-data="{showFlash: true}" x-show="showFlash" x-init="setTimeout(() => showFlash = false, 2000)">
    <livewire:flash-container/>
</div>

Maybe helps for others until you publish the new version.