npm - flicker-alerts - Versions diffs - 1.0.17 → 1.0.19 - Mend

flicker-alerts 1.0.17 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +4 -4
package/{README.md → readme.md} +11 -0
package/{index.js → src/index.js} +3 -0
package/index.html +0 -246
/package/{index.d.ts → src/index.d.ts} +0 -0
/package/{style.css → src/style.css} +0 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "flicker-alerts",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "Biblioteca para alertas animados",
   "main": "index.js",
   "types": "index.d.ts",
@@ -13,9 +13,9 @@
     "javascript",
     "notificações"
   ],
-  "author": "",
-  "license": "MIT",
+  "author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
+  "license": "MIT",
   "dependencies": {
-    "flicker-alerts": "^1.0.17"
+    "flicker-alerts": "^1.0.19"
   }
 }

package/{README.md → readme.md} RENAMED Viewed

@@ -40,6 +40,9 @@ export class AppComponent {
       type: 'success',
       title: 'Sucesso',
       message: 'Operação concluída com sucesso!'
+      position: 'top-righ'
+      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
     });
   }
@@ -48,6 +51,8 @@ export class AppComponent {
       type: 'info',
       title: 'Informação',
       message: 'Aqui está uma informação importante.'
+       position: 'top-righ'
+      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
     });
   }
@@ -56,6 +61,8 @@ export class AppComponent {
       type: 'warning',
       title: 'Alerta',
       message: 'Por favor, preste atenção nisso!'
+       position: 'top-righ'
+      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
     });
   }
@@ -64,6 +71,8 @@ export class AppComponent {
       type: 'danger',
       title: 'Erro',
       message: 'Ocorreu um erro inesperado!'
+       position: 'top-righ'
+      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
     });
   }
 }
@@ -96,6 +105,8 @@ function App() {
       type: 'success',
       title: 'Sucesso',
       message: 'Operação concluída com sucesso!'
+      position: 'top-righ'
+      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
     });
   };
 }

package/{index.js → src/index.js} RENAMED Viewed

