flicker-alerts 1.0.33 → 1.0.35
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 +14 -18
- package/index.js +8 -52
- package/package.json +2 -2
package/index.d.ts
CHANGED
@@ -1,29 +1,25 @@
|
|
1
1
|
declare module 'flicker-alerts' {
|
2
|
-
|
3
|
-
|
4
|
-
type: 'success' | 'info' | 'warning' | 'danger'; // Tipos de alerta disponíveis
|
2
|
+
export interface AlertOptions {
|
3
|
+
type: 'success' | 'info' | 'warning' | 'danger';
|
5
4
|
title: string;
|
6
5
|
message: string;
|
7
|
-
timer?: number;
|
8
|
-
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center';
|
6
|
+
timer?: number;
|
7
|
+
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center';
|
9
8
|
}
|
10
9
|
|
11
|
-
|
12
|
-
|
13
|
-
type: 'warning' | 'delete' ; // Tipos de modal disponíveis
|
10
|
+
export interface ModalOptions {
|
11
|
+
type: 'warning' | 'delete';
|
14
12
|
title: string;
|
15
13
|
message: string;
|
16
|
-
onConfirm?: () => void;
|
17
|
-
onCancel?: () => void;
|
18
|
-
timer?: number;
|
14
|
+
onConfirm?: () => void;
|
15
|
+
onCancel?: () => void;
|
16
|
+
timer?: number;
|
19
17
|
}
|
20
18
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
19
|
+
const FlickerAlerts: {
|
20
|
+
showAlert(options: AlertOptions): void;
|
21
|
+
showModal(options: ModalOptions): void;
|
22
|
+
};
|
25
23
|
|
26
|
-
|
27
|
-
static showModal(options: ModalOptions): void;
|
28
|
-
}
|
24
|
+
export default FlickerAlerts;
|
29
25
|
}
|
package/index.js
CHANGED
@@ -6,8 +6,8 @@ const FlickerAlerts = {
|
|
6
6
|
container = document.createElement('div');
|
7
7
|
container.id = 'alerts-container';
|
8
8
|
container.style.position = 'fixed';
|
9
|
-
container.style.top = 0;
|
10
|
-
container.style.left = 0;
|
9
|
+
container.style.top = '0';
|
10
|
+
container.style.left = '0';
|
11
11
|
container.style.width = '100vw';
|
12
12
|
container.style.height = '100vh';
|
13
13
|
container.style.pointerEvents = 'none';
|
@@ -15,8 +15,7 @@ const FlickerAlerts = {
|
|
15
15
|
}
|
16
16
|
|
17
17
|
const alertBox = document.createElement('div');
|
18
|
-
alertBox.className = `notification ${type}`;
|
19
|
-
alertBox.classList.add(position);
|
18
|
+
alertBox.className = `notification ${type} ${position}`;
|
20
19
|
|
21
20
|
// Ícone
|
22
21
|
const icon = document.createElement('div');
|
@@ -33,7 +32,6 @@ const FlickerAlerts = {
|
|
33
32
|
// Divisor
|
34
33
|
const divider = document.createElement('div');
|
35
34
|
divider.className = 'divider';
|
36
|
-
console.log(`Created divider for ${type}`); // Para depuração
|
37
35
|
alertBox.appendChild(divider);
|
38
36
|
|
39
37
|
// Conteúdo
|
@@ -41,7 +39,7 @@ const FlickerAlerts = {
|
|
41
39
|
content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
|
42
40
|
alertBox.appendChild(content);
|
43
41
|
|
44
|
-
// Barra de
|
42
|
+
// Barra de progresso
|
45
43
|
const progressBar = document.createElement('div');
|
46
44
|
progressBar.className = 'progress-bar';
|
47
45
|
progressBar.style.animationDuration = `${timer}ms`;
|
@@ -72,35 +70,16 @@ const FlickerAlerts = {
|
|
72
70
|
},
|
73
71
|
};
|
74
72
|
|
75
|
-
// Botões de teste - Eles podem ser removidos se não forem necessários
|
76
|
-
if (typeof document !== 'undefined') {
|
77
|
-
document.getElementById('success-btn')?.addEventListener('click', () => {
|
78
|
-
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso!', message: 'Essa mensagem é personalizável.' });
|
79
|
-
});
|
80
|
-
|
81
|
-
document.getElementById('info-btn')?.addEventListener('click', () => {
|
82
|
-
FlickerAlerts.showAlert({ type: 'info', title: 'Informação!', message: 'Essa mensagem é personalizável.' });
|
83
|
-
});
|
84
|
-
|
85
|
-
document.getElementById('warning-btn')?.addEventListener('click', () => {
|
86
|
-
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta!', message: 'Essa mensagem é personalizável.' });
|
87
|
-
});
|
88
|
-
|
89
|
-
document.getElementById('error-btn')?.addEventListener('click', () => {
|
90
|
-
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro!', message: 'Essa mensagem é personalizável.' });
|
91
|
-
});
|
92
|
-
}
|
93
|
-
|
94
73
|
const FlickerModals = {
|
95
|
-
showModal: function ({ type, title, message,
|
74
|
+
showModal: function ({ type, title, message, onConfirm, onCancel }) {
|
96
75
|
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
97
76
|
let container = document.getElementById('modals-container');
|
98
77
|
if (!container) {
|
99
78
|
container = document.createElement('div');
|
100
79
|
container.id = 'modals-container';
|
101
80
|
container.style.position = 'fixed';
|
102
|
-
container.style.top = 0;
|
103
|
-
container.style.left = 0;
|
81
|
+
container.style.top = '0';
|
82
|
+
container.style.left = '0';
|
104
83
|
container.style.width = '100vw';
|
105
84
|
container.style.height = '100vh';
|
106
85
|
container.style.pointerEvents = 'none';
|
@@ -197,27 +176,4 @@ const FlickerModals = {
|
|
197
176
|
}
|
198
177
|
};
|
199
178
|
|
200
|
-
|
201
|
-
if (typeof document !== 'undefined') {
|
202
|
-
document.getElementById('modal-warning-btn')?.addEventListener('click', () => {
|
203
|
-
FlickerModals.showModal({
|
204
|
-
type: 'warning',
|
205
|
-
title: 'Tem certeza que deseja aceitar?',
|
206
|
-
message: 'Você tem certeza que deseja aceitar isso?',
|
207
|
-
onConfirm: () => { console.log('Confirmado!'); },
|
208
|
-
onCancel: () => { console.log('Cancelado!'); }
|
209
|
-
});
|
210
|
-
});
|
211
|
-
|
212
|
-
document.getElementById('modal-delete-btn')?.addEventListener('click', () => {
|
213
|
-
FlickerModals.showModal({
|
214
|
-
type: 'delete',
|
215
|
-
title: 'Tem certeza que deseja deletar?',
|
216
|
-
message: 'Você tem certeza que deseja deletar isso?',
|
217
|
-
onConfirm: () => { console.log('Deletado com sucesso!'); },
|
218
|
-
onCancel: () => { console.log('Cancelado!'); }
|
219
|
-
});
|
220
|
-
});
|
221
|
-
}
|
222
|
-
|
223
|
-
export default FlickerAlerts;
|
179
|
+
export default { FlickerAlerts, FlickerModals };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "flicker-alerts",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.35",
|
4
4
|
"description": "Biblioteca para alertas animados",
|
5
5
|
"main": "index.js",
|
6
6
|
"types": "index.d.ts",
|
@@ -16,6 +16,6 @@
|
|
16
16
|
"author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
|
17
17
|
"license": "MIT",
|
18
18
|
"dependencies": {
|
19
|
-
"flicker-alerts": "^1.0.
|
19
|
+
"flicker-alerts": "^1.0.35"
|
20
20
|
}
|
21
21
|
}
|