flicker-alerts 1.0.75 → 1.0.78

package/index.js

@@ -1,22 +1,26 @@
 const FlickerAlerts = {
-  showAlert: function ({ type, title, message, duration = 3000, position = 'top-right' }) { // duração padrão: 3 segundos
+  showAlert: function ({ type, title, message, duration = 3000, position = 'top-right' }) {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       let container = document.getElementById('alerts-container');
       if (!container) {
         container = document.createElement('div');
         container.id = 'alerts-container';
         container.style.position = 'fixed';
-        container.style.top = 0;
-        container.style.left = 0;
-        container.style.width = '100vw';
-        container.style.height = '100vh';
         container.style.pointerEvents = 'none';
         document.body.appendChild(container);
+
+        // Define posição com base no parâmetro
+        const positionStyles = {
+          'top-right': { top: '0', right: '0', flexDirection: 'column' },
+          'top-left': { top: '0', left: '0', flexDirection: 'column' },
+          'bottom-right': { bottom: '0', right: '0', flexDirection: 'column-reverse' },
+          'bottom-left': { bottom: '0', left: '0', flexDirection: 'column-reverse' },
+        };
+        Object.assign(container.style, positionStyles[position] || positionStyles['top-right']);
       }
 
       const alertBox = document.createElement('div');
       alertBox.className = `notification ${type}`;
-      alertBox.classList.add(position);
 
       // Ícone
       const icon = document.createElement('div');
@@ -29,7 +33,10 @@ const FlickerAlerts = {
       }[type];
       icon.innerHTML = `<i class="fas ${iconClass}" style="font-size: 24px;"></i>`;
       alertBox.appendChild(icon);
-
+      const divider = document.createElement('div');
+      divider.className = 'divider';
+      alertBox.appendChild(divider);
+      
       // Conteúdo
       const content = document.createElement('div');
       content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
@@ -51,7 +58,9 @@ const FlickerAlerts = {
       });
 
       alertBox.appendChild(closeButton);
-      container.appendChild(alertBox);
+
+      // Adiciona no contêiner
+      container.prepend(alertBox);
 
       // Timeout para remover automaticamente o alerta
       const timeoutId = setTimeout(() => {
@@ -66,8 +75,6 @@ const FlickerAlerts = {
   },
 };
 
-
-
 // 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.75",
+  "version": "1.0.78",
   "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.75"
+    "flicker-alerts": "^1.0.78"
   }
 }

package/readme.md

@@ -51,7 +51,7 @@ FlickerAlerts.showAlert({
   type: 'success', // 'success', 'info', 'warning', 'danger'
   title: 'Sucesso!',
   message: 'Operação realizada com sucesso.',
-  position: 'top-right' // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'
+  position: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center'
   duration: 5000 
 });
 ```
@@ -73,7 +73,7 @@ export class AppComponent {
       type: 'warning',
       title: 'Atenção!',
       message: 'Algo deu errado.',
-      position: 'top-center'
+      position: 'top-center',
       duration: 5000 
     });
   }
@@ -116,7 +116,7 @@ const App = () => {
       type: 'info',
       title: 'Informação',
       message: 'Este é um alerta informativo.',
-      position: 'bottom-left'
+      position: 'bottom-left',
       duration: 5000 
     });
   };

package/style.css

@@ -1,32 +1,81 @@
 
-
 #alerts-container {
   position: fixed;
   top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none; /* Impede que o contêiner interfira nos cliques */
-  padding-right: 20px;
+  right: 0;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  gap: 10px; 
+  width: auto;
+  pointer-events: none; 
 }
 
 
 .notification {
-margin: 20px;
+  margin: 5px 20px 5px 0;
   background-color: #ffffff;
+  border: 1px solid #ced4da; 
+  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 20px;
   min-width: 300px;
   max-width: 500px;
   display: flex;
   align-items: center;
-  position: absolute;
-  z-index: 9999; /* Garante que as notificações fiquem acima de outros elementos */
+  position: relative;
   opacity: 1;
-  transition: opacity 0.3s ease-out;
-  pointer-events: auto; /* Permite interagir com o conteúdo da notificação */
+  transition: opacity 0.3s ease-out, transform 0.3s ease;
+  pointer-events: auto;
+}
+
+.notification .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: #5a5a5a; 
+  margin-right: 10px;
 }
+
+.notification .divider {
+  width: 1px;
+  height: 40px;
+  background-color: #e0e0e0; 
+  margin-right: 15px;
+}
+
+.notification .content {
+  display: flex;
+  flex-direction: column;
+}
+
+.notification .title {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 5px;
+  color: #333;
+}
+
+.notification .message {
+  font-size: 14px;
+  color: #555;
+}
+
+
+.notification .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #999;
+}
+
+.notification .close:hover {
+  color: #666;
+}
+
 .text-import{
   color: rgb(255, 0, 85);
 }
@@ -82,7 +131,7 @@ margin: 20px;
   font-size: 16px;
 }
 
-/* Tipos de alerta */
+
 .success .icon {
   background-color: #28a745;
 }
@@ -115,7 +164,7 @@ margin: 20px;
   color: #ffc107;
 }
 
-/* Posicionamento das notificações */
+
 .top-right {
   top: 1rem;
   right: 1rem;
@@ -157,7 +206,7 @@ margin: 20px;
 
 
 
-/* Barra de carregamento */
+
 .notification .progress-bar {
     position: absolute;
     bottom: 0;
@@ -170,7 +219,7 @@ margin: 20px;
     border-bottom-right-radius: 10px; 
   }
   
-  /* Animação da barra de carregamento */
+
   @keyframes progress-animation {
     from {
       width: 0%;
@@ -180,7 +229,7 @@ margin: 20px;
     }
   }
   
-  /* Cores específicas para cada tipo */
+
   .success .progress-bar {
     background-color: #28a745;
   }
@@ -200,20 +249,20 @@ margin: 20px;
   
 
 
-  /* Modal */
+
 
   .modal-container {
- 
+
     display: flex;
-    justify-content: center; /* Alinha o modal horizontalmente */
-    align-items: center; /* Alinha o modal verticalmente */
-    position: fixed; /* Fixa o modal na tela */
-    top: 0; /* Alinha o topo */
-    left: 0; /* Alinha o lado esquerdo */
-    width: 100vw; /* Ocupa toda a largura da tela */
-    height: 100vh; /* Ocupa toda a altura da tela */
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0; 
+    left: 0;
+    width: 100vw;
+    height: 100vh; 
     margin: 0;
-    z-index: 9999; /* Garante que o modal ficará acima de outros elementos */
+    z-index: 9999;
   }
   
 .modal-dialog {
@@ -224,8 +273,9 @@ margin: 20px;
   background-color: white;
     border-radius: 10px;
     padding: 20px;
-    border: none;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ced4da; 
+    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
+  
 }
 .modal-header {
     border-bottom: none;