@@ -1,3 +1,6 @@
+import './src/style.css'; // Certifique-se de usar o caminho certo aqui
 const FlickerAlerts = {
   showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
     // Verifique se está no ambiente do navegador (client-side) antes de tentar manipular o DOM

package/index.html DELETED Viewed

@@ -1,246 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-BR">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FlickerAlerts</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-    />
-    <link rel="stylesheet" href="style.css" />
-    <style>
-      /* Estilo para os botões */
-      .btn {
-        font-size: 14px;
-        padding: 8px 16px;
-        border-radius: 8px;
-        width: 100%;
-        /* Botões ocupam 100% do espaço das colunas */
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-      }
-      .btn:hover {
-        transform: scale(1.05);
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-      }
-      /* Botões específicos */
-      .btn-success {
-        background-color: #28a745;
-        color: white;
-      }
-      .btn-info {
-        background-color: #17a2b8;
-        color: white;
-      }
-      .btn-warning {
-        background-color: #ffc107;
-        color: black;
-      }
-      .btn-danger {
-        background-color: #dc3545;
-        color: white;
-      }
-      .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-        margin-top: 30px;
-      }
-      /* Área da documentação */
-      .doc-section {
-        margin-top: 30px;
-        width: 100%;
-        max-width: 800px;
-      }
-      .doc-section h3 {
-        margin-bottom: 10px;
-        font-size: 22px;
-        text-align: center;
-      }
-      .doc-section p {
-        font-size: 16px;
-        line-height: 1.5;
-      }
-      .doc-section pre {
-        background-color: #1e1e1e;
-        /* Fundo escuro estilo VSCode */
-        color: #dcdcdc;
-        /* Texto claro */
-        padding: 10px;
-        border-radius: 4px;
-        font-size: 14px;
-        overflow-x: auto;
-        border: 1px solid #333;
-        /* Bordas discretas */
-        font-family: "Courier New", Courier, monospace;
-        /* Fonte monoespaçada */
-      }
-      .doc-section ul {
-        padding-left: 20px;
-      }
-      .doc-section li {
-        margin-bottom: 10px;
-      }
-      /* Ajustes para os botões */
-      .row {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-      }
-      .col {
-        flex: 1 1 100%;
-        max-width: 200px;
-        /* Limita o tamanho dos botões */
-      }
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <h1>FlickerAlerts</h1>
-      <!-- Linha com botões -->
-      <div class="row">
-        <div class="col">
-          <button class="btn btn-success" id="success-btn">
-            Mostrar Sucesso
-          </button>
-        </div>
-        <div class="col">
-          <button class="btn btn-info" id="info-btn">Mostrar Info</button>
-        </div>
-        <div class="col">
-          <button class="btn btn-warning" id="warning-btn">
-            Mostrar Alerta
-          </button>
-        </div>
-        <div class="col">
-          <button class="btn btn-danger" id="error-btn">Mostrar Erro</button>
-        </div>
-      </div>
-      <!-- Área para exibir alertas no canto superior direito -->
-      <div id="alerts-container" class="top-right"></div>
-      <!-- Documentação -->
-      <div class="doc-section">
-        <h3>Documentação de Uso</h3>
-        <p>
-          <strong>FlickerAlerts</strong> é uma biblioteca simples para criar
-          alertas animados de sucesso, erro, aviso e informações. Eles podem ser
-          exibidos automaticamente ou ser fechados manualmente pelo usuário.
-        </p>
-        <h4>Instalação</h4>
-        <p>Instale via <code>npm</code>:</p>
-        <pre><code>npm install flicker-alerts</code></pre>
-        <h4>Uso</h4>
-        <p>
-          Após a instalação, a biblioteca será importada no seu código, e você
-          não precisará mais incluir o arquivo <code>script</code> diretamente
-          no HTML. Em vez disso, você utilizará a função
-          <code>showAlert</code> em seus componentes.
-        </p>
-        <h4>Uso no Angular</h4>
-        <p>
-          Com o <code>FlickerAlerts</code> instalado, importe-o no seu
-          componente Angular e utilize-o conforme mostrado abaixo:
-        </p>
-        <pre><code>import FlickerAlerts from 'flicker-alerts';
-export class AppComponent {
-  showSuccessAlert() {
-    FlickerAlerts.showAlert({
-      type: 'success',
-      title: 'Sucesso',
-      message: 'Operação concluída com sucesso!'
-    });
-  }
-  showInfoAlert() {
-    FlickerAlerts.showAlert({
-      type: 'info',
-      title: 'Informação',
-      message: 'Aqui está uma informação importante.'
-    });
-  }
-  showWarningAlert() {
-    FlickerAlerts.showAlert({
-      type: 'warning',
-      title: 'Alerta',
-      message: 'Por favor, preste atenção nisso!'
-    });
-  }
-  showErrorAlert() {
-    FlickerAlerts.showAlert({
-      type: 'danger',
-      title: 'Erro',
-      message: 'Ocorreu um erro inesperado!'
-    });
-  }
-}
-</code>
-</pre>
-<p>
-    Caso o estilo da biblioteca não esteja sendo aplicado corretamente, adicione o caminho do CSS no
-    arquivo <code>angular.json</code>:
-    "styles": [
-"node_modules/flicker-alerts/style.css"
-]
-  </p>
-        <h4>Uso no React</h4>
-        <p>
-          Com o <code>FlickerAlerts</code> instalado, você pode usá-lo no seu
-          componente React assim:
-        </p>
-        <pre><code>import FlickerAlerts from 'flicker-alerts';
-function App() {
-  const showSuccessAlert = () => {
-    FlickerAlerts.showAlert({
-      type: 'success',
-      title: 'Sucesso',
-      message: 'Operação concluída com sucesso!'
-    });
-  };
-}</code></pre>
-      <p>
-        No React, basta importar o CSS diretamente no arquivo principal, como
-        <code>index.js</code> ou <code>App.js</code>:
-        import 'flicker-alerts/style.css';
-      </p>
-    <script src="index.js" type="module"></script>
-  </body>
-</html>

/package/{index.d.ts → src/index.d.ts} RENAMED Viewed

File without changes

/package/{style.css → src/style.css} RENAMED Viewed

File without changes