95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
export const VuexyNotifyService = {
|
|
flash({ message, type = 'info', target = 'body', delay = 3000 }) {
|
|
const event = new CustomEvent('vuexy:notify', {
|
|
detail: { type, message, target, delay }
|
|
});
|
|
|
|
window.dispatchEvent(event);
|
|
},
|
|
|
|
success(message, target = 'body', delay = 3000) {
|
|
this.flash({ type: 'success', message, target, delay });
|
|
},
|
|
|
|
error(message, target = 'body', delay = 3000) {
|
|
this.flash({ type: 'error', message, target, delay });
|
|
},
|
|
|
|
info(message, target = 'body', delay = 3000) {
|
|
this.flash({ type: 'info', message, target, delay });
|
|
},
|
|
|
|
warning(message, target = 'body', delay = 3000) {
|
|
this.flash({ type: 'warning', message, target, delay });
|
|
},
|
|
|
|
fromLocalStorage() {
|
|
const data = localStorage.getItem('vuexy_notification');
|
|
|
|
if (data) {
|
|
try {
|
|
this.flash(JSON.parse(data));
|
|
|
|
localStorage.removeItem('vuexy_notification');
|
|
|
|
} catch (e) {
|
|
console.error('❌ Error parseando notificación de storage', e);
|
|
}
|
|
}
|
|
},
|
|
|
|
fromSession() {
|
|
if (window.vuexySessionNotification) {
|
|
this.flash(window.vuexySessionNotification);
|
|
window.vuexySessionNotification = null;
|
|
}
|
|
},
|
|
|
|
dispatch(eventName, payload = {}) {
|
|
const event = new CustomEvent(eventName, { detail: payload });
|
|
|
|
window.dispatchEvent(event);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
window.addEventListener('vuexy:notify', function (event) {
|
|
// Si viene como array, tomar el primer objeto
|
|
const detail = Array.isArray(event.detail) ? event.detail[0] : event.detail;
|
|
const { type, message, target, delay } = detail || {};
|
|
|
|
const defaultTarget = 'body .notification-container';
|
|
|
|
let realTarget = target == 'body' ? defaultTarget : target;
|
|
|
|
let targetElement = document.querySelector(realTarget);
|
|
|
|
if (!targetElement) {
|
|
console.warn('⚠️ Target para notificación no encontrado:', realTarget, ', usando ', defaultTarget);
|
|
|
|
targetElement = document.querySelector(defaultTarget);
|
|
}
|
|
|
|
if(!targetElement) {
|
|
console.error('🛑 Target por defecto no encontrado:', defaultTarget);
|
|
return;
|
|
}
|
|
|
|
const alert = document.createElement('div');
|
|
|
|
alert.className = `alert alert-${type} alert-dismissible fade show mt-2`;
|
|
alert.setAttribute('role', 'alert');
|
|
alert.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
`.trim();
|
|
|
|
targetElement.appendChild(alert);
|
|
|
|
setTimeout(() => {
|
|
alert.remove();
|
|
}, delay || 6000);
|
|
});
|
|
});
|
|
|