flicker-alerts 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +1 -2
- package/index.js +57 -56
- package/package.json +1 -1
package/index.d.ts
CHANGED
package/index.js
CHANGED
@@ -1,70 +1,71 @@
|
|
1
1
|
const FlickerAlerts = {
|
2
2
|
showAlert: function ({ type, title, message, timer = 3000 }) {
|
3
|
-
// Verifique se está no ambiente do navegador (client-side)
|
4
|
-
if (typeof document
|
5
|
-
|
6
|
-
|
3
|
+
// Verifique se está no ambiente do navegador (client-side) antes de tentar manipular o DOM
|
4
|
+
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
5
|
+
// Criação do alerta
|
6
|
+
const alertBox = document.createElement('div');
|
7
|
+
alertBox.className = `alert-custom alert-${type}`;
|
7
8
|
|
8
|
-
|
9
|
-
|
10
|
-
|
9
|
+
// Ícone
|
10
|
+
const icon = document.createElement('div');
|
11
|
+
icon.className = 'icon';
|
12
|
+
const iconClass = {
|
13
|
+
success: 'fa-check',
|
14
|
+
info: 'fa-info',
|
15
|
+
warning: 'fa-exclamation',
|
16
|
+
danger: 'fa-times'
|
17
|
+
}[type];
|
18
|
+
icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
|
19
|
+
alertBox.appendChild(icon);
|
11
20
|
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
success: 'fa-check',
|
17
|
-
info: 'fa-info',
|
18
|
-
warning: 'fa-exclamation',
|
19
|
-
danger: 'fa-times'
|
20
|
-
}[type];
|
21
|
-
icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
|
22
|
-
alertBox.appendChild(icon);
|
21
|
+
// Conteúdo
|
22
|
+
const content = document.createElement('div');
|
23
|
+
content.innerHTML = `<strong>${title}</strong><div>${message}</div>`;
|
24
|
+
alertBox.appendChild(content);
|
23
25
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
26
|
+
// Botão de fechamento
|
27
|
+
const closeButton = document.createElement('div');
|
28
|
+
closeButton.className = 'close';
|
29
|
+
closeButton.innerHTML = '<i class="fas fa-times"></i>';
|
30
|
+
closeButton.onclick = () => alertBox.remove();
|
31
|
+
alertBox.appendChild(closeButton);
|
28
32
|
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
closeButton.onclick = () => alertBox.remove();
|
34
|
-
alertBox.appendChild(closeButton);
|
33
|
+
// Barra de progresso
|
34
|
+
const progressBar = document.createElement('div');
|
35
|
+
progressBar.className = `progress-bar progress-bar-${type}`;
|
36
|
+
alertBox.appendChild(progressBar);
|
35
37
|
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
38
|
+
// Adicionar ao container
|
39
|
+
const container = document.getElementById('alerts-container');
|
40
|
+
if (container) {
|
41
|
+
container.appendChild(alertBox);
|
42
|
+
}
|
40
43
|
|
41
|
-
|
42
|
-
|
43
|
-
if (container) {
|
44
|
-
container.appendChild(alertBox);
|
44
|
+
// Remoção automática após o tempo especificado
|
45
|
+
setTimeout(() => alertBox.remove(), timer);
|
45
46
|
}
|
46
|
-
|
47
|
-
// Remoção automática
|
48
|
-
setTimeout(() => alertBox.remove(), timer);
|
49
47
|
}
|
50
48
|
};
|
51
49
|
|
50
|
+
// Botões de teste - Eles podem ser removidos se não forem necessários
|
51
|
+
if (typeof document !== 'undefined') {
|
52
|
+
document.getElementById('success-btn')?.addEventListener('click', () => {
|
53
|
+
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: 'A operação foi concluída com êxito!' });
|
54
|
+
});
|
55
|
+
|
56
|
+
document.getElementById('info-btn')?.addEventListener('click', () => {
|
57
|
+
FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: 'Aqui está uma informação importante.' });
|
58
|
+
});
|
59
|
+
|
60
|
+
document.getElementById('warning-btn')?.addEventListener('click', () => {
|
61
|
+
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: 'Por favor, preste atenção nisso!' });
|
62
|
+
});
|
63
|
+
|
64
|
+
document.getElementById('error-btn')?.addEventListener('click', () => {
|
65
|
+
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: 'Ocorreu um erro inesperado!' });
|
66
|
+
});
|
67
|
+
}
|
68
|
+
|
52
69
|
// Exportação
|
53
70
|
export default FlickerAlerts;
|
54
|
-
|
55
|
-
// Botões de teste
|
56
|
-
document.getElementById('success-btn').addEventListener('click', () => {
|
57
|
-
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: 'A operação foi concluída com êxito!' });
|
58
|
-
});
|
59
|
-
|
60
|
-
document.getElementById('info-btn').addEventListener('click', () => {
|
61
|
-
FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: 'Aqui está uma informação importante.' });
|
62
|
-
});
|
63
|
-
|
64
|
-
document.getElementById('warning-btn').addEventListener('click', () => {
|
65
|
-
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: 'Por favor, preste atenção nisso!' });
|
66
|
-
});
|
67
|
-
|
68
|
-
document.getElementById('error-btn').addEventListener('click', () => {
|
69
|
-
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: 'Ocorreu um erro inesperado!' });
|
70
|
-
});
|
71
|
+
|