npm - flicker-alerts - Versions diffs - 1.0.55 → 1.0.57 - Mend

flicker-alerts 1.0.55 → 1.0.57

Files changed (2) hide show

package/package.json +2 -2
package/index.html +0 -283

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "flicker-alerts",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Biblioteca para alertas animados",
   "main": "index.js",
   "types": "index.d.ts",
@@ -16,6 +16,6 @@
   "author": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
   "license": "MIT",
   "dependencies": {
-    "flicker-alerts": "^1.0.55"
+    "flicker-alerts": "^1.0.57"
   }
 }

package/index.html DELETED Viewed

@@ -1,283 +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">
-            Alerta 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">
-            Alerta Alerta
-          </button>
-        </div>
-        <div class="col">
-          <button class="btn btn-danger" id="error-btn">Alerta Erro</button>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <button class="btn btn-warning" id="modal-warning-btn">Modal de Alerta</button>
-        </div>
-        <div class="col">
-          <button class="btn btn-danger" id="modal-delete-btn">Modal de Deletar</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>
-          <a class="linkedin" href="https://www.linkedin.com/in/bruno-carneiro-9a51aa190/" target="_blank">
-            <i class="fab fa-linkedin"></i> LinkedIn
-          </a>
-        </h3>
-        <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>Importação</h4>
-        <p>Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome.</p>
-        <p class="text-import">  <!-- Importação do Bootstrap -->
-  "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-  <!-- Importação do Font Awesome -->
-"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-</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. Você não precisará mais incluir o arquivo <code>script</code> diretamente no HTML.
-          Em vez disso, use 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>
-          <strong class="text-import">import FlickerAlerts, { FlickerModals } from 'flicker-alerts';</strong>
-          export class AppComponent {
-            showAlert() {
-              FlickerAlerts.showAlert({
-                type: 'success', <strong class="text-comment">// Opções: 'success', 'info', 'warning', 'danger'</strong>
-                title: 'Título',
-                message: 'Mensagem personalizada',
-                position: 'top-right'  <br>
-                <strong class="text-comment"> // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'</strong>
-              });
-            }
-          }
-        </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>:
-          <code>"styles": ["node_modules/flicker-alerts/style.css"]</code>
-        </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>
-          <strong class="text-import">import FlickerAlerts, { FlickerModals } from 'flicker-alerts';</strong>
-          const showAlert = () => {
-            FlickerAlerts.showAlert({
-              type: 'success', <strong class="text-comment">// Opções: 'success', 'info', 'warning', 'danger'</strong>
-              title: 'Título',
-              message: 'Mensagem personalizada',
-              position: 'top-right'  <br>
-              <strong class="text-comment"> // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'</strong>
-            });
-          };
-        </code></pre>
-        <p>
-          Caso o estilo da biblioteca não esteja sendo aplicado corretamente, basta importar o CSS diretamente no arquivo principal, como
-          <code>index.js</code> ou <code>App.js</code>:
-          <code>import 'flicker-alerts/style.css';</code>
-        </p>
-        <h4> Modais</h4>
-        <p> Aqui estão as instruções para usar modais com <code>FlickerAlerts</code>. </p>
-        <h4>Uso no Angular</h4>
-        <pre><code>
-          <strong class="text-import">import FlickerAlerts, { FlickerModals } from 'flicker-alerts';</strong>
-          export class AppComponent {
-            showModal() {
-              FlickerModals.showModal({
-                type: 'warning', <strong class="text-comment">// Tipos: 'warning', 'delete'</strong>
-                title: 'Título do Modal',
-                message: 'Mensagem personalizada para o modal.',
-                onConfirm: () => { console.log('Confirmado!'); },
-                onCancel: () => { console.log('Cancelado!'); }
-              });
-            }
-          }
-        </code></pre>
-        <h4>Uso no React</h4>
-        <p>
-          Com o <code>FlickerAlerts</code> instalado, você pode usá-lo no seu componente React assim:
-        </p>
-        <pre><code>
-          <strong class="text-import">import FlickerAlerts, { FlickerModals } from 'flicker-alerts';</strong>
-          const showModal = () => {
-            FlickerModals.showModal({
-              type: 'delete', <strong class="text-comment">// Tipos: 'warning', 'delete'</strong>
-              title: 'Título do Modal',
-              message: 'Mensagem personalizada para o modal.',
-              onConfirm: () => { console.log('Deletado com sucesso!'); },
-              onCancel: () => { console.log('Cancelado!'); }
-            });
-          };
-        </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> ou
-          <code>index.js</code> para React:
-          <code>import 'flicker-alerts/style.css';</code>
-        </p>
-      </div>
-    </div>
-    <script src="index.js" type="module"></script>
-  </body>
-</html>