VueJS Instance to display notifications (toast + snackbar). Depends on Buefy.

notify.js

/* 
 * ----------------------------------------------------------------------
 * VueJS + Buefy handler for displaying toast and snackbar notifications
 * API: https://buefy.github.io/#/documentation/toast
 * depends on VueJS and Buefy (and Bulma)
 * 
 * inspired by JACurtis notifiation.blade.php/LaraFlash Package
 * https://gist.github.com/jacurtis/9fa687e8f7512bb197decce7ffc30091
 * ----------------------------------------------------------------------
 */


/**
 * Shows notification (toast or snackbar).
 *
 * @use notify.{method_here}(params...)
 *
 * --------------------------------------------------------
 *
 * @methods simple (accepts msg only) | toast
 * 
 * @param {str}		msg 	Message text.
 * @param {obj}		opt 	Toast options. Optional.
 *
 * 		@param {int} 	duration 	Visibility in miliseconds.
 * 		@param {str}	position 	Position toast appear.
 * 		@param {str}	type 	 	Type (color) of the toast.
 * 
 * --------------------------------------------------------
 *
 * @methods snackbar
 *
 * @param {str}		msg 	Message text.
 * @param {obj}		opt 	Snackbar options. Optional.
 *
 * 		@param {int} 	duration 	Visibility in miliseconds.
 * 		@param {str}	position 	Position toast appear.
 * 		@param {str}	type 	 	Type (color) of the toast.
 * 		@param {str}	actionText 	Snackbar's button text.
 *
 * @param {func}	func 	Callback function. Optional.
 *
 * --------------------------------------------------------
 *
 * @return void
 *
 */

let notify = new Vue({
	data: {
		session: '',
		validMethods: ['simple', 'toast', 'snackbar']
	},
	mounted() {
		let self = this;
		this.$nextTick(function() {
			self.session.forEach(function(el) {
				if (_.includes(self.validMethods, el.type.toLowerCase())) {
					self[el.type.toLowerCase()](el.content);
				} else {
					self.simple(el.content);
				}
			});
		})
	},
	methods: {
		simple(msg) {
			this.$toast.open({
				message: msg,
				position: this.defaults.position,
				type: this.defaults.type,
				duration: this.defaults.duration
			});
		},
		toast(msg, opt = {}) 
		{
			let defaults = {
				type: 'is-light',
				position: 'is-top-right',
				duration: 3500,
				actionText: null
			}

			let options = Object.assign({}, this.defaults, opt);

			this.$toast.open({
				type: options.type,
				message: msg,
				position: options.position,
				duration: options.duration,
			});
		},
		snackbar(msg, opt = {}, func) 
		{
			let options = Object.assign({}, this.defaults, opt);

			this.$snackbar.open({
				type: options.type,
				message: msg,
				position: options.position,
				duration: options.duration,
				actionText: options.actionText,
				onAction: () => {
					if ( typeof func === 'function' ) func();
				}
			})
		}
	},
	mounted() {
		// this.toast('test: Hi there!');
	}

});

window.notify = notify;