flicker-alerts 1.0.10 → 1.0.12
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.
- package/README.md +25 -0
- package/index.html +193 -137
- package/index.js +73 -74
- package/package.json +6 -3
- package/style.css +29 -4
package/README.md
CHANGED
|
@@ -67,7 +67,21 @@ export class AppComponent {
|
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
70
74
|
```
|
|
75
|
+
# Caso o Estilo Não Esteja Sendo Aplicado no Angular
|
|
76
|
+
Se o estilo da biblioteca não estiver sendo aplicado corretamente, verifique se você adicionou o caminho para o arquivo CSS no angular.json.
|
|
77
|
+
|
|
78
|
+
Abra o arquivo angular.json, e no campo styles dentro de angular.json, adicione o caminho para o CSS da biblioteca, como mostrado abaixo:
|
|
79
|
+
|
|
80
|
+
"styles": [
|
|
81
|
+
"node_modules/flicker-alerts/style.css"
|
|
82
|
+
]
|
|
83
|
+
|
|
84
|
+
---
|
|
71
85
|
|
|
72
86
|
### Uso no React
|
|
73
87
|
|
|
@@ -85,5 +99,16 @@ function App() {
|
|
|
85
99
|
});
|
|
86
100
|
};
|
|
87
101
|
}
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
88
105
|
```
|
|
89
106
|
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
# Caso o Estilo Não Esteja Sendo Aplicado no React
|
|
110
|
+
No React, você não precisa de um arquivo de configuração centralizado como o angular.json. Para garantir que o estilo da biblioteca FlickerAlert seja aplicado corretamente, basta importar o arquivo CSS diretamente no seu código.
|
|
111
|
+
|
|
112
|
+
No arquivo principal, como index.js ou App.js, adicione a seguinte linha para importar o CSS:
|
|
113
|
+
|
|
114
|
+
import 'flicker-alerts/style.css';
|
package/index.html
CHANGED
|
@@ -1,135 +1,173 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="pt-BR">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8"
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>FlickerAlerts</title>
|
|
7
|
-
<link
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<link
|
|
8
|
+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
9
|
+
rel="stylesheet"
|
|
10
|
+
/>
|
|
11
|
+
<link
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
14
|
+
/>
|
|
15
|
+
<link rel="stylesheet" href="style.css" />
|
|
10
16
|
<style>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
/*
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
17
|
+
/* Estilo para os botões */
|
|
18
|
+
.btn {
|
|
19
|
+
font-size: 14px;
|
|
20
|
+
padding: 8px 16px;
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
width: 100%;
|
|
23
|
+
/* Botões ocupam 100% do espaço das colunas */
|
|
24
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.btn:hover {
|
|
28
|
+
transform: scale(1.05);
|
|
29
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Botões específicos */
|
|
33
|
+
.btn-success {
|
|
34
|
+
background-color: #28a745;
|
|
35
|
+
color: white;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.btn-info {
|
|
39
|
+
background-color: #17a2b8;
|
|
40
|
+
color: white;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.btn-warning {
|
|
44
|
+
background-color: #ffc107;
|
|
45
|
+
color: black;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.btn-danger {
|
|
49
|
+
background-color: #dc3545;
|
|
50
|
+
color: white;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.container {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: 20px;
|
|
58
|
+
margin-top: 30px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Área da documentação */
|
|
62
|
+
.doc-section {
|
|
63
|
+
margin-top: 30px;
|
|
64
|
+
width: 100%;
|
|
65
|
+
max-width: 800px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.doc-section h3 {
|
|
69
|
+
margin-bottom: 10px;
|
|
70
|
+
font-size: 22px;
|
|
71
|
+
text-align: center;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.doc-section p {
|
|
75
|
+
font-size: 16px;
|
|
76
|
+
line-height: 1.5;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.doc-section pre {
|
|
80
|
+
background-color: #1e1e1e;
|
|
81
|
+
/* Fundo escuro estilo VSCode */
|
|
82
|
+
color: #dcdcdc;
|
|
83
|
+
/* Texto claro */
|
|
84
|
+
padding: 10px;
|
|
85
|
+
border-radius: 4px;
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
overflow-x: auto;
|
|
88
|
+
border: 1px solid #333;
|
|
89
|
+
/* Bordas discretas */
|
|
90
|
+
font-family: "Courier New", Courier, monospace;
|
|
91
|
+
/* Fonte monoespaçada */
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.doc-section ul {
|
|
95
|
+
padding-left: 20px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.doc-section li {
|
|
99
|
+
margin-bottom: 10px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Ajustes para os botões */
|
|
103
|
+
.row {
|
|
104
|
+
display: flex;
|
|
105
|
+
justify-content: center;
|
|
106
|
+
gap: 10px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.col {
|
|
110
|
+
flex: 1 1 100%;
|
|
111
|
+
max-width: 200px;
|
|
112
|
+
/* Limita o tamanho dos botões */
|
|
113
|
+
}
|
|
93
114
|
</style>
|
|
94
|
-
</head>
|
|
95
|
-
|
|
115
|
+
</head>
|
|
116
|
+
|
|
117
|
+
<body>
|
|
96
118
|
<div class="container">
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<button class="btn btn-info" id="info-btn">Mostrar Info</button>
|
|
106
|
-
</div>
|
|
107
|
-
<div class="col">
|
|
108
|
-
<button class="btn btn-warning" id="warning-btn">Mostrar Alerta</button>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="col">
|
|
111
|
-
<button class="btn btn-danger" id="error-btn">Mostrar Erro</button>
|
|
112
|
-
</div>
|
|
119
|
+
<h1>FlickerAlerts</h1>
|
|
120
|
+
|
|
121
|
+
<!-- Linha com botões -->
|
|
122
|
+
<div class="row">
|
|
123
|
+
<div class="col">
|
|
124
|
+
<button class="btn btn-success" id="success-btn">
|
|
125
|
+
Mostrar Sucesso
|
|
126
|
+
</button>
|
|
113
127
|
</div>
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
128
|
+
<div class="col">
|
|
129
|
+
<button class="btn btn-info" id="info-btn">Mostrar Info</button>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="col">
|
|
132
|
+
<button class="btn btn-warning" id="warning-btn">
|
|
133
|
+
Mostrar Alerta
|
|
134
|
+
</button>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="col">
|
|
137
|
+
<button class="btn btn-danger" id="error-btn">Mostrar Erro</button>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<!-- Área para exibir alertas no canto superior direito -->
|
|
142
|
+
<div id="alerts-container" class="top-right"></div>
|
|
143
|
+
|
|
144
|
+
<!-- Documentação -->
|
|
145
|
+
<div class="doc-section">
|
|
146
|
+
<h3>Documentação de Uso</h3>
|
|
147
|
+
<p>
|
|
148
|
+
<strong>FlickerAlerts</strong> é uma biblioteca simples para criar
|
|
149
|
+
alertas animados de sucesso, erro, aviso e informações. Eles podem ser
|
|
150
|
+
exibidos automaticamente ou ser fechados manualmente pelo usuário.
|
|
151
|
+
</p>
|
|
152
|
+
|
|
153
|
+
<h4>Instalação</h4>
|
|
154
|
+
<p>Instale via <code>npm</code>:</p>
|
|
155
|
+
<pre><code>npm install flicker-alerts</code></pre>
|
|
156
|
+
|
|
157
|
+
<h4>Uso</h4>
|
|
158
|
+
<p>
|
|
159
|
+
Após a instalação, a biblioteca será importada no seu código, e você
|
|
160
|
+
não precisará mais incluir o arquivo <code>script</code> diretamente
|
|
161
|
+
no HTML. Em vez disso, você utilizará a função
|
|
162
|
+
<code>showAlert</code> em seus componentes.
|
|
163
|
+
</p>
|
|
164
|
+
|
|
165
|
+
<h4>Uso no Angular</h4>
|
|
166
|
+
<p>
|
|
167
|
+
Com o <code>FlickerAlerts</code> instalado, importe-o no seu
|
|
168
|
+
componente Angular e utilize-o conforme mostrado abaixo:
|
|
169
|
+
</p>
|
|
170
|
+
<pre><code>import FlickerAlerts from 'flicker-alerts';
|
|
133
171
|
|
|
134
172
|
export class AppComponent {
|
|
135
173
|
showSuccessAlert() {
|
|
@@ -163,11 +201,25 @@ export class AppComponent {
|
|
|
163
201
|
message: 'Ocorreu um erro inesperado!'
|
|
164
202
|
});
|
|
165
203
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
204
|
+
|
|
205
|
+
}
|
|
206
|
+
</code>
|
|
207
|
+
|
|
208
|
+
</pre>
|
|
209
|
+
<p>
|
|
210
|
+
Caso o estilo da biblioteca não esteja sendo aplicado corretamente, adicione o caminho do CSS no
|
|
211
|
+
arquivo <code>angular.json</code>:
|
|
212
|
+
"styles": [
|
|
213
|
+
"node_modules/flicker-alerts/style.css"
|
|
214
|
+
]
|
|
215
|
+
|
|
216
|
+
</p>
|
|
217
|
+
<h4>Uso no React</h4>
|
|
218
|
+
<p>
|
|
219
|
+
Com o <code>FlickerAlerts</code> instalado, você pode usá-lo no seu
|
|
220
|
+
componente React assim:
|
|
221
|
+
</p>
|
|
222
|
+
<pre><code>import FlickerAlerts from 'flicker-alerts';
|
|
171
223
|
|
|
172
224
|
function App() {
|
|
173
225
|
const showSuccessAlert = () => {
|
|
@@ -180,11 +232,15 @@ function App() {
|
|
|
180
232
|
|
|
181
233
|
|
|
182
234
|
}</code></pre>
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
235
|
+
|
|
236
|
+
<p>
|
|
237
|
+
No React, basta importar o CSS diretamente no arquivo principal, como
|
|
238
|
+
<code>index.js</code> ou <code>App.js</code>:
|
|
239
|
+
import 'flicker-alerts/style.css';
|
|
240
|
+
</p>
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
<script src="index.js" type="module"></script>
|
|
245
|
+
</body>
|
|
190
246
|
</html>
|
package/index.js
CHANGED
|
@@ -1,78 +1,77 @@
|
|
|
1
1
|
const FlickerAlerts = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
// Criação do alerta
|
|
16
|
-
const alertBox = document.createElement('div');
|
|
17
|
-
alertBox.className = `alert-custom alert-${type}`;
|
|
18
|
-
|
|
19
|
-
// Ícone
|
|
20
|
-
const icon = document.createElement('div');
|
|
21
|
-
icon.className = 'icon';
|
|
22
|
-
const iconClass = {
|
|
23
|
-
success: 'fa-check',
|
|
24
|
-
info: 'fa-info',
|
|
25
|
-
warning: 'fa-exclamation',
|
|
26
|
-
danger: 'fa-times'
|
|
27
|
-
}[type];
|
|
28
|
-
icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
|
|
29
|
-
alertBox.appendChild(icon);
|
|
30
|
-
|
|
31
|
-
// Conteúdo
|
|
32
|
-
const content = document.createElement('div');
|
|
33
|
-
content.innerHTML = `<strong>${title}</strong><div>${message}</div>`;
|
|
34
|
-
alertBox.appendChild(content);
|
|
35
|
-
|
|
36
|
-
// Botão de fechamento
|
|
37
|
-
const closeButton = document.createElement('div');
|
|
38
|
-
closeButton.className = 'close';
|
|
39
|
-
closeButton.innerHTML = '<i class="fas fa-times"></i>';
|
|
40
|
-
closeButton.onclick = () => alertBox.remove();
|
|
41
|
-
alertBox.appendChild(closeButton);
|
|
42
|
-
|
|
43
|
-
// Barra de progresso
|
|
44
|
-
const progressBar = document.createElement('div');
|
|
45
|
-
progressBar.className = `progress-bar progress-bar-${type}`;
|
|
46
|
-
alertBox.appendChild(progressBar);
|
|
47
|
-
|
|
48
|
-
// Adicionar ao container
|
|
49
|
-
container.appendChild(alertBox);
|
|
50
|
-
|
|
51
|
-
// Remoção automática após o tempo especificado
|
|
52
|
-
setTimeout(() => alertBox.remove(), timer);
|
|
2
|
+
showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
|
|
3
|
+
// Verifique se está no ambiente do navegador (client-side) antes de tentar manipular o DOM
|
|
4
|
+
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
|
5
|
+
// Garantir que o container de alertas exista, se não, criá-lo
|
|
6
|
+
let container = document.getElementById('alerts-container');
|
|
7
|
+
if (!container) {
|
|
8
|
+
// Cria o container se ele não existir
|
|
9
|
+
container = document.createElement('div');
|
|
10
|
+
container.id = 'alerts-container';
|
|
11
|
+
container.className = position; // Aplica a classe para posicionar com base na posição fornecida
|
|
12
|
+
document.body.appendChild(container); // Adiciona o container ao body
|
|
53
13
|
}
|
|
14
|
+
|
|
15
|
+
// Criação do alerta
|
|
16
|
+
const alertBox = document.createElement('div');
|
|
17
|
+
alertBox.className = `alert-custom alert-${type}`;
|
|
18
|
+
|
|
19
|
+
// Ícone
|
|
20
|
+
const icon = document.createElement('div');
|
|
21
|
+
icon.className = 'icon';
|
|
22
|
+
const iconClass = {
|
|
23
|
+
success: 'fa-check',
|
|
24
|
+
info: 'fa-info',
|
|
25
|
+
warning: 'fa-exclamation',
|
|
26
|
+
danger: 'fa-times'
|
|
27
|
+
}[type];
|
|
28
|
+
icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
|
|
29
|
+
alertBox.appendChild(icon);
|
|
30
|
+
|
|
31
|
+
// Conteúdo
|
|
32
|
+
const content = document.createElement('div');
|
|
33
|
+
content.innerHTML = `<strong>${title}</strong><div>${message}</div>`;
|
|
34
|
+
alertBox.appendChild(content);
|
|
35
|
+
|
|
36
|
+
// Botão de fechamento
|
|
37
|
+
const closeButton = document.createElement('div');
|
|
38
|
+
closeButton.className = 'close';
|
|
39
|
+
closeButton.innerHTML = '<i class="fas fa-times"></i>';
|
|
40
|
+
closeButton.onclick = () => alertBox.remove();
|
|
41
|
+
alertBox.appendChild(closeButton);
|
|
42
|
+
|
|
43
|
+
// Barra de progresso
|
|
44
|
+
const progressBar = document.createElement('div');
|
|
45
|
+
progressBar.className = `progress-bar progress-bar-${type}`;
|
|
46
|
+
alertBox.appendChild(progressBar);
|
|
47
|
+
|
|
48
|
+
// Adicionar ao container
|
|
49
|
+
container.appendChild(alertBox);
|
|
50
|
+
|
|
51
|
+
// Remoção automática após o tempo especificado
|
|
52
|
+
setTimeout(() => alertBox.remove(), timer);
|
|
54
53
|
}
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
// Botões de teste - Eles podem ser removidos se não forem necessários
|
|
58
|
-
if (typeof document !== 'undefined') {
|
|
59
|
-
document.getElementById('success-btn')?.addEventListener('click', () => {
|
|
60
|
-
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: 'A operação foi concluída com êxito!' });
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
document.getElementById('info-btn')?.addEventListener('click', () => {
|
|
64
|
-
FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: 'Aqui está uma informação importante.' });
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
document.getElementById('warning-btn')?.addEventListener('click', () => {
|
|
68
|
-
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: 'Por favor, preste atenção nisso!' });
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
document.getElementById('error-btn')?.addEventListener('click', () => {
|
|
72
|
-
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: 'Ocorreu um erro inesperado!' });
|
|
73
|
-
});
|
|
74
54
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// Botões de teste - Eles podem ser removidos se não forem necessários
|
|
58
|
+
if (typeof document !== 'undefined') {
|
|
59
|
+
document.getElementById('success-btn')?.addEventListener('click', () => {
|
|
60
|
+
FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: 'A operação foi concluída com êxito!' });
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
document.getElementById('info-btn')?.addEventListener('click', () => {
|
|
64
|
+
FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: 'Aqui está uma informação importante.' });
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
document.getElementById('warning-btn')?.addEventListener('click', () => {
|
|
68
|
+
FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: 'Por favor, preste atenção nisso!' });
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
document.getElementById('error-btn')?.addEventListener('click', () => {
|
|
72
|
+
FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: 'Ocorreu um erro inesperado!' });
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Exportação
|
|
77
|
+
export default FlickerAlerts;
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flicker-alerts",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "Biblioteca para alertas animados",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
7
|
-
"style": "style.css",
|
|
7
|
+
"style": "style.css",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
10
10
|
},
|
|
@@ -14,5 +14,8 @@
|
|
|
14
14
|
"notificações"
|
|
15
15
|
],
|
|
16
16
|
"author": "",
|
|
17
|
-
"license": "MIT"
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"flicker-alerts": "^1.0.10"
|
|
20
|
+
}
|
|
18
21
|
}
|
package/style.css
CHANGED
|
@@ -106,17 +106,42 @@
|
|
|
106
106
|
color: white;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
/*
|
|
110
|
-
.top-right {
|
|
109
|
+
/* Classes para o container de alertas */
|
|
110
|
+
.top-right, .top-left, .bottom-right, .bottom-left, .center {
|
|
111
111
|
position: fixed;
|
|
112
|
-
top: 1rem;
|
|
113
|
-
right: 1rem;
|
|
114
112
|
display: flex;
|
|
115
113
|
flex-direction: column;
|
|
116
114
|
gap: 0.5rem;
|
|
117
115
|
z-index: 1050;
|
|
118
116
|
}
|
|
119
117
|
|
|
118
|
+
/* Posicionamento específico para cada caso */
|
|
119
|
+
.top-right {
|
|
120
|
+
top: 1rem;
|
|
121
|
+
right: 1rem;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.top-left {
|
|
125
|
+
top: 1rem;
|
|
126
|
+
left: 1rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.bottom-right {
|
|
130
|
+
bottom: 1rem;
|
|
131
|
+
right: 1rem;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.bottom-left {
|
|
135
|
+
bottom: 1rem;
|
|
136
|
+
left: 1rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.center {
|
|
140
|
+
top: 50%;
|
|
141
|
+
left: 50%;
|
|
142
|
+
transform: translate(-50%, -50%);
|
|
143
|
+
}
|
|
144
|
+
|
|
120
145
|
/* Barra de progresso */
|
|
121
146
|
.progress-bar {
|
|
122
147
|
position: absolute;
|