[enhancement] Renderless version

[renatodeleao]

First of all thanks for this elegant plugin, been using it in every vuex project! 👏

Since i've first heard of them (back in my react days, then know as Function as child), i've been addicted to the possibilities of the renderless components powered by vue scoped slots when building open-source libraries: all the functionality, zero concerns with styles overriding/endless classNames props.

I know that vuex-toast is not one of those cases, because thanks to you, CSS is well written: namespaced and with low specificity, making overrides just a brezze.

That being said, there's always specific requirements from project to project, and sometimes notifications can have more complex markup. Although the text prop accepts html, it's not the same bloating an object value, as having full control of the markup, including the wrapper, transitions and each message own html.

Use case example

As an example, I currently can't pass my markup to the close button, so if i want my that uses my <svgIcon> from my svg-sprite icon system as the toast-close-button, i'm blocked.
This case can solved with refactoring the component to use a named slot <slot name="close-button" /> and that's another, more verbose, valid option. But as soon as another edge case appears, another slot, and this repeats quite often till we found a case where slots are just too complicated.

My proposal

and i'm a firm believer that, unless developing a css framework, styling shouldn't opinionated. I also know that speed of having something styled has development speed benefits, so why not have best of both worlds?

I made really simple, mashed up proof of concept for <toast-renderless> , and have a hackish demo on code sandbox. If you think this worths the work, let me know and we can work together to make this viable option.