flicker-alerts 1.0.55 → 1.0.56
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.html +2 -262
- package/package.json +2 -2
package/index.html
CHANGED
|
@@ -13,271 +13,11 @@
|
|
|
13
13
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
|
14
14
|
/>
|
|
15
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
16
|
</head>
|
|
116
|
-
|
|
117
17
|
<body>
|
|
118
|
-
|
|
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>
|
|
18
|
+
<!-- Seu conteúdo aqui -->
|
|
174
19
|
|
|
175
|
-
|
|
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, { FlickerModals } 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, { FlickerModals } 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, { FlickerModals } from 'flicker-alerts';</strong>
|
|
240
|
-
|
|
241
|
-
export class AppComponent {
|
|
242
|
-
showModal() {
|
|
243
|
-
FlickerModals.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, { FlickerModals } from 'flicker-alerts';</strong>
|
|
260
|
-
|
|
261
|
-
const showModal = () => {
|
|
262
|
-
FlickerModals.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
|
-
|
|
20
|
+
<!-- Inclusão do JS -->
|
|
280
21
|
<script src="index.js" type="module"></script>
|
|
281
22
|
</body>
|
|
282
|
-
|
|
283
23
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flicker-alerts",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.56",
|
|
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-9a53aa190/",
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"flicker-alerts": "^1.0.
|
|
19
|
+
"flicker-alerts": "^1.0.56"
|
|
20
20
|
}
|
|
21
21
|
}
|