flicker-alerts 1.0.76 → 1.0.79

package/index.js

@@ -1,22 +1,29 @@
 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' },
+          'center': { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', flexDirection: 'column' },
+          'top-center': { top: '1rem', left: '50%', transform: 'translateX(-50%)', flexDirection: 'column' },
+          'bottom-center': { bottom: '1rem', left: '50%', transform: 'translateX(-50%)', 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 +36,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 +61,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(() => {
@@ -67,7 +79,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.76",
+  "version": "1.0.79",
   "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.76"
+    "flicker-alerts": "^1.0.78"
   }
 }

package/readme.md

@@ -51,7 +51,9 @@ 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', // Você pode usar qualquer uma das opções abaixo:
+  // 'top-right', 'top-left', 'bottom-right', 'bottom-left', 
+  // 'center', 'top-center', 'bottom-center'
   duration: 5000 
 });
 ```
@@ -156,7 +158,7 @@ Essa abordagem é recomendada para garantir que o estilo seja incluído no build
 | `type`      | `string`   | Tipo do alerta: `success`, `info`, `warning`, `danger`. |
 | `title`     | `string`   | Título do alerta.                              |
 | `message`   | `string`   | Mensagem do alerta.                            |
-| `position`  | `string`   | Posição: `top-right`, `top-left`, `bottom-right`, etc. |
+| `position`  | `string`   |Posição: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `center`, `top-center`, `bottom-center`.|
 | `duration`   | `number`   | Duração do alerta em milissegundos.            |
 
 ---

package/style.css

@@ -1,32 +1,76 @@
 
-
 #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;
+  display: flex;
+  gap: 10px; 
+  pointer-events: none;
 }
 
-
 .notification {
-margin: 20px;
+  margin: 5px;
   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 +126,7 @@ margin: 20px;
   font-size: 16px;
 }
 
-/* Tipos de alerta */
+
 .success .icon {
   background-color: #28a745;
 }
@@ -115,49 +159,55 @@ margin: 20px;
   color: #ffc107;
 }
 
-/* Posicionamento das notificações */
+
 .top-right {
   top: 1rem;
   right: 1rem;
+  flex-direction: column;
 }
 
 .top-left {
   top: 1rem;
   left: 1rem;
+  flex-direction: column;
 }
 
 .bottom-right {
   bottom: 1rem;
   right: 1rem;
+  flex-direction: column-reverse;
 }
 
 .bottom-left {
   bottom: 1rem;
   left: 1rem;
+  flex-direction: column-reverse;
 }
 
 .center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  flex-direction: column;
 }
 
 .top-center {
   top: 1rem;
   left: 50%;
   transform: translateX(-50%);
+  flex-direction: column;
 }
 
-.bottom-center {    
+.bottom-center {
   bottom: 1rem;
   left: 50%;
   transform: translateX(-50%);
+  flex-direction: column-reverse;
 }
 
 
 
 
-/* Barra de carregamento */
 .notification .progress-bar {
     position: absolute;
     bottom: 0;
@@ -170,7 +220,7 @@ margin: 20px;
     border-bottom-right-radius: 10px; 
   }
   
-  /* Animação da barra de carregamento */
+
   @keyframes progress-animation {
     from {
       width: 0%;
@@ -180,7 +230,7 @@ margin: 20px;
     }
   }
   
-  /* Cores específicas para cada tipo */
+
   .success .progress-bar {
     background-color: #28a745;
   }
@@ -200,20 +250,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 +274,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;