flicker-alerts 1.0.33 → 1.0.35

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/index.d.ts +14 -18
  2. package/index.js +8 -52
  3. package/package.json +2 -2
package/index.d.ts CHANGED
@@ -1,29 +1,25 @@
1
1
  declare module 'flicker-alerts' {
2
- // Definição das opções para os alertas
3
- interface AlertOptions {
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; // Duração opcional do alerta (em milissegundos)
8
- position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center'; // Posições possíveis do alerta
6
+ timer?: number;
7
+ position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center';
9
8
  }
10
9
 
11
- // Definição das opções para os modais
12
- interface ModalOptions {
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; // Função executada no botão de confirmação
17
- onCancel?: () => void; // Função executada no botão de cancelamento
18
- timer?: number; // Duração opcional do modal (em milissegundos)
14
+ onConfirm?: () => void;
15
+ onCancel?: () => void;
16
+ timer?: number;
19
17
  }
20
18
 
21
- // Classe principal para a biblioteca FlickerAlerts
22
- export default class FlickerAlerts {
23
- // Método estático para mostrar um alerta
24
- static showAlert(options: AlertOptions): void;
19
+ const FlickerAlerts: {
20
+ showAlert(options: AlertOptions): void;
21
+ showModal(options: ModalOptions): void;
22
+ };
25
23
 
26
- // Método estático para mostrar um modal
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 carregamento
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, timer = 3000, onConfirm, onCancel }) {
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
- // Botões de teste - Eles podem ser removidos se não forem necessários
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.33",
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.33"
19
+ "flicker-alerts": "^1.0.35"
20
20
  }
21
21
  }