flicker-alerts 1.0.73 → 1.0.75

package/index.js

@@ -1,5 +1,5 @@
 const FlickerAlerts = {
-  showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
+  showAlert: function ({ type, title, message, duration = 3000, position = 'top-right' }) { // duração padrão: 3 segundos
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       let container = document.getElementById('alerts-container');
       if (!container) {
@@ -30,51 +30,44 @@ const FlickerAlerts = {
       icon.innerHTML = `<i class="fas ${iconClass}" style="font-size: 24px;"></i>`;
       alertBox.appendChild(icon);
 
-      // Divisor
-      const divider = document.createElement('div');
-      divider.className = 'divider';
-      console.log(`Created divider for ${type}`); // Para depuração
-      alertBox.appendChild(divider);
-      
       // Conteúdo
       const content = document.createElement('div');
       content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
       alertBox.appendChild(content);
 
-      // Barra de carregamento
+      // Barra de progresso
       const progressBar = document.createElement('div');
       progressBar.className = 'progress-bar';
-      progressBar.style.animationDuration = `${timer}ms`;
+      progressBar.style.animationDuration = `${duration}ms`; // sincroniza com a duração do alerta
       alertBox.appendChild(progressBar);
 
-      // Botão de Fechamento
+      // Botão de fechamento
       const closeButton = document.createElement('div');
       closeButton.className = 'close';
       closeButton.innerHTML = '<i class="fas fa-times"></i>';
-
-      const removeAlert = () => {
-        alertBox.style.opacity = '0';
-        setTimeout(() => alertBox.remove(), 300);
-      };
-
       closeButton.addEventListener('click', () => {
+        clearTimeout(timeoutId); // limpa o timeout quando fechado manualmente
         removeAlert();
-        clearTimeout(timeoutId);
       });
 
       alertBox.appendChild(closeButton);
       container.appendChild(alertBox);
 
+      // Timeout para remover automaticamente o alerta
       const timeoutId = setTimeout(() => {
         removeAlert();
-      }, timer);
+      }, duration);
+
+      function removeAlert() {
+        alertBox.style.opacity = '0';
+        setTimeout(() => alertBox.remove(), 300); // atraso para animação de fade-out
+      }
     }
   },
 };
 
 
 
-
 // Botões de teste - Eles podem ser removidos se não forem necessários
 if (typeof document !== 'undefined') {
   document.getElementById('success-btn')?.addEventListener('click', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flicker-alerts",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "repository": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
   "homepage": "https://flickeralerts.netlify.app/",
   "description": "Biblioteca para alertas animados",
@@ -18,6 +18,6 @@
   "author": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
   "license": "MIT",
   "dependencies": {
-    "flicker-alerts": "^1.0.73"
+    "flicker-alerts": "^1.0.75"
   }
-}
+}

package/readme.md

@@ -52,6 +52,7 @@ FlickerAlerts.showAlert({
   title: 'Sucesso!',
   message: 'Operação realizada com sucesso.',
   position: 'top-right' // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'
+  duration: 5000 
 });
 ```
 
@@ -73,6 +74,7 @@ export class AppComponent {
       title: 'Atenção!',
       message: 'Algo deu errado.',
       position: 'top-center'
+      duration: 5000 
     });
   }
 
@@ -115,6 +117,7 @@ const App = () => {
       title: 'Informação',
       message: 'Este é um alerta informativo.',
       position: 'bottom-left'
+      duration: 5000 
     });
   };
 
@@ -154,6 +157,7 @@ Essa abordagem é recomendada para garantir que o estilo seja incluído no build
 | `title`     | `string`   | Título do alerta.                              |
 | `message`   | `string`   | Mensagem do alerta.                            |
 | `position`  | `string`   | Posição: `top-right`, `top-left`, `bottom-right`, etc. |
+| `duration`   | `number`   | Duração do alerta em milissegundos.            |
 
 ---