shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 194 forks source link

Better ReadME for Advanced Custom Toast Registration #75

Closed FiretronP75 closed 6 years ago

FiretronP75 commented 6 years ago

The readme says you can pass a message to a globally registered toast like this: this.$toasted.global.my_app_error({ message : 'Not Authorized to Access' }); But it does not work.

FiretronP75 commented 6 years ago

OK so the problem is not that it doesn't work, but that the documentation is wrong. Changing the title.

FiretronP75 commented 6 years ago

ReadMe needs to be updated to match what is in this jsfiddle https://jsfiddle.net/q7f0Lmf5/1/ that I found in issue https://github.com/shakee93/vue-toasted/issues/45

XanderLuciano commented 6 years ago

The readme is fine, you're just passing a string instead of an object like it is expecting:

the readme shows the format as:

this.$toasted.global.my_app_error({
    message : 'Not Authorized to Access'
});

and yours looks like this:

this.$toasted.global.my_app_error('Not Authorized to Access');

So if you do it that way, you could structure it like so:

Vue.use(Toasted);

Vue.toasted.register('test', payload => {
  if ( !Object.keys(payload).length ) 
    return `Nothing Passed: ${ JSON.stringify(payload) }`; // Empty object

  if ( !!payload.message )
    return `object.message: ${ JSON.stringify(payload) }`; // Custom object

  if ( typeof(payload) === 'string' )
    return `String Passed: ${ payload }`; // string passed
}, 
'success');

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted() {
    // payload == { message: '...' } so we need to use payload.message when registering
    this.$toasted.global.test( {message: 'Pass an Object'} ); // Object Passed to function
    this.$toasted.global.test( 'Just a string' ); // payload == 'just a string'
    this.$toasted.global.test(); // Default Message
  }
});

Fiddle: https://jsfiddle.net/d2hr54j7/

And to have a default message for example:

Vue.toasted.register('test', payload => {
  if ( !Object.keys(payload).length ) 
    return `Error Message`; // Empty object

  if ( !!payload.message )
    return `object.message: ${ payload.message }`; // Custom object

  if ( typeof(payload) === 'string' )
    return `String Passed: ${ payload }`; // string passed
}, 
'success');

image

FiretronP75 commented 6 years ago

Ah, it wasn't clear that the "payload" section of the readme was required for the previous section. It reads like 2 separate topics.

XanderLuciano commented 6 years ago

I can see that, would it make more sense to show the registration first and then show how you pass the object?

I'll admit that unless you're really familiar with javascript it isn't immediately clear that the object is passed to the function you register. I was a little confused at first as well after looking at your example I can see why it's confusing. I'm not sure what the best way to simplify this is though.

Any suggestions?

shakee93 commented 6 years ago

Yes guyz, this is the most complicated part in the plugin. i tried my best to explain it. if you guyz can provide a better easier way to update that part of the doc i would be happy to update the doc

FiretronP75 commented 6 years ago

I will comment in the new issue.