flicker-alerts 1.0.78 → 1.0.80

package/index.js

@@ -15,6 +15,9 @@ const FlickerAlerts = {
           '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']);
       }
@@ -75,6 +78,7 @@ 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.78",
+  "version": "1.0.80",
   "repository": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
   "homepage": "https://flickeralerts.netlify.app/",
   "description": "Biblioteca para alertas animados",

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,21 +1,15 @@
 
 #alerts-container {
   position: fixed;
-  top: 0;
-  right: 0;
   display: flex;
-  flex-direction: column-reverse;
-  align-items: flex-end;
   gap: 10px; 
-  width: auto;
-  pointer-events: none; 
+  pointer-events: none;
 }
 
-
 .notification {
-  margin: 5px 20px 5px 0;
+  margin: 20px 20px 0px 20px;
   background-color: #ffffff;
-  border: 1px solid #ced4da; 
+  border: 1px solid #ced4da;
   box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   padding: 20px;
@@ -29,6 +23,7 @@
   pointer-events: auto;
 }
 
+
 .notification .icon {
   display: flex;
   align-items: center;
@@ -168,45 +163,51 @@
 .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;
 }
 
 
 
 
-
 .notification .progress-bar {
     position: absolute;
     bottom: 0;