vue-snotify
Version:
A Vue.js toast notifications
1,414 lines (1,297 loc) • 50.5 kB
JavaScript
/**
* vue-snotify v3.2.0
* (c) 2018 artemsky <mr.artemsky@gmail.com>
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var Vue = _interopDefault(require('vue'));
/**
* Toast position
*/
(function (SnotifyPosition) {
SnotifyPosition["leftTop"] = "leftTop";
SnotifyPosition["leftCenter"] = "leftCenter";
SnotifyPosition["leftBottom"] = "leftBottom";
SnotifyPosition["rightTop"] = "rightTop";
SnotifyPosition["rightCenter"] = "rightCenter";
SnotifyPosition["rightBottom"] = "rightBottom";
SnotifyPosition["centerTop"] = "centerTop";
SnotifyPosition["centerCenter"] = "centerCenter";
SnotifyPosition["centerBottom"] = "centerBottom";
})(exports.SnotifyPosition || (exports.SnotifyPosition = {}));
/**
* Toast style.
*/
var SnotifyStyle = {
simple: 'simple',
success: 'success',
error: 'error',
warning: 'warning',
info: 'info',
async: 'async',
confirm: 'confirm',
prompt: 'prompt'
};
var script = Vue.extend({
props: ['toast'],
data: function () {
return {
isPromptFocused: false,
};
},
methods: {
valueChanged: function (e) {
this.toast.value = e.target.value;
this.toast.eventEmitter.$emit('input');
}
}
});
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"snotifyToast__input",class:{'snotifyToast__input--filled': _vm.isPromptFocused}},[_c('input',{staticClass:"snotifyToast__input__field",attrs:{"type":"text","id":_vm.toast.id},on:{"input":_vm.valueChanged,"focus":function($event){_vm.isPromptFocused = true;},"blur":function($event){_vm.isPromptFocused = !!_vm.toast.value.length;}}}),_vm._v(" "),_c('label',{staticClass:"snotifyToast__input__label",attrs:{"for":_vm.toast.id}},[_c('span',{staticClass:"snotifyToast__input__labelContent"},[_vm._v(_vm._s(_vm._f("truncate")(_vm.toast.config.placeholder)))])])])};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* component normalizer */
function __vue_normalize__(
template, style, script$$1,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
const component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) component.functional = true;
}
component._scopeId = scope;
return component
}
/* style inject */
function __vue_create_injector__() {
const head = document.head || document.getElementsByTagName('head')[0];
const styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
const isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
let code = css.source;
let index = style.ids.length;
style.ids.push(id);
if (true && css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
const el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) el.setAttribute('media', css.media);
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index]) style.element.removeChild(nodes[index]);
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
else style.element.appendChild(textNode);
}
}
}
}
/* style inject SSR */
var SnotifyPrompt = __vue_normalize__(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
__vue_create_injector__,
undefined
)
var script$1 = Vue.extend({
props: ['toast'],
methods: {
remove: function () {
this.$snotify.remove(this.toast.id);
}
}
});
/* script */
const __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"snotifyToast__buttons"},_vm._l((_vm.toast.config.buttons),function(button){return _c('button',{class:[{'snotifyToast__buttons--bold': button.bold}, button.className],attrs:{"type":"button"},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();button.action ? button.action(_vm.toast) : _vm.remove();}}},[_vm._v("\n "+_vm._s(button.text)+"\n ")])}))};
var __vue_staticRenderFns__$1 = [];
/* style */
const __vue_inject_styles__$1 = undefined;
/* scoped */
const __vue_scope_id__$1 = undefined;
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* component normalizer */
function __vue_normalize__$1(
template, style, script,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
const component = (typeof script === 'function' ? script.options : script) || {};
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) component.functional = true;
}
component._scopeId = scope;
return component
}
/* style inject */
function __vue_create_injector__$1() {
const head = document.head || document.getElementsByTagName('head')[0];
const styles = __vue_create_injector__$1.styles || (__vue_create_injector__$1.styles = {});
const isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
let code = css.source;
let index = style.ids.length;
style.ids.push(id);
if (true && css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
const el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) el.setAttribute('media', css.media);
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index]) style.element.removeChild(nodes[index]);
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
else style.element.appendChild(textNode);
}
}
}
}
/* style inject SSR */
var SnotifyButton = __vue_normalize__$1(
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
__vue_inject_styles__$1,
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
__vue_create_injector__$1,
undefined
)
var script$2 = Vue.extend({
props: ['toastData'],
components: {
SnotifyPrompt: SnotifyPrompt,
SnotifyButton: SnotifyButton
},
data: function () {
return {
toast: this.toastData,
animationFrame: null,
state: {
paused: false,
progress: 0,
animation: '',
isDestroying: false,
promptType: SnotifyStyle.prompt
}
};
},
methods: {
/**
* Initialize base toast config
*/
initToast: function () {
if (this.toast.config.timeout > 0) {
this.startTimeout(0);
}
},
onClick: function () {
this.toast.eventEmitter.$emit('click');
if (this.toast.config.closeOnClick) {
this.$snotify.remove(this.toast.id);
}
},
onMouseEnter: function () {
this.toast.eventEmitter.$emit('mouseenter');
if (this.toast.config.pauseOnHover) {
this.state.paused = true;
}
},
onMouseLeave: function () {
if (this.toast.config.pauseOnHover && this.toast.config.timeout) {
this.state.paused = false;
this.startTimeout(this.toast.config.timeout * this.state.progress);
}
this.toast.eventEmitter.$emit('mouseleave');
},
/**
* Remove toast completely after animation
*/
onExitTransitionEnd: function () {
if (this.state.isDestroying) {
return;
}
this.initToast();
this.toast.eventEmitter.$emit('shown');
},
/**
* Start progress bar
* @param startTime {number}
* @default 0
*/
startTimeout: function (startTime) {
var _this = this;
if (startTime === void 0) { startTime = 0; }
var start = performance.now();
var calculate = function () {
_this.animationFrame = requestAnimationFrame(function (timestamp) {
var runtime = timestamp + startTime - start;
var progress = Math.min(runtime / _this.toast.config.timeout, 1);
if (_this.state.paused) {
cancelAnimationFrame(_this.animationFrame);
}
else if (runtime < _this.toast.config.timeout) {
_this.state.progress = progress;
calculate();
}
else {
_this.state.progress = 1;
cancelAnimationFrame(_this.animationFrame);
_this.$snotify.emitter.$emit('remove', _this.toast.id);
}
});
};
calculate();
},
/**
* Trigger beforeDestroy lifecycle. Removes toast
*/
onRemove: function () {
var _this = this;
this.state.isDestroying = true;
this.$emit('stateChanged', 'beforeHide');
this.toast.eventEmitter.$emit('beforeHide');
this.state.animation = this.toast.config.animation.exit;
setTimeout(function () {
_this.$emit('stateChanged', 'hidden');
_this.state.animation = 'snotifyToast--out';
_this.toast.eventEmitter.$emit('hidden');
setTimeout(function () { return _this.$snotify.remove(_this.toast.id, true); }, _this.toast.config.animation.time / 2);
}, this.toast.config.animation.time / 2);
},
},
created: function () {
var _this = this;
this.$snotify.emitter.$on('toastChanged', function (toast) {
if (_this.toast.id === toast.id) {
_this.initToast();
}
});
this.$snotify.emitter.$on('remove', function (id) {
if (_this.toast.id === id) {
_this.onRemove();
}
});
},
mounted: function () {
var _this = this;
this.$nextTick(function () {
_this.toast.eventEmitter.$emit('mounted');
_this.state.animation = 'snotifyToast--in';
_this.$nextTick(function () {
setTimeout(function () {
_this.$emit('stateChanged', 'beforeShow');
_this.toast.eventEmitter.$emit('beforeShow');
_this.state.animation = _this.toast.config.animation.enter;
}, _this.toast.config.animation.time / 5); // time to show toast push animation (snotifyToast--in)
});
});
},
destroyed: function () {
cancelAnimationFrame(this.animationFrame);
this.toast.eventEmitter.$emit('destroyed');
}
});
/* script */
const __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"snotifyToast animated",class:['snotify-' + _vm.toast.config.type,
_vm.state.animation,
_vm.toast.valid === undefined ? '' : (_vm.toast.valid ? 'snotifyToast--valid' : 'snotifyToast--invalid')
],style:({
'-webkit-animation-duration': _vm.toast.config.animation.time + 'ms',
'animation-duration': _vm.toast.config.animation.time + 'ms',
'-webkit-transition': _vm.toast.config.animation.time + 'ms',
transition: _vm.toast.config.animation.time + 'ms'
}),on:{"click":_vm.onClick,"mouseenter":_vm.onMouseEnter,"mouseleave":_vm.onMouseLeave,"animationend":_vm.onExitTransitionEnd}},[(_vm.toast.config.showProgressBar && _vm.toast.config.timeout > 0)?_c('div',{staticClass:"snotifyToast__progressBar"},[_c('span',{staticClass:"snotifyToast__progressBar__percentage",style:({'width': (_vm.state.progress * 100) + '%'})})]):_vm._e(),_vm._v(" "),(!_vm.toast.config.html)?_c('div',{staticClass:"snotifyToast__inner",class:{'snotifyToast__noIcon': _vm.toast.config.icon === false}},[(_vm.toast.title)?_c('div',{staticClass:"snotifyToast__title"},[_vm._v(_vm._s(_vm._f("truncate")(_vm.toast.title,_vm.toast.config.titleMaxLength)))]):_vm._e(),_vm._v(" "),(_vm.toast.body)?_c('div',{staticClass:"snotifyToast__body"},[_vm._v(_vm._s(_vm._f("truncate")(_vm.toast.body,_vm.toast.config.bodyMaxLength)))]):_vm._e(),_vm._v(" "),(_vm.toast.config.type === _vm.state.promptType)?_c('snotify-prompt',{attrs:{"toast":_vm.toast}}):_vm._e(),_vm._v(" "),(typeof _vm.toast.config.icon === 'undefined')?_c('div',{class:['snotify-icon', 'snotify-icon--' + _vm.toast.config.type]}):(_vm.toast.config.icon !== false)?_c('div',[_c('img',{staticClass:"snotify-icon",attrs:{"src":_vm.toast.config.icon}})]):_vm._e()],1):_c('div',{staticClass:"snotifyToast__inner",domProps:{"innerHTML":_vm._s(_vm.toast.config.html)}}),_vm._v(" "),(_vm.toast.config.buttons)?_c('snotify-button',{attrs:{"toast":_vm.toast}}):_vm._e()],1)};
var __vue_staticRenderFns__$2 = [];
/* style */
const __vue_inject_styles__$2 = undefined;
/* scoped */
const __vue_scope_id__$2 = undefined;
/* module identifier */
const __vue_module_identifier__$2 = undefined;
/* functional template */
const __vue_is_functional_template__$2 = false;
/* component normalizer */
function __vue_normalize__$2(
template, style, script,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
const component = (typeof script === 'function' ? script.options : script) || {};
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) component.functional = true;
}
component._scopeId = scope;
return component
}
/* style inject */
function __vue_create_injector__$2() {
const head = document.head || document.getElementsByTagName('head')[0];
const styles = __vue_create_injector__$2.styles || (__vue_create_injector__$2.styles = {});
const isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
let code = css.source;
let index = style.ids.length;
style.ids.push(id);
if (true && css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
const el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) el.setAttribute('media', css.media);
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index]) style.element.removeChild(nodes[index]);
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
else style.element.appendChild(textNode);
}
}
}
}
/* style inject SSR */
var Toast = __vue_normalize__$2(
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
__vue_inject_styles__$2,
__vue_script__$2,
__vue_scope_id__$2,
__vue_is_functional_template__$2,
__vue_module_identifier__$2,
__vue_create_injector__$2,
undefined
)
var script$3 = Vue.extend({
components: {
Toast: Toast
},
data: function () {
return {
/**
* Toasts array
*/
notifications: {
left_top: [],
left_center: [],
left_bottom: [],
right_top: [],
right_center: [],
right_bottom: [],
center_top: [],
center_center: [],
center_bottom: []
},
/**
* Helper for slice pipe (maxOnScreen)
*/
dockSize_a: 0,
/**
* Helper for slice pipe (maxOnScreen)
*/
dockSize_b: 0,
/**
* Helper for slice pipe (maxAtPosition)
*/
blockSize_a: 0,
/**
* Helper for slice pipe (maxAtPosition)
*/
blockSize_b: 0,
/**
* Backdrop Opacity
*/
backdrop: -1,
/**
* How many toasts with backdrop in current queue
*/
withBackdrop: [],
};
},
methods: {
setOptions: function (toasts) {
if (this.$snotify.config.global.newOnTop) {
this.dockSize_a = -this.$snotify.config.global.maxOnScreen;
this.dockSize_b = undefined;
this.blockSize_a = -this.$snotify.config.global.maxAtPosition;
this.blockSize_b = undefined;
this.withBackdrop = toasts.filter(function (toast) { return toast.config.backdrop >= 0; });
}
else {
this.dockSize_a = 0;
this.dockSize_b = this.$snotify.config.global.maxOnScreen;
this.blockSize_a = 0;
this.blockSize_b = this.$snotify.config.global.maxAtPosition;
this.withBackdrop = toasts.filter(function (toast) { return toast.config.backdrop >= 0; }).reverse();
}
this.notifications = this.splitToasts(toasts.slice(this.dockSize_a, this.dockSize_b));
this.stateChanged('mounted');
},
// TODO: fix backdrop if more than one toast called in a row
/**
* Changes the backdrop opacity
* @param {SnotifyEvent} event
*/
stateChanged: function (event) {
if (!this.withBackdrop.length) {
return;
}
switch (event) {
case 'mounted':
if (this.backdrop < 0) {
this.backdrop = 0;
}
break;
case 'beforeShow':
this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop;
break;
case 'beforeHide':
if (this.withBackdrop.length === 1) {
this.backdrop = 0;
}
break;
case 'hidden':
if (this.withBackdrop.length === 1) {
this.backdrop = -1;
}
break;
}
},
/**
* Split toasts toasts into different objects
* @param {SnotifyToast[]} toasts
* @returns {SnotifyNotifications}
*/
splitToasts: function (toasts) {
var result = {};
for (var property in exports.SnotifyPosition) {
if (exports.SnotifyPosition.hasOwnProperty(property)) {
result[exports.SnotifyPosition[property]] = [];
}
}
toasts.forEach(function (toast) {
result[toast.config.position].push(toast);
});
return result;
},
},
created: function () {
var _this = this;
this.$snotify.emitter.$on('snotify', function (toasts) {
_this.setOptions(toasts);
});
}
});
/* script */
const __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.backdrop >= 0)?_c('div',{staticClass:"snotify-backdrop",style:({opacity: _vm.backdrop})}):_vm._e(),_vm._v(" "),_vm._l((_vm.notifications),function(position,index){return _c('div',{staticClass:"snotify",class:'snotify-' + index},_vm._l((_vm.notifications[index].slice(_vm.blockSize_a, _vm.blockSize_b)),function(toast){return _c('toast',{key:toast.id,attrs:{"toastData":toast},on:{"stateChanged":_vm.stateChanged}})}))})],2)};
var __vue_staticRenderFns__$3 = [];
/* style */
const __vue_inject_styles__$3 = undefined;
/* scoped */
const __vue_scope_id__$3 = undefined;
/* module identifier */
const __vue_module_identifier__$3 = undefined;
/* functional template */
const __vue_is_functional_template__$3 = false;
/* component normalizer */
function __vue_normalize__$3(
template, style, script,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
const component = (typeof script === 'function' ? script.options : script) || {};
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) component.functional = true;
}
component._scopeId = scope;
return component
}
/* style inject */
function __vue_create_injector__$3() {
const head = document.head || document.getElementsByTagName('head')[0];
const styles = __vue_create_injector__$3.styles || (__vue_create_injector__$3.styles = {});
const isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
let code = css.source;
let index = style.ids.length;
style.ids.push(id);
if (true && css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
const el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) el.setAttribute('media', css.media);
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index]) style.element.removeChild(nodes[index]);
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
else style.element.appendChild(textNode);
}
}
}
}
/* style inject SSR */
var Snotify = __vue_normalize__$3(
{ render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
__vue_inject_styles__$3,
__vue_script__$3,
__vue_scope_id__$3,
__vue_is_functional_template__$3,
__vue_module_identifier__$3,
__vue_create_injector__$3,
undefined
)
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var __assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
/**
* Toast model
*/
var SnotifyToast = /** @class */ (function () {
/**
*
* @param {number|string} id
* @param {string} title
* @param {string} body
* @param {SnotifyToastConfig} [config]
*/
function SnotifyToast(id, title, body, config) {
var _this = this;
this.id = id;
this.title = title;
this.body = body;
this.config = config;
/**
* Emits {SnotifyEvent}
* @type {Vue}
*/
this.eventEmitter = new Vue();
/**
* Holds all subscribers because we need to unsubscribe from all before toast get destroyed
* @type {Vue[]}
* @private
*/
this._eventsHolder = [];
/**
* Toast validator
*/
this.valid = undefined;
if (this.config.type === SnotifyStyle.prompt) {
this.value = '';
}
this.on('hidden', function () {
_this._eventsHolder.forEach(function (o) {
_this.eventEmitter.$off(o.event, o.action);
});
});
}
/**
* This callback is displayed as a global member.
* @callback action
* @param {toast} responseCode
* @returns {void}
*/
/**
* Subscribe to toast events
* @param {String<SnotifyEvent>} event
* @param {SnotifyToast~action} action
* @returns {SnotifyToast}
*/
SnotifyToast.prototype.on = function (event, action) {
var _this = this;
this._eventsHolder.push({ event: event, action: action });
this.eventEmitter.$on(event, function () { return action(_this); });
return this;
};
return SnotifyToast;
}());
/**
* Snotify default configuration object
* @type {SnotifyDefaults}
*/
var ToastDefaults = {
global: {
newOnTop: true,
maxOnScreen: 8,
maxAtPosition: 8,
oneAtTime: false,
preventDuplicates: false
},
toast: {
type: SnotifyStyle.simple,
showProgressBar: true,
timeout: 2000,
closeOnClick: true,
pauseOnHover: true,
bodyMaxLength: 150,
titleMaxLength: 16,
backdrop: -1,
icon: undefined,
html: null,
position: exports.SnotifyPosition.rightBottom,
animation: { enter: 'fadeIn', exit: 'fadeOut', time: 400 }
},
type: (_a = {}, _a[SnotifyStyle.prompt] = {
timeout: 0,
closeOnClick: false,
buttons: [
{ text: 'Ok', action: null, bold: true },
{ text: 'Cancel', action: null, bold: false },
],
placeholder: 'Enter answer here...',
type: SnotifyStyle.prompt,
}, _a[SnotifyStyle.confirm] = {
timeout: 0,
closeOnClick: false,
buttons: [
{ text: 'Ok', action: null, bold: true },
{ text: 'Cancel', action: null, bold: false },
],
type: SnotifyStyle.confirm,
}, _a[SnotifyStyle.simple] = {
type: SnotifyStyle.simple
}, _a[SnotifyStyle.success] = {
type: SnotifyStyle.success
}, _a[SnotifyStyle.error] = {
type: SnotifyStyle.error
}, _a[SnotifyStyle.warning] = {
type: SnotifyStyle.warning
}, _a[SnotifyStyle.info] = {
type: SnotifyStyle.info
}, _a[SnotifyStyle.async] = {
pauseOnHover: false,
closeOnClick: false,
timeout: 0,
showProgressBar: false,
type: SnotifyStyle.async
}, _a)
};
var _a;
/**
* Transform arguments to Snotify object
* @param target
* @param {SnotifyType} propertyKey
* @param {PropertyDescriptor} descriptor
* @returns {Snotify}
* @constructor
*/
function TransformArgument(target, propertyKey, descriptor) {
if (propertyKey === SnotifyStyle.async) {
return {
value: function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var result;
if (args.length === 2) {
result = {
title: null,
body: args[0],
config: null,
action: args[1]
};
}
else if (args.length === 3) {
if (typeof args[1] === 'string') {
result = {
title: args[1],
body: args[0],
config: null,
action: args[2]
};
}
else {
result = {
title: null,
body: args[0],
config: args[2],
action: args[1]
};
}
}
else {
result = {
title: args[1],
body: args[0],
config: args[3],
action: args[2]
};
}
return descriptor.value.apply(this, [result]);
}
};
}
else {
return {
value: function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var result;
if (args.length === 1) {
result = {
title: null,
body: args[0],
config: null
};
}
else if (args.length === 3) {
result = {
title: args[1],
body: args[0],
config: args[2]
};
}
else {
result = (_a = {
title: null,
config: null,
body: args[0]
}, _a[typeof args[1] === 'string' ? 'title' : 'config'] = args[1], _a);
}
return descriptor.value.apply(this, [result]);
var _a;
}
};
}
}
/**
* Generates random id
* @return {number}
*/
function uuid() {
return Math.floor(Math.random() * (Date.now() - 1)) + 1;
}
/**
* Simple is object check.
* @param item {Object<any>}
* @returns {boolean}
*/
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}
/**
* Deep merge objects.
* @param sources {Array<Object<any>>}
* @returns {Object<any>}
*/
function mergeDeep() {
var sources = [];
for (var _i = 0; _i < arguments.length; _i++) {
sources[_i] = arguments[_i];
}
var target = {};
if (!sources.length) {
return target;
}
while (sources.length > 0) {
var source = sources.shift();
if (isObject(source)) {
for (var key in source) {
if (isObject(source[key])) {
target[key] = mergeDeep(target[key], source[key]);
}
else {
Object.assign(target, (_a = {}, _a[key] = source[key], _a));
}
}
}
}
return target;
var _a;
}
/**
* Defines toast style depending on method name
* @param target
* @param {SnotifyType} propertyKey
* @param {PropertyDescriptor} descriptor
* @returns {{value: ((...args: any[]) => any)}}
* @constructor
*/
function SetToastType(target, propertyKey, descriptor) {
return {
value: function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
args[0].config = __assign({}, args[0].config, { type: propertyKey });
return descriptor.value.apply(this, args);
}
};
}
/**
* this - create, remove, config toasts
*/
// tslint:disable:unified-signatures
var SnotifyService = /** @class */ (function () {
function SnotifyService() {
this.emitter = new Vue();
this.notifications = [];
this.config = ToastDefaults;
}
/**
* emit changes in notifications array
*/
SnotifyService.prototype.emit = function () {
this.emitter.$emit('snotify', this.notifications.slice());
};
/**
* returns SnotifyToast object
* @param id {Number}
* @return {SnotifyToast|undefined}
*/
SnotifyService.prototype.get = function (id) {
return this.notifications.find(function (toast) { return toast.id === id; });
};
/**
* add SnotifyToast to notifications array
* @param toast {SnotifyToast}
*/
SnotifyService.prototype.add = function (toast) {
if (this.config.global.newOnTop) {
this.notifications.unshift(toast);
}
else {
this.notifications.push(toast);
}
this.emit();
};
/**
* If ID passed, emits toast animation remove, if ID & REMOVE passed, removes toast from notifications array
* @param id {number}
* @param remove {boolean}
*/
SnotifyService.prototype.remove = function (id, remove) {
if (!id) {
return this.clear();
}
else if (remove) {
this.notifications = this.notifications.filter(function (toast) { return toast.id !== id; });
return this.emit();
}
this.emitter.$emit('remove', id);
};
/**
* Clear notifications array
*/
SnotifyService.prototype.clear = function () {
this.notifications = [];
this.emit();
};
SnotifyService.prototype.button = function (text, closeOnClick, action, bold) {
var _this = this;
if (closeOnClick === void 0) { closeOnClick = true; }
if (action === void 0) { action = null; }
if (bold === void 0) { bold = false; }
return {
text: text,
action: closeOnClick ? function (toast) {
action(toast);
_this.remove(toast.id);
} : action,
bold: bold
};
};
/**
* Creates toast and add it to array, returns toast id
* @param snotify {Snotify}
* @return {number}
*/
SnotifyService.prototype.create = function (snotify) {
if (this.config.global.oneAtTime && this.notifications.length !== 0)
return;
if (this.config.global.preventDuplicates
&& this.notifications.filter(function (t) { return t.config.type === snotify.config.type; }).length === 1)
return;
var config = mergeDeep(this.config.toast, this.config.type[snotify.config.type], snotify.config);
var toast = new SnotifyToast(config.id ? config.id : uuid(), snotify.title, snotify.body, config);
this.add(toast);
return toast;
};
SnotifyService.prototype.setDefaults = function (defaults) {
return this.config = mergeDeep(this.config, defaults);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.simple = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.success = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.error = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.info = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.warning = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.confirm = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.prompt = function (args) {
return this.create(args);
};
/**
* Transform toast arguments into {Snotify} object
*/
SnotifyService.prototype.async = function (args) {
var _this = this;
var async = args.action;
var toast = this.create(args);
toast.on('mounted', function () {
async()
.then(function (next) { return _this.mergeToast(toast, next, SnotifyStyle.success); })
.catch(function (error) { return _this.mergeToast(toast, error, SnotifyStyle.error); });
});
return toast;
};
SnotifyService.prototype.mergeToast = function (toast, next, type) {
if (next.body) {
toast.body = next.body;
}
if (next.title) {
toast.title = next.title;
}
if (type) {
toast.config = mergeDeep(toast.config, this.config.global, this.config.toast[type], { type: type }, next.config);
}
else {
toast.config = mergeDeep(toast.config, next.config);
}
if (next.html) {
toast.config.html = next.html;
}
this.emit();
this.emitter.$emit('toastChanged', toast);
};
/**
* Creates empty toast with html string inside
* @param {string} html
* @param {SnotifyToastConfig} config
* @returns {number}
*/
SnotifyService.prototype.html = function (html, config) {
return this.create({
title: null,
body: null,
config: __assign({}, config, { html: html })
});
};
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "simple", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "success", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "error", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "info", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "warning", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "confirm", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "prompt", null);
__decorate([
TransformArgument
/**
* Determines current toast type and collects default configuration
*/
,
SetToastType,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SnotifyToast)
], SnotifyService.prototype, "async", null);
return SnotifyService;
}());
var Plugin = {
install: function (Vue$$1, options) {
if (options === void 0) { options = {}; }
Vue$$1.filter('truncate', function (value, limit, trail) {
if (limit === void 0) { limit = 40; }
if (trail === void 0) { trail = '...'; }
return value.length > limit ? value.substring(0, limit) + trail : value;
});
var service = new SnotifyService();
service.setDefaults(options);
Vue$$1.pro