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

flicker-alerts 1.0.17 → 1.0.19

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