flicker-alerts 1.0.31 → 1.0.33
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/index.d.ts +4 -3
- package/index.html +283 -0
- package/index.js +3 -13
- package/package.json +2 -2
- package/style.css +1 -1
package/index.d.ts
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
declare module 'flicker-alerts' {
|
|
2
2
|
// Definição das opções para os alertas
|
|
3
3
|
interface AlertOptions {
|
|
4
|
-
type: 'success' | 'info' | 'warning' | 'danger';
|
|
4
|
+
type: 'success' | 'info' | 'warning' | 'danger'; // Tipos de alerta disponíveis
|
|
5
5
|
title: string;
|
|
6
6
|
message: string;
|
|
7
|
-
|
|
7
|
+
timer?: number; // Duração opcional do alerta (em milissegundos)
|
|
8
8
|
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center'; // Posições possíveis do alerta
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
// Definição das opções para os modais
|
|
12
12
|
interface ModalOptions {
|
|
13
|
-
type: 'warning' | '
|
|
13
|
+
type: 'warning' | 'delete' ; // Tipos de modal disponíveis
|
|
14
14
|
title: string;
|
|
15
15
|
message: string;
|
|
16
16
|
onConfirm?: () => void; // Função executada no botão de confirmação
|
|
17
17
|
onCancel?: () => void; // Função executada no botão de cancelamento
|
|
18
|
+
timer?: number; // Duração opcional do modal (em milissegundos)
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
// Classe principal para a biblioteca FlickerAlerts
|
package/index.html
ADDED
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>FlickerAlerts</title>
|
|
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" />
|
|
16
|
+
<style>
|
|
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
|
+
}
|
|
114
|
+
</style>
|
|
115
|
+
</head>
|
|
116
|
+
|
|
117
|
+
<body>
|
|
118
|
+
<div class="container">
|
|
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
|
+
Alerta Sucesso
|
|
126
|
+
</button>
|
|
127
|
+
</div>
|
|
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
|
+
Alerta Alerta
|
|
134
|
+
</button>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="col">
|
|
137
|
+
<button class="btn btn-danger" id="error-btn">Alerta Erro</button>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="row">
|
|
141
|
+
<div class="col">
|
|
142
|
+
<button class="btn btn-warning" id="modal-warning-btn">Modal de Alerta</button>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="col">
|
|
145
|
+
<button class="btn btn-danger" id="modal-delete-btn">Modal de Deletar</button>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<!-- Área para exibir alertas no canto superior direito -->
|
|
150
|
+
<div id="alerts-container" class="top-right"></div>
|
|
151
|
+
|
|
152
|
+
<!-- Documentação -->
|
|
153
|
+
<div class="doc-section">
|
|
154
|
+
<h3>
|
|
155
|
+
<a class="linkedin" href="https://www.linkedin.com/in/bruno-carneiro-9a51aa190/" target="_blank">
|
|
156
|
+
<i class="fab fa-linkedin"></i> LinkedIn
|
|
157
|
+
</a>
|
|
158
|
+
</h3>
|
|
159
|
+
|
|
160
|
+
<h3>Documentação de Uso</h3>
|
|
161
|
+
<p>
|
|
162
|
+
<strong>FlickerAlerts</strong> é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações.
|
|
163
|
+
Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
|
|
164
|
+
</p>
|
|
165
|
+
|
|
166
|
+
<h4>Importação</h4>
|
|
167
|
+
<p>Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome.</p>
|
|
168
|
+
<p class="text-import"> <!-- Importação do Bootstrap -->
|
|
169
|
+
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
170
|
+
|
|
171
|
+
<!-- Importação do Font Awesome -->
|
|
172
|
+
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
173
|
+
</p>
|
|
174
|
+
|
|
175
|
+
<h4>Instalação</h4>
|
|
176
|
+
<p>Instale via <code>npm</code>:</p>
|
|
177
|
+
<pre><code>npm install flicker-alerts</code></pre>
|
|
178
|
+
|
|
179
|
+
<h4>Uso</h4>
|
|
180
|
+
<p>
|
|
181
|
+
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.
|
|
182
|
+
Em vez disso, use a função <code>showAlert</code> em seus componentes.
|
|
183
|
+
</p>
|
|
184
|
+
|
|
185
|
+
<h4>Uso no Angular</h4>
|
|
186
|
+
<p>
|
|
187
|
+
Com o <code>FlickerAlerts</code> instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:
|
|
188
|
+
</p>
|
|
189
|
+
<pre><code>
|
|
190
|
+
<strong class="text-import">import FlickerAlerts from 'flicker-alerts';</strong>
|
|
191
|
+
|
|
192
|
+
export class AppComponent {
|
|
193
|
+
showAlert() {
|
|
194
|
+
FlickerAlerts.showAlert({
|
|
195
|
+
type: 'success', <strong class="text-comment">// Opções: 'success', 'info', 'warning', 'danger'</strong>
|
|
196
|
+
title: 'Título',
|
|
197
|
+
message: 'Mensagem personalizada',
|
|
198
|
+
position: 'top-right' <br>
|
|
199
|
+
<strong class="text-comment"> // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'</strong>
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
</code></pre>
|
|
204
|
+
|
|
205
|
+
<p>
|
|
206
|
+
Caso o estilo da biblioteca não esteja sendo aplicado corretamente, adicione o caminho do CSS no arquivo <code>angular.json</code>:
|
|
207
|
+
<code>"styles": ["node_modules/flicker-alerts/style.css"]</code>
|
|
208
|
+
</p>
|
|
209
|
+
|
|
210
|
+
<h4>Uso no React</h4>
|
|
211
|
+
<p>
|
|
212
|
+
Com o <code>FlickerAlerts</code> instalado, você pode usá-lo no seu componente React assim:
|
|
213
|
+
</p>
|
|
214
|
+
<pre><code>
|
|
215
|
+
<strong class="text-import">import FlickerAlerts from 'flicker-alerts';</strong>
|
|
216
|
+
|
|
217
|
+
const showAlert = () => {
|
|
218
|
+
FlickerAlerts.showAlert({
|
|
219
|
+
type: 'success', <strong class="text-comment">// Opções: 'success', 'info', 'warning', 'danger'</strong>
|
|
220
|
+
title: 'Título',
|
|
221
|
+
message: 'Mensagem personalizada',
|
|
222
|
+
position: 'top-right' <br>
|
|
223
|
+
<strong class="text-comment"> // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'</strong>
|
|
224
|
+
});
|
|
225
|
+
};
|
|
226
|
+
</code></pre>
|
|
227
|
+
|
|
228
|
+
<p>
|
|
229
|
+
Caso o estilo da biblioteca não esteja sendo aplicado corretamente, basta importar o CSS diretamente no arquivo principal, como
|
|
230
|
+
<code>index.js</code> ou <code>App.js</code>:
|
|
231
|
+
<code>import 'flicker-alerts/style.css';</code>
|
|
232
|
+
</p>
|
|
233
|
+
|
|
234
|
+
<h4> Modais</h4>
|
|
235
|
+
<p> Aqui estão as instruções para usar modais com <code>FlickerAlerts</code>. </p>
|
|
236
|
+
|
|
237
|
+
<h4>Uso no Angular</h4>
|
|
238
|
+
<pre><code>
|
|
239
|
+
<strong class="text-import">import FlickerAlerts from 'flicker-alerts';</strong>
|
|
240
|
+
|
|
241
|
+
export class AppComponent {
|
|
242
|
+
showModal() {
|
|
243
|
+
FlickerAlerts.showModal({
|
|
244
|
+
type: 'warning', <strong class="text-comment">// Tipos: 'warning', 'delete'</strong>
|
|
245
|
+
title: 'Título do Modal',
|
|
246
|
+
message: 'Mensagem personalizada para o modal.',
|
|
247
|
+
onConfirm: () => { console.log('Confirmado!'); },
|
|
248
|
+
onCancel: () => { console.log('Cancelado!'); }
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
</code></pre>
|
|
253
|
+
|
|
254
|
+
<h4>Uso no React</h4>
|
|
255
|
+
<p>
|
|
256
|
+
Com o <code>FlickerAlerts</code> instalado, você pode usá-lo no seu componente React assim:
|
|
257
|
+
</p>
|
|
258
|
+
<pre><code>
|
|
259
|
+
<strong class="text-import">import FlickerAlerts from 'flicker-alerts';</strong>
|
|
260
|
+
|
|
261
|
+
const showModal = () => {
|
|
262
|
+
FlickerAlerts.showModal({
|
|
263
|
+
type: 'delete', <strong class="text-comment">// Tipos: 'warning', 'delete'</strong>
|
|
264
|
+
title: 'Título do Modal',
|
|
265
|
+
message: 'Mensagem personalizada para o modal.',
|
|
266
|
+
onConfirm: () => { console.log('Deletado com sucesso!'); },
|
|
267
|
+
onCancel: () => { console.log('Cancelado!'); }
|
|
268
|
+
});
|
|
269
|
+
};
|
|
270
|
+
</code></pre>
|
|
271
|
+
|
|
272
|
+
<p>
|
|
273
|
+
Caso o estilo da biblioteca não esteja sendo aplicado corretamente, adicione o caminho do CSS no arquivo <code>angular.json</code> ou
|
|
274
|
+
<code>index.js</code> para React:
|
|
275
|
+
<code>import 'flicker-alerts/style.css';</code>
|
|
276
|
+
</p>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<script src="index.js" type="module"></script>
|
|
281
|
+
</body>
|
|
282
|
+
|
|
283
|
+
</html>
|
package/index.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
1
|
const FlickerAlerts = {
|
|
5
2
|
showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
|
|
6
3
|
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
|
@@ -38,7 +35,7 @@ const FlickerAlerts = {
|
|
|
38
35
|
divider.className = 'divider';
|
|
39
36
|
console.log(`Created divider for ${type}`); // Para depuração
|
|
40
37
|
alertBox.appendChild(divider);
|
|
41
|
-
|
|
38
|
+
|
|
42
39
|
// Conteúdo
|
|
43
40
|
const content = document.createElement('div');
|
|
44
41
|
content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
|
|
@@ -75,9 +72,6 @@ const FlickerAlerts = {
|
|
|
75
72
|
},
|
|
76
73
|
};
|
|
77
74
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
75
|
// Botões de teste - Eles podem ser removidos se não forem necessários
|
|
82
76
|
if (typeof document !== 'undefined') {
|
|
83
77
|
document.getElementById('success-btn')?.addEventListener('click', () => {
|
|
@@ -97,12 +91,8 @@ if (typeof document !== 'undefined') {
|
|
|
97
91
|
});
|
|
98
92
|
}
|
|
99
93
|
|
|
100
|
-
// Exportação
|
|
101
|
-
export default FlickerAlerts;
|
|
102
|
-
|
|
103
|
-
|
|
104
94
|
const FlickerModals = {
|
|
105
|
-
showModal: function ({ type, title, message,
|
|
95
|
+
showModal: function ({ type, title, message, timer = 3000, onConfirm, onCancel }) {
|
|
106
96
|
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
|
107
97
|
let container = document.getElementById('modals-container');
|
|
108
98
|
if (!container) {
|
|
@@ -230,4 +220,4 @@ if (typeof document !== 'undefined') {
|
|
|
230
220
|
});
|
|
231
221
|
}
|
|
232
222
|
|
|
233
|
-
|
|
223
|
+
export default FlickerAlerts;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flicker-alerts",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.33",
|
|
4
4
|
"description": "Biblioteca para alertas animados",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -16,6 +16,6 @@
|
|
|
16
16
|
"author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"flicker-alerts": "^1.0.
|
|
19
|
+
"flicker-alerts": "^1.0.33"
|
|
20
20
|
}
|
|
21
21
|
}
|
package/style.css
CHANGED