Feature request: Toast details section

dimitor115 commented 5 years ago

Hey! During my commercial project, we faced the problem of showing some details information of the message shown in toast. For example, our backend return some common error message as There was a problem with fetching user data, and related details message Mock response not found.

Because we like the design and usage of vue-toasted, I decided to fork this project and implement this option on my own. toasted It looks quite nice, it's simple next action which expanded the toast with a given details message.

If you also think it is a nice feature, I will be happy to prepare dedicated PR.

However firstly you have to know, that my implementation require some changes in html toast structure.

  <div class=toasted>
    <div class="toast-body">
    <div class="toast-details">
  </div>

dimitor115 commented 4 years ago

@shakee93 what about?

shakee93 commented 4 years ago

this can be achieved easily via custom toasts.

https://github.com/shakee93/vue-toasted#custom-toast-registration take a look at the advanced example section

Vue.toasted.register('my_app_error',
    (payload) => {

        // if there is no message passed show default message
        if(!payload.message) {
            return `<div class="my-description"> my content ${payload.message} </div>`
        }

        // if there is a message show it with the message
        return "Oops.. ";
    },
    options
)

hope that helps

dimitor115 commented 4 years ago

@shakee93 sorry for late respond. I've tried to use this feature at the beginning but it couldn't figured out how to do it properly. Now I've check it again and you are right it's possible but with some hacks let's say... https://jsfiddle.net/dimitor115/mvpd0y9z/

shakee93 / vue-toasted

Feature request: Toast details section #